michangarrito/backups/docs-backup-2026-01-10/docs/01-epicas/MCH-021-dashboard-web.md

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

• Dashboard muestra KPIs correctos
• Graficas cargan datos reales
• Reportes se exportan a PDF/Excel
• Configuracion de negocio funciona
• 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