# 2. Arquitectura del Sistema ## Diagrama de Componentes ``` ┌─────────────────────────────────────────────────────────────────┐ │ FRONTEND (React) │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ Login │ │Clientes │ │Dashboard│ │ Admin │ │ PdfView │ │ │ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │ │ └───────────┴───────────┴───────────┴───────────┘ │ │ │ │ │ ┌─────────┴─────────┐ │ │ │ API Service │ │ │ │ (Axios) │ │ │ └─────────┬─────────┘ │ └──────────────────────────────┼──────────────────────────────────┘ │ HTTP/REST ▼ ┌──────────────────────────────┴──────────────────────────────────┐ │ BACKEND (Laravel) │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Controllers │ │ │ │ Auth │ Cliente │ Balanza │ Cuenta │ Reporte │ Admin │ │ │ └───────────────────────────┬─────────────────────────────┘ │ │ │ │ │ ┌───────────────────────────┴─────────────────────────────┐ │ │ │ Services │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ │ │ Parsers │ │ Clasificador │ │ Calculador │ │ │ │ │ │ - CONTPAQi │ │ Cuentas │ │ Métricas │ │ │ │ │ │ - Genérico │ │ │ │ │ │ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ ┌──────────────┐ │ │ │ │ │ Generador │ │ │ │ │ │ PDF │ │ │ │ │ └──────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ │ ┌───────────────────────────┴─────────────────────────────┐ │ │ │ Models │ │ │ │ User │ Cliente │ Balanza │ Cuenta │ Reporte │ etc. │ │ │ └───────────────────────────┬─────────────────────────────┘ │ └──────────────────────────────┼──────────────────────────────────┘ │ ▼ ┌──────────────────┐ │ Database │ │ MySQL/PostgreSQL│ └──────────────────┘ ``` ## Estructura de Directorios ``` horux-strategy-platform/ ├── backend/ # Laravel 11 API │ ├── app/ │ │ ├── Http/ │ │ │ ├── Controllers/ │ │ │ │ ├── AuthController.php │ │ │ │ ├── ClienteController.php │ │ │ │ ├── BalanzaController.php │ │ │ │ ├── CuentaController.php │ │ │ │ ├── ReporteController.php │ │ │ │ └── Admin/ │ │ │ │ ├── UsuarioController.php │ │ │ │ ├── GiroController.php │ │ │ │ ├── UmbralController.php │ │ │ │ └── ReglaMapeeoController.php │ │ │ └── Middleware/ │ │ │ └── RoleMiddleware.php │ │ ├── Models/ │ │ │ ├── User.php │ │ │ ├── Cliente.php │ │ │ ├── Giro.php │ │ │ ├── Balanza.php │ │ │ ├── Cuenta.php │ │ │ ├── Reporte.php │ │ │ ├── ReporteContable.php │ │ │ ├── CategoriaContable.php │ │ │ ├── Umbral.php │ │ │ ├── ReglaMapeo.php │ │ │ ├── MapeoCuenta.php │ │ │ └── PermisoEmpleado.php │ │ └── Services/ │ │ ├── Parsers/ │ │ │ ├── ParserInterface.php │ │ │ ├── DetectorFormato.php │ │ │ ├── ContpaqiParser.php │ │ │ └── GenericoParser.php │ │ ├── ClasificadorCuentas.php │ │ ├── CalculadorMetricas.php │ │ └── GeneradorPdf.php │ ├── database/ │ │ ├── migrations/ │ │ └── seeders/ │ ├── routes/ │ │ └── api.php │ └── config/ │ ├── frontend/ # React + TypeScript │ ├── src/ │ │ ├── components/ │ │ │ ├── charts/ │ │ │ │ ├── BarChart.tsx │ │ │ │ └── LineChart.tsx │ │ │ ├── cards/ │ │ │ │ ├── KPICard.tsx │ │ │ │ └── MetricTable.tsx │ │ │ ├── forms/ │ │ │ │ ├── ClienteForm.tsx │ │ │ │ ├── UploadBalanza.tsx │ │ │ │ └── GenerarReporte.tsx │ │ │ └── layout/ │ │ │ ├── Layout.tsx │ │ │ ├── Sidebar.tsx │ │ │ └── Header.tsx │ │ ├── pages/ │ │ │ ├── Login.tsx │ │ │ ├── Clientes/ │ │ │ ├── Dashboard/ │ │ │ ├── PdfView/ │ │ │ └── Admin/ │ │ ├── context/ │ │ │ └── AuthContext.tsx │ │ ├── services/ │ │ │ └── api.ts │ │ ├── types/ │ │ │ └── index.ts │ │ └── hooks/ │ └── public/ │ └── docs/ # Documentación └── plans/ ``` ## Flujo de Datos ### Subida de Balanza ``` 1. Usuario sube archivo (PDF/Excel/CSV) 2. DetectorFormato identifica sistema origen 3. Parser específico extrae datos 4. ClasificadorCuentas aplica reglas de mapeo 5. Cuentas se guardan en BD con clasificación 6. Cuentas con anomalías se marcan para revisión ``` ### Generación de Reporte ``` 1. Usuario selecciona balanzas a incluir 2. CalculadorMetricas procesa datos 3. Se calculan estados financieros 4. Se calculan 27+ métricas 5. Se evalúan umbrales para semáforos 6. Se guardan resultados en JSON 7. Dashboard muestra resultados ``` ### Exportación PDF ``` 1. Usuario solicita PDF 2. GeneradorPdf prepara URL con token 3. Browsershot renderiza PdfView de React 4. Se genera PDF de 32 páginas 5. Se guarda en storage 6. Se descarga al usuario ```