@burdenoff/microfe-movethewheels 2026.929.3 → 2026.930.1

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -48,6 +48,7 @@ import { CustomerPicker } from '../components/CustomerPicker';
 import { EntityCombobox } from '../components/EntityCombobox';
 import { OrderItemRow } from '../components/OrderItemRow';
 import type { Customer } from '../types';
+import { validateOrderItems, type OrderItemFieldErrors } from '../utils/orderValidation';
 
 /**
  * `<input type="datetime-local">` needs a `YYYY-MM-DDTHH:mm` string in LOCAL
@@ -77,8 +78,12 @@ export default function CreateOrderPage() {
     customers,
     createCustomer,
     isLoading: customersLoading,
+    isLoadingMore: customersLoadingMore,
     error: customersError,
     refetch: refetchCustomers,
+    loadMore: loadMoreCustomers,
+    hasMore: customersHaveMore,
+    totalCustomers,
   } = useCustomers({
     limit: 20,
     filters: { search: customerSearch || undefined },
@@ -91,13 +96,22 @@ export default function CreateOrderPage() {
     error: routesError,
     hasMore: routesHaveMore,
     totalRoutes,
+    loadMore: loadMoreRoutes,
+    isLoadingMore: routesLoadingMore,
   } = useRoutes({
     status: 'planned',
     search: routeSearch || undefined,
     limit: 20,
   });
   const [productSearch, setProductSearch] = useState('');
-  const { products, isLoading: productsLoading } = useProducts({
+  const {
+    products,
+    isLoading: productsLoading,
+    isLoadingMore: productsLoadingMore,
+    hasMore: productsHaveMore,
+    totalProducts,
+    loadMore: loadMoreProducts,
+  } = useProducts({
     search: productSearch || undefined,
     limit: 20,
   });
@@ -124,6 +138,7 @@ export default function CreateOrderPage() {
       country: order?.deliveryAddress.country || 'USA',
     },
     items: order?.items || [],
+    trackingNumber: order?.trackingNumber || '',
     scheduledDelivery: toDateTimeLocalValue(order?.scheduledDelivery),
     specialInstructions: order?.specialInstructions || '',
   });
@@ -137,6 +152,7 @@ export default function CreateOrderPage() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
+  const [itemErrors, setItemErrors] = useState<Record<string, OrderItemFieldErrors>>({});
 
   useEffect(() => {
     if (!linkedCustomer) {
@@ -176,6 +192,7 @@ export default function CreateOrderPage() {
         country: order.deliveryAddress.country || 'USA',
       },
       items: order.items || [],
+      trackingNumber: order.trackingNumber || '',
       scheduledDelivery: toDateTimeLocalValue(order.scheduledDelivery),
       specialInstructions: order.specialInstructions || '',
     });
@@ -210,6 +227,11 @@ export default function CreateOrderPage() {
     if (formData.items.length === 0) {
       return 'Add at least one item to the order.';
     }
+    const nextItemErrors = validateOrderItems(formData.items);
+    setItemErrors(nextItemErrors);
+    if (Object.keys(nextItemErrors).length > 0) {
+      return 'Fix the highlighted shipment item fields before continuing.';
+    }
     if (formData.scheduledDelivery && Number.isNaN(Date.parse(formData.scheduledDelivery))) {
       return 'Enter a valid scheduled delivery date and time.';
     }
@@ -251,6 +273,7 @@ export default function CreateOrderPage() {
         deliveryAddress: formData.deliveryAddress,
         items: formData.items,
         // `null` clears an existing slot on edit; the service field is nullable.
+        trackingNumber: formData.trackingNumber.trim() || undefined,
         scheduledDelivery: formData.scheduledDelivery ? new Date(formData.scheduledDelivery) : null,
         routeId: formData.routeId || undefined,
         specialInstructions: formData.specialInstructions,
@@ -346,6 +369,14 @@ export default function CreateOrderPage() {
   };
 
   const removeItem = (index: number) => {
+    const itemId = formData.items[index]?.id;
+    if (itemId) {
+      setItemErrors((previous) => {
+        const next = { ...previous };
+        delete next[itemId];
+        return next;
+      });
+    }
     setFormData((prev) => ({
       ...prev,
       items: prev.items.filter((_, i) => i !== index),
@@ -353,6 +384,14 @@ export default function CreateOrderPage() {
   };
 
   const updateItem = (index: number, field: string, value: unknown) => {
+    const itemId = formData.items[index]?.id;
+    if (itemId && itemErrors[itemId]) {
+      setItemErrors((previous) => {
+        const next = { ...previous };
+        delete next[itemId];
+        return next;
+      });
+    }
     setFormData((prev) => ({
       ...prev,
       items: prev.items.map((item, i) => (i === index ? { ...item, [field]: value } : item)),
@@ -489,6 +528,10 @@ export default function CreateOrderPage() {
                 onOpenCustomers={goToCustomerCreate}
                 selectedCustomer={selectedCustomer}
                 onSearchQueryChange={setCustomerSearch}
+                hasMore={customersHaveMore}
+                totalCount={totalCustomers}
+                onLoadMore={loadMoreCustomers}
+                isLoadingMore={customersLoadingMore}
               />
               <div className="space-y-2">
                 <Label htmlFor="priority">Priority</Label>
@@ -555,6 +598,8 @@ export default function CreateOrderPage() {
                 onSearchChange={setRouteSearch}
                 hasMore={routesHaveMore}
                 totalCount={totalRoutes}
+                onLoadMore={loadMoreRoutes}
+                loadingMore={routesLoadingMore}
               />
               <p className="mt-2 text-xs text-text-secondary" role="status">
                 {routesLoading
@@ -782,6 +827,11 @@ export default function CreateOrderPage() {
                         index={index}
                         products={products}
                         productsLoading={productsLoading}
+                        productsLoadingMore={productsLoadingMore}
+                        productsHasMore={productsHaveMore}
+                        productsTotalCount={totalProducts}
+                        onLoadMoreProducts={loadMoreProducts}
+                        errors={itemErrors[item.id]}
                         onUpdate={updateItem}
                         onRemove={removeItem}
                       />
@@ -803,6 +853,20 @@ export default function CreateOrderPage() {
           description="Optional delivery timing and instructions for the carrier."
         >
           <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div className="space-y-2">
+              <Label htmlFor="trackingNumber">Tracking / reference number</Label>
+              <Input
+                id="trackingNumber"
+                value={formData.trackingNumber}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  updateField('trackingNumber', e.target.value)
+                }
+                placeholder="Optional carrier reference"
+              />
+              <p className="text-xs text-text-secondary">
+                Use this when a carrier or customer already supplied a tracking reference.
+              </p>
+            </div>
             <div className="space-y-2">
               <Label htmlFor="scheduledDelivery">Scheduled delivery</Label>
               <Input
@@ -817,7 +881,7 @@ export default function CreateOrderPage() {
                 Leave blank to dispatch as soon as a driver is available.
               </p>
             </div>
-            <div className="space-y-2 lg:col-span-2">
+            <div className="space-y-2 lg:col-span-1">
               <Label htmlFor="specialInstructions">Special instructions</Label>
               <Textarea
                 id="specialInstructions"

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -333,10 +333,16 @@ function customerToForm(customer: {
   phone: string;
   company?: string;
   type: 'b2b' | 'b2c';
-  address: { street: string; city: string; state: string; postalCode: string; country: string };
+  address: Partial<{
+    street: string;
+    city: string;
+    state: string;
+    postalCode: string;
+    country: string;
+  }>;
   businessLicense?: string;
   taxId?: string;
-  rating: number;
+  rating?: number;
 }): CustomerFormState {
   return {
     name: customer.name,
@@ -344,11 +350,11 @@ function customerToForm(customer: {
     phone: customer.phone,
     company: customer.company ?? '',
     type: customer.type,
-    street: customer.address.street,
-    city: customer.address.city,
-    state: customer.address.state,
-    postalCode: customer.address.postalCode,
-    country: customer.address.country,
+    street: customer.address.street ?? '',
+    city: customer.address.city ?? '',
+    state: customer.address.state ?? '',
+    postalCode: customer.address.postalCode ?? '',
+    country: customer.address.country ?? '',
     businessLicense: customer.businessLicense ?? '',
     taxId: customer.taxId ?? '',
     rating: customer.rating ? String(customer.rating) : '',
@@ -480,7 +486,7 @@ export default function CustomerDetailsPage() {
       headerContent={
         <div className="flex items-center gap-4">
           <TypeBadge type={customer.type} />
-          {customer.rating > 0 && (
+          {customer.rating !== undefined && (
             <div className="flex items-center gap-1">
               <Star size={16} className="text-status-warning-text fill-current" />
               <span className="font-medium">{customer.rating.toFixed(1)}</span>

package/src/movethewheels/pages/CustomersPage.tsx

@@ -65,7 +65,10 @@ export default function CustomersPage() {
     {
       id: 'location',
       header: 'Location',
-      cell: (row) => `${row.address.city}, ${row.address.state}`,
+      cell: (row) => {
+        const location = [row.address.city, row.address.state].filter(Boolean).join(', ');
+        return location || 'Not provided';
+      },
     },
     {
       id: 'rating',
@@ -73,7 +76,7 @@ export default function CustomersPage() {
       cell: (row) => (
         <div className="flex items-center gap-1">
           <Star size={14} className="text-status-warning-text fill-current" />
-          <span>{row.rating.toFixed(1)}</span>
+          <span>{row.rating !== undefined ? row.rating.toFixed(1) : 'Not provided'}</span>
         </div>
       ),
     },

package/src/movethewheels/pages/DashboardPage.tsx

@@ -277,7 +277,9 @@ export default function DashboardPage() {
                     >
                       <p className="font-medium">{alert.message}</p>
                       <p className="mt-1 text-xs text-text-secondary">
-                        {formatDate(alert.timestamp, 'relative')}
+                        {alert.timestamp
+                          ? formatDate(alert.timestamp, 'relative')
+                          : 'Time not recorded'}
                       </p>
                     </div>
                   ))}

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -86,6 +86,7 @@ interface DriverFormState {
   licenseExpiry: string;
   status: DriverStatus;
   vehicleId: string;
+  vehicleIds: string[];
   rating: string;
   notes: string;
   hireDate: string;
@@ -106,6 +107,7 @@ const emptyForm: DriverFormState = {
   licenseExpiry: '',
   status: 'available',
   vehicleId: '',
+  vehicleIds: [],
   rating: '',
   notes: '',
   hireDate: '',
@@ -130,7 +132,14 @@ function NewDriverForm({ editId }: { editId?: string }) {
 
   const [vehicleSearch, setVehicleSearch] = useState('');
   const debouncedVehicleSearch = useDebouncedValue(vehicleSearch);
-  const { vehicles, isLoading: vehiclesLoading } = useVehicles({
+  const {
+    vehicles,
+    isLoading: vehiclesLoading,
+    isLoadingMore: vehiclesLoadingMore,
+    hasMore: vehiclesHaveMore,
+    totalVehicles,
+    loadMore: loadMoreVehicles,
+  } = useVehicles({
     limit: 20,
     search: debouncedVehicleSearch || undefined,
   });
@@ -152,6 +161,7 @@ function NewDriverForm({ editId }: { editId?: string }) {
       licenseExpiry: toDateInput(driver.licenseExpiry),
       status: driver.status,
       vehicleId: driver.assignedVehicle || '',
+      vehicleIds: driver.vehicleIds,
       rating: driver.rating ? String(driver.rating) : '',
       notes: driver.notes || '',
       hireDate: toDateInput(driver.hireDate),
@@ -173,7 +183,8 @@ function NewDriverForm({ editId }: { editId?: string }) {
     licenseClass: form.licenseClass.trim() || undefined,
     licenseExpiry: fromDateInput(form.licenseExpiry),
     status: toApiDriverStatus(form.status),
-    vehicleId: form.vehicleId || undefined,
+    vehicleId: form.vehicleId || null,
+    vehicleIds: form.vehicleIds,
     rating: form.rating.trim() ? Number(form.rating) : undefined,
     notes: form.notes.trim() || undefined,
     hireDate: fromDateInput(form.hireDate),
@@ -411,7 +422,13 @@ function NewDriverForm({ editId }: { editId?: string }) {
                 <EntityCombobox
                   id="vehicle"
                   value={form.vehicleId}
-                  onChange={(value) => setForm((prev) => ({ ...prev, vehicleId: value }))}
+                  onChange={(value) =>
+                    setForm((prev) => ({
+                      ...prev,
+                      vehicleId: value,
+                      vehicleIds: value ? [value] : [],
+                    }))
+                  }
                   options={vehicles}
                   loading={vehiclesLoading}
                   getId={(vehicle) => vehicle.id}
@@ -424,6 +441,10 @@ function NewDriverForm({ editId }: { editId?: string }) {
                   )}
                   selectedOption={selectedVehicle}
                   selectedLoading={selectedVehicleLoading}
+                  hasMore={vehiclesHaveMore}
+                  totalCount={totalVehicles}
+                  onLoadMore={loadMoreVehicles}
+                  loadingMore={vehiclesLoadingMore}
                   placeholder="Unassigned"
                   emptyText="No vehicles match that search."
                 />
@@ -661,7 +682,7 @@ export default function DriverDetailsPage() {
               customColors={{ bg: 'bg-status-warning-bg-subtle', text: 'text-status-warning-text' }}
             />
           )}
-          {driver.rating > 0 && (
+          {driver.rating !== undefined && (
             <div className="flex items-center gap-1">
               <Star size={16} className="text-status-warning-text fill-current" />
               <span className="font-medium">{driver.rating.toFixed(1)}</span>

package/src/movethewheels/pages/DriversPage.tsx

@@ -170,7 +170,7 @@ export default function DriversPage() {
       id: 'rating',
       header: 'Rating',
       cell: (row) =>
-        row.rating > 0 ? (
+        row.rating !== undefined ? (
           <div className="flex items-center gap-1">
             <Star size={14} className="text-status-warning-text fill-current" />
             <span className="font-medium">{row.rating.toFixed(1)}</span>
@@ -299,7 +299,13 @@ export default function DriversPage() {
                 ))}
               </SelectContent>
             </Select>
-            <Select value={licenseClassFilter} onValueChange={setLicenseClassFilter}>
+            <Select
+              value={licenseClassFilter}
+              onValueChange={(value) => {
+                setLicenseClassFilter(value);
+                setPage(0);
+              }}
+            >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="License class" />
               </SelectTrigger>

package/src/movethewheels/pages/FleetPage.tsx

@@ -308,7 +308,7 @@ export default function FleetPage() {
                       </div>
                       <div className="text-right">
                         <StatusBadge status={driver.status} type="driver" size="sm" />
-                        {driver.rating > 0 && (
+                        {driver.rating !== undefined && (
                           <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>

package/src/movethewheels/pages/InventoryPage.tsx

@@ -502,32 +502,32 @@ export default function InventoryPage() {
                       <div>
                         <p className="font-medium">{warehouse.name}</p>
                         <p className="text-sm text-text-secondary">
-                          {warehouse.address.city}, {warehouse.address.state}
+                          {[warehouse.address.city, warehouse.address.state]
+                            .filter(Boolean)
+                            .join(', ') || 'Not provided'}
                         </p>
                       </div>
                       <div className="text-right">
                         <Badge
                           variant={
-                            warehouse.status.toUpperCase() === 'ACTIVE' ? 'default' : 'secondary'
+                            warehouse.status?.toUpperCase() === 'ACTIVE' ? 'default' : 'secondary'
                           }
                         >
-                          {warehouse.status.toUpperCase() === 'ACTIVE'
-                            ? t('movethewheels.inventory.warehouses.active', 'Active')
-                            : t('movethewheels.inventory.warehouses.inactive', 'Inactive')}
+                          {warehouse.status
+                            ? warehouse.status.toUpperCase() === 'ACTIVE'
+                              ? t('movethewheels.inventory.warehouses.active', 'Active')
+                              : t('movethewheels.inventory.warehouses.inactive', 'Inactive')
+                            : 'Not provided'}
                         </Badge>
                         <div className="mt-2">
                           <p className="text-xs text-text-secondary">
                             {t('movethewheels.inventory.warehouses.utilization', 'Utilization')}
                           </p>
-                          <Progress
-                            value={
-                              warehouse.capacity.totalSpace > 0
-                                ? (warehouse.capacity.usedSpace / warehouse.capacity.totalSpace) *
-                                  100
-                                : 0
-                            }
-                            className="w-24 h-2"
-                          />
+                          {warehouse.utilization !== undefined ? (
+                            <Progress value={warehouse.utilization} className="w-24 h-2" />
+                          ) : (
+                            <p className="text-xs text-text-tertiary">Not provided</p>
+                          )}
                         </div>
                       </div>
                     </div>
@@ -567,8 +567,12 @@ export default function InventoryPage() {
                         <p className="text-sm text-text-secondary">{product.sku}</p>
                       </div>
                       <div className="text-right">
-                        <p className="font-medium">{formatCurrency(product.value)}</p>
-                        <Badge variant="outline">{product.category}</Badge>
+                        <p className="font-medium">
+                          {product.value !== undefined
+                            ? formatCurrency(product.value)
+                            : 'Not provided'}
+                        </p>
+                        <Badge variant="outline">{product.category ?? 'Not provided'}</Badge>
                       </div>
                     </div>
                   </div>

package/src/movethewheels/pages/LiveTrackingPage.tsx

@@ -83,7 +83,7 @@ export default function LiveTrackingPage() {
           sublabel:
             d.driver?.fullName ||
             d.vehicle?.vehicleNumber ||
-            d.tracking?.currentLocation.address ||
+            d.tracking?.currentLocation?.address ||
             undefined,
         },
       ];
@@ -292,7 +292,7 @@ export default function LiveTrackingPage() {
                                   : 'N/A'}
                               </p>
                               <p className="text-xs text-text-secondary">
-                                {delivery.tracking?.currentLocation.address ||
+                                {delivery.tracking?.currentLocation?.address ||
                                   'Location updating...'}
                               </p>
                             </div>
@@ -352,7 +352,7 @@ export default function LiveTrackingPage() {
                 <div>
                   <p className="text-sm text-text-secondary">Current Location</p>
                   <p className="text-sm">
-                    {selected.tracking?.currentLocation.address || 'Updating...'}
+                    {selected.tracking?.currentLocation?.address || 'Updating...'}
                   </p>
                   {(() => {
                     const coord = firstRealLatLng(
@@ -440,7 +440,9 @@ export default function LiveTrackingPage() {
                     >
                       <p className="font-medium">{alert.message}</p>
                       <p className="text-xs text-text-secondary mt-1">
-                        {formatDate(alert.timestamp, 'relative')}
+                        {alert.timestamp
+                          ? formatDate(alert.timestamp, 'relative')
+                          : 'Time not recorded'}
                       </p>
                     </div>
                   ))}

package/src/movethewheels/pages/MultiModalShipmentPage.tsx

@@ -81,6 +81,8 @@ function formatMoney(
 export default function MultiModalShipmentPage() {
   const [pageIndex, setPageIndex] = useState(0);
   const pageSize = 10;
+  const [shipmentNumber, setShipmentNumber] = useState('');
+  const [shipmentSearch, setShipmentSearch] = useState('');
   const {
     shipments,
     totalShipments,
@@ -92,9 +94,9 @@ export default function MultiModalShipmentPage() {
   } = useMultiModalShipments({
     limit: pageSize,
     offset: pageIndex * pageSize,
+    search: shipmentSearch,
   });
 
-  const [shipmentNumber, setShipmentNumber] = useState('');
   const [originAddress, setOriginAddress] = useState('');
   const [destinationAddress, setDestinationAddress] = useState('');
   const [legs, setLegs] = useState<ShipmentLegDraft[]>([emptyLeg()]);
@@ -529,6 +531,18 @@ export default function MultiModalShipmentPage() {
       </PageSection>
 
       <PageSection title="Planned Multi-Modal Shipments">
+        <div className="mb-4 max-w-xl space-y-2">
+          <Label htmlFor="planned-shipment-search">Search planned shipments</Label>
+          <Input
+            id="planned-shipment-search"
+            value={shipmentSearch}
+            onChange={(event) => {
+              setShipmentSearch(event.target.value);
+              setPageIndex(0);
+            }}
+            placeholder="Search by shipment or tracking number"
+          />
+        </div>
         {isLoading ? (
           <LoadingState message="Loading multi-modal shipments..." />
         ) : error ? (

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'