@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.4

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -15,6 +15,9 @@ import {
   Plus,
   Trash2,
   Save,
+  ArrowUp,
+  ArrowDown,
+  Fuel,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
@@ -37,10 +40,11 @@ import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useRoute, useRoutes } from '../hooks/useRoutes';
 import { useFleet } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { formatDate, formatAddress } from '../utils/formatters';
+import { formatDate, formatAddress, formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { ROUTE_STATUS_COLORS } from '../constants';
 import { FormError } from '../components/FormError';
+import { Notice, useNotice } from '../components/Notice';
 import type { Route as RouteType, RouteStop } from '../types';
 
 const ROUTE_STATUS_OPTIONS: { value: RouteType['status']; label: string }[] = [
@@ -90,6 +94,15 @@ function NewRouteForm() {
       stops: prev.stops.map((stop, i) => (i === index ? { ...stop, [field]: value } : stop)),
     }));
 
+  const moveStop = (index: number, direction: -1 | 1) =>
+    setForm((prev) => {
+      const target = index + direction;
+      if (target < 0 || target >= prev.stops.length) return prev;
+      const stops = [...prev.stops];
+      [stops[index], stops[target]] = [stops[target], stops[index]];
+      return { ...prev, stops };
+    });
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!form.name.trim()) {
@@ -273,7 +286,27 @@ function NewRouteForm() {
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="md:col-span-1 flex justify-end">
+                <div className="md:col-span-1 flex justify-end gap-1">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => moveStop(index, -1)}
+                    disabled={index === 0}
+                    aria-label={`Move stop ${index + 1} up`}
+                  >
+                    <ArrowUp size={16} />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => moveStop(index, 1)}
+                    disabled={index === form.stops.length - 1}
+                    aria-label={`Move stop ${index + 1} down`}
+                  >
+                    <ArrowDown size={16} />
+                  </Button>
                   <Button
                     type="button"
                     variant="ghost"
@@ -300,10 +333,28 @@ export default function RouteDetailsPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const { route, isLoading, error, refetch } = useRoute(routeId);
   const { optimizeRoute } = useRoutes();
+  const { message: notice, notify } = useNotice();
+  const [optimizeError, setOptimizeError] = useState<string | null>(null);
+  const [optimizing, setOptimizing] = useState(false);
 
   const goBack = () => navigate?.(joinPath(basePath, 'routes'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  const handleOptimize = async () => {
+    if (!routeId) return;
+    setOptimizing(true);
+    setOptimizeError(null);
+    try {
+      await optimizeRoute(routeId);
+      notify('Route optimized — stops resequenced for the shortest run.');
+      refetch();
+    } catch (e) {
+      setOptimizeError(e instanceof Error ? e.message : 'Failed to optimize route.');
+    } finally {
+      setOptimizing(false);
+    }
+  };
+
   // Handle new route form
   if (!routeId) {
     return <NewRouteForm />;
@@ -312,15 +363,6 @@ export default function RouteDetailsPage() {
   if (isLoading) return <LoadingState message="Loading route details..." />;
   if (error || !route) return <ErrorState title="Route not found" onRetry={refetch} />;
 
-  const handleOptimize = async () => {
-    try {
-      await optimizeRoute(route.id);
-      refetch();
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
   return (
     <PageLayout
       title={route.name}
@@ -332,8 +374,8 @@ export default function RouteDetailsPage() {
             <ArrowLeft size={16} /> Back
           </Button>
           {!route.optimized && (
-            <Button variant="outline" onClick={handleOptimize}>
-              <Zap size={16} /> Optimize
+            <Button variant="outline" onClick={handleOptimize} disabled={optimizing}>
+              <Zap size={16} /> {optimizing ? 'Optimizing…' : 'Optimize'}
             </Button>
           )}
           <Button>
@@ -387,6 +429,17 @@ export default function RouteDetailsPage() {
         ]}
       />
 
+      {optimizeError && (
+        <div className="mb-2">
+          <FormError message={optimizeError} />
+        </div>
+      )}
+      {notice && (
+        <div className="mb-2">
+          <Notice message={notice} />
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-6">
           <Card>
@@ -475,6 +528,14 @@ export default function RouteDetailsPage() {
                 <span className="text-sm font-normal"> min</span>
               </p>
             </div>
+            {route.fuelCost !== undefined && (
+              <div>
+                <p className="text-sm text-text-secondary flex items-center gap-1">
+                  <Fuel size={14} /> Est. Fuel Cost
+                </p>
+                <p className="text-2xl font-bold">{formatCurrency(route.fuelCost)}</p>
+              </div>
+            )}
             {route.actualDuration && (
               <div>
                 <p className="text-sm text-text-secondary">Actual Duration</p>

package/src/movethewheels/pages/RoutesPage.tsx

@@ -2,13 +2,14 @@
  * Routes Page
  */
 
+import { useState } from 'react';
 import { Plus, RefreshCw, Navigation } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge } from '../components/StatusBadge';
 import { Badge, Button } from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useRoutes } from '../hooks/useRoutes';
+import { useRoutes, useRouteStats } from '../hooks/useRoutes';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -17,7 +18,14 @@ import type { Route } from '../types';
 
 export default function RoutesPage() {
   const { basePath, navigate } = useMoveTheWheels();
-  const { routes, totalRoutes, isLoading, refetch } = useRoutes();
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const { routes, hasMore, isLoading, refetch } = useRoutes({
+    limit: pageSize,
+    offset: page * pageSize,
+  });
+  // Bounded aggregate for the tiles + subtitle — not the truncated page.
+  const { stats } = useRouteStats();
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
@@ -72,7 +80,7 @@ export default function RoutesPage() {
   return (
     <PageLayout
       title="Routes"
-      subtitle={`${totalRoutes} routes`}
+      subtitle={`${stats.totalRoutes} routes`}
       icon={<Navigation size={24} />}
       headerActions={
         <CTAOverflowMenu
@@ -96,18 +104,18 @@ export default function RoutesPage() {
         <p className="text-sm font-medium text-text-secondary">Routes 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">{totalRoutes}</p>
+            <p className="text-2xl font-bold text-text-primary tabular-nums">{stats.totalRoutes}</p>
             <p className="text-xs text-text-secondary">Total routes</p>
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {routes.filter((r) => r.status === 'in_progress').length}
+              {stats.inProgressRoutes}
             </p>
             <p className="text-xs text-text-secondary">In progress</p>
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {routes.filter((r) => r.optimized).length}
+              {stats.optimizedRoutes}
             </p>
             <p className="text-xs text-text-secondary">Optimized</p>
           </div>
@@ -123,6 +131,14 @@ export default function RoutesPage() {
         searchFields={['name'] as (keyof Route)[]}
         onRowClick={(row) => goTo(`routes/${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 routes yet"
         emptyDescription="Create a route to batch deliveries into an optimized driving plan."

package/src/movethewheels/pages/SettingsPage.tsx

@@ -187,7 +187,7 @@ export default function SettingsPage() {
           {
             id: 'security',
             label: 'Secure your account',
-            description: 'Update your password and enable two-factor authentication.',
+            description: 'Enable two-factor authentication for an extra layer of security.',
             icon: <Shield size={16} />,
             onClick: () => setTab('security'),
           },
@@ -352,26 +352,10 @@ export default function SettingsPage() {
             <CardHeader>
               <CardTitle>Password</CardTitle>
               <CardDescription>
-                Passwords are managed by your workspace identity provider.
+                Your password and sign-in credentials are managed centrally by your workspace
+                identity provider — update them from your account security settings, not here.
               </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <Label>Current Password</Label>
-                <Input type="password" autoComplete="current-password" />
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <Label>New Password</Label>
-                  <Input type="password" autoComplete="new-password" />
-                </div>
-                <div>
-                  <Label>Confirm Password</Label>
-                  <Input type="password" autoComplete="new-password" />
-                </div>
-              </div>
-              <Button variant="outline">Update Password</Button>
-            </CardContent>
           </Card>
           <Card>
             <CardHeader>

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' },
@@ -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,29 @@
  * Vehicles Page - List of all vehicles
  */
 
+import { useState } from 'react';
 import { Truck, Plus, RefreshCw, Download } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 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 { 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 +111,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'),
+            },
           ]}
         />
       }
@@ -123,13 +136,13 @@ export default function VehiclesPage() {
           </div>
           <div>
             <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {vehicles.filter((v) => v.status === 'available').length}
+              {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">
-              {vehicles.filter((v) => v.status === 'maintenance').length}
+              {stats.vehiclesByStatus.maintenance}
             </p>
             <p className="text-xs text-text-secondary">In maintenance</p>
           </div>
@@ -145,6 +158,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/WarehousesPage.tsx

@@ -2,19 +2,27 @@
  * Warehouses Page
  */
 
+import { useState } from 'react';
 import { Warehouse, Plus, RefreshCw } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 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 { 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 +103,7 @@ export default function WarehousesPage() {
   return (
     <PageLayout
       title="Warehouses"
-      subtitle={`${totalWarehouses} warehouses`}
+      subtitle={`${stats.total} warehouses`}
       icon={<Warehouse size={24} />}
       headerActions={
         <CTAOverflowMenu
@@ -118,27 +126,16 @@ export default function WarehousesPage() {
         <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-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">
-              {warehouses.filter((w) => w.isActive).length}
-            </p>
+            <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">
-              {warehouses.length > 0
-                ? `${Math.round(
-                    (warehouses.reduce(
-                      (sum, w) => sum + w.capacity.usedSpace / w.capacity.totalSpace,
-                      0
-                    ) /
-                      warehouses.length) *
-                      100
-                  )}%`
-                : '—'}
+              {stats.total > 0 ? `${Math.round(stats.avgUtilization * 100)}%` : '—'}
             </p>
             <p className="text-xs text-text-secondary">Avg utilization</p>
           </div>
@@ -154,6 +151,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;
@@ -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'
+  );
+}