@burdenoff/microfe-movethewheels 2026.925.1 → 2026.925.3

package/src/movethewheels/pages/DriversPage.tsx

@@ -37,14 +37,17 @@ import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { DRIVER_STATUS_LABELS } from '../constants';
 import type { Driver, DriverStatus } from '../types';
 
+// Sourced from the same DRIVER_STATUS_LABELS map the roster table's
+// StatusBadge renders from, so this list can never drift from the table
+// again (BOFF-7909).
 const STATUS_OPTIONS: Array<{ value: DriverStatus | 'all'; label: string }> = [
   { value: 'all', label: 'All statuses' },
-  { value: 'available', label: 'Available' },
-  { value: 'busy', label: 'On delivery' },
-  { value: 'on_break', label: 'On break' },
-  { value: 'offline', label: 'Off duty' },
+  ...(Object.entries(DRIVER_STATUS_LABELS) as Array<[DriverStatus, string]>).map(
+    ([value, label]) => ({ value, label })
+  ),
 ];
 
 export default function DriversPage() {
@@ -74,8 +77,17 @@ export default function DriversPage() {
   // Exact ON_BREAK / OFF_DUTY / INACTIVE counts — fleetStats cannot split these.
   const { counts } = useDriverStatusCounts();
   // Drivers carry only `vehicleId`; the roster shows the fleet number, so the
-  // vehicle list is joined client-side into an id -> number lookup.
-  const { vehicles } = useVehicles({ limit: 100 });
+  // exact vehicles referenced on this page are looked up by id — this stays
+  // correct regardless of total fleet size (a flat top-N page would silently
+  // miss drivers assigned to a vehicle outside the first N, BOFF-7909).
+  const assignedVehicleIds = useMemo(
+    () =>
+      Array.from(
+        new Set(drivers.map((driver) => driver.assignedVehicle).filter(Boolean))
+      ) as string[],
+    [drivers]
+  );
+  const { vehicles } = useVehicles({ ids: assignedVehicleIds });
   const vehicleNumberById = useMemo(
     () => new Map(vehicles.map((vehicle) => [vehicle.id, vehicle.vehicleNumber])),
     [vehicles]
@@ -154,10 +166,10 @@ export default function DriversPage() {
       id: 'rating',
       header: 'Rating',
       cell: (row) =>
-        row.ratings.overall > 0 ? (
+        row.rating > 0 ? (
           <div className="flex items-center gap-1">
             <Star size={14} className="text-status-warning-text fill-current" />
-            <span className="font-medium">{row.ratings.overall.toFixed(1)}</span>
+            <span className="font-medium">{row.rating.toFixed(1)}</span>
           </div>
         ) : (
           <span className="text-sm text-text-secondary">Not rated</span>
@@ -181,10 +193,15 @@ export default function DriversPage() {
     },
     {
       id: 'joined',
-      header: 'Join Date',
-      accessorKey: 'joinDate',
+      header: 'Hire Date',
+      accessorKey: 'hireDate',
       sortable: true,
-      cell: (row) => formatDate(row.joinDate, 'short'),
+      cell: (row) =>
+        row.hireDate ? (
+          formatDate(row.hireDate, 'short')
+        ) : (
+          <span className="text-text-secondary">Not recorded</span>
+        ),
     },
   ];
 

package/src/movethewheels/pages/FleetPage.tsx

@@ -244,7 +244,8 @@ export default function FleetPage() {
                             <VehicleTypeBadge type={vehicle.type} size="sm" />
                           </div>
                           <p className="text-sm text-text-secondary">
-                            {vehicle.make} {vehicle.model} ({vehicle.year})
+                            {vehicle.make} {vehicle.model}
+                            {vehicle.year ? ` (${vehicle.year})` : ''}
                           </p>
                         </div>
                       </div>
@@ -302,20 +303,17 @@ export default function FleetPage() {
                         </Avatar>
                         <div>
                           <p className="font-medium">{driver.fullName}</p>
-                          <p className="text-sm text-text-secondary">
-                            {driver.employeeId} - {driver.completedOrders}{' '}
-                            {t('movethewheels.fleet.drivers.deliveries', 'deliveries')}
-                          </p>
+                          <p className="text-sm text-text-secondary">{driver.employeeId}</p>
                         </div>
                       </div>
                       <div className="text-right">
                         <StatusBadge status={driver.status} type="driver" size="sm" />
-                        <div className="mt-1 flex items-center gap-1 justify-end">
-                          <Star size={12} className="text-status-warning-text fill-current" />
-                          <span className="text-sm font-medium">
-                            {driver.ratings.overall.toFixed(1)}
-                          </span>
-                        </div>
+                        {driver.rating > 0 && (
+                          <div className="mt-1 flex items-center gap-1 justify-end">
+                            <Star size={12} className="text-status-warning-text fill-current" />
+                            <span className="text-sm font-medium">{driver.rating.toFixed(1)}</span>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>

package/src/movethewheels/pages/InventoryPage.tsx

@@ -53,7 +53,7 @@ interface StockRow {
   onHand: number;
   allocated: number;
   available: number;
-  reorderLevel: number;
+  reorderLevel?: number;
   stockState: 'out_of_stock' | 'low' | 'in_stock';
 }
 
@@ -140,10 +140,15 @@ export default function InventoryPage() {
       allocated: item.reservedQuantity,
       available: item.availableQuantity,
       reorderLevel: item.reorderLevel,
+      // Matches the backend's lowStock rule (inventory.service.ts): only
+      // flag "low" when a reorder point is actually configured — items with
+      // none set are never considered low stock, even at 0 available,
+      // otherwise this table disagreed with the dashboard's low-stock count
+      // for the same item (BOFF-7909 follow-up).
       stockState:
         item.quantity === 0
           ? 'out_of_stock'
-          : item.availableQuantity <= item.reorderLevel
+          : item.reorderLevel !== undefined && item.availableQuantity <= item.reorderLevel
             ? 'low'
             : 'in_stock',
     }));
@@ -196,7 +201,7 @@ export default function InventoryPage() {
       header: t('movethewheels.inventory.stock.reorderPoint', 'Reorder point'),
       accessorKey: 'reorderLevel',
       sortable: true,
-      cell: (row) => (row.reorderLevel > 0 ? row.reorderLevel.toLocaleString() : '—'),
+      cell: (row) => (row.reorderLevel !== undefined ? row.reorderLevel.toLocaleString() : '—'),
     },
     {
       id: 'state',
@@ -501,8 +506,12 @@ export default function InventoryPage() {
                         </p>
                       </div>
                       <div className="text-right">
-                        <Badge variant={warehouse.isActive ? 'default' : 'secondary'}>
-                          {warehouse.isActive
+                        <Badge
+                          variant={
+                            warehouse.status.toUpperCase() === 'ACTIVE' ? 'default' : 'secondary'
+                          }
+                        >
+                          {warehouse.status.toUpperCase() === 'ACTIVE'
                             ? t('movethewheels.inventory.warehouses.active', 'Active')
                             : t('movethewheels.inventory.warehouses.inactive', 'Inactive')}
                         </Badge>

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -23,6 +23,7 @@ import {
   ArrowRight,
   XCircle,
   UserCheck,
+  Search,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge, PriorityBadge, PaymentStatusBadge } from '../components/StatusBadge';
@@ -577,13 +578,17 @@ export default function OrderDetailsPage() {
 
                 <div className="space-y-3">
                   <div className="space-y-1.5">
-                    <Label htmlFor="assign-fleet-search">Search fleet</Label>
-                    <Input
-                      id="assign-fleet-search"
-                      value={fleetSearch}
-                      onChange={(event) => setFleetSearch(event.target.value)}
-                      placeholder="Vehicle number, driver name or ID"
-                    />
+                    <Label htmlFor="assign-fleet-search">Search vehicles &amp; drivers</Label>
+                    <div className="relative">
+                      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" />
+                      <Input
+                        id="assign-fleet-search"
+                        value={fleetSearch}
+                        onChange={(event) => setFleetSearch(event.target.value)}
+                        placeholder="Vehicle number, driver name or employee ID"
+                        className="pl-9"
+                      />
+                    </div>
                   </div>
                   <div className="space-y-1.5">
                     <Label htmlFor="assign-vehicle">Vehicle</Label>

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -18,6 +18,7 @@ import {
   ArrowUp,
   ArrowDown,
   Fuel,
+  Search,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
@@ -36,7 +37,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui';
-import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
+import {
+  EmphasisPanel,
+  NextSteps,
+  PagePurpose,
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogFooter,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription,
+} from '@burdenoff/fe-libs/ui';
 import { RouteMap, type RouteStop as MapRouteStop } from '../components/maps';
 import { firstRealLatLng } from '../utils/mapMarkers';
 import { EntityCombobox } from '../components/EntityCombobox';
@@ -276,13 +287,20 @@ function NewRouteForm({ editId }: { editId?: string }) {
               </div>
             </div>
             <div className="space-y-2">
-              <Label htmlFor="fleet-search">Search fleet</Label>
-              <Input
-                id="fleet-search"
-                value={fleetSearch}
-                onChange={(e) => setFleetSearch(e.target.value)}
-                placeholder="Vehicle number, driver name or ID"
-              />
+              <Label htmlFor="fleet-search">Search vehicles &amp; drivers</Label>
+              <div className="relative">
+                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" />
+                <Input
+                  id="fleet-search"
+                  value={fleetSearch}
+                  onChange={(e) => setFleetSearch(e.target.value)}
+                  placeholder="Vehicle number, driver name or employee ID"
+                  className="pl-9"
+                />
+              </div>
+              <p className="text-xs text-text-secondary">
+                Narrows both pickers below as you type — up to 20 matches at a time.
+              </p>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div className="space-y-2">
@@ -417,7 +435,7 @@ export default function RouteDetailsPage() {
   const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { basePath, navigate } = useMoveTheWheels();
   const { route, isLoading, error, refetch } = useRoute(routeId);
-  const { optimizeRoute, updateRoute } = useRoutes();
+  const { optimizeRoute, updateRoute, deleteRoute } = useRoutes();
   const suggestions = useAssignmentSuggestions(routeId);
   const { t: translate } = useI18n();
   const t = (key: string, fallback: string): string => {
@@ -427,10 +445,27 @@ export default function RouteDetailsPage() {
   const { message: notice, notify } = useNotice();
   const [optimizeError, setOptimizeError] = useState<string | null>(null);
   const [optimizing, setOptimizing] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
 
   const goBack = () => navigate?.(joinPath(basePath, 'routes'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  const handleDelete = async () => {
+    if (!routeId) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await deleteRoute(routeId);
+      setDeleteOpen(false);
+      goBack();
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : 'Failed to delete route.');
+      setDeleting(false);
+    }
+  };
+
   const handleOptimize = async () => {
     if (!routeId) return;
     setOptimizing(true);
@@ -709,18 +744,6 @@ export default function RouteDetailsPage() {
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
-              {route.startTime && (
-                <div>
-                  <p className="text-sm text-text-secondary">Started</p>
-                  <p>{formatDate(route.startTime, 'full')}</p>
-                </div>
-              )}
-              {route.endTime && (
-                <div>
-                  <p className="text-sm text-text-secondary">Completed</p>
-                  <p>{formatDate(route.endTime, 'full')}</p>
-                </div>
-              )}
               <div>
                 <p className="text-sm text-text-secondary">Created</p>
                 <p>{formatDate(route.createdAt, 'full')}</p>
@@ -728,28 +751,53 @@ export default function RouteDetailsPage() {
             </CardContent>
           </Card>
 
-          {route.trafficConditions.length > 0 && (
-            <Card>
-              <CardHeader>
-                <CardTitle>Traffic Conditions</CardTitle>
-              </CardHeader>
-              <CardContent>
-                {route.trafficConditions.map((tc, i) => (
-                  <div
-                    key={i}
-                    className={`p-2 rounded mb-2 ${tc.condition === 'severe' ? 'bg-status-error-bg-subtle' : tc.condition === 'heavy' ? 'bg-status-warning-bg-subtle' : 'bg-status-warning-bg-subtle'}`}
-                  >
-                    <p className="text-sm font-medium capitalize">{tc.condition} traffic</p>
-                    <p className="text-xs text-text-secondary">
-                      {tc.location} - +{tc.delay} min delay
-                    </p>
-                  </div>
-                ))}
-              </CardContent>
-            </Card>
-          )}
+          <Card className="border-status-error-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-status-error-text">
+                <Trash2 size={18} /> Delete Route
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-3 text-sm text-text-secondary">
+                Removes this route. It can no longer be dispatched. This cannot be undone from here.
+              </p>
+              <Button
+                variant="outline"
+                className="border-status-error-border text-status-error-text hover:bg-status-error-bg-subtle"
+                onClick={() => setDeleteOpen(true)}
+              >
+                <Trash2 size={16} /> Delete this route
+              </Button>
+            </CardContent>
+          </Card>
         </div>
       </div>
+
+      <ResponsiveDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <ResponsiveDialogContent>
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Delete this route?</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              This removes {route.name} and cannot be undone from here.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+          <div className="px-1">
+            <FormError message={deleteError} />
+          </div>
+          <ResponsiveDialogFooter>
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button
+              className="bg-status-error-text text-text-inverse hover:opacity-90"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              {deleting ? 'Deleting...' : 'Delete route'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
     </PageLayout>
   );
 }

package/src/movethewheels/pages/RoutesPage.tsx

@@ -3,11 +3,21 @@
  */
 
 import { useState } from 'react';
-import { Plus, RefreshCw, Navigation } from 'lucide-react';
+import { Plus, RefreshCw, Navigation, Filter } 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 {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useRoutes, useRouteStats } from '../hooks/useRoutes';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
@@ -17,17 +27,28 @@ import { joinPath } from '../utils/navigation';
 import { ROUTE_STATUS_COLORS } from '../constants';
 import type { Route } from '../types';
 
+const STATUS_OPTIONS: Array<{ value: Route['status'] | 'all'; label: string }> = [
+  { value: 'all', label: 'All statuses' },
+  { value: 'planned', label: 'Planned' },
+  { value: 'in_progress', label: 'In Progress' },
+  { value: 'completed', label: 'Completed' },
+  { value: 'cancelled', label: 'Cancelled' },
+];
+
 export default function RoutesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
   const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<Route['status'] | 'all'>('all');
   const debouncedSearch = useDebouncedValue(search);
   const { routes, totalRoutes, hasMore, isLoading, error, refetch } = useRoutes({
     limit: pageSize,
     offset: page * pageSize,
     search: debouncedSearch || undefined,
+    status: statusFilter === 'all' ? undefined : statusFilter,
   });
+  const filtersActive = statusFilter !== 'all' || search.length > 0;
   // Bounded aggregate for the tiles + subtitle — not the truncated page.
   const { stats } = useRouteStats();
 
@@ -126,6 +147,49 @@ export default function RoutesPage() {
         </div>
       </EmphasisPanel>
 
+      {/* Filters */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Filter size={16} className="text-text-secondary" />
+              <span className="text-sm font-medium">Filters:</span>
+            </div>
+            <Select
+              value={statusFilter}
+              onValueChange={(value) => {
+                setStatusFilter(value as Route['status'] | 'all');
+                setPage(0);
+              }}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                {STATUS_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {filtersActive && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setStatusFilter('all');
+                  setSearch('');
+                  setPage(0);
+                }}
+              >
+                Clear filters
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
       <DataTable
         columns={columns}
         data={routes}