📊 UI de Analytics (Admin / Commerce) - Zonix Eats
1. Layout General
Estructura recomendada:
text1AppBar: "Dashboard" o "Analytics" 2Scroll: 3 - Filtros (rango de fechas + selector de comercio si aplica) 4 - Cards de métricas (fila o grid) 5 - Gráfico(s) principal(es) 6 - Tablas de detalle (órdenes, productos, comercios)
2. Filtros
- Rango de fechas:
- Hoy / 7 días / 30 días / Personalizado.
- Opcional:
- Selector de comercio (para admin viendo un commerce específico).
- Mostrar chips o dropdown, no recargar toda la pantalla bruscamente.
3. Cards de Métricas
Ejemplos típicos:
- Total de ventas (USD).
- Número de órdenes.
- Ticket promedio.
- Órdenes canceladas.
- Performance de delivery (tiempo medio).
Patrón visual:
- Fondo
surface(claro u oscuro según tema). - Ícono a la izquierda (ej. money, shopping_bag, timer).
- Valor grande (ej.
\$1,250.00). - Subtítulo pequeño (“Ventas últimos 7 días”).
4. Gráficos
Tipos recomendados:
- Línea o área: ventas por día.
- Barras: órdenes por estado, top productos, top comercios.
Buenas prácticas:
- Limitar cantidad de puntos (máx. 30).
- Mostrar leyenda clara.
- Permitir tap en barra o punto para ver detalle (tooltip).
5. Tablas de Detalle
Usos comunes:
- Lista de órdenes con columnas: ID, comercio, total, estado, fecha.
- Top productos: nombre, categoría, cantidad vendida, ingreso.
- Comercios: nombre, ventas, comisión, estado.
Recomendaciones:
- Paginación en frontend alineada con backend (ver
zonix-analytics§ 2). - Ordenamiento por columnas clave (fecha, total, estado).
6. Estados de Carga
- Loading:
- Shimmer en cards y barras placeholder.
- Sin datos:
- Mensaje “No hay datos para este rango de fechas” + sugerir cambiar filtro.
- Error:
- Banner rojo o SnackBar con texto corto + botón "Reintentar".
7. Cross-references
- Consultas de analytics:
zonix-analytics(backend). - Pagos y montos:
zonix-payments§ 5. - Estados de orden:
zonix-order-lifecycle§ 1-2.
