Adrian Flores Cortes 0ead18e28f [SPRINT-3] docs: Add page specifications and dead code analysis

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

2026-02-03 20:27:51 -06:00

3.1 KiB

Raw Blame History

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

Seleccionar periodo de tiempo (7d, 30d, 90d, 1y)
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)
Ver graficos de tendencia:
- User Growth
- Revenue Trend
- Daily Actions
Ver top 5 features mas usadas con porcentaje
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

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

3.1 KiB Raw Blame History