@burdenoff/microfe-channel 2026.625.1 → 2026.625.3

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

@@ -1,23 +1,23 @@
 import { useChannel as e } from "../../../providers/ChannelProvider.js";
 import { emitShellEvent as t } from "../../../utils/shellBridge.js";
 import { WEBHOOK_RECEIVED_SUBSCRIPTION as n, useChannelSubscription as r } from "../../../hooks/useChannelSubscription.js";
-import { useChannel as ee } from "../../../hooks/useChannels.js";
-import { PermissionGuard as i } from "../../../components/PermissionGuard.js";
-import { CHANNEL_PERMISSIONS as a } from "../../../constants/permissions.js";
-import { useExportWebhookEvents as o } from "../hooks/useExport.js";
+import { useChannel as i } from "../../../hooks/useChannels.js";
+import { PermissionGuard as a } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as o } from "../../../constants/permissions.js";
+import { useExportWebhookEvents as ee } from "../hooks/useExport.js";
 import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
 import { useI18n as te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as d, ArrowLeft as ne, CheckCircle2 as f, ChevronLeft as p, ChevronRight as m, Clock as h, Download as re, Eye as g, EyeOff as _, Loader2 as v, RefreshCw as y, XCircle as b } from "lucide-react";
-import { useNavigate as x, useParams as ie } from "react-router-dom";
-import { usePermissions as ae } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { CTAOverflowMenu as oe, GlassCard as T } from "@burdenoff/fe-libs/ui";
+import { AlertCircle as d, ArrowLeft as f, CheckCircle2 as p, ChevronLeft as m, ChevronRight as h, Clock as g, Download as ne, Eye as re, EyeOff as _, Loader2 as v, RefreshCw as y, XCircle as b } from "lucide-react";
+import { useNavigate as ie, useParams as x } from "react-router-dom";
+import { usePermissions as S } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { CTAOverflowMenu as ae, EmphasisPanel as E, GlassCard as oe, IllustratedEmptyState as se, PagePurpose as ce } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/WebhookEventsPage.tsx
-var E = {
+var D = {
 	PENDING: {
 		label: "Pending",
 		color: "text-text-secondary bg-bg-sunken",
-		icon: h
+		icon: g
 	},
 	PROCESSING: {
 		label: "Processing",
@@ -27,7 +27,7 @@ var E = {
 	COMPLETED: {
 		label: "Completed",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: f
+		icon: p
 	},
 	FAILED: {
 		label: "Failed",
@@ -40,24 +40,24 @@ var E = {
 		icon: _
 	}
 };
-function D() {
-	let { channelId: f } = ie(), h = x(), { hasPermission: b } = ae(), D = b(a.CHANNEL_WEBHOOK_EXPORT), { t: O } = te(), k = (e, t) => {
-		let n = O(e);
+function O() {
+	let { channelId: p } = x(), b = ie(), { hasPermission: O } = S(), le = O(o.CHANNEL_WEBHOOK_EXPORT), { t: ue } = te(), k = (e, t) => {
+		let n = ue(e);
 		return n === e ? t : n;
-	}, { organizationId: se } = e(), { triggerExport: ce, isExporting: A, exportError: j } = o(se ?? void 0, f), [M, N] = u(!0), [P, F] = u([]), [I, L] = u(null), [R, z] = u(25), [B, V] = u(0), [H, U] = u([void 0]), [W, G] = u(0), { channel: K, isLoading: le, error: q, fetchWebhookEvents: J } = ee(f), Y = s(async (e) => {
-		if (f) {
-			N(!0);
+	}, { organizationId: de } = e(), { triggerExport: A, isExporting: j, exportError: M } = ee(de ?? void 0, p), [N, P] = u(!0), [F, I] = u([]), [L, R] = u(null), [z, B] = u(25), [V, fe] = u(0), [H, U] = u([void 0]), [W, G] = u(0), { channel: K, isLoading: pe, error: q, fetchWebhookEvents: J } = i(p), Y = s(async (e) => {
+		if (p) {
+			P(!0);
 			try {
-				let t = await J(R, e);
-				return F(t.items), V(t.total), t.nextCursor;
+				let t = await J(z, e);
+				return I(t.items), fe(t.total), t.nextCursor;
 			} finally {
-				N(!1);
+				P(!1);
 			}
 		}
 	}, [
-		f,
+		p,
 		J,
-		R
+		z
 	]), X = l(Y), Z = l(H), Q = l(W);
 	c(() => {
 		X.current = Y, Z.current = H, Q.current = W;
@@ -67,14 +67,14 @@ function D() {
 		Promise.resolve().then(() => {
 			U([void 0]), G(0), X.current(void 0);
 		});
-	}, [R]), c(() => {
+	}, [z]), c(() => {
 		if ($.current) {
 			$.current = !1;
 			return;
 		}
 		Promise.resolve().then(() => X.current(Z.current[W]));
 	}, [W]);
-	let ue = s(async () => {
+	let me = s(async () => {
 		let e = await Y(H[W]);
 		e && U((t) => {
 			let n = [...t];
@@ -84,251 +84,274 @@ function D() {
 		H,
 		W,
 		Y
-	]), de = s(() => {
+	]), he = s(() => {
 		let e = W - 1;
 		G(e), Y(H[e]);
 	}, [
 		H,
 		W,
 		Y
-	]), fe = P.length === R, pe = W > 0;
+	]), ge = F.length === z, _e = W > 0;
 	r({
 		query: n,
-		variables: { channelId: f },
+		variables: { channelId: p },
 		operationName: "WebhookReceived",
-		enabled: !!f,
+		enabled: !!p,
 		onData: s(() => {
-			t("webhook.received", { channelId: f }), X.current(Z.current[Q.current]);
-		}, [f]),
+			t("webhook.received", { channelId: p }), X.current(Z.current[Q.current]);
+		}, [p]),
 		pollFn: s(() => {
 			X.current(Z.current[Q.current]);
 		}, []),
 		pollIntervalMs: 6e4
 	});
-	let me = (e) => E[e] || E.PENDING;
-	return le ? /* @__PURE__ */ C("div", {
+	let ve = (e) => D[e] || D.PENDING;
+	return pe ? /* @__PURE__ */ w("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ C(v, {
+		children: /* @__PURE__ */ w(v, {
 			size: 32,
 			className: "animate-spin text-accent-primary"
 		})
-	}) : q || !K ? /* @__PURE__ */ C("div", {
+	}) : q || !K ? /* @__PURE__ */ w("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ T("div", {
 			className: "flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg",
 			children: [
-				/* @__PURE__ */ C(d, {
+				/* @__PURE__ */ w(d, {
 					size: 20,
 					className: "text-status-error-text"
 				}),
-				/* @__PURE__ */ C("div", { children: /* @__PURE__ */ C("p", {
+				/* @__PURE__ */ w("div", { children: /* @__PURE__ */ w("p", {
 					className: "text-sm font-medium text-status-error-text",
 					children: q || "Channel not found"
 				}) }),
-				/* @__PURE__ */ C("button", {
+				/* @__PURE__ */ w("button", {
 					type: "button",
-					onClick: () => h(`/channels/${f}`),
+					onClick: () => b(`/channels/${p}`),
 					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__ */ C(i, {
-		permission: a.CHANNEL_WEBHOOK_READ,
-		children: /* @__PURE__ */ w("div", {
+	}) : /* @__PURE__ */ w(a, {
+		permission: o.CHANNEL_WEBHOOK_READ,
+		children: /* @__PURE__ */ T("div", {
 			className: "space-y-6 p-3 sm:p-6",
 			children: [
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ w("div", {
+					children: [/* @__PURE__ */ T("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ C("button", {
+						children: [/* @__PURE__ */ w("button", {
 							type: "button",
-							onClick: () => h(`/channels/${f}`),
+							onClick: () => b(`/channels/${p}`),
 							"aria-label": k("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__ */ C(ne, {
+							children: /* @__PURE__ */ w(f, {
 								size: 20,
 								"aria-hidden": "true"
 							})
-						}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("h1", {
+						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h1", {
 							className: "text-xl sm:text-2xl font-bold text-text-primary",
 							children: k("channel.webhookEvents", "Webhook Events")
-						}), /* @__PURE__ */ w("p", {
+						}), /* @__PURE__ */ T("p", {
 							className: "text-sm text-text-secondary mt-1",
 							children: [K.name, " - Event history"]
 						})] })]
-					}), /* @__PURE__ */ w("div", {
+					}), /* @__PURE__ */ T("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ w("select", {
-							value: R,
-							onChange: (e) => z(Number(e.target.value)),
+						children: [/* @__PURE__ */ T("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__ */ C("option", {
+								/* @__PURE__ */ w("option", {
 									value: 10,
 									children: "10 results"
 								}),
-								/* @__PURE__ */ C("option", {
+								/* @__PURE__ */ w("option", {
 									value: 25,
 									children: "25 results"
 								}),
-								/* @__PURE__ */ C("option", {
+								/* @__PURE__ */ w("option", {
 									value: 50,
 									children: "50 results"
 								}),
-								/* @__PURE__ */ C("option", {
+								/* @__PURE__ */ w("option", {
 									value: 100,
 									children: "100 results"
 								})
 							]
-						}), /* @__PURE__ */ C(oe, { actions: [{
+						}), /* @__PURE__ */ w(ae, { actions: [{
 							label: k("channel.refresh", "Refresh"),
-							icon: /* @__PURE__ */ C(y, {
+							icon: /* @__PURE__ */ w(y, {
 								size: 16,
-								className: M ? "animate-spin" : "",
+								className: N ? "animate-spin" : "",
 								"aria-hidden": "true"
 							}),
-							disabled: M,
+							disabled: N,
 							onSelect: () => void Y(H[W])
-						}, ...D ? [{
+						}, ...le ? [{
 							label: k("channel.export", "Export"),
-							icon: A ? /* @__PURE__ */ C(v, {
+							icon: j ? /* @__PURE__ */ w(v, {
 								size: 16,
 								className: "animate-spin",
 								"aria-hidden": "true"
-							}) : /* @__PURE__ */ C(re, {
+							}) : /* @__PURE__ */ w(ne, {
 								size: 16,
 								"aria-hidden": "true"
 							}),
-							disabled: A,
-							onSelect: () => void ce()
+							disabled: j,
+							onSelect: () => void A()
 						}] : []] })]
 					})]
 				}),
-				j && /* @__PURE__ */ w("div", {
+				M && /* @__PURE__ */ T("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3",
-					children: [/* @__PURE__ */ C(d, {
+					children: [/* @__PURE__ */ w(d, {
 						size: 20,
 						className: "text-status-error-text"
-					}), /* @__PURE__ */ C("p", {
+					}), /* @__PURE__ */ w("p", {
 						className: "text-sm text-status-error-text flex-1",
-						children: j
+						children: M
 					})]
 				}),
-				/* @__PURE__ */ C(T, {
-					treatment: "insight",
-					className: "p-4 border-border-seam",
-					children: /* @__PURE__ */ C("p", {
+				/* @__PURE__ */ w(ce, {
+					icon: /* @__PURE__ */ w(g, {
+						size: 15,
+						"aria-hidden": "true"
+					}),
+					children: k("channel.webhookEventsPurpose", "Inbound events the provider pushed to this channel — delivery receipts, replies, status callbacks and the like. Each row shows how the event was processed, whether it was a duplicate, and the raw payload so you can inspect exactly what arrived. Use it to verify your webhook endpoint is receiving traffic and to debug why an event wasn't handled. Records are kept for 7 days.")
+				}),
+				/* @__PURE__ */ T(E, {
+					className: "flex items-center gap-3 p-4",
+					children: [/* @__PURE__ */ w("span", {
+						className: "rounded-lg bg-accent-purple-subtle p-2",
+						children: /* @__PURE__ */ w(g, {
+							size: 18,
+							className: "text-accent-purple",
+							"aria-hidden": "true"
+						})
+					}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("p", {
+						className: "text-sm font-semibold text-text-primary",
+						children: [
+							V,
+							" ",
+							V === 1 ? k("channel.webhookEventSingular", "webhook event") : k("channel.webhookEventsPlural", "webhook events")
+						]
+					}), /* @__PURE__ */ w("p", {
 						className: "text-sm text-text-secondary",
-						children: "Webhook events show all incoming webhooks received by this channel. Data is retained for 7 days."
-					})
+						children: k("channel.webhookEventsBannerHint", "All incoming webhooks received by this channel, retained for 7 days. Expand a row to inspect its raw payload.")
+					})] })]
 				}),
-				/* @__PURE__ */ C(T, {
+				/* @__PURE__ */ w(oe, {
 					treatment: "plain",
 					className: "border-border-seam rounded-lg overflow-hidden p-0",
-					children: /* @__PURE__ */ C("div", {
+					children: /* @__PURE__ */ w("div", {
 						className: "overflow-x-auto min-w-full",
-						children: /* @__PURE__ */ w("table", {
+						children: /* @__PURE__ */ T("table", {
 							className: "w-full min-w-[600px]",
-							children: [/* @__PURE__ */ C("thead", {
+							children: [/* @__PURE__ */ w("thead", {
 								className: "bg-bg-sunken/50 border-b border-border-subtle",
-								children: /* @__PURE__ */ w("tr", { children: [
-									/* @__PURE__ */ C("th", {
+								children: /* @__PURE__ */ T("tr", { children: [
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: k("channel.status", "Status")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: k("channel.eventType", "Event Type")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: k("channel.duplicate", "Duplicate")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: k("channel.processedAt", "Processed At")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: k("channel.error", "Error")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: k("channel.actions", "Actions")
 									})
 								] })
-							}), /* @__PURE__ */ C("tbody", {
+							}), /* @__PURE__ */ w("tbody", {
 								className: "divide-y divide-border",
-								children: P.length === 0 ? /* @__PURE__ */ C("tr", { children: /* @__PURE__ */ C("td", {
+								children: F.length === 0 ? /* @__PURE__ */ w("tr", { children: /* @__PURE__ */ w("td", {
 									colSpan: 6,
-									className: "px-4 py-8 text-center text-text-secondary",
-									children: k("channel.noWebhookEventsFound", "No webhook events found")
-								}) }) : P.map((e) => {
-									let t = me(e.status), n = t.icon, r = I === e.id;
-									return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w("tr", {
+									className: "px-4 py-8",
+									children: /* @__PURE__ */ w(se, {
+										illustration: "empty-notifications",
+										title: k("channel.noWebhookEventsFound", "No webhook events found")
+									})
+								}) }) : F.map((e) => {
+									let t = ve(e.status), n = t.icon, r = L === e.id;
+									return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ T("tr", {
 										className: "hover:bg-bg-sunken/30 transition-colors",
 										children: [
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ w("div", {
+												children: /* @__PURE__ */ T("div", {
 													className: "flex items-center gap-2",
-													children: [/* @__PURE__ */ C(n, {
+													children: [/* @__PURE__ */ w(n, {
 														size: 14,
 														className: t.color.split(" ")[0]
-													}), /* @__PURE__ */ C("span", {
+													}), /* @__PURE__ */ w("span", {
 														className: `text-sm font-medium ${t.color}`,
 														children: t.label
 													})]
 												})
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3 text-sm font-mono text-text-primary",
 												children: e.eventType
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3",
-												children: e.isDuplicate ? /* @__PURE__ */ C("span", {
+												children: e.isDuplicate ? /* @__PURE__ */ w("span", {
 													className: "text-xs text-status-warning-text bg-status-warning-bg-subtle px-2 py-1 rounded",
 													children: "Duplicate"
-												}) : /* @__PURE__ */ C("span", {
+												}) : /* @__PURE__ */ w("span", {
 													className: "text-xs text-text-secondary",
 													children: "No"
 												})
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3 text-sm text-text-secondary",
 												children: e.processedAt ? new Date(e.processedAt).toLocaleString() : "-"
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3 text-sm text-status-error-text max-w-xs truncate",
 												children: e.errorMessage || "-"
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ C("button", {
+												children: /* @__PURE__ */ w("button", {
 													type: "button",
-													onClick: () => L(r ? null : e.id),
+													onClick: () => R(r ? null : e.id),
 													"aria-label": r ? k("channel.hidePayload", "Hide payload") : k("channel.viewPayload", "View payload"),
 													"aria-expanded": r,
 													className: "p-1 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded transition-colors",
-													children: C(r ? _ : g, {
+													children: w(r ? _ : re, {
 														size: 16,
 														"aria-hidden": "true"
 													})
 												})
 											})
 										]
-									}, e.id), r && /* @__PURE__ */ C("tr", { children: /* @__PURE__ */ C("td", {
+									}, e.id), r && /* @__PURE__ */ w("tr", { children: /* @__PURE__ */ w("td", {
 										colSpan: 6,
 										className: "px-4 py-3 bg-bg-sunken/30",
-										children: /* @__PURE__ */ w("div", {
+										children: /* @__PURE__ */ T("div", {
 											className: "text-xs",
-											children: [/* @__PURE__ */ w("p", {
+											children: [/* @__PURE__ */ T("p", {
 												className: "text-text-secondary mb-1",
 												children: [k("channel.payload", "Payload"), ":"]
-											}), /* @__PURE__ */ C("pre", {
+											}), /* @__PURE__ */ w("pre", {
 												className: "bg-surface p-2 rounded border border-border-subtle overflow-auto",
 												children: JSON.stringify(e.payload, null, 2)
 											})]
@@ -339,39 +362,39 @@ function D() {
 						})
 					})
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ C("p", {
+					children: [/* @__PURE__ */ w("p", {
 						className: "text-sm text-text-secondary",
-						children: B > 0 && /* @__PURE__ */ w(S, { children: [
+						children: V > 0 && /* @__PURE__ */ T(C, { children: [
 							k("channel.page", "Page"),
 							" ",
-							/* @__PURE__ */ C("span", {
+							/* @__PURE__ */ w("span", {
 								className: "font-medium",
 								children: W + 1
 							}),
 							" · ",
 							k("channel.totalRecords", "Total"),
 							": ",
-							/* @__PURE__ */ C("span", {
+							/* @__PURE__ */ w("span", {
 								className: "font-medium",
-								children: B
+								children: V
 							})
 						] })
-					}), /* @__PURE__ */ w("div", {
+					}), /* @__PURE__ */ T("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ w("button", {
+						children: [/* @__PURE__ */ T("button", {
 							type: "button",
-							onClick: de,
-							disabled: !pe || M,
+							onClick: he,
+							disabled: !_e || N,
 							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__ */ C(p, { size: 16 }), k("channel.previous", "Previous")]
-						}), /* @__PURE__ */ w("button", {
+							children: [/* @__PURE__ */ w(m, { size: 16 }), k("channel.previous", "Previous")]
+						}), /* @__PURE__ */ T("button", {
 							type: "button",
-							onClick: () => void ue(),
-							disabled: !fe || M,
+							onClick: () => void me(),
+							disabled: !ge || N,
 							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: [k("channel.next", "Next"), /* @__PURE__ */ C(m, { size: 16 })]
+							children: [k("channel.next", "Next"), /* @__PURE__ */ w(h, { size: 16 })]
 						})]
 					})]
 				})
@@ -380,6 +403,6 @@ function D() {
 	});
 }
 //#endregion
-export { D as WebhookEventsPage };
+export { O as WebhookEventsPage };
 
 //# sourceMappingURL=WebhookEventsPage.js.map