@burdenoff/microfe-movethewheels 2026.703.4 → 2026.703.6

package/src/movethewheels/pages/TrackingPage.tsx

@@ -4,13 +4,15 @@
  * Track orders by tracking number or order ID.
  */
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { MapPin, Search, Package, Truck, Clock, CheckCircle, AlertCircle } from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
 import { Card, CardContent, CardHeader, CardTitle, Button, Input } from '../components/ui';
 import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { TrackingMap, type TrackEndpoint, type TrackPoint } from '../components/maps';
+import { firstRealLatLng } from '../utils/mapMarkers';
 import { useOrderTracking } from '../hooks/useTracking';
 import { formatDate, formatAddress } from '../utils/formatters';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -42,6 +44,42 @@ export default function TrackingPage() {
     }
   };
 
+  // Real geographic view of the shipment: pickup → delivery endpoints, a
+  // breadcrumb trail from timeline events that carry coordinates, and the live
+  // current position. Everything is coordinate-filtered so a shipment with no
+  // GPS data honestly shows the map's empty state instead of a fake route.
+  const mapModel = useMemo(() => {
+    if (!order) return null;
+    const originCoord = firstRealLatLng(order.pickupAddress);
+    const destCoord = firstRealLatLng(order.deliveryAddress);
+    const origin: TrackEndpoint | null = originCoord
+      ? { ...originCoord, label: `Pickup · ${order.pickupAddress.city || 'Origin'}` }
+      : null;
+    const destination: TrackEndpoint | null = destCoord
+      ? { ...destCoord, label: `Delivery · ${order.deliveryAddress.city || 'Destination'}` }
+      : null;
+
+    const trail: TrackPoint[] = order.timeline
+      .map((event): TrackPoint | null => {
+        const coord = event.location ? firstRealLatLng(event.location) : null;
+        return coord
+          ? { lat: coord.lat, lng: coord.lng, timestamp: new Date(event.timestamp).toISOString() }
+          : null;
+      })
+      .filter((point): point is TrackPoint => point !== null);
+
+    const currentCoord = tracking ? firstRealLatLng(tracking.currentLocation) : null;
+    const current: TrackEndpoint | null = currentCoord
+      ? {
+          ...currentCoord,
+          label: tracking?.currentLocation.address || 'Current position',
+        }
+      : null;
+
+    const hasAny = Boolean(origin || destination || current || trail.length > 0);
+    return { origin, destination, trail, current, hasAny };
+  }, [order, tracking]);
+
   return (
     <PageLayout
       title={t('movethewheels.tracking.title', 'Track Shipment')}
@@ -173,6 +211,30 @@ export default function TrackingPage() {
               </div>
             </EmphasisPanel>
 
+            {/* Route Map — real origin/destination + tracking trail + live position */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <MapPin size={18} />
+                  {t('movethewheels.tracking.routeMap.title', 'Route map')}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <TrackingMap
+                  className="overflow-hidden rounded-lg border border-border-seam"
+                  height={320}
+                  origin={mapModel?.origin ?? null}
+                  destination={mapModel?.destination ?? null}
+                  trail={mapModel?.trail ?? []}
+                  current={mapModel?.current ?? null}
+                  emptyMessage={t(
+                    'movethewheels.tracking.routeMap.empty',
+                    'No location coordinates recorded for this shipment yet'
+                  )}
+                />
+              </CardContent>
+            </Card>
+
             {/* Progress Timeline */}
             <Card>
               <CardHeader>
@@ -351,14 +413,22 @@ export default function TrackingPage() {
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="aspect-video bg-bg-sunken rounded-lg flex items-center justify-center mb-4">
-                  <div className="text-center text-text-secondary">
-                    <MapPin size={32} className="mx-auto mb-2" />
+                {mapModel?.current ? (
+                  <TrackingMap
+                    className="mb-4 overflow-hidden rounded-lg border border-border-seam"
+                    height={180}
+                    current={mapModel.current}
+                    destination={mapModel.destination ?? null}
+                    trail={mapModel.trail}
+                  />
+                ) : (
+                  <div className="mb-4 rounded-lg bg-bg-sunken p-4 text-center text-text-secondary">
+                    <MapPin size={28} className="mx-auto mb-2 opacity-60" />
                     <p className="text-sm">
-                      {t('movethewheels.tracking.location.mapView', 'Map View')}
+                      {t('movethewheels.tracking.location.noFix', 'No live position fix yet')}
                     </p>
                   </div>
-                </div>
+                )}
                 <p className="text-sm">
                   {tracking.currentLocation.address ||
                     t('movethewheels.tracking.location.updating', 'Location updating...')}

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -266,7 +266,7 @@ export default function VehicleDetailsPage() {
               <CardTitle>Capacity</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-3 gap-6">
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
                 <div>
                   <p className="text-sm text-text-secondary">Weight</p>
                   <p className="text-2xl font-bold">

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -3,12 +3,13 @@
  */
 
 import { useState } from 'react';
-import { Truck, Plus, RefreshCw, Download } from 'lucide-react';
+import { Truck, Plus, RefreshCw, Download, CircleCheck, Route as RouteIcon, Wrench } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
 import { Progress } from '../components/ui';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useVehicles, useFleetStats } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
@@ -126,28 +127,37 @@ export default function VehiclesPage() {
         an order.
       </PagePurpose>
 
-      {/* Fleet at a glance — the page's single emphasis zone */}
-      <EmphasisPanel>
-        <p className="text-sm font-medium text-text-secondary">Fleet at a glance</p>
-        <div className="mt-3 grid grid-cols-3 gap-4">
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalVehicles}</p>
-            <p className="text-xs text-text-secondary">Total vehicles</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.vehiclesByStatus.available}
-            </p>
-            <p className="text-xs text-text-secondary">Available now</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.vehiclesByStatus.maintenance}
-            </p>
-            <p className="text-xs text-text-secondary">In maintenance</p>
-          </div>
-        </div>
-      </EmphasisPanel>
+      {/* Fleet at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">Fleet at a glance</p>
+        <MetricGrid columns={4}>
+          <MetricCard
+            label="Total vehicles"
+            value={totalVehicles}
+            icon={<Truck size={20} />}
+            accent="brand"
+          />
+          <MetricCard
+            label="Available now"
+            value={stats.vehiclesByStatus.available}
+            icon={<CircleCheck size={20} />}
+            accent="success"
+            subtitle="Ready to dispatch"
+          />
+          <MetricCard
+            label="On assignment"
+            value={stats.vehiclesByStatus.assigned}
+            icon={<RouteIcon size={20} />}
+            accent="blue"
+          />
+          <MetricCard
+            label="In maintenance"
+            value={stats.vehiclesByStatus.maintenance}
+            icon={<Wrench size={20} />}
+            accent="warning"
+          />
+        </MetricGrid>
+      </div>
 
       <DataTable
         columns={columns}

package/src/movethewheels/pages/WarehouseDetailsPage.tsx

@@ -326,7 +326,7 @@ export default function WarehouseDetailsPage() {
                   {warehouse.capacity.totalSpace.toLocaleString()} sq ft
                 </p>
               </div>
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div>
                   <p className="text-sm text-text-secondary">Pallets Used</p>
                   <p className="text-2xl font-bold">

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -3,11 +3,12 @@
  */
 
 import { useState } from 'react';
-import { Warehouse, Plus, RefreshCw } from 'lucide-react';
+import { Warehouse, Plus, RefreshCw, CircleCheck, Gauge } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { Badge, Progress } from '../components/ui';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useWarehouses, useWarehouseStats } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
@@ -121,26 +122,31 @@ export default function WarehousesPage() {
         to balance stock, spot capacity crunches, and decide where to fulfil an order from.
       </PagePurpose>
 
-      {/* Network at a glance — the page's single emphasis zone */}
-      <EmphasisPanel>
-        <p className="text-sm font-medium text-text-secondary">Network at a glance</p>
-        <div className="mt-3 grid grid-cols-3 gap-4">
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{stats.total}</p>
-            <p className="text-xs text-text-secondary">Total sites</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{stats.active}</p>
-            <p className="text-xs text-text-secondary">Active</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.total > 0 ? `${Math.round(stats.avgUtilization * 100)}%` : '—'}
-            </p>
-            <p className="text-xs text-text-secondary">Avg utilization</p>
-          </div>
-        </div>
-      </EmphasisPanel>
+      {/* Network at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">Network at a glance</p>
+        <MetricGrid columns={3}>
+          <MetricCard
+            label="Total sites"
+            value={stats.total}
+            icon={<Warehouse size={20} />}
+            accent="brand"
+          />
+          <MetricCard
+            label="Active"
+            value={stats.active}
+            icon={<CircleCheck size={20} />}
+            accent="success"
+            subtitle="Fulfilling orders"
+          />
+          <MetricCard
+            label="Avg utilization"
+            value={stats.total > 0 ? `${Math.round(stats.avgUtilization * 100)}%` : '—'}
+            icon={<Gauge size={20} />}
+            accent="blue"
+          />
+        </MetricGrid>
+      </div>
 
       <DataTable
         columns={columns}

package/src/movethewheels/types/index.ts

@@ -691,7 +691,7 @@ export interface Analytics {
     customerSatisfaction: number;
   };
   trends: {
-    dailyOrders: Array<{ date: string; orders: number }>;
+    dailyOrders: Array<{ date: string; orders: number; deliveries: number }>;
     revenue: Array<{ month: string; revenue: number }>;
   };
   fleet: {

package/src/movethewheels/utils/graphqlClient.ts

@@ -19,45 +19,95 @@ export function resolveGraphqlUrl(apiGatewayUrl?: string): string {
   return `${apiGatewayUrl}/workspaces/graphql`;
 }
 
+const MAX_RETRIES = 3;
+
+/**
+ * A transient failure is a momentary gateway↔service connectivity blip (the
+ * workspace service runs a lean replica pool with no PgBouncer, so a burst of
+ * concurrent dashboard queries can briefly exhaust connections and the gateway
+ * returns an upstream-connect / 5xx / reset error). These are safe to retry;
+ * genuine validation / auth / business errors are not.
+ */
+function isTransientMessage(message?: string): boolean {
+  if (!message) return false;
+  return /upstream connect|connection refused|reset before headers|delayed connect|econnrefused|econnreset|socket hang up|service unavailable|bad gateway|gateway timeout|temporarily unavailable|please try again|failed to fetch|networkerror|load failed/i.test(
+    message
+  );
+}
+
+function isTransientStatus(status: number): boolean {
+  // 502/503/504 are gateway/upstream problems; 429 is backpressure. All retryable.
+  return status === 429 || status === 502 || status === 503 || status === 504;
+}
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 export async function executeGraphQL<TData>(
   options: GraphQLRequestOptions,
   query: string,
   variables?: Record<string, unknown>
 ): Promise<TData> {
-  const response = await fetch(resolveGraphqlUrl(options.apiGatewayUrl), {
-    method: 'POST',
-    headers: {
-      'content-type': 'application/json',
-      ...(options.authToken ? { Authorization: `Bearer ${options.authToken}` } : {}),
-      ...(options.workspaceToken
-        ? { 'X-Workspace-Authorization': `Bearer ${options.workspaceToken}` }
-        : {}),
-      ...(options.workspaceId ? { 'x-workspace-id': options.workspaceId } : {}),
-      ...(options.tenantId ? { 'x-tenant-id': options.tenantId } : {}),
-      ...(options.actorId ? { 'x-actor-id': options.actorId } : {}),
-      ...(options.actorId ? { 'x-actor-type': 'user' } : {}),
-    },
-    body: JSON.stringify({ query, variables }),
-  });
-
-  if (!response.ok) {
-    throw new Error(`GraphQL request failed with status ${response.status}`);
-  }
-
-  const payload = (await response.json()) as {
-    data?: TData;
-    errors?: Array<{ message?: string }>;
+  const url = resolveGraphqlUrl(options.apiGatewayUrl);
+  const headers: Record<string, string> = {
+    'content-type': 'application/json',
+    ...(options.authToken ? { Authorization: `Bearer ${options.authToken}` } : {}),
+    ...(options.workspaceToken
+      ? { 'X-Workspace-Authorization': `Bearer ${options.workspaceToken}` }
+      : {}),
+    ...(options.workspaceId ? { 'x-workspace-id': options.workspaceId } : {}),
+    ...(options.tenantId ? { 'x-tenant-id': options.tenantId } : {}),
+    ...(options.actorId ? { 'x-actor-id': options.actorId } : {}),
+    ...(options.actorId ? { 'x-actor-type': 'user' } : {}),
   };
+  const body = JSON.stringify({ query, variables });
 
-  if (payload.errors?.length) {
-    throw new Error(
-      payload.errors.map((item) => item.message ?? 'Unknown GraphQL error').join('; ')
-    );
-  }
+  let lastError: Error = new Error('GraphQL request failed');
+
+  for (let attempt = 0; attempt <= MAX_RETRIES; attempt += 1) {
+    const canRetry = attempt < MAX_RETRIES;
+    // Exponential backoff with jitter before each retry (not the first attempt).
+    if (attempt > 0) await sleep(Math.min(250 * 2 ** (attempt - 1), 2000) + Math.floor(Math.random() * 150));
+
+    try {
+      const response = await fetch(url, { method: 'POST', headers, body });
+
+      if (!response.ok) {
+        lastError = new Error(`GraphQL request failed with status ${response.status}`);
+        if (canRetry && isTransientStatus(response.status)) continue;
+        throw lastError;
+      }
+
+      const payload = (await response.json()) as {
+        data?: TData;
+        errors?: Array<{ message?: string }>;
+      };
+
+      if (payload.errors?.length) {
+        const message = payload.errors
+          .map((item) => item.message ?? 'Unknown GraphQL error')
+          .join('; ');
+        lastError = new Error(message);
+        // The gateway surfaces upstream-connect failures as a 200 body error —
+        // retry those, but never retry a real validation/auth/business error.
+        if (canRetry && payload.errors.some((item) => isTransientMessage(item.message))) continue;
+        throw lastError;
+      }
+
+      if (!payload.data) {
+        lastError = new Error('GraphQL response did not include data');
+        if (canRetry) continue;
+        throw lastError;
+      }
 
-  if (!payload.data) {
-    throw new Error('GraphQL response did not include data');
+      return payload.data;
+    } catch (error) {
+      // A thrown fetch is a network error (TypeError "Failed to fetch") — transient.
+      const message = error instanceof Error ? error.message : String(error);
+      lastError = error instanceof Error ? error : new Error(message);
+      if (canRetry && (isTransientMessage(message) || error instanceof TypeError)) continue;
+      throw lastError;
+    }
   }
 
-  return payload.data;
+  throw lastError;
 }

package/src/movethewheels/utils/mapMarkers.ts

@@ -0,0 +1,58 @@
+/**
+ * Shared helpers for turning domain records into map markers. Pure functions —
+ * no Leaflet import, so they can be reused by any page without pulling map CSS.
+ */
+import type { MapMarkerStatus } from '../components/maps';
+import type { Address, Location } from '../types';
+
+/**
+ * Map an order/shipment status onto the marker's visual status (drives pin color
+ * and glyph). Anything unrecognised falls back to a neutral pin.
+ */
+export function deliveryMarkerStatus(status: string | undefined): MapMarkerStatus {
+  switch ((status ?? '').toLowerCase()) {
+    case 'in_transit':
+      return 'in_transit';
+    case 'out_for_delivery':
+      return 'active';
+    case 'delivered':
+      return 'delivered';
+    case 'failed':
+    case 'delayed':
+    case 'cancelled':
+      return 'delayed';
+    case 'assigned':
+    case 'picked_up':
+    case 'confirmed':
+      return 'active';
+    default:
+      return 'default';
+  }
+}
+
+/**
+ * First location among the candidates that carries a real (non-null-island)
+ * coordinate, returned as a plain `{ lat, lng }`. Returns null when none do.
+ * Kept coordinate-shape-agnostic so callers pass whichever object they have.
+ */
+export function firstRealLatLng(
+  ...candidates: Array<Location | Address | null | undefined>
+): { lat: number; lng: number } | null {
+  for (const candidate of candidates) {
+    if (!candidate) continue;
+    const lat = candidate.latitude;
+    const lng = candidate.longitude;
+    if (
+      typeof lat === 'number' &&
+      typeof lng === 'number' &&
+      Number.isFinite(lat) &&
+      Number.isFinite(lng) &&
+      !(lat === 0 && lng === 0) &&
+      Math.abs(lat) <= 90 &&
+      Math.abs(lng) <= 180
+    ) {
+      return { lat, lng };
+    }
+  }
+  return null;
+}