@burdenoff/microfe-movethewheels 2026.929.4 → 2026.930.2

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -4,7 +4,7 @@
  * Displays detailed information about a specific order.
  */
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useParams } from 'react-router';
 import {
   Package,
@@ -105,15 +105,27 @@ export default function OrderDetailsPage() {
   const [advancing, setAdvancing] = useState(false);
   const [actionError, setActionError] = useState<string | null>(null);
   const debouncedFleetSearch = useDebouncedValue(fleetSearch);
-  const { vehicles, isLoading: vehiclesLoading } = useVehicles({
+  const {
+    vehicles,
+    isLoading: vehiclesLoading,
+    isLoadingMore: vehiclesLoadingMore,
+    hasMore: vehiclesHaveMore,
+    totalVehicles,
+    loadMore: loadMoreVehicles,
+  } = useVehicles({
     limit: 20,
     search: debouncedFleetSearch || undefined,
-    driverId: selectedDriver || undefined,
   });
-  const { drivers, isLoading: driversLoading } = useDrivers({
+  const {
+    drivers,
+    isLoading: driversLoading,
+    isLoadingMore: driversLoadingMore,
+    hasMore: driversHaveMore,
+    totalDrivers,
+    loadMore: loadMoreDrivers,
+  } = useDrivers({
     limit: 20,
     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
@@ -132,26 +144,6 @@ export default function OrderDetailsPage() {
     (driver) => driver.status === 'available' || driver.id === order?.driverId
   );
 
-  useEffect(() => {
-    if (
-      !driversLoading &&
-      selectedDriver &&
-      !drivers.some((driver) => driver.id === selectedDriver)
-    ) {
-      setSelectedDriver('');
-    }
-  }, [drivers, driversLoading, selectedDriver]);
-
-  useEffect(() => {
-    if (
-      !vehiclesLoading &&
-      selectedVehicle &&
-      !vehicles.some((vehicle) => vehicle.id === selectedVehicle)
-    ) {
-      setSelectedVehicle('');
-    }
-  }, [selectedVehicle, vehicles, vehiclesLoading]);
-
   const handleAssign = async () => {
     if (!orderId || !order) {
       setActionError('This order is no longer available. Refresh and try again.');
@@ -607,6 +599,10 @@ export default function OrderDetailsPage() {
                       )}
                       selectedOption={selectedVehicleRecord}
                       selectedLoading={selectedVehicleLoading}
+                      hasMore={vehiclesHaveMore}
+                      totalCount={totalVehicles}
+                      onLoadMore={loadMoreVehicles}
+                      loadingMore={vehiclesLoadingMore}
                       required
                       placeholder={
                         order.vehicleId ? `Current: ${order.vehicleId}` : 'Select a vehicle'
@@ -634,6 +630,10 @@ export default function OrderDetailsPage() {
                       )}
                       selectedOption={selectedDriverRecord}
                       selectedLoading={selectedDriverLoading}
+                      hasMore={driversHaveMore}
+                      totalCount={totalDrivers}
+                      onLoadMore={loadMoreDrivers}
+                      loadingMore={driversLoadingMore}
                       required
                       placeholder={
                         order.driverId ? `Current: ${order.driverId}` : 'Select a driver'

package/src/movethewheels/pages/ProductDetailsPage.tsx

@@ -42,6 +42,7 @@ import {
   ResponsiveDialogDescription,
 } from '@burdenoff/fe-libs/ui';
 import { useProduct, useInventory, useProductStockLevels } from '../hooks/useInventory';
+import { useRefetchOnLeaveEdit } from '../hooks/useRefetchOnLeaveEdit';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -326,6 +327,7 @@ export default function ProductDetailsPage() {
   const { product, isLoading, error, refetch } = useProduct(productId);
   const { deleteProduct } = useInventory();
   const isEditRoute = useLocation().pathname.endsWith('/edit');
+  useRefetchOnLeaveEdit(isEditRoute, refetch);
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState<string | null>(null);

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -53,6 +53,7 @@ import { EntityCombobox } from '../components/EntityCombobox';
 import { useRoute, useRoutes } from '../hooks/useRoutes';
 import { useVehicles, useVehicle, useDrivers, useDriver } from '../hooks/useFleet';
 import { useAssignmentSuggestions } from '../hooks/useFleetIntelligence';
+import { useRefetchOnLeaveEdit } from '../hooks/useRefetchOnLeaveEdit';
 import { AssignmentSuggestions } from '../components/AssignmentSuggestions';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -95,20 +96,22 @@ function NewRouteForm({ editId }: { editId?: string }) {
     isLoading: vehiclesLoading,
     hasMore: vehiclesHaveMore,
     totalVehicles,
+    loadMore: loadMoreVehicles,
+    isLoadingMore: vehiclesLoadingMore,
   } = useVehicles({
     limit: 20,
     search: vehicleSearch || undefined,
-    driverId: form.driverId || undefined,
   });
   const {
     drivers,
     isLoading: driversLoading,
     hasMore: driversHaveMore,
     totalDrivers,
+    loadMore: loadMoreDrivers,
+    isLoadingMore: driversLoadingMore,
   } = useDrivers({
     limit: 20,
     search: driverSearch || 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
@@ -314,7 +317,8 @@ function NewRouteForm({ editId }: { editId?: string }) {
                   searchPlaceholder="Search vehicle number or type…"
                   hasMore={vehiclesHaveMore}
                   totalCount={totalVehicles}
-                  required
+                  onLoadMore={loadMoreVehicles}
+                  loadingMore={vehiclesLoadingMore}
                   placeholder="Assign later"
                   emptyText="No available vehicles."
                 />
@@ -340,7 +344,8 @@ function NewRouteForm({ editId }: { editId?: string }) {
                   searchPlaceholder="Search driver name or employee ID…"
                   hasMore={driversHaveMore}
                   totalCount={totalDrivers}
-                  required
+                  onLoadMore={loadMoreDrivers}
+                  loadingMore={driversLoadingMore}
                   placeholder="Assign later"
                   emptyText="No available drivers."
                 />
@@ -432,6 +437,7 @@ export default function RouteDetailsPage() {
   const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { basePath, navigate } = useMoveTheWheels();
   const { route, isLoading, error, refetch } = useRoute(routeId);
+  useRefetchOnLeaveEdit(isEditRoute, refetch);
   const { optimizeRoute, updateRoute, deleteRoute } = useRoutes();
   const suggestions = useAssignmentSuggestions(routeId);
   const { t: translate } = useI18n();

package/src/movethewheels/pages/TrackingPage.tsx

@@ -120,7 +120,7 @@ export default function TrackingPage() {
       {/* Search Form */}
       <Card>
         <CardContent className="p-6">
-          <form onSubmit={handleSearch} className="flex gap-4">
+          <form onSubmit={handleSearch} className="flex flex-col gap-4 sm:flex-row">
             <div className="flex-1 relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-text-secondary" />
               <Input
@@ -133,7 +133,12 @@ export default function TrackingPage() {
                 className="pl-10 h-12 text-lg"
               />
             </div>
-            <Button type="submit" size="lg" disabled={!trackingInput || isLoading}>
+            <Button
+              type="submit"
+              size="lg"
+              className="w-full sm:w-auto"
+              disabled={!trackingInput || isLoading}
+            >
               {isLoading
                 ? t('movethewheels.tracking.search.searching', 'Searching...')
                 : t('movethewheels.tracking.search.track', 'Track')}

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -50,6 +50,7 @@ import { useVehicle, useVehicleDrivers, useFleet, toApiVehicleStatus } from '../
 import type { VehicleFuelType, VehicleStatus } from '../types';
 import { VEHICLE_STATUS_LABELS } from '../constants';
 import { useRecordVehicleService } from '../hooks/useFleetIntelligence';
+import { useRefetchOnLeaveEdit } from '../hooks/useRefetchOnLeaveEdit';
 import { VehicleServiceCard } from '../components/VehicleServiceCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate, getInitials } from '../utils/formatters';
@@ -494,6 +495,7 @@ export default function VehicleDetailsPage() {
     return value === key ? fallback : value;
   };
   const isEditRoute = useLocation().pathname.endsWith('/edit');
+  useRefetchOnLeaveEdit(isEditRoute, refetch);
   // Who is behind the wheel — resolved through DriverFilterInput.vehicleId, the
   // same link `assignDriverVehicle` writes.
   const {

package/src/movethewheels/utils/orderValidation.ts

@@ -0,0 +1,53 @@
+import type { OrderItem } from '../types';
+
+export type OrderItemField =
+  'name' | 'sku' | 'quantity' | 'weight' | 'value' | 'length' | 'width' | 'height';
+
+export type OrderItemFieldErrors = Partial<Record<OrderItemField, string>>;
+
+const isFiniteNonNegative = (value: number): boolean => Number.isFinite(value) && value >= 0;
+
+/**
+ * Validates one delivery-job cargo line without imposing pricing or order
+ * semantics that belong to the service. A catalog product may supply the name;
+ * every line still carries its SKU because cargo-item records require one.
+ */
+export function validateOrderItem(item: OrderItem): OrderItemFieldErrors {
+  const errors: OrderItemFieldErrors = {};
+  const hasProduct = item.productId.trim().length > 0;
+  const hasName = item.name.trim().length > 0;
+
+  if (!hasProduct && !hasName) {
+    errors.name = 'Enter an item name or select a catalog product.';
+  }
+  if (item.sku.trim().length === 0) {
+    errors.sku = 'SKU is required for every shipment item.';
+  }
+  if (!Number.isFinite(item.quantity) || item.quantity <= 0) {
+    errors.quantity = 'Quantity must be a finite number greater than 0.';
+  }
+  if (!isFiniteNonNegative(item.weight)) {
+    errors.weight = 'Weight must be a finite number of 0 or more.';
+  }
+  if (!isFiniteNonNegative(item.value)) {
+    errors.value = 'Value must be a finite number of 0 or more.';
+  }
+
+  const dimensions = item.dimensions;
+  for (const field of ['length', 'width', 'height'] as const) {
+    if (!dimensions || !isFiniteNonNegative(dimensions[field])) {
+      errors[field] =
+        `${field[0].toUpperCase()}${field.slice(1)} must be a finite number of 0 or more.`;
+    }
+  }
+
+  return errors;
+}
+
+export function validateOrderItems(items: OrderItem[]): Record<string, OrderItemFieldErrors> {
+  return Object.fromEntries(
+    items
+      .map((item) => [item.id, validateOrderItem(item)] as const)
+      .filter(([, errors]) => Object.keys(errors).length > 0)
+  );
+}