@burdenoff/microfe-movethewheels 2026.703.4 → 2026.703.6

package/src/movethewheels/components/MetricCard.tsx

@@ -1,6 +1,22 @@
 import type { ReactNode } from 'react';
 import { GlassCard } from '@burdenoff/fe-libs/ui';
 import { cn } from '../utils/cn';
+import { Sparkline } from './charts/Sparkline';
+
+/** Semantic accent used to tint the sparkline, delta chip, and icon chip. */
+export type MetricAccent = 'brand' | 'blue' | 'success' | 'warning' | 'error' | 'neutral';
+
+export interface MetricDelta {
+  /** Formatted delta text, e.g. "+12%", "-5%", "+128". */
+  value: string;
+  /** Direction drives the arrow + semantic color. */
+  direction: 'up' | 'down' | 'flat';
+  /**
+   * When true, a downward direction is treated as GOOD (green) and upward as
+   * bad — for metrics where lower is better (e.g. failed deliveries, cost).
+   */
+  invert?: boolean;
+}
 
 interface MetricCardProps {
   /** Main value to display */
@@ -9,13 +25,13 @@ interface MetricCardProps {
   label: string;
   /** Optional icon */
   icon?: ReactNode;
-  /** Change from previous period (e.g., "+12%", "-5%") */
+  /** Change from previous period (e.g., "+12%", "-5%") — legacy inline form. */
   change?: string;
-  /** Whether the change is positive, negative, or neutral */
+  /** Whether the change is positive, negative, or neutral (legacy). */
   changeType?: 'positive' | 'negative' | 'neutral';
   /** Optional subtitle or additional info */
   subtitle?: string;
-  /** Optional trend indicator */
+  /** Optional trend indicator (legacy inline form). */
   trend?: 'up' | 'down' | 'flat';
   /** Card size variant */
   size?: 'sm' | 'md' | 'lg';
@@ -27,31 +43,98 @@ interface MetricCardProps {
   treatment?: 'metric' | 'glass';
   /** Featured/active accent glow (used for the single hero metric per page). */
   glow?: boolean;
+  /** Premium: a mini sparkline rendered in the card footer. Plain numbers. */
+  sparklineData?: number[];
+  /** Premium: a colored delta chip (preferred over `change`/`trend`). */
+  delta?: MetricDelta;
+  /** Accent color for the sparkline / icon chip / glow tint. Defaults to brand. */
+  accent?: MetricAccent;
 }
 
 const sizeClasses = {
-  sm: {
-    card: 'p-3',
-    value: 'text-xl font-bold',
-    label: 'text-xs',
-    icon: 'w-8 h-8',
-  },
-  md: {
-    card: 'p-4',
-    value: 'text-2xl font-bold',
-    label: 'text-sm',
-    icon: 'w-10 h-10',
-  },
-  lg: {
-    card: 'p-6',
-    value: 'text-3xl font-bold',
-    label: 'text-base',
-    icon: 'w-12 h-12',
-  },
+  sm: { card: 'p-3', value: 'text-xl font-bold', label: 'text-xs', icon: 'h-8 w-8' },
+  md: { card: 'p-4', value: 'text-2xl font-bold', label: 'text-sm', icon: 'h-10 w-10' },
+  lg: { card: 'p-5', value: 'text-3xl font-bold', label: 'text-sm', icon: 'h-11 w-11' },
+};
+
+const accentSparkColor: Record<MetricAccent, string> = {
+  brand: 'var(--color-brand-primary)',
+  blue: 'var(--color-chart-1)',
+  success: 'var(--color-status-success-text)',
+  warning: 'var(--color-status-warning-text)',
+  error: 'var(--color-status-error-text)',
+  neutral: 'var(--color-text-secondary)',
+};
+
+const accentChipClasses: Record<MetricAccent, string> = {
+  brand: 'bg-brand-primary/10 text-brand-primary',
+  blue: 'bg-chart-1/10 text-chart-1',
+  success: 'bg-status-success-bg-subtle text-status-success-text',
+  warning: 'bg-status-warning-bg-subtle text-status-warning-text',
+  error: 'bg-status-error-bg-subtle text-status-error-text',
+  neutral: 'bg-bg-sunken text-text-secondary',
+};
+
+function ArrowIcon({ direction }: { direction: 'up' | 'down' | 'flat' }) {
+  if (direction === 'flat') {
+    return (
+      <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden>
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 12h14" />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      className={cn('h-3.5 w-3.5', direction === 'down' && 'rotate-180')}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      aria-hidden
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M12 19V5m0 0l-6 6m6-6l6 6" />
+    </svg>
+  );
+}
+
+/** Delta chip whose color is semantic (good = success, bad = error). */
+function DeltaChip({ delta }: { delta: MetricDelta }) {
+  const isGood =
+    delta.direction === 'flat'
+      ? null
+      : delta.invert
+        ? delta.direction === 'down'
+        : delta.direction === 'up';
+
+  const tone =
+    isGood == null
+      ? 'bg-bg-sunken text-text-secondary'
+      : isGood
+        ? 'bg-status-success-bg-subtle text-status-success-text'
+        : 'bg-status-error-bg-subtle text-status-error-text';
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums',
+        tone
+      )}
+    >
+      <ArrowIcon direction={delta.direction} />
+      {delta.value}
+    </span>
+  );
+}
+
+const legacyTrendIcons = {
+  up: 'M5 10l7-7m0 0l7 7m-7-7v18',
+  down: 'M19 14l-7 7m0 0l-7-7m7 7V3',
+  flat: 'M5 12h14',
 };
 
 /**
- * MetricCard - Displays a key metric with optional change indicator
+ * MetricCard — a premium stat card: big value, label, an optional colored delta
+ * chip, an optional inline sparkline, and a token-tinted icon chip. Backward
+ * compatible with the legacy `change`/`changeType`/`trend` props.
  */
 export function MetricCard({
   value,
@@ -66,49 +149,26 @@ export function MetricCard({
   className,
   treatment = 'metric',
   glow = false,
+  sparklineData,
+  delta,
+  accent = 'brand',
 }: MetricCardProps) {
   const styles = sizeClasses[size];
 
-  const changeColors = {
+  const legacyChangeColors = {
     positive: 'text-status-success-text',
     negative: 'text-status-error-text',
     neutral: 'text-text-secondary',
   };
 
-  const trendIcons = {
-    up: (
-      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M5 10l7-7m0 0l7 7m-7-7v18"
-        />
-      </svg>
-    ),
-    down: (
-      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M19 14l-7 7m0 0l-7-7m7 7V3"
-        />
-      </svg>
-    ),
-    flat: (
-      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14" />
-      </svg>
-    ),
-  };
+  const hasSpark = Array.isArray(sparklineData) && sparklineData.length >= 2;
 
   return (
     <GlassCard
       treatment={treatment}
       glow={glow}
       className={cn(
-        'overflow-hidden border-border-seam',
+        'group relative overflow-hidden border-border-seam',
         onClick &&
           'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base',
         className
@@ -127,30 +187,28 @@ export function MetricCard({
           }
         : {})}
     >
+      {/* Accent hairline along the top edge — a calm brand accent, no movement. */}
+      <span
+        aria-hidden
+        className="absolute inset-x-0 top-0 h-0.5 opacity-70"
+        style={{
+          background: `linear-gradient(90deg, ${accentSparkColor[accent]}, transparent 85%)`,
+        }}
+      />
       <div className={styles.card}>
-        <div className="flex items-start justify-between">
-          <div className="space-y-1">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0 space-y-1">
             <p className={cn('text-text-secondary', styles.label)}>{label}</p>
-            <p className={cn('text-text-primary tracking-tight tabular-nums', styles.value)}>
+            <p className={cn('tracking-tight tabular-nums text-text-primary', styles.value)}>
               {typeof value === 'number' ? value.toLocaleString() : value}
             </p>
             {subtitle && <p className="text-xs text-text-secondary">{subtitle}</p>}
-            {change && (
-              <div
-                className={cn(
-                  'flex items-center gap-1 text-sm tabular-nums',
-                  changeColors[changeType]
-                )}
-              >
-                {trend && trendIcons[trend]}
-                <span>{change}</span>
-              </div>
-            )}
           </div>
           {icon && (
             <div
               className={cn(
-                'flex-shrink-0 p-2 rounded-lg bg-action-primary-bg/10 text-action-primary-bg',
+                'flex shrink-0 items-center justify-center rounded-xl',
+                accentChipClasses[accent],
                 styles.icon
               )}
             >
@@ -158,6 +216,48 @@ export function MetricCard({
             </div>
           )}
         </div>
+
+        {(delta || hasSpark || change) && (
+          <div className="mt-3 flex items-end justify-between gap-3">
+            <div className="flex items-center gap-2">
+              {delta ? (
+                <DeltaChip delta={delta} />
+              ) : (
+                change && (
+                  <span
+                    className={cn(
+                      'flex items-center gap-1 text-sm tabular-nums',
+                      legacyChangeColors[changeType]
+                    )}
+                  >
+                    {trend && (
+                      <svg
+                        className="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        aria-hidden
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d={legacyTrendIcons[trend]}
+                        />
+                      </svg>
+                    )}
+                    <span>{change}</span>
+                  </span>
+                )
+              )}
+            </div>
+            {hasSpark && (
+              <div className="w-24 shrink-0 sm:w-28">
+                <Sparkline data={sparklineData} color={accentSparkColor[accent]} height={34} />
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </GlassCard>
   );
@@ -173,14 +273,12 @@ export function MetricCardSkeleton({ size = 'md' }: { size?: 'sm' | 'md' | 'lg'
     <GlassCard treatment="metric" className="overflow-hidden border-border-seam">
       <div className={styles.card}>
         <div className="flex items-start justify-between">
-          <div className="space-y-2 flex-1">
-            <div className="h-4 w-24 bg-bg-sunken motion-safe:animate-vc-shimmer rounded" />
-            <div className="h-8 w-32 bg-bg-sunken motion-safe:animate-vc-shimmer rounded" />
-            <div className="h-3 w-20 bg-bg-sunken motion-safe:animate-vc-shimmer rounded" />
+          <div className="flex-1 space-y-2">
+            <div className="h-4 w-24 rounded bg-bg-sunken motion-safe:animate-vc-shimmer" />
+            <div className="h-8 w-32 rounded bg-bg-sunken motion-safe:animate-vc-shimmer" />
+            <div className="h-3 w-20 rounded bg-bg-sunken motion-safe:animate-vc-shimmer" />
           </div>
-          <div
-            className={cn('bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg', styles.icon)}
-          />
+          <div className={cn('rounded-xl bg-bg-sunken motion-safe:animate-vc-shimmer', styles.icon)} />
         </div>
       </div>
     </GlassCard>

package/src/movethewheels/components/StatusBadge.tsx

@@ -66,7 +66,8 @@ export function StatusBadge({
     <Badge
       variant="outline"
       className={cn(
-        'font-medium capitalize border-0 whitespace-nowrap inline-flex items-center',
+        'inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border-0 font-medium capitalize',
+        'ring-1 ring-inset ring-border-seam/60',
         colors.bg,
         colors.text,
         sizeClasses[size],
@@ -77,7 +78,7 @@ export function StatusBadge({
         <span
           aria-hidden="true"
           className={cn(
-            'w-1.5 h-1.5 rounded-full mr-1.5 flex-shrink-0 motion-safe:animate-vc-glow-pulse',
+            'h-1.5 w-1.5 flex-shrink-0 rounded-full motion-safe:animate-vc-glow-pulse',
             colors.text.replace('text-', 'bg-')
           )}
         />
@@ -105,7 +106,7 @@ export function PriorityBadge({
     <Badge
       variant="outline"
       className={cn(
-        'font-medium capitalize border-0 whitespace-nowrap',
+        'rounded-full font-medium capitalize border-0 whitespace-nowrap ring-1 ring-inset ring-border-seam/60',
         colors.bg,
         colors.text,
         sizeClasses[size],
@@ -140,7 +141,7 @@ export function TypeBadge({
     <Badge
       variant="outline"
       className={cn(
-        'font-medium uppercase border-0 whitespace-nowrap',
+        'rounded-full font-medium uppercase border-0 whitespace-nowrap ring-1 ring-inset ring-border-seam/60',
         colors.bg,
         colors.text,
         sizeClasses[size],
@@ -177,7 +178,7 @@ export function PaymentStatusBadge({
     <Badge
       variant="outline"
       className={cn(
-        'font-medium capitalize border-0 whitespace-nowrap',
+        'rounded-full font-medium capitalize border-0 whitespace-nowrap ring-1 ring-inset ring-border-seam/60',
         colors.bg,
         colors.text,
         sizeClasses[size],
@@ -213,7 +214,7 @@ export function VehicleTypeBadge({
     <Badge
       variant="outline"
       className={cn(
-        'font-medium capitalize whitespace-nowrap inline-flex items-center',
+        'rounded-full font-medium capitalize whitespace-nowrap inline-flex items-center ring-1 ring-inset ring-border-seam/60',
         sizeClasses[size],
         className
       )}

package/src/movethewheels/components/charts/ChartShell.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+import { chartTokens } from './chartTokens';
+
+/**
+ * Small on-brand empty state used by every chart when there is no data.
+ * Honest: we never fabricate a placeholder series.
+ */
+export function ChartEmpty({
+  message = 'No data yet',
+  height,
+  className,
+}: {
+  message?: string;
+  height?: number | string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center rounded-2xl border border-dashed border-border-seam bg-bg-sunken/40 text-sm text-text-secondary',
+        className
+      )}
+      style={{ height: height ?? '100%', minHeight: 120 }}
+    >
+      {message}
+    </div>
+  );
+}
+
+interface ChartTooltipPayloadItem {
+  name?: string | number;
+  value?: string | number;
+  color?: string;
+  dataKey?: string | number;
+}
+
+/**
+ * Shared, token-styled recharts tooltip. Pass an optional value formatter.
+ */
+export function ChartTooltip({
+  active,
+  payload,
+  label,
+  formatter,
+}: {
+  active?: boolean;
+  payload?: ChartTooltipPayloadItem[];
+  label?: ReactNode;
+  formatter?: (value: number | string, name: string) => ReactNode;
+}) {
+  if (!active || !payload || payload.length === 0) return null;
+
+  return (
+    <div className="rounded-xl border border-border-seam bg-bg-surface/95 px-3 py-2 shadow-elevation-2 backdrop-blur-sm">
+      {label != null && label !== '' && (
+        <p className="mb-1 text-xs font-medium text-text-secondary">{label}</p>
+      )}
+      <div className="space-y-1">
+        {payload.map((item, i) => (
+          <div key={i} className="flex items-center gap-2 text-xs">
+            <span
+              aria-hidden="true"
+              className="h-2 w-2 shrink-0 rounded-full"
+              style={{ background: item.color ?? chartTokens.brandPrimary }}
+            />
+            <span className="text-text-secondary">{item.name}</span>
+            <span className="ml-auto font-semibold tabular-nums text-text-primary">
+              {formatter && item.value != null
+                ? formatter(item.value, String(item.name ?? ''))
+                : item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/movethewheels/components/charts/Sparkline.tsx

@@ -0,0 +1,85 @@
+import { useId } from 'react';
+import { Area, AreaChart, Line, LineChart, ResponsiveContainer, YAxis } from 'recharts';
+import { chartTokens } from './chartTokens';
+
+export interface SparklinePoint {
+  value: number;
+}
+
+interface SparklineProps {
+  /** Series values — plain numbers or `{ value }` points. */
+  data: Array<number | SparklinePoint>;
+  /** Chart color (defaults to brand orange). Sourced from a design token. */
+  color?: string;
+  /** Render style. */
+  variant?: 'area' | 'line';
+  height?: number;
+  width?: number | string;
+  className?: string;
+  strokeWidth?: number;
+}
+
+/**
+ * Sparkline — a tiny, axis-less trend chart for stat cards. Responsive within
+ * its container; renders nothing (an empty spacer) when there is no data so the
+ * card layout stays stable.
+ */
+export function Sparkline({
+  data,
+  color = chartTokens.brandPrimary,
+  variant = 'area',
+  height = 40,
+  width = '100%',
+  className,
+  strokeWidth = 2,
+}: SparklineProps) {
+  const gradientId = useId().replace(/:/g, '');
+
+  const points = data.map((d, i) => ({
+    i,
+    value: typeof d === 'number' ? d : d.value,
+  }));
+
+  if (points.length < 2) {
+    return <div style={{ height, width }} className={className} aria-hidden="true" />;
+  }
+
+  return (
+    <div style={{ height, width }} className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        {variant === 'area' ? (
+          <AreaChart data={points} margin={{ top: 2, right: 0, bottom: 2, left: 0 }}>
+            <defs>
+              <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor={color} stopOpacity={0.35} />
+                <stop offset="100%" stopColor={color} stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <YAxis hide domain={['dataMin', 'dataMax']} />
+            <Area
+              type="monotone"
+              dataKey="value"
+              stroke={color}
+              strokeWidth={strokeWidth}
+              fill={`url(#${gradientId})`}
+              isAnimationActive={false}
+              dot={false}
+            />
+          </AreaChart>
+        ) : (
+          <LineChart data={points} margin={{ top: 2, right: 0, bottom: 2, left: 0 }}>
+            <YAxis hide domain={['dataMin', 'dataMax']} />
+            <Line
+              type="monotone"
+              dataKey="value"
+              stroke={color}
+              strokeWidth={strokeWidth}
+              isAnimationActive={false}
+              dot={false}
+            />
+          </LineChart>
+        )}
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/movethewheels/components/charts/StatusDonut.tsx

@@ -0,0 +1,115 @@
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
+import { cn } from '../../utils/cn';
+import { seriesColor } from './chartTokens';
+import { ChartEmpty, ChartTooltip } from './ChartShell';
+
+export interface DonutSlice {
+  name: string;
+  value: number;
+  /** Optional explicit color (design-token string). */
+  color?: string;
+}
+
+interface StatusDonutProps {
+  data: DonutSlice[];
+  height?: number;
+  className?: string;
+  /** Big number rendered in the donut hole (e.g. a total). */
+  centerLabel?: string | number;
+  centerSubLabel?: string;
+  showLegend?: boolean;
+  emptyMessage?: string;
+  valueFormatter?: (value: number) => string;
+}
+
+/**
+ * StatusDonut — donut chart with a centered total and a token-styled legend.
+ * Responsive; renders an honest empty state when every slice is zero/absent.
+ */
+export function StatusDonut({
+  data,
+  height = 240,
+  className,
+  centerLabel,
+  centerSubLabel,
+  showLegend = true,
+  emptyMessage = 'No breakdown yet',
+  valueFormatter,
+}: StatusDonutProps) {
+  const slices = (data ?? []).filter((d) => d.value > 0);
+  const total = slices.reduce((sum, d) => sum + d.value, 0);
+
+  if (slices.length === 0 || total === 0) {
+    return <ChartEmpty message={emptyMessage} height={height} className={className} />;
+  }
+
+  const colorOf = (slice: DonutSlice, i: number) => slice.color ?? seriesColor(i);
+
+  return (
+    <div className={cn('flex flex-col gap-4 sm:flex-row sm:items-center', className)}>
+      <div className="relative mx-auto" style={{ width: height, height, maxWidth: '100%' }}>
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Pie
+              data={slices}
+              dataKey="value"
+              nameKey="name"
+              innerRadius="62%"
+              outerRadius="100%"
+              paddingAngle={2}
+              stroke="none"
+              isAnimationActive={false}
+            >
+              {slices.map((slice, i) => (
+                <Cell key={slice.name} fill={colorOf(slice, i)} />
+              ))}
+            </Pie>
+            <Tooltip
+              content={
+                <ChartTooltip
+                  formatter={(v) =>
+                    valueFormatter ? valueFormatter(Number(v)) : String(v)
+                  }
+                />
+              }
+            />
+          </PieChart>
+        </ResponsiveContainer>
+        {centerLabel != null && (
+          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center">
+            <span className="text-2xl font-bold tabular-nums text-text-primary">
+              {centerLabel}
+            </span>
+            {centerSubLabel && (
+              <span className="text-xs text-text-secondary">{centerSubLabel}</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {showLegend && (
+        <ul className="flex flex-1 flex-col gap-2">
+          {slices.map((slice, i) => {
+            const pct = total > 0 ? Math.round((slice.value / total) * 100) : 0;
+            return (
+              <li key={slice.name} className="flex items-center gap-2 text-sm">
+                <span
+                  aria-hidden="true"
+                  className="h-2.5 w-2.5 shrink-0 rounded-full"
+                  style={{ background: colorOf(slice, i) }}
+                />
+                <span className="text-text-secondary">{slice.name}</span>
+                <span className="ml-auto font-semibold tabular-nums text-text-primary">
+                  {valueFormatter ? valueFormatter(slice.value) : slice.value}
+                </span>
+                <span className="w-10 text-right text-xs tabular-nums text-text-secondary">
+                  {pct}%
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}