@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -4,7 +4,7 @@
 
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Truck, ArrowLeft, MapPin, Fuel, Wrench, FileText, Edit, Save } from 'lucide-react';
+import { Truck, ArrowLeft, MapPin, Fuel, Wrench, Edit, Save } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
 import {
@@ -13,7 +13,6 @@ import {
   CardHeader,
   CardTitle,
   Button,
-  Badge,
   Progress,
   Input,
   Label,
@@ -29,6 +28,7 @@ import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
+import { DocumentsCard } from '../components/DocumentsCard';
 
 const VEHICLE_TYPE_OPTIONS = [
   { value: 'TRUCK', label: 'Truck' },
@@ -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">
@@ -291,37 +291,7 @@ export default function VehicleDetailsPage() {
             </CardContent>
           </Card>
 
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <FileText size={18} /> Documents
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              {vehicle.documents.length > 0 ? (
-                <div className="space-y-3">
-                  {vehicle.documents.map((doc) => (
-                    <div
-                      key={doc.id}
-                      className="flex items-center justify-between p-3 border rounded-lg"
-                    >
-                      <div>
-                        <p className="font-medium capitalize">{doc.type.replace('_', ' ')}</p>
-                        <p className="text-sm text-text-secondary">
-                          Expires: {formatDate(doc.expiryDate)}
-                        </p>
-                      </div>
-                      <Badge variant={doc.verified ? 'default' : 'secondary'}>
-                        {doc.verified ? 'Verified' : 'Pending'}
-                      </Badge>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <p className="text-text-secondary text-center py-4">No documents uploaded</p>
-              )}
-            </CardContent>
-          </Card>
+          <DocumentsCard entityType="vehicle" entityId={vehicle.id} />
         </div>
 
         <div className="space-y-6">

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -2,20 +2,30 @@
  * Vehicles Page - List of all vehicles
  */
 
-import { Truck, Plus, RefreshCw, Download } from 'lucide-react';
+import { useState } from '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 { useVehicles } from '../hooks/useFleet';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { useVehicles, useFleetStats } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
 import type { Vehicle } from '../types';
 
 export default function VehiclesPage() {
   const { basePath, navigate } = useMoveTheWheels();
-  const { vehicles, totalVehicles, isLoading, refetch } = useVehicles();
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const { vehicles, isLoading, refetch } = useVehicles({
+    limit: pageSize,
+    offset: page * pageSize,
+  });
+  // Fleet totals + tiles from the live aggregate, not the current page.
+  const { stats } = useFleetStats();
+  const totalVehicles = stats.totalVehicles;
 
   const goTo = (path: string) => {
     if (navigate) {
@@ -102,7 +112,11 @@ export default function VehiclesPage() {
           }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
-            { label: 'Export', icon: <Download size={16} />, onSelect: () => goTo('import-export') },
+            {
+              label: 'Export',
+              icon: <Download size={16} />,
+              onSelect: () => goTo('import-export'),
+            },
           ]}
         />
       }
@@ -113,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">
-              {vehicles.filter((v) => v.status === 'available').length}
-            </p>
-            <p className="text-xs text-text-secondary">Available now</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {vehicles.filter((v) => v.status === 'maintenance').length}
-            </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}
@@ -145,6 +168,14 @@ export default function VehiclesPage() {
         searchFields={['vehicleNumber', 'make', 'model'] as (keyof Vehicle)[]}
         onRowClick={(row) => goTo(`fleet/vehicles/${row.id}`)}
         getRowId={(row) => row.id}
+        pageIndex={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(0);
+        }}
+        totalItems={totalVehicles}
         emptyIllustration="empty-data"
         emptyTitle="No vehicles yet"
         emptyDescription="Add vehicles to your fleet to start assigning them to deliveries."

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

@@ -2,19 +2,28 @@
  * Warehouses Page
  */
 
-import { Warehouse, Plus, RefreshCw } from 'lucide-react';
+import { useState } from '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 { useWarehouses } from '../hooks/useInventory';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { useWarehouses, useWarehouseStats } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
 import type { Warehouse as WarehouseType } from '../types';
 
 export default function WarehousesPage() {
   const { basePath, navigate } = useMoveTheWheels();
-  const { warehouses, totalWarehouses, isLoading, refetch } = useWarehouses();
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const { warehouses, hasMore, isLoading, refetch } = useWarehouses({
+    limit: pageSize,
+    offset: page * pageSize,
+  });
+  // Bounded aggregate for the tiles + subtitle — not the truncated page.
+  const { stats } = useWarehouseStats();
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
@@ -95,7 +104,7 @@ export default function WarehousesPage() {
   return (
     <PageLayout
       title="Warehouses"
-      subtitle={`${totalWarehouses} warehouses`}
+      subtitle={`${stats.total} warehouses`}
       icon={<Warehouse size={24} />}
       headerActions={
         <CTAOverflowMenu
@@ -113,37 +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">{totalWarehouses}</p>
-            <p className="text-xs text-text-secondary">Total sites</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {warehouses.filter((w) => w.isActive).length}
-            </p>
-            <p className="text-xs text-text-secondary">Active</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {warehouses.length > 0
-                ? `${Math.round(
-                    (warehouses.reduce(
-                      (sum, w) => sum + w.capacity.usedSpace / w.capacity.totalSpace,
-                      0
-                    ) /
-                      warehouses.length) *
-                      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}
@@ -154,6 +157,14 @@ export default function WarehousesPage() {
         searchFields={['name', 'code'] as (keyof WarehouseType)[]}
         onRowClick={(row) => goTo(`inventory/warehouses/${row.id}`)}
         getRowId={(row) => row.id}
+        pageIndex={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(0);
+        }}
+        hasNextPage={hasMore}
         emptyIllustration="empty-data"
         emptyTitle="No warehouses yet"
         emptyDescription="Add a warehouse to store inventory and fulfil orders from it."

package/src/movethewheels/types/index.ts

@@ -526,6 +526,8 @@ export interface Route {
   stops: RouteStop[];
   distance: number;
   estimatedDuration: number;
+  /** Estimated fuel cost for the route (svc MtwRoute.fuelCost). */
+  fuelCost?: number;
   actualDuration?: number;
   startTime?: Date;
   endTime?: Date;
@@ -689,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: {
@@ -718,6 +720,12 @@ export interface OrderFilter {
   dateTo?: Date;
   priority?: string;
   orderType?: 'b2b' | 'b2c';
+  /**
+   * Client-side quick filter for orders that still need a driver assigned
+   * (driverId is null). The backend OrderFilterInput has no null-driver
+   * predicate, so this is applied to the fetched page after mapping.
+   */
+  unassigned?: boolean;
 }
 
 export interface FleetFilter {

package/src/movethewheels/utils/download.ts

@@ -0,0 +1,62 @@
+/**
+ * Small browser download helpers used by report/export surfaces.
+ *
+ * These build an in-memory Blob and trigger a same-document download via a
+ * transient anchor — no network round-trip, so they work against data the MFE
+ * already holds in state.
+ */
+
+/** Trigger a browser download of `content` as `filename`. */
+export function downloadFile(filename: string, content: string, mimeType: string): void {
+  if (typeof document === 'undefined') return;
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}
+
+/** Download a pretty-printed JSON file. */
+export function downloadJson(filename: string, data: unknown): void {
+  downloadFile(filename, JSON.stringify(data, null, 2), 'application/json');
+}
+
+/**
+ * Flatten a record of scalar values into a two-column (key,value) CSV. Nested
+ * objects/arrays are JSON-encoded into the value cell. Returns null when there
+ * is nothing tabular to emit.
+ */
+export function recordToCsv(record: Record<string, unknown> | null | undefined): string | null {
+  if (!record || typeof record !== 'object') return null;
+  const entries = Object.entries(record);
+  if (entries.length === 0) return null;
+
+  const escape = (value: string): string =>
+    /[",\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value;
+
+  const cellFor = (value: unknown): string => {
+    if (value == null) return '';
+    if (typeof value === 'object') return JSON.stringify(value);
+    return String(value);
+  };
+
+  const lines = ['Field,Value'];
+  for (const [key, value] of entries) {
+    lines.push(`${escape(key)},${escape(cellFor(value))}`);
+  }
+  return lines.join('\n');
+}
+
+/** Turn an arbitrary label into a filesystem-safe slug for filenames. */
+export function slugifyForFilename(label: string): string {
+  return (
+    label
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '') || 'report'
+  );
+}

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