@burdenoff/microfe-movethewheels 2026.1026.3 → 2026.1028.1

package/dist/components/ProofOfDeliveryCard.js

@@ -110,7 +110,7 @@ function g({ deliveryJobId: o }) {
 				className: "text-xs text-text-secondary mb-1",
 				children: ["Signature ", g.signatureType === "typed" ? "(typed)" : "(drawn)"]
 			}), g.signatureType === "drawn" ? /* @__PURE__ */ p("div", {
-				className: "border rounded-lg p-2 inline-block bg-white",
+				className: "border rounded-lg p-2 inline-block bg-bg-surface",
 				children: /* @__PURE__ */ p("img", {
 					src: g.signatureData,
 					alt: "Recipient signature",

package/dist/components/UpcomingDemandPanel.js

@@ -154,7 +154,7 @@ function v({ rows: e }) {
 		}) : /* @__PURE__ */ l("ul", {
 			className: "space-y-2",
 			children: e.map((e) => {
-				let t = e.volumeVariance > 0, i = t ? r : n, a = t ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400";
+				let t = e.volumeVariance > 0, i = t ? r : n, a = t ? "text-status-success-text" : "text-status-error-text";
 				return /* @__PURE__ */ u("li", {
 					className: "flex items-center justify-between text-sm",
 					children: [/* @__PURE__ */ u("span", {

package/dist/pages/ContainersPage.js

@@ -58,7 +58,7 @@ function S({ access: n }) {
 			}),
 			q && /* @__PURE__ */ p("p", {
 				role: "alert",
-				className: "mb-4 rounded-md border border-red-400 p-3",
+				className: "mb-4 rounded-md border border-status-error-border p-3",
 				children: q
 			}),
 			Y && /* @__PURE__ */ p("p", {
@@ -102,7 +102,7 @@ function S({ access: n }) {
 									onClick: () => {
 										s.selectContainer(e.id), J(null), X(null);
 									},
-									className: `w-full rounded-md border p-3 text-left ${e.id === s.containerId ? "border-blue-500" : ""}`,
+									className: `w-full rounded-md border p-3 text-left ${e.id === s.containerId ? "border-action-primary-border" : ""}`,
 									children: [
 										/* @__PURE__ */ p("span", {
 											className: "font-semibold",
@@ -233,7 +233,7 @@ function S({ access: n }) {
 									type: "button",
 									"aria-pressed": e.id === s.cycleId,
 									disabled: G,
-									className: `w-full rounded-md border p-3 text-left ${e.id === s.cycleId ? "border-blue-500" : ""}`,
+									className: `w-full rounded-md border p-3 text-left ${e.id === s.cycleId ? "border-action-primary-border" : ""}`,
 									onClick: () => {
 										s.selectCycle(e.id), J(null), X(null);
 									},

package/dist/pages/TrackingPage.js

@@ -121,69 +121,124 @@ function N() {
 				title: P("movethewheels.tracking.empty.title", "Enter a tracking number"),
 				description: P("movethewheels.tracking.empty.description", "Use your tracking number or order ID to see the current status of your shipment")
 			}),
-			W && /* @__PURE__ */ k("div", {
+			W && !U && /* @__PURE__ */ O(d, {
+				"data-testid": "tracking-empty-state",
+				children: /* @__PURE__ */ O(f, {
+					className: "p-6 sm:p-8",
+					children: /* @__PURE__ */ k("div", {
+						className: "flex flex-col gap-6 sm:flex-row sm:items-start",
+						children: [/* @__PURE__ */ O("div", {
+							className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-bg-sunken text-text-secondary",
+							children: /* @__PURE__ */ O(n, { size: 24 })
+						}), /* @__PURE__ */ k("div", {
+							className: "min-w-0 flex-1",
+							children: [
+								/* @__PURE__ */ O("h2", {
+									className: "text-lg font-semibold text-text-primary",
+									children: P("movethewheels.tracking.emptyState.title", "No tracking updates yet")
+								}),
+								/* @__PURE__ */ O("p", {
+									className: "mt-1 text-sm text-text-secondary",
+									children: P("movethewheels.tracking.emptyState.description", "This order was found, but tracking updates will appear after the first shipment event.")
+								}),
+								/* @__PURE__ */ k("div", {
+									className: "mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4",
+									children: [
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary",
+											children: P("movethewheels.tracking.emptyState.order", "Order")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium",
+											children: W.orderNumber
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary",
+											children: P("movethewheels.tracking.emptyState.status", "Status")
+										}), /* @__PURE__ */ O(y, {
+											status: W.status,
+											type: "order"
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary",
+											children: P("movethewheels.tracking.details.trackingNumber", "Tracking Number")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-mono font-medium",
+											children: W.trackingNumber || "—"
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary",
+											children: P("movethewheels.tracking.details.items", "Items")
+										}), /* @__PURE__ */ k("p", {
+											className: "font-medium",
+											children: [
+												W.items.length,
+												" ",
+												P("movethewheels.tracking.details.itemsSuffix", "items")
+											]
+										})] })
+									]
+								})
+							]
+						})]
+					})
+				})
+			}),
+			W && U && /* @__PURE__ */ k("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
 				children: [/* @__PURE__ */ k("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						/* @__PURE__ */ k(j, { children: [
-							/* @__PURE__ */ k("div", {
-								className: "flex items-center justify-between mb-4",
-								children: [/* @__PURE__ */ k("h2", {
-									className: "flex items-center gap-2 text-base font-semibold text-text-primary",
+						/* @__PURE__ */ k(j, { children: [/* @__PURE__ */ k("div", {
+							className: "flex items-center justify-between mb-4",
+							children: [/* @__PURE__ */ k("h2", {
+								className: "flex items-center gap-2 text-base font-semibold text-text-primary",
+								children: [
+									/* @__PURE__ */ O(i, { size: 20 }),
+									P("movethewheels.tracking.orderLabel", "Order"),
+									" ",
+									W.orderNumber
+								]
+							}), /* @__PURE__ */ O(y, {
+								status: W.status,
+								type: "order"
+							})]
+						}), /* @__PURE__ */ k("div", {
+							className: "grid grid-cols-2 md:grid-cols-4 gap-4",
+							children: [
+								/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+									className: "text-sm text-text-secondary",
+									children: P("movethewheels.tracking.details.trackingNumber", "Tracking Number")
+								}), /* @__PURE__ */ O("p", {
+									className: "font-mono font-medium",
+									children: W.trackingNumber || "—"
+								})] }),
+								/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+									className: "text-sm text-text-secondary",
+									children: P("movethewheels.tracking.details.estimatedDelivery", "Estimated Delivery")
+								}), /* @__PURE__ */ O("p", {
+									className: "font-medium",
+									children: U?.estimatedArrival ? x(U.estimatedArrival, "full") : W.scheduledDelivery ? x(W.scheduledDelivery, "full") : P("movethewheels.tracking.details.tbd", "TBD")
+								})] }),
+								/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+									className: "text-sm text-text-secondary",
+									children: P("movethewheels.tracking.details.items", "Items")
+								}), /* @__PURE__ */ k("p", {
+									className: "font-medium",
 									children: [
-										/* @__PURE__ */ O(i, { size: 20 }),
-										P("movethewheels.tracking.orderLabel", "Order"),
+										W.items.length,
 										" ",
-										W.orderNumber
+										P("movethewheels.tracking.details.itemsSuffix", "items")
 									]
-								}), /* @__PURE__ */ O(y, {
-									status: W.status,
-									type: "order"
-								})]
-							}),
-							/* @__PURE__ */ k("div", {
-								className: "grid grid-cols-2 md:grid-cols-4 gap-4",
-								children: [
-									/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
-										className: "text-sm text-text-secondary",
-										children: P("movethewheels.tracking.details.trackingNumber", "Tracking Number")
-									}), /* @__PURE__ */ O("p", {
-										className: "font-mono font-medium",
-										children: W.trackingNumber || "—"
-									})] }),
-									/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
-										className: "text-sm text-text-secondary",
-										children: P("movethewheels.tracking.details.estimatedDelivery", "Estimated Delivery")
-									}), /* @__PURE__ */ O("p", {
-										className: "font-medium",
-										children: U?.estimatedArrival ? x(U.estimatedArrival, "full") : W.scheduledDelivery ? x(W.scheduledDelivery, "full") : P("movethewheels.tracking.details.tbd", "TBD")
-									})] }),
-									/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
-										className: "text-sm text-text-secondary",
-										children: P("movethewheels.tracking.details.items", "Items")
-									}), /* @__PURE__ */ k("p", {
-										className: "font-medium",
-										children: [
-											W.items.length,
-											" ",
-											P("movethewheels.tracking.details.itemsSuffix", "items")
-										]
-									})] }),
-									/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
-										className: "text-sm text-text-secondary",
-										children: P("movethewheels.tracking.details.lastUpdated", "Last Updated")
-									}), /* @__PURE__ */ O("p", {
-										className: "font-medium",
-										children: U?.lastUpdated ? x(U.lastUpdated, "relative") : P("movethewheels.tracking.details.noUpdates", "No tracking updates yet")
-									})] })
-								]
-							}),
-							!U && /* @__PURE__ */ O("p", {
-								className: "mt-4 rounded-card border border-border-subtle bg-bg-sunken p-3 text-sm text-text-secondary",
-								children: P("movethewheels.tracking.details.noUpdatesDescription", "The delivery was found, but no tracking updates have been recorded yet.")
-							})
-						] }),
+								})] }),
+								/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+									className: "text-sm text-text-secondary",
+									children: P("movethewheels.tracking.details.lastUpdated", "Last Updated")
+								}), /* @__PURE__ */ O("p", {
+									className: "font-medium",
+									children: U?.lastUpdated ? x(U.lastUpdated, "relative") : P("movethewheels.tracking.details.noUpdates", "No tracking updates yet")
+								})] })
+							]
+						})] }),
 						/* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O(p, { children: /* @__PURE__ */ k(m, {
 							className: "flex items-center gap-2",
 							children: [/* @__PURE__ */ O(r, { size: 18 }), P("movethewheels.tracking.routeMap.title", "Route map")]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.1026.3",
+  "version": "2026.1028.1",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [
@@ -77,6 +77,7 @@
   "dependencies": {
     "@apollo/client": "^4.0.11",
     "@burdenoff/fe-libs": "2026.1017.12",
+    "@graphql-typed-document-node/core": "^3.2.0",
     "@react-leaflet/core": "^3.0.0",
     "@tanstack/react-query": "^5.90.16",
     "@types/leaflet": "1.9.22",

package/src/movethewheels/components/ProofOfDeliveryCard.tsx

@@ -100,7 +100,7 @@ export function ProofOfDeliveryCard({ deliveryJobId }: ProofOfDeliveryCardProps)
                 Signature {epod.signatureType === 'typed' ? '(typed)' : '(drawn)'}
               </p>
               {epod.signatureType === 'drawn' ? (
-                <div className="border rounded-lg p-2 inline-block bg-white">
+                <div className="border rounded-lg p-2 inline-block bg-bg-surface">
                   <img src={epod.signatureData} alt="Recipient signature" className="h-16" />
                 </div>
               ) : (

package/src/movethewheels/components/UpcomingDemandPanel.tsx

@@ -212,8 +212,8 @@ function VarianceList({ rows }: VarianceListProps) {
             const isOvershoot = row.volumeVariance > 0;
             const Icon = isOvershoot ? TrendingUp : TrendingDown;
             const tone = isOvershoot
-              ? 'text-emerald-600 dark:text-emerald-400'
-              : 'text-rose-600 dark:text-rose-400';
+              ? 'text-status-success-text'
+              : 'text-status-error-text';
             return (
               <li
                 key={`${row.scopeType}-${row.scopeKey}-${row.periodStart}`}

package/src/movethewheels/pages/ContainersPage.tsx

@@ -142,7 +142,7 @@ function ContainerWorkbench({ access }: { access: ReturnType<typeof useShipmentP
         actual empty return and recorded return acceptance.
       </p>
       {actionError && (
-        <p role="alert" className="mb-4 rounded-md border border-red-400 p-3">
+        <p role="alert" className="mb-4 rounded-md border border-status-error-border p-3">
           {actionError}
         </p>
       )}
@@ -178,7 +178,7 @@ function ContainerWorkbench({ access }: { access: ReturnType<typeof useShipmentP
                     setActionError(null);
                     setNotice(null);
                   }}
-                  className={`w-full rounded-md border p-3 text-left ${row.id === data.containerId ? 'border-blue-500' : ''}`}
+                  className={`w-full rounded-md border p-3 text-left ${row.id === data.containerId ? 'border-action-primary-border' : ''}`}
                 >
                   <span className="font-semibold">{row.containerNumber}</span>
                   <br />
@@ -269,7 +269,7 @@ function ContainerWorkbench({ access }: { access: ReturnType<typeof useShipmentP
                   type="button"
                   aria-pressed={row.id === data.cycleId}
                   disabled={busy}
-                  className={`w-full rounded-md border p-3 text-left ${row.id === data.cycleId ? 'border-blue-500' : ''}`}
+                  className={`w-full rounded-md border p-3 text-left ${row.id === data.cycleId ? 'border-action-primary-border' : ''}`}
                   onClick={() => {
                     data.selectCycle(row.id);
                     setActionError(null);

package/src/movethewheels/pages/TrackingPage.tsx

@@ -181,8 +181,61 @@ export default function TrackingPage() {
         />
       )}
 
+      {/* Order found, but tracking has not started yet */}
+      {order && !tracking && (
+        <Card data-testid="tracking-empty-state">
+          <CardContent className="p-6 sm:p-8">
+            <div className="flex flex-col gap-6 sm:flex-row sm:items-start">
+              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-bg-sunken text-text-secondary">
+                <Clock size={24} />
+              </div>
+              <div className="min-w-0 flex-1">
+                <h2 className="text-lg font-semibold text-text-primary">
+                  {t('movethewheels.tracking.emptyState.title', 'No tracking updates yet')}
+                </h2>
+                <p className="mt-1 text-sm text-text-secondary">
+                  {t(
+                    'movethewheels.tracking.emptyState.description',
+                    'This order was found, but tracking updates will appear after the first shipment event.'
+                  )}
+                </p>
+                <div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
+                  <div>
+                    <p className="text-sm text-text-secondary">
+                      {t('movethewheels.tracking.emptyState.order', 'Order')}
+                    </p>
+                    <p className="font-medium">{order.orderNumber}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-text-secondary">
+                      {t('movethewheels.tracking.emptyState.status', 'Status')}
+                    </p>
+                    <StatusBadge status={order.status} type="order" />
+                  </div>
+                  <div>
+                    <p className="text-sm text-text-secondary">
+                      {t('movethewheels.tracking.details.trackingNumber', 'Tracking Number')}
+                    </p>
+                    <p className="font-mono font-medium">{order.trackingNumber || '—'}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-text-secondary">
+                      {t('movethewheels.tracking.details.items', 'Items')}
+                    </p>
+                    <p className="font-medium">
+                      {order.items.length}{' '}
+                      {t('movethewheels.tracking.details.itemsSuffix', 'items')}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Tracking Results */}
-      {order && (
+      {order && tracking && (
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
           {/* Main Tracking Info */}
           <div className="lg:col-span-2 space-y-6">
@@ -233,14 +286,6 @@ export default function TrackingPage() {
                   </p>
                 </div>
               </div>
-              {!tracking && (
-                <p className="mt-4 rounded-card border border-border-subtle bg-bg-sunken p-3 text-sm text-text-secondary">
-                  {t(
-                    'movethewheels.tracking.details.noUpdatesDescription',
-                    'The delivery was found, but no tracking updates have been recorded yet.'
-                  )}
-                </p>
-              )}
             </EmphasisPanel>
 
             {/* Route Map — real origin/destination + tracking trail + live position */}