@burdenoff/microfe-movethewheels 2026.923.1 → 2026.924.1

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -36,11 +36,6 @@ import {
   Separator,
   Input,
   Label,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
   Table,
   TableBody,
   TableCell,
@@ -48,9 +43,10 @@ import {
   TableHeader,
   TableRow,
 } from '../components/ui';
+import { EntityCombobox } from '../components/EntityCombobox';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useOrder, useOrders } from '../hooks/useOrders';
-import { useFleet } from '../hooks/useFleet';
+import { useVehicles, useVehicle, useDrivers, useDriver } from '../hooks/useFleet';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { FormError } from '../components/FormError';
 import { Notice, useNotice } from '../components/Notice';
@@ -105,20 +101,25 @@ export default function OrderDetailsPage() {
   const [advancing, setAdvancing] = useState(false);
   const [actionError, setActionError] = useState<string | null>(null);
   const debouncedFleetSearch = useDebouncedValue(fleetSearch);
-  const { vehicles, isLoading: vehiclesLoading } = useFleet({
+  const { vehicles, isLoading: vehiclesLoading } = useVehicles({
     limit: 20,
-    filters: {
-      search: debouncedFleetSearch || undefined,
-      driverId: selectedDriver || undefined,
-    },
+    search: debouncedFleetSearch || undefined,
+    driverId: selectedDriver || undefined,
   });
-  const { drivers, isLoading: driversLoading } = useFleet({
+  const { drivers, isLoading: driversLoading } = useDrivers({
     limit: 20,
-    filters: {
-      search: debouncedFleetSearch || undefined,
-      vehicleId: selectedVehicle || undefined,
-    },
+    search: debouncedFleetSearch || undefined,
+    vehicleId: selectedVehicle || undefined,
   });
+  // Resolved independently of the (searched, 20-row) lists above so the
+  // trigger still shows the right label once a pick scrolls out of the
+  // current search results.
+  const { vehicle: selectedVehicleRecord, isLoading: selectedVehicleLoading } = useVehicle(
+    selectedVehicle || undefined
+  );
+  const { driver: selectedDriverRecord, isLoading: selectedDriverLoading } = useDriver(
+    selectedDriver || undefined
+  );
   const { message: notice, notify } = useNotice();
   const availableVehicles = vehicles.filter(
     (vehicle) => vehicle.status === 'available' || vehicle.id === order?.vehicleId
@@ -564,54 +565,54 @@ export default function OrderDetailsPage() {
                   </div>
                   <div className="space-y-1.5">
                     <Label htmlFor="assign-vehicle">Vehicle</Label>
-                    <Select value={selectedVehicle} onValueChange={setSelectedVehicle}>
-                      <SelectTrigger id="assign-vehicle">
-                        <SelectValue
-                          placeholder={
-                            order.vehicleId ? `Current: ${order.vehicleId}` : 'Select a vehicle'
-                          }
-                        />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {availableVehicles.length === 0 ? (
-                          <SelectItem value="none" disabled>
-                            No available vehicles
-                          </SelectItem>
-                        ) : (
-                          availableVehicles.map((vehicle) => (
-                            <SelectItem key={vehicle.id} value={vehicle.id}>
-                              {vehicle.vehicleNumber} ({vehicle.type})
-                            </SelectItem>
-                          ))
-                        )}
-                      </SelectContent>
-                    </Select>
+                    <EntityCombobox
+                      id="assign-vehicle"
+                      value={selectedVehicle}
+                      onChange={setSelectedVehicle}
+                      options={availableVehicles}
+                      loading={vehiclesLoading}
+                      getId={(vehicle) => vehicle.id}
+                      getLabel={(vehicle) => `${vehicle.vehicleNumber} (${vehicle.type})`}
+                      renderOption={(vehicle) => (
+                        <>
+                          {vehicle.vehicleNumber} ({vehicle.type})
+                        </>
+                      )}
+                      selectedOption={selectedVehicleRecord}
+                      selectedLoading={selectedVehicleLoading}
+                      required
+                      placeholder={
+                        order.vehicleId ? `Current: ${order.vehicleId}` : 'Select a vehicle'
+                      }
+                      emptyText="No available vehicles."
+                      // Search is driven by the shared "Search fleet" box above —
+                      // no second input inside the popover.
+                    />
                   </div>
 
                   <div className="space-y-1.5">
                     <Label htmlFor="assign-driver">Driver</Label>
-                    <Select value={selectedDriver} onValueChange={setSelectedDriver}>
-                      <SelectTrigger id="assign-driver">
-                        <SelectValue
-                          placeholder={
-                            order.driverId ? `Current: ${order.driverId}` : 'Select a driver'
-                          }
-                        />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {availableDrivers.length === 0 ? (
-                          <SelectItem value="none" disabled>
-                            No available drivers
-                          </SelectItem>
-                        ) : (
-                          availableDrivers.map((driver) => (
-                            <SelectItem key={driver.id} value={driver.id}>
-                              {driver.fullName} ({driver.employeeId})
-                            </SelectItem>
-                          ))
-                        )}
-                      </SelectContent>
-                    </Select>
+                    <EntityCombobox
+                      id="assign-driver"
+                      value={selectedDriver}
+                      onChange={setSelectedDriver}
+                      options={availableDrivers}
+                      loading={driversLoading}
+                      getId={(driver) => driver.id}
+                      getLabel={(driver) => `${driver.fullName} (${driver.employeeId})`}
+                      renderOption={(driver) => (
+                        <>
+                          {driver.fullName} ({driver.employeeId})
+                        </>
+                      )}
+                      selectedOption={selectedDriverRecord}
+                      selectedLoading={selectedDriverLoading}
+                      required
+                      placeholder={
+                        order.driverId ? `Current: ${order.driverId}` : 'Select a driver'
+                      }
+                      emptyText="No available drivers."
+                    />
                   </div>
 
                   <Button

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -39,8 +39,9 @@ import {
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { RouteMap, type RouteStop as MapRouteStop } from '../components/maps';
 import { firstRealLatLng } from '../utils/mapMarkers';
+import { EntityCombobox } from '../components/EntityCombobox';
 import { useRoute, useRoutes } from '../hooks/useRoutes';
-import { useFleet, useVehicle, useDriver } from '../hooks/useFleet';
+import { useVehicles, useVehicle, useDrivers, useDriver } from '../hooks/useFleet';
 import { useAssignmentSuggestions } from '../hooks/useFleetIntelligence';
 import { AssignmentSuggestions } from '../components/AssignmentSuggestions';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
@@ -51,15 +52,7 @@ 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, Vehicle, Driver } from '../types';
-
-/** Keeps a currently selected fleet item visible even when it falls outside the current search page. */
-function mergeSelected<T extends { id: string }>(items: T[], selected: T | null | undefined): T[] {
-  if (!selected || items.some((item) => item.id === selected.id)) {
-    return items;
-  }
-  return [selected, ...items];
-}
+import type { Route as RouteType, RouteStop } from '../types';
 
 const ROUTE_STATUS_OPTIONS: { value: RouteType['status']; label: string }[] = [
   { value: 'planned', label: 'Planned' },
@@ -88,27 +81,25 @@ function NewRouteForm({ editId }: { editId?: string }) {
     driverId: '',
     stops: [{ address: '', type: 'delivery' }],
   });
-  const { vehicles } = useFleet({
+  const { vehicles, isLoading: vehiclesLoading } = useVehicles({
     limit: 20,
-    filters: {
-      search: debouncedFleetSearch || undefined,
-      driverId: form.driverId || undefined,
-    },
+    search: debouncedFleetSearch || undefined,
+    driverId: form.driverId || undefined,
   });
-  const { drivers } = useFleet({
+  const { drivers, isLoading: driversLoading } = useDrivers({
     limit: 20,
-    filters: {
-      search: debouncedFleetSearch || undefined,
-      vehicleId: form.vehicleId || undefined,
-    },
+    search: debouncedFleetSearch || undefined,
+    vehicleId: form.vehicleId || undefined,
   });
   // The selected vehicle/driver may fall outside the current search page (e.g. when
   // editing a route or after the assignee no longer matches the search term); fetch
-  // them directly so the Select can still render the current selection.
-  const { vehicle: selectedVehicle } = useVehicle(form.vehicleId || undefined);
-  const { driver: selectedDriver } = useDriver(form.driverId || undefined);
-  const vehicleOptions: Vehicle[] = mergeSelected(vehicles, selectedVehicle);
-  const driverOptions: Driver[] = mergeSelected(drivers, selectedDriver);
+  // them directly so the combobox can still render the current selection's label.
+  const { vehicle: selectedVehicle, isLoading: selectedVehicleLoading } = useVehicle(
+    form.vehicleId || undefined
+  );
+  const { driver: selectedDriver, isLoading: selectedDriverLoading } = useDriver(
+    form.driverId || undefined
+  );
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -296,39 +287,48 @@ function NewRouteForm({ editId }: { editId?: string }) {
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="vehicle">Vehicle (optional)</Label>
-                <Select
+                <EntityCombobox
+                  id="vehicle"
                   value={form.vehicleId}
-                  onValueChange={(value) => setForm((prev) => ({ ...prev, vehicleId: value }))}
-                >
-                  <SelectTrigger id="vehicle">
-                    <SelectValue placeholder="Assign later" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {vehicleOptions.map((vehicle) => (
-                      <SelectItem key={vehicle.id} value={vehicle.id}>
-                        {vehicle.vehicleNumber} ({vehicle.type})
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  onChange={(value) => setForm((prev) => ({ ...prev, vehicleId: value }))}
+                  options={vehicles}
+                  loading={vehiclesLoading}
+                  getId={(vehicle) => vehicle.id}
+                  getLabel={(vehicle) => `${vehicle.vehicleNumber} (${vehicle.type})`}
+                  renderOption={(vehicle) => (
+                    <>
+                      {vehicle.vehicleNumber} ({vehicle.type})
+                    </>
+                  )}
+                  selectedOption={selectedVehicle}
+                  selectedLoading={selectedVehicleLoading}
+                  required
+                  placeholder="Assign later"
+                  emptyText="No available vehicles."
+                  // Search is driven by the shared "Search fleet" box above.
+                />
               </div>
               <div className="space-y-2">
                 <Label htmlFor="driver">Driver (optional)</Label>
-                <Select
+                <EntityCombobox
+                  id="driver"
                   value={form.driverId}
-                  onValueChange={(value) => setForm((prev) => ({ ...prev, driverId: value }))}
-                >
-                  <SelectTrigger id="driver">
-                    <SelectValue placeholder="Assign later" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {driverOptions.map((driver) => (
-                      <SelectItem key={driver.id} value={driver.id}>
-                        {driver.fullName} ({driver.employeeId})
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  onChange={(value) => setForm((prev) => ({ ...prev, driverId: value }))}
+                  options={drivers}
+                  loading={driversLoading}
+                  getId={(driver) => driver.id}
+                  getLabel={(driver) => `${driver.fullName} (${driver.employeeId})`}
+                  renderOption={(driver) => (
+                    <>
+                      {driver.fullName} ({driver.employeeId})
+                    </>
+                  )}
+                  selectedOption={selectedDriver}
+                  selectedLoading={selectedDriverLoading}
+                  required
+                  placeholder="Assign later"
+                  emptyText="No available drivers."
+                />
               </div>
             </div>
           </div>