@burdenoff/microfe-devportal 2026.625.8 → 2026.625.10

package/dist/devportal/pages/WebhooksPage.js

@@ -12,13 +12,14 @@ import "../components/index.js";
 import { DEVPORTAL_PERMISSIONS as d } from "../constants/permissions.js";
 import { useDevportalPermission as f } from "../hooks/usePermission.js";
 import "../hooks/index.js";
-import { useEffect as te, useState as p } from "react";
-import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as h, AlertTriangle as g, AppWindow as _, CheckCircle as v, Loader2 as y, PauseCircle as b, Plus as x, Search as S, Webhook as C, XCircle as w } from "lucide-react";
-import { useParams as T } from "react-router-dom";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { useEffect as p, useState as m } from "react";
+import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as g, AlertTriangle as _, AppWindow as v, CheckCircle as y, Loader2 as b, PauseCircle as x, Plus as S, Search as C, Webhook as w, XCircle as T } from "lucide-react";
+import { useParams as E } from "react-router-dom";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { EmphasisPanel as k, GlassCard as A } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/pages/WebhooksPage.tsx
-function O(e) {
+function j(e) {
 	return {
 		id: e.id,
 		applicationId: e.applicationId,
@@ -42,127 +43,129 @@ function O(e) {
 		updatedAt: e.updatedAt
 	};
 }
-var k = () => {
-	let { appId: k } = T(), { navigate: j, basePath: M, activeOrgId: N } = e(), { t: ne } = m(), P = (e, t) => {
-		let n = ne(e);
+var M = () => {
+	let { appId: M } = E(), { navigate: ne, basePath: re, activeOrgId: N } = e(), { t: ie } = h(), P = (e, t) => {
+		let n = ie(e);
 		return n === e ? t : n;
-	}, F = f(d.WEBHOOK_CREATE), [I, L] = p(""), [R, z] = p(""), { data: B } = r({
-		variables: { id: k ?? "" },
-		skip: !k,
+	}, F = f(d.WEBHOOK_CREATE), [I, L] = m(""), [R, z] = m(""), { data: B } = r({
+		variables: { id: M ?? "" },
+		skip: !M,
 		fetchPolicy: "cache-first"
 	});
-	te(() => {
+	p(() => {
 		let e = B?.application?.name;
-		if (!k || !e) return;
+		if (!M || !e) return;
 		let t = window.__breadcrumbRegistry;
-		return t?.register(k, e), () => t?.unregister(k);
-	}, [k, B?.application?.name]);
+		return t?.register(M, e), () => t?.unregister(M);
+	}, [M, B?.application?.name]);
 	let { data: V, loading: H, error: U, refetch: W } = i({
 		variables: { limit: 100 },
-		skip: !!k,
+		skip: !!M,
 		fetchPolicy: "cache-and-network"
 	}), { data: G, loading: K, error: q, refetch: J } = a({
-		variables: { applicationId: k || "" },
-		skip: !k,
+		variables: { applicationId: M || "" },
+		skip: !M,
 		fetchPolicy: "cache-and-network"
-	}), Y = G?.webhooks?.map(O) ?? [], X = V?.applications?.edges?.map((e) => e.node) ?? [], re = N ? X.filter((e) => e.developerOrganizationId === N) : X, Z = (e) => {
-		j?.(`${M}${e}`);
+	}), Y = G?.webhooks?.map(j) ?? [], X = V?.applications?.edges?.map((e) => e.node) ?? [], ae = N ? X.filter((e) => e.developerOrganizationId === N) : X, Z = (e) => {
+		ne?.(`${re}${e}`);
 	}, Q = Y.filter((e) => {
 		let t = !I || e.name.toLowerCase().includes(I.toLowerCase()) || e.url.toLowerCase().includes(I.toLowerCase()), n = !R || e.status === R;
 		return t && n;
-	}), ie = (e) => {
+	}), oe = (e) => {
 		switch (e) {
-			case "ACTIVE": return /* @__PURE__ */ E(v, {
+			case "ACTIVE": return /* @__PURE__ */ D(y, {
 				size: 16,
 				className: "text-status-success-text"
 			});
-			case "PAUSED": return /* @__PURE__ */ E(b, {
+			case "PAUSED": return /* @__PURE__ */ D(x, {
 				size: 16,
 				className: "text-status-warning-text"
 			});
-			case "FAILED": return /* @__PURE__ */ E(w, {
+			case "FAILED": return /* @__PURE__ */ D(T, {
 				size: 16,
 				className: "text-status-error-text"
 			});
-			case "DISABLED": return /* @__PURE__ */ E(g, {
+			case "DISABLED": return /* @__PURE__ */ D(_, {
 				size: 16,
 				className: "text-text-tertiary"
 			});
 			default: return null;
 		}
-	}, ae = (e) => {
+	}, se = (e) => {
 		let t = e.successCount + e.failureCount;
 		return t === 0 ? 100 : Math.round(e.successCount / t * 100);
 	};
-	if (!k) {
-		let e = re.filter((e) => {
+	if (!M) {
+		let e = ae.filter((e) => {
 			if (!I) return !0;
 			let t = I.toLowerCase();
 			return e.name.toLowerCase().includes(t) || (e.slug ?? "").toLowerCase().includes(t);
 		});
-		return /* @__PURE__ */ E(u, {
+		return /* @__PURE__ */ D(u, {
 			permission: d.WEBHOOK_READ,
-			children: /* @__PURE__ */ E(s, {
+			children: /* @__PURE__ */ D(s, {
 				title: P("devportal.webhooks", "Webhooks"),
 				description: P("devportal.manageWebhooksApps", "Manage webhooks for your applications"),
-				children: /* @__PURE__ */ D("div", {
+				purpose: P("devportal.webhooksPickerPurpose", "Webhooks push real-time events (installs, payments, app updates) to a URL you host, so your backend can react without polling. Pick an application to view, add, or test the webhook endpoints it delivers to."),
+				children: /* @__PURE__ */ O("div", {
 					className: "space-y-4",
 					children: [
-						/* @__PURE__ */ E("p", {
-							className: "text-sm text-muted-foreground",
+						/* @__PURE__ */ D("p", {
+							className: "text-sm text-text-secondary",
 							children: P("devportal.webhooksSelectAppHint", "Select an application below to view and manage its webhooks.")
 						}),
-						/* @__PURE__ */ E("div", {
+						/* @__PURE__ */ D("div", {
 							className: "max-w-md",
-							children: /* @__PURE__ */ D("div", {
+							children: /* @__PURE__ */ O("div", {
 								className: "relative",
-								children: [/* @__PURE__ */ E(S, {
+								children: [/* @__PURE__ */ D(C, {
 									size: 16,
-									className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-								}), /* @__PURE__ */ E("input", {
+									className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
+								}), /* @__PURE__ */ D("input", {
 									type: "text",
 									placeholder: "Search applications...",
 									value: I,
 									onChange: (e) => L(e.target.value),
-									className: "w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+									className: "w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 								})]
 							})
 						}),
-						H ? /* @__PURE__ */ E("div", {
-							className: "flex items-center justify-center py-12 text-muted-foreground",
-							children: /* @__PURE__ */ E(y, { className: "h-8 w-8 animate-spin" })
-						}) : U ? /* @__PURE__ */ D("div", {
-							className: "rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center",
+						H ? /* @__PURE__ */ D("div", {
+							className: "flex items-center justify-center py-12 text-text-secondary",
+							children: /* @__PURE__ */ D(b, { className: "h-8 w-8 animate-spin" })
+						}) : U ? /* @__PURE__ */ O("div", {
+							className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center",
 							children: [
-								/* @__PURE__ */ E(h, { className: "mx-auto h-8 w-8 text-destructive" }),
-								/* @__PURE__ */ E("h3", {
-									className: "mt-2 font-medium text-destructive",
+								/* @__PURE__ */ D(g, { className: "mx-auto h-8 w-8 text-status-error-text" }),
+								/* @__PURE__ */ D("h3", {
+									className: "mt-2 font-medium text-status-error-text",
 									children: "Failed to load applications"
 								}),
-								/* @__PURE__ */ E("p", {
-									className: "mt-1 text-sm text-muted-foreground",
+								/* @__PURE__ */ D("p", {
+									className: "mt-1 text-sm text-text-secondary",
 									children: o(U)
 								}),
-								/* @__PURE__ */ E("button", {
+								/* @__PURE__ */ D("button", {
 									onClick: () => W(),
-									className: "mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+									className: "mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
 									children: "Try Again"
 								})
 							]
-						}) : e.length > 0 ? /* @__PURE__ */ E("div", {
+						}) : e.length > 0 ? /* @__PURE__ */ D("div", {
 							className: "space-y-2",
-							children: e.map((e) => /* @__PURE__ */ E(l, {
+							children: e.map((e) => /* @__PURE__ */ D(l, {
 								app: e,
 								onClick: () => Z(`/apps/${e.id}/webhooks`)
 							}, e.id))
-						}) : /* @__PURE__ */ E(n, {
-							icon: /* @__PURE__ */ E(_, { size: 32 }),
+						}) : /* @__PURE__ */ D(n, {
+							illustration: I ? "empty-search" : "empty-data",
+							icon: /* @__PURE__ */ D(v, { size: 32 }),
 							title: "No applications available",
 							description: I ? "No applications matched your search." : "Create an application before configuring webhooks.",
-							action: /* @__PURE__ */ D("button", {
+							action: /* @__PURE__ */ O("button", {
 								onClick: () => Z("/apps/new"),
-								className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
-								children: [/* @__PURE__ */ E(x, { size: 16 }), "Create Application"]
+								className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
+								children: [/* @__PURE__ */ D(S, { size: 16 }), "Create Application"]
 							})
 						})
 					]
@@ -170,58 +173,58 @@ var k = () => {
 			})
 		});
 	}
-	if (K && !G) return /* @__PURE__ */ E(s, {
+	if (K && !G) return /* @__PURE__ */ D(s, {
 		title: P("devportal.webhooks", "Webhooks"),
 		description: P("devportal.manageWebhooksApp", "Manage webhooks for this application"),
-		backLink: `/apps/${k}`,
+		backLink: `/apps/${M}`,
 		backLabel: P("devportal.backToApplication", "Back to Application"),
-		children: /* @__PURE__ */ D("div", {
+		children: /* @__PURE__ */ O("div", {
 			className: "flex items-center justify-center py-12",
-			children: [/* @__PURE__ */ E(y, { className: "h-8 w-8 animate-spin text-muted-foreground" }), /* @__PURE__ */ E("span", {
-				className: "ml-2 text-muted-foreground",
+			children: [/* @__PURE__ */ D(b, { className: "h-8 w-8 animate-spin text-text-secondary" }), /* @__PURE__ */ D("span", {
+				className: "ml-2 text-text-secondary",
 				children: P("devportal.loadingWebhooks", "Loading webhooks...")
 			})]
 		})
 	});
-	if (q) return /* @__PURE__ */ E(s, {
+	if (q) return /* @__PURE__ */ D(s, {
 		title: P("devportal.webhooks", "Webhooks"),
 		description: P("devportal.manageWebhooksApp", "Manage webhooks for this application"),
-		backLink: `/apps/${k}`,
+		backLink: `/apps/${M}`,
 		backLabel: P("devportal.backToApplication", "Back to Application"),
-		children: /* @__PURE__ */ D("div", {
-			className: "rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center",
+		children: /* @__PURE__ */ O("div", {
+			className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center",
 			children: [
-				/* @__PURE__ */ E(h, { className: "mx-auto h-8 w-8 text-destructive" }),
-				/* @__PURE__ */ E("h3", {
-					className: "mt-2 font-medium text-destructive",
+				/* @__PURE__ */ D(g, { className: "mx-auto h-8 w-8 text-status-error-text" }),
+				/* @__PURE__ */ D("h3", {
+					className: "mt-2 font-medium text-status-error-text",
 					children: P("devportal.failedToLoadWebhooks", "Failed to load webhooks")
 				}),
-				/* @__PURE__ */ E("p", {
-					className: "mt-1 text-sm text-muted-foreground",
+				/* @__PURE__ */ D("p", {
+					className: "mt-1 text-sm text-text-secondary",
 					children: o(q)
 				}),
-				/* @__PURE__ */ E("button", {
+				/* @__PURE__ */ D("button", {
 					onClick: () => J(),
-					className: "mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+					className: "mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
 					children: P("devportal.tryAgain", "Try Again")
 				})
 			]
 		})
 	});
-	let oe = [
+	let ce = [
 		{
 			key: "name",
 			header: "Webhook",
-			render: (e) => /* @__PURE__ */ D("div", {
+			render: (e) => /* @__PURE__ */ O("div", {
 				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ E("div", {
+				children: [/* @__PURE__ */ D("div", {
 					className: t("flex h-10 w-10 items-center justify-center rounded-lg", e.status === "ACTIVE" ? "bg-status-success-bg-subtle text-status-success-text" : e.status === "FAILED" ? "bg-status-error-bg-subtle text-status-error-text" : e.status === "PAUSED" ? "bg-status-warning-bg-subtle text-status-warning-text" : "bg-bg-sunken text-text-tertiary"),
-					children: /* @__PURE__ */ E(C, { size: 20 })
-				}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+					children: /* @__PURE__ */ D(w, { size: 20 })
+				}), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
 					className: "font-medium",
 					children: e.name
-				}), /* @__PURE__ */ E("p", {
-					className: "text-xs text-muted-foreground truncate max-w-xs",
+				}), /* @__PURE__ */ D("p", {
+					className: "text-xs text-text-secondary truncate max-w-xs",
 					children: e.url
 				})] })]
 			})
@@ -229,13 +232,13 @@ var k = () => {
 		{
 			key: "events",
 			header: "Events",
-			render: (e) => /* @__PURE__ */ D("div", {
+			render: (e) => /* @__PURE__ */ O("div", {
 				className: "flex flex-wrap gap-1",
-				children: [e.events.slice(0, 2).map((e) => /* @__PURE__ */ E("span", {
-					className: "inline-flex rounded bg-muted px-1.5 py-0.5 text-xs",
+				children: [e.events.slice(0, 2).map((e) => /* @__PURE__ */ D("span", {
+					className: "inline-flex rounded bg-bg-sunken px-1.5 py-0.5 text-xs",
 					children: e.split(".")[0]
-				}, e)), e.events.length > 2 && /* @__PURE__ */ D("span", {
-					className: "text-xs text-muted-foreground",
+				}, e)), e.events.length > 2 && /* @__PURE__ */ O("span", {
+					className: "text-xs text-text-secondary",
 					children: [
 						"+",
 						e.events.length - 2,
@@ -247,9 +250,9 @@ var k = () => {
 		{
 			key: "status",
 			header: "Status",
-			render: (e) => /* @__PURE__ */ D("div", {
+			render: (e) => /* @__PURE__ */ O("div", {
 				className: "flex items-center gap-2",
-				children: [ie(e.status), /* @__PURE__ */ E(c, {
+				children: [oe(e.status), /* @__PURE__ */ D(c, {
 					status: e.status,
 					type: "webhook"
 				})]
@@ -259,18 +262,18 @@ var k = () => {
 			key: "successRate",
 			header: "Success Rate",
 			render: (e) => {
-				let n = ae(e);
-				return /* @__PURE__ */ D("div", {
+				let n = se(e);
+				return /* @__PURE__ */ O("div", {
 					className: "w-24",
-					children: [/* @__PURE__ */ E("div", {
+					children: [/* @__PURE__ */ D("div", {
 						className: "flex items-center justify-between text-xs mb-1",
-						children: /* @__PURE__ */ D("span", {
+						children: /* @__PURE__ */ O("span", {
 							className: t(n >= 95 ? "text-status-success-text" : n >= 80 ? "text-status-warning-text" : "text-status-error-text"),
 							children: [n, "%"]
 						})
-					}), /* @__PURE__ */ E("div", {
-						className: "h-1.5 rounded-full bg-muted",
-						children: /* @__PURE__ */ E("div", {
+					}), /* @__PURE__ */ D("div", {
+						className: "h-1.5 rounded-full bg-bg-sunken",
+						children: /* @__PURE__ */ D("div", {
 							className: t("h-full rounded-full transition-all", n >= 95 ? "bg-status-success-bg-subtle" : n >= 80 ? "bg-status-warning-bg-subtle" : "bg-status-error-bg-subtle"),
 							style: { width: `${n}%` }
 						})
@@ -281,18 +284,18 @@ var k = () => {
 		{
 			key: "deliveries",
 			header: "Deliveries",
-			render: (e) => /* @__PURE__ */ D("div", {
+			render: (e) => /* @__PURE__ */ O("div", {
 				className: "text-sm",
 				children: [
-					/* @__PURE__ */ E("span", {
+					/* @__PURE__ */ D("span", {
 						className: "text-status-success-text",
 						children: e.successCount.toLocaleString()
 					}),
-					/* @__PURE__ */ E("span", {
-						className: "text-muted-foreground",
+					/* @__PURE__ */ D("span", {
+						className: "text-text-secondary",
 						children: " / "
 					}),
-					/* @__PURE__ */ E("span", {
+					/* @__PURE__ */ D("span", {
 						className: "text-status-error-text",
 						children: e.failureCount.toLocaleString()
 					})
@@ -302,9 +305,9 @@ var k = () => {
 		{
 			key: "lastTriggered",
 			header: "Last Triggered",
-			render: (e) => /* @__PURE__ */ E("span", {
-				className: "text-sm text-muted-foreground",
-				children: e.lastTriggeredAt ? A(e.lastTriggeredAt) : "Never"
+			render: (e) => /* @__PURE__ */ D("span", {
+				className: "text-sm text-text-secondary",
+				children: e.lastTriggeredAt ? te(e.lastTriggeredAt) : "Never"
 			})
 		}
 	], $ = {
@@ -313,63 +316,64 @@ var k = () => {
 		failed: Y.filter((e) => e.status === "FAILED").length,
 		paused: Y.filter((e) => e.status === "PAUSED").length
 	};
-	return /* @__PURE__ */ E(u, {
+	return /* @__PURE__ */ D(u, {
 		permission: d.WEBHOOK_READ,
-		children: /* @__PURE__ */ D(s, {
+		children: /* @__PURE__ */ O(s, {
 			title: P("devportal.webhooks", "Webhooks"),
 			description: P("devportal.manageWebhooksApp", "Manage webhooks for this application"),
-			backLink: `/apps/${k}`,
+			purpose: P("devportal.webhooksAppPurpose", "These webhooks deliver this application's events to your endpoints. Add a URL, choose which events to subscribe to, and send a test delivery to confirm your server receives and verifies the signed payload."),
+			backLink: `/apps/${M}`,
 			backLabel: P("devportal.backToApplication", "Back to Application"),
-			actions: /* @__PURE__ */ D("button", {
-				onClick: () => Z(`/apps/${k}/webhooks/new`),
+			actions: /* @__PURE__ */ O("button", {
+				onClick: () => Z(`/apps/${M}/webhooks/new`),
 				disabled: !F.allowed,
 				"aria-disabled": !F.allowed,
 				title: F.allowed ? void 0 : P("devportal.common.noPermission", "You do not have permission to perform this action"),
-				className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
-				children: [/* @__PURE__ */ E(x, {
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+				children: [/* @__PURE__ */ D(S, {
 					size: 16,
 					"aria-hidden": "true"
 				}), P("devportal.createWebhook", "Create Webhook")]
 			}),
 			children: [
-				/* @__PURE__ */ E("div", {
+				/* @__PURE__ */ D("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: /* @__PURE__ */ D("div", {
+					children: /* @__PURE__ */ O("div", {
 						className: "flex flex-1 items-center gap-4",
-						children: [/* @__PURE__ */ D("div", {
+						children: [/* @__PURE__ */ O("div", {
 							className: "relative flex-1 max-w-md",
-							children: [/* @__PURE__ */ E(S, {
+							children: [/* @__PURE__ */ D(C, {
 								size: 16,
-								className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-							}), /* @__PURE__ */ E("input", {
+								className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
+							}), /* @__PURE__ */ D("input", {
 								type: "text",
 								placeholder: "Search by name or URL...",
 								value: I,
 								onChange: (e) => L(e.target.value),
-								className: "w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+								className: "w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 							})]
-						}), /* @__PURE__ */ D("select", {
+						}), /* @__PURE__ */ O("select", {
 							value: R,
 							onChange: (e) => z(e.target.value),
-							className: "rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
+							className: "rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
 							children: [
-								/* @__PURE__ */ E("option", {
+								/* @__PURE__ */ D("option", {
 									value: "",
 									children: "All Status"
 								}),
-								/* @__PURE__ */ E("option", {
+								/* @__PURE__ */ D("option", {
 									value: "ACTIVE",
 									children: "Active"
 								}),
-								/* @__PURE__ */ E("option", {
+								/* @__PURE__ */ D("option", {
 									value: "PAUSED",
 									children: "Paused"
 								}),
-								/* @__PURE__ */ E("option", {
+								/* @__PURE__ */ D("option", {
 									value: "FAILED",
 									children: "Failed"
 								}),
-								/* @__PURE__ */ E("option", {
+								/* @__PURE__ */ D("option", {
 									value: "DISABLED",
 									children: "Disabled"
 								})
@@ -377,65 +381,69 @@ var k = () => {
 						})]
 					})
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ D(k, { children: /* @__PURE__ */ O("div", {
 					className: "grid grid-cols-2 gap-4 sm:grid-cols-4",
 					children: [
-						/* @__PURE__ */ D("div", {
-							className: "rounded-lg border bg-card p-4",
-							children: [/* @__PURE__ */ D("div", {
-								className: "flex items-center gap-2 text-muted-foreground",
-								children: [/* @__PURE__ */ E(C, { size: 16 }), /* @__PURE__ */ E("span", {
+						/* @__PURE__ */ O(A, {
+							treatment: "metric",
+							className: "p-4",
+							children: [/* @__PURE__ */ O("div", {
+								className: "flex items-center gap-2 text-text-secondary",
+								children: [/* @__PURE__ */ D(w, { size: 16 }), /* @__PURE__ */ D("span", {
 									className: "text-sm",
 									children: "Total Webhooks"
 								})]
-							}), /* @__PURE__ */ E("p", {
-								className: "mt-1 text-2xl font-semibold",
+							}), /* @__PURE__ */ D("p", {
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: $.total
 							})]
 						}),
-						/* @__PURE__ */ D("div", {
-							className: "rounded-lg border bg-card p-4",
-							children: [/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ O(A, {
+							treatment: "metric",
+							className: "p-4",
+							children: [/* @__PURE__ */ O("div", {
 								className: "flex items-center gap-2 text-status-success-text",
-								children: [/* @__PURE__ */ E(v, { size: 16 }), /* @__PURE__ */ E("span", {
+								children: [/* @__PURE__ */ D(y, { size: 16 }), /* @__PURE__ */ D("span", {
 									className: "text-sm",
 									children: "Active"
 								})]
-							}), /* @__PURE__ */ E("p", {
-								className: "mt-1 text-2xl font-semibold",
+							}), /* @__PURE__ */ D("p", {
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: $.active
 							})]
 						}),
-						/* @__PURE__ */ D("div", {
-							className: "rounded-lg border bg-card p-4",
-							children: [/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ O(A, {
+							treatment: "metric",
+							className: "p-4",
+							children: [/* @__PURE__ */ O("div", {
 								className: "flex items-center gap-2 text-status-warning-text",
-								children: [/* @__PURE__ */ E(b, { size: 16 }), /* @__PURE__ */ E("span", {
+								children: [/* @__PURE__ */ D(x, { size: 16 }), /* @__PURE__ */ D("span", {
 									className: "text-sm",
 									children: "Paused"
 								})]
-							}), /* @__PURE__ */ E("p", {
-								className: "mt-1 text-2xl font-semibold",
+							}), /* @__PURE__ */ D("p", {
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: $.paused
 							})]
 						}),
-						/* @__PURE__ */ D("div", {
-							className: "rounded-lg border bg-card p-4",
-							children: [/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ O(A, {
+							treatment: "metric",
+							className: "p-4",
+							children: [/* @__PURE__ */ O("div", {
 								className: "flex items-center gap-2 text-status-error-text",
-								children: [/* @__PURE__ */ E(w, { size: 16 }), /* @__PURE__ */ E("span", {
+								children: [/* @__PURE__ */ D(T, { size: 16 }), /* @__PURE__ */ D("span", {
 									className: "text-sm",
 									children: "Failed"
 								})]
-							}), /* @__PURE__ */ E("p", {
-								className: "mt-1 text-2xl font-semibold",
+							}), /* @__PURE__ */ D("p", {
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: $.failed
 							})]
 						})
 					]
-				}),
-				/* @__PURE__ */ D("p", {
-					className: "text-sm text-muted-foreground",
+				}) }),
+				/* @__PURE__ */ O("p", {
+					className: "text-sm text-text-secondary",
 					children: [
 						Q.length,
 						" webhook",
@@ -443,30 +451,30 @@ var k = () => {
 						" found"
 					]
 				}),
-				Q.length > 0 ? /* @__PURE__ */ E(ee, {
+				Q.length > 0 ? /* @__PURE__ */ D(ee, {
 					data: Q,
-					columns: oe,
+					columns: ce,
 					keyField: "id",
-					onRowClick: (e) => Z(`/apps/${k}/webhooks/${e.id}`)
-				}) : /* @__PURE__ */ E(n, {
-					icon: /* @__PURE__ */ E(C, { size: 32 }),
+					onRowClick: (e) => Z(`/apps/${M}/webhooks/${e.id}`)
+				}) : /* @__PURE__ */ D(n, {
+					illustration: "empty-notifications",
 					title: P("devportal.noWebhooksFound", "No webhooks found"),
 					description: I || R ? P("devportal.tryAdjustingFilters", "Try adjusting your filters") : P("devportal.createFirstWebhook", "Create your first webhook to receive real-time event notifications"),
-					action: !I && !R ? /* @__PURE__ */ D("button", {
-						onClick: () => Z(`/apps/${k}/webhooks/new`),
-						className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
-						children: [/* @__PURE__ */ E(x, { size: 16 }), P("devportal.createWebhook", "Create Webhook")]
+					action: !I && !R ? /* @__PURE__ */ O("button", {
+						onClick: () => Z(`/apps/${M}/webhooks/new`),
+						className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
+						children: [/* @__PURE__ */ D(S, { size: 16 }), P("devportal.createWebhook", "Create Webhook")]
 					}) : void 0
 				})
 			]
 		})
 	});
 };
-function A(e) {
+function te(e) {
 	let t = new Date(e), n = (/* @__PURE__ */ new Date()).getTime() - t.getTime(), r = Math.floor(n / 6e4), i = Math.floor(r / 60), a = Math.floor(i / 24);
 	return r < 1 ? "Just now" : r < 60 ? `${r}m ago` : i < 24 ? `${i}h ago` : a < 7 ? `${a}d ago` : t.toLocaleDateString();
 }
 //#endregion
-export { k as WebhooksPage };
+export { M as WebhooksPage };
 
 //# sourceMappingURL=WebhooksPage.js.map