---
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