@burdenoff/microfe-movethewheels 2026.510.105

package/dist/DashboardPage-8iTPXRAG.js

@@ -0,0 +1,374 @@
+import { M as e, a as t, d as n, f as r, g as i, h as a, i as o, l as s, u as c } from "./PageLayout-B7b0vl0R.js";
+import { t as l } from "./chevron-right-DhZVf20o.js";
+import { t as u } from "./clock-CvwBKbQP.js";
+import { t as d } from "./dollar-sign-CP9qeU5d.js";
+import { t as f } from "./map-pin-CFBOmh-A.js";
+import { t as p } from "./package-DVZbDRcV.js";
+import { t as m } from "./trending-up-C1faflCI.js";
+import { t as h } from "./triangle-alert-CUoVAA4L.js";
+import { t as g } from "./truck-BmDAzu05.js";
+import { t as _ } from "./users-i-igmsP4.js";
+import { r as v } from "./graphqlClient-CdJyR_ed.js";
+import { n as y, r as b } from "./useOrders-D_3_hGMp.js";
+import { i as x } from "./useFleet-BdETplNE.js";
+import { n as S } from "./useAnalytics-ph7eTIK6.js";
+import { r as C } from "./useTracking-De2KIUNu.js";
+import { r as w, t as T } from "./MetricCard-GTbxAk1a.js";
+import { r as E } from "./StatusBadge-BrrwraIA.js";
+import { n as D, r as O } from "./formatters-_vJlC-47.js";
+import { t as k } from "./navigation-BgnOfsVd.js";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
+import { useI18n as M } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/movethewheels/pages/DashboardPage.tsx
+function N() {
+	let { t: N } = M(), P = (e, t) => {
+		let n = N(e);
+		return n === e ? t : n;
+	}, { basePath: F, navigate: I } = v(), { metrics: L } = S(), { orders: R } = b({ limit: 5 }), { stats: z } = y(), { stats: B } = x(), { activeDeliveries: V } = C(), H = (e) => {
+		I && I(k(F, e));
+	};
+	return /* @__PURE__ */ j(o, {
+		title: P("movethewheels.dashboard.title", "Dashboard"),
+		subtitle: P("movethewheels.dashboard.subtitle", "Overview of your logistics operations"),
+		icon: /* @__PURE__ */ A(m, { size: 24 }),
+		headerActions: /* @__PURE__ */ j("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ j(c, {
+				variant: "outline",
+				onClick: () => H("tracking/live"),
+				children: [/* @__PURE__ */ A(f, { size: 16 }), P("movethewheels.dashboard.actions.liveMap", "Live Map")]
+			}), /* @__PURE__ */ j(c, {
+				onClick: () => H("orders/new"),
+				children: [/* @__PURE__ */ A(p, { size: 16 }), P("movethewheels.dashboard.actions.newOrder", "New Order")]
+			})]
+		}),
+		children: [
+			/* @__PURE__ */ j(w, {
+				columns: 4,
+				children: [
+					/* @__PURE__ */ A(T, {
+						label: P("movethewheels.dashboard.metrics.totalOrders", "Total Orders"),
+						value: L.orders.total,
+						icon: /* @__PURE__ */ A(p, { size: 20 }),
+						change: `+${L.orders.today} ${P("movethewheels.dashboard.metrics.today", "today")}`,
+						changeType: "positive",
+						trend: "up",
+						onClick: () => H("orders")
+					}),
+					/* @__PURE__ */ A(T, {
+						label: P("movethewheels.dashboard.metrics.activeDeliveries", "Active Deliveries"),
+						value: L.orders.inTransit,
+						icon: /* @__PURE__ */ A(g, { size: 20 }),
+						subtitle: `${L.orders.pending} ${P("movethewheels.dashboard.metrics.pending", "pending")}`,
+						onClick: () => H("tracking")
+					}),
+					/* @__PURE__ */ A(T, {
+						label: P("movethewheels.dashboard.metrics.fleetUtilization", "Fleet Utilization"),
+						value: `${L.fleet.activeVehicles}/${L.fleet.totalVehicles}`,
+						icon: /* @__PURE__ */ A(g, { size: 20 }),
+						subtitle: `${L.fleet.availableDrivers} ${P("movethewheels.dashboard.metrics.driversAvailable", "drivers available")}`,
+						onClick: () => H("fleet")
+					}),
+					/* @__PURE__ */ A(T, {
+						label: P("movethewheels.dashboard.metrics.revenue", "Revenue"),
+						value: D(L.revenue.total),
+						icon: /* @__PURE__ */ A(d, { size: 20 }),
+						change: "+12.5%",
+						changeType: "positive",
+						trend: "up",
+						onClick: () => H("analytics")
+					})
+				]
+			}),
+			/* @__PURE__ */ j(w, {
+				columns: 4,
+				children: [
+					/* @__PURE__ */ A(T, {
+						size: "sm",
+						label: P("movethewheels.dashboard.stats.onTimeDelivery", "On-Time Delivery"),
+						value: `${L.performance.onTimeDeliveryRate.toFixed(1)}%`,
+						changeType: L.performance.onTimeDeliveryRate >= 90 ? "positive" : "negative"
+					}),
+					/* @__PURE__ */ A(T, {
+						size: "sm",
+						label: P("movethewheels.dashboard.stats.avgOrderValue", "Avg Order Value"),
+						value: D(L.revenue.avgOrderValue)
+					}),
+					/* @__PURE__ */ A(T, {
+						size: "sm",
+						label: P("movethewheels.dashboard.stats.driverRating", "Driver Rating"),
+						value: L.performance.avgDriverRating.toFixed(1),
+						subtitle: P("movethewheels.dashboard.stats.outOfFive", "out of 5")
+					}),
+					/* @__PURE__ */ A(T, {
+						size: "sm",
+						label: P("movethewheels.dashboard.stats.deliveredToday", "Delivered Today"),
+						value: L.orders.delivered
+					})
+				]
+			}),
+			/* @__PURE__ */ j("div", {
+				className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
+				children: [/* @__PURE__ */ A(t, {
+					title: P("movethewheels.dashboard.recentOrders.title", "Recent Orders"),
+					actions: /* @__PURE__ */ j(c, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => H("orders"),
+						children: [
+							P("movethewheels.dashboard.common.viewAll", "View all"),
+							" ",
+							/* @__PURE__ */ A(l, { size: 16 })
+						]
+					}),
+					children: /* @__PURE__ */ A(n, { children: /* @__PURE__ */ A(r, {
+						className: "p-0",
+						children: /* @__PURE__ */ j("div", {
+							className: "divide-y",
+							children: [R.slice(0, 5).map((e) => /* @__PURE__ */ A("div", {
+								className: "p-4 hover:bg-muted/50 cursor-pointer transition-colors",
+								onClick: () => H(`orders/${e.id}`),
+								children: /* @__PURE__ */ j("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+										className: "font-medium",
+										children: e.orderNumber
+									}), /* @__PURE__ */ A("p", {
+										className: "text-sm text-muted-foreground",
+										children: e.customerInfo.name
+									})] }), /* @__PURE__ */ j("div", {
+										className: "text-right",
+										children: [/* @__PURE__ */ A(E, {
+											status: e.status,
+											type: "order",
+											size: "sm"
+										}), /* @__PURE__ */ A("p", {
+											className: "text-sm text-muted-foreground mt-1",
+											children: D(e.pricing.total)
+										})]
+									})]
+								})
+							}, e.id)), R.length === 0 && /* @__PURE__ */ A("div", {
+								className: "p-8 text-center text-muted-foreground",
+								children: P("movethewheels.dashboard.recentOrders.empty", "No recent orders")
+							})]
+						})
+					}) })
+				}), /* @__PURE__ */ A(t, {
+					title: P("movethewheels.dashboard.activeDeliveries.title", "Active Deliveries"),
+					actions: /* @__PURE__ */ j(c, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => H("tracking/live"),
+						children: [
+							P("movethewheels.dashboard.activeDeliveries.liveTracking", "Live tracking"),
+							" ",
+							/* @__PURE__ */ A(l, { size: 16 })
+						]
+					}),
+					children: /* @__PURE__ */ A(n, { children: /* @__PURE__ */ A(r, {
+						className: "p-0",
+						children: /* @__PURE__ */ j("div", {
+							className: "divide-y",
+							children: [V.slice(0, 5).map((e) => e.order ? /* @__PURE__ */ A("div", {
+								className: "p-4 hover:bg-muted/50 cursor-pointer transition-colors",
+								onClick: () => H(`tracking?order=${e.order.id}`),
+								children: /* @__PURE__ */ j("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+										className: "font-medium",
+										children: e.order.orderNumber
+									}), /* @__PURE__ */ A("p", {
+										className: "text-sm text-muted-foreground",
+										children: e.driver?.fullName || P("movethewheels.dashboard.activeDeliveries.unassigned", "Unassigned")
+									})] }), /* @__PURE__ */ j("div", {
+										className: "text-right",
+										children: [/* @__PURE__ */ A(E, {
+											status: e.order.status,
+											type: "order",
+											size: "sm"
+										}), /* @__PURE__ */ j("p", {
+											className: "text-sm text-muted-foreground mt-1",
+											children: [
+												P("movethewheels.dashboard.activeDeliveries.eta", "ETA:"),
+												" ",
+												e.estimatedArrival ? O(e.estimatedArrival, "time") : P("movethewheels.dashboard.activeDeliveries.na", "N/A")
+											]
+										})]
+									})]
+								})
+							}, e.order.id) : null), V.length === 0 && /* @__PURE__ */ A("div", {
+								className: "p-8 text-center text-muted-foreground",
+								children: P("movethewheels.dashboard.activeDeliveries.empty", "No active deliveries")
+							})]
+						})
+					}) })
+				})]
+			}),
+			/* @__PURE__ */ j("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [
+					/* @__PURE__ */ j(n, { children: [/* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(i, {
+						className: "text-base",
+						children: P("movethewheels.dashboard.orderStatus.title", "Order Status")
+					}) }), /* @__PURE__ */ A(r, {
+						className: "space-y-4",
+						children: /* @__PURE__ */ A("div", {
+							className: "space-y-3",
+							children: [
+								{
+									status: "pending",
+									count: z.byStatus.pending,
+									color: "bg-yellow-500"
+								},
+								{
+									status: "in_transit",
+									count: z.byStatus.in_transit,
+									color: "bg-blue-500"
+								},
+								{
+									status: "delivered",
+									count: z.byStatus.delivered,
+									color: "bg-green-500"
+								},
+								{
+									status: "cancelled",
+									count: z.byStatus.cancelled,
+									color: "bg-red-500"
+								}
+							].map(({ status: e, count: t, color: n }) => /* @__PURE__ */ j("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ j("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ A("div", { className: `w-2 h-2 rounded-full ${n}` }), /* @__PURE__ */ A("span", {
+										className: "text-sm capitalize",
+										children: P(`movethewheels.dashboard.orderStatus.status.${e}`, e.replace("_", " "))
+									})]
+								}), /* @__PURE__ */ A(s, {
+									variant: "secondary",
+									children: t
+								})]
+							}, e))
+						})
+					})] }),
+					/* @__PURE__ */ j(n, { children: [/* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(i, {
+						className: "text-base",
+						children: P("movethewheels.dashboard.fleetStatus.title", "Fleet Status")
+					}) }), /* @__PURE__ */ j(r, {
+						className: "space-y-4",
+						children: [/* @__PURE__ */ j("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ j("div", {
+								className: "flex justify-between text-sm",
+								children: [/* @__PURE__ */ A("span", { children: P("movethewheels.dashboard.fleetStatus.vehicleUtilization", "Vehicle Utilization") }), /* @__PURE__ */ j("span", { children: [B.utilization.toFixed(0), "%"] })]
+							}), /* @__PURE__ */ A(e, { value: B.utilization })]
+						}), /* @__PURE__ */ j("div", {
+							className: "grid grid-cols-2 gap-4 text-sm",
+							children: [
+								/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "text-muted-foreground",
+									children: P("movethewheels.dashboard.fleetStatus.available", "Available")
+								}), /* @__PURE__ */ A("p", {
+									className: "text-lg font-semibold text-green-600",
+									children: B.vehiclesByStatus.available
+								})] }),
+								/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "text-muted-foreground",
+									children: P("movethewheels.dashboard.fleetStatus.inUse", "In Use")
+								}), /* @__PURE__ */ A("p", {
+									className: "text-lg font-semibold text-blue-600",
+									children: B.vehiclesByStatus.assigned
+								})] }),
+								/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "text-muted-foreground",
+									children: P("movethewheels.dashboard.fleetStatus.maintenance", "Maintenance")
+								}), /* @__PURE__ */ A("p", {
+									className: "text-lg font-semibold text-yellow-600",
+									children: B.vehiclesByStatus.maintenance
+								})] }),
+								/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "text-muted-foreground",
+									children: P("movethewheels.dashboard.fleetStatus.avgFuel", "Avg Fuel")
+								}), /* @__PURE__ */ j("p", {
+									className: "text-lg font-semibold",
+									children: [B.avgFuelLevel.toFixed(0), "%"]
+								})] })
+							]
+						})]
+					})] }),
+					/* @__PURE__ */ j(n, { children: [/* @__PURE__ */ A(a, { children: /* @__PURE__ */ j(i, {
+						className: "text-base flex items-center gap-2",
+						children: [/* @__PURE__ */ A(h, {
+							size: 16,
+							className: "text-yellow-500"
+						}), P("movethewheels.dashboard.alerts.title", "Alerts")]
+					}) }), /* @__PURE__ */ A(r, { children: /* @__PURE__ */ j("div", {
+						className: "space-y-3",
+						children: [
+							z.byStatus.pending > 5 && /* @__PURE__ */ j("div", {
+								className: "flex items-start gap-3 p-2 rounded bg-yellow-50 dark:bg-yellow-900/20",
+								children: [/* @__PURE__ */ A(u, {
+									size: 16,
+									className: "text-yellow-600 mt-0.5"
+								}), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "text-sm font-medium",
+									children: P("movethewheels.dashboard.alerts.pendingOrders.title", "Pending Orders")
+								}), /* @__PURE__ */ j("p", {
+									className: "text-xs text-muted-foreground",
+									children: [
+										z.byStatus.pending,
+										" ",
+										P("movethewheels.dashboard.alerts.pendingOrders.description", "orders awaiting confirmation")
+									]
+								})] })]
+							}),
+							B.vehiclesByStatus.maintenance > 0 && /* @__PURE__ */ j("div", {
+								className: "flex items-start gap-3 p-2 rounded bg-orange-50 dark:bg-orange-900/20",
+								children: [/* @__PURE__ */ A(g, {
+									size: 16,
+									className: "text-orange-600 mt-0.5"
+								}), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "text-sm font-medium",
+									children: P("movethewheels.dashboard.alerts.maintenanceVehicles.title", "Vehicles in Maintenance")
+								}), /* @__PURE__ */ j("p", {
+									className: "text-xs text-muted-foreground",
+									children: [
+										B.vehiclesByStatus.maintenance,
+										" ",
+										P("movethewheels.dashboard.alerts.maintenanceVehicles.description", "vehicles unavailable")
+									]
+								})] })]
+							}),
+							B.driversByStatus.offline > 0 && /* @__PURE__ */ j("div", {
+								className: "flex items-start gap-3 p-2 rounded bg-gray-50 dark:bg-gray-800",
+								children: [/* @__PURE__ */ A(_, {
+									size: 16,
+									className: "text-gray-600 mt-0.5"
+								}), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "text-sm font-medium",
+									children: P("movethewheels.dashboard.alerts.offlineDrivers.title", "Offline Drivers")
+								}), /* @__PURE__ */ j("p", {
+									className: "text-xs text-muted-foreground",
+									children: [
+										B.driversByStatus.offline,
+										" ",
+										P("movethewheels.dashboard.alerts.offlineDrivers.description", "drivers currently offline")
+									]
+								})] })]
+							}),
+							z.byStatus.pending <= 5 && B.vehiclesByStatus.maintenance === 0 && B.driversByStatus.offline === 0 && /* @__PURE__ */ A("div", {
+								className: "text-center py-4 text-muted-foreground",
+								children: /* @__PURE__ */ A("p", {
+									className: "text-sm",
+									children: P("movethewheels.dashboard.alerts.allOperational", "All systems operational")
+								})
+							})
+						]
+					}) })] })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { N as default };

package/dist/DataTable-CRIKfdIN.js

@@ -0,0 +1,239 @@
+import { A as e, B as t, F as n, G as r, H as i, I as a, K as o, L as s, P as c, R as l, U as u, W as d, it as f, q as p, rt as m, u as h } from "./PageLayout-B7b0vl0R.js";
+import { t as g } from "./chevron-right-DhZVf20o.js";
+import { t as _ } from "./search-5pdn5eOO.js";
+import { useMemo as v, useState as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region node_modules/lucide-react/dist/esm/icons/arrow-down.js
+var S = f("ArrowDown", [["path", {
+	d: "M12 5v14",
+	key: "s699le"
+}], ["path", {
+	d: "m19 12-7 7-7-7",
+	key: "1idqje"
+}]]), C = 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"
+	}]
+]), w = f("ArrowUp", [["path", {
+	d: "m5 12 7-7 7 7",
+	key: "hav0vg"
+}], ["path", {
+	d: "M12 19V5",
+	key: "x0mq9r"
+}]]), T = f("ChevronLeft", [["path", {
+	d: "m15 18-6-6 6-6",
+	key: "1wnfg3"
+}]]), E = f("ChevronsLeft", [["path", {
+	d: "m11 17-5-5 5-5",
+	key: "13zhaf"
+}], ["path", {
+	d: "m18 17-5-5 5-5",
+	key: "h8a8et"
+}]]), D = 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 O({ columns: f, data: O, isLoading: ee = !1, searchable: k = !1, searchPlaceholder: A = "Search...", searchFields: j, pagination: M = !0, pageSize: N = 10, pageSizeOptions: P = [
+	5,
+	10,
+	20,
+	50
+], onRowClick: F, rowClassName: I, emptyMessage: L = "No data found", className: R, getRowId: z }) {
+	let [B, V] = y(""), [H, U] = y(null), [W, G] = y(null), [K, q] = y(1), [J, Y] = y(N), X = v(() => {
+		if (!B || !j || j.length === 0) return O;
+		let e = B.toLowerCase();
+		return O.filter((t) => j.some((n) => {
+			let r = t[n];
+			return r != null && String(r).toLowerCase().includes(e);
+		}));
+	}, [
+		O,
+		B,
+		j
+	]), Z = v(() => {
+		if (!H || !W) return X;
+		let e = f.find((e) => e.id === H);
+		return e?.accessorKey ? [...X].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)), W === "asc" ? a : -a;
+		}) : X;
+	}, [
+		X,
+		H,
+		W,
+		f
+	]), Q = v(() => {
+		if (!M) return Z;
+		let e = (K - 1) * J;
+		return Z.slice(e, e + J);
+	}, [
+		Z,
+		K,
+		J,
+		M
+	]), $ = Math.ceil(Z.length / J), te = (e) => {
+		H === e ? W === "asc" ? G("desc") : W === "desc" && (U(null), G(null)) : (U(e), G("asc"));
+	}, ne = (e) => H === e ? b(W === "asc" ? w : S, { className: "w-4 h-4 text-primary" }) : /* @__PURE__ */ b(C, { className: "w-4 h-4 text-muted-foreground/50" }), re = (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 "-";
+	};
+	return ee ? /* @__PURE__ */ x("div", {
+		className: m("space-y-4", R),
+		children: [k && /* @__PURE__ */ b("div", {
+			className: "flex items-center gap-4",
+			children: /* @__PURE__ */ b(t, { className: "h-10 w-64" })
+		}), /* @__PURE__ */ b("div", {
+			className: "rounded-md border",
+			children: /* @__PURE__ */ x(i, { children: [/* @__PURE__ */ b(o, { children: /* @__PURE__ */ b(p, { children: f.map((e) => /* @__PURE__ */ b(r, { children: /* @__PURE__ */ b(t, { className: "h-4 w-20" }) }, e.id)) }) }), /* @__PURE__ */ b(u, { children: Array.from({ length: 5 }).map((e, n) => /* @__PURE__ */ b(p, { children: f.map((e) => /* @__PURE__ */ b(d, { children: /* @__PURE__ */ b(t, { className: "h-4 w-full max-w-[100px]" }) }, e.id)) }, n)) })] })
+		})]
+	}) : /* @__PURE__ */ x("div", {
+		className: m("space-y-4", R),
+		children: [
+			k && /* @__PURE__ */ b("div", {
+				className: "flex items-center gap-4",
+				children: /* @__PURE__ */ x("div", {
+					className: "relative flex-1 max-w-sm",
+					children: [/* @__PURE__ */ b(_, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ b(e, {
+						placeholder: A,
+						value: B,
+						onChange: (e) => {
+							V(e.target.value), q(1);
+						},
+						className: "pl-9"
+					})]
+				})
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "rounded-md border",
+				children: /* @__PURE__ */ x(i, { children: [/* @__PURE__ */ b(o, { children: /* @__PURE__ */ b(p, { children: f.map((e) => /* @__PURE__ */ b(r, {
+					className: m(e.sortable && "cursor-pointer select-none hover:bg-muted/50", e.headerClassName),
+					onClick: () => e.sortable && te(e.id),
+					children: /* @__PURE__ */ x("div", {
+						className: "flex items-center gap-2",
+						children: [e.header, e.sortable && ne(e.id)]
+					})
+				}, e.id)) }) }), /* @__PURE__ */ b(u, { children: Q.length === 0 ? /* @__PURE__ */ b(p, { children: /* @__PURE__ */ b(d, {
+					colSpan: f.length,
+					className: "h-24 text-center",
+					children: /* @__PURE__ */ b("p", {
+						className: "text-muted-foreground",
+						children: L
+					})
+				}) }) : Q.map((e, t) => {
+					let n = z ? z(e) : t, r = typeof I == "function" ? I(e) : I;
+					return /* @__PURE__ */ b(p, {
+						className: m(F && "cursor-pointer hover:bg-muted/50", r),
+						onClick: () => F?.(e),
+						children: f.map((t) => /* @__PURE__ */ b(d, {
+							className: t.className,
+							children: re(e, t)
+						}, t.id))
+					}, n);
+				}) })] })
+			}),
+			M && Z.length > 0 && /* @__PURE__ */ x("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ x("div", {
+					className: "flex items-center gap-2 text-sm text-muted-foreground",
+					children: [
+						/* @__PURE__ */ x("span", { children: [
+							"Showing ",
+							(K - 1) * J + 1,
+							" to",
+							" ",
+							Math.min(K * J, Z.length),
+							" of ",
+							Z.length
+						] }),
+						/* @__PURE__ */ x(c, {
+							value: String(J),
+							onValueChange: (e) => {
+								Y(Number(e)), q(1);
+							},
+							children: [/* @__PURE__ */ b(s, {
+								className: "w-[70px] h-8",
+								children: /* @__PURE__ */ b(l, {})
+							}), /* @__PURE__ */ b(n, { children: P.map((e) => /* @__PURE__ */ b(a, {
+								value: String(e),
+								children: e
+							}, e)) })]
+						}),
+						/* @__PURE__ */ b("span", { children: "per page" })
+					]
+				}), /* @__PURE__ */ x("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ b(h, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => q(1),
+							disabled: K === 1,
+							children: /* @__PURE__ */ b(E, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ b(h, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => q((e) => Math.max(1, e - 1)),
+							disabled: K === 1,
+							children: /* @__PURE__ */ b(T, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ x("span", {
+							className: "px-3 text-sm",
+							children: [
+								"Page ",
+								K,
+								" of ",
+								$
+							]
+						}),
+						/* @__PURE__ */ b(h, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => q((e) => Math.min($, e + 1)),
+							disabled: K === $,
+							children: /* @__PURE__ */ b(g, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ b(h, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => q($),
+							disabled: K === $,
+							children: /* @__PURE__ */ b(D, { className: "h-4 w-4" })
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { O as t };