@burdenoff/microfe-movethewheels 2026.624.1 → 2026.626.1

package/dist/index.js

@@ -1,16 +1,16 @@
-import { $ as e, A as t, B as n, C as r, D as i, E as a, F as o, G as s, H as c, I as l, J as u, K as d, L as f, M as p, N as m, O as h, P as g, Q as ee, R as te, S as ne, T as re, U as ie, V as ae, W as oe, X as se, Y as ce, Z as le, _ as ue, a as de, b as fe, c as pe, d as me, et as he, f as ge, g as _e, h as ve, i as _, it as v, j as y, k as b, l as x, m as S, n as C, nt as w, o as T, p as E, q as D, r as O, s as k, t as A, tt as j, u as M, v as N, w as P, x as F, y as ye, z as be } from "./PageLayout-xDTiBTDS.js";
-import { t as xe } from "./DataTable-CZGz3SJu.js";
-import { n as Se, t as Ce } from "./route-CBDXuwH9.js";
-import { t as we } from "./chart-column-CAfkf4o6.js";
-import { t as Te } from "./dollar-sign-kJqItPli.js";
-import { t as Ee } from "./file-text-b1qhrJn1.js";
-import { n as De, t as Oe } from "./settings-BwzIRYv3.js";
-import { t as ke } from "./map-CS2aFgyO.js";
-import { t as Ae } from "./package-KhSi3xaT.js";
-import { t as je } from "./store-CLH957vl.js";
-import { t as I } from "./truck-DX3lNQkz.js";
-import { t as Me } from "./users-CfG0J8wP.js";
-import { t as L } from "./warehouse-Dt_bAr82.js";
+import { $ as e, A as t, B as n, C as r, D as i, E as a, F as o, G as s, H as c, I as l, J as u, K as d, L as f, M as p, N as m, O as h, P as g, Q as ee, R as te, S as ne, T as re, U as ie, V as ae, W as oe, X as se, Y as ce, Z as le, _ as ue, a as de, b as fe, c as pe, d as me, et as he, f as ge, g as _e, h as ve, i as _, it as v, j as y, k as b, l as x, m as S, n as C, nt as w, o as T, p as E, q as D, r as O, s as k, t as A, tt as j, u as M, v as N, w as P, x as F, y as ye, z as be } from "./PageLayout-D3N8MCTm.js";
+import { t as xe } from "./DataTable-CD9ZhpLB.js";
+import { n as Se, t as Ce } from "./route-Dp9JiN_E.js";
+import { t as we } from "./chart-column-D1Ym15-S.js";
+import { t as Te } from "./dollar-sign-IB4O0wuQ.js";
+import { t as Ee } from "./file-text-C8Uioy11.js";
+import { n as De, t as Oe } from "./settings-3Rw5NwFF.js";
+import { t as ke } from "./map-_Per4sT9.js";
+import { t as Ae } from "./package-BE7U0wQE.js";
+import { t as je } from "./store-RCBl7HB-.js";
+import { t as I } from "./truck-CtDjNFbi.js";
+import { t as Me } from "./users-g2N0eL-Z.js";
+import { t as L } from "./warehouse-D3WWDeTX.js";
 import { i as Ne, n as Pe, r as Fe } from "./graphqlClient-CdJyR_ed.js";
 import { n as Ie, r as Le, t as Re } from "./useOrders-D_3_hGMp.js";
 import { a as ze, i as Be, n as Ve, o as He, r as Ue, t as We } from "./useFleet-BdETplNE.js";
@@ -19,8 +19,8 @@ import { n as Ze, r as Qe, t as $e } from "./useCustomers-bS3a4ytk.js";
 import { n as et, r as tt, t as nt } from "./useRoutes-v4aBaS-E.js";
 import { a as rt, i as it, n as at, o as ot, r as st, t as ct } from "./useAnalytics-ph7eTIK6.js";
 import { a as lt, i as ut, n as dt, o as ft, r as pt, s as mt, t as ht } from "./useTracking-De2KIUNu.js";
-import { n as gt, r as _t, t as vt } from "./MetricCard-DeHVeVwl.js";
-import { a as yt, i as bt, n as xt, r as St, t as Ct } from "./StatusBadge-C--7NhoW.js";
+import { n as gt, r as _t, t as vt } from "./MetricCard-B7yMyvMX.js";
+import { a as yt, i as bt, n as xt, r as St, t as Ct } from "./StatusBadge-CijYQXtb.js";
 import { Suspense as wt, lazy as R, useEffect as z } from "react";
 import { Navigate as Tt, Route as B, Routes as Et } from "react-router-dom";
 import { jsx as V, jsxs as H } from "react/jsx-runtime";
@@ -161,7 +161,7 @@ function Nt() {
 		})
 	});
 }
-var Pt = R(() => import("./DashboardPage-3ZOnwg1a.js")), Ft = R(() => import("./OrdersListPage-CJzHbgY3.js")), It = R(() => import("./OrderDetailsPage-D-9lDZYU.js")), W = R(() => import("./CreateOrderPage-DfkSi6JF.js")), Lt = R(() => import("./TrackingPage-BldUm_g7.js")), Rt = R(() => import("./LiveTrackingPage-DoBvtdBG.js")), zt = R(() => import("./FleetPage-CPS7r4J3.js")), Bt = R(() => import("./VehiclesPage-CCBHRDHu.js")), Vt = R(() => import("./VehicleDetailsPage-Dqv--MVW.js")), Ht = R(() => import("./DriversPage-BOhqEBTv.js")), Ut = R(() => import("./DriverDetailsPage-YuZSlPSV.js")), Wt = R(() => import("./InventoryPage-C9g5d3SW.js")), Gt = R(() => import("./ProductsPage-B0P_wjBJ.js")), Kt = R(() => import("./ProductDetailsPage-3rKtzXpy.js")), qt = R(() => import("./WarehousesPage-CpgZEVW9.js")), Jt = R(() => import("./WarehouseDetailsPage-ZObC_c7W.js")), Yt = R(() => import("./CustomersPage-d21ixOYa.js")), G = R(() => import("./CustomerDetailsPage-DzAIu_tH.js")), Xt = R(() => import("./RoutesPage-CpopY8xN.js")), K = R(() => import("./RouteDetailsPage-DGjKTUMj.js")), Zt = R(() => import("./AnalyticsPage-DI6Wcaw5.js")), Qt = R(() => import("./FinancePage-CnjUNXOb.js")), $t = R(() => import("./MarketplacePage-BEj5hcBF.js")), en = R(() => import("./ImportExportPage-zNjs7xsV.js")), tn = R(() => import("./ReportsPage-B8OyWGzl.js")), nn = R(() => import("./SettingsPage-BvXSa3gi.js")), rn = R(() => import("./AIAssistantPage-BrHX2lQn.js"));
+var Pt = R(() => import("./DashboardPage-D2HRqwg9.js")), Ft = R(() => import("./OrdersListPage-BHeT8S5o.js")), It = R(() => import("./OrderDetailsPage-CFASgsYX.js")), W = R(() => import("./CreateOrderPage-CjlnEtk3.js")), Lt = R(() => import("./TrackingPage-CcRc_dva.js")), Rt = R(() => import("./LiveTrackingPage-DQ1q4Id3.js")), zt = R(() => import("./FleetPage-DddXt8r8.js")), Bt = R(() => import("./VehiclesPage-UlxPWP9K.js")), Vt = R(() => import("./VehicleDetailsPage-3YDMPsPs.js")), Ht = R(() => import("./DriversPage-DKiynISH.js")), Ut = R(() => import("./DriverDetailsPage-rg_pGNuP.js")), Wt = R(() => import("./InventoryPage-rMGuaJN-.js")), Gt = R(() => import("./ProductsPage--xEpbQ8A.js")), Kt = R(() => import("./ProductDetailsPage-CFGcbaHo.js")), qt = R(() => import("./WarehousesPage-CuTO-OPp.js")), Jt = R(() => import("./WarehouseDetailsPage-Db7KeN-d.js")), Yt = R(() => import("./CustomersPage-CGGfD4ki.js")), G = R(() => import("./CustomerDetailsPage-I6cdDHUi.js")), Xt = R(() => import("./RoutesPage-s57PtgcQ.js")), K = R(() => import("./RouteDetailsPage-CVtDVb1N.js")), Zt = R(() => import("./AnalyticsPage-CCLfHgQZ.js")), Qt = R(() => import("./FinancePage-Vg8WPs38.js")), $t = R(() => import("./MarketplacePage-DKrXAv62.js")), en = R(() => import("./ImportExportPage-BW6qO3kc.js")), tn = R(() => import("./ReportsPage-Bb7_90rK.js")), nn = R(() => import("./SettingsPage-BYNCBOpN.js")), rn = R(() => import("./AIAssistantPage-AvsMbunM.js"));
 function an() {
 	return /* @__PURE__ */ V(wt, {
 		fallback: /* @__PURE__ */ V(Nt, {}),

package/dist/{map-CS2aFgyO.js → map-_Per4sT9.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/map.js
 var t = e("Map", [
 	["path", {

package/dist/{map-pin-96FeqL7H.js → map-pin-BSaf5IDL.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/map-pin.js
 var t = e("MapPin", [["path", {
 	d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0",

package/dist/{navigation-i6UXEjTC.js → navigation-DaTbrhw2.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/navigation.js
 var t = e("Navigation", [["polygon", {
 	points: "3 11 22 2 13 21 11 13 3 11",

package/dist/{package-KhSi3xaT.js → package-BE7U0wQE.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/package.js
 var t = e("Package", [
 	["path", {

package/dist/{phone-B-h3tbsr.js → phone-DV4StZiA.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/mail.js
 var t = e("Mail", [["rect", {
 	width: "20",

package/dist/{plus-D2BYAzMn.js → plus-Dl1rLeJR.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/plus.js
 var t = e("Plus", [["path", {
 	d: "M5 12h14",

package/dist/{refresh-cw-D5Sy01s-.js → refresh-cw-CWfERAit.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/refresh-cw.js
 var t = e("RefreshCw", [
 	["path", {

package/dist/{route-CBDXuwH9.js → route-Dp9JiN_E.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/bot.js
 var t = e("Bot", [
 	["path", {

package/dist/{save-CMc7h-Vi.js → save-XH8vydOn.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/save.js
 var t = e("Save", [
 	["path", {

package/dist/{search-DVrUQbOg.js → search-OxoIiL_C.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/search.js
 var t = e("Search", [["circle", {
 	cx: "11",

package/dist/{settings-BwzIRYv3.js → settings-3Rw5NwFF.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/globe.js
 var t = e("Globe", [
 	["circle", {

package/dist/{square-pen-DmW36Bau.js → square-pen-hLIbFQFV.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/square-pen.js
 var t = e("SquarePen", [["path", {
 	d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7",

package/dist/{star-Cv2MzxZL.js → star-YsVV3MNQ.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/star.js
 var t = e("Star", [["path", {
 	d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z",

package/dist/{store-CLH957vl.js → store-RCBl7HB-.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/store.js
 var t = e("Store", [
 	["path", {

package/dist/{trending-up-l8M0BO_w.js → trending-up-C-85AwGT.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/trending-up.js
 var t = e("TrendingUp", [["polyline", {
 	points: "22 7 13.5 15.5 8.5 10.5 2 17",

package/dist/{triangle-alert-BI45s6bH.js → triangle-alert-BOhfGgmh.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/triangle-alert.js
 var t = e("TriangleAlert", [
 	["path", {

package/dist/{truck-DX3lNQkz.js → truck-CtDjNFbi.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/truck.js
 var t = e("Truck", [
 	["path", {

package/dist/{user-D8EY1uvt.js → user-Dz5TJZFs.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/user.js
 var t = e("User", [["path", {
 	d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",

package/dist/{users-CfG0J8wP.js → users-g2N0eL-Z.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/users.js
 var t = e("Users", [
 	["path", {

package/dist/{warehouse-Dt_bAr82.js → warehouse-D3WWDeTX.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/warehouse.js
 var t = e("Warehouse", [
 	["path", {

package/dist/{wrench-C50eI_Iy.js → wrench-CmxY1n4I.js}

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-xDTiBTDS.js";
+import { it as e } from "./PageLayout-D3N8MCTm.js";
 //#region node_modules/lucide-react/dist/esm/icons/fuel.js
 var t = e("Fuel", [
 	["line", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.624.1",
+  "version": "2026.626.1",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.11",
-    "@burdenoff/fe-libs": "2026.518.7",
+    "@burdenoff/fe-libs": "2026.625.5",
     "@tanstack/react-query": "^5.90.16",
     "clsx": "^2.1.1",
     "graphql": "^16.12.0",

package/src/movethewheels/components/DataTable.tsx

@@ -15,6 +15,7 @@ import {
   SelectValue,
   Skeleton,
 } from './ui';
+import { IllustratedEmptyState } from '@burdenoff/fe-libs/ui';
 import { cn } from '../utils/cn';
 import {
   ChevronLeft,
@@ -50,6 +51,19 @@ interface DataTableProps<T> {
   onRowClick?: (row: T) => void;
   rowClassName?: string | ((row: T) => string);
   emptyMessage?: string;
+  /**
+   * Boff UI 2.0 — standard illustration name served by the host at
+   * /illustrations/<name>.webp. When provided, the zero/empty state renders an
+   * on-brand IllustratedEmptyState instead of bare text. Search-result empties
+   * always use the empty-search illustration regardless of this value.
+   */
+  emptyIllustration?: string;
+  /** Optional title for the illustrated empty state (defaults to emptyMessage). */
+  emptyTitle?: string;
+  /** Optional description for the illustrated empty state. */
+  emptyDescription?: ReactNode;
+  /** Optional primary action (e.g. a "Create" button) for the illustrated empty state. */
+  emptyAction?: ReactNode;
   className?: string;
   getRowId?: (row: T) => string;
 }
@@ -72,6 +86,10 @@ export function DataTable<T extends object>({
   onRowClick,
   rowClassName,
   emptyMessage = 'No data found',
+  emptyIllustration,
+  emptyTitle,
+  emptyDescription,
+  emptyAction,
   className,
   getRowId,
 }: DataTableProps<T>) {
@@ -188,13 +206,13 @@ export function DataTable<T extends object>({
             <Skeleton className="h-10 w-64" />
           </div>
         )}
-        <div className="rounded-md border">
+        <div className="rounded-card border border-border-seam bg-bg-surface shadow-elevation-1">
           <Table>
             <TableHeader>
               <TableRow>
                 {columns.map((column) => (
                   <TableHead key={column.id}>
-                    <Skeleton className="h-4 w-20" />
+                    <Skeleton className="h-4 w-20 motion-safe:animate-vc-shimmer" />
                   </TableHead>
                 ))}
               </TableRow>
@@ -204,7 +222,7 @@ export function DataTable<T extends object>({
                 <TableRow key={i}>
                   {columns.map((column) => (
                     <TableCell key={column.id}>
-                      <Skeleton className="h-4 w-full max-w-[100px]" />
+                      <Skeleton className="h-4 w-full max-w-[100px] motion-safe:animate-vc-shimmer" />
                     </TableCell>
                   ))}
                 </TableRow>
@@ -237,7 +255,7 @@ export function DataTable<T extends object>({
       )}
 
       {/* Table */}
-      <div className="rounded-md border">
+      <div className="overflow-x-auto rounded-card border border-border-seam bg-bg-surface shadow-elevation-1">
         <Table>
           <TableHeader>
             <TableRow>
@@ -261,8 +279,25 @@ export function DataTable<T extends object>({
           <TableBody>
             {paginatedData.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  <p className="text-text-secondary">{emptyMessage}</p>
+                <TableCell colSpan={columns.length} className="py-8 text-center">
+                  {emptyIllustration ? (
+                    searchQuery ? (
+                      <IllustratedEmptyState
+                        illustration="empty-search"
+                        title="No matches"
+                        description={`Nothing matches “${searchQuery}”. Try a different search.`}
+                      />
+                    ) : (
+                      <IllustratedEmptyState
+                        illustration={emptyIllustration}
+                        title={emptyTitle ?? emptyMessage}
+                        description={emptyDescription}
+                        action={emptyAction}
+                      />
+                    )
+                  ) : (
+                    <p className="text-text-secondary">{emptyMessage}</p>
+                  )}
                 </TableCell>
               </TableRow>
             ) : (

package/src/movethewheels/components/MetricCard.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
+import { GlassCard } from '@burdenoff/fe-libs/ui';
 import { cn } from '../utils/cn';
-import { Card, CardContent } from './ui';
 
 interface MetricCardProps {
   /** Main value to display */
@@ -23,6 +23,10 @@ interface MetricCardProps {
   onClick?: () => void;
   /** Additional CSS classes */
   className?: string;
+  /** Boff UI 2.0 surface treatment. Defaults to the soft accent-wash metric surface. */
+  treatment?: 'metric' | 'glass';
+  /** Featured/active accent glow (used for the single hero metric per page). */
+  glow?: boolean;
 }
 
 const sizeClasses = {
@@ -60,12 +64,14 @@ export function MetricCard({
   size = 'md',
   onClick,
   className,
+  treatment = 'metric',
+  glow = false,
 }: MetricCardProps) {
   const styles = sizeClasses[size];
 
   const changeColors = {
-    positive: 'text-green-600 dark:text-green-400',
-    negative: 'text-red-600 dark:text-red-400',
+    positive: 'text-status-success-text',
+    negative: 'text-status-error-text',
     neutral: 'text-text-secondary',
   };
 
@@ -98,24 +104,44 @@ export function MetricCard({
   };
 
   return (
-    <Card
+    <GlassCard
+      treatment={treatment}
+      glow={glow}
       className={cn(
-        'overflow-hidden transition-all duration-200',
-        onClick && 'cursor-pointer hover:shadow-md hover:border-primary/30',
+        'overflow-hidden border-border-seam',
+        onClick &&
+          'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base',
         className
       )}
       onClick={onClick}
+      {...(onClick
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+              }
+            },
+          }
+        : {})}
     >
-      <CardContent className={styles.card}>
+      <div className={styles.card}>
         <div className="flex items-start justify-between">
           <div className="space-y-1">
             <p className={cn('text-text-secondary', styles.label)}>{label}</p>
-            <p className={cn('text-text-primary tracking-tight', styles.value)}>
+            <p className={cn('text-text-primary tracking-tight tabular-nums', styles.value)}>
               {typeof value === 'number' ? value.toLocaleString() : value}
             </p>
             {subtitle && <p className="text-xs text-text-secondary">{subtitle}</p>}
             {change && (
-              <div className={cn('flex items-center gap-1 text-sm', changeColors[changeType])}>
+              <div
+                className={cn(
+                  'flex items-center gap-1 text-sm tabular-nums',
+                  changeColors[changeType]
+                )}
+              >
                 {trend && trendIcons[trend]}
                 <span>{change}</span>
               </div>
@@ -123,14 +149,17 @@ export function MetricCard({
           </div>
           {icon && (
             <div
-              className={cn('flex-shrink-0 p-2 rounded-lg bg-action-primary-bg/10 text-primary', styles.icon)}
+              className={cn(
+                'flex-shrink-0 p-2 rounded-lg bg-action-primary-bg/10 text-action-primary-bg',
+                styles.icon
+              )}
             >
               {icon}
             </div>
           )}
         </div>
-      </CardContent>
-    </Card>
+      </div>
+    </GlassCard>
   );
 }
 
@@ -141,18 +170,20 @@ export function MetricCardSkeleton({ size = 'md' }: { size?: 'sm' | 'md' | 'lg'
   const styles = sizeClasses[size];
 
   return (
-    <Card className="overflow-hidden">
-      <CardContent className={styles.card}>
+    <GlassCard treatment="metric" className="overflow-hidden border-border-seam">
+      <div className={styles.card}>
         <div className="flex items-start justify-between">
           <div className="space-y-2 flex-1">
-            <div className="h-4 w-24 bg-bg-sunken animate-pulse rounded" />
-            <div className="h-8 w-32 bg-bg-sunken animate-pulse rounded" />
-            <div className="h-3 w-20 bg-bg-sunken animate-pulse rounded" />
+            <div className="h-4 w-24 bg-bg-sunken motion-safe:animate-vc-shimmer rounded" />
+            <div className="h-8 w-32 bg-bg-sunken motion-safe:animate-vc-shimmer rounded" />
+            <div className="h-3 w-20 bg-bg-sunken motion-safe:animate-vc-shimmer rounded" />
           </div>
-          <div className={cn('bg-bg-sunken animate-pulse rounded-lg', styles.icon)} />
+          <div
+            className={cn('bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg', styles.icon)}
+          />
         </div>
-      </CardContent>
-    </Card>
+      </div>
+    </GlassCard>
   );
 }
 

package/src/movethewheels/components/PageLayout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { AuroraBackground, GradientText, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';
 import { cn } from '../utils/cn';
 
 interface PageLayoutProps {
@@ -21,6 +22,16 @@ interface PageLayoutProps {
   className?: string;
   /** Additional CSS classes for the content area */
   contentClassName?: string;
+  /**
+   * Boff UI 2.0 — render a subtle living aurora backdrop behind the page header.
+   * Reserved for the MFE's single primary page (the Dashboard). One per MFE.
+   */
+  hero?: boolean;
+  /**
+   * Boff UI 2.0 — the slice of the title to emphasise with a brand gradient.
+   * When provided, the title renders as `…<GradientText>{titleAccent}</GradientText>`.
+   */
+  titleAccent?: string;
 }
 
 const maxWidthClasses = {
@@ -53,7 +64,24 @@ export function PageLayout({
   showHeader = true,
   className,
   contentClassName,
+  hero = false,
+  titleAccent,
 }: PageLayoutProps) {
+  // Render the title, optionally clipping a gradient into the accent slice.
+  const renderTitle = (value: string) => {
+    if (!titleAccent || !value.includes(titleAccent)) {
+      return value;
+    }
+    const [before, after] = value.split(titleAccent);
+    return (
+      <>
+        {before}
+        <GradientText>{titleAccent}</GradientText>
+        {after}
+      </>
+    );
+  };
+
   return (
     <div
       className={cn(
@@ -72,20 +100,27 @@ export function PageLayout({
       <div className={cn('mx-auto w-full', maxWidthClasses[maxWidth], contentClassName)}>
         {/* Page Header */}
         {showHeader && (title || headerActions) && (
-          <header className="mb-6 sm:mb-8">
+          <header
+            className={cn(
+              'mb-6 sm:mb-8',
+              hero &&
+                'relative overflow-hidden rounded-card border border-border-seam bg-hero-mesh px-5 py-6 sm:px-7 sm:py-8'
+            )}
+          >
+            {hero && <AuroraBackground intensity="subtle" />}
             <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
               {/* Title Section */}
               <div className="space-y-1">
                 {(title || icon) && (
                   <div className="flex items-center gap-3">
                     {icon && (
-                      <div className="flex-shrink-0 p-2.5 rounded-xl bg-action-primary-bg/10 text-primary">
+                      <div className="flex-shrink-0 p-2.5 rounded-xl bg-action-primary-bg/10 text-action-primary-bg">
                         {icon}
                       </div>
                     )}
                     {title && (
                       <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-text-primary">
-                        {title}
+                        {renderTitle(title)}
                       </h1>
                     )}
                   </div>
@@ -148,7 +183,13 @@ export function PageSection({
 }
 
 /**
- * EmptyState - A consistent empty state component
+ * EmptyState - A consistent empty/zero state component.
+ *
+ * Boff UI 2.0: when an `illustration` name is provided (one of the standard
+ * host-served names — empty-data, empty-search, empty-files, empty-people,
+ * empty-notifications, onboarding, empty-generic), it renders the on-brand
+ * IllustratedEmptyState. Otherwise it falls back to the legacy icon layout so
+ * existing callers keep working unchanged.
  */
 export function EmptyState({
   icon,
@@ -156,13 +197,27 @@ export function EmptyState({
   description,
   action,
   className,
+  illustration = 'empty-data',
 }: {
   icon?: ReactNode;
   title: string;
   description?: string;
   action?: ReactNode;
   className?: string;
+  /** Standard illustration name served by the host at /illustrations/<name>.webp. */
+  illustration?: string;
 }) {
+  if (!icon) {
+    return (
+      <IllustratedEmptyState
+        illustration={illustration}
+        title={title}
+        description={description}
+        action={action}
+        className={cn('animate-in fade-in-0 zoom-in-95 duration-300', className)}
+      />
+    );
+  }
   return (
     <div
       className={cn(
@@ -173,7 +228,7 @@ export function EmptyState({
         className
       )}
     >
-      {icon && <div className="mb-4 p-4 rounded-2xl bg-bg-sunken/50 text-text-secondary">{icon}</div>}
+      <div className="mb-4 p-4 rounded-2xl bg-bg-sunken/50 text-text-secondary">{icon}</div>
       <h3 className="text-lg font-semibold text-text-primary mb-1">{title}</h3>
       {description && <p className="text-sm text-text-secondary max-w-sm mb-4">{description}</p>}
       {action}

package/src/movethewheels/components/StatusBadge.tsx

@@ -78,8 +78,9 @@ export function StatusBadge({
     >
       {showDot && (
         <span
+          aria-hidden="true"
           className={cn(
-            'w-1.5 h-1.5 rounded-full mr-1.5 flex-shrink-0',
+            'w-1.5 h-1.5 rounded-full mr-1.5 flex-shrink-0 motion-safe:animate-vc-glow-pulse',
             colors.text.replace('text-', 'bg-')
           )}
         />

package/src/movethewheels/pages/AIAssistantPage.tsx

@@ -15,6 +15,7 @@ import {
   Badge,
   ScrollArea,
 } from '../components/ui';
+import { GlassCard, PagePurpose } from '@burdenoff/fe-libs/ui';
 
 export default function AIAssistantPage() {
   const [message, setMessage] = useState('');
@@ -60,10 +61,17 @@ export default function AIAssistantPage() {
       subtitle="Intelligent logistics support"
       icon={<Bot size={24} />}
     >
+      <PagePurpose icon={<Bot size={18} />}>
+        Ask plain-English questions about your operation and get answers backed by your own data.
+        Use it to optimize routes, forecast demand, spot likely delays, and run what-if scenarios
+        (e.g. &ldquo;what if I add two vehicles?&rdquo;) — like having a logistics analyst on call.
+      </PagePurpose>
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-4">
-          <Card className="h-[600px] flex flex-col">
-            <CardHeader className="border-b">
+          {/* Chat — the page's single emphasis zone */}
+          <GlassCard treatment="glass" glow className="h-[600px] flex flex-col">
+            <CardHeader className="border-b border-border-seam">
               <CardTitle className="flex items-center gap-2">
                 <Sparkles size={18} className="text-primary" /> Chat with AI
               </CardTitle>
@@ -97,7 +105,7 @@ export default function AIAssistantPage() {
                 </Button>
               </div>
             </div>
-          </Card>
+          </GlassCard>
         </div>
 
         <div className="space-y-6">