Vertical Navigation - Copy this React, Tailwind Component to your project

**Prompt para Purecode AI** Diseña un dashboard web completo para un sistema de contabilidad personalizado para una empresa en Argentina, inspirado en Contabilium, con un enfoque en usabilidad, diseño moderno y cumplimiento de normativas locales. El dashboard debe centralizar la gestión de facturas de gastos, pagos y reportes, con las siguientes funcionalidades y especificaciones: ### **Funcionalidades Requeridas** 1. **Subir Facturas de Gastos**: Formulario para cargar facturas con los siguientes campos: **Descripción**: Campo de texto (máximo 100 caracteres). **Monto**: Campo numérico (mínimo 0, formato ARS con separador de miles y decimales, ej. $1.234,56). **Fecha de Emisión**: Selector de fecha (formato DD/MM/YYYY). **Factura Recurrente**: Checkbox que, al activarse, habilita un dropdown. **Periodo de Recurrencia**: Dropdown con opciones "Mensual" y "Anual" (deshabilitado si el checkbox no está marcado). Botón "Subir Factura" (verde, con hover) que valida los campos (todos requeridos excepto recurrencia) y muestra una alerta de éxito ("Factura subida correctamente"). Los datos se almacenan en una base de datos SQLite. 2. **Registrar Pagos**: Formulario para registrar pagos con los siguientes campos: **Factura**: Dropdown que lista facturas pendientes (no pagadas), mostrando descripción y monto. **Monto**: Campo numérico (formato ARS, debe coincidir o ser menor al monto de la factura seleccionada). **Fecha de Pago**: Selector de fecha (formato DD/MM/YYYY). **Método de Pago**: Dropdown con opciones "Transferencia", "Efectivo", "Tarjeta". Botón "Registrar Pago" (verde, con hover) que valida los campos, marca la factura como pagada, y muestra una alerta ("Pago registrado correctamente"). Actualizar dinámicamente el dropdown de facturas pendientes tras cada registro. 3. **Facturas Recurrentes y Predicción de Gastos**: Sección que muestra una tabla con facturas recurrentes (columnas: Descripción, Monto, Fecha Emisión, Periodo). Card separada que muestra la predicción de gastos mensuales, calculada sumando montos de facturas recurrentes mensuales y dividiendo montos anuales por 12 (formato ARS, ej. $5.432,10). 4. **Reportes**: Sección con botones para generar reportes, cada uno mostrando una tabla con los datos correspondientes: **Gastos del Mes**: Facturas de gastos del mes actual (Descripción, Monto, Fecha Emisión). **Gastos Pendientes**: Facturas no pagadas (Descripción, Monto, Fecha Emisión). **Pagos Realizados**: Pagos registrados (Descripción de la factura, Monto, Fecha de Pago, Método). Cada tabla debe ser responsive, con encabezados fijos y filas alternadas (colores claro/oscuro). Botón "Exportar a CSV" en cada reporte para descargar los datos. 5. **Consideraciones Locales**: Moneda: ARS, con formato $X.XXX,XX (usar Intl.NumberFormat para JavaScript). Fechas: Formato DD/MM/YYYY. Preparar para futura integración con AFIP (facturación electrónica) mediante una estructura de datos extensible (ej. campo para CUIT en facturas, opcional por ahora). Diseño inspirado en Argentina: Colores azul (#00A8E8) y blanco (#FFFFFF), con detalles en celeste (#87CEEB). ### **Especificaciones Técnicas** 1. **Tecnologías**: **Frontend**: HTML5, Tailwind CSS (via CDN) para diseño responsive, JavaScript para lógica. **Base de Datos**: SQLite usando sql.js (via CDN) para ejecutar en el navegador. **Librerías**: sql.js (https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/sql wasm.min.js) para SQLite. UUID (https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js) para generar IDs únicos. Evitar frameworks pesados como React o Node.js; el sistema debe ser un archivo HTML único ejecutable en el navegador. 2. **Estructura de la Base de Datos**: **Tabla `facturas`**: `id`: TEXT (UUID, clave primaria). `tipo`: TEXT (fijo a "gasto"). `descripcion`: TEXT. `monto`: REAL. `fecha_emision`: TEXT (formato YYYY MM DD para SQL). `recurrente`: BOOLEAN (0 o 1). `periodo_recurrencia`: TEXT (NULL, "mensual", o "anual"). `pagada`: BOOLEAN (0 o 1). `cuit`: TEXT (opcional, para futura integración con AFIP). **Tabla `pagos`**: `id`: TEXT (UUID, clave primaria). `factura_id`: TEXT (clave foránea a `facturas.id`). `monto`: REAL. `fecha_pago`: TEXT (formato YYYY MM DD). `metodo`: TEXT ("transferencia", "efectivo", "tarjeta"). Inicializar la base de datos al cargar la página, creando las tablas si no existen. 3. **Funciones JavaScript**: `initDB()`: Inicializa SQLite y crea las tablas. `subirFactura()`: Valida y guarda la factura en la base de datos, limpia el formulario, y actualiza el dropdown de facturas pendientes. `registrarPago()`: Valida y guarda el pago, marca la factura como pagada, y actualiza el dropdown. `verFacturasRecurrentes()`: Consulta y muestra la tabla de facturas recurrentes. `predecirGastos()`: Calcula y muestra la predicción de gastos mensuales. `verGastosMes()`: Muestra facturas del mes actual. `verGastosPendientes()`: Muestra facturas no pagadas. `verPagosRealizados()`: Muestra pagos registrados. `exportarCSV(tabla)`: Genera un archivo CSV con los datos de la tabla especificada. `formatearMoneda(monto)`: Formatea el monto en ARS usando Intl.NumberFormat. `formatearFecha(fecha)`: Convierte fechas entre DD/MM/YYYY y YYYY MM DD. ### **Diseño Visual del Dashboard** 1. **Estructura General**: **Header**: Fondo azul oscuro (#005B99), texto blanco. Título: "Sistema de Contabilidad Argentina" (fuente bold, 24px). Logo placeholder (círculo celeste con iniciales "CA", 40x40px). Botón "Cerrar Sesión" (simulado, rojo suave, alineado a la derecha). **Main**: Fondo gris claro (#F3F4F6). Layout en grid (1 columna en móvil, 2 3 columnas en escritorio). Secciones en tarjetas (cards) con sombra suave, bordes redondeados (8px), y fondo blanco. **Footer**: Fondo azul oscuro (#005B99), texto blanco centrado. Texto: "Desarrollado con Purecode AI 2025". 2. **Secciones del Dashboard**: **Card 1: Subir Facturas**: Título: "Nueva Factura de Gasto" (18px, bold). Formulario en grid (1 columna en móvil, 2 columnas en escritorio). Campos con bordes grises, placeholders claros, y validación visual (borde rojo si falta llenar). Checkbox "Factura Recurrente" con toggle visual (verde al activar). Botón "Subir Factura" (bg green 500, hover:bg green 600, texto blanco, 100% ancho en móvil). **Card 2: Registrar Pagos**: Título: "Registrar Pago" (18px, bold). Dropdown de facturas con scroll si hay más de 5 opciones. Botón "Registrar Pago" (igual estilo que "Subir Factura"). **Card 3: Predicción de Gastos**: Título: "Predicción Mensual" (18px, bold). Texto grande con el monto estimado (24px, bold, formato ARS). Fondo celeste claro (#E6F3FA) para destacar. **Card 4: Reportes**: Título: "Reportes" (18px, bold). Botones en grid (1 columna en móvil, 3 5 en escritorio) para cada reporte (bg blue 500, hover:bg blue 600, texto blanco). Área de resultados con tabla responsive (bordes grises, filas alternadas #FFFFFF/#F9FAFB). Botón "Exportar a CSV" (bg gray 500, hover:bg gray 600, alineado a la derecha). **Card 5: Facturas Recurrentes**: Título: "Facturas Recurrentes" (18px, bold). Tabla con las mismas características que los reportes. 3. **Estilo y Animaciones**: **Colores**: Primario: Azul (#00A8E8). Secundario: Celeste (#87CEEB). Fondo: Gris claro (#F3F4F6). Tarjetas: Blanco (#FFFFFF). Botones positivos: Verde (#10B981). Botones secundarios: Azul oscuro (#005B99). **Tipografía**: Fuente sans serif (Inter o similar, via Tailwind). **Animaciones**: Transiciones suaves en botones (hover: scale 1.05, 0.2s). Fade in para tablas al cargar reportes. Spinner de carga (círculo azul) al procesar acciones (subir factura, registrar pago). **Responsive**: Móvil: 1 columna, botones y campos 100% ancho. Tablet: 2 columnas, tablas con scroll horizontal si es necesario. Escritorio: 3 columnas, layout optimizado para 1280px. ### **Interacciones y Validaciones** 1. **Formularios**: Validar que todos los campos requeridos estén completos antes de enviar. Mostrar mensajes de error en rojo debajo de los campos (ej. "El monto debe ser mayor a 0"). Deshabilitar botones mientras se procesa una acción (mostrar spinner). Limpiar formularios tras envío exitoso. 2. **Dropdowns**: El dropdown de facturas pendientes se actualiza dinámicamente tras subir facturas o registrar pagos. Mostrar "Sin facturas pendientes" si no hay opciones. 3. **Tablas**: Paginación si hay más de 10 filas (botones "Anterior" y "Siguiente"). Ordenamiento por columnas (Descripción, Monto, Fecha) al hacer clic en el encabezado. Filas seleccionables (cambio de fondo a celeste claro al pasar el mouse). 4. **Alertas**: Usar `alert()` para notificaciones de éxito o error (puedes reemplazar con modales si Purecode lo soporta). Ejemplo: "Factura subida correctamente" o "Error: Complete todos los campos". 5. **Exportación**: Generar archivos CSV con nombres como `reporte_gastos_mes_2025 05.csv`. Incluir encabezados y datos formateados (moneda ARS, fechas DD/MM/YYYY). ### **Código Esperado** **Formato**: Un archivo HTML único (`index.html`) que incluya: HTML5 con estructura semántica (header, main, footer). Tailwind CSS via CDN (https://cdn.tailwindcss.com). JavaScript con lógica completa y comentarios explicativos. Dependencias via CDN (sql.js, UUID). **Estructura del Código**: **HTML**: Header con título y logo. Main con grid de tarjetas (facturas, pagos, predicción, reportes, recurrentes). Footer con texto. **CSS**: Tailwind classes para todo el diseño (sin CSS personalizado). Clases como `bg blue 500`, `shadow md`, `rounded lg`, `hover:scale 105`. **JavaScript**: Inicialización de SQLite (`initDB`). Funciones para cada acción (`subirFactura`, `registrarPago`, etc.). Formateo de moneda y fechas (`Intl.NumberFormat`, `Date`). Manejo de tablas y exportación CSV. **Comentarios**: Explicar cada sección (ej. `// Formulario para subir facturas`, `// Calcula predicción de gastos`). Incluir notas sobre cómo extender el sistema (ej. `// Agregar campo CUIT para AFIP aquí`). ### **Consideraciones Adicionales** 1. **Usabilidad**: Diseñado para usuarios no técnicos (emprendedores, pymes). Textos claros en español (ej. "Monto en ARS", "Seleccione factura"). Tooltips en campos complejos (ej. "Marque si esta factura se repite periódicamente" en el checkbox de recurrencia). 2. **Escalabilidad**: Estructura modular para añadir funciones (ej. autenticación, integración con AFIP). Preparar para migración a backend (Node.js, Python) si se desea persistencia permanente. Incluir campo `cuit` en `facturas` (opcional) para futura validación con AFIP. 3. **Rendimiento**: Optimizar consultas SQL para reportes (usar índices si es necesario). Cargar datos de forma asíncrona para evitar bloqueos (usar `async/await` con sql.js). Minimizar el uso de recursos (CDNs ligeros, sin dependencias pesadas). 4. **Pruebas**: Asegurar que el sistema funcione al abrir `index.html` en Chrome/Firefox. Verificar formato de moneda ARS y fechas DD/MM/YYYY en todos los elementos. Probar responsive en móvil (ancho < 640px) y escritorio (> 1280px). 5. **Inspiración Local**: Diseño minimalista, inspirado en herramientas argentinas como Contabilium o NubeCont. Paleta de colores patriótica (azul, celeste, blanco) para conectar con usuarios locales. Preparar para normativas fiscales (ej. estructura compatible con Factura Electrónica). ### **Notas para Purecode AI** Generar un archivo HTML completo, funcional al abrir en un navegador sin configuración adicional. Usar únicamente CDNs para dependencias (Tailwind, sql.js, UUID). Evitar referencias a servidores externos o backend (todo cliente side). Incluir comentarios detallados en el código para facilitar personalización. Si Purecode tiene limitaciones con sql.js, generar la interfaz y funciones JavaScript con placeholders para la base de datos (ej. `// Insertar lógica de SQLite aquí`). Priorizar un diseño visual atractivo (tarjetas, sombras, transiciones) para destacar frente a competidores como Contabilium. Por favor, genera el código completo para el dashboard descrito, asegurando que cumpla con todas las especificaciones de diseño, funcionalidad y usabilidad.