@burdenoff/microfe-movethewheels 2026.703.6 → 2026.703.7

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -55,7 +55,7 @@ export default function OrdersListPage() {
 
   const filtersActive = statusFilter !== 'all' || typeFilter !== 'all' || unassignedOnly;
 
-  const { orders, hasMore, isLoading, refetch } = useOrders({
+  const { orders, hasMore, isLoading, error, refetch } = useOrders({
     filters: {
       status: statusFilter === 'all' ? undefined : statusFilter,
       orderType: typeFilter === 'all' ? undefined : typeFilter,
@@ -346,6 +346,8 @@ export default function OrdersListPage() {
         columns={columns}
         data={orders}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder={t('movethewheels.orders.searchPlaceholder', 'Search orders...')}
         searchFields={['orderNumber', 'customerInfo'] as (keyof Order)[]}

package/src/movethewheels/pages/ProductsPage.tsx

@@ -19,7 +19,7 @@ export default function ProductsPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { products, hasMore, isLoading, refetch } = useProducts({
+  const { products, hasMore, isLoading, error, refetch } = useProducts({
     limit: pageSize,
     offset: page * pageSize,
   });
@@ -159,6 +159,8 @@ export default function ProductsPage() {
         columns={columns}
         data={products}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder="Search products..."
         searchFields={['name', 'sku', 'category'] as (keyof Product)[]}

package/src/movethewheels/pages/RoutesPage.tsx

@@ -20,7 +20,7 @@ export default function RoutesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { routes, hasMore, isLoading, refetch } = useRoutes({
+  const { routes, hasMore, isLoading, error, refetch } = useRoutes({
     limit: pageSize,
     offset: page * pageSize,
   });
@@ -126,6 +126,8 @@ export default function RoutesPage() {
         columns={columns}
         data={routes}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder="Search routes..."
         searchFields={['name'] as (keyof Route)[]}

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -19,7 +19,7 @@ export default function VehiclesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { vehicles, isLoading, refetch } = useVehicles({
+  const { vehicles, isLoading, error, refetch } = useVehicles({
     limit: pageSize,
     offset: page * pageSize,
   });
@@ -163,6 +163,8 @@ export default function VehiclesPage() {
         columns={columns}
         data={vehicles}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder="Search vehicles..."
         searchFields={['vehicleNumber', 'make', 'model'] as (keyof Vehicle)[]}

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -18,7 +18,7 @@ export default function WarehousesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { warehouses, hasMore, isLoading, refetch } = useWarehouses({
+  const { warehouses, hasMore, isLoading, error, refetch } = useWarehouses({
     limit: pageSize,
     offset: page * pageSize,
   });
@@ -152,6 +152,8 @@ export default function WarehousesPage() {
         columns={columns}
         data={warehouses}
         isLoading={isLoading}
+        error={error}
+        onRetry={refetch}
         searchable
         searchPlaceholder="Search warehouses..."
         searchFields={['name', 'code'] as (keyof WarehouseType)[]}

package/src/movethewheels/utils/graphqlClient.ts

@@ -21,12 +21,25 @@ export function resolveGraphqlUrl(apiGatewayUrl?: string): string {
 
 const MAX_RETRIES = 3;
 
+/**
+ * Per-attempt hard timeout. The workspace service runs a lean single-replica
+ * pool with no PgBouncer, so under a burst of concurrent queries a connection
+ * can be accepted by the gateway but never answered — the request then hangs
+ * indefinitely. `fetch` has no built-in timeout, so without this an in-flight
+ * request never settles and the caller's `isLoading` sticks true forever
+ * (perpetual skeletons). A bounded abort turns a hang into a transient error
+ * that the retry loop can recover from on a fresh connection. Real queries
+ * return in well under a second, so 12s is generous headroom.
+ */
+const REQUEST_TIMEOUT_MS = 12000;
+
 /**
  * A transient failure is a momentary gateway↔service connectivity blip (the
  * workspace service runs a lean replica pool with no PgBouncer, so a burst of
  * concurrent dashboard queries can briefly exhaust connections and the gateway
- * returns an upstream-connect / 5xx / reset error). These are safe to retry;
- * genuine validation / auth / business errors are not.
+ * returns an upstream-connect / 5xx / reset error, or the request simply hangs
+ * until we abort it). These are safe to retry; genuine validation / auth /
+ * business errors are not.
  */
 function isTransientMessage(message?: string): boolean {
   if (!message) return false;
@@ -40,6 +53,20 @@ function isTransientStatus(status: number): boolean {
   return status === 429 || status === 502 || status === 503 || status === 504;
 }
 
+/**
+ * A fetch aborted by our timeout rejects with an `AbortError`. It arrives as a
+ * `DOMException`, which is not reliably an `instanceof Error` across engines, so
+ * we duck-type the `name` field rather than relying on the prototype chain.
+ */
+function isAbortError(error: unknown): boolean {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'name' in error &&
+    (error as { name?: unknown }).name === 'AbortError'
+  );
+}
+
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export async function executeGraphQL<TData>(
@@ -68,8 +95,15 @@ export async function executeGraphQL<TData>(
     // Exponential backoff with jitter before each retry (not the first attempt).
     if (attempt > 0) await sleep(Math.min(250 * 2 ** (attempt - 1), 2000) + Math.floor(Math.random() * 150));
 
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
     try {
-      const response = await fetch(url, { method: 'POST', headers, body });
+      const response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body,
+        signal: controller.signal,
+      });
 
       if (!response.ok) {
         lastError = new Error(`GraphQL request failed with status ${response.status}`);
@@ -101,11 +135,22 @@ export async function executeGraphQL<TData>(
 
       return payload.data;
     } catch (error) {
-      // A thrown fetch is a network error (TypeError "Failed to fetch") — transient.
-      const message = error instanceof Error ? error.message : String(error);
-      lastError = error instanceof Error ? error : new Error(message);
-      if (canRetry && (isTransientMessage(message) || error instanceof TypeError)) continue;
+      const aborted = isAbortError(error);
+      // A thrown fetch is a network error (TypeError "Failed to fetch") or our
+      // own timeout abort — both transient and safe to retry on a fresh
+      // connection.
+      const message = aborted
+        ? `GraphQL request timed out after ${REQUEST_TIMEOUT_MS}ms`
+        : error instanceof Error
+          ? error.message
+          : String(error);
+      lastError = !aborted && error instanceof Error ? error : new Error(message);
+      if (canRetry && (aborted || isTransientMessage(message) || error instanceof TypeError)) {
+        continue;
+      }
       throw lastError;
+    } finally {
+      clearTimeout(timeoutId);
     }
   }
 

package/dist/DataTable-KjzbwnRL.js

@@ -1,340 +0,0 @@
-import { A as e, B as t, F as n, G as r, H as i, I as a, K as o, L as ee, P as te, R as ne, U as s, W as c, q as l, rt as u, u as d, ut as f } from "./PageLayout-DX1Ou6V6.js";
-import { n as re, t as ie } from "./arrow-up-PxaOIyiT.js";
-import { t as p } from "./chevron-left-dhEGJYdh.js";
-import { t as m } from "./chevron-right-Cud2NDvm.js";
-import { t as ae } from "./search-D7Ya6jxj.js";
-import { useMemo as h, useState as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { IllustratedEmptyState as y } from "@burdenoff/fe-libs/ui";
-//#region node_modules/lucide-react/dist/esm/icons/arrow-up-down.js
-var oe = f("ArrowUpDown", [
-	["path", {
-		d: "m21 16-4 4-4-4",
-		key: "f6ql7i"
-	}],
-	["path", {
-		d: "M17 20V4",
-		key: "1ejh1v"
-	}],
-	["path", {
-		d: "m3 8 4-4 4 4",
-		key: "11wl7u"
-	}],
-	["path", {
-		d: "M7 4v16",
-		key: "1glfcx"
-	}]
-]), b = f("ChevronsLeft", [["path", {
-	d: "m11 17-5-5 5-5",
-	key: "13zhaf"
-}], ["path", {
-	d: "m18 17-5-5 5-5",
-	key: "h8a8et"
-}]]), se = f("ChevronsRight", [["path", {
-	d: "m6 17 5-5-5-5",
-	key: "xnjwq"
-}], ["path", {
-	d: "m13 17 5-5-5-5",
-	key: "17xmmf"
-}]]);
-//#endregion
-//#region src/movethewheels/components/DataTable.tsx
-function x({ columns: f, data: x, isLoading: ce = !1, searchable: S = !1, searchPlaceholder: le = "Search...", searchFields: C, pagination: w = !0, pageSize: T = 10, pageSizeOptions: ue = [
-	10,
-	25,
-	50,
-	100
-], onRowClick: E, rowClassName: D, emptyMessage: O = "No data found", emptyIllustration: k, emptyTitle: de, emptyDescription: fe, emptyAction: pe, className: A, getRowId: j, pageIndex: me, onPageChange: M, onPageSizeChange: he, totalItems: N, hasNextPage: ge }) {
-	let P = typeof M == "function", F = me ?? 0, [I, _e] = g(""), [L, R] = g(null), [z, B] = g(null), [V, H] = g(1), [U, ve] = g(T), W = P ? T : U, G = h(() => {
-		if (!I || !C || C.length === 0) return x;
-		let e = I.toLowerCase();
-		return x.filter((t) => C.some((n) => {
-			let r = t[n];
-			return r != null && String(r).toLowerCase().includes(e);
-		}));
-	}, [
-		x,
-		I,
-		C
-	]), K = h(() => {
-		if (!L || !z) return G;
-		let e = f.find((e) => e.id === L);
-		return e?.accessorKey ? [...G].sort((t, n) => {
-			let r = t[e.accessorKey], i = n[e.accessorKey];
-			if (r == null) return 1;
-			if (i == null) return -1;
-			let a = 0;
-			return a = typeof r == "string" && typeof i == "string" ? r.localeCompare(i) : typeof r == "number" && typeof i == "number" ? r - i : r instanceof Date && i instanceof Date ? r.getTime() - i.getTime() : String(r).localeCompare(String(i)), z === "asc" ? a : -a;
-		}) : G;
-	}, [
-		G,
-		L,
-		z,
-		f
-	]), q = h(() => {
-		if (!w || P) return K;
-		let e = (V - 1) * U;
-		return K.slice(e, e + U);
-	}, [
-		K,
-		V,
-		U,
-		w,
-		P
-	]), J = Math.max(1, Math.ceil(K.length / U)), Y = typeof N == "number", X = Y ? Math.max(1, Math.ceil(N / W)) : void 0, ye = (e) => {
-		L === e ? z === "asc" ? B("desc") : z === "desc" && (R(null), B(null)) : (R(e), B("asc"));
-	}, be = (e) => L === e ? _(z === "asc" ? ie : re, { className: "w-4 h-4 text-primary" }) : /* @__PURE__ */ _(oe, { className: "w-4 h-4 text-text-secondary/50" }), Z = (e, t) => {
-		if (t.cell) return t.cell(e);
-		if (t.accessorKey) {
-			let n = e[t.accessorKey];
-			return n == null ? "-" : n instanceof Date ? n.toLocaleDateString() : String(n);
-		}
-		return "-";
-	};
-	if (ce) return /* @__PURE__ */ v("div", {
-		className: u("space-y-4", A),
-		children: [
-			S && /* @__PURE__ */ _("div", {
-				className: "flex items-center gap-4",
-				children: /* @__PURE__ */ _(t, { className: "h-10 w-64" })
-			}),
-			/* @__PURE__ */ _("div", {
-				className: "hidden md:block rounded-card border border-border-seam bg-bg-surface shadow-elevation-1",
-				children: /* @__PURE__ */ v(i, { children: [/* @__PURE__ */ _(o, { children: /* @__PURE__ */ _(l, { children: f.map((e) => /* @__PURE__ */ _(r, { children: /* @__PURE__ */ _(t, { className: "h-4 w-20 motion-safe:animate-vc-shimmer" }) }, e.id)) }) }), /* @__PURE__ */ _(s, { children: Array.from({ length: 5 }).map((e, n) => /* @__PURE__ */ _(l, { children: f.map((e) => /* @__PURE__ */ _(c, { children: /* @__PURE__ */ _(t, { className: "h-4 w-full max-w-[100px] motion-safe:animate-vc-shimmer" }) }, e.id)) }, n)) })] })
-			}),
-			/* @__PURE__ */ _("div", {
-				className: "md:hidden space-y-3",
-				children: Array.from({ length: 4 }).map((e, n) => /* @__PURE__ */ v("div", {
-					className: "rounded-card border border-border-seam bg-bg-surface p-4 shadow-elevation-1",
-					children: [/* @__PURE__ */ _(t, { className: "h-4 w-2/3 mb-2 motion-safe:animate-vc-shimmer" }), /* @__PURE__ */ _(t, { className: "h-4 w-1/2 motion-safe:animate-vc-shimmer" })]
-				}, n))
-			})
-		]
-	});
-	let Q = q.length === 0, $ = () => k ? I ? /* @__PURE__ */ _(y, {
-		illustration: "empty-search",
-		title: "No matches",
-		description: `Nothing matches “${I}”. Try a different search.`
-	}) : /* @__PURE__ */ _(y, {
-		illustration: k,
-		title: de ?? O,
-		description: fe,
-		action: pe
-	}) : /* @__PURE__ */ _("p", {
-		className: "text-text-secondary",
-		children: O
-	}), xe = w && (P ? K.length > 0 || F > 0 : K.length > 0);
-	return /* @__PURE__ */ v("div", {
-		className: u("space-y-4", A),
-		children: [
-			S && /* @__PURE__ */ _("div", {
-				className: "flex items-center gap-4",
-				children: /* @__PURE__ */ v("div", {
-					className: "relative flex-1 max-w-sm",
-					children: [/* @__PURE__ */ _(ae, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary" }), /* @__PURE__ */ _(e, {
-						placeholder: le,
-						value: I,
-						onChange: (e) => {
-							_e(e.target.value), H(1);
-						},
-						className: "pl-9"
-					})]
-				})
-			}),
-			/* @__PURE__ */ _("div", {
-				className: "hidden md:block overflow-x-auto rounded-card border border-border-seam bg-bg-surface shadow-elevation-1",
-				children: /* @__PURE__ */ v(i, { children: [/* @__PURE__ */ _(o, { children: /* @__PURE__ */ _(l, { children: f.map((e) => /* @__PURE__ */ _(r, {
-					className: u(e.sortable && "cursor-pointer select-none hover:bg-bg-sunken/50", e.headerClassName),
-					onClick: () => e.sortable && ye(e.id),
-					children: /* @__PURE__ */ v("div", {
-						className: "flex items-center gap-2",
-						children: [e.header, e.sortable && be(e.id)]
-					})
-				}, e.id)) }) }), /* @__PURE__ */ _(s, { children: Q ? /* @__PURE__ */ _(l, { children: /* @__PURE__ */ _(c, {
-					colSpan: f.length,
-					className: "py-8 text-center",
-					children: $()
-				}) }) : q.map((e, t) => {
-					let n = j ? j(e) : t, r = typeof D == "function" ? D(e) : D;
-					return /* @__PURE__ */ _(l, {
-						className: u(E && "cursor-pointer hover:bg-bg-sunken/50", r),
-						onClick: () => E?.(e),
-						children: f.map((t) => /* @__PURE__ */ _(c, {
-							className: t.className,
-							children: Z(e, t)
-						}, t.id))
-					}, n);
-				}) })] })
-			}),
-			/* @__PURE__ */ _("div", {
-				className: "md:hidden space-y-3",
-				children: Q ? /* @__PURE__ */ _("div", {
-					className: "rounded-card border border-border-seam bg-bg-surface p-6 text-center shadow-elevation-1",
-					children: $()
-				}) : q.map((e, t) => {
-					let n = j ? j(e) : t, r = typeof D == "function" ? D(e) : D;
-					return /* @__PURE__ */ _("div", {
-						role: E ? "button" : void 0,
-						tabIndex: E ? 0 : void 0,
-						className: u("rounded-card border border-border-seam bg-bg-surface p-4 shadow-elevation-1", E && "cursor-pointer hover:bg-bg-sunken/50", r),
-						onClick: () => E?.(e),
-						onKeyDown: (t) => {
-							E && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), E(e));
-						},
-						children: /* @__PURE__ */ _("dl", {
-							className: "space-y-2",
-							children: f.map((t) => /* @__PURE__ */ v("div", {
-								className: "flex items-start justify-between gap-3",
-								children: [/* @__PURE__ */ _("dt", {
-									className: "text-xs font-medium text-text-secondary shrink-0",
-									children: t.header
-								}), /* @__PURE__ */ _("dd", {
-									className: "text-sm text-right min-w-0",
-									children: Z(e, t)
-								})]
-							}, t.id))
-						})
-					}, n);
-				})
-			}),
-			xe && /* @__PURE__ */ v("div", {
-				className: "flex flex-wrap items-center justify-between gap-3",
-				children: [/* @__PURE__ */ v("div", {
-					className: "flex flex-wrap items-center gap-2 text-sm text-text-secondary",
-					children: [
-						P ? /* @__PURE__ */ v("span", { children: [
-							"Showing ",
-							K.length === 0 ? 0 : F * W + 1,
-							" to",
-							" ",
-							F * W + K.length,
-							Y ? ` of ${N}` : ""
-						] }) : /* @__PURE__ */ v("span", { children: [
-							"Showing ",
-							(V - 1) * U + 1,
-							" to",
-							" ",
-							Math.min(V * U, K.length),
-							" of ",
-							K.length
-						] }),
-						/* @__PURE__ */ v(te, {
-							value: String(W),
-							onValueChange: (e) => {
-								let t = Number(e);
-								P ? he?.(t) : (ve(t), H(1));
-							},
-							children: [/* @__PURE__ */ _(ee, {
-								className: "w-[70px] h-8",
-								children: /* @__PURE__ */ _(ne, {})
-							}), /* @__PURE__ */ _(n, { children: ue.map((e) => /* @__PURE__ */ _(a, {
-								value: String(e),
-								children: e
-							}, e)) })]
-						}),
-						/* @__PURE__ */ _("span", { children: "per page" })
-					]
-				}), P ? /* @__PURE__ */ v("div", {
-					className: "flex items-center gap-1",
-					children: [
-						/* @__PURE__ */ _(d, {
-							variant: "outline",
-							size: "icon",
-							className: "h-8 w-8",
-							"aria-label": "First page",
-							onClick: () => M?.(0),
-							disabled: F === 0,
-							children: /* @__PURE__ */ _(b, { className: "h-4 w-4" })
-						}),
-						/* @__PURE__ */ _(d, {
-							variant: "outline",
-							size: "icon",
-							className: "h-8 w-8",
-							"aria-label": "Previous page",
-							onClick: () => M?.(Math.max(0, F - 1)),
-							disabled: F === 0,
-							children: /* @__PURE__ */ _(p, { className: "h-4 w-4" })
-						}),
-						/* @__PURE__ */ v("span", {
-							className: "px-3 text-sm",
-							children: [
-								"Page ",
-								F + 1,
-								Y ? ` of ${X}` : ""
-							]
-						}),
-						/* @__PURE__ */ _(d, {
-							variant: "outline",
-							size: "icon",
-							className: "h-8 w-8",
-							"aria-label": "Next page",
-							onClick: () => M?.(F + 1),
-							disabled: Y ? F + 1 >= (X ?? 1) : !ge,
-							children: /* @__PURE__ */ _(m, { className: "h-4 w-4" })
-						}),
-						Y && /* @__PURE__ */ _(d, {
-							variant: "outline",
-							size: "icon",
-							className: "h-8 w-8",
-							"aria-label": "Last page",
-							onClick: () => M?.((X ?? 1) - 1),
-							disabled: F + 1 >= (X ?? 1),
-							children: /* @__PURE__ */ _(se, { className: "h-4 w-4" })
-						})
-					]
-				}) : /* @__PURE__ */ v("div", {
-					className: "flex items-center gap-1",
-					children: [
-						/* @__PURE__ */ _(d, {
-							variant: "outline",
-							size: "icon",
-							className: "h-8 w-8",
-							"aria-label": "First page",
-							onClick: () => H(1),
-							disabled: V === 1,
-							children: /* @__PURE__ */ _(b, { className: "h-4 w-4" })
-						}),
-						/* @__PURE__ */ _(d, {
-							variant: "outline",
-							size: "icon",
-							className: "h-8 w-8",
-							"aria-label": "Previous page",
-							onClick: () => H((e) => Math.max(1, e - 1)),
-							disabled: V === 1,
-							children: /* @__PURE__ */ _(p, { className: "h-4 w-4" })
-						}),
-						/* @__PURE__ */ v("span", {
-							className: "px-3 text-sm",
-							children: [
-								"Page ",
-								V,
-								" of ",
-								J
-							]
-						}),
-						/* @__PURE__ */ _(d, {
-							variant: "outline",
-							size: "icon",
-							className: "h-8 w-8",
-							"aria-label": "Next page",
-							onClick: () => H((e) => Math.min(J, e + 1)),
-							disabled: V === J,
-							children: /* @__PURE__ */ _(m, { className: "h-4 w-4" })
-						}),
-						/* @__PURE__ */ _(d, {
-							variant: "outline",
-							size: "icon",
-							className: "h-8 w-8",
-							"aria-label": "Last page",
-							onClick: () => H(J),
-							disabled: V === J,
-							children: /* @__PURE__ */ _(se, { className: "h-4 w-4" })
-						})
-					]
-				})]
-			})
-		]
-	});
-}
-//#endregion
-export { x as t };