COMPONENT: Stat / MetricCard Component

[nayan458]

Task: Stat / MetricCard Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface MetricCardProps {
  label:      string;
  value:      string | number;
  subLabel?:  string;
  valueColor?: 'default' | 'danger' | 'warning' | 'success';
  className?: string;
}

Variants / States

State	Description
Default	Value in primary text color
Danger	Value in --text-danger — Escalated count
Warning	Value in --text-warning — Pending count
Success	Value in --text-success — Auto-resolved count
With sub-label	Small secondary text below value
Without sub-label	Value sits at bottom of card without gap

Acceptance Criteria

• Value font-size 22px, label 10px uppercase, sub-label 10px secondary — matches dashboard design exactly
• valueColor maps to correct CSS variable — no inline hex
• Sub-label optional — card height stays consistent without it
• Zero hardcoded hex values
• Storybook stories: all 4 color variants, with and without sub-label

Notes

• Used in both desktop MetricsRow and mobile MetricsGrid — must work inside both grid-cols-4 and grid-cols-2 without style overrides