@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.2

package/src/movethewheels/pages/WarehouseDetailsPage.tsx

@@ -2,8 +2,9 @@
  * Warehouse Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Warehouse, ArrowLeft, Edit, MapPin, Clock, Users, Box } from 'lucide-react';
+import { Warehouse, ArrowLeft, Edit, MapPin, Clock, Users, Box, Save } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import {
   Card,
@@ -13,12 +14,232 @@ import {
   Button,
   Badge,
   Progress,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useWarehouse } from '../hooks/useInventory';
+import { useWarehouse, useInventory } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatAddress } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { FormError } from '../components/FormError';
+
+const WAREHOUSE_TYPE_OPTIONS = [
+  { value: 'DISTRIBUTION', label: 'Distribution' },
+  { value: 'FULFILLMENT', label: 'Fulfillment' },
+  { value: 'COLD_STORAGE', label: 'Cold Storage' },
+  { value: 'CROSS_DOCK', label: 'Cross-Dock' },
+  { value: 'RETAIL', label: 'Retail' },
+];
+
+function NewWarehouseForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createWarehouse } = useInventory();
+  const [form, setForm] = useState({
+    code: '',
+    name: '',
+    type: 'DISTRIBUTION',
+    street: '',
+    city: '',
+    state: '',
+    postalCode: '',
+    country: 'USA',
+    totalCapacity: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'inventory/warehouses'));
+
+  const update = (field: keyof typeof form, value: string) =>
+    setForm((prev) => ({ ...prev, [field]: value }));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.code.trim() || !form.name.trim()) {
+      setError('Warehouse code and name are required.');
+      return;
+    }
+    if (!form.street.trim() || !form.city.trim()) {
+      setError('A street and city are required for the warehouse address.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const totalCapacity = form.totalCapacity.trim() ? Number(form.totalCapacity) : undefined;
+      const created = await createWarehouse({
+        code: form.code.trim(),
+        name: form.name.trim(),
+        type: form.type,
+        address: {
+          street: form.street.trim(),
+          city: form.city.trim(),
+          state: form.state.trim(),
+          postalCode: form.postalCode.trim(),
+          country: form.country.trim(),
+        },
+        totalCapacity:
+          totalCapacity !== undefined && !Number.isNaN(totalCapacity) ? totalCapacity : undefined,
+      });
+      navigate?.(joinPath(basePath, `inventory/warehouses/${created.id}`));
+    } catch (err) {
+      console.error('Failed to create warehouse:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create warehouse. Please try again.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Add Warehouse"
+      subtitle="Register a storage and fulfilment site"
+      icon={<Warehouse size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack} disabled={submitting}>
+            <ArrowLeft size={16} /> Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={submitting}>
+            <Save size={16} /> {submitting ? 'Saving...' : 'Add Warehouse'}
+          </Button>
+        </div>
+      }
+    >
+      <PagePurpose icon={<Warehouse size={18} />}>
+        Add a warehouse so you can store inventory and fulfil orders from it. A code, name, type and
+        location get it on the network — set a total capacity to track utilization.
+      </PagePurpose>
+
+      <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
+        <FormError message={error} />
+        <EmphasisPanel>
+          <h2 className="text-base font-semibold text-text-primary mb-4">Warehouse Details</h2>
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="code">
+                  Code <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="code"
+                  value={form.code}
+                  onChange={(e) => update('code', e.target.value)}
+                  placeholder="WH-SF-01"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="name">
+                  Name <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="name"
+                  value={form.name}
+                  onChange={(e) => update('name', e.target.value)}
+                  placeholder="San Francisco DC"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="type">
+                  Type <span className="text-status-error-text">*</span>
+                </Label>
+                <Select value={form.type} onValueChange={(value) => update('type', value)}>
+                  <SelectTrigger id="type">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {WAREHOUSE_TYPE_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="totalCapacity">Total Capacity (sq ft)</Label>
+              <Input
+                id="totalCapacity"
+                type="number"
+                min="0"
+                value={form.totalCapacity}
+                onChange={(e) => update('totalCapacity', e.target.value)}
+                placeholder="50000"
+              />
+            </div>
+          </div>
+        </EmphasisPanel>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MapPin size={18} /> Address <span className="text-status-error-text">*</span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="street">Street</Label>
+              <Input
+                id="street"
+                value={form.street}
+                onChange={(e) => update('street', e.target.value)}
+                placeholder="500 Industrial Way"
+              />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="city">City</Label>
+                <Input
+                  id="city"
+                  value={form.city}
+                  onChange={(e) => update('city', e.target.value)}
+                  placeholder="San Francisco"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="state">State</Label>
+                <Input
+                  id="state"
+                  value={form.state}
+                  onChange={(e) => update('state', e.target.value)}
+                  placeholder="CA"
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="postalCode">ZIP / Postal Code</Label>
+                <Input
+                  id="postalCode"
+                  value={form.postalCode}
+                  onChange={(e) => update('postalCode', e.target.value)}
+                  placeholder="94103"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="country">Country</Label>
+                <Input
+                  id="country"
+                  value={form.country}
+                  onChange={(e) => update('country', e.target.value)}
+                  placeholder="USA"
+                />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function WarehouseDetailsPage() {
   const { warehouseId } = useParams<{ warehouseId: string }>();
@@ -28,6 +249,7 @@ export default function WarehouseDetailsPage() {
   const goBack = () => navigate?.(joinPath(basePath, 'inventory/warehouses'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  if (!warehouseId) return <NewWarehouseForm />;
   if (isLoading) return <LoadingState message="Loading warehouse details..." />;
   if (error || !warehouse) return <ErrorState title="Warehouse not found" onRetry={refetch} />;
 

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -99,7 +99,11 @@ export default function WarehousesPage() {
       icon={<Warehouse size={24} />}
       headerActions={
         <CTAOverflowMenu
-          primary={{ label: 'Add Warehouse', icon: <Plus size={16} />, onSelect: () => {} }}
+          primary={{
+            label: 'Add Warehouse',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('inventory/warehouses/new'),
+          }}
           actions={[{ label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() }]}
         />
       }

package/src/movethewheels/providers/MoveTheWheelsProvider.tsx

@@ -8,6 +8,7 @@
 import { createContext, useContext, useMemo, type FC, type PropsWithChildren } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import type { MoveTheWheelsRootProps, MoveTheWheelsContextValue } from '../types';
+import { joinPath } from '../utils/navigation';
 
 const MoveTheWheelsContext = createContext<MoveTheWheelsContextValue | null>(null);
 
@@ -54,13 +55,13 @@ export function useMoveTheWheelsNavigate(): (path: string) => void {
   const { navigate, basePath } = useMoveTheWheels();
 
   return (path: string) => {
-    // If path is absolute (starts with /), use it directly
-    // Otherwise, prepend basePath
-    if (path.startsWith('/')) {
+    // Genuine external URLs (http/https or protocol-relative) pass through
+    // untouched. Everything else is an in-app path and MUST be resolved against
+    // basePath — otherwise a leading "/" would escape the microfrontend mount.
+    if (/^(https?:)?\/\//i.test(path)) {
       navigate(path);
-    } else {
-      const cleanBase = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;
-      navigate(`${cleanBase}/${path}`);
+      return;
     }
+    navigate(joinPath(basePath, path));
   };
 }

package/src/movethewheels/store/movethewheelsStore.ts

@@ -2,7 +2,7 @@
  * MoveTheWheels Zustand Store
  *
  * Manages UI state for the microfrontend.
- * Server/entity data comes from hooks with mock data (ready for GraphQL replacement).
+ * Server/entity data comes from hooks that query the live backend via GraphQL.
  */
 
 import { create } from 'zustand';

package/dist/AnalyticsPage-CCLfHgQZ.js

@@ -1,212 +0,0 @@
-import { M as e, d as t, f as n, g as r, h as i, i as a } from "./PageLayout-D3N8MCTm.js";
-import { t as o } from "./chart-column-D1Ym15-S.js";
-import { t as s } from "./dollar-sign-IB4O0wuQ.js";
-import { t as c } from "./package-BE7U0wQE.js";
-import { t as l } from "./trending-up-C-85AwGT.js";
-import { t as u } from "./truck-CtDjNFbi.js";
-import { t as d } from "./users-g2N0eL-Z.js";
-import { i as f, r as p, t as m } from "./useAnalytics-ph7eTIK6.js";
-import { r as h, t as g } from "./MetricCard-B7yMyvMX.js";
-import { n as _ } from "./formatters-_vJlC-47.js";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { EmphasisPanel as b, PagePurpose as x } from "@burdenoff/fe-libs/ui";
-//#region src/movethewheels/pages/AnalyticsPage.tsx
-function S() {
-	let { analytics: S } = m(), { orderData: C } = f(), { fleetData: w } = p();
-	return /* @__PURE__ */ y(a, {
-		title: "Analytics",
-		subtitle: "Business performance and insights",
-		icon: /* @__PURE__ */ v(o, { size: 24 }),
-		children: [
-			/* @__PURE__ */ v(x, {
-				icon: /* @__PURE__ */ v(o, { size: 18 }),
-				children: "See how the operation is really performing. Track order volume, revenue, on-time rate and customer satisfaction over time so you can spot trends, find bottlenecks, and decide where to invest — whether that's more vehicles, better routes, or new customers."
-			}),
-			/* @__PURE__ */ y(h, {
-				columns: 5,
-				children: [
-					/* @__PURE__ */ v(g, {
-						label: "Total Orders",
-						value: S.overview.totalOrders.toLocaleString(),
-						icon: /* @__PURE__ */ v(c, { size: 20 }),
-						change: "+8.2%",
-						changeType: "positive",
-						trend: "up"
-					}),
-					/* @__PURE__ */ v(g, {
-						treatment: "glass",
-						glow: !0,
-						label: "Revenue",
-						value: _(S.overview.totalRevenue),
-						icon: /* @__PURE__ */ v(s, { size: 20 }),
-						change: "+12.5%",
-						changeType: "positive",
-						trend: "up"
-					}),
-					/* @__PURE__ */ v(g, {
-						label: "Active Vehicles",
-						value: S.overview.activeVehicles,
-						icon: /* @__PURE__ */ v(u, { size: 20 })
-					}),
-					/* @__PURE__ */ v(g, {
-						label: "On-Time Rate",
-						value: `${S.overview.onTimeDeliveryRate}%`,
-						icon: /* @__PURE__ */ v(l, { size: 20 }),
-						changeType: S.overview.onTimeDeliveryRate >= 90 ? "positive" : "negative"
-					}),
-					/* @__PURE__ */ v(g, {
-						label: "Satisfaction",
-						value: S.overview.customerSatisfaction.toFixed(1),
-						icon: /* @__PURE__ */ v(d, { size: 20 }),
-						subtitle: "out of 5"
-					})
-				]
-			}),
-			/* @__PURE__ */ y("div", {
-				className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-				children: [/* @__PURE__ */ y(t, { children: [/* @__PURE__ */ v(i, { children: /* @__PURE__ */ v(r, { children: "Order Trends" }) }), /* @__PURE__ */ y(n, { children: [/* @__PURE__ */ v("div", {
-					className: "h-64 flex items-center justify-center bg-bg-sunken/50 rounded-lg",
-					children: /* @__PURE__ */ y("div", {
-						className: "text-center text-text-secondary",
-						children: [
-							/* @__PURE__ */ v(o, {
-								size: 48,
-								className: "mx-auto mb-2 opacity-50"
-							}),
-							/* @__PURE__ */ v("p", { children: "Order trend chart" }),
-							/* @__PURE__ */ v("p", {
-								className: "text-xs",
-								children: "(Chart library integration needed)"
-							})
-						]
-					})
-				}), /* @__PURE__ */ v("div", {
-					className: "mt-4 grid grid-cols-4 gap-2",
-					children: C.trends.slice(-4).map((e) => /* @__PURE__ */ y("div", {
-						className: "text-center p-2 bg-bg-sunken/50 rounded",
-						children: [/* @__PURE__ */ v("p", {
-							className: "text-xs text-text-secondary",
-							children: e.date.split("-").slice(1).join("/")
-						}), /* @__PURE__ */ v("p", {
-							className: "font-medium",
-							children: e.orders
-						})]
-					}, e.date))
-				})] })] }), /* @__PURE__ */ y(t, { children: [/* @__PURE__ */ v(i, { children: /* @__PURE__ */ v(r, { children: "Revenue Trends" }) }), /* @__PURE__ */ y(n, { children: [/* @__PURE__ */ v("div", {
-					className: "h-64 flex items-center justify-center bg-bg-sunken/50 rounded-lg",
-					children: /* @__PURE__ */ y("div", {
-						className: "text-center text-text-secondary",
-						children: [/* @__PURE__ */ v(l, {
-							size: 48,
-							className: "mx-auto mb-2 opacity-50"
-						}), /* @__PURE__ */ v("p", { children: "Revenue trend chart" })]
-					})
-				}), /* @__PURE__ */ v("div", {
-					className: "mt-4 grid grid-cols-5 gap-2",
-					children: S.trends.revenue.map((e) => /* @__PURE__ */ y("div", {
-						className: "text-center p-2 bg-bg-sunken/50 rounded",
-						children: [/* @__PURE__ */ v("p", {
-							className: "text-xs text-text-secondary",
-							children: e.month
-						}), /* @__PURE__ */ y("p", {
-							className: "font-medium text-sm",
-							children: [_(e.revenue / 1e3), "k"]
-						})]
-					}, e.month))
-				})] })] })]
-			}),
-			/* @__PURE__ */ y("div", {
-				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [
-					/* @__PURE__ */ y(t, { children: [/* @__PURE__ */ v(i, { children: /* @__PURE__ */ v(r, { children: "Orders by Status" }) }), /* @__PURE__ */ v(n, {
-						className: "space-y-3",
-						children: C.byStatus.filter((e) => e.count > 0).map(({ status: t, count: n }) => /* @__PURE__ */ y("div", {
-							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ v("span", {
-								className: "text-sm capitalize",
-								children: t.replace("_", " ")
-							}), /* @__PURE__ */ y("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ v(e, {
-									value: n / S.overview.totalOrders * 100,
-									className: "w-20 h-2"
-								}), /* @__PURE__ */ v("span", {
-									className: "font-medium w-8 text-right",
-									children: n
-								})]
-							})]
-						}, t))
-					})] }),
-					/* @__PURE__ */ y(t, { children: [/* @__PURE__ */ v(i, { children: /* @__PURE__ */ v(r, { children: "Fleet Performance" }) }), /* @__PURE__ */ y(n, {
-						className: "space-y-4",
-						children: [
-							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("div", {
-								className: "flex justify-between text-sm mb-1",
-								children: [/* @__PURE__ */ v("span", { children: "Vehicle Utilization" }), /* @__PURE__ */ y("span", { children: [w.vehicleUtilization.toFixed(0), "%"] })]
-							}), /* @__PURE__ */ v(e, { value: w.vehicleUtilization })] }),
-							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("div", {
-								className: "flex justify-between text-sm mb-1",
-								children: [/* @__PURE__ */ v("span", { children: "Avg Fuel Level" }), /* @__PURE__ */ y("span", { children: [w.avgFuelLevel.toFixed(0), "%"] })]
-							}), /* @__PURE__ */ v(e, { value: w.avgFuelLevel })] }),
-							/* @__PURE__ */ y("div", {
-								className: "pt-2",
-								children: [/* @__PURE__ */ v("p", {
-									className: "text-sm text-text-secondary mb-2",
-									children: "Vehicles by Type"
-								}), w.vehiclesByType.map(({ type: e, count: t }) => /* @__PURE__ */ y("div", {
-									className: "flex justify-between text-sm py-1",
-									children: [/* @__PURE__ */ v("span", {
-										className: "capitalize",
-										children: e
-									}), /* @__PURE__ */ v("span", {
-										className: "font-medium",
-										children: t
-									})]
-								}, e))]
-							})
-						]
-					})] }),
-					/* @__PURE__ */ y(b, {
-						className: "space-y-4",
-						children: [
-							/* @__PURE__ */ v("h2", {
-								className: "text-base font-semibold text-text-primary",
-								children: "Performance Metrics"
-							}),
-							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-								className: "text-sm text-text-secondary",
-								children: "On-Time Pickup"
-							}), /* @__PURE__ */ y("p", {
-								className: "text-2xl font-bold",
-								children: [S.performance.onTimePickup, "%"]
-							})] }),
-							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-								className: "text-sm text-text-secondary",
-								children: "On-Time Delivery"
-							}), /* @__PURE__ */ y("p", {
-								className: "text-2xl font-bold",
-								children: [S.performance.onTimeDelivery, "%"]
-							})] }),
-							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-								className: "text-sm text-text-secondary",
-								children: "Damaged Items"
-							}), /* @__PURE__ */ y("p", {
-								className: "text-2xl font-bold text-status-success-text",
-								children: [S.performance.damagedItems, "%"]
-							})] }),
-							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-								className: "text-sm text-text-secondary",
-								children: "Driver Ratings"
-							}), /* @__PURE__ */ y("p", {
-								className: "text-2xl font-bold",
-								children: [S.performance.driverRatings, "/5"]
-							})] })
-						]
-					})
-				]
-			})
-		]
-	});
-}
-//#endregion
-export { S as default };