05 — Dashboard de Cliente · investigacion-github-design

En produccion reemplazas los CDN por paquetes npm. Alternativas recomendadas por caso de uso:

Opcion A — ApexCharts (mismo que este demo, ideal React/Vue/Svelte):

npm install apexcharts react-apexcharts

# En tu componente:
import ReactApexChart from 'react-apexcharts'
<ReactApexChart type="area" series={...} options={...} />

Opcion B — Recharts (mas declarativo, React puro, recomendado para dashboards Next.js):

npm install recharts

import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'
<AreaChart width={600} height={300} data={data}>
  <Area type="monotone" dataKey="ingresos" stroke="#42E200" fill="#0E3D24" />
</AreaChart>

Opcion C — Tremor (componentes UI + charts listos, ideal para dashboards admin rapidos):

npm install @tremor/react

import { AreaChart, Card, Metric } from '@tremor/react'
# Tremor incluye KPI cards, tablas, badges — un Design System completo

Opcion D — ECharts (mas potente para datos pesados, BI empresarial):

npm install echarts echarts-for-react

import ReactECharts from 'echarts-for-react'
<ReactECharts option={echartsOption} />

Tailwind en produccion:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

# tailwind.config.js — agregar colores Quimera:
colors: {
  'neon':    '#42E200',
  'darkbg':  '#0a0a0a',
  'surface': '#111111',
}

Sirve para: Central de Operaciones · Contabilidad · Leads CRM · JohnnyTech · Quimera ERP · cualquier panel de cliente de Quimera Group.