@burdenoff/microfe-movethewheels 2026.920.3 → 2026.921.1

package/dist/pages/ProductsPage.js

@@ -12,75 +12,77 @@ import { PageLayout as d } from "../components/PageLayout.js";
 import { MetricCard as f, MetricGrid as p } from "../components/MetricCard.js";
 import { DataTable as m } from "../components/DataTable.js";
 import { formatCurrency as h } from "../utils/formatters.js";
-import { useState as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { CTAOverflowMenu as y, PagePurpose as b } from "@burdenoff/fe-libs/ui";
+import { useDebouncedValue as g } from "../hooks/useDebouncedValue.js";
+import { useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { CTAOverflowMenu as b, PagePurpose as x } from "@burdenoff/fe-libs/ui";
 //#region src/movethewheels/pages/ProductsPage.tsx
-function x() {
-	let { basePath: x, navigate: S } = s(), [C, w] = g(0), [T, E] = g(25), { products: D, hasMore: O, isLoading: k, error: A, refetch: j } = l({
-		limit: T,
-		offset: C * T
-	}), { stats: M } = c(), N = (e) => S?.(o(x, e));
-	return /* @__PURE__ */ v(d, {
+function S() {
+	let { basePath: S, navigate: C } = s(), [w, T] = _(0), [E, D] = _(25), [O, k] = _(""), A = g(O), { products: j, totalProducts: M, hasMore: N, isLoading: P, error: F, refetch: I } = l({
+		limit: E,
+		offset: w * E,
+		search: A
+	}), { stats: L } = c(), R = (e) => C?.(o(S, e));
+	return /* @__PURE__ */ y(d, {
 		title: "Products",
-		subtitle: `${M.total} products`,
-		icon: /* @__PURE__ */ _(t, { size: 24 }),
-		headerActions: /* @__PURE__ */ _(y, {
+		subtitle: `${L.total} products`,
+		icon: /* @__PURE__ */ v(t, { size: 24 }),
+		headerActions: /* @__PURE__ */ v(b, {
 			primary: {
 				label: "Add Product",
-				icon: /* @__PURE__ */ _(n, { size: 16 }),
-				onSelect: () => N("inventory/products/new")
+				icon: /* @__PURE__ */ v(n, { size: 16 }),
+				onSelect: () => R("inventory/products/new")
 			},
 			actions: [{
 				label: "Refresh",
-				icon: /* @__PURE__ */ _(r, { size: 16 }),
-				onSelect: () => j()
+				icon: /* @__PURE__ */ v(r, { size: 16 }),
+				onSelect: () => I()
 			}, {
 				label: "Export",
-				icon: /* @__PURE__ */ _(e, { size: 16 }),
-				onSelect: () => N("import-export")
+				icon: /* @__PURE__ */ v(e, { size: 16 }),
+				onSelect: () => R("import-export")
 			}]
 		}),
 		children: [
-			/* @__PURE__ */ _(b, {
-				icon: /* @__PURE__ */ _(t, { size: 18 }),
+			/* @__PURE__ */ v(x, {
+				icon: /* @__PURE__ */ v(t, { size: 18 }),
 				children: "The catalog of items you ship. Each product's dimensions, weight, value and handling flags (fragile, hazardous, temperature-controlled) drive how it's packed, priced and routed — keep them accurate so shipments are quoted and handled correctly."
 			}),
-			/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
+			/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
 				className: "mb-3 text-sm font-medium text-text-secondary",
 				children: "Catalog at a glance"
-			}), /* @__PURE__ */ v(p, {
+			}), /* @__PURE__ */ y(p, {
 				columns: 3,
 				children: [
-					/* @__PURE__ */ _(f, {
+					/* @__PURE__ */ v(f, {
 						label: "Total products",
-						value: M.total,
-						icon: /* @__PURE__ */ _(t, { size: 20 }),
+						value: L.total,
+						icon: /* @__PURE__ */ v(t, { size: 20 }),
 						accent: "brand"
 					}),
-					/* @__PURE__ */ _(f, {
+					/* @__PURE__ */ v(f, {
 						label: "Special handling",
-						value: M.specialHandling,
-						icon: /* @__PURE__ */ _(a, { size: 20 }),
+						value: L.specialHandling,
+						icon: /* @__PURE__ */ v(a, { size: 20 }),
 						accent: "warning",
 						subtitle: "Fragile or hazardous"
 					}),
-					/* @__PURE__ */ _(f, {
+					/* @__PURE__ */ v(f, {
 						label: "Temp-controlled",
-						value: M.temperatureControlled,
-						icon: /* @__PURE__ */ _(i, { size: 20 }),
+						value: L.temperatureControlled,
+						icon: /* @__PURE__ */ v(i, { size: 20 }),
 						accent: "blue"
 					})
 				]
 			})] }),
-			/* @__PURE__ */ _(m, {
+			/* @__PURE__ */ v(m, {
 				columns: [
 					{
 						id: "sku",
 						header: "SKU",
 						accessorKey: "sku",
 						sortable: !0,
-						cell: (e) => /* @__PURE__ */ _("span", {
+						cell: (e) => /* @__PURE__ */ v("span", {
 							className: "font-mono",
 							children: e.sku
 						})
@@ -90,10 +92,10 @@ function x() {
 						header: "Product Name",
 						accessorKey: "name",
 						sortable: !0,
-						cell: (e) => /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
+						cell: (e) => /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
 							className: "font-medium",
 							children: e.name
-						}), /* @__PURE__ */ _("p", {
+						}), /* @__PURE__ */ v("p", {
 							className: "text-sm text-text-secondary line-clamp-1",
 							children: e.description
 						})] })
@@ -103,7 +105,7 @@ function x() {
 						header: "Category",
 						accessorKey: "category",
 						sortable: !0,
-						cell: (e) => /* @__PURE__ */ _(u, {
+						cell: (e) => /* @__PURE__ */ v(u, {
 							variant: "outline",
 							children: e.category
 						})
@@ -125,7 +127,7 @@ function x() {
 						header: "Value",
 						accessorKey: "value",
 						sortable: !0,
-						cell: (e) => /* @__PURE__ */ _("span", {
+						cell: (e) => /* @__PURE__ */ v("span", {
 							className: "font-medium",
 							children: h(e.value)
 						})
@@ -133,20 +135,20 @@ function x() {
 					{
 						id: "flags",
 						header: "Flags",
-						cell: (e) => /* @__PURE__ */ v("div", {
+						cell: (e) => /* @__PURE__ */ y("div", {
 							className: "flex gap-1",
 							children: [
-								e.fragile && /* @__PURE__ */ _(u, {
+								e.fragile && /* @__PURE__ */ v(u, {
 									variant: "destructive",
 									className: "text-xs",
 									children: "Fragile"
 								}),
-								e.hazardous && /* @__PURE__ */ _(u, {
+								e.hazardous && /* @__PURE__ */ v(u, {
 									variant: "destructive",
 									className: "text-xs",
 									children: "Hazardous"
 								}),
-								e.temperatureControlled && /* @__PURE__ */ _(u, {
+								e.temperatureControlled && /* @__PURE__ */ v(u, {
 									variant: "secondary",
 									className: "text-xs",
 									children: "Temp Control"
@@ -155,10 +157,10 @@ function x() {
 						})
 					}
 				],
-				data: D,
-				isLoading: k,
-				error: A,
-				onRetry: j,
+				data: j,
+				isLoading: P,
+				error: F,
+				onRetry: I,
 				searchable: !0,
 				searchPlaceholder: "Search products...",
 				searchFields: [
@@ -166,15 +168,20 @@ function x() {
 					"sku",
 					"category"
 				],
-				onRowClick: (e) => N(`inventory/products/${e.id}`),
+				searchQuery: O,
+				onSearchQueryChange: (e) => {
+					k(e), T(0);
+				},
+				onRowClick: (e) => R(`inventory/products/${e.id}`),
 				getRowId: (e) => e.id,
-				pageIndex: C,
-				pageSize: T,
-				onPageChange: w,
+				pageIndex: w,
+				pageSize: E,
+				onPageChange: T,
 				onPageSizeChange: (e) => {
-					E(e), w(0);
+					D(e), T(0);
 				},
-				hasNextPage: O,
+				totalItems: M,
+				hasNextPage: N,
 				emptyIllustration: "empty-files",
 				emptyTitle: "No products yet",
 				emptyDescription: "Add products to your catalog so they can be added to orders and stocked in warehouses."
@@ -183,4 +190,4 @@ function x() {
 	});
 }
 //#endregion
-export { x as default };
+export { S as default };