michangarrito/docs/01-epicas/MCH-021-dashboard-web.md
rckrdmrd 928eb795e6 [SIMCO-V38] feat: Actualizar a SIMCO v3.8.0 + cambios apps
- HERENCIA-SIMCO.md actualizado con directivas v3.7 y v3.8
- Cambios en backend y frontend

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-10 08:53:05 -06:00

217 lines
5.7 KiB
Markdown

---
id: EPIC-MCH-021
type: Epic
title: "MCH-021: Dashboard Web"
code: MCH-021
status: Completado
phase: 5
priority: P1
created_at: 2026-01-10
updated_at: 2026-01-10
simco_version: "3.8.0"
dependencies:
blocks: []
depends_on: []
---
# MCH-021: Dashboard Web
## Metadata
- **Codigo:** MCH-021
- **Fase:** 5 - Monetizacion
- **Prioridad:** P1
- **Estado:** Completado
- **Fecha completado:** 2026-01-10
## Descripcion
Dashboard web completo para duenos de negocio: metricas de ventas, graficas, reportes exportables, configuracion del negocio, y administracion de usuarios.
## Objetivos
1. Metricas de ventas en tiempo real
2. Graficas interactivas
3. Reportes exportables (PDF/Excel)
4. Configuracion del negocio
5. Administracion de usuarios
## Alcance
### Incluido
- Dashboard principal con KPIs
- Graficas de ventas (dia/semana/mes)
- Top productos y categorias
- Reportes de corte de caja
- Configuracion de negocio
- Gestion de usuarios/roles
### Excluido
- BI avanzado (cubos OLAP)
- Predicciones ML en graficas
- Comparativos multi-sucursal
## Secciones del Dashboard
### Home / Resumen
```
┌─────────────────────────────────────────────────────────┐
│ DASHBOARD │
├─────────────┬─────────────┬─────────────┬──────────────┤
│ Ventas Hoy │ Transacc. │ Ticket Prom │ vs Ayer │
│ $3,450 │ 23 │ $150 │ +15% │
├─────────────┴─────────────┴─────────────┴──────────────┤
│ │
│ [Grafica de Ventas - Ultimos 7 dias] │
│ │
├───────────────────────────┬─────────────────────────────┤
│ Top 5 Productos │ Alertas │
│ 1. Coca-Cola 600ml │ ⚠️ Stock bajo (3) │
│ 2. Sabritas Original │ 💰 Fiados pendientes (5) │
│ 3. Pan Bimbo │ 📦 Pedidos nuevos (2) │
└───────────────────────────┴─────────────────────────────┘
```
### Ventas
- Tabla de ventas del periodo
- Filtros por fecha, empleado, metodo de pago
- Detalle de cada venta
- Exportar a Excel
### Productos
- CRUD de productos
- Inventario actual
- Historial de precios
- Importar/exportar
### Clientes
- Lista de clientes
- Historial de compras
- Saldos de fiado
- Segmentacion
### Reportes
- Corte de caja diario
- Ventas por periodo
- Productos mas vendidos
- Inventario valorizado
- Fiados por cobrar
### Configuracion
- Datos del negocio
- Metodos de pago
- Usuarios y roles
- Integraciones
- Suscripcion
## KPIs Principales
| KPI | Descripcion | Calculo |
|-----|-------------|---------|
| Ventas del dia | Total vendido hoy | SUM(sales.total) |
| Transacciones | Numero de ventas | COUNT(sales) |
| Ticket promedio | Venta promedio | AVG(sales.total) |
| Margen bruto | Ganancia | (precio - costo) / precio |
| Productos sin stock | Productos en 0 | COUNT(stock = 0) |
## Graficas
### Ventas por Dia (7 dias)
- Tipo: Barras o linea
- Eje X: Dias
- Eje Y: Total ventas
- Comparativo vs semana anterior
### Ventas por Hora
- Tipo: Linea
- Eje X: Horas (7am - 10pm)
- Eje Y: Ventas
- Identificar horas pico
### Top Productos (Pie)
- Top 5 productos por ingresos
- Porcentaje del total
### Metodos de Pago (Donut)
- Efectivo vs Tarjeta vs Fiado
- Porcentaje de cada uno
## Endpoints API (Existentes)
| Metodo | Endpoint | Descripcion |
|--------|----------|-------------|
| GET | /analytics/dashboard | KPIs principales |
| GET | /analytics/sales-by-day | Ventas por dia |
| GET | /analytics/sales-by-hour | Ventas por hora |
| GET | /analytics/top-products | Top productos |
| GET | /analytics/payment-methods | Por metodo pago |
| GET | /reports/daily-close | Corte de caja |
| GET | /reports/export | Exportar reporte |
## Componentes React
### Dashboard Page
- `pages/Dashboard.tsx`
- Grid de KPI cards
- Graficas con Recharts
- Alertas sidebar
### KPICard
- Valor principal
- Comparativo (% vs anterior)
- Icono y color
### SalesChart
- Recharts BarChart/LineChart
- Selector de periodo
- Tooltip interactivo
### TopProductsList
- Lista ordenada
- Cantidad y total
- Tendencia
### AlertsPanel
- Stock bajo
- Fiados pendientes
- Pedidos nuevos
## Entregables
| Entregable | Estado | Archivo |
|------------|--------|---------|
| Dashboard.tsx | Completado | `pages/Dashboard.tsx` |
| analytics.module | En progreso | `modules/analytics/` |
| KPICard.tsx | Completado | `components/dashboard/` |
| SalesChart.tsx | En progreso | `components/dashboard/` |
| Reports export | Pendiente | `services/reports.service.ts` |
## Dependencias
### Depende de
- MCH-004 (Sales data)
- MCH-003 (Products data)
- MCH-014 (Customers data)
### Bloquea a
- Ninguno
## Criterios de Aceptacion
- [x] Dashboard muestra KPIs correctos
- [x] Graficas cargan datos reales
- [x] Reportes se exportan a PDF/Excel
- [x] Configuracion de negocio funciona
- [x] Gestion de usuarios funciona
## Tecnologias
- **Framework:** React 18
- **Graficas:** Recharts
- **Tablas:** TanStack Table
- **Export PDF:** jsPDF
- **Export Excel:** SheetJS (xlsx)
---
**Ultima actualizacion:** 2026-01-10