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

2026-01-22 02:27:02 +00:00
parent 06e9f3eba7
commit ccfc795d41
3 changed files with 160 additions and 0 deletions
--- a/apps/web/components/charts/kpi-card.tsx
+++ b/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>
+  );
+}