@burdenoff/microfe-channel 2026.624.3 → 2026.625.2

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

@@ -5,21 +5,22 @@ 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 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";
+import { AlertCircle as u, ArrowLeft as ee, CheckCircle2 as d, ChevronLeft as te, ChevronRight as f, Clock as p, Download as m, Loader2 as h, RefreshCw as g, RotateCcw as _, Send as v, XCircle as y } from "lucide-react";
+import { useNavigate as ne, useParams as re } from "react-router-dom";
+import { usePermissions as b } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as ie, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { CTAOverflowMenu as ae, GlassCard as oe, IllustratedEmptyState as C, ResponsiveTable as w } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/DeliveryHistoryPage.tsx
 var T = {
 	PENDING: {
 		label: "Pending",
 		color: "text-text-secondary bg-bg-sunken",
-		icon: m
+		icon: p
 	},
 	QUEUED: {
 		label: "Queued",
 		color: "text-accent-primary bg-accent-primary-subtle",
-		icon: m
+		icon: p
 	},
 	SENDING: {
 		label: "Sending",
@@ -29,12 +30,12 @@ var T = {
 	SENT: {
 		label: "Sent",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: f
+		icon: d
 	},
 	DELIVERED: {
 		label: "Delivered",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: f
+		icon: d
 	},
 	FAILED: {
 		label: "Failed",
@@ -54,106 +55,106 @@ var T = {
 	RATE_LIMITED: {
 		label: "Rate Limited",
 		color: "text-status-warning-text bg-status-warning-bg-subtle",
-		icon: m
+		icon: p
 	},
 	RETRYING: {
 		label: "Retrying",
 		color: "text-accent-primary bg-accent-primary/10",
-		icon: _
+		icon: g
 	},
 	OPENED: {
 		label: "Opened",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: f
+		icon: d
 	},
 	CLICKED: {
 		label: "Clicked",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: f
+		icon: d
 	}
 };
 function E() {
-	let { channelId: f } = x(), m = b(), { t: y } = l(), E = (e, t) => {
-		let n = y(e);
+	let { channelId: d } = re(), p = ne(), { hasPermission: v } = b(), y = v(r.CHANNEL_DELIVERY_EXPORT), { t: E } = l(), D = (e, t) => {
+		let n = E(e);
 		return n === e ? t : n;
-	}, { 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);
+	}, { organizationId: O } = e(), { triggerExport: k, isExporting: A, exportError: j } = i(O ?? void 0, d), [M, N] = c(!0), [P, se] = c([]), [F, I] = c(null), [L, R] = c(null), [z, B] = c(25), [V, H] = c(0), [U, W] = c([void 0]), [G, K] = c(0), { channel: q, isLoading: ce, error: J, fetchDeliveryAttempts: Y, retryDelivery: le } = t(d), X = a(async (e) => {
+		if (d) {
+			N(!0), R(null);
 			try {
-				let t = await Y(R, e);
-				return N(t.items), V(t.total), t.nextCursor;
+				let t = await Y(z, e);
+				return se(t.items), H(t.total), t.nextCursor;
 			} finally {
-				j(!1);
+				N(!1);
 			}
 		}
 	}, [
-		f,
+		d,
 		Y,
-		R
-	]), Z = s(X), Q = s(H);
+		z
+	]), Z = s(X), Q = s(U);
 	o(() => {
-		Z.current = X, Q.current = H;
+		Z.current = X, Q.current = U;
 	});
 	let $ = s(!0);
 	o(() => {
 		Promise.resolve().then(() => {
-			U([void 0]), G(0), Z.current(void 0);
+			W([void 0]), K(0), Z.current(void 0);
 		});
-	}, [R]), o(() => {
+	}, [z]), o(() => {
 		if ($.current) {
 			$.current = !1;
 			return;
 		}
-		Promise.resolve().then(() => Z.current(Q.current[W]));
-	}, [W]), o(() => {
-		if (!f || W !== 0) return;
+		Promise.resolve().then(() => Z.current(Q.current[G]));
+	}, [G]), o(() => {
+		if (!d || G !== 0) return;
 		let e = setInterval(() => {
 			X(void 0);
 		}, 6e4);
 		return () => clearInterval(e);
 	}, [
-		f,
-		W,
+		d,
+		G,
 		X
 	]);
-	let ae = a(async () => {
-		let e = await X(H[W]);
-		e && U((t) => {
+	let ue = a(async () => {
+		let e = await X(U[G]);
+		e && W((t) => {
 			let n = [...t];
-			return n[W + 1] || (n[W + 1] = e), n;
-		}), G((e) => e + 1);
+			return n[G + 1] || (n[G + 1] = e), n;
+		}), K((e) => e + 1);
 	}, [
-		H,
-		W,
+		U,
+		G,
 		X
-	]), oe = a(() => {
-		let e = W - 1;
-		G(e), X(H[e]);
+	]), de = a(() => {
+		let e = G - 1;
+		K(e), X(U[e]);
 	}, [
-		H,
-		W,
+		U,
+		G,
 		X
-	]), se = M.length === R, ce = W > 0, le = async (e) => {
-		F(e), L(null);
+	]), fe = P.length === z, pe = G > 0, me = async (e) => {
+		I(e), R(null);
 		try {
-			let t = await ie(e);
-			t.success ? await X(H[W]) : L(t.error || "Retry failed");
+			let t = await le(e);
+			t.success ? await X(U[G]) : R(t.error || "Retry failed");
 		} finally {
-			F(null);
+			I(null);
 		}
-	}, ue = (e) => T[e] || T.PENDING, de = [
+	}, he = (e) => T[e] || T.PENDING, ge = [
 		{
 			key: "status",
-			header: E("channel.status", "Status"),
+			header: D("channel.status", "Status"),
 			priority: "primary",
 			cell: (e) => {
-				let t = ue(e.status), n = t.icon;
-				return /* @__PURE__ */ C("div", {
+				let t = he(e.status), n = t.icon;
+				return /* @__PURE__ */ S("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ S(n, {
+					children: [/* @__PURE__ */ x(n, {
 						size: 14,
 						className: t.color.split(" ")[0]
-					}), /* @__PURE__ */ S("span", {
+					}), /* @__PURE__ */ x("span", {
 						className: `text-sm font-medium ${t.color}`,
 						children: t.label
 					})]
@@ -162,260 +163,244 @@ function E() {
 		},
 		{
 			key: "content",
-			header: E("channel.content", "Content"),
+			header: D("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"),
+			header: D("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"),
+			header: D("channel.retries", "Retries"),
 			priority: "secondary",
 			cellClassName: "text-sm text-text-secondary tabular-nums",
 			cell: (e) => e.retryCount
 		},
 		{
 			key: "error",
-			header: E("channel.error", "Error"),
+			header: D("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"),
+			header: D("channel.actions", "Actions"),
 			priority: "secondary",
-			cell: (e) => e.status === "FAILED" || e.status === "BOUNCED" || e.status === "REJECTED" ? /* @__PURE__ */ S(n, {
+			cell: (e) => e.status === "FAILED" || e.status === "BOUNCED" || e.status === "REJECTED" ? /* @__PURE__ */ x(n, {
 				permission: r.CHANNEL_DELIVERY_EXECUTE,
-				children: /* @__PURE__ */ C("button", {
+				children: /* @__PURE__ */ S("button", {
 					type: "button",
-					onClick: () => le(e.id),
-					disabled: P === e.id,
+					onClick: () => me(e.id),
+					disabled: F === 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, {
+					title: D("channel.retryDelivery", "Retry this delivery"),
+					children: [/* @__PURE__ */ x(_, {
 						size: 12,
-						className: P === e.id ? "animate-spin" : ""
-					}), P === e.id ? E("channel.retrying", "Retrying...") : E("channel.retry", "Retry")]
+						className: F === e.id ? "animate-spin" : ""
+					}), F === e.id ? D("channel.retrying", "Retrying...") : D("channel.retry", "Retry")]
 				})
 			}) : null
 		}
 	];
-	return q ? /* @__PURE__ */ S("output", {
+	return ce ? /* @__PURE__ */ x("output", {
 		className: "flex items-center justify-center min-h-screen",
-		"aria-label": E("channel.loading", "Loading"),
-		children: /* @__PURE__ */ S(g, {
+		"aria-label": D("channel.loading", "Loading"),
+		children: /* @__PURE__ */ x(h, {
 			size: 32,
 			className: "animate-spin text-accent-primary",
 			"aria-hidden": "true"
 		})
-	}) : J || !K ? /* @__PURE__ */ S("div", {
+	}) : J || !q ? /* @__PURE__ */ x("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ S("div", {
 			className: "flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg",
 			children: [
-				/* @__PURE__ */ S(u, {
+				/* @__PURE__ */ x(u, {
 					size: 20,
 					className: "text-status-error-text"
 				}),
-				/* @__PURE__ */ S("div", { children: /* @__PURE__ */ S("p", {
+				/* @__PURE__ */ x("div", { children: /* @__PURE__ */ x("p", {
 					className: "text-sm font-medium text-status-error-text",
 					children: J || "Channel not found"
 				}) }),
-				/* @__PURE__ */ S("button", {
+				/* @__PURE__ */ x("button", {
 					type: "button",
-					onClick: () => m(`/channels/${f}`),
+					onClick: () => p(`/channels/${d}`),
 					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"
 				})
 			]
 		})
-	}) : /* @__PURE__ */ S(n, {
+	}) : /* @__PURE__ */ x(n, {
 		permission: r.CHANNEL_DELIVERY_READ,
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ S("div", {
 			className: "space-y-6 p-3 sm:p-6",
 			children: [
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ S("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ C("div", {
+					children: [/* @__PURE__ */ S("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ S("button", {
+						children: [/* @__PURE__ */ x("button", {
 							type: "button",
-							onClick: () => m(`/channels/${f}`),
-							"aria-label": E("channel.backToChannel", "Back to channel"),
+							onClick: () => p(`/channels/${d}`),
+							"aria-label": D("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, {
+							children: /* @__PURE__ */ x(ee, {
 								size: 20,
 								"aria-hidden": "true"
 							})
-						}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h1", {
+						}), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h1", {
 							className: "text-xl sm:text-2xl font-bold text-text-primary",
-							children: E("channel.deliveryHistory", "Delivery History")
-						}), /* @__PURE__ */ C("p", {
+							children: D("channel.deliveryHistory", "Delivery History")
+						}), /* @__PURE__ */ S("p", {
 							className: "text-sm text-text-secondary mt-1",
-							children: [K.name, " - Message deliveries"]
+							children: [q.name, " - Message deliveries"]
 						})] })]
-					}), /* @__PURE__ */ C("div", {
+					}), /* @__PURE__ */ S("div", {
 						className: "flex items-center gap-3",
-						children: [
-							/* @__PURE__ */ C("select", {
-								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,
-										children: "10 results"
-									}),
-									/* @__PURE__ */ S("option", {
-										value: 25,
-										children: "25 results"
-									}),
-									/* @__PURE__ */ S("option", {
-										value: 50,
-										children: "50 results"
-									}),
-									/* @__PURE__ */ S("option", {
-										value: 100,
-										children: "100 results"
-									})
-								]
+						children: [/* @__PURE__ */ S("select", {
+							value: z,
+							onChange: (e) => B(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__ */ x("option", {
+									value: 10,
+									children: "10 results"
+								}),
+								/* @__PURE__ */ x("option", {
+									value: 25,
+									children: "25 results"
+								}),
+								/* @__PURE__ */ x("option", {
+									value: 50,
+									children: "50 results"
+								}),
+								/* @__PURE__ */ x("option", {
+									value: 100,
+									children: "100 results"
+								})
+							]
+						}), /* @__PURE__ */ x(ae, { actions: [{
+							label: D("channel.refresh", "Refresh"),
+							icon: /* @__PURE__ */ x(g, {
+								size: 16,
+								className: M ? "animate-spin" : "",
+								"aria-hidden": "true"
 							}),
-							/* @__PURE__ */ C("button", {
-								type: "button",
-								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: A ? "animate-spin" : ""
-								}), E("channel.refresh", "Refresh")]
+							disabled: M,
+							onSelect: () => void X(U[G])
+						}, ...y ? [{
+							label: D("channel.export", "Export"),
+							icon: A ? /* @__PURE__ */ x(h, {
+								size: 16,
+								className: "animate-spin",
+								"aria-hidden": "true"
+							}) : /* @__PURE__ */ x(m, {
+								size: 16,
+								"aria-hidden": "true"
 							}),
-							/* @__PURE__ */ S(n, {
-								permission: r.CHANNEL_DELIVERY_EXPORT,
-								children: /* @__PURE__ */ C("button", {
-									type: "button",
-									onClick: () => void re(),
-									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(h, { size: 16 }), E("channel.export", "Export")]
-								})
-							})
-						]
+							disabled: A,
+							onSelect: () => void k()
+						}] : []] })]
 					})]
 				}),
-				k && /* @__PURE__ */ C("div", {
+				j && /* @__PURE__ */ S("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3",
-					children: [/* @__PURE__ */ S(u, {
+					children: [/* @__PURE__ */ x(u, {
 						size: 20,
 						className: "text-status-error-text"
-					}), /* @__PURE__ */ S("p", {
+					}), /* @__PURE__ */ x("p", {
 						className: "text-sm text-status-error-text flex-1",
-						children: k
+						children: j
 					})]
 				}),
-				I && /* @__PURE__ */ C("div", {
+				L && /* @__PURE__ */ S("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3",
 					children: [
-						/* @__PURE__ */ S(u, {
+						/* @__PURE__ */ x(u, {
 							size: 20,
 							className: "text-status-error-text"
 						}),
-						/* @__PURE__ */ S("p", {
+						/* @__PURE__ */ x("p", {
 							className: "text-sm text-status-error-text flex-1",
-							children: I
+							children: L
 						}),
-						/* @__PURE__ */ S("button", {
+						/* @__PURE__ */ x("button", {
 							type: "button",
-							onClick: () => L(null),
+							onClick: () => R(null),
 							className: "text-status-error-text hover:text-status-error-text",
-							children: E("channel.dismiss", "Dismiss")
+							children: D("channel.dismiss", "Dismiss")
 						})
 					]
 				}),
-				/* @__PURE__ */ S("div", {
-					className: "p-4 bg-surface border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ S("p", {
+				/* @__PURE__ */ x(oe, {
+					treatment: "insight",
+					className: "p-4 border-border-seam",
+					children: /* @__PURE__ */ x("p", {
 						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."
 					})
 				}),
-				A ? /* @__PURE__ */ C("div", {
-					className: "bg-surface border border-border-subtle rounded-lg px-4 py-12 text-center",
-					children: [/* @__PURE__ */ S(g, {
+				M ? /* @__PURE__ */ S("div", {
+					className: "bg-surface border border-border-seam rounded-lg px-4 py-12 text-center",
+					children: [/* @__PURE__ */ x(h, {
 						size: 24,
 						className: "animate-spin text-accent-primary mx-auto"
-					}), /* @__PURE__ */ S("p", {
+					}), /* @__PURE__ */ x("p", {
 						className: "text-sm text-text-secondary mt-2",
 						children: "Loading delivery attempts…"
 					})]
-				}) : /* @__PURE__ */ S(w, {
-					columns: de,
-					data: M,
+				}) : /* @__PURE__ */ x(w, {
+					columns: ge,
+					data: P,
 					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")
-							})
-						]
+					className: "bg-surface border border-border-seam rounded-lg",
+					emptyState: /* @__PURE__ */ x(C, {
+						illustration: "empty-notifications",
+						title: D("channel.noDeliveryAttempts", "No delivery attempts yet"),
+						description: D("channel.sendMessageToSeeHistory", "Send a message through this channel to see delivery history")
 					})
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ S("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ S("p", {
+					children: [/* @__PURE__ */ x("p", {
 						className: "text-sm text-text-secondary",
-						children: B > 0 && /* @__PURE__ */ C(ne, { children: [
-							E("channel.page", "Page"),
+						children: V > 0 && /* @__PURE__ */ S(ie, { children: [
+							D("channel.page", "Page"),
 							" ",
-							/* @__PURE__ */ S("span", {
+							/* @__PURE__ */ x("span", {
 								className: "font-medium",
-								children: W + 1
+								children: G + 1
 							}),
 							" · ",
-							E("channel.totalRecords", "Total"),
+							D("channel.totalRecords", "Total"),
 							": ",
-							/* @__PURE__ */ S("span", {
+							/* @__PURE__ */ x("span", {
 								className: "font-medium",
-								children: B
+								children: V
 							})
 						] })
-					}), /* @__PURE__ */ C("div", {
+					}), /* @__PURE__ */ S("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ C("button", {
+						children: [/* @__PURE__ */ S("button", {
 							type: "button",
-							onClick: oe,
-							disabled: !ce || A,
+							onClick: de,
+							disabled: !pe || M,
 							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", {
+							children: [/* @__PURE__ */ x(te, { size: 16 }), D("channel.previous", "Previous")]
+						}), /* @__PURE__ */ S("button", {
 							type: "button",
-							onClick: () => void ae(),
-							disabled: !se || A,
+							onClick: () => void ue(),
+							disabled: !fe || M,
 							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 })]
+							children: [D("channel.next", "Next"), /* @__PURE__ */ x(f, { size: 16 })]
 						})]
 					})]
 				})