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