@burdenoff/microfe-movethewheels 2026.703.4 → 2026.703.6

package/src/movethewheels/pages/InventoryPage.tsx

@@ -2,7 +2,15 @@
  * Inventory Page - Overview of inventory management
  */
 
-import { Package, Warehouse, AlertTriangle, ChevronRight, Plus } from 'lucide-react';
+import {
+  Package,
+  Warehouse,
+  AlertTriangle,
+  ChevronRight,
+  Plus,
+  Boxes,
+  DollarSign,
+} from 'lucide-react';
 import { PageLayout, PageSection } from '../components/PageLayout';
 import { MetricCard, MetricGrid, MetricCardSkeleton } from '../components/MetricCard';
 import { Card, CardContent, Button, Badge, Progress } from '../components/ui';
@@ -88,22 +96,26 @@ export default function InventoryPage() {
             label={t('movethewheels.inventory.metrics.totalProducts', 'Total Products')}
             value={stats.totalProducts}
             icon={<Package size={20} />}
+            accent="brand"
             onClick={() => goTo('inventory/products')}
           />
           <MetricCard
             label={t('movethewheels.inventory.metrics.totalItems', 'Total Items')}
             value={stats.totalItems.toLocaleString()}
-            icon={<Package size={20} />}
+            icon={<Boxes size={20} />}
+            accent="success"
           />
           <MetricCard
             label={t('movethewheels.inventory.metrics.inventoryValue', 'Inventory Value')}
             value={formatCurrency(stats.totalValue)}
-            icon={<Package size={20} />}
+            icon={<DollarSign size={20} />}
+            accent="blue"
           />
           <MetricCard
             label={t('movethewheels.inventory.metrics.warehouses', 'Warehouses')}
             value={stats.totalWarehouses}
             icon={<Warehouse size={20} />}
+            accent="neutral"
             onClick={() => goTo('inventory/warehouses')}
           />
         </MetricGrid>

package/src/movethewheels/pages/LiveTrackingPage.tsx

@@ -4,11 +4,13 @@
  * Real-time map view of all active deliveries.
  */
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { MapPin, Truck, Package, RefreshCw, List, Map } from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
+import { LogisticsMap, type LogisticsMarker } from '../components/maps';
+import { deliveryMarkerStatus, firstRealLatLng } from '../utils/mapMarkers';
 import {
   Card,
   CardContent,
@@ -27,12 +29,15 @@ import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 
+type LiveFilter = 'all' | 'in_transit' | 'out_for_delivery' | 'other';
+
 export default function LiveTrackingPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const { activeDeliveries, isLoading, refetch } = useLiveTracking();
   const { unacknowledgedAlerts } = useTrackingAlerts();
   const [viewMode, setViewMode] = useState<'map' | 'list'>('map');
   const [selectedDelivery, setSelectedDelivery] = useState<string | null>(null);
+  const [filter, setFilter] = useState<LiveFilter>('all');
 
   const goTo = (path: string) => {
     if (navigate) {
@@ -44,6 +49,70 @@ export default function LiveTrackingPage() {
     ? activeDeliveries.find((d) => d.order?.id === selectedDelivery)
     : null;
 
+  const filteredDeliveries = useMemo(
+    () =>
+      activeDeliveries.filter((d) => {
+        const status = d.order?.status;
+        if (filter === 'all') return true;
+        if (filter === 'in_transit') return status === 'in_transit';
+        if (filter === 'out_for_delivery') return status === 'out_for_delivery';
+        return status !== 'in_transit' && status !== 'out_for_delivery';
+      }),
+    [activeDeliveries, filter]
+  );
+
+  // Build brand markers from the best real coordinate we hold for each delivery —
+  // the vehicle GPS fix, else the driver's, else the latest tracking event.
+  // Deliveries with no real coordinate are honestly omitted (never plotted at 0,0).
+  const markers = useMemo<LogisticsMarker[]>(() => {
+    return filteredDeliveries.flatMap((d) => {
+      if (!d.order) return [];
+      const coord = firstRealLatLng(
+        d.vehicle?.currentLocation,
+        d.driver?.currentLocation,
+        d.tracking?.currentLocation
+      );
+      if (!coord) return [];
+      return [
+        {
+          id: d.order.id,
+          lat: coord.lat,
+          lng: coord.lng,
+          label: d.order.orderNumber,
+          status: deliveryMarkerStatus(d.order.status),
+          sublabel:
+            d.driver?.fullName ||
+            d.vehicle?.vehicleNumber ||
+            d.tracking?.currentLocation.address ||
+            undefined,
+        },
+      ];
+    });
+  }, [filteredDeliveries]);
+
+  const locatedCount = markers.length;
+
+  const filterChips: { value: LiveFilter; label: string; count: number }[] = [
+    { value: 'all', label: 'All', count: activeDeliveries.length },
+    {
+      value: 'in_transit',
+      label: 'In transit',
+      count: activeDeliveries.filter((d) => d.order?.status === 'in_transit').length,
+    },
+    {
+      value: 'out_for_delivery',
+      label: 'Out for delivery',
+      count: activeDeliveries.filter((d) => d.order?.status === 'out_for_delivery').length,
+    },
+    {
+      value: 'other',
+      label: 'Other',
+      count: activeDeliveries.filter(
+        (d) => d.order?.status !== 'in_transit' && d.order?.status !== 'out_for_delivery'
+      ).length,
+    },
+  ];
+
   return (
     <PageLayout
       title="Live Tracking"
@@ -134,20 +203,37 @@ export default function LiveTrackingPage() {
         {/* Map / List View */}
         <div className="lg:col-span-2">
           {viewMode === 'map' ? (
-            <Card className="h-[600px]">
-              <CardContent className="p-0 h-full">
-                <div className="w-full h-full bg-bg-sunken rounded-lg flex items-center justify-center">
-                  <div className="text-center text-text-secondary">
-                    <MapPin size={64} className="mx-auto mb-4 opacity-50" />
-                    <p className="text-lg font-medium">Map View</p>
-                    <p className="text-sm">
-                      Interactive map showing {activeDeliveries.length} active deliveries
-                    </p>
-                    <p className="text-xs mt-2">
-                      (Map integration with Mapbox/Google Maps would go here)
-                    </p>
-                  </div>
+            <Card className="overflow-hidden">
+              <CardContent className="p-0">
+                <div className="flex flex-wrap items-center gap-2 border-b border-border-seam p-3">
+                  {filterChips.map((chip) => (
+                    <button
+                      key={chip.value}
+                      type="button"
+                      onClick={() => setFilter(chip.value)}
+                      className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg ${
+                        filter === chip.value
+                          ? 'border-transparent bg-action-primary-bg text-action-primary-text'
+                          : 'border-border-seam text-text-secondary hover:bg-bg-sunken/60'
+                      }`}
+                    >
+                      {chip.label}
+                      <span className="tabular-nums opacity-80">{chip.count}</span>
+                    </button>
+                  ))}
+                  <span className="ml-auto text-xs text-text-secondary">
+                    {locatedCount} of {filteredDeliveries.length} located
+                  </span>
                 </div>
+                <LogisticsMap
+                  markers={markers}
+                  height={560}
+                  emptyMessage={
+                    filteredDeliveries.length === 0
+                      ? 'No active deliveries to plot'
+                      : 'Awaiting live GPS positions for these deliveries'
+                  }
+                />
               </CardContent>
             </Card>
           ) : (
@@ -158,7 +244,7 @@ export default function LiveTrackingPage() {
               <CardContent className="p-0">
                 <ScrollArea className="h-[550px]">
                   <div className="divide-y">
-                    {activeDeliveries.map((delivery) => {
+                    {filteredDeliveries.map((delivery) => {
                       if (!delivery.order) {
                         return null;
                       }
@@ -214,7 +300,7 @@ export default function LiveTrackingPage() {
                         </div>
                       );
                     })}
-                    {activeDeliveries.length === 0 && (
+                    {filteredDeliveries.length === 0 && (
                       <EmptyState
                         illustration="empty-sessions"
                         title="No active deliveries"
@@ -268,6 +354,28 @@ export default function LiveTrackingPage() {
                   <p className="text-sm">
                     {selected.tracking?.currentLocation.address || 'Updating...'}
                   </p>
+                  {(() => {
+                    const coord = firstRealLatLng(
+                      selected.vehicle?.currentLocation,
+                      selected.driver?.currentLocation,
+                      selected.tracking?.currentLocation
+                    );
+                    return coord ? (
+                      <LogisticsMap
+                        className="mt-3 overflow-hidden rounded-lg border border-border-seam"
+                        height={160}
+                        markers={[
+                          {
+                            id: selected.order?.id ?? 'selected',
+                            lat: coord.lat,
+                            lng: coord.lng,
+                            label: selected.order?.orderNumber ?? 'Delivery',
+                            status: deliveryMarkerStatus(selected.order?.status),
+                          },
+                        ]}
+                      />
+                    ) : null;
+                  })()}
                 </div>
                 <div>
                   <p className="text-sm text-text-secondary">Estimated Arrival</p>

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -5,11 +5,23 @@
  */
 
 import { useState } from 'react';
-import { Package, Plus, Filter, Download, RefreshCw, UserPlus, UserCheck } from 'lucide-react';
+import {
+  Package,
+  Plus,
+  Filter,
+  Download,
+  RefreshCw,
+  UserPlus,
+  UserCheck,
+  Clock,
+  Truck,
+  CheckCircle2,
+} from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, PriorityBadge, TypeBadge } from '../components/StatusBadge';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import {
   Button,
   Card,
@@ -219,44 +231,40 @@ export default function OrdersListPage() {
         )}
       </PagePurpose>
 
-      {/* Pipeline at a glance — the page's single emphasis zone */}
-      <EmphasisPanel>
-        <p className="text-sm font-medium text-text-secondary">
+      {/* Pipeline at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">
           {t('movethewheels.orders.glance.title', 'Pipeline at a glance')}
         </p>
-        <div className="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-4">
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalOrders}</p>
-            <p className="text-xs text-text-secondary">
-              {t('movethewheels.orders.glance.total', 'Total orders')}
-            </p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.byStatus.pending}
-            </p>
-            <p className="text-xs text-text-secondary">
-              {t('movethewheels.orders.glance.pending', 'Pending')}
-            </p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.byStatus.in_transit + stats.byStatus.out_for_delivery}
-            </p>
-            <p className="text-xs text-text-secondary">
-              {t('movethewheels.orders.glance.inTransit', 'In transit')}
-            </p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.byStatus.delivered}
-            </p>
-            <p className="text-xs text-text-secondary">
-              {t('movethewheels.orders.glance.delivered', 'Delivered')}
-            </p>
-          </div>
-        </div>
-      </EmphasisPanel>
+        <MetricGrid columns={4}>
+          <MetricCard
+            label={t('movethewheels.orders.glance.total', 'Total orders')}
+            value={totalOrders}
+            icon={<Package size={20} />}
+            accent="brand"
+          />
+          <MetricCard
+            label={t('movethewheels.orders.glance.pending', 'Pending')}
+            value={stats.byStatus.pending}
+            icon={<Clock size={20} />}
+            accent="warning"
+            subtitle={t('movethewheels.orders.glance.pendingSub', 'Awaiting fulfilment')}
+          />
+          <MetricCard
+            label={t('movethewheels.orders.glance.inTransit', 'In transit')}
+            value={stats.byStatus.in_transit + stats.byStatus.out_for_delivery}
+            icon={<Truck size={20} />}
+            accent="blue"
+            subtitle={t('movethewheels.orders.glance.inTransitSub', 'On the road now')}
+          />
+          <MetricCard
+            label={t('movethewheels.orders.glance.delivered', 'Delivered')}
+            value={stats.byStatus.delivered}
+            icon={<CheckCircle2 size={20} />}
+            accent="success"
+          />
+        </MetricGrid>
+      </div>
 
       {/* Filters */}
       <Card>

package/src/movethewheels/pages/ProductsPage.tsx

@@ -3,11 +3,12 @@
  */
 
 import { useState } from 'react';
-import { Package, Plus, RefreshCw, Download } from 'lucide-react';
+import { Package, Plus, RefreshCw, Download, AlertTriangle, Thermometer } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { Badge } from '../components/ui';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useProducts, useProductStats } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
@@ -128,28 +129,31 @@ export default function ProductsPage() {
         routed — keep them accurate so shipments are quoted and handled correctly.
       </PagePurpose>
 
-      {/* Catalog at a glance — the page's single emphasis zone */}
-      <EmphasisPanel>
-        <p className="text-sm font-medium text-text-secondary">Catalog 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 products</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.specialHandling}
-            </p>
-            <p className="text-xs text-text-secondary">Special handling</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {stats.temperatureControlled}
-            </p>
-            <p className="text-xs text-text-secondary">Temp-controlled</p>
-          </div>
-        </div>
-      </EmphasisPanel>
+      {/* Catalog at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">Catalog at a glance</p>
+        <MetricGrid columns={3}>
+          <MetricCard
+            label="Total products"
+            value={stats.total}
+            icon={<Package size={20} />}
+            accent="brand"
+          />
+          <MetricCard
+            label="Special handling"
+            value={stats.specialHandling}
+            icon={<AlertTriangle size={20} />}
+            accent="warning"
+            subtitle="Fragile or hazardous"
+          />
+          <MetricCard
+            label="Temp-controlled"
+            value={stats.temperatureControlled}
+            icon={<Thermometer size={20} />}
+            accent="blue"
+          />
+        </MetricGrid>
+      </div>
 
       <DataTable
         columns={columns}

package/src/movethewheels/pages/ReportsPage.tsx

@@ -33,7 +33,9 @@ import {
   Skeleton,
 } from '../components/ui';
 import { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { VolumeBar } from '../components/charts';
 import { useReports, type CreateReportInput } from '../hooks/useReports';
+import { useAnalytics } from '../hooks/useAnalytics';
 import { formatDate } from '../utils/formatters';
 import { downloadFile, downloadJson, recordToCsv, slugifyForFilename } from '../utils/download';
 
@@ -58,6 +60,8 @@ export default function ReportsPage() {
     limit: REPORTS_PAGE_SIZE,
     offset: page * REPORTS_PAGE_SIZE,
   });
+  const { analytics } = useAnalytics();
+  const previewData = analytics.trends.dailyOrders.slice(-7);
   const [reportType, setReportType] = useState('operations');
   const [busyId, setBusyId] = useState<string | null>(null);
   const [creating, setCreating] = useState(false);
@@ -276,6 +280,25 @@ export default function ReportsPage() {
         </div>
 
         <div className="space-y-6">
+          {/* Data preview — a real snapshot (recent order volume) of what a
+              generated report draws from. Honest empty state when no data. */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Data preview</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-2 text-xs text-text-secondary">Order volume · last 7 days</p>
+              <VolumeBar
+                xKey="date"
+                height={160}
+                showLegend={false}
+                data={previewData}
+                series={[{ dataKey: 'orders', name: 'Orders' }]}
+                emptyMessage="No order data to preview yet"
+              />
+            </CardContent>
+          </Card>
+
           {/* Scheduled Reports — the page's single emphasis zone */}
           <EmphasisPanel className="space-y-3">
             <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary">

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -37,6 +37,8 @@ import {
   SelectValue,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { RouteMap, type RouteStop as MapRouteStop } from '../components/maps';
+import { firstRealLatLng } from '../utils/mapMarkers';
 import { useRoute, useRoutes } from '../hooks/useRoutes';
 import { useFleet } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -165,8 +167,9 @@ function NewRouteForm() {
       }
     >
       <PagePurpose icon={<Navigation size={18} />}>
-        Plan a new delivery route — name it, list the stops to visit, and optionally assign a vehicle
-        and driver. Once created you can optimize it to sequence the stops into the shortest run.
+        Plan a new delivery route — name it, list the stops to visit, and optionally assign a
+        vehicle and driver. Once created you can optimize it to sequence the stops into the shortest
+        run.
       </PagePurpose>
 
       <form onSubmit={handleSubmit} className="max-w-3xl space-y-6">
@@ -363,6 +366,22 @@ export default function RouteDetailsPage() {
   if (isLoading) return <LoadingState message="Loading route details..." />;
   if (error || !route) return <ErrorState title="Route not found" onRetry={refetch} />;
 
+  // Parse coordinates off each waypoint's address; stops without a real coord are
+  // dropped from the map (but still listed below), so the plotted line is honest.
+  const mapStops: MapRouteStop[] = route.stops
+    .map((stop) => {
+      const coord = firstRealLatLng(stop.address);
+      return coord
+        ? {
+            lat: coord.lat,
+            lng: coord.lng,
+            sequence: stop.sequence,
+            label: formatAddress(stop.address) || `Order #${stop.orderId || stop.sequence}`,
+          }
+        : null;
+    })
+    .filter((stop): stop is MapRouteStop => stop !== null);
+
   return (
     <PageLayout
       title={route.name}
@@ -447,12 +466,32 @@ export default function RouteDetailsPage() {
               <CardTitle>Route Map</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="aspect-video bg-bg-sunken rounded-lg flex items-center justify-center">
-                <div className="text-center text-text-secondary">
-                  <MapPin size={48} className="mx-auto mb-2 opacity-50" />
-                  <p>Route map visualization</p>
+              {mapStops.length > 0 ? (
+                <RouteMap
+                  className="overflow-hidden rounded-lg border border-border-seam"
+                  height={360}
+                  stops={mapStops}
+                />
+              ) : (
+                <div className="rounded-lg border border-border-seam bg-bg-sunken/40 p-4">
+                  <p className="mb-3 text-sm text-text-secondary">
+                    These stops don&apos;t have map coordinates yet — showing the planned sequence
+                    instead.
+                  </p>
+                  <ol className="space-y-2">
+                    {route.stops.map((stop) => (
+                      <li key={stop.id} className="flex items-start gap-3">
+                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-action-primary-bg/10 text-xs font-semibold text-primary">
+                          {stop.sequence}
+                        </span>
+                        <span className="text-sm">
+                          {formatAddress(stop.address) || `Order #${stop.orderId || stop.sequence}`}
+                        </span>
+                      </li>
+                    ))}
+                  </ol>
                 </div>
-              </div>
+              )}
             </CardContent>
           </Card>
 

package/src/movethewheels/pages/SettingsPage.tsx

@@ -222,7 +222,7 @@ export default function SettingsPage() {
           <EmphasisPanel>
             <h2 className="text-base font-semibold text-text-primary">Company Information</h2>
             <p className="text-sm text-text-secondary mb-4">Basic company details</p>
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
                 <Label>Company Name</Label>
                 <Input
@@ -270,7 +270,7 @@ export default function SettingsPage() {
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="grid grid-cols-3 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                 <div>
                   <Label>Timezone</Label>
                   <Select