Documentación

🛍️ Módulo de Compras v2.0 Refactor

🏗️ Arquitectura General

El módulo sigue un patrón MVC-like (Model-View-Controller) dividido en dos capas principales. Diseñado para ser modular, mantenible y escalable.

scratch/ ├── modules/ │ └── compras/ # 🐍 BACKEND (Python/Flask) │ ├── ui_layout.py # Controller: Define rutas API │ ├── data_service.py # Model/Service: Lógica de negocio y BD │ ├── charts_visuals.py # Helpers: Generación de gráficos │ └── legacy_backup/ # ⛔ Código legacy │ ├── static/js/modules/ │ ├── compras.js # 🔄 LOADER: Carga dinámica │ └── compras/ # 📦 FRONTEND MODULAR │ ├── main.js # Orquestador principal │ ├── dashboard.js # Tab: Resumen/Gráficas │ ├── creacion.js # Tab: Creación de Órdenes │ ├── historico.js # Tab: Historial │ ├── pagos.js # Tab: Facturación │ └── pendientes.js # Tab: Panel de Seguimiento

🐍 Backend (Python)

1. Controller Layer (ui_layout.py)

Define los endpoints API REST que consume el frontend. No contiene lógica compleja, solo orquestación.

GET /api/compras/all -> Retorna todas las órdenes GET /api/compras/stats -> KPIs del dashboard POST /api/compras/generate_pos -> Crea nuevas órdenes POST /api/compras/facturacion/save -> Guarda o actualiza facturas

2. Service Layer (data_service.py)

Nucleo de la aplicación. Maneja transacciones SQL, validaciones y reglas de negocio.

  • ComprasDataService.create_purchase_orders(): Valida SKUs, proveedores y genera IDs de orden.
  • ComprasDataService.get_resumen_stats(): Calcula KPIs y genera datos para gráficas Chart.js.
  • ComprasDataService.sync_exchange_rates(): Conexión con API Banxico para TC.

📦 Frontend (JavaScript)

Orquestador (main.js)

Maneja la navegación entre pestañas y carga los submódulos. Expone window.ComprasModule.

Dashboard (dashboard.js)

Gráficos interactivos con Drill-Down (Año > Mes > Día) y Top Productos.

Creación (creacion.js)

Grid tipo Excel para generación rápida de órdenes. Validación de proveedores.

Pagos (pagos.js)

Control de facturación, validación de condiciones de pago y alertas de crédito mixto.

🔄 Flujo de Datos (Ejemplo: Dashboard)

1
Interacción Usuario

Usuario hace clic en la pestaña "Resumen".

2
Frontend Init

main.js detecta el evento y llama a ComprasModule.Dashboard.init().

3
API Request

dashboard.js ejecuta fetch('/api/compras/resumen/stats?year=2024').

4
Backend Processing

`ui_layout.py` recibe la petición -> `data_service.py` ejecuta queries SQL agregadas.

5
Renderizado

Frontend recibe JSON y renderiza gráficas usando Chart.js y actualiza KPIs del DOM.