@burdenoff/microfe-movethewheels 2026.930.2 → 2026.930.4

package/dist/pages/RouteDetailsPage.js

@@ -180,7 +180,7 @@ function G({ editId: r }) {
 		}),
 		children: [/* @__PURE__ */ B(ye, {
 			icon: /* @__PURE__ */ B(o, { size: 18 }),
-			children: "Plan a new delivery route — name it, list the stops to visit, and optionally assign a vehicle and driver. Once created you can optimize it to sequence the stops into the shortest run."
+			children: "Plan a new delivery route — name it, list the stops to visit, and optionally assign a vehicle and driver. Once created you can optimize it to sequence the stops into the shortest run. Optimizing also marks the route In Progress."
 		}), /* @__PURE__ */ V("form", {
 			onSubmit: $,
 			className: "max-w-3xl space-y-6",
@@ -459,7 +459,7 @@ function K() {
 					children: [
 						/* @__PURE__ */ B(d, { size: 16 }),
 						" ",
-						W ? "Optimizing…" : "Optimize"
+						W ? "Optimizing…" : "Optimize & start"
 					]
 				}),
 				/* @__PURE__ */ V(_, {
@@ -488,8 +488,8 @@ function K() {
 				steps: [
 					...m.optimized ? [] : [{
 						id: "optimize",
-						label: "Optimize this route",
-						description: "Reorder stops to cut distance and driving time.",
+						label: "Optimize & start this route",
+						description: "Reorder stops to cut distance and driving time, then mark the route In Progress.",
 						icon: /* @__PURE__ */ B(d, { size: 16 }),
 						onClick: Ee
 					}],

package/package.json

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

package/src/movethewheels/components/StockActionDialogs.tsx

@@ -0,0 +1,512 @@
+/**
+ * Stock movement dialogs — receive, adjust and transfer inventory.
+ *
+ * Every product/warehouse choice is a searchable, server-paginated
+ * `EntityCombobox`, so an operator never has to leave the page to look a record
+ * up. Writes go through `useStockActions`, which re-reads the stock line first
+ * and lets the service record the matching ledger entries atomically.
+ */
+import { useEffect, useState } from 'react';
+import {
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+} from '@burdenoff/fe-libs/ui';
+import { Button, Input, Label } from './ui';
+import { EntityCombobox } from './EntityCombobox';
+import { FormError } from './FormError';
+import {
+  useProduct,
+  useProducts,
+  useStockActions,
+  useWarehouse,
+  useWarehouses,
+} from '../hooks/useInventory';
+
+/** The stock line an adjust/transfer acts on (a row of the stock position table). */
+export interface StockLineTarget {
+  id: string;
+  productName: string;
+  sku: string;
+  warehouseId: string;
+  warehouseName: string;
+  onHand: number;
+  available: number;
+}
+
+interface DialogBaseProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Called after a successful write with a short human-readable summary. */
+  onDone: (message: string) => void;
+}
+
+function parseWholeNumber(raw: string): number | null {
+  const trimmed = raw.trim();
+  if (!/^[+-]?\d+$/.test(trimmed)) return null;
+  const value = Number(trimmed);
+  return Number.isSafeInteger(value) ? value : null;
+}
+
+function errorMessage(error: unknown, fallback: string): string {
+  return error instanceof Error && error.message ? error.message : fallback;
+}
+
+function ProductPicker({
+  id,
+  value,
+  onChange,
+  error,
+}: {
+  id: string;
+  value: string;
+  onChange: (id: string) => void;
+  error?: string;
+}) {
+  const [search, setSearch] = useState('');
+  const { products, totalProducts, hasMore, isLoading, isLoadingMore, loadMore } = useProducts({
+    search,
+    limit: 20,
+  });
+  const { product: selected, isLoading: selectedLoading } = useProduct(value || undefined);
+
+  return (
+    <EntityCombobox
+      id={id}
+      value={value}
+      onChange={onChange}
+      options={products}
+      loading={isLoading}
+      required
+      getId={(product) => product.id}
+      getLabel={(product) => `${product.name} (${product.sku})`}
+      renderOption={(product) => (
+        <>
+          {product.name} <span className="text-text-tertiary">({product.sku})</span>
+        </>
+      )}
+      selectedOption={selected}
+      selectedLoading={selectedLoading}
+      placeholder="Search your product catalog"
+      searchPlaceholder="Search by name or SKU…"
+      emptyText="No products found."
+      onSearchChange={setSearch}
+      hasMore={hasMore}
+      totalCount={totalProducts}
+      onLoadMore={loadMore}
+      loadingMore={isLoadingMore}
+      error={error}
+    />
+  );
+}
+
+function WarehousePicker({
+  id,
+  value,
+  onChange,
+  excludeId,
+  error,
+}: {
+  id: string;
+  value: string;
+  onChange: (id: string) => void;
+  /** Hidden from the options (e.g. the transfer source). */
+  excludeId?: string;
+  error?: string;
+}) {
+  const [search, setSearch] = useState('');
+  const { warehouses, totalWarehouses, hasMore, isLoading, isLoadingMore, loadMore } =
+    useWarehouses({ search, limit: 20 });
+  const { warehouse: selected, isLoading: selectedLoading } = useWarehouse(value || undefined);
+  const options = excludeId
+    ? warehouses.filter((warehouse) => warehouse.id !== excludeId)
+    : warehouses;
+
+  return (
+    <EntityCombobox
+      id={id}
+      value={value}
+      onChange={onChange}
+      options={options}
+      loading={isLoading}
+      required
+      getId={(warehouse) => warehouse.id}
+      getLabel={(warehouse) => `${warehouse.name} (${warehouse.code})`}
+      renderOption={(warehouse) => (
+        <>
+          {warehouse.name} <span className="text-text-tertiary">({warehouse.code})</span>
+        </>
+      )}
+      selectedOption={selected}
+      selectedLoading={selectedLoading}
+      placeholder="Search warehouses"
+      searchPlaceholder="Search by name or code…"
+      emptyText="No warehouses found."
+      onSearchChange={setSearch}
+      hasMore={hasMore}
+      totalCount={totalWarehouses}
+      onLoadMore={loadMore}
+      loadingMore={isLoadingMore}
+      error={error}
+    />
+  );
+}
+
+function DialogActions({
+  submitting,
+  submitLabel,
+  submittingLabel,
+  onCancel,
+  onSubmit,
+}: {
+  submitting: boolean;
+  submitLabel: string;
+  submittingLabel: string;
+  onCancel: () => void;
+  onSubmit: () => void;
+}) {
+  return (
+    <ResponsiveDialogFooter>
+      <Button variant="outline" onClick={onCancel} disabled={submitting}>
+        Cancel
+      </Button>
+      <Button onClick={onSubmit} disabled={submitting}>
+        {submitting ? submittingLabel : submitLabel}
+      </Button>
+    </ResponsiveDialogFooter>
+  );
+}
+
+export function ReceiveStockDialog({ open, onOpenChange, onDone }: DialogBaseProps) {
+  const { receiveStock } = useStockActions();
+  const [productId, setProductId] = useState('');
+  const [warehouseId, setWarehouseId] = useState('');
+  const [quantity, setQuantity] = useState('');
+  const [reorderPoint, setReorderPoint] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setProductId('');
+    setWarehouseId('');
+    setQuantity('');
+    setReorderPoint('');
+    setError(null);
+    setSubmitting(false);
+  }, [open]);
+
+  const handleSubmit = async () => {
+    const units = parseWholeNumber(quantity);
+    const reorder = reorderPoint.trim() === '' ? null : parseWholeNumber(reorderPoint);
+    if (!productId) return setError('Choose the product you received.');
+    if (!warehouseId) return setError('Choose the warehouse it was received into.');
+    if (units === null || units <= 0)
+      return setError('Quantity must be a whole number above zero.');
+    if (reorder !== null && reorder < 0) {
+      return setError('Reorder point must be zero or more.');
+    }
+    if (reorderPoint.trim() !== '' && reorder === null) {
+      return setError('Reorder point must be a whole number.');
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const line = await receiveStock({
+        productId,
+        warehouseId,
+        quantity: units,
+        reorderPoint: reorder,
+      });
+      onOpenChange(false);
+      onDone(
+        `Received ${units.toLocaleString()} unit(s) — ${line.productName ?? 'product'} now has ${line.quantity.toLocaleString()} on hand at ${line.warehouseName ?? 'the warehouse'}.`
+      );
+    } catch (err) {
+      setError(errorMessage(err, 'Failed to receive stock.'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
+      <ResponsiveDialogContent>
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>Receive stock</ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            Add units of a product to a warehouse. If the warehouse already stocks it, the units are
+            added to that line; otherwise a new stock line is created.
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
+        <div className="space-y-4 px-1">
+          <div className="space-y-2">
+            <Label htmlFor="receive-product">Product *</Label>
+            <ProductPicker id="receive-product" value={productId} onChange={setProductId} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="receive-warehouse">Warehouse *</Label>
+            <WarehousePicker id="receive-warehouse" value={warehouseId} onChange={setWarehouseId} />
+          </div>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="receive-quantity">Quantity received *</Label>
+              <Input
+                id="receive-quantity"
+                type="number"
+                inputMode="numeric"
+                min={1}
+                step={1}
+                value={quantity}
+                onChange={(e) => setQuantity(e.target.value)}
+                placeholder="e.g. 50"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="receive-reorder">Reorder point (optional)</Label>
+              <Input
+                id="receive-reorder"
+                type="number"
+                inputMode="numeric"
+                min={0}
+                step={1}
+                value={reorderPoint}
+                onChange={(e) => setReorderPoint(e.target.value)}
+                placeholder="Low-stock threshold"
+              />
+              <p className="text-xs text-text-secondary">
+                Only used when this creates a new stock line.
+              </p>
+            </div>
+          </div>
+          <FormError message={error} />
+        </div>
+        <DialogActions
+          submitting={submitting}
+          submitLabel="Receive stock"
+          submittingLabel="Receiving…"
+          onCancel={() => onOpenChange(false)}
+          onSubmit={handleSubmit}
+        />
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+}
+
+export function AdjustStockDialog({
+  line,
+  open,
+  onOpenChange,
+  onDone,
+}: DialogBaseProps & { line: StockLineTarget | null }) {
+  const { adjustStock } = useStockActions();
+  const [change, setChange] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setChange('');
+    setError(null);
+    setSubmitting(false);
+  }, [open, line?.id]);
+
+  const delta = parseWholeNumber(change);
+  const preview =
+    line && delta !== null && delta !== 0
+      ? { onHand: line.onHand + delta, available: line.available + delta }
+      : null;
+  const previewInvalid = preview !== null && (preview.onHand < 0 || preview.available < 0);
+
+  const handleSubmit = async () => {
+    if (!line) return;
+    if (delta === null || delta === 0) {
+      return setError('Enter a whole-number change other than zero, e.g. 10 or -3.');
+    }
+    if (previewInvalid) {
+      return setError(`Only ${line.available.toLocaleString()} unit(s) are available to remove.`);
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const updated = await adjustStock(line.id, delta);
+      onOpenChange(false);
+      onDone(
+        `Adjusted ${line.productName} at ${line.warehouseName} by ${delta > 0 ? '+' : ''}${delta.toLocaleString()} — now ${updated.quantity.toLocaleString()} on hand.`
+      );
+    } catch (err) {
+      setError(errorMessage(err, 'Failed to adjust stock.'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
+      <ResponsiveDialogContent>
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>Adjust stock</ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            {line
+              ? `${line.productName} (${line.sku}) at ${line.warehouseName}. Use a positive number to add units and a negative one to remove them, e.g. after a count or write-off.`
+              : 'Choose a stock line to adjust.'}
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
+        {line && (
+          <div className="space-y-4 px-1">
+            <dl className="grid grid-cols-2 gap-3 text-sm">
+              <div>
+                <dt className="text-text-secondary">On hand</dt>
+                <dd className="font-medium">{line.onHand.toLocaleString()}</dd>
+              </div>
+              <div>
+                <dt className="text-text-secondary">Available</dt>
+                <dd className="font-medium">{line.available.toLocaleString()}</dd>
+              </div>
+            </dl>
+            <div className="space-y-2">
+              <Label htmlFor="adjust-change">Change (units) *</Label>
+              <Input
+                id="adjust-change"
+                type="number"
+                inputMode="numeric"
+                step={1}
+                value={change}
+                onChange={(e) => setChange(e.target.value)}
+                placeholder="e.g. 10 or -3"
+              />
+              {preview && (
+                <p
+                  className={`text-xs ${previewInvalid ? 'text-status-error-text' : 'text-text-secondary'}`}
+                >
+                  {previewInvalid
+                    ? 'This would take stock below zero.'
+                    : `After this: ${preview.onHand.toLocaleString()} on hand, ${preview.available.toLocaleString()} available.`}
+                </p>
+              )}
+            </div>
+            <FormError message={error} />
+          </div>
+        )}
+        <DialogActions
+          submitting={submitting}
+          submitLabel="Apply adjustment"
+          submittingLabel="Applying…"
+          onCancel={() => onOpenChange(false)}
+          onSubmit={handleSubmit}
+        />
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+}
+
+export function TransferStockDialog({
+  line,
+  open,
+  onOpenChange,
+  onDone,
+}: DialogBaseProps & { line: StockLineTarget | null }) {
+  const { transferStock } = useStockActions();
+  const [destinationId, setDestinationId] = useState('');
+  const [quantity, setQuantity] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setDestinationId('');
+    setQuantity('');
+    setError(null);
+    setSubmitting(false);
+  }, [open, line?.id]);
+
+  const handleSubmit = async () => {
+    if (!line) return;
+    const units = parseWholeNumber(quantity);
+    if (!destinationId) return setError('Choose the destination warehouse.');
+    if (destinationId === line.warehouseId) {
+      return setError('Source and destination warehouses must be different.');
+    }
+    if (units === null || units <= 0)
+      return setError('Quantity must be a whole number above zero.');
+    if (units > line.available) {
+      return setError(`Only ${line.available.toLocaleString()} unit(s) are available to transfer.`);
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const result = await transferStock({
+        sourceInventoryId: line.id,
+        destinationWarehouseId: destinationId,
+        quantity: units,
+      });
+      onOpenChange(false);
+      onDone(
+        `Transferred ${units.toLocaleString()} unit(s) of ${line.productName} from ${line.warehouseName} to ${result.destination.warehouseName ?? 'the destination'}.`
+      );
+    } catch (err) {
+      setError(errorMessage(err, 'Failed to transfer stock.'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
+      <ResponsiveDialogContent>
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>Transfer stock</ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            {line
+              ? `Move available ${line.productName} (${line.sku}) out of ${line.warehouseName}. Both warehouses are updated together.`
+              : 'Choose a stock line to transfer.'}
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
+        {line && (
+          <div className="space-y-4 px-1">
+            <p className="text-sm text-text-secondary">
+              Available to transfer:{' '}
+              <span className="font-medium text-text-primary">
+                {line.available.toLocaleString()}
+              </span>
+            </p>
+            <div className="space-y-2">
+              <Label htmlFor="transfer-destination">Destination warehouse *</Label>
+              <WarehousePicker
+                id="transfer-destination"
+                value={destinationId}
+                onChange={setDestinationId}
+                excludeId={line.warehouseId}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="transfer-quantity">Quantity *</Label>
+              <Input
+                id="transfer-quantity"
+                type="number"
+                inputMode="numeric"
+                min={1}
+                max={line.available}
+                step={1}
+                value={quantity}
+                onChange={(e) => setQuantity(e.target.value)}
+                placeholder="Units to move"
+              />
+            </div>
+            <FormError message={error} />
+          </div>
+        )}
+        <DialogActions
+          submitting={submitting}
+          submitLabel="Transfer stock"
+          submittingLabel="Transferring…"
+          onCancel={() => onOpenChange(false)}
+          onSubmit={handleSubmit}
+        />
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+}

package/src/movethewheels/hooks/index.ts

@@ -33,10 +33,13 @@ export {
   useWarehouse,
   useInventoryStats,
   useInventoryTransactions,
+  useStockActions,
   type InventoryStats,
   type InventoryTransaction,
   type InventoryTransactionType,
   type ProductStockLevel,
+  type ReceiveStockInput,
+  type TransferStockInput,
 } from './useInventory';
 
 // Customers

package/src/movethewheels/hooks/useFleet.ts

@@ -75,6 +75,7 @@ interface UseFleetResult {
   updateVehicle: (id: string, input: CreateVehicleInput) => Promise<Vehicle>;
   updateDriver: (id: string, input: UpdateDriverInput) => Promise<Driver>;
   deleteVehicle: (id: string) => Promise<void>;
+  deleteDriver: (id: string) => Promise<void>;
 }
 
 export interface ApiVehicle {
@@ -256,6 +257,12 @@ const GET_DRIVER_QUERY = `
   }
 `;
 
+const DELETE_DRIVER_MUTATION = `
+  mutation DeleteDriver($id: ID!) {
+    deleteDriver(id: $id)
+  }
+`;
+
 const DELETE_VEHICLE_MUTATION = `
   mutation DeleteVehicle($id: ID!) {
     deleteVehicle(id: $id)
@@ -891,6 +898,16 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     [graphQLOptions]
   );
 
+  const deleteDriver = useCallback(
+    async (id: string): Promise<void> => {
+      await executeGraphQL<{ deleteDriver: boolean }>(graphQLOptions, DELETE_DRIVER_MUTATION, {
+        id,
+      });
+      setDrivers((previous) => previous.filter((item) => item.id !== id));
+    },
+    [graphQLOptions]
+  );
+
   return {
     vehicles,
     drivers,
@@ -904,6 +921,7 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     updateVehicle,
     updateDriver,
     deleteVehicle,
+    deleteDriver,
   };
 }