Componentes del dashboard

Dashboard components

🇬🇧 English first · 🇪🇸 Español más abajo.

The React components live in project-portfolio (src/pages/ExecutiveDashboard.jsx + src/components/executive/).

Component map

ExecutiveDashboard.jsx          ← page route /executive
└── components/executive/
    ├── ExecKpiCards.jsx         ← headline KPIs as cards
    ├── RevenueTrend.jsx         ← area chart: MRR / ARR over time
    ├── RevenueByChannel.jsx     ← bar chart by acquisition channel
    ├── RevenueBySegment.jsx     ← donut chart SMB / Mid / Enterprise
    ├── MarketingFunnel.jsx      ← conversion funnel
    ├── PipelineFunnel.jsx       ← sales pipeline by stage
    ├── CacLtvTrend.jsx          ← CAC vs LTV line over time
    └── ChurnNrrTrend.jsx        ← churn rate vs NRR line

Data flow

sequenceDiagram
    participant P as Page /executive
    participant C as Component
    participant J as Static JSON
    P->>C: mount
    C->>J: fetch('/data/executive/revenue_trend.json')
    J-->>C: array of time points
    C->>C: render <AreaChart data={data} />

Loading

Each component fetches a static JSON from public/data/executive/ and renders it with Recharts. No backend: the data is built ahead of time (Firebase Spark, fully static).

---

🇪🇸 Español

Componentes del dashboard

Los componentes React viven en project-portfolio (src/pages/ExecutiveDashboard.jsx + src/components/executive/).

Mapa de componentes

ExecutiveDashboard.jsx          ← ruta de página /executive
└── components/executive/
    ├── ExecKpiCards.jsx         ← KPIs principales en tarjetas
    ├── RevenueTrend.jsx         ← área chart: MRR / ARR en el tiempo
    ├── RevenueByChannel.jsx     ← bar chart por canal de adquisición
    ├── 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

Cada componente hace fetch de un JSON estático en public/data/executive/ y lo renderiza con Recharts. Sin backend: los datos se generan por adelantado (Firebase Spark, 100% estático). Ver diagrama de secuencia arriba.