@burdenoff/microfe-channel 2026.608.1 → 2026.624.2

package/dist/channel/modules/channels/pages/DeliveryHistoryPage.js

@@ -4,167 +4,234 @@ import { PermissionGuard as n } from "../../../components/PermissionGuard.js";
 import { CHANNEL_PERMISSIONS as r } from "../../../constants/permissions.js";
 import { useExportDeliveryAttempts as i } from "../hooks/useExport.js";
 import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
-import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as l, ArrowLeft as u, CheckCircle2 as d, ChevronLeft as te, ChevronRight as ne, Clock as f, Download as p, Loader2 as m, RefreshCw as h, RotateCcw as g, Send as _, XCircle as v } from "lucide-react";
-import { useNavigate as y, useParams as b } from "react-router-dom";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as u, ArrowLeft as d, CheckCircle2 as f, ChevronLeft as ee, ChevronRight as p, Clock as m, Download as h, Loader2 as g, RefreshCw as _, RotateCcw as te, Send as v, XCircle as y } from "lucide-react";
+import { useNavigate as b, useParams as x } from "react-router-dom";
+import { Fragment as ne, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { ResponsiveTable as w } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/DeliveryHistoryPage.tsx
-var w = {
+var T = {
 	PENDING: {
 		label: "Pending",
-		color: "text-muted-foreground bg-muted",
-		icon: f
+		color: "text-text-secondary bg-bg-sunken",
+		icon: m
 	},
 	QUEUED: {
 		label: "Queued",
 		color: "text-accent-primary bg-accent-primary-subtle",
-		icon: f
+		icon: m
 	},
 	SENDING: {
 		label: "Sending",
 		color: "text-accent-primary bg-accent-primary/10",
-		icon: _
+		icon: v
 	},
 	SENT: {
 		label: "Sent",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: d
+		icon: f
 	},
 	DELIVERED: {
 		label: "Delivered",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: d
+		icon: f
 	},
 	FAILED: {
 		label: "Failed",
 		color: "text-status-error-text bg-status-error-bg-subtle",
-		icon: v
+		icon: y
 	},
 	BOUNCED: {
 		label: "Bounced",
 		color: "text-status-warning-text bg-status-warning-bg-subtle",
-		icon: l
+		icon: u
 	},
 	REJECTED: {
 		label: "Rejected",
 		color: "text-status-error-text bg-status-error-bg-subtle",
-		icon: v
+		icon: y
 	},
 	RATE_LIMITED: {
 		label: "Rate Limited",
 		color: "text-status-warning-text bg-status-warning-bg-subtle",
-		icon: f
+		icon: m
 	},
 	RETRYING: {
 		label: "Retrying",
 		color: "text-accent-primary bg-accent-primary/10",
-		icon: h
+		icon: _
 	},
 	OPENED: {
 		label: "Opened",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: d
+		icon: f
 	},
 	CLICKED: {
 		label: "Clicked",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: d
+		icon: f
 	}
 };
-function T() {
-	let { channelId: d } = b(), f = y(), { t: v } = ee(), T = (e, t) => {
-		let n = v(e);
+function E() {
+	let { channelId: f } = x(), m = b(), { t: y } = l(), E = (e, t) => {
+		let n = y(e);
 		return n === e ? t : n;
-	}, { organizationId: E } = e(), { triggerExport: re, isExporting: D, exportError: O } = i(E ?? void 0, d), [k, A] = c(!0), [j, M] = c([]), [N, P] = c(null), [F, I] = c(null), [L, R] = c(25), [z, B] = c(0), [V, H] = c([void 0]), [U, W] = c(0), { channel: G, isLoading: K, error: q, fetchDeliveryAttempts: J, retryDelivery: Y } = t(d), X = a(async (e) => {
-		if (d) {
-			A(!0), I(null);
+	}, { organizationId: D } = e(), { triggerExport: re, isExporting: O, exportError: k } = i(D ?? void 0, f), [A, j] = c(!0), [M, N] = c([]), [P, F] = c(null), [I, L] = c(null), [R, z] = c(25), [B, V] = c(0), [H, U] = c([void 0]), [W, G] = c(0), { channel: K, isLoading: q, error: J, fetchDeliveryAttempts: Y, retryDelivery: ie } = t(f), X = a(async (e) => {
+		if (f) {
+			j(!0), L(null);
 			try {
-				let t = await J(L, e);
-				return M(t.items), B(t.total), t.nextCursor;
+				let t = await Y(R, e);
+				return N(t.items), V(t.total), t.nextCursor;
 			} finally {
-				A(!1);
+				j(!1);
 			}
 		}
 	}, [
-		d,
-		J,
-		L
-	]), Z = s(X), Q = s(V);
+		f,
+		Y,
+		R
+	]), Z = s(X), Q = s(H);
 	o(() => {
-		Z.current = X, Q.current = V;
+		Z.current = X, Q.current = H;
 	});
 	let $ = s(!0);
 	o(() => {
 		Promise.resolve().then(() => {
-			H([void 0]), W(0), Z.current(void 0);
+			U([void 0]), G(0), Z.current(void 0);
 		});
-	}, [L]), o(() => {
+	}, [R]), o(() => {
 		if ($.current) {
 			$.current = !1;
 			return;
 		}
-		Promise.resolve().then(() => Z.current(Q.current[U]));
-	}, [U]), o(() => {
-		if (!d || U !== 0) return;
+		Promise.resolve().then(() => Z.current(Q.current[W]));
+	}, [W]), o(() => {
+		if (!f || W !== 0) return;
 		let e = setInterval(() => {
 			X(void 0);
 		}, 6e4);
 		return () => clearInterval(e);
 	}, [
-		d,
-		U,
+		f,
+		W,
 		X
 	]);
-	let ie = a(async () => {
-		let e = await X(V[U]);
-		e && H((t) => {
+	let ae = a(async () => {
+		let e = await X(H[W]);
+		e && U((t) => {
 			let n = [...t];
-			return n[U + 1] || (n[U + 1] = e), n;
-		}), W((e) => e + 1);
+			return n[W + 1] || (n[W + 1] = e), n;
+		}), G((e) => e + 1);
 	}, [
-		V,
-		U,
+		H,
+		W,
 		X
-	]), ae = a(() => {
-		let e = U - 1;
-		W(e), X(V[e]);
+	]), oe = a(() => {
+		let e = W - 1;
+		G(e), X(H[e]);
 	}, [
-		V,
-		U,
+		H,
+		W,
 		X
-	]), oe = j.length === L, se = U > 0, ce = async (e) => {
-		P(e), I(null);
+	]), se = M.length === R, ce = W > 0, le = async (e) => {
+		F(e), L(null);
 		try {
-			let t = await Y(e);
-			t.success ? await X(V[U]) : I(t.error || "Retry failed");
+			let t = await ie(e);
+			t.success ? await X(H[W]) : L(t.error || "Retry failed");
 		} finally {
-			P(null);
+			F(null);
+		}
+	}, ue = (e) => T[e] || T.PENDING, de = [
+		{
+			key: "status",
+			header: E("channel.status", "Status"),
+			priority: "primary",
+			cell: (e) => {
+				let t = ue(e.status), n = t.icon;
+				return /* @__PURE__ */ C("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ S(n, {
+						size: 14,
+						className: t.color.split(" ")[0]
+					}), /* @__PURE__ */ S("span", {
+						className: `text-sm font-medium ${t.color}`,
+						children: t.label
+					})]
+				});
+			}
+		},
+		{
+			key: "content",
+			header: E("channel.content", "Content"),
+			priority: "primary",
+			cellClassName: "text-sm text-text-primary truncate max-w-xs",
+			cell: (e) => e.content
+		},
+		{
+			key: "sentAt",
+			header: E("channel.sentAt", "Sent At"),
+			priority: "secondary",
+			cellClassName: "text-sm text-text-secondary",
+			cell: (e) => e.sentAt ? new Date(e.sentAt).toLocaleString() : "-"
+		},
+		{
+			key: "retries",
+			header: E("channel.retries", "Retries"),
+			priority: "secondary",
+			cellClassName: "text-sm text-text-secondary tabular-nums",
+			cell: (e) => e.retryCount
+		},
+		{
+			key: "error",
+			header: E("channel.error", "Error"),
+			priority: "secondary",
+			cellClassName: "text-sm text-status-error-text max-w-xs truncate",
+			cell: (e) => e.errorMessage || "-"
+		},
+		{
+			key: "actions",
+			header: E("channel.actions", "Actions"),
+			priority: "secondary",
+			cell: (e) => e.status === "FAILED" || e.status === "BOUNCED" || e.status === "REJECTED" ? /* @__PURE__ */ S(n, {
+				permission: r.CHANNEL_DELIVERY_EXECUTE,
+				children: /* @__PURE__ */ C("button", {
+					type: "button",
+					onClick: () => le(e.id),
+					disabled: P === e.id,
+					className: "flex items-center gap-1 px-2 py-1 text-xs font-medium text-accent-primary hover:bg-accent-primary/10 rounded transition-colors disabled:opacity-50",
+					title: E("channel.retryDelivery", "Retry this delivery"),
+					children: [/* @__PURE__ */ S(te, {
+						size: 12,
+						className: P === e.id ? "animate-spin" : ""
+					}), P === e.id ? E("channel.retrying", "Retrying...") : E("channel.retry", "Retry")]
+				})
+			}) : null
 		}
-	}, le = (e) => w[e] || w.PENDING;
-	return K ? /* @__PURE__ */ S("output", {
+	];
+	return q ? /* @__PURE__ */ S("output", {
 		className: "flex items-center justify-center min-h-screen",
-		"aria-label": T("channel.loading", "Loading"),
-		children: /* @__PURE__ */ S(m, {
+		"aria-label": E("channel.loading", "Loading"),
+		children: /* @__PURE__ */ S(g, {
 			size: 32,
 			className: "animate-spin text-accent-primary",
 			"aria-hidden": "true"
 		})
-	}) : q || !G ? /* @__PURE__ */ S("div", {
+	}) : J || !K ? /* @__PURE__ */ S("div", {
 		className: "p-6",
 		children: /* @__PURE__ */ C("div", {
 			className: "flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg",
 			children: [
-				/* @__PURE__ */ S(l, {
+				/* @__PURE__ */ S(u, {
 					size: 20,
 					className: "text-status-error-text"
 				}),
 				/* @__PURE__ */ S("div", { children: /* @__PURE__ */ S("p", {
 					className: "text-sm font-medium text-status-error-text",
-					children: q || "Channel not found"
+					children: J || "Channel not found"
 				}) }),
 				/* @__PURE__ */ S("button", {
 					type: "button",
-					onClick: () => f(`/channels/${d}`),
+					onClick: () => m(`/channels/${f}`),
 					className: "ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
 					children: "Go Back"
 				})
@@ -181,27 +248,27 @@ function T() {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ S("button", {
 							type: "button",
-							onClick: () => f(`/channels/${d}`),
-							"aria-label": T("channel.backToChannel", "Back to channel"),
-							className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors",
-							children: /* @__PURE__ */ S(u, {
+							onClick: () => m(`/channels/${f}`),
+							"aria-label": E("channel.backToChannel", "Back to channel"),
+							className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors",
+							children: /* @__PURE__ */ S(d, {
 								size: 20,
 								"aria-hidden": "true"
 							})
 						}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h1", {
-							className: "text-xl sm:text-2xl font-bold text-foreground",
-							children: T("channel.deliveryHistory", "Delivery History")
+							className: "text-xl sm:text-2xl font-bold text-text-primary",
+							children: E("channel.deliveryHistory", "Delivery History")
 						}), /* @__PURE__ */ C("p", {
-							className: "text-sm text-muted-foreground mt-1",
-							children: [G.name, " - Message deliveries"]
+							className: "text-sm text-text-secondary mt-1",
+							children: [K.name, " - Message deliveries"]
 						})] })]
 					}), /* @__PURE__ */ C("div", {
 						className: "flex items-center gap-3",
 						children: [
 							/* @__PURE__ */ C("select", {
-								value: L,
-								onChange: (e) => R(Number(e.target.value)),
-								className: "px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-foreground",
+								value: R,
+								onChange: (e) => z(Number(e.target.value)),
+								className: "px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-text-primary",
 								children: [
 									/* @__PURE__ */ S("option", {
 										value: 10,
@@ -223,224 +290,132 @@ function T() {
 							}),
 							/* @__PURE__ */ C("button", {
 								type: "button",
-								onClick: () => void X(V[U]),
-								disabled: k,
-								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50",
-								children: [/* @__PURE__ */ S(h, {
+								onClick: () => void X(H[W]),
+								disabled: A,
+								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50",
+								children: [/* @__PURE__ */ S(_, {
 									size: 16,
-									className: k ? "animate-spin" : ""
-								}), T("channel.refresh", "Refresh")]
+									className: A ? "animate-spin" : ""
+								}), E("channel.refresh", "Refresh")]
 							}),
 							/* @__PURE__ */ S(n, {
 								permission: r.CHANNEL_DELIVERY_EXPORT,
 								children: /* @__PURE__ */ C("button", {
 									type: "button",
 									onClick: () => void re(),
-									disabled: D,
-									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-									title: T("channel.exportCSV", "Export to CSV"),
-									children: [D ? /* @__PURE__ */ S(m, {
+									disabled: O,
+									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border-subtle hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+									title: E("channel.exportCSV", "Export to CSV"),
+									children: [O ? /* @__PURE__ */ S(g, {
 										size: 16,
 										className: "animate-spin"
-									}) : /* @__PURE__ */ S(p, { size: 16 }), T("channel.export", "Export")]
+									}) : /* @__PURE__ */ S(h, { size: 16 }), E("channel.export", "Export")]
 								})
 							})
 						]
 					})]
 				}),
-				O && /* @__PURE__ */ C("div", {
+				k && /* @__PURE__ */ C("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3",
-					children: [/* @__PURE__ */ S(l, {
+					children: [/* @__PURE__ */ S(u, {
 						size: 20,
 						className: "text-status-error-text"
 					}), /* @__PURE__ */ S("p", {
 						className: "text-sm text-status-error-text flex-1",
-						children: O
+						children: k
 					})]
 				}),
-				F && /* @__PURE__ */ C("div", {
+				I && /* @__PURE__ */ C("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3",
 					children: [
-						/* @__PURE__ */ S(l, {
+						/* @__PURE__ */ S(u, {
 							size: 20,
 							className: "text-status-error-text"
 						}),
 						/* @__PURE__ */ S("p", {
 							className: "text-sm text-status-error-text flex-1",
-							children: F
+							children: I
 						}),
 						/* @__PURE__ */ S("button", {
 							type: "button",
-							onClick: () => I(null),
+							onClick: () => L(null),
 							className: "text-status-error-text hover:text-status-error-text",
-							children: T("channel.dismiss", "Dismiss")
+							children: E("channel.dismiss", "Dismiss")
 						})
 					]
 				}),
 				/* @__PURE__ */ S("div", {
-					className: "p-4 bg-surface border border-border rounded-lg",
+					className: "p-4 bg-surface border border-border-subtle rounded-lg",
 					children: /* @__PURE__ */ S("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: "Delivery history shows all message attempts sent through this channel. Data is retained for 7 days. Click retry on a failed delivery to attempt sending again."
 					})
 				}),
-				/* @__PURE__ */ S("div", {
-					className: "bg-surface border border-border rounded-lg overflow-hidden",
-					children: /* @__PURE__ */ S("div", {
-						className: "overflow-x-auto min-w-full",
-						children: /* @__PURE__ */ C("table", {
-							className: "w-full min-w-[700px]",
-							children: [/* @__PURE__ */ S("thead", {
-								className: "bg-muted/50 border-b border-border",
-								children: /* @__PURE__ */ C("tr", { children: [
-									/* @__PURE__ */ S("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: T("channel.status", "Status")
-									}),
-									/* @__PURE__ */ S("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: T("channel.content", "Content")
-									}),
-									/* @__PURE__ */ S("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: T("channel.sentAt", "Sent At")
-									}),
-									/* @__PURE__ */ S("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: T("channel.retries", "Retries")
-									}),
-									/* @__PURE__ */ S("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: T("channel.error", "Error")
-									}),
-									/* @__PURE__ */ S("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: T("channel.actions", "Actions")
-									})
-								] })
-							}), /* @__PURE__ */ S("tbody", {
-								className: "divide-y divide-border",
-								children: k ? /* @__PURE__ */ S("tr", { children: /* @__PURE__ */ C("td", {
-									colSpan: 6,
-									className: "px-4 py-12 text-center",
-									children: [/* @__PURE__ */ S(m, {
-										size: 24,
-										className: "animate-spin text-accent-primary mx-auto"
-									}), /* @__PURE__ */ S("p", {
-										className: "text-sm text-muted-foreground mt-2",
-										children: "Loading delivery attempts…"
-									})]
-								}) }) : j.length === 0 ? /* @__PURE__ */ S("tr", { children: /* @__PURE__ */ S("td", {
-									colSpan: 6,
-									className: "px-4 py-12 text-center",
-									children: /* @__PURE__ */ C("div", {
-										className: "flex flex-col items-center gap-2",
-										children: [
-											/* @__PURE__ */ S(_, {
-												size: 32,
-												className: "text-muted-foreground"
-											}),
-											/* @__PURE__ */ S("p", {
-												className: "text-sm font-medium text-foreground",
-												children: T("channel.noDeliveryAttempts", "No delivery attempts yet")
-											}),
-											/* @__PURE__ */ S("p", {
-												className: "text-xs text-muted-foreground",
-												children: T("channel.sendMessageToSeeHistory", "Send a message through this channel to see delivery history")
-											})
-										]
-									})
-								}) }) : j.map((e) => {
-									let t = le(e.status), i = t.icon, a = e.status === "FAILED" || e.status === "BOUNCED" || e.status === "REJECTED";
-									return /* @__PURE__ */ C("tr", {
-										className: "hover:bg-muted/30 transition-colors",
-										children: [
-											/* @__PURE__ */ S("td", {
-												className: "px-4 py-3",
-												children: /* @__PURE__ */ C("div", {
-													className: "flex items-center gap-2",
-													children: [/* @__PURE__ */ S(i, {
-														size: 14,
-														className: t.color.split(" ")[0]
-													}), /* @__PURE__ */ S("span", {
-														className: `text-sm font-medium ${t.color}`,
-														children: t.label
-													})]
-												})
-											}),
-											/* @__PURE__ */ S("td", {
-												className: "px-4 py-3 text-sm text-foreground truncate max-w-xs",
-												children: e.content
-											}),
-											/* @__PURE__ */ S("td", {
-												className: "px-4 py-3 text-sm text-muted-foreground",
-												children: e.sentAt ? new Date(e.sentAt).toLocaleString() : "-"
-											}),
-											/* @__PURE__ */ S("td", {
-												className: "px-4 py-3 text-sm text-muted-foreground",
-												children: e.retryCount
-											}),
-											/* @__PURE__ */ S("td", {
-												className: "px-4 py-3 text-sm text-status-error-text max-w-xs truncate",
-												children: e.errorMessage || "-"
-											}),
-											/* @__PURE__ */ S("td", {
-												className: "px-4 py-3",
-												children: a && /* @__PURE__ */ S(n, {
-													permission: r.CHANNEL_DELIVERY_EXECUTE,
-													children: /* @__PURE__ */ C("button", {
-														type: "button",
-														onClick: () => ce(e.id),
-														disabled: N === e.id,
-														className: "flex items-center gap-1 px-2 py-1 text-xs font-medium text-accent-primary hover:bg-accent-primary/10 rounded transition-colors disabled:opacity-50",
-														title: T("channel.retryDelivery", "Retry this delivery"),
-														children: [/* @__PURE__ */ S(g, {
-															size: 12,
-															className: N === e.id ? "animate-spin" : ""
-														}), N === e.id ? T("channel.retrying", "Retrying...") : T("channel.retry", "Retry")]
-													})
-												})
-											})
-										]
-									}, e.id);
-								})
-							})]
-						})
+				A ? /* @__PURE__ */ C("div", {
+					className: "bg-surface border border-border-subtle rounded-lg px-4 py-12 text-center",
+					children: [/* @__PURE__ */ S(g, {
+						size: 24,
+						className: "animate-spin text-accent-primary mx-auto"
+					}), /* @__PURE__ */ S("p", {
+						className: "text-sm text-text-secondary mt-2",
+						children: "Loading delivery attempts…"
+					})]
+				}) : /* @__PURE__ */ S(w, {
+					columns: de,
+					data: M,
+					rowKey: (e) => e.id,
+					className: "bg-surface border border-border-subtle rounded-lg",
+					emptyState: /* @__PURE__ */ C("div", {
+						className: "flex flex-col items-center gap-2 py-8",
+						children: [
+							/* @__PURE__ */ S(v, {
+								size: 32,
+								className: "text-text-secondary"
+							}),
+							/* @__PURE__ */ S("p", {
+								className: "text-sm font-medium text-text-primary",
+								children: E("channel.noDeliveryAttempts", "No delivery attempts yet")
+							}),
+							/* @__PURE__ */ S("p", {
+								className: "text-xs text-text-secondary",
+								children: E("channel.sendMessageToSeeHistory", "Send a message through this channel to see delivery history")
+							})
+						]
 					})
 				}),
 				/* @__PURE__ */ C("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ S("p", {
-						className: "text-sm text-muted-foreground",
-						children: z > 0 && /* @__PURE__ */ C(x, { children: [
-							T("channel.page", "Page"),
+						className: "text-sm text-text-secondary",
+						children: B > 0 && /* @__PURE__ */ C(ne, { children: [
+							E("channel.page", "Page"),
 							" ",
 							/* @__PURE__ */ S("span", {
 								className: "font-medium",
-								children: U + 1
+								children: W + 1
 							}),
 							" · ",
-							T("channel.totalRecords", "Total"),
+							E("channel.totalRecords", "Total"),
 							": ",
 							/* @__PURE__ */ S("span", {
 								className: "font-medium",
-								children: z
+								children: B
 							})
 						] })
 					}), /* @__PURE__ */ C("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ C("button", {
 							type: "button",
-							onClick: ae,
-							disabled: !se || k,
-							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-							children: [/* @__PURE__ */ S(te, { size: 16 }), T("channel.previous", "Previous")]
+							onClick: oe,
+							disabled: !ce || A,
+							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+							children: [/* @__PURE__ */ S(ee, { size: 16 }), E("channel.previous", "Previous")]
 						}), /* @__PURE__ */ C("button", {
 							type: "button",
-							onClick: () => void ie(),
-							disabled: !oe || k,
-							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-							children: [T("channel.next", "Next"), /* @__PURE__ */ S(ne, { size: 16 })]
+							onClick: () => void ae(),
+							disabled: !se || A,
+							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+							children: [E("channel.next", "Next"), /* @__PURE__ */ S(p, { size: 16 })]
 						})]
 					})]
 				})
@@ -449,6 +424,6 @@ function T() {
 	});
 }
 //#endregion
-export { T as DeliveryHistoryPage };
+export { E as DeliveryHistoryPage };
 
 //# sourceMappingURL=DeliveryHistoryPage.js.map