rckrdmrd
97f407c661
- Prefijo v2: MCH - TRACEABILITY-MASTER.yml creado - Listo para integracion como submodulo Workspace: v2.0.0 | SIMCO: v4.0.0
201 lines
5.4 KiB
Markdown
201 lines
5.4 KiB
Markdown
# 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
|