@burdenoff/microfe-movethewheels 2026.920.2 → 2026.920.3

package/dist/utils/navigation.js

@@ -2,5 +2,26 @@
 function e(e, t) {
 	return (e.endsWith("/") ? e.slice(0, -1) : e) + (t.startsWith("/") ? t : `/${t}`);
 }
+function t(e, t) {
+	if (!t || Object.keys(t).length === 0) return e;
+	let n = new URLSearchParams();
+	for (let [e, r] of Object.entries(t)) r != null && r !== "" && n.set(e, String(r));
+	let r = n.toString();
+	return r ? `${e}?${r}` : e;
+}
+var n = [/^orders\/new$/, /^orders\/[^/?#]+\/edit$/];
+function r(e) {
+	if (!e || e.length > 200 || e.includes("://") || e.startsWith("/")) return null;
+	let [t] = e.split(/[?#]/, 1);
+	return n.some((e) => e.test(t)) ? t : null;
+}
+function i(e, n) {
+	let i = r(e);
+	return i ? t(i, { customerId: n }) : e;
+}
+function a(e) {
+	let n = r(e);
+	return n ? t("customers/new", { returnTo: n }) : "customers/new";
+}
 //#endregion
-export { e as joinPath };
+export { a as buildCustomerCreatePath, i as buildOrderCustomerPath, r as getSafeCustomerReturnPath, e as joinPath };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.920.2",
+  "version": "2026.920.3",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [

package/src/movethewheels/components/CustomerPicker.tsx

@@ -0,0 +1,307 @@
+import { useState, type ChangeEvent, type FormEvent } from 'react';
+import { Plus, RefreshCw, UserPlus } from 'lucide-react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui';
+import type { Customer } from '../types';
+import { FormError } from './FormError';
+
+interface CustomerPickerProps {
+  customers: Customer[];
+  value: string;
+  onValueChange: (value: string) => void;
+  onCreated: (customer: Customer) => void;
+  createCustomer: (customer: Partial<Customer>) => Promise<Customer>;
+  isLoading: boolean;
+  error: Error | null;
+  onRetry: () => void;
+  onOpenCustomers?: () => void;
+  selectedCustomer?: Customer | null;
+  disabled?: boolean;
+}
+
+interface CustomerFormState {
+  name: string;
+  type: Customer['type'];
+  email: string;
+  phone: string;
+  company: string;
+}
+
+const EMPTY_FORM: CustomerFormState = {
+  name: '',
+  type: 'b2c',
+  email: '',
+  phone: '',
+  company: '',
+};
+
+function mergeCustomers(customers: Customer[], selectedCustomer?: Customer | null): Customer[] {
+  if (!selectedCustomer || customers.some((customer) => customer.id === selectedCustomer.id)) {
+    return customers;
+  }
+  return [selectedCustomer, ...customers];
+}
+
+export function CustomerPicker({
+  customers,
+  value,
+  onValueChange,
+  onCreated,
+  createCustomer,
+  isLoading,
+  error,
+  onRetry,
+  onOpenCustomers,
+  selectedCustomer,
+  disabled = false,
+}: CustomerPickerProps) {
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [form, setForm] = useState<CustomerFormState>(EMPTY_FORM);
+  const [isCreating, setIsCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const options = mergeCustomers(customers, selectedCustomer);
+
+  const openCreateDialog = () => {
+    setCreateError(null);
+    setForm(EMPTY_FORM);
+    setIsCreateOpen(true);
+  };
+
+  const closeCreateDialog = () => {
+    if (isCreating) return;
+    setIsCreateOpen(false);
+  };
+
+  const handleCreate = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const name = form.name.trim();
+    if (!name) {
+      setCreateError('Customer name is required.');
+      return;
+    }
+
+    setIsCreating(true);
+    setCreateError(null);
+    try {
+      const created = await createCustomer({
+        name,
+        type: form.type,
+        email: form.email.trim() || undefined,
+        phone: form.phone.trim() || undefined,
+        company: form.company.trim() || undefined,
+      });
+      onCreated(created);
+      setIsCreateOpen(false);
+      setForm(EMPTY_FORM);
+    } catch (creationError) {
+      setCreateError(
+        creationError instanceof Error
+          ? creationError.message
+          : 'Could not create the customer. Please try again.'
+      );
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <Label htmlFor="customer">Customer</Label>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={openCreateDialog}
+          disabled={disabled || isLoading}
+        >
+          <Plus size={14} className="mr-1" />
+          Add customer
+        </Button>
+      </div>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-start">
+        <Select
+          value={value}
+          onValueChange={onValueChange}
+          disabled={disabled || isLoading || Boolean(error)}
+        >
+          <SelectTrigger id="customer" className="flex-1">
+            <SelectValue placeholder={isLoading ? 'Loading customers...' : 'Select customer'} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((customer) => (
+              <SelectItem key={customer.id} value={customer.id}>
+                {customer.name} {customer.email ? `(${customer.email})` : ''}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {error && (
+          <Button type="button" variant="outline" size="sm" onClick={onRetry}>
+            <RefreshCw size={14} className="mr-1" />
+            Retry
+          </Button>
+        )}
+      </div>
+      {error ? (
+        <div className="flex flex-wrap items-center gap-2">
+          <p role="alert" className="text-sm text-status-error-text">
+            Customers could not be loaded. Retry or add a customer to continue.
+          </p>
+          {onOpenCustomers && (
+            <Button type="button" variant="outline" size="sm" onClick={onOpenCustomers}>
+              Open customer page
+            </Button>
+          )}
+        </div>
+      ) : !isLoading && options.length === 0 ? (
+        <div className="rounded-lg border border-border-seam bg-bg-sunken/40 p-3">
+          <div className="flex items-start gap-2">
+            <UserPlus size={16} className="mt-0.5 shrink-0 text-text-secondary" />
+            <div>
+              <p className="text-sm font-medium text-text-primary">Add a customer to continue</p>
+              <p className="text-sm text-text-secondary">
+                The customer will be selected automatically and your order details will stay here.
+              </p>
+            </div>
+          </div>
+          <Button
+            type="button"
+            size="sm"
+            className="mt-3"
+            onClick={openCreateDialog}
+            disabled={disabled}
+          >
+            <Plus size={14} className="mr-1.5" />
+            Create customer
+          </Button>
+        </div>
+      ) : null}
+
+      <Dialog
+        open={isCreateOpen}
+        onOpenChange={(open: boolean) => (open ? setIsCreateOpen(true) : closeCreateDialog())}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create customer</DialogTitle>
+            <DialogDescription>
+              Add the customer without leaving this order. They will be selected automatically.
+            </DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleCreate} className="space-y-4">
+            <FormError message={createError} />
+            <div className="space-y-2">
+              <Label htmlFor="quick-customer-name">Name</Label>
+              <Input
+                id="quick-customer-name"
+                value={form.name}
+                onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                  setForm((previous) => ({ ...previous, name: event.target.value }))
+                }
+                placeholder="Acme Corp or Jane Doe"
+                autoFocus
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="quick-customer-type">Customer type</Label>
+              <Select
+                value={form.type}
+                onValueChange={(value: string) =>
+                  setForm((previous) => ({ ...previous, type: value as Customer['type'] }))
+                }
+              >
+                <SelectTrigger id="quick-customer-type">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="b2c">B2C (Individual)</SelectItem>
+                  <SelectItem value="b2b">B2B (Business)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="quick-customer-email">Email</Label>
+                <Input
+                  id="quick-customer-email"
+                  type="email"
+                  value={form.email}
+                  onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                    setForm((previous) => ({ ...previous, email: event.target.value }))
+                  }
+                  placeholder="customer@example.com"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="quick-customer-phone">Phone</Label>
+                <Input
+                  id="quick-customer-phone"
+                  value={form.phone}
+                  onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                    setForm((previous) => ({ ...previous, phone: event.target.value }))
+                  }
+                  placeholder="+1-555-0100"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="quick-customer-company">Company</Label>
+              <Input
+                id="quick-customer-company"
+                value={form.company}
+                onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                  setForm((previous) => ({ ...previous, company: event.target.value }))
+                }
+                placeholder="Company name (optional)"
+              />
+            </div>
+            <DialogFooter>
+              {onOpenCustomers && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => {
+                    closeCreateDialog();
+                    onOpenCustomers();
+                  }}
+                  disabled={isCreating}
+                >
+                  Use customer page
+                </Button>
+              )}
+              <Button
+                type="button"
+                variant="outline"
+                onClick={closeCreateDialog}
+                disabled={isCreating}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isCreating}>
+                <Plus size={16} />
+                {isCreating ? 'Creating...' : 'Create and select'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useSearchParams } from 'react-router';
 import { Package, ArrowLeft, Save, Plus, Trash2, Users, MapPin, CalendarClock } from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { FormError } from '../components/FormError';
@@ -27,9 +27,11 @@ import {
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useOrder, useOrders } from '../hooks/useOrders';
-import { useCustomers } from '../hooks/useCustomers';
+import { useCustomer, useCustomers } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { joinPath } from '../utils/navigation';
+import { joinPath, buildCustomerCreatePath } from '../utils/navigation';
+import { CustomerPicker } from '../components/CustomerPicker';
+import type { Customer } from '../types';
 
 /**
  * `<input type="datetime-local">` needs a `YYYY-MM-DDTHH:mm` string in LOCAL
@@ -49,15 +51,25 @@ function toDateTimeLocalValue(date: Date | undefined): string {
 
 export default function CreateOrderPage() {
   const { orderId } = useParams<{ orderId: string }>();
+  const [searchParams] = useSearchParams();
+  const prefilledCustomerId = searchParams.get('customerId')?.trim() || undefined;
   const { basePath, navigate } = useMoveTheWheels();
   const { order } = useOrder(orderId);
   const { createOrder, updateOrder } = useOrders();
-  const { customers } = useCustomers({ limit: 100 });
+  const {
+    customers,
+    createCustomer,
+    isLoading: customersLoading,
+    error: customersError,
+    refetch: refetchCustomers,
+  } = useCustomers({ limit: 100 });
+  const { customer: linkedCustomer } = useCustomer(prefilledCustomerId ?? order?.customerId);
 
   const isEditing = !!orderId && !!order;
 
+  const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null);
   const [formData, setFormData] = useState({
-    customerId: order?.customerId || '',
+    customerId: prefilledCustomerId || order?.customerId || '',
     priority: order?.priority || 'normal',
     pickupAddress: {
       street: order?.pickupAddress.street || '',
@@ -81,6 +93,18 @@ export default function CreateOrderPage() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (!linkedCustomer) {
+      return;
+    }
+    setSelectedCustomer((previous) =>
+      previous?.id === linkedCustomer.id ? previous : linkedCustomer
+    );
+    setFormData((previous) =>
+      previous.customerId ? previous : { ...previous, customerId: linkedCustomer.id }
+    );
+  }, [linkedCustomer]);
+
   // Prefill the form from the loaded order when editing. `order` arrives
   // asynchronously after the initial render, so the useState initializers alone
   // leave the fields blank until this syncs them.
@@ -112,15 +136,24 @@ export default function CreateOrderPage() {
   }, [order]);
 
   const goBack = () => {
-    if (navigate) {
-      navigate(joinPath(basePath, 'orders'));
+    if (!navigate) {
+      return;
+    }
+    if (!isEditing && prefilledCustomerId) {
+      navigate(joinPath(basePath, `customers/${prefilledCustomerId}`));
+      return;
     }
+    navigate(joinPath(basePath, 'orders'));
   };
 
+  const getSelectedCustomer = () =>
+    selectedCustomer ?? customers.find((customer) => customer.id === formData.customerId);
+
   const validate = (): string | null => {
-    const selectedCustomer = customers.find((c) => c.id === formData.customerId);
-    if (!formData.customerId || !selectedCustomer) {
-      return 'Select a customer for this order.';
+    if (!formData.customerId || !getSelectedCustomer()) {
+      return customersError
+        ? 'Customers could not be loaded. Retry or create a customer before continuing.'
+        : 'Select a customer for this order.';
     }
     if (!formData.pickupAddress.street.trim()) {
       return 'Enter a pickup street address.';
@@ -147,9 +180,13 @@ export default function CreateOrderPage() {
       return;
     }
 
-    const selectedCustomer = customers.find((c) => c.id === formData.customerId);
+    const selectedCustomer = getSelectedCustomer();
     if (!selectedCustomer) {
-      setFormError('Select a customer for this order.');
+      setFormError(
+        customersError
+          ? 'Customers could not be loaded. Retry or create a customer before continuing.'
+          : 'Select a customer for this order.'
+      );
       return;
     }
 
@@ -242,6 +279,14 @@ export default function CreateOrderPage() {
     }));
   };
 
+  const goToCustomerCreate = () => {
+    if (!navigate) {
+      return;
+    }
+    const orderPath = isEditing && orderId ? `orders/${orderId}/edit` : 'orders/new';
+    navigate(joinPath(basePath, buildCustomerCreatePath(orderPath)));
+  };
+
   return (
     <PageLayout
       title={isEditing ? 'Edit Order' : 'Create Order'}
@@ -253,7 +298,7 @@ export default function CreateOrderPage() {
             <ArrowLeft size={16} />
             Cancel
           </Button>
-          <Button onClick={handleSubmit} disabled={isSubmitting}>
+          <Button onClick={handleSubmit} disabled={isSubmitting || customersLoading}>
             <Save size={16} />
             {isSubmitting ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Order'}
           </Button>
@@ -304,24 +349,32 @@ export default function CreateOrderPage() {
           <h2 className="text-base font-semibold text-text-primary mb-4">Order Details</h2>
           <div className="space-y-4">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="customer">Customer</Label>
-                <Select
-                  value={formData.customerId}
-                  onValueChange={(value) => updateField('customerId', value)}
-                >
-                  <SelectTrigger id="customer">
-                    <SelectValue placeholder="Select customer" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {customers.map((customer) => (
-                      <SelectItem key={customer.id} value={customer.id}>
-                        {customer.name} ({customer.email})
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
+              <CustomerPicker
+                customers={customers}
+                value={formData.customerId}
+                onValueChange={(value) => {
+                  if (!value) {
+                    return;
+                  }
+                  updateField('customerId', value);
+                  setSelectedCustomer(
+                    customers.find((customer) => customer.id === value) ??
+                      (selectedCustomer?.id === value ? selectedCustomer : null)
+                  );
+                  setFormError(null);
+                }}
+                onCreated={(customer) => {
+                  setSelectedCustomer(customer);
+                  updateField('customerId', customer.id);
+                  setFormError(null);
+                }}
+                createCustomer={createCustomer}
+                isLoading={customersLoading}
+                error={customersError}
+                onRetry={refetchCustomers}
+                onOpenCustomers={goToCustomerCreate}
+                selectedCustomer={selectedCustomer}
+              />
               <div className="space-y-2">
                 <Label htmlFor="priority">Priority</Label>
                 <Select

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useSearchParams } from 'react-router';
 import {
   Users,
   ArrowLeft,
@@ -40,7 +40,7 @@ import { useCustomer, useCustomers } from '../hooks/useCustomers';
 import { useOrders } from '../hooks/useOrders';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatAddress, formatCurrency, formatDate } from '../utils/formatters';
-import { joinPath } from '../utils/navigation';
+import { joinPath, buildOrderCustomerPath, getSafeCustomerReturnPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
 import { Notice, useNotice } from '../components/Notice';
 
@@ -62,6 +62,8 @@ function safeHttpUrl(raw: string | undefined): string | null {
 
 function NewCustomerForm() {
   const { basePath, navigate } = useMoveTheWheels();
+  const [searchParams] = useSearchParams();
+  const returnTo = getSafeCustomerReturnPath(searchParams.get('returnTo'));
   const { createCustomer } = useCustomers();
   const [form, setForm] = useState({
     name: '',
@@ -91,7 +93,10 @@ function NewCustomerForm() {
         phone: form.phone.trim() || undefined,
         company: form.company.trim() || undefined,
       });
-      navigate?.(joinPath(basePath, `customers/${created.id}`));
+      const destination = returnTo
+        ? buildOrderCustomerPath(returnTo, created.id)
+        : `customers/${created.id}`;
+      navigate?.(joinPath(basePath, destination));
     } catch (err) {
       console.error('Failed to create customer:', err);
       setError(err instanceof Error ? err.message : 'Failed to create customer. Please try again.');
@@ -330,7 +335,7 @@ export default function CustomerDetailsPage() {
             label: 'Book a delivery for this customer',
             description: 'Start a new order pre-filled for this account.',
             icon: <FileText size={16} />,
-            onClick: () => goTo('orders/new'),
+            onClick: () => goTo(buildOrderCustomerPath('orders/new', customer.id)),
           },
           {
             id: 'edit',
@@ -475,7 +480,11 @@ export default function CustomerDetailsPage() {
               <CardTitle className="flex items-center gap-2">
                 <Package size={18} /> Orders
               </CardTitle>
-              <Button variant="outline" size="sm" onClick={() => goTo('orders/new')}>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => goTo(buildOrderCustomerPath('orders/new', customer.id))}
+              >
                 <FileText size={14} /> New order
               </Button>
             </CardHeader>
@@ -508,7 +517,7 @@ export default function CustomerDetailsPage() {
                   <p className="text-text-secondary">No orders yet for this customer</p>
                   <button
                     type="button"
-                    onClick={() => goTo('orders/new')}
+                    onClick={() => goTo(buildOrderCustomerPath('orders/new', customer.id))}
                     className="mt-1 text-sm text-primary hover:underline"
                   >
                     Book their first delivery

package/src/movethewheels/utils/navigation.ts

@@ -68,3 +68,35 @@ export function parseQueryParams(search: string): Record<string, string> {
   });
   return params;
 }
+
+const CUSTOMER_RETURN_PATHS = [/^orders\/new$/, /^orders\/[^/?#]+\/edit$/];
+
+/**
+ * Return only an internal order destination for customer create-and-return flows.
+ * Query strings are intentionally discarded so callers cannot smuggle a second
+ * return target or an open redirect through the customer form.
+ */
+export function getSafeCustomerReturnPath(value: string | null | undefined): string | null {
+  if (!value || value.length > 200 || value.includes('://') || value.startsWith('/')) {
+    return null;
+  }
+
+  const [pathname] = value.split(/[?#]/, 1);
+  return CUSTOMER_RETURN_PATHS.some((pattern) => pattern.test(pathname)) ? pathname : null;
+}
+
+/**
+ * Build an order route with a customer preselected after a customer is created.
+ */
+export function buildOrderCustomerPath(orderPath: string, customerId: string): string {
+  const safeOrderPath = getSafeCustomerReturnPath(orderPath);
+  return safeOrderPath ? buildUrl(safeOrderPath, { customerId }) : orderPath;
+}
+
+/**
+ * Build the local customer creation route while preserving a safe order return path.
+ */
+export function buildCustomerCreatePath(orderPath: string): string {
+  const safeOrderPath = getSafeCustomerReturnPath(orderPath);
+  return safeOrderPath ? buildUrl('customers/new', { returnTo: safeOrderPath }) : 'customers/new';
+}