Dashboard de Analytics

Lo que vas a construir

Un panel de control interactivo que muestra las metricas clave de tu negocio o aplicacion con graficos en tiempo real. Implementaras graficos de lineas para tendencias temporales, cards con KPIs importantes (usuarios, ventas, conversiones), una tabla con datos recientes y filtros por rango de fechas. Al terminar, tendras un dashboard responsive con Recharts y Tailwind que puedes personalizar para mostrar cualquier dato de tu base de datos.

Paso 1: Pídele a una IA el dashboard

Necesito un dashboard de analytics con:
- Gráfico de líneas (últimos 7 días)
- Cards con métricas (usuarios, ventas, etc.)
- Tabla con datos recientes
- Filtros por fecha
- Responsive
- React + Recharts + Tailwind

Dame el código completo.

Librerías

pnpm add recharts

Gráfico

import { LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts'

const data = [
  { date: '01/01', users: 400 },
  { date: '02/01', users: 300 },
  { date: '03/01', users: 500 },
]

function Chart() {
  return (
    <LineChart width={600} height={300} data={data}>
      <XAxis dataKey="date" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="users" stroke="#3b82f6" />
    </LineChart>
  )
}

Siguiente nivel

→ RAG con Documentos PDF — Nivel Master