@burdenoff/microfe-movethewheels 2026.925.1 → 2026.925.2

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

@@ -302,20 +302,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/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';
@@ -276,13 +277,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">

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -25,7 +25,8 @@ import {
   AvatarFallback,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useVehicle, useVehicleDrivers, useFleet } from '../hooks/useFleet';
+import { useVehicle, useVehicleDrivers, useFleet, toApiVehicleStatus } from '../hooks/useFleet';
+import type { VehicleStatus } from '../types';
 import { useRecordVehicleService } from '../hooks/useFleetIntelligence';
 import { VehicleServiceCard } from '../components/VehicleServiceCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -47,6 +48,19 @@ const VEHICLE_TYPE_OPTIONS = [
   { value: 'DRONE', label: 'Drone' },
 ];
 
+const VEHICLE_STATUS_OPTIONS: Array<{ value: VehicleStatus; label: string }> = [
+  { value: 'available', label: 'Available' },
+  { value: 'assigned', label: 'In Transit' },
+  { value: 'maintenance', label: 'Maintenance' },
+  { value: 'out_of_service', label: 'Out of Service' },
+];
+
+const OWNERSHIP_TYPE_OPTIONS = [
+  { value: 'owned', label: 'Owned' },
+  { value: 'leased', label: 'Leased' },
+  { value: 'rented', label: 'Rented' },
+];
+
 function NewVehicleForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
   const { createVehicle, updateVehicle } = useFleet();
@@ -58,6 +72,11 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     make: '',
     model: '',
     licensePlate: '',
+    ownershipType: '',
+    year: '',
+    status: 'available' as VehicleStatus,
+    fuelType: '',
+    fuelEfficiencyLPer100Km: '',
   });
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -70,6 +89,14 @@ function NewVehicleForm({ editId }: { editId?: string }) {
         make: vehicle.make ?? '',
         model: vehicle.model ?? '',
         licensePlate: vehicle.licensePlate ?? '',
+        ownershipType: vehicle.ownershipType ?? '',
+        year: vehicle.year ? String(vehicle.year) : '',
+        status: vehicle.status,
+        fuelType: vehicle.fuelType ?? '',
+        fuelEfficiencyLPer100Km:
+          vehicle.fuelEfficiencyLPer100Km !== undefined
+            ? String(vehicle.fuelEfficiencyLPer100Km)
+            : '',
       });
     }
   }, [editId, vehicle]);
@@ -85,23 +112,25 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     setSubmitting(true);
     setError(null);
     try {
+      const payload = {
+        vehicleNumber: form.vehicleNumber.trim(),
+        type: form.type,
+        make: form.make.trim() || undefined,
+        model: form.model.trim() || undefined,
+        licensePlate: form.licensePlate.trim() || undefined,
+        ownershipType: form.ownershipType || undefined,
+        year: form.year ? Number(form.year) : undefined,
+        status: toApiVehicleStatus(form.status),
+        fuelType: form.fuelType || undefined,
+        fuelEfficiencyLPer100Km: form.fuelEfficiencyLPer100Km
+          ? Number(form.fuelEfficiencyLPer100Km)
+          : undefined,
+      };
       if (editId) {
-        const updated = await updateVehicle(editId, {
-          vehicleNumber: form.vehicleNumber.trim(),
-          type: form.type,
-          make: form.make.trim() || undefined,
-          model: form.model.trim() || undefined,
-          licensePlate: form.licensePlate.trim() || undefined,
-        });
+        const updated = await updateVehicle(editId, payload);
         navigate?.(joinPath(basePath, `fleet/vehicles/${updated.id}`));
       } else {
-        const created = await createVehicle({
-          vehicleNumber: form.vehicleNumber.trim(),
-          type: form.type,
-          make: form.make.trim() || undefined,
-          model: form.model.trim() || undefined,
-          licensePlate: form.licensePlate.trim() || undefined,
-        });
+        const created = await createVehicle(payload);
         navigate?.(joinPath(basePath, `fleet/vehicles/${created.id}`));
       }
     } catch (err) {
@@ -207,6 +236,83 @@ function NewVehicleForm({ editId }: { editId?: string }) {
                 />
               </div>
             </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="ownershipType">Ownership</Label>
+                <Select
+                  value={form.ownershipType || undefined}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, ownershipType: value }))}
+                >
+                  <SelectTrigger id="ownershipType">
+                    <SelectValue placeholder="Select ownership" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {OWNERSHIP_TYPE_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="year">Year</Label>
+                <Input
+                  id="year"
+                  type="number"
+                  min={1980}
+                  max={new Date().getFullYear() + 1}
+                  value={form.year}
+                  onChange={(e) => setForm((prev) => ({ ...prev, year: e.target.value }))}
+                  placeholder={String(new Date().getFullYear())}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="vehicleStatus">Status</Label>
+                <Select
+                  value={form.status}
+                  onValueChange={(value) =>
+                    setForm((prev) => ({ ...prev, status: value as VehicleStatus }))
+                  }
+                >
+                  <SelectTrigger id="vehicleStatus">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {VEHICLE_STATUS_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="fuelType">Fuel Type</Label>
+                <Input
+                  id="fuelType"
+                  value={form.fuelType}
+                  onChange={(e) => setForm((prev) => ({ ...prev, fuelType: e.target.value }))}
+                  placeholder="Diesel"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="fuelEfficiency">Fuel Efficiency (L/100km)</Label>
+                <Input
+                  id="fuelEfficiency"
+                  type="number"
+                  min={0}
+                  step={0.1}
+                  value={form.fuelEfficiencyLPer100Km}
+                  onChange={(e) =>
+                    setForm((prev) => ({ ...prev, fuelEfficiencyLPer100Km: e.target.value }))
+                  }
+                  placeholder="12.5"
+                />
+              </div>
+            </div>
           </div>
         </EmphasisPanel>
       </form>
@@ -394,6 +500,22 @@ export default function VehicleDetailsPage() {
                   </p>
                 </div>
               )}
+              {(vehicle.fuelType || vehicle.fuelEfficiencyLPer100Km !== undefined) && (
+                <div className="grid grid-cols-2 gap-4">
+                  {vehicle.fuelType && (
+                    <div>
+                      <p className="text-sm text-text-secondary">Fuel Type</p>
+                      <p className="font-medium">{vehicle.fuelType}</p>
+                    </div>
+                  )}
+                  {vehicle.fuelEfficiencyLPer100Km !== undefined && (
+                    <div>
+                      <p className="text-sm text-text-secondary">Efficiency</p>
+                      <p className="font-medium">{vehicle.fuelEfficiencyLPer100Km} L/100km</p>
+                    </div>
+                  )}
+                </div>
+              )}
             </CardContent>
           </Card>
 

package/src/movethewheels/types/index.ts

@@ -346,6 +346,9 @@ export interface Vehicle {
   nextMaintenance?: Date;
   /** Odometer reading (km) at which the next service is due. */
   nextMaintenanceMileage?: number;
+  fuelType?: string;
+  /** Fuel consumption, litres per 100km. */
+  fuelEfficiencyLPer100Km?: number;
   fuelLevel?: number;
   mileage?: number;
   documents: VehicleDocument[];
@@ -353,7 +356,7 @@ export interface Vehicle {
 }
 
 // Driver type
-export type DriverStatus = 'available' | 'busy' | 'offline' | 'on_break';
+export type DriverStatus = 'available' | 'busy' | 'offline' | 'on_break' | 'inactive';
 
 export interface DriverDocument {
   id: string;
@@ -377,44 +380,19 @@ export interface Driver {
   assignedVehicle?: string;
   status: DriverStatus;
   currentLocation?: Location;
-  joinDate: Date;
-  baseSalary: number;
-  completedOrders: number;
-  todayOrders: number;
-  specializations: string[];
-  workingHours: {
-    startTime: string;
-    endTime: string;
-    workingDays: string[];
-    maxHoursPerDay: number;
-    maxHoursPerWeek: number;
-    currentHoursToday: number;
-    currentHoursThisWeek: number;
-  };
-  ratings: {
-    overall: number;
-    punctuality: number;
-    communication: number;
-    carefulHandling: number;
-    professionalism: number;
-    onTimeDelivery: number;
-    totalRatings: number;
-  };
+  /** MtwDriver.rating — a single overall rating; the backend does not track per-category breakdowns. */
+  rating: number;
+  /** Free-text HR/performance notes. */
+  notes?: string;
+  hireDate?: Date;
+  baseSalary?: number;
+  bonusYtd?: number;
+  payCurrency?: string;
+  /** Set and in the future means the driver is currently on leave. */
+  onLeaveUntil?: Date;
+  terminatedAt?: Date;
+  terminationReason?: string;
   documents: DriverDocument[];
-  earnings: {
-    totalEarnings: number;
-    weeklyEarnings: number;
-    monthlyEarnings: number;
-    pendingPayments: number;
-    completedDeliveries: number;
-    bonuses: number;
-  };
-  compliance: {
-    hoursOfService: boolean;
-    documentation: boolean;
-    vehicleInspection: boolean;
-    lastUpdate: Date;
-  };
   createdAt: Date;
 }