Kpi Card

1'use client';
2 
3import * as React from 'react';
4import { cn } from '@/lib/utils';
5import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
6 
7type Tone = 'default' | 'primary' | 'success' | 'warning' | 'danger';
8type Size = 'sm' | 'md' | 'lg';
9type Trend = 'up' | 'down' | 'flat';
10 
11export type KpiCardProps = {
12  /** Small label/title */
13  label: string;
14  /** Main metric (formatted) */
15  value: string | number;
16  /** Delta in %, number or string -> shown in green/red */
17  delta?: number | string;
18  /** Visual trend indicator */
19  trend?: Trend;
20  /** Sub text under value (e.g., “vs Previous 30 days”) */
21  caption?: string;
22  /** Optional top-right icon */
23  icon?: React.ReactNode;
24  /** Visual tone */
25  tone?: Tone;
26  /** Size */
27  size?: Size;
28  /** Compact density */
29  compact?: boolean;
30  className?: string;
31};
32 
33/** tone -> classes */
34const toneMap: Record<
35  Tone,
36  { card: string; value: string; deltaUp: string; deltaDown: string }
37> = {
38  default: {
39    card: 'bg-zinc-100/70 dark:bg-zinc-900/50 ring-1 ring-zinc-200 dark:ring-zinc-800',
40    value: 'text-zinc-950 dark:text-zinc-50',
41    deltaUp: 'text-emerald-600 dark:text-emerald-400',
42    deltaDown: 'text-rose-600 dark:text-rose-400',
43  },
44  primary: {
45    card: 'bg-blue-100/70 dark:bg-blue-900/30 ring-1 ring-blue-200/60 dark:ring-blue-800/60',
46    value: 'text-blue-700 dark:text-blue-200',
47    deltaUp: 'text-emerald-600 dark:text-emerald-400',
48    deltaDown: 'text-rose-600 dark:text-rose-400',
49  },
50  success: {
51    card: 'bg-emerald-100/70 dark:bg-emerald-900/30 ring-1 ring-emerald-200/60 dark:ring-emerald-800/60',
52    value: 'text-emerald-700 dark:text-emerald-200',
53    deltaUp: 'text-emerald-700 dark:text-emerald-300',
54    deltaDown: 'text-rose-600 dark:text-rose-400',
55  },
56  warning: {
57    card: 'bg-amber-100/70 dark:bg-amber-900/30 ring-1 ring-amber-200/60 dark:ring-amber-800/60',
58    value: 'text-amber-700 dark:text-amber-200',
59    deltaUp: 'text-emerald-600 dark:text-emerald-400',
60    deltaDown: 'text-rose-600 dark:text-rose-400',
61  },
62  danger: {
63    card: 'bg-rose-100/70 dark:bg-rose-900/30 ring-1 ring-rose-200/60 dark:ring-rose-800/60',
64    value: 'text-rose-700 dark:text-rose-200',
65    deltaUp: 'text-emerald-600 dark:text-emerald-400',
66    deltaDown: 'text-rose-700 dark:text-rose-300',
67  },
68};
69 
70const sizeMap: Record<
71  Size,
72  { pad: string; label: string; value: string; caption: string; icon: string }
73> = {
74  sm: {
75    pad: 'p-3',
76    label: 'text-xs',
77    value: 'text-xl',
78// … truncated