72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
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>
|
|
);
|
|
}
|