feat(web): add chart components (KpiCard, BarChart)

apps/web/components/charts/bar-chart.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+interface BarChartProps {
+  title: string;
+  data: { mes: string; ingresos: number; egresos: number }[];
+}
+
+const formatCurrency = (value: number) => {
+  if (value >= 1000000) {
+    return `$${(value / 1000000).toFixed(1)}M`;
+  }
+  if (value >= 1000) {
+    return `$${(value / 1000).toFixed(0)}K`;
+  }
+  return `$${value}`;
+};
+
+export function BarChart({ title, data }: BarChartProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base font-medium">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="h-[300px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <RechartsBarChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis
+                dataKey="mes"
+                tick={{ fontSize: 12 }}
+                tickLine={false}
+                axisLine={false}
+                className="text-muted-foreground"
+              />
+              <YAxis
+                tickFormatter={formatCurrency}
+                tick={{ fontSize: 12 }}
+                tickLine={false}
+                axisLine={false}
+                className="text-muted-foreground"
+              />
+              <Tooltip
+                formatter={(value: number) =>
+                  new Intl.NumberFormat('es-MX', {
+                    style: 'currency',
+                    currency: 'MXN',
+                  }).format(value)
+                }
+                contentStyle={{
+                  backgroundColor: 'hsl(var(--card))',
+                  border: '1px solid hsl(var(--border))',
+                  borderRadius: '8px',
+                }}
+              />
+              <Legend />
+              <Bar
+                dataKey="ingresos"
+                name="Ingresos"
+                fill="hsl(var(--success))"
+                radius={[4, 4, 0, 0]}
+              />
+              <Bar
+                dataKey="egresos"
+                name="Egresos"
+                fill="hsl(var(--destructive))"
+                radius={[4, 4, 0, 0]}
+              />
+            </RechartsBarChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

apps/web/components/charts/index.ts

@@ -0,0 +1,2 @@
+export { KpiCard } from './kpi-card';
+export { BarChart } from './bar-chart';

apps/web/components/charts/kpi-card.tsx

@@ -0,0 +1,71 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+
+interface KpiCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  trendValue?: string;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+export function KpiCard({
+  title,
+  value,
+  subtitle,
+  trend,
+  trendValue,
+  icon,
+  className,
+}: KpiCardProps) {
+  const formatValue = (val: string | number) => {
+    if (typeof val === 'number') {
+      return new Intl.NumberFormat('es-MX', {
+        style: 'currency',
+        currency: 'MXN',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+      }).format(val);
+    }
+    return val;
+  };
+
+  return (
+    <Card className={cn('', className)}>
+      <CardContent className="p-6">
+        <div className="flex items-center justify-between">
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          {icon && <div className="text-muted-foreground">{icon}</div>}
+        </div>
+        <div className="mt-2">
+          <p className="text-2xl font-bold">{formatValue(value)}</p>
+          {(subtitle || trend) && (
+            <div className="mt-1 flex items-center gap-2">
+              {trend && (
+                <span
+                  className={cn(
+                    'flex items-center text-xs font-medium',
+                    trend === 'up' && 'text-success',
+                    trend === 'down' && 'text-destructive',
+                    trend === 'neutral' && 'text-muted-foreground'
+                  )}
+                >
+                  {trend === 'up' && <TrendingUp className="mr-1 h-3 w-3" />}
+                  {trend === 'down' && <TrendingDown className="mr-1 h-3 w-3" />}
+                  {trend === 'neutral' && <Minus className="mr-1 h-3 w-3" />}
+                  {trendValue}
+                </span>
+              )}
+              {subtitle && (
+                <span className="text-xs text-muted-foreground">{subtitle}</span>
+              )}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}