Initial commit: Horux Despachos project

2026-04-27 01:11:06 -06:00
commit 56a05ba767
604 changed files with 121723 additions and 0 deletions
--- a/packages/shared-ui/src/charts/kpi-card.tsx
+++ b/packages/shared-ui/src/charts/kpi-card.tsx
@@ -0,0 +1,78 @@
+import { Card, CardContent } from '../primitives';
+import { cn } from '../lib/cn';
+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;
+  href?: string;
+}
+
+export function KpiCard({
+  title,
+  value,
+  subtitle,
+  trend,
+  trendValue,
+  icon,
+  className,
+  href,
+}: 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;
+  };
+
+  const Wrapper = href ? 'a' : 'div';
+  const wrapperProps = href ? { href, className: 'block' } : {};
+
+  return (
+    <Card className={cn(href && 'hover:border-primary/50 hover:shadow-md transition-all cursor-pointer', className)}>
+      <Wrapper {...wrapperProps}>
+      <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>
+      </Wrapper>
+    </Card>
+  );
+}