@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

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

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 {
@@ -24,3 +67,10 @@ export {
 
 // Table components
 export { DataTable, type Column } from './DataTable';
+
+// Feedback components
+export { FormError } from './FormError';
+export { Notice, useNotice } from './Notice';
+
+// Documents (reuse of wspace-files-svc)
+export { DocumentsCard } from './DocumentsCard';

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