@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.2

package/dist/{useRoutes-v4aBaS-E.js → useRoutes-BQWO607N.js}

@@ -1,4 +1,4 @@
-import { r as e, t } from "./graphqlClient-CdJyR_ed.js";
+import { it as e, ot as t } from "./PageLayout-D4LDHJJq.js";
 import { useCallback as n, useEffect as r, useMemo as i, useState as a } from "react";
 //#region src/movethewheels/hooks/useRoutes.ts
 var o = "\n  query ListRoutes($filter: RouteFilterInput, $pagination: PaginationInput) {\n    routes(filter: $filter, pagination: $pagination) {\n      id\n      name\n      status\n      shipmentId\n      vehicleId\n      driverId\n      waypoints\n      estimatedDistance\n      estimatedDuration\n      actualDistance\n      actualDuration\n      createdAt\n    }\n  }\n", s = "\n  query GetRoute($id: ID!) {\n    route(id: $id) {\n      id\n      name\n      status\n      shipmentId\n      vehicleId\n      driverId\n      waypoints\n      estimatedDistance\n      estimatedDuration\n      actualDistance\n      actualDuration\n      createdAt\n    }\n  }\n", c = "\n  mutation CreateRoute($input: CreateRouteInput!) {\n    createRoute(input: $input) {\n      id\n      name\n      status\n      shipmentId\n      vehicleId\n      driverId\n      waypoints\n      estimatedDistance\n      estimatedDuration\n      actualDistance\n      actualDuration\n      createdAt\n    }\n  }\n", l = "\n  mutation UpdateRoute($id: ID!, $input: UpdateRouteInput!) {\n    updateRoute(id: $id, input: $input) {\n      id\n      name\n      status\n      shipmentId\n      vehicleId\n      driverId\n      waypoints\n      estimatedDistance\n      estimatedDuration\n      actualDistance\n      actualDuration\n      createdAt\n    }\n  }\n", u = "\n  mutation DeleteRoute($id: ID!) {\n    deleteRoute(id: $id)\n  }\n", d = "\n  mutation OptimizeRoute($id: ID!) {\n    optimizeRoute(id: $id) {\n      id\n      name\n      status\n      shipmentId\n      vehicleId\n      driverId\n      waypoints\n      estimatedDistance\n      estimatedDuration\n      actualDistance\n      actualDuration\n      createdAt\n    }\n  }\n";
@@ -62,16 +62,16 @@ function h(e) {
 	};
 }
 function g() {
-	let { apiGatewayUrl: t, authToken: n, workspaceToken: r, workspaceId: a, tenantId: o, currentUser: s } = e();
+	let { apiGatewayUrl: e, authToken: n, workspaceToken: r, workspaceId: a, tenantId: o, currentUser: s } = t();
 	return i(() => ({
-		apiGatewayUrl: t,
+		apiGatewayUrl: e,
 		authToken: n,
 		workspaceToken: r,
 		workspaceId: a,
 		tenantId: o,
 		actorId: s?.id
 	}), [
-		t,
+		e,
 		n,
 		r,
 		a,
@@ -79,11 +79,11 @@ function g() {
 		s?.id
 	]);
 }
-function _(e = {}) {
-	let { driverId: i, vehicleId: s, status: f } = e, m = g(), [_, v] = a([]), [y, b] = a(!1), [x, S] = a(null), C = n(async () => {
+function _(t = {}) {
+	let { driverId: i, vehicleId: s, status: f } = t, m = g(), [_, v] = a([]), [y, b] = a(!1), [x, S] = a(null), C = n(async () => {
 		b(!0), S(null);
 		try {
-			v((await t(m, o, {
+			v((await e(m, o, {
 				filter: {
 					driverId: i,
 					vehicleId: s,
@@ -110,23 +110,23 @@ function _(e = {}) {
 	}, [C]);
 	let w = n(() => {
 		C();
-	}, [C]), T = n(async (e) => {
-		let n = h((await t(m, c, { input: {
-			name: e.name ?? `Route ${(/* @__PURE__ */ new Date()).toLocaleDateString()}`,
-			status: p(e.status),
+	}, [C]), T = n(async (t) => {
+		let n = h((await e(m, c, { input: {
+			name: t.name ?? `Route ${(/* @__PURE__ */ new Date()).toLocaleDateString()}`,
+			status: p(t.status),
 			shipmentId: void 0,
-			vehicleId: e.vehicleId,
-			driverId: e.driverId,
-			waypoints: e.stops ?? [],
-			estimatedDistance: e.distance ?? 0,
-			estimatedDuration: e.estimatedDuration ?? 0,
-			actualDistance: e.distance,
-			actualDuration: e.actualDuration
+			vehicleId: t.vehicleId,
+			driverId: t.driverId,
+			waypoints: t.stops ?? [],
+			estimatedDistance: t.distance ?? 0,
+			estimatedDuration: t.estimatedDuration ?? 0,
+			actualDistance: t.distance,
+			actualDuration: t.actualDuration
 		} })).createRoute);
 		return v((e) => [n, ...e]), n;
-	}, [m]), E = n(async (e, n) => {
-		let r = h((await t(m, l, {
-			id: e,
+	}, [m]), E = n(async (t, n) => {
+		let r = h((await e(m, l, {
+			id: t,
 			input: {
 				name: n.name,
 				status: p(n.status),
@@ -140,15 +140,15 @@ function _(e = {}) {
 				actualDuration: n.actualDuration
 			}
 		})).updateRoute);
-		return v((t) => t.map((t) => t.id === e ? r : t)), r;
-	}, [m]), D = n(async (e) => {
-		await t(m, u, { id: e }), v((t) => t.filter((t) => t.id !== e));
-	}, [m]), O = n(async (e) => {
+		return v((e) => e.map((e) => e.id === t ? r : e)), r;
+	}, [m]), D = n(async (t) => {
+		await e(m, u, { id: t }), v((e) => e.filter((e) => e.id !== t));
+	}, [m]), O = n(async (t) => {
 		let n = {
-			...h((await t(m, d, { id: e })).optimizeRoute),
+			...h((await e(m, d, { id: t })).optimizeRoute),
 			optimized: !0
 		};
-		return v((t) => t.map((t) => t.id === e ? n : t)), n;
+		return v((e) => e.map((e) => e.id === t ? n : e)), n;
 	}, [m]), k = n(async (e, t, n) => {
 		let r = _.find((t) => t.id === e);
 		if (!r) throw Error("Route not found");
@@ -175,22 +175,22 @@ function _(e = {}) {
 		updateStopStatus: k
 	};
 }
-function v(e) {
+function v(t) {
 	let i = g(), [o, c] = a(null), [l, u] = a(!1), [d, f] = a(null), p = n(async () => {
-		if (!e) {
+		if (!t) {
 			c(null);
 			return;
 		}
 		u(!0), f(null);
 		try {
-			let n = await t(i, s, { id: e });
+			let n = await e(i, s, { id: t });
 			c(n.route ? h(n.route) : null);
 		} catch (e) {
 			f(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to load route"));
 		} finally {
 			u(!1);
 		}
-	}, [i, e]);
+	}, [i, t]);
 	return r(() => {
 		p();
 	}, [p]), {

package/dist/useSettings-CkDH_-gM.js

@@ -0,0 +1,81 @@
+import { it as e, lt as t, ot as n } from "./PageLayout-D4LDHJJq.js";
+import { useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
+//#region node_modules/lucide-react/dist/esm/icons/globe.js
+var s = t("Globe", [
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "10",
+		key: "1mglay"
+	}],
+	["path", {
+		d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20",
+		key: "13o1zl"
+	}],
+	["path", {
+		d: "M2 12h20",
+		key: "9i4pu4"
+	}]
+]), c = t("Settings", [["path", {
+	d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",
+	key: "1qme2f"
+}], ["circle", {
+	cx: "12",
+	cy: "12",
+	r: "3",
+	key: "1v7zrd"
+}]]), l = "\n  query MovethewheelsModuleSettings {\n    moduleSettings {\n      preferences\n      updatedAt\n      workspaceId\n    }\n  }\n", u = "\n  mutation UpdateMovethewheelsModuleSettings($input: UpdateMovethewheelsModuleSettingsInput!) {\n    updateModuleSettings(input: $input) {\n      preferences\n      updatedAt\n      workspaceId\n    }\n  }\n";
+function d() {
+	let { apiGatewayUrl: t, authToken: s, workspaceToken: c, workspaceId: d, tenantId: f, currentUser: p } = n(), [m, h] = o(null), [g, _] = o(!1), [v, y] = o(!1), [b, x] = o(null), S = a(() => ({
+		apiGatewayUrl: t,
+		authToken: s,
+		workspaceToken: c,
+		workspaceId: d,
+		tenantId: f,
+		actorId: p?.id
+	}), [
+		t,
+		s,
+		c,
+		d,
+		f,
+		p?.id
+	]), C = r(async () => {
+		_(!0), x(null);
+		try {
+			h((await e(S, l)).moduleSettings);
+		} catch (e) {
+			x(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to load settings"));
+		} finally {
+			_(!1);
+		}
+	}, [S]);
+	i(() => {
+		C();
+	}, [C]);
+	let w = r(() => {
+		C();
+	}, [C]), T = r(async (t) => {
+		y(!0), x(null);
+		try {
+			let n = await e(S, u, { input: { preferences: t } });
+			return h(n.updateModuleSettings), n.updateModuleSettings;
+		} catch (e) {
+			let t = e instanceof Error ? e : /* @__PURE__ */ Error("Failed to save settings");
+			throw x(t), t;
+		} finally {
+			y(!1);
+		}
+	}, [S]);
+	return {
+		settings: m,
+		preferences: m?.preferences ?? {},
+		isLoading: g,
+		isSaving: v,
+		error: b,
+		refetch: w,
+		savePreferences: T
+	};
+}
+//#endregion
+export { c as n, s as r, d as t };

package/dist/{useTracking-De2KIUNu.js → useTracking-B-va1kO3.js}

@@ -1,6 +1,6 @@
-import { r as e, t } from "./graphqlClient-CdJyR_ed.js";
-import { r as n, t as r } from "./useOrders-D_3_hGMp.js";
-import { a as i, n as a, o, t as s } from "./useFleet-BdETplNE.js";
+import { it as e, ot as t } from "./PageLayout-D4LDHJJq.js";
+import { r as n, t as r } from "./useOrders-Cfk1GLiq.js";
+import { a as i, n as a, o, t as s } from "./useFleet-DKqXZ16m.js";
 import { useCallback as c, useEffect as l, useMemo as u, useState as d } from "react";
 //#region src/movethewheels/hooks/useTracking.ts
 var f = "\n  query ListShipments($filter: ShipmentFilterInput, $pagination: PaginationInput) {\n    shipments(filter: $filter, pagination: $pagination) {\n      id\n      shipmentNumber\n      orderId\n      status\n      estimatedDelivery\n    }\n  }\n", p = "\n  query GetShipment($id: ID!) {\n    shipment(id: $id) {\n      id\n      shipmentNumber\n      orderId\n      status\n      estimatedDelivery\n      trackingEvents {\n        id\n        shipmentId\n        eventType\n        location\n        details\n        timestamp\n      }\n    }\n  }\n", m = "\n  query GetOrderTracking($orderId: ID!) {\n    orderTracking(orderId: $orderId) {\n      id\n      shipmentId\n      eventType\n      location\n      details\n      timestamp\n    }\n  }\n", h = "\n  query GetActiveDeliveries {\n    activeDeliveries {\n      id\n      shipmentNumber\n      orderId\n      status\n      estimatedDelivery\n    }\n  }\n", g = "\n  query GetTrackingAlerts {\n    trackingAlerts {\n      shipmentId\n      shipmentNumber\n      alertType\n      message\n    }\n  }\n";
@@ -25,16 +25,16 @@ function _(e, t) {
 	};
 }
 function v() {
-	let { apiGatewayUrl: t, authToken: n, workspaceToken: r, workspaceId: i, tenantId: a, currentUser: o } = e();
+	let { apiGatewayUrl: e, authToken: n, workspaceToken: r, workspaceId: i, tenantId: a, currentUser: o } = t();
 	return u(() => ({
-		apiGatewayUrl: t,
+		apiGatewayUrl: e,
 		authToken: n,
 		workspaceToken: r,
 		workspaceId: i,
 		tenantId: a,
 		actorId: o?.id
 	}), [
-		t,
+		e,
 		n,
 		r,
 		i,
@@ -42,11 +42,11 @@ function v() {
 		o?.id
 	]);
 }
-function y(e = {}) {
-	let { entityId: n, entityType: r } = e, i = v(), [a, o] = d([]), [s, u] = d(!1), [p, m] = d(null), h = c(async () => {
+function y(t = {}) {
+	let { entityId: n, entityType: r } = t, i = v(), [a, o] = d([]), [s, u] = d(!1), [p, m] = d(null), h = c(async () => {
 		u(!0), m(null);
 		try {
-			o((await t(i, f, { pagination: {
+			o((await e(i, f, { pagination: {
 				limit: 200,
 				offset: 0
 			} })).shipments.map((e) => ({
@@ -84,22 +84,22 @@ function y(e = {}) {
 		refetch: () => void h()
 	};
 }
-function b(e) {
-	let n = v(), { order: i } = r(e), [a, o] = d(null), [s, u] = d(!1), [f, p] = d(null), h = c(async () => {
-		if (!e) {
+function b(t) {
+	let n = v(), { order: i } = r(t), [a, o] = d(null), [s, u] = d(!1), [f, p] = d(null), h = c(async () => {
+		if (!t) {
 			o(null);
 			return;
 		}
 		u(!0), p(null);
 		try {
-			let r = await t(n, m, { orderId: e }), i = r.orderTracking[r.orderTracking.length - 1];
-			o(i ? _(i, e) : null);
+			let r = await e(n, m, { orderId: t }), i = r.orderTracking[r.orderTracking.length - 1];
+			o(i ? _(i, t) : null);
 		} catch (e) {
 			p(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to load order tracking"));
 		} finally {
 			u(!1);
 		}
-	}, [n, e]);
+	}, [n, t]);
 	return l(() => {
 		h();
 	}, [h]), {
@@ -149,12 +149,12 @@ function S(e) {
 	};
 }
 function C() {
-	let e = v(), { orders: r } = n(), { vehicles: i } = o(), { drivers: s } = a(), [u, f] = d([]), [m, g] = d(!1), [y, b] = d(null), x = c(async () => {
+	let t = v(), { orders: r } = n(), { vehicles: i } = o(), { drivers: s } = a(), [u, f] = d([]), [m, g] = d(!1), [y, b] = d(null), x = c(async () => {
 		g(!0), b(null);
 		try {
-			let n = await t(e, h);
+			let n = await e(t, h);
 			f((await Promise.all(n.activeDeliveries.map(async (n) => {
-				let a = (await t(e, p, { id: n.id })).shipment?.trackingEvents ?? [], o = a[a.length - 1], c = r.find((e) => e.id === n.orderId);
+				let a = (await e(t, p, { id: n.id })).shipment?.trackingEvents ?? [], o = a[a.length - 1], c = r.find((e) => e.id === n.orderId);
 				return c ? {
 					order: c,
 					driver: c.driverId ? s.find((e) => e.id === c.driverId || e.userId === c.driverId) ?? null : null,
@@ -170,7 +170,7 @@ function C() {
 		}
 	}, [
 		s,
-		e,
+		t,
 		r,
 		i
 	]);
@@ -184,10 +184,10 @@ function C() {
 	};
 }
 function w() {
-	let e = v(), [n, r] = d([]), [i, a] = d(!1), [o, s] = d(null), f = c(async () => {
+	let t = v(), [n, r] = d([]), [i, a] = d(!1), [o, s] = d(null), f = c(async () => {
 		a(!0), s(null);
 		try {
-			r((await t(e, g)).trackingAlerts.map((e) => ({
+			r((await e(t, g)).trackingAlerts.map((e) => ({
 				id: `${e.shipmentId}-${e.alertType}`,
 				type: "delay",
 				severity: "medium",
@@ -200,7 +200,7 @@ function w() {
 		} finally {
 			a(!1);
 		}
-	}, [e]);
+	}, [t]);
 	return l(() => {
 		f();
 	}, [f]), {

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

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-D3N8MCTm.js";
+import { lt as e } from "./PageLayout-D4LDHJJq.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-g2N0eL-Z.js → users-DZ-ilS6B.js}

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

package/dist/{warehouse-D3WWDeTX.js → warehouse-6m5kXMLu.js}

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

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

@@ -1,4 +1,4 @@
-import { it as e } from "./PageLayout-D3N8MCTm.js";
+import { lt as e } from "./PageLayout-D4LDHJJq.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.626.2",
+  "version": "2026.703.2",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [

package/src/movethewheels/MoveTheWheelsRoutes.tsx

@@ -5,8 +5,32 @@
  * Uses lazy loading for code splitting.
  */
 
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, useNavigate } from 'react-router-dom';
 import { lazy, Suspense } from 'react';
+import { NotFoundPage } from '@burdenoff/fe-libs/shared/pages';
+import { useMoveTheWheels } from './providers/MoveTheWheelsProvider';
+
+/**
+ * Catch-all 404 rendered inside the content area (previously a redirect to ""
+ * that left the page blank). "Back to MoveTheWheels" returns to the overview
+ * via the host navigation when mounted, or the router root in standalone dev.
+ */
+function MoveTheWheelsNotFound() {
+  const { navigate, basePath } = useMoveTheWheels();
+  const routerNavigate = useNavigate();
+  return (
+    <NotFoundPage
+      homeLabel="Back to MoveTheWheels"
+      onGoHome={() => {
+        if (navigate) {
+          navigate(basePath || '/');
+        } else {
+          routerNavigate('/');
+        }
+      }}
+    />
+  );
+}
 
 // Loading fallback
 function PageLoader() {
@@ -69,15 +93,19 @@ export function MoveTheWheelsRoutes() {
         {/* Fleet */}
         <Route path="fleet" element={<FleetPage />} />
         <Route path="fleet/vehicles" element={<VehiclesPage />} />
+        <Route path="fleet/vehicles/new" element={<VehicleDetailsPage />} />
         <Route path="fleet/vehicles/:vehicleId" element={<VehicleDetailsPage />} />
         <Route path="fleet/drivers" element={<DriversPage />} />
+        <Route path="fleet/drivers/new" element={<DriverDetailsPage />} />
         <Route path="fleet/drivers/:driverId" element={<DriverDetailsPage />} />
 
         {/* Inventory */}
         <Route path="inventory" element={<InventoryPage />} />
         <Route path="inventory/products" element={<ProductsPage />} />
+        <Route path="inventory/products/new" element={<ProductDetailsPage />} />
         <Route path="inventory/products/:productId" element={<ProductDetailsPage />} />
         <Route path="inventory/warehouses" element={<WarehousesPage />} />
+        <Route path="inventory/warehouses/new" element={<WarehouseDetailsPage />} />
         <Route path="inventory/warehouses/:warehouseId" element={<WarehouseDetailsPage />} />
 
         {/* Customers */}
@@ -111,8 +139,8 @@ export function MoveTheWheelsRoutes() {
         {/* Settings */}
         <Route path="settings" element={<SettingsPage />} />
 
-        {/* Catch-all - redirect to dashboard */}
-        <Route path="*" element={<Navigate to="" replace />} />
+        {/* Catch-all - friendly 404 */}
+        <Route path="*" element={<MoveTheWheelsNotFound />} />
       </Routes>
     </Suspense>
   );

package/src/movethewheels/components/FormError.tsx

@@ -0,0 +1,25 @@
+/**
+ * FormError — inline error banner for create/edit forms.
+ *
+ * Renders nothing when there is no message, so it can be dropped into a form
+ * unconditionally. Uses semantic status tokens so it themes correctly.
+ */
+
+import { AlertCircle } from 'lucide-react';
+
+interface FormErrorProps {
+  message?: string | null;
+}
+
+export function FormError({ message }: FormErrorProps) {
+  if (!message) return null;
+  return (
+    <div
+      role="alert"
+      className="flex items-start gap-2 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text"
+    >
+      <AlertCircle size={18} className="mt-0.5 shrink-0" />
+      <span>{message}</span>
+    </div>
+  );
+}

package/src/movethewheels/components/StatusBadge.tsx

@@ -1,7 +1,12 @@
 import { cn } from '../utils/cn';
 import { Badge } from './ui';
 import type { OrderStatus, VehicleStatus, DriverStatus } from '../types';
-import { ORDER_STATUS_COLORS, VEHICLE_STATUS_COLORS, DRIVER_STATUS_COLORS } from '../constants';
+import {
+  ORDER_STATUS_COLORS,
+  VEHICLE_STATUS_COLORS,
+  DRIVER_STATUS_COLORS,
+  PRIORITY_COLORS,
+} from '../constants';
 
 type StatusType = 'order' | 'vehicle' | 'driver' | 'custom';
 
@@ -37,28 +42,20 @@ export function StatusBadge({
   // Get colors based on type
   let colors = customColors;
 
+  const neutral = { bg: 'bg-bg-sunken', text: 'text-text-secondary' };
   if (!colors) {
     switch (type) {
       case 'order':
-        colors = ORDER_STATUS_COLORS[status as OrderStatus] || {
-          bg: 'bg-gray-100',
-          text: 'text-gray-700',
-        };
+        colors = ORDER_STATUS_COLORS[status as OrderStatus] || neutral;
         break;
       case 'vehicle':
-        colors = VEHICLE_STATUS_COLORS[status as VehicleStatus] || {
-          bg: 'bg-gray-100',
-          text: 'text-gray-700',
-        };
+        colors = VEHICLE_STATUS_COLORS[status as VehicleStatus] || neutral;
         break;
       case 'driver':
-        colors = DRIVER_STATUS_COLORS[status as DriverStatus] || {
-          bg: 'bg-gray-100',
-          text: 'text-gray-700',
-        };
+        colors = DRIVER_STATUS_COLORS[status as DriverStatus] || neutral;
         break;
       default:
-        colors = { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-700 dark:text-gray-300' };
+        colors = neutral;
     }
   }
 
@@ -102,17 +99,7 @@ export function PriorityBadge({
   size?: 'sm' | 'md' | 'lg';
   className?: string;
 }) {
-  const priorityColors = {
-    low: { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-600 dark:text-gray-400' },
-    normal: { bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-700 dark:text-blue-400' },
-    high: {
-      bg: 'bg-orange-100 dark:bg-orange-900/30',
-      text: 'text-orange-700 dark:text-orange-400',
-    },
-    urgent: { bg: 'bg-red-100 dark:bg-red-900/30', text: 'text-red-700 dark:text-red-400' },
-  };
-
-  const colors = priorityColors[priority];
+  const colors = PRIORITY_COLORS[priority];
 
   return (
     <Badge
@@ -143,11 +130,8 @@ export function TypeBadge({
   className?: string;
 }) {
   const typeColors = {
-    b2b: {
-      bg: 'bg-purple-100 dark:bg-purple-900/30',
-      text: 'text-purple-700 dark:text-purple-400',
-    },
-    b2c: { bg: 'bg-teal-100 dark:bg-teal-900/30', text: 'text-teal-700 dark:text-teal-400' },
+    b2b: { bg: 'bg-status-info-bg-subtle', text: 'text-status-info-text' },
+    b2c: { bg: 'bg-status-success-bg-subtle', text: 'text-status-success-text' },
   };
 
   const colors = typeColors[type];
@@ -181,13 +165,10 @@ export function PaymentStatusBadge({
   className?: string;
 }) {
   const statusColors = {
-    pending: {
-      bg: 'bg-yellow-100 dark:bg-yellow-900/30',
-      text: 'text-yellow-700 dark:text-yellow-400',
-    },
-    paid: { bg: 'bg-green-100 dark:bg-green-900/30', text: 'text-green-700 dark:text-green-400' },
-    failed: { bg: 'bg-red-100 dark:bg-red-900/30', text: 'text-red-700 dark:text-red-400' },
-    refunded: { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-700 dark:text-gray-400' },
+    pending: { bg: 'bg-status-warning-bg-subtle', text: 'text-status-warning-text' },
+    paid: { bg: 'bg-status-success-bg-subtle', text: 'text-status-success-text' },
+    failed: { bg: 'bg-status-error-bg-subtle', text: 'text-status-error-text' },
+    refunded: { bg: 'bg-bg-sunken', text: 'text-text-secondary' },
   };
 
   const colors = statusColors[status];