@burdenoff/microfe-movethewheels 2026.925.3 → 2026.929.2

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -18,7 +18,6 @@ import {
   ArrowUp,
   ArrowDown,
   Fuel,
-  Search,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
@@ -57,7 +56,6 @@ import { useAssignmentSuggestions } from '../hooks/useFleetIntelligence';
 import { AssignmentSuggestions } from '../components/AssignmentSuggestions';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { formatDate, formatAddress, formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { ROUTE_STATUS_COLORS } from '../constants';
@@ -76,8 +74,8 @@ function NewRouteForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
   const { createRoute, updateRoute } = useRoutes();
   const { route } = useRoute(editId);
-  const [fleetSearch, setFleetSearch] = useState('');
-  const debouncedFleetSearch = useDebouncedValue(fleetSearch);
+  const [vehicleSearch, setVehicleSearch] = useState('');
+  const [driverSearch, setDriverSearch] = useState('');
   const isEditing = !!editId;
   const [form, setForm] = useState<{
     name: string;
@@ -92,14 +90,24 @@ function NewRouteForm({ editId }: { editId?: string }) {
     driverId: '',
     stops: [{ address: '', type: 'delivery' }],
   });
-  const { vehicles, isLoading: vehiclesLoading } = useVehicles({
+  const {
+    vehicles,
+    isLoading: vehiclesLoading,
+    hasMore: vehiclesHaveMore,
+    totalVehicles,
+  } = useVehicles({
     limit: 20,
-    search: debouncedFleetSearch || undefined,
+    search: vehicleSearch || undefined,
     driverId: form.driverId || undefined,
   });
-  const { drivers, isLoading: driversLoading } = useDrivers({
+  const {
+    drivers,
+    isLoading: driversLoading,
+    hasMore: driversHaveMore,
+    totalDrivers,
+  } = useDrivers({
     limit: 20,
-    search: debouncedFleetSearch || undefined,
+    search: driverSearch || undefined,
     vehicleId: form.vehicleId || undefined,
   });
   // The selected vehicle/driver may fall outside the current search page (e.g. when
@@ -286,22 +294,6 @@ function NewRouteForm({ editId }: { editId?: string }) {
                 </Select>
               </div>
             </div>
-            <div className="space-y-2">
-              <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">
                 <Label htmlFor="vehicle">Vehicle (optional)</Label>
@@ -320,10 +312,13 @@ function NewRouteForm({ editId }: { editId?: string }) {
                   )}
                   selectedOption={selectedVehicle}
                   selectedLoading={selectedVehicleLoading}
+                  onSearchChange={setVehicleSearch}
+                  searchPlaceholder="Search vehicle number or type…"
+                  hasMore={vehiclesHaveMore}
+                  totalCount={totalVehicles}
                   required
                   placeholder="Assign later"
                   emptyText="No available vehicles."
-                  // Search is driven by the shared "Search fleet" box above.
                 />
               </div>
               <div className="space-y-2">
@@ -343,6 +338,10 @@ function NewRouteForm({ editId }: { editId?: string }) {
                   )}
                   selectedOption={selectedDriver}
                   selectedLoading={selectedDriverLoading}
+                  onSearchChange={setDriverSearch}
+                  searchPlaceholder="Search driver name or employee ID…"
+                  hasMore={driversHaveMore}
+                  totalCount={totalDrivers}
                   required
                   placeholder="Assign later"
                   emptyText="No available drivers."

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -47,7 +47,7 @@ import {
   ResponsiveDialogDescription,
 } from '@burdenoff/fe-libs/ui';
 import { useVehicle, useVehicleDrivers, useFleet, toApiVehicleStatus } from '../hooks/useFleet';
-import type { VehicleStatus } from '../types';
+import type { VehicleFuelType, VehicleStatus } from '../types';
 import { VEHICLE_STATUS_LABELS } from '../constants';
 import { useRecordVehicleService } from '../hooks/useFleetIntelligence';
 import { VehicleServiceCard } from '../components/VehicleServiceCard';
@@ -74,6 +74,14 @@ const VEHICLE_STATUS_OPTIONS: Array<{ value: VehicleStatus; label: string }> = (
   Object.entries(VEHICLE_STATUS_LABELS) as Array<[VehicleStatus, string]>
 ).map(([value, label]) => ({ value, label }));
 
+const FUEL_TYPE_OPTIONS: Array<{ value: VehicleFuelType; label: string }> = [
+  { value: 'DIESEL', label: 'Diesel' },
+  { value: 'PETROL', label: 'Petrol' },
+  { value: 'CNG', label: 'CNG' },
+  { value: 'ELECTRIC', label: 'Electric' },
+  { value: 'HYBRID', label: 'Hybrid' },
+];
+
 const OWNERSHIP_TYPE_OPTIONS = [
   { value: 'owned', label: 'Owned' },
   { value: 'leased', label: 'Leased' },
@@ -94,7 +102,7 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     ownershipType: '',
     year: '',
     status: 'available' as VehicleStatus,
-    fuelType: '',
+    fuelType: '' as VehicleFuelType | '',
     fuelEfficiencyLPer100Km: '',
     capacityWeight: '',
     capacityVolume: '',
@@ -342,12 +350,26 @@ function NewVehicleForm({ editId }: { editId?: string }) {
             <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"
-                />
+                <Select
+                  value={form.fuelType || undefined}
+                  onValueChange={(value) => {
+                    const fuelType = FUEL_TYPE_OPTIONS.find(
+                      (option) => option.value === value
+                    )?.value;
+                    setForm((prev) => ({ ...prev, fuelType: fuelType ?? '' }));
+                  }}
+                >
+                  <SelectTrigger id="fuelType">
+                    <SelectValue placeholder="Select fuel type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {FUEL_TYPE_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
               <div className="space-y-2">
                 <Label htmlFor="fuelEfficiency">Fuel Efficiency (L/100km)</Label>
@@ -590,15 +612,13 @@ export default function VehicleDetailsPage() {
                 <div>
                   <p className="text-sm text-text-secondary">Weight</p>
                   <p className="text-2xl font-bold">
-                    {vehicle.capacity.weight}
-                    <span className="text-sm font-normal"> kg</span>
+                    {vehicle.capacity.weight !== undefined ? `${vehicle.capacity.weight} kg` : '—'}
                   </p>
                 </div>
                 <div>
                   <p className="text-sm text-text-secondary">Volume</p>
                   <p className="text-2xl font-bold">
-                    {vehicle.capacity.volume}
-                    <span className="text-sm font-normal"> m³</span>
+                    {vehicle.capacity.volume !== undefined ? `${vehicle.capacity.volume} m³` : '—'}
                   </p>
                 </div>
                 {vehicle.capacity.pallets && (
@@ -741,7 +761,9 @@ export default function VehicleDetailsPage() {
                   {vehicle.currentLocation.address || 'Location updating...'}
                 </p>
                 <p className="text-xs text-text-secondary mt-1">
-                  Updated {formatDate(vehicle.currentLocation.timestamp || new Date(), 'relative')}
+                  {vehicle.currentLocation.timestamp
+                    ? `Updated ${formatDate(vehicle.currentLocation.timestamp, 'relative')}`
+                    : 'Update time not recorded'}
                 </p>
               </CardContent>
             </Card>

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -112,8 +112,10 @@ export default function VehiclesPage() {
       header: 'Capacity',
       cell: (row) => (
         <div className="text-sm">
-          <p>{row.capacity.weight} kg</p>
-          <p className="text-text-secondary">{row.capacity.volume} m³</p>
+          <p>{row.capacity.weight !== undefined ? `${row.capacity.weight} kg` : '—'}</p>
+          <p className="text-text-secondary">
+            {row.capacity.volume !== undefined ? `${row.capacity.volume} m³` : '—'}
+          </p>
         </div>
       ),
     },

package/src/movethewheels/pages/WarehouseDetailsPage.tsx

@@ -52,7 +52,7 @@ const WAREHOUSE_STATUS_OPTIONS = [
   { value: 'INACTIVE', label: 'Inactive' },
 ];
 
-function NewWarehouseForm({ editId }: { editId?: string }) {
+function NewWarehouseForm({ editId, onSaved }: { editId?: string; onSaved?: () => Promise<void> }) {
   const { basePath, navigate } = useMoveTheWheels();
   const { createWarehouse, updateWarehouse, deleteWarehouse } = useInventory();
   const { warehouse } = useWarehouse(editId);
@@ -143,6 +143,7 @@ function NewWarehouseForm({ editId }: { editId?: string }) {
       };
       if (editId) {
         await updateWarehouse(editId, warehouseInput);
+        await onSaved?.();
         navigate?.(joinPath(basePath, `inventory/warehouses/${editId}`));
       } else {
         const created = await createWarehouse(warehouseInput);
@@ -426,13 +427,13 @@ export default function WarehouseDetailsPage() {
   const { warehouseId } = useParams<{ warehouseId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const isEditRoute = useLocation().pathname.endsWith('/edit');
-  const { warehouse, isLoading, error, refetch } = useWarehouse(warehouseId);
+  const { warehouse, isLoading, error, refetch, reload } = useWarehouse(warehouseId);
 
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/warehouses'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
   if (!warehouseId) return <NewWarehouseForm />;
-  if (isEditRoute) return <NewWarehouseForm editId={warehouseId} />;
+  if (isEditRoute) return <NewWarehouseForm editId={warehouseId} onSaved={reload} />;
   if (isLoading) return <LoadingState message="Loading warehouse details..." />;
   if (error || !warehouse) return <ErrorState title="Warehouse not found" onRetry={refetch} />;
 

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -90,7 +90,10 @@ export default function WarehousesPage() {
       id: 'utilization',
       header: 'Utilization',
       cell: (row) => {
-        const pct = (row.capacity.usedSpace / row.capacity.totalSpace) * 100;
+        const pct =
+          row.capacity.totalSpace > 0
+            ? (row.capacity.usedSpace / row.capacity.totalSpace) * 100
+            : 0;
         return (
           <div className="flex items-center gap-2">
             <Progress value={pct} className="w-16 h-2" />

package/src/movethewheels/types/index.ts

@@ -308,7 +308,16 @@ export interface ProofOfDelivery {
 }
 
 // Vehicle type
-export type VehicleType = 'van' | 'truck' | 'motorcycle' | 'bicycle' | 'car';
+export type VehicleType =
+  | 'van'
+  | 'truck'
+  | 'motorcycle'
+  | 'bicycle'
+  | 'flatbed'
+  | 'refrigerated'
+  | 'semi_trailer'
+  | 'drone';
+export type VehicleFuelType = 'DIESEL' | 'PETROL' | 'CNG' | 'ELECTRIC' | 'HYBRID';
 export type VehicleStatus =
   'available' | 'assigned' | 'maintenance' | 'out_of_service' | 'decommissioned';
 
@@ -331,8 +340,8 @@ export interface Vehicle {
   ownershipType?: string;
   year?: number;
   capacity: {
-    weight: number;
-    volume: number;
+    weight?: number;
+    volume?: number;
     pallets?: number;
   };
   status: VehicleStatus;
@@ -342,7 +351,7 @@ export interface Vehicle {
   nextMaintenance?: Date;
   /** Odometer reading (km) at which the next service is due. */
   nextMaintenanceMileage?: number;
-  fuelType?: string;
+  fuelType?: VehicleFuelType;
   /** Fuel consumption, litres per 100km. */
   fuelEfficiencyLPer100Km?: number;
   fuelLevel?: number;
@@ -371,7 +380,7 @@ export interface Driver {
   employeeId: string;
   licenseNumber: string;
   licenseType: string;
-  licenseExpiry: Date;
+  licenseExpiry?: Date;
   vehicleIds: string[];
   assignedVehicle?: string;
   status: DriverStatus;