@burdenoff/microfe-movethewheels 2026.703.4 → 2026.703.6

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

@@ -0,0 +1,179 @@
+import { useId } from 'react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { chartTokens, seriesColor } from './chartTokens';
+import { ChartEmpty, ChartTooltip } from './ChartShell';
+
+export interface TrendSeries {
+  /** Key into each data row. */
+  dataKey: string;
+  /** Legend / tooltip label. */
+  name: string;
+  /** Explicit color (design-token string). Defaults to the categorical palette. */
+  color?: string;
+}
+
+interface TrendChartProps {
+  /** Row objects keyed by `xKey` + each series `dataKey`. */
+  data: Array<Record<string, string | number>>;
+  series: TrendSeries[];
+  /** Row key for the X axis (e.g. "date"). */
+  xKey: string;
+  variant?: 'area' | 'line';
+  height?: number;
+  className?: string;
+  showLegend?: boolean;
+  showGrid?: boolean;
+  emptyMessage?: string;
+  /** Optional Y/tooltip value formatter. */
+  valueFormatter?: (value: number | string, name: string) => string;
+}
+
+/**
+ * TrendChart — multi-series area/line chart for trends over time. Fully
+ * responsive (ResponsiveContainer), token-colored, with an honest empty state.
+ */
+export function TrendChart({
+  data,
+  series,
+  xKey,
+  variant = 'area',
+  height = 300,
+  className,
+  showLegend = true,
+  showGrid = true,
+  emptyMessage = 'No trend data yet',
+  valueFormatter,
+}: TrendChartProps) {
+  const rawId = useId().replace(/:/g, '');
+
+  if (!data || data.length === 0 || series.length === 0) {
+    return <ChartEmpty message={emptyMessage} height={height} className={className} />;
+  }
+
+  const axisTick = { fill: chartTokens.axis, fontSize: 12 };
+  const colorFor = (s: TrendSeries, i: number) => s.color ?? seriesColor(i);
+
+  return (
+    <div className={className} style={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        {variant === 'area' ? (
+          <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 4, left: -8 }}>
+            <defs>
+              {series.map((s, i) => (
+                <linearGradient
+                  key={s.dataKey}
+                  id={`${rawId}-${s.dataKey}`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop offset="0%" stopColor={colorFor(s, i)} stopOpacity={0.28} />
+                  <stop offset="100%" stopColor={colorFor(s, i)} stopOpacity={0.02} />
+                </linearGradient>
+              ))}
+            </defs>
+            {showGrid && (
+              <CartesianGrid strokeDasharray="3 3" stroke={chartTokens.grid} vertical={false} />
+            )}
+            <XAxis
+              dataKey={xKey}
+              tick={axisTick}
+              tickLine={false}
+              axisLine={{ stroke: chartTokens.grid }}
+              minTickGap={24}
+            />
+            <YAxis
+              tick={axisTick}
+              tickLine={false}
+              axisLine={false}
+              width={44}
+              tickFormatter={
+                valueFormatter ? (v: number) => valueFormatter(v, '') : undefined
+              }
+            />
+            <Tooltip
+              cursor={{ stroke: chartTokens.axis, strokeOpacity: 0.3 }}
+              content={<ChartTooltip formatter={valueFormatter} />}
+            />
+            {showLegend && (
+              <Legend
+                iconType="circle"
+                wrapperStyle={{ fontSize: 12, color: chartTokens.textSecondary }}
+              />
+            )}
+            {series.map((s, i) => (
+              <Area
+                key={s.dataKey}
+                type="monotone"
+                dataKey={s.dataKey}
+                name={s.name}
+                stroke={colorFor(s, i)}
+                strokeWidth={2.5}
+                fill={`url(#${rawId}-${s.dataKey})`}
+                isAnimationActive={false}
+                activeDot={{ r: 4, strokeWidth: 0 }}
+              />
+            ))}
+          </AreaChart>
+        ) : (
+          <LineChart data={data} margin={{ top: 8, right: 12, bottom: 4, left: -8 }}>
+            {showGrid && (
+              <CartesianGrid strokeDasharray="3 3" stroke={chartTokens.grid} vertical={false} />
+            )}
+            <XAxis
+              dataKey={xKey}
+              tick={axisTick}
+              tickLine={false}
+              axisLine={{ stroke: chartTokens.grid }}
+              minTickGap={24}
+            />
+            <YAxis
+              tick={axisTick}
+              tickLine={false}
+              axisLine={false}
+              width={44}
+              tickFormatter={
+                valueFormatter ? (v: number) => valueFormatter(v, '') : undefined
+              }
+            />
+            <Tooltip
+              cursor={{ stroke: chartTokens.axis, strokeOpacity: 0.3 }}
+              content={<ChartTooltip formatter={valueFormatter} />}
+            />
+            {showLegend && (
+              <Legend
+                iconType="circle"
+                wrapperStyle={{ fontSize: 12, color: chartTokens.textSecondary }}
+              />
+            )}
+            {series.map((s, i) => (
+              <Line
+                key={s.dataKey}
+                type="monotone"
+                dataKey={s.dataKey}
+                name={s.name}
+                stroke={colorFor(s, i)}
+                strokeWidth={2.5}
+                dot={false}
+                isAnimationActive={false}
+                activeDot={{ r: 4, strokeWidth: 0 }}
+              />
+            ))}
+          </LineChart>
+        )}
+      </ResponsiveContainer>
+    </div>
+  );
+}

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

@@ -0,0 +1,97 @@
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { chartTokens, seriesColor } from './chartTokens';
+import { ChartEmpty, ChartTooltip } from './ChartShell';
+
+export interface VolumeSeries {
+  dataKey: string;
+  name: string;
+  color?: string;
+}
+
+interface VolumeBarProps {
+  data: Array<Record<string, string | number>>;
+  series: VolumeSeries[];
+  xKey: string;
+  height?: number;
+  className?: string;
+  showLegend?: boolean;
+  stacked?: boolean;
+  emptyMessage?: string;
+  valueFormatter?: (value: number | string, name: string) => string;
+}
+
+/**
+ * VolumeBar — grouped/stacked bar chart (e.g. weekly order volume, revenue by
+ * month). Responsive, token-colored, rounded bars, honest empty state.
+ */
+export function VolumeBar({
+  data,
+  series,
+  xKey,
+  height = 280,
+  className,
+  showLegend = true,
+  stacked = false,
+  emptyMessage = 'No volume data yet',
+  valueFormatter,
+}: VolumeBarProps) {
+  if (!data || data.length === 0 || series.length === 0) {
+    return <ChartEmpty message={emptyMessage} height={height} className={className} />;
+  }
+
+  const axisTick = { fill: chartTokens.axis, fontSize: 12 };
+
+  return (
+    <div className={className} style={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={data} margin={{ top: 8, right: 12, bottom: 4, left: -8 }} barGap={4}>
+          <CartesianGrid strokeDasharray="3 3" stroke={chartTokens.grid} vertical={false} />
+          <XAxis
+            dataKey={xKey}
+            tick={axisTick}
+            tickLine={false}
+            axisLine={{ stroke: chartTokens.grid }}
+          />
+          <YAxis
+            tick={axisTick}
+            tickLine={false}
+            axisLine={false}
+            width={44}
+            tickFormatter={valueFormatter ? (v: number) => valueFormatter(v, '') : undefined}
+          />
+          <Tooltip
+            cursor={{ fill: chartTokens.axis, fillOpacity: 0.08 }}
+            content={<ChartTooltip formatter={valueFormatter} />}
+          />
+          {showLegend && (
+            <Legend
+              iconType="circle"
+              wrapperStyle={{ fontSize: 12, color: chartTokens.textSecondary }}
+            />
+          )}
+          {series.map((s, i) => (
+            <Bar
+              key={s.dataKey}
+              dataKey={s.dataKey}
+              name={s.name}
+              fill={s.color ?? seriesColor(i)}
+              radius={stacked ? [0, 0, 0, 0] : [4, 4, 0, 0]}
+              stackId={stacked ? 'stack' : undefined}
+              maxBarSize={48}
+              isAnimationActive={false}
+            />
+          ))}
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/movethewheels/components/charts/chartTokens.ts

@@ -0,0 +1,43 @@
+/**
+ * Chart color tokens.
+ *
+ * Recharts needs explicit color strings on its series props (fill/stroke) where
+ * Tailwind token classes cannot reach the SVG. We source every one of those
+ * colors from the fe-libs design tokens via `var(--color-*)` so charts stay
+ * theme-aware (light/dark + product themes) and never introduce raw palette
+ * colors. The CSS variables resolve to full color values in the app-shell.
+ */
+
+export const chartTokens = {
+  /** Product brand orange — primary accent / first data series. */
+  brandPrimary: 'var(--color-brand-primary)',
+  /** Brand secondary (orange-hover) — used sparingly for gradients. */
+  brandSecondary: 'var(--color-brand-secondary)',
+  /** Brand blue — the natural counterpart series to the orange. */
+  brandBlue: 'var(--color-chart-1)',
+  /** Categorical series palette (theme-aware). */
+  series: [
+    'var(--color-brand-primary)',
+    'var(--color-chart-1)',
+    'var(--color-chart-2)',
+    'var(--color-chart-3)',
+    'var(--color-chart-4)',
+    'var(--color-chart-5)',
+    'var(--color-chart-6)',
+    'var(--color-chart-7)',
+    'var(--color-chart-8)',
+  ],
+  grid: 'var(--color-chart-grid)',
+  axis: 'var(--color-chart-axis)',
+  positive: 'var(--color-chart-positive)',
+  negative: 'var(--color-chart-negative)',
+  surface: 'var(--color-bg-surface)',
+  border: 'var(--color-border-seam)',
+  textSecondary: 'var(--color-text-secondary)',
+  textPrimary: 'var(--color-text-primary)',
+} as const;
+
+/** Resolve a categorical color by index, wrapping around the palette. */
+export function seriesColor(index: number): string {
+  return chartTokens.series[index % chartTokens.series.length];
+}

package/src/movethewheels/components/charts/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Chart primitives (recharts) — token-colored, responsive, honest empty states.
+ */
+export { Sparkline, type SparklinePoint } from './Sparkline';
+export { TrendChart, type TrendSeries } from './TrendChart';
+export { VolumeBar, type VolumeSeries } from './VolumeBar';
+export { StatusDonut, type DonutSlice } from './StatusDonut';
+export { ChartEmpty, ChartTooltip } from './ChartShell';
+export { chartTokens, seriesColor } from './chartTokens';

package/src/movethewheels/components/index.ts

@@ -11,7 +11,50 @@ export * from './ui';
 export { PageLayout, PageSection, EmptyState, LoadingState, ErrorState } from './PageLayout';
 
 // Metric components
-export { MetricCard, MetricCardSkeleton, MetricGrid } from './MetricCard';
+export {
+  MetricCard,
+  MetricCardSkeleton,
+  MetricGrid,
+  type MetricAccent,
+  type MetricDelta,
+} from './MetricCard';
+
+// Surface primitive
+export { GlassPanel } from './GlassPanel';
+
+// Charts (recharts)
+export {
+  Sparkline,
+  TrendChart,
+  VolumeBar,
+  StatusDonut,
+  ChartEmpty,
+  ChartTooltip,
+  chartTokens,
+  seriesColor,
+  type SparklinePoint,
+  type TrendSeries,
+  type VolumeSeries,
+  type DonutSlice,
+} from './charts';
+
+// Maps (react-leaflet + OpenStreetMap)
+export {
+  LogisticsMap,
+  RouteMap,
+  TrackingMap,
+  MapCanvas,
+  createPinIcon,
+  createStopIcon,
+  createCurrentIcon,
+  isRealCoord,
+  type LogisticsMarker,
+  type LogisticsRoute,
+  type RouteStop,
+  type TrackPoint,
+  type TrackEndpoint,
+  type MapMarkerStatus,
+} from './maps';
 
 // Status components
 export {

package/src/movethewheels/components/maps/LogisticsMap.tsx

@@ -0,0 +1,94 @@
+import { useMemo } from 'react';
+import { Marker, Polyline, Popup } from 'react-leaflet';
+import { MapCanvas } from './MapCanvas';
+import { createPinIcon, isRealCoord, type MapMarkerStatus } from './leaflet-setup';
+
+export interface LogisticsMarker {
+  id: string;
+  lat: number;
+  lng: number;
+  label: string;
+  status?: MapMarkerStatus;
+  sublabel?: string;
+}
+
+export interface LogisticsRoute {
+  points: Array<[number, number]>;
+  color?: string;
+}
+
+interface LogisticsMapProps {
+  markers: LogisticsMarker[];
+  routes?: LogisticsRoute[];
+  height?: number | string;
+  className?: string;
+  fitToMarkers?: boolean;
+  emptyMessage?: string;
+}
+
+/**
+ * LogisticsMap — an OSM map of brand-styled vehicle/asset markers plus optional
+ * route polylines. Auto-fits to the visible markers. Coordinates at null-island
+ * (0,0) or non-finite values are treated as "no location" and filtered out, so
+ * the map is never dumped in the ocean. Empty markers → honest empty state.
+ */
+export function LogisticsMap({
+  markers,
+  routes = [],
+  height = 420,
+  className,
+  fitToMarkers = true,
+  emptyMessage = 'No live locations yet',
+}: LogisticsMapProps) {
+  const validMarkers = useMemo(
+    () => markers.filter((m) => isRealCoord(m.lat, m.lng)),
+    [markers]
+  );
+
+  const validRoutes = useMemo(
+    () =>
+      routes
+        .map((r) => ({
+          ...r,
+          points: r.points.filter(([lat, lng]) => isRealCoord(lat, lng)),
+        }))
+        .filter((r) => r.points.length >= 2),
+    [routes]
+  );
+
+  const fitPoints = useMemo<Array<[number, number]>>(() => {
+    const pts: Array<[number, number]> = validMarkers.map((m) => [m.lat, m.lng]);
+    validRoutes.forEach((r) => pts.push(...r.points));
+    return pts;
+  }, [validMarkers, validRoutes]);
+
+  return (
+    <MapCanvas
+      points={fitPoints}
+      height={height}
+      className={className}
+      fitToMarkers={fitToMarkers}
+      emptyState={<p className="text-sm text-text-secondary">{emptyMessage}</p>}
+    >
+      {validRoutes.map((route, i) => (
+        <Polyline
+          key={i}
+          positions={route.points}
+          pathOptions={{
+            color: route.color ?? 'var(--color-chart-1)',
+            weight: 4,
+            opacity: 0.85,
+          }}
+        />
+      ))}
+      {validMarkers.map((m) => (
+        <Marker key={m.id} position={[m.lat, m.lng]} icon={createPinIcon(m.status ?? 'default')}>
+          <Popup>
+            <span className="font-semibold">{m.label}</span>
+            {m.sublabel && <span className="block text-text-secondary">{m.sublabel}</span>}
+          </Popup>
+        </Marker>
+      ))}
+    </MapCanvas>
+  );
+}

package/src/movethewheels/components/maps/MapCanvas.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import L from 'leaflet';
+import { MapContainer, TileLayer, useMap } from 'react-leaflet';
+import { cn } from '../../utils/cn';
+import { OSM_ATTRIBUTION, OSM_TILE_URL } from './leaflet-setup';
+
+/** SSR/lazy safety: only mount Leaflet (which touches the DOM) after mount. */
+export function useIsMounted(): boolean {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted;
+}
+
+/**
+ * Imperatively fit the map to a set of [lat,lng] points whenever they change.
+ * Invalidates size on mount so tiles render correctly inside flex/grid parents.
+ */
+export function FitBounds({
+  points,
+  padding = 48,
+  maxZoom = 13,
+}: {
+  points: Array<[number, number]>;
+  padding?: number;
+  maxZoom?: number;
+}) {
+  const map = useMap();
+
+  useEffect(() => {
+    const t = setTimeout(() => map.invalidateSize(), 0);
+    return () => clearTimeout(t);
+  }, [map]);
+
+  useEffect(() => {
+    if (points.length === 0) return;
+    if (points.length === 1) {
+      map.setView(points[0], Math.min(maxZoom, 12));
+      return;
+    }
+    const bounds = L.latLngBounds(points);
+    map.fitBounds(bounds, { padding: [padding, padding], maxZoom });
+  }, [map, points, padding, maxZoom]);
+
+  return null;
+}
+
+interface MapCanvasProps {
+  points: Array<[number, number]>;
+  height?: number | string;
+  className?: string;
+  fitToMarkers?: boolean;
+  /** Fallback center when there are no points but we still render the canvas. */
+  center?: [number, number];
+  zoom?: number;
+  children?: ReactNode;
+  /** Rendered instead of the map when there are no points. */
+  emptyState?: ReactNode;
+}
+
+/**
+ * MapCanvas — the shared OSM MapContainer used by every map component. Handles
+ * mount-safety, container sizing, rounded/overflow styling, tile layer, and
+ * auto-fit. Renders `emptyState` when there is nothing to plot.
+ */
+export function MapCanvas({
+  points,
+  height = 420,
+  className,
+  fitToMarkers = true,
+  center,
+  zoom = 5,
+  children,
+  emptyState,
+}: MapCanvasProps) {
+  const mounted = useIsMounted();
+
+  const wrapperClass = cn(
+    'relative overflow-hidden rounded-2xl border border-border-seam bg-bg-sunken',
+    className
+  );
+  const style = { height, width: '100%' };
+
+  if (points.length === 0 && emptyState) {
+    return (
+      <div className={wrapperClass} style={style}>
+        <div className="flex h-full w-full items-center justify-center p-6 text-center">
+          {emptyState}
+        </div>
+      </div>
+    );
+  }
+
+  if (!mounted) {
+    return (
+      <div className={wrapperClass} style={style} aria-busy="true">
+        <div className="h-full w-full motion-safe:animate-vc-shimmer bg-bg-sunken" />
+      </div>
+    );
+  }
+
+  const initialCenter: [number, number] = center ?? points[0] ?? [20, 0];
+
+  return (
+    <div className={wrapperClass} style={style}>
+      <MapContainer
+        center={initialCenter}
+        zoom={points.length > 0 ? zoom : 2}
+        scrollWheelZoom={false}
+        style={{ height: '100%', width: '100%' }}
+        className="z-0"
+      >
+        <TileLayer url={OSM_TILE_URL} attribution={OSM_ATTRIBUTION} />
+        {fitToMarkers && <FitBounds points={points} />}
+        {children}
+      </MapContainer>
+    </div>
+  );
+}

package/src/movethewheels/components/maps/RouteMap.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { Marker, Polyline, Popup } from 'react-leaflet';
+import { MapCanvas } from './MapCanvas';
+import { createStopIcon, isRealCoord } from './leaflet-setup';
+
+export interface RouteStop {
+  lat: number;
+  lng: number;
+  label: string;
+  sequence: number;
+}
+
+interface RouteMapProps {
+  stops: RouteStop[];
+  height?: number | string;
+  className?: string;
+  /** Polyline color (design-token string). Defaults to brand blue. */
+  routeColor?: string;
+  emptyMessage?: string;
+}
+
+/**
+ * RouteMap — numbered stop markers in sequence connected by a polyline. Filters
+ * out stops without a real coordinate and orders the line by `sequence`.
+ */
+export function RouteMap({
+  stops,
+  height = 420,
+  className,
+  routeColor = 'var(--color-chart-1)',
+  emptyMessage = 'No stops with coordinates yet',
+}: RouteMapProps) {
+  const ordered = useMemo(
+    () => [...stops].filter((s) => isRealCoord(s.lat, s.lng)).sort((a, b) => a.sequence - b.sequence),
+    [stops]
+  );
+
+  const line = useMemo<Array<[number, number]>>(
+    () => ordered.map((s) => [s.lat, s.lng]),
+    [ordered]
+  );
+
+  return (
+    <MapCanvas
+      points={line}
+      height={height}
+      className={className}
+      emptyState={<p className="text-sm text-text-secondary">{emptyMessage}</p>}
+    >
+      {line.length >= 2 && (
+        <Polyline
+          positions={line}
+          pathOptions={{ color: routeColor, weight: 4, opacity: 0.85 }}
+        />
+      )}
+      {ordered.map((s) => (
+        <Marker
+          key={`${s.sequence}-${s.lat}-${s.lng}`}
+          position={[s.lat, s.lng]}
+          icon={createStopIcon(s.sequence)}
+        >
+          <Popup>
+            <span className="font-semibold">
+              {s.sequence}. {s.label}
+            </span>
+          </Popup>
+        </Marker>
+      ))}
+    </MapCanvas>
+  );
+}