@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/src/movethewheels/components/GlassPanel.tsx

@@ -0,0 +1,71 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { GlassCard } from '@burdenoff/fe-libs/ui';
+import { cn } from '../utils/cn';
+
+interface GlassPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Optional panel title rendered in a compact header row. */
+  title?: ReactNode;
+  /** Optional right-aligned header slot (actions, filters, legend chips). */
+  action?: ReactNode;
+  /** Optional supporting text under the title. */
+  description?: ReactNode;
+  /** Inner padding. Defaults to `md`. Use `none` for edge-to-edge (maps/charts). */
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  treatment?: 'glass' | 'plain' | 'metric' | 'insight';
+  glow?: boolean;
+  children?: ReactNode;
+  /** Extra classes for the inner content wrapper (below the header). */
+  bodyClassName?: string;
+}
+
+const paddingClasses: Record<NonNullable<GlassPanelProps['padding']>, string> = {
+  none: 'p-0',
+  sm: 'p-3',
+  md: 'p-4 sm:p-5',
+  lg: 'p-6',
+};
+
+/**
+ * GlassPanel — a translucent, rounded surface wrapper with an optional header
+ * (title / description / action). The glassmorphism-lite building block for
+ * dashboard sections, map/chart cards, and side rails. Token-based, theme-aware,
+ * and follows the fe-libs no-movement hover policy.
+ */
+export function GlassPanel({
+  title,
+  action,
+  description,
+  padding = 'md',
+  treatment = 'glass',
+  glow = false,
+  className,
+  bodyClassName,
+  children,
+  ...rest
+}: GlassPanelProps) {
+  const hasHeader = title != null || action != null || description != null;
+
+  return (
+    <GlassCard
+      treatment={treatment}
+      glow={glow}
+      className={cn('overflow-hidden border-border-seam', className)}
+      {...rest}
+    >
+      {hasHeader && (
+        <div className="flex items-start justify-between gap-3 border-b border-border-seam/70 px-4 py-3 sm:px-5">
+          <div className="min-w-0 space-y-0.5">
+            {title != null && (
+              <h3 className="truncate text-sm font-semibold text-text-primary">{title}</h3>
+            )}
+            {description != null && (
+              <p className="text-xs text-text-secondary">{description}</p>
+            )}
+          </div>
+          {action != null && <div className="flex shrink-0 items-center gap-2">{action}</div>}
+        </div>
+      )}
+      <div className={cn(paddingClasses[padding], bodyClassName)}>{children}</div>
+    </GlassCard>
+  );
+}

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/Notice.tsx

@@ -0,0 +1,61 @@
+/**
+ * Notice — inline success / info feedback banner.
+ *
+ * The MoveTheWheels MFE does not mount its own sonner Toaster (mounting a second
+ * Toaster inside a host shell causes duplicate toasts), so action feedback is
+ * shown inline via this banner. Renders nothing when there is no message, so it
+ * can be dropped in unconditionally. Uses semantic status tokens so it themes
+ * correctly. Pair it with `useNotice` for auto-dismiss behaviour.
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import { CheckCircle, Info } from 'lucide-react';
+
+type NoticeVariant = 'success' | 'info';
+
+interface NoticeProps {
+  message?: string | null;
+  variant?: NoticeVariant;
+}
+
+export function Notice({ message, variant = 'success' }: NoticeProps) {
+  if (!message) return null;
+  const isSuccess = variant === 'success';
+  return (
+    <div
+      role="status"
+      className={`flex items-start gap-2 rounded-lg border px-4 py-3 text-sm ${
+        isSuccess
+          ? 'border-status-success-border bg-status-success-bg-subtle text-status-success-text'
+          : 'border-status-info-border bg-status-info-bg-subtle text-status-info-text'
+      }`}
+    >
+      {isSuccess ? (
+        <CheckCircle size={18} className="mt-0.5 shrink-0" />
+      ) : (
+        <Info size={18} className="mt-0.5 shrink-0" />
+      )}
+      <span>{message}</span>
+    </div>
+  );
+}
+
+/**
+ * useNotice — transient success/info message that auto-clears after a delay.
+ * Returns the current message plus a `notify` setter, mirroring a toast API.
+ */
+export function useNotice(autoDismissMs = 4000) {
+  const [message, setMessage] = useState<string | null>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const notify = useCallback(
+    (next: string) => {
+      setMessage(next);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setMessage(null), autoDismissMs);
+    },
+    [autoDismissMs]
+  );
+
+  return { message, notify };
+}

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>
+  );
+}