@burdenoff/microfe-movethewheels 2026.921.1 → 2026.923.1

package/src/movethewheels/hooks/useFleet.ts

@@ -533,7 +533,13 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
   // refetched) every render when the caller passes an inline filters object.
   const filters = useMemo(
     () => rawFilters,
-    [rawFilters?.driverId, rawFilters?.search, rawFilters?.status, rawFilters?.vehicleType]
+    [
+      rawFilters?.driverId,
+      rawFilters?.search,
+      rawFilters?.status,
+      rawFilters?.vehicleId,
+      rawFilters?.vehicleType,
+    ]
   );
   const graphQLOptions = useGraphqlOptions();
   const [vehicles, setVehicles] = useState<Vehicle[]>([]);
@@ -551,13 +557,14 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
             search: filters?.search,
             type: filters?.vehicleType?.toUpperCase(),
             status: filters?.status ? toApiVehicleStatus(filters.status) : undefined,
+            driverId: filters?.driverId,
           },
           pagination: { limit, offset: 0 },
         }),
         executeGraphQL<{ drivers: ApiDriver[] }>(graphQLOptions, LIST_DRIVERS_QUERY, {
           filter: {
             search: filters?.search,
-            vehicleId: filters?.driverId,
+            vehicleId: filters?.vehicleId,
           },
           pagination: { limit, offset: 0 },
         }),

package/src/movethewheels/hooks/useOrders.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import type { Order, OrderFilter, OrderStatus } from '../types';
+import { mapRoute } from './useRoutes';
 import { executeGraphQL } from '../utils/graphqlClient';
 
 interface UseOrdersOptions {
@@ -53,6 +54,21 @@ export interface ApiOrder {
   scheduledDelivery?: string | null;
   vehicleId?: string | null;
   driverId?: string | null;
+  routeId?: string | null;
+  route?: {
+    id: string;
+    name: string;
+    status: string;
+    vehicleId?: string | null;
+    driverId?: string | null;
+    waypoints?: unknown;
+    estimatedDistance?: number | null;
+    estimatedDuration?: number | null;
+    fuelCost?: number | null;
+    actualDistance?: number | null;
+    actualDuration?: number | null;
+    createdAt: string;
+  } | null;
   createdAt: string;
   updatedAt: string;
   customer?: {
@@ -85,6 +101,21 @@ const DELIVERY_JOB_FIELDS = `
   scheduledDelivery
   vehicleId
   driverId
+  routeId
+  route {
+    id
+    name
+    status
+    vehicleId
+    driverId
+    waypoints
+    estimatedDistance
+    estimatedDuration
+    fuelCost
+    actualDistance
+    actualDuration
+    createdAt
+  }
   createdAt
   updatedAt
   customer {
@@ -302,6 +333,8 @@ export function mapOrder(order: ApiOrder): Order {
     scheduledDelivery: order.scheduledDelivery ? new Date(order.scheduledDelivery) : undefined,
     vehicleId: order.vehicleId ?? undefined,
     driverId: order.driverId ?? undefined,
+    routeId: order.routeId ?? undefined,
+    route: order.route ? mapRoute(order.route) : undefined,
     createdAt: new Date(order.createdAt),
     updatedAt: new Date(order.updatedAt),
   };
@@ -409,6 +442,7 @@ export function useOrders(options: UseOrdersOptions = {}): UseOrdersResult {
           scheduledDelivery: orderData.scheduledDelivery?.toISOString(),
           vehicleId: orderData.vehicleId,
           driverId: orderData.driverId,
+          routeId: orderData.routeId,
         },
       });
 
@@ -440,6 +474,7 @@ export function useOrders(options: UseOrdersOptions = {}): UseOrdersResult {
             updates.scheduledDelivery === null ? null : updates.scheduledDelivery?.toISOString(),
           vehicleId: updates.vehicleId,
           driverId: updates.driverId,
+          routeId: updates.routeId,
         },
       });
 

package/src/movethewheels/hooks/useRoutes.ts

@@ -218,7 +218,7 @@ function mapWaypoints(waypoints: unknown): RouteStop[] {
   });
 }
 
-function mapRoute(route: ApiRoute): Route {
+export function mapRoute(route: ApiRoute): Route {
   return {
     id: route.id,
     name: route.name,

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -6,7 +6,17 @@
 
 import { useEffect, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router';
-import { Package, ArrowLeft, Save, Plus, Trash2, Users, MapPin, CalendarClock } from 'lucide-react';
+import {
+  Package,
+  ArrowLeft,
+  Save,
+  Plus,
+  Trash2,
+  Users,
+  MapPin,
+  CalendarClock,
+  Route as RouteIcon,
+} from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { FormError } from '../components/FormError';
 import {
@@ -28,6 +38,7 @@ import {
 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 { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath, buildCustomerCreatePath } from '../utils/navigation';
@@ -70,6 +81,14 @@ export default function CreateOrderPage() {
     filters: { search: debouncedCustomerSearch || undefined },
   });
   const { customer: linkedCustomer } = useCustomer(prefilledCustomerId ?? order?.customerId);
+  const {
+    routes,
+    isLoading: routesLoading,
+    error: routesError,
+  } = useRoutes({
+    status: 'planned',
+    limit: 20,
+  });
 
   const isEditing = !!orderId && !!order;
 
@@ -77,6 +96,7 @@ export default function CreateOrderPage() {
   const [formData, setFormData] = useState({
     customerId: prefilledCustomerId || order?.customerId || '',
     priority: order?.priority || 'normal',
+    routeId: order?.routeId || '',
     pickupAddress: {
       street: order?.pickupAddress.street || '',
       city: order?.pickupAddress.city || '',
@@ -121,6 +141,7 @@ export default function CreateOrderPage() {
     setFormData({
       customerId: order.customerId || '',
       priority: order.priority || 'normal',
+      routeId: order.routeId || '',
       pickupAddress: {
         street: order.pickupAddress.street || '',
         city: order.pickupAddress.city || '',
@@ -212,6 +233,7 @@ export default function CreateOrderPage() {
         items: formData.items,
         // `null` clears an existing slot on edit; the service field is nullable.
         scheduledDelivery: formData.scheduledDelivery ? new Date(formData.scheduledDelivery) : null,
+        routeId: formData.routeId || undefined,
         specialInstructions: formData.specialInstructions,
       };
 
@@ -252,6 +274,35 @@ export default function CreateOrderPage() {
     }));
   };
 
+  const selectSavedRoute = (value: string) => {
+    if (value === 'none') {
+      updateField('routeId', '');
+      return;
+    }
+    const route = routes.find((candidate) => candidate.id === value);
+    if (!route) return;
+
+    const pickup = route.stops.find((stop) => stop.type === 'pickup')?.address;
+    const delivery = [...route.stops].reverse().find((stop) => stop.type === 'delivery')?.address;
+    const mergeAddress = (current: typeof formData.pickupAddress, saved: typeof pickup) =>
+      saved
+        ? {
+            street: current.street.trim() ? current.street : saved.street,
+            city: current.city.trim() ? current.city : saved.city,
+            state: current.state.trim() ? current.state : saved.state,
+            postalCode: current.postalCode.trim() ? current.postalCode : saved.postalCode,
+            country: current.country.trim() ? current.country : saved.country,
+          }
+        : current;
+
+    setFormData((previous) => ({
+      ...previous,
+      routeId: route.id,
+      pickupAddress: mergeAddress(previous.pickupAddress, pickup),
+      deliveryAddress: mergeAddress(previous.deliveryAddress, delivery),
+    }));
+  };
+
   const addItem = () => {
     setFormData((prev) => ({
       ...prev,
@@ -404,6 +455,38 @@ export default function CreateOrderPage() {
           </div>
         </EmphasisPanel>
 
+        {/* Saved route — optional shortcut; manual addresses remain authoritative. */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <RouteIcon size={18} />
+              Saved Route (Optional)
+            </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>
+            <p className="text-xs text-text-secondary">
+              {routesLoading
+                ? 'Loading planned routes…'
+                : routesError
+                  ? 'Saved routes are unavailable; enter pickup and delivery addresses manually.'
+                  : 'A saved route fills any blank address fields. You can always edit both addresses below.'}
+            </p>
+          </CardContent>
+        </Card>
+
         {/* Addresses */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {/* Pickup Address */}

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -4,7 +4,7 @@
  * Displays detailed information about a specific order.
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
 import {
   Package,
@@ -99,19 +99,27 @@ export default function OrderDetailsPage() {
   const { order, isLoading, error, refetch } = useOrder(orderId);
   const { updateOrder, updateOrderStatus } = useOrders();
   const [fleetSearch, setFleetSearch] = useState('');
-  const debouncedFleetSearch = useDebouncedValue(fleetSearch);
-  const { vehicles, drivers } = useFleet({
-    limit: 20,
-    filters: { search: debouncedFleetSearch || undefined },
-  });
-  const { message: notice, notify } = useNotice();
-
   const [selectedVehicle, setSelectedVehicle] = useState('');
   const [selectedDriver, setSelectedDriver] = useState('');
   const [assigning, setAssigning] = useState(false);
   const [advancing, setAdvancing] = useState(false);
   const [actionError, setActionError] = useState<string | null>(null);
-
+  const debouncedFleetSearch = useDebouncedValue(fleetSearch);
+  const { vehicles, isLoading: vehiclesLoading } = useFleet({
+    limit: 20,
+    filters: {
+      search: debouncedFleetSearch || undefined,
+      driverId: selectedDriver || undefined,
+    },
+  });
+  const { drivers, isLoading: driversLoading } = useFleet({
+    limit: 20,
+    filters: {
+      search: debouncedFleetSearch || undefined,
+      vehicleId: selectedVehicle || undefined,
+    },
+  });
+  const { message: notice, notify } = useNotice();
   const availableVehicles = vehicles.filter(
     (vehicle) => vehicle.status === 'available' || vehicle.id === order?.vehicleId
   );
@@ -119,6 +127,26 @@ 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 || (!selectedVehicle && !selectedDriver)) {
       setActionError('Pick a vehicle and/or a driver to assign.');
@@ -194,7 +222,7 @@ export default function OrderDetailsPage() {
             <ArrowLeft size={16} />
             Back
           </Button>
-          <Button variant="outline">
+          <Button variant="outline" onClick={() => window.print()}>
             <Printer size={16} />
             Print
           </Button>
@@ -340,6 +368,47 @@ export default function OrderDetailsPage() {
             </CardContent>
           </Card>
 
+          {/* Saved route */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Truck size={18} />
+                Saved Route
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {order.route ? (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <p className="font-medium">{order.route.name}</p>
+                      <p className="text-sm text-text-secondary">
+                        {order.route.stops.length} stops ·{' '}
+                        {order.route.status.replace('_', ' ').toLowerCase()}
+                      </p>
+                    </div>
+                    <Badge variant="outline">Reusable route</Badge>
+                  </div>
+                  <div className="space-y-2">
+                    {order.route.stops.map((stop, index) => (
+                      <div key={stop.id} className="flex items-start gap-2 text-sm">
+                        <span className="text-text-secondary">{index + 1}.</span>
+                        <span>
+                          <span className="font-medium capitalize">{stop.type}</span> ·{' '}
+                          {formatAddress(stop.address)}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <p className="text-sm text-text-secondary">
+                  No saved route was selected for this order.
+                </p>
+              )}
+            </CardContent>
+          </Card>
+
           {/* Order Items */}
           <Card>
             <CardHeader>

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -74,10 +74,6 @@ function NewRouteForm({ editId }: { editId?: string }) {
   const { route } = useRoute(editId);
   const [fleetSearch, setFleetSearch] = useState('');
   const debouncedFleetSearch = useDebouncedValue(fleetSearch);
-  const { vehicles, drivers } = useFleet({
-    limit: 20,
-    filters: { search: debouncedFleetSearch || undefined },
-  });
   const isEditing = !!editId;
   const [form, setForm] = useState<{
     name: string;
@@ -92,6 +88,20 @@ function NewRouteForm({ editId }: { editId?: string }) {
     driverId: '',
     stops: [{ address: '', type: 'delivery' }],
   });
+  const { vehicles } = useFleet({
+    limit: 20,
+    filters: {
+      search: debouncedFleetSearch || undefined,
+      driverId: form.driverId || undefined,
+    },
+  });
+  const { drivers } = useFleet({
+    limit: 20,
+    filters: {
+      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.

package/src/movethewheels/types/index.ts

@@ -280,6 +280,8 @@ export interface Order {
   actualDelivery?: Date;
   driverId?: string;
   vehicleId?: string;
+  routeId?: string;
+  route?: Route;
   trackingNumber: string;
   specialInstructions?: string;
   pricing: OrderPricing;
@@ -757,7 +759,10 @@ export interface OrderFilter {
 export interface FleetFilter {
   vehicleType?: VehicleType;
   status?: VehicleStatus;
+  /** Filter vehicles to those linked to this driver. */
   driverId?: string;
+  /** Filter drivers to those linked to this vehicle. */
+  vehicleId?: string;
   search?: string;
 }