0ead18e28f
## ST-3.3 Documentation (3 SP) - Add 11 page specification files documenting 25 pages - Create docs/05-frontend/pages/ directory - Specs: Goals, MLM, Portfolio, RBAC, Notifications, Analytics, Audit, Storage, Webhooks, Settings - Add _INDEX.md with complete listing ## ST-3.4 Dead Code Analysis (1 SP) - Analyze usePortfolio hook usage (18/21 functions used) - Document components ready for future use - Decision: Keep all code as preparation for features - Create DEAD-CODE-REPORT.md ## Frontend Submodule - WCAG improvements (11 files) - 160 unit tests (8 new test files) Sprint 3 (P2) completed: 14 SP Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
97 lines
3.1 KiB
Markdown
97 lines
3.1 KiB
Markdown
# Analytics Dashboard Page Specification
|
|
|
|
**Modulo:** analytics
|
|
**Ultima actualizacion:** 2026-02-03
|
|
**Total Paginas:** 1
|
|
|
|
---
|
|
|
|
## AnalyticsDashboardPage
|
|
|
|
**Ruta:** `/dashboard/analytics`
|
|
**Archivo:** `src/pages/admin/AnalyticsDashboardPage.tsx`
|
|
|
|
### Descripcion
|
|
Dashboard de analiticas con metricas clave del negocio, tendencias temporales y uso por feature. Permite seleccionar diferentes periodos de tiempo.
|
|
|
|
### Componentes Utilizados
|
|
- Period Selector - Botones de seleccion de periodo (7d, 30d, 90d, 1y)
|
|
- MetricCard - Tarjetas de KPI con tendencia
|
|
- TrendChart - Graficos de linea para tendencias
|
|
- Top Features Section - Barras de uso por feature
|
|
- Activity by Hour Chart - Grafico de barras por hora
|
|
- Icons: Users, DollarSign, Activity, TrendingUp, BarChart3, Clock (lucide-react)
|
|
- clsx - Utilidad para clases condicionales
|
|
|
|
### Hooks Utilizados
|
|
- `useAnalyticsSummary()` - Resumen de metricas principales
|
|
- `useAnalyticsTrends(period)` - Tendencias por periodo
|
|
- `useUsageMetrics(period)` - Metricas de uso
|
|
- `getAvailablePeriods()` - Lista de periodos disponibles
|
|
- `getPeriodLabel(period)` - Label legible del periodo
|
|
- `formatCurrency(value)` - Formato moneda
|
|
- `formatNumber(value)` - Formato numero
|
|
|
|
### Funcionalidades
|
|
1. Seleccionar periodo de tiempo (7d, 30d, 90d, 1y)
|
|
2. Ver KPIs principales:
|
|
- Active Users (con cambio % y total)
|
|
- MRR (con cambio % y ARR)
|
|
- Total Actions (con cambio % y promedio por usuario)
|
|
- Engagement Rate (con cambio % y sesiones)
|
|
3. Ver graficos de tendencia:
|
|
- User Growth
|
|
- Revenue Trend
|
|
- Daily Actions
|
|
4. Ver top 5 features mas usadas con porcentaje
|
|
5. Ver actividad por hora del dia (24 barras)
|
|
|
|
### Estados
|
|
- Loading: Skeletons y spinners por seccion
|
|
- Success: Dashboard completo con datos
|
|
- Empty Top Features: "No feature data available"
|
|
- Empty Hourly: "No hourly data available"
|
|
|
|
### Acciones del Usuario
|
|
| Accion | Resultado |
|
|
|--------|-----------|
|
|
| Click periodo | Recarga datos con nuevo periodo |
|
|
| Hover barra hora | Muestra tooltip con valor |
|
|
|
|
### Permisos Requeridos
|
|
- `analytics:read` - Ver dashboard de analiticas
|
|
|
|
### Tipos de Datos
|
|
|
|
```typescript
|
|
type AnalyticsPeriod = '7d' | '30d' | '90d' | '1y';
|
|
|
|
interface AnalyticsSummary {
|
|
users: { active: number; total: number; change?: number };
|
|
revenue: { mrr: number; arr: number; change?: number };
|
|
usage: { actions: number; avgPerUser: number; change?: number };
|
|
engagement: { rate: number; sessions: number; change?: number };
|
|
}
|
|
|
|
interface TrendData {
|
|
users: { date: string; value: number }[];
|
|
revenue: { date: string; value: number }[];
|
|
actions: { date: string; value: number }[];
|
|
}
|
|
|
|
interface UsageMetrics {
|
|
topFeatures: { feature: string; count: number; percentage: number }[];
|
|
byHour: { hour: number; actions: number }[];
|
|
}
|
|
```
|
|
|
|
### Notas
|
|
- Los valores de cambio (change) se muestran en verde (positivo) o rojo (negativo)
|
|
- Los graficos de tendencia usan colores consistentes por metrica
|
|
- El grafico de horas muestra 24 barras, con labels cada 4 horas
|
|
- La altura de las barras es proporcional al maximo del periodo
|
|
|
|
---
|
|
|
|
*Documentacion generada - Template SaaS - 2026-02-03*
|