KpiCard

Carte présentant un indicateur financier agrégé (patrimoine net, revenus, dépenses, épargne) avec valeur principale + tendance optionnelle.

Source : src/components/ui/kpi-card.tsx

Props

Source : src/components/ui/kpi-card.tsx

Prop	Type	Requis	Défaut	Description
label	string	✓	—	—
value	string	✓	—	—
trend	number	—	—	—
trendLabel	string	—	—	—
highlight	boolean	—	false	—
colSpan	number	—	—	—

Exemple

<KpiCard
  label="Patrimoine net"
  value="124 500,00 €"
  trend={3.2}
  trendLabel="30 j"
  highlight
/>

Variantes

• highlight={true} : bordure accent + glow léger — pour la KPI principale du dashboard
• colSpan={2} : s'étend sur 2 colonnes de la grille KPI
• Sans trend : affiche uniquement la valeur (KPI sans variation pertinente)

Accessibilité

• Label toujours visible au-dessus de la valeur (pas de contexte caché)
• Valeur en tabular-nums obligatoire
• Tendance colorée et signée (pas uniquement de la couleur — WCAG 1.4.1)

À ne pas faire

• Valeur en Float JS (passer un Decimal.toNumber() formaté via Intl.NumberFormat)
• Afficher une tendance sans période (toujours via trendLabel)

Voir aussi

• TrendBadge
• Financial display