Componentes del dashboard

Componentes del dashboard

Estructura de componentes

src/components/executive/
├── ExecKpiCards.jsx        ← KPIs principales en tarjetas
├── RevenueTrend.jsx        ← área chart tendencia MRR/ARR
├── RevenueByChannel.jsx    ← bar chart por canal de venta
├── RevenueBySegment.jsx    ← donut chart SMB/Mid/Enterprise
├── MarketingFunnel.jsx     ← funnel de conversión
├── PipelineFunnel.jsx      ← pipeline de ventas por etapa
├── CacLtvTrend.jsx         ← línea CAC vs LTV en el tiempo
└── ChurnNrrTrend.jsx       ← línea churn rate vs NRR

Flujo de datos

sequenceDiagram
    participant P as Página /executive
    participant C as Componente
    participant J as JSON estático
    P->>C: monta componente
    C->>J: fetch('/data/executive/revenue_trend.json')
    J-->>C: array de puntos temporales
    C->>C: setState(data)
    C->>C: render <AreaChart data={data} />

Loading

JSONs de datos

Archivo	Componente que lo consume	Estructura
executive_summary.json	ExecKpiCards	{ mrr, arr, nrr, churn_rate, ltv_cac }
revenue_trend.json	RevenueTrend	[{ month, mrr, arr }]
revenue_by_channel.json	RevenueByChannel	[{ channel, revenue }]
revenue_by_segment.json	RevenueBySegment	[{ segment, revenue, clients }]
marketing_funnel.json	MarketingFunnel	[{ stage, count }]
pipeline_stages.json	PipelineFunnel	[{ stage, value }]
cac_ltv_trend.json	CacLtvTrend	[{ month, cac, ltv }]
churn_nrr_trend.json	ChurnNrrTrend	[{ month, churn_rate, nrr }]