@burdenoff/microfe-movethewheels 2026.923.1 → 2026.924.2

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -11,7 +11,6 @@ import {
   ArrowLeft,
   Save,
   Plus,
-  Trash2,
   Users,
   MapPin,
   CalendarClock,
@@ -33,16 +32,17 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  Separator,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useOrder, useOrders } from '../hooks/useOrders';
 import { useCustomer, useCustomers } from '../hooks/useCustomers';
-import { useRoutes } from '../hooks/useRoutes';
-import { useDebouncedValue } from '../hooks/useDebouncedValue';
+import { useRoute, useRoutes } from '../hooks/useRoutes';
+import { useProducts } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath, buildCustomerCreatePath } from '../utils/navigation';
 import { CustomerPicker } from '../components/CustomerPicker';
+import { EntityCombobox } from '../components/EntityCombobox';
+import { OrderItemRow } from '../components/OrderItemRow';
 import type { Customer } from '../types';
 
 /**
@@ -69,7 +69,6 @@ export default function CreateOrderPage() {
   const { order } = useOrder(orderId);
   const { createOrder, updateOrder } = useOrders();
   const [customerSearch, setCustomerSearch] = useState('');
-  const debouncedCustomerSearch = useDebouncedValue(customerSearch);
   const {
     customers,
     createCustomer,
@@ -78,15 +77,24 @@ export default function CreateOrderPage() {
     refetch: refetchCustomers,
   } = useCustomers({
     limit: 20,
-    filters: { search: debouncedCustomerSearch || undefined },
+    filters: { search: customerSearch || undefined },
   });
   const { customer: linkedCustomer } = useCustomer(prefilledCustomerId ?? order?.customerId);
+  const [routeSearch, setRouteSearch] = useState('');
   const {
     routes,
     isLoading: routesLoading,
     error: routesError,
+    hasMore: routesHaveMore,
+    totalRoutes,
   } = useRoutes({
     status: 'planned',
+    search: routeSearch || undefined,
+    limit: 20,
+  });
+  const [productSearch, setProductSearch] = useState('');
+  const { products, isLoading: productsLoading } = useProducts({
+    search: productSearch || undefined,
     limit: 20,
   });
 
@@ -116,6 +124,13 @@ export default function CreateOrderPage() {
     specialInstructions: order?.specialInstructions || '',
   });
 
+  // Resolved independently of the (searchable, 20-row) `routes` page so the
+  // saved-route combobox's trigger still shows the right name even when the
+  // selection has scrolled out of the current search/page.
+  const { route: selectedRoute, isLoading: selectedRouteLoading } = useRoute(
+    formData.routeId || undefined
+  );
+
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
 
@@ -275,7 +290,7 @@ export default function CreateOrderPage() {
   };
 
   const selectSavedRoute = (value: string) => {
-    if (value === 'none') {
+    if (!value) {
       updateField('routeId', '');
       return;
     }
@@ -431,7 +446,6 @@ export default function CreateOrderPage() {
                 onRetry={refetchCustomers}
                 onOpenCustomers={goToCustomerCreate}
                 selectedCustomer={selectedCustomer}
-                searchQuery={customerSearch}
                 onSearchQueryChange={setCustomerSearch}
               />
               <div className="space-y-2">
@@ -464,19 +478,30 @@ export default function CreateOrderPage() {
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-2">
-            <Select value={formData.routeId || 'none'} onValueChange={selectSavedRoute}>
-              <SelectTrigger id="saved-route">
-                <SelectValue placeholder="Choose a saved route" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="none">No saved route</SelectItem>
-                {routes.map((route) => (
-                  <SelectItem key={route.id} value={route.id}>
-                    {route.name} · {route.stops.length} stops
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <EntityCombobox
+              id="saved-route"
+              value={formData.routeId}
+              onChange={selectSavedRoute}
+              options={routes}
+              loading={routesLoading}
+              getId={(route) => route.id}
+              getLabel={(route) => `${route.name} · ${route.stops.length} stops`}
+              renderOption={(route) => (
+                <>
+                  {route.name} · {route.stops.length} stops
+                </>
+              )}
+              selectedOption={selectedRoute}
+              selectedLoading={selectedRouteLoading}
+              placeholder="Choose a saved route"
+              searchPlaceholder="Search saved routes"
+              emptyText="No saved routes found."
+              noneLabel="No saved route"
+              error={routesError ? 'Saved routes are unavailable' : undefined}
+              onSearchChange={setRouteSearch}
+              hasMore={routesHaveMore}
+              totalCount={totalRoutes}
+            />
             <p className="text-xs text-text-secondary">
               {routesLoading
                 ? 'Loading planned routes…'
@@ -630,74 +655,31 @@ export default function CreateOrderPage() {
               />
             ) : (
               <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="item-product-search">Search product catalog</Label>
+                  <Input
+                    id="item-product-search"
+                    value={productSearch}
+                    onChange={(e) => setProductSearch(e.target.value)}
+                    placeholder="Search by name or SKU"
+                  />
+                  <p className="text-xs text-text-secondary">
+                    Narrows the "Catalog item" picker below for every row. Picking a catalog item
+                    fills in name, SKU, weight, and value — you can still edit them, or skip the
+                    picker and enter details manually.
+                  </p>
+                </div>
                 {formData.items.map((item, index) => (
-                  <div key={item.id}>
-                    {index > 0 && <Separator className="my-4" />}
-                    <div className="grid grid-cols-1 md:grid-cols-7 gap-4">
-                      <div className="md:col-span-2 space-y-2">
-                        <Label>Item Name</Label>
-                        <Input
-                          value={item.name}
-                          onChange={(e) => updateItem(index, 'name', e.target.value)}
-                          placeholder="Product name"
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <Label>SKU</Label>
-                        <Input
-                          value={item.sku}
-                          onChange={(e) => updateItem(index, 'sku', e.target.value)}
-                          placeholder="SKU-001"
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <Label>Quantity</Label>
-                        <Input
-                          type="number"
-                          min="1"
-                          value={item.quantity}
-                          onChange={(e) =>
-                            updateItem(index, 'quantity', parseInt(e.target.value) || 1)
-                          }
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <Label>Weight (kg)</Label>
-                        <Input
-                          type="number"
-                          min="0"
-                          step="0.1"
-                          value={item.weight}
-                          onChange={(e) =>
-                            updateItem(index, 'weight', parseFloat(e.target.value) || 0)
-                          }
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <Label>Value ($)</Label>
-                        <Input
-                          type="number"
-                          min="0"
-                          step="0.01"
-                          value={item.value}
-                          onChange={(e) =>
-                            updateItem(index, 'value', parseFloat(e.target.value) || 0)
-                          }
-                        />
-                      </div>
-                      <div className="flex items-end">
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="text-status-error-text"
-                          onClick={() => removeItem(index)}
-                        >
-                          <Trash2 size={16} />
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
+                  <OrderItemRow
+                    key={item.id}
+                    item={item}
+                    index={index}
+                    isFirst={index === 0}
+                    products={products}
+                    productsLoading={productsLoading}
+                    onUpdate={updateItem}
+                    onRemove={removeItem}
+                  />
                 ))}
               </div>
             )}

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>