@burdenoff/microfe-channel 2026.518.2 → 2026.520.1

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

@@ -5,14 +5,14 @@ import { CHANNEL_HEALTH_CHANGED_SUBSCRIPTION as i, useChannelSubscription as a }
 import { useChannels as o } from "../../../hooks/useChannels.js";
 import { PermissionGuard as s } from "../../../components/PermissionGuard.js";
 import { CHANNEL_PERMISSIONS as c } from "../../../constants/permissions.js";
-import { HEALTH_I18N as ee, PLATFORM_I18N as l, STATUS_I18N as te, translateLabel as u } from "../i18n.js";
-import { useCallback as d, useEffect as ne, useMemo as re, useState as f } from "react";
-import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Activity as ie, AlertCircle as m, AlertTriangle as h, ArrowRight as ae, Cable as g, CheckCircle2 as _, Eye as v, HelpCircle as y, LayoutDashboard as oe, Loader2 as b, MessageSquare as x, Plus as S, Power as C, PowerOff as w, Radio as T, RefreshCw as E, Search as D, ShieldCheck as O, Trash2 as se, XCircle as k } from "lucide-react";
-import { useNavigate as ce } from "react-router-dom";
-import { jsx as A, jsxs as j } from "react/jsx-runtime";
+import { HEALTH_I18N as ee, PLATFORM_I18N as te, STATUS_I18N as ne, translateLabel as l } from "../i18n.js";
+import { useCallback as u, useEffect as d, useMemo as re, useState as f } from "react";
+import { useI18n as ie } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Activity as p, AlertCircle as m, AlertTriangle as h, Cable as g, CheckCircle2 as _, Eye as ae, HelpCircle as v, LayoutDashboard as y, Loader2 as b, MessageSquare as oe, Plus as x, Power as S, PowerOff as C, Radio as w, RefreshCw as T, Search as se, ShieldCheck as ce, Trash2 as le, XCircle as E } from "lucide-react";
+import { useNavigate as ue } from "react-router-dom";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
 //#region src/channel/modules/channels/pages/ChannelDashboardPage.tsx
-var M = {
+var k = {
 	EMAIL: {
 		label: "Email",
 		color: "bg-accent-blue-subtle text-accent-blue"
@@ -53,60 +53,60 @@ var M = {
 		label: "Webchat",
 		color: "bg-accent-teal-subtle text-accent-teal"
 	}
-}, N = {
+}, A = {
 	ACTIVE: {
 		label: "Active",
 		dotColor: "bg-success-500",
-		textColor: "text-success-500",
+		textColor: "text-status-success-text",
 		icon: _
 	},
 	INACTIVE: {
 		label: "Inactive",
 		dotColor: "bg-text-tertiary",
 		textColor: "text-muted-foreground",
-		icon: w
+		icon: C
 	},
 	ERROR: {
 		label: "Error",
-		dotColor: "bg-error-500",
-		textColor: "text-error-500",
-		icon: k
+		dotColor: "bg-status-error-bg-subtle",
+		textColor: "text-status-error-text",
+		icon: E
 	},
 	SUSPENDED: {
 		label: "Suspended",
 		dotColor: "bg-warning-500",
-		textColor: "text-warning-500",
+		textColor: "text-status-warning-text",
 		icon: h
 	},
 	ARCHIVED: {
 		label: "Archived",
 		dotColor: "bg-text-tertiary",
 		textColor: "text-muted-foreground",
-		icon: w
+		icon: C
 	}
-}, P = {
+}, j = {
 	HEALTHY: {
 		label: "Healthy",
-		color: "text-success-500",
+		color: "text-status-success-text",
 		icon: _
 	},
 	DEGRADED: {
 		label: "Degraded",
-		color: "text-warning-500",
+		color: "text-status-warning-text",
 		icon: h
 	},
 	UNHEALTHY: {
 		label: "Unhealthy",
-		color: "text-error-500",
-		icon: k
+		color: "text-status-error-text",
+		icon: E
 	},
 	UNKNOWN: {
 		label: "Unknown",
 		color: "text-muted-foreground",
-		icon: y
+		icon: v
 	}
 };
-function le(e) {
+function de(e) {
 	let t = Date.now() - new Date(e).getTime();
 	if (Number.isNaN(t) || t < 0) return "just now";
 	let n = Math.floor(t / 1e3);
@@ -118,56 +118,69 @@ function le(e) {
 	let a = Math.floor(i / 24);
 	return a < 7 ? `${a}d ago` : a < 30 ? `${Math.floor(a / 7)}w ago` : `${Math.floor(a / 30)}mo ago`;
 }
-function F({ icon: e, iconClass: t, value: n, label: r, sub: i }) {
-	return /* @__PURE__ */ j("div", {
+function M({ icon: e, iconClass: t, value: n, label: r, sub: i }) {
+	return /* @__PURE__ */ O("div", {
 		className: "p-4 bg-surface border border-border rounded-lg",
-		children: [/* @__PURE__ */ j("div", {
+		children: [/* @__PURE__ */ O("div", {
 			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ A("div", {
+			children: [/* @__PURE__ */ D("div", {
 				className: "p-2 rounded-lg hover:bg-action-primary-bg/10",
-				children: /* @__PURE__ */ A(e, {
+				children: /* @__PURE__ */ D(e, {
 					size: 18,
 					className: t
 				})
-			}), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+			}), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
 				className: "text-2xl font-bold text-foreground leading-tight",
 				children: n
-			}), /* @__PURE__ */ A("p", {
+			}), /* @__PURE__ */ D("p", {
 				className: "text-xs text-muted-foreground",
 				children: r
 			})] })]
-		}), i && /* @__PURE__ */ A("p", {
+		}), i && /* @__PURE__ */ D("p", {
 			className: "text-[11px] text-muted-foreground mt-2 pl-11",
 			children: i
 		})]
 	});
 }
-function I() {
-	let h = ce(), { t: _ } = p(), y = (e, t) => {
+function N() {
+	let h = ue(), { t: _ } = ie(), v = (e, t) => {
 		let n = _(e);
 		return n === e ? t : n;
-	}, [k, I] = f(null), [ue, L] = f(null), R = (e) => ({
-		...M[e] ?? {
+	}, [E, N] = f(null), [fe, P] = f(null), [F, I] = f(0), L = (e) => ({
+		...k[e] ?? {
 			label: e,
 			color: "bg-bg-sunken text-text-tertiary"
 		},
-		label: u(e, l, y)
+		label: l(e, te, v)
+	}), R = (e) => ({
+		...A[e] ?? A.INACTIVE,
+		label: l(e, ne, v)
 	}), z = (e) => ({
-		...N[e] ?? N.INACTIVE,
-		label: u(e, te, y)
-	}), B = (e) => ({
-		...P[e] ?? P.UNKNOWN,
-		label: u(e, ee, y)
-	}), { channels: V, isLoading: H, error: U, total: W, filter: G, updateFilter: K, deleteChannel: q, activateChannel: J, deactivateChannel: Y, runHealthCheck: X, refetch: Z } = o(), { organizationId: Q } = e();
+		...j[e] ?? j.UNKNOWN,
+		label: l(e, ee, v)
+	}), { channels: B, isLoading: V, error: H, total: U, filter: W, updateFilter: G, deleteChannel: K, activateChannel: q, deactivateChannel: J, runHealthCheck: Y, refetch: X } = o(), Z = Math.max(1, Math.ceil(U / 10));
+	d(() => {
+		X({
+			offset: F * 10,
+			limit: 10
+		});
+	}, [F]), d(() => {
+		Promise.resolve().then(() => I(0));
+	}, [
+		W.search,
+		W.platform,
+		W.status
+	]);
+	let { organizationId: Q } = e();
 	a({
 		query: i,
 		variables: { organizationId: Q },
 		operationName: "ChannelHealthChanged",
 		enabled: !!Q,
-		onData: () => void Z(),
-		pollFn: Z,
+		onData: () => void X(),
+		pollFn: X,
 		pollIntervalMs: 6e4
-	}), ne(() => {
+	}), d(() => {
 		let e = [
 			"channel.created",
 			"channel.updated",
@@ -177,12 +190,12 @@ function I() {
 			"connection.deleted",
 			"delivery.completed",
 			"webhook.received"
-		].map((e) => r(e, () => void Z()));
+		].map((e) => r(e, () => void X()));
 		return () => e.forEach((e) => e());
-	}, [Z]);
+	}, [X]);
 	let $ = re(() => {
 		let e = 0, t = 0, n = 0, r = 0, i = 0, a = 0;
-		for (let o of V) o.status === "ACTIVE" && e++, o.status === "ERROR" && i++, o.connectionHealth === "HEALTHY" && t++, o.connectionHealth === "UNHEALTHY" && a++, o.isConnected && n++, r += o.messageCount24h ?? 0;
+		for (let o of B) o.status === "ACTIVE" && e++, o.status === "ERROR" && i++, o.connectionHealth === "HEALTHY" && t++, o.connectionHealth === "UNHEALTHY" && a++, o.isConnected && n++, r += o.messageCount24h ?? 0;
 		return {
 			active: e,
 			healthy: t,
@@ -191,387 +204,387 @@ function I() {
 			errored: i,
 			unhealthy: a
 		};
-	}, [V]), de = d(async (e) => {
-		t("medium"), L(e);
+	}, [B]), pe = u(async (e) => {
+		t("medium"), P(e);
 		try {
-			await q(e), n("success"), I(null);
+			await K(e), n("success"), N(null);
 		} catch (e) {
 			throw n("error"), e;
 		} finally {
-			L(null);
+			P(null);
 		}
-	}, [q]), fe = d(async (e) => {
-		L(e.id);
+	}, [K]), me = u(async (e) => {
+		P(e.id);
 		try {
-			e.status === "ACTIVE" ? await Y(e.id) : await J(e.id);
+			e.status === "ACTIVE" ? await J(e.id) : await q(e.id);
 		} finally {
-			L(null);
+			P(null);
 		}
-	}, [J, Y]), pe = d(async (e) => {
-		L(e);
+	}, [q, J]), he = u(async (e) => {
+		P(e);
 		try {
-			await X(e);
+			await Y(e);
 		} finally {
-			L(null);
+			P(null);
 		}
-	}, [X]);
-	return /* @__PURE__ */ A(s, {
+	}, [Y]);
+	return /* @__PURE__ */ D(s, {
 		permission: c.CHANNEL_READ,
-		children: /* @__PURE__ */ j("div", {
+		children: /* @__PURE__ */ O("div", {
 			className: "space-y-5 p-3 sm:p-6",
 			children: [
-				/* @__PURE__ */ j("div", {
+				/* @__PURE__ */ O("div", {
 					className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ j("div", {
+					children: [/* @__PURE__ */ O("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ A("div", {
+						children: [/* @__PURE__ */ D("div", {
 							className: "p-2 rounded-lg bg-accent-primary/10",
-							children: /* @__PURE__ */ A(oe, {
+							children: /* @__PURE__ */ D(y, {
 								size: 20,
 								className: "text-accent-primary"
 							})
-						}), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("h1", {
+						}), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("h1", {
 							className: "text-xl font-bold text-foreground",
-							children: y("channel.channelDashboard", "Channel Dashboard")
-						}), /* @__PURE__ */ A("p", {
+							children: v("channel.channelDashboard", "Channel Dashboard")
+						}), /* @__PURE__ */ D("p", {
 							className: "text-sm text-muted-foreground",
-							children: y("channel.dashboardSubtitle", "Manage and monitor your communication channels")
+							children: v("channel.dashboardSubtitle", "Manage and monitor your communication channels")
 						})] })]
-					}), /* @__PURE__ */ j("div", {
+					}), /* @__PURE__ */ O("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ j("button", {
-							onClick: () => Z(),
+						children: [/* @__PURE__ */ O("button", {
+							onClick: () => X(),
 							className: "inline-flex items-center gap-1.5 px-3 py-2 text-sm text-muted-foreground hover:text-foreground border border-border rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors",
-							children: [/* @__PURE__ */ A(E, { size: 14 }), y("channel.refresh", "Refresh")]
-						}), /* @__PURE__ */ j("button", {
+							children: [/* @__PURE__ */ D(T, { size: 14 }), v("channel.refresh", "Refresh")]
+						}), /* @__PURE__ */ O("button", {
 							onClick: () => h("/channels/create"),
 							className: "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors",
-							children: [/* @__PURE__ */ A(S, { size: 14 }), y("channel.createChannel", "Create Channel")]
+							children: [/* @__PURE__ */ D(x, { size: 14 }), v("channel.createChannel", "Create Channel")]
 						})]
 					})]
 				}),
-				/* @__PURE__ */ j("div", {
-					className: "grid gap-3 grid-cols-2 lg:grid-cols-4",
+				/* @__PURE__ */ O("div", {
+					className: "grid gap-3 grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
 					children: [
-						/* @__PURE__ */ A(F, {
-							icon: T,
+						/* @__PURE__ */ D(M, {
+							icon: w,
 							iconClass: "text-accent-primary",
-							value: W,
-							label: y("channel.totalChannels", "Total Channels"),
-							sub: $.active > 0 ? `${$.active} ${y("channel.status.active", "Active").toLowerCase()}, ${W - $.active} ${y("channel.status.inactive", "Inactive").toLowerCase()}` : void 0
+							value: U,
+							label: v("channel.totalChannels", "Total Channels"),
+							sub: $.active > 0 ? `${$.active} ${v("channel.status.active", "Active").toLowerCase()}, ${U - $.active} ${v("channel.status.inactive", "Inactive").toLowerCase()}` : void 0
 						}),
-						/* @__PURE__ */ A(F, {
-							icon: O,
-							iconClass: "text-success-500",
+						/* @__PURE__ */ D(M, {
+							icon: ce,
+							iconClass: "text-status-success-text",
 							value: $.healthy,
-							label: y("channel.healthy", "Healthy"),
-							sub: $.unhealthy > 0 ? `${$.unhealthy} ${y("channel.health.unhealthy", "Unhealthy").toLowerCase()}` : W > 0 ? y("channel.allSystemsNominal", "All systems nominal") : void 0
+							label: v("channel.healthy", "Healthy"),
+							sub: $.unhealthy > 0 ? `${$.unhealthy} ${v("channel.health.unhealthy", "Unhealthy").toLowerCase()}` : U > 0 ? v("channel.allSystemsNominal", "All systems nominal") : void 0
 						}),
-						/* @__PURE__ */ A(F, {
+						/* @__PURE__ */ D(M, {
 							icon: g,
 							iconClass: "text-accent-blue",
 							value: $.connected,
-							label: y("channel.connected", "Connected"),
-							sub: W > 0 ? `${W - $.connected} ${y("channel.disconnected", "Disconnected").toLowerCase()}` : void 0
+							label: v("channel.connected", "Connected"),
+							sub: U > 0 ? `${U - $.connected} ${v("channel.disconnected", "Disconnected").toLowerCase()}` : void 0
 						}),
-						/* @__PURE__ */ A(F, {
-							icon: x,
+						/* @__PURE__ */ D(M, {
+							icon: oe,
 							iconClass: "text-accent-violet",
 							value: $.messages24h.toLocaleString(),
-							label: y("channel.messages24h", "Messages (24h)")
+							label: v("channel.messages24h", "Messages (24h)")
 						})
 					]
 				}),
-				$.errored > 0 && /* @__PURE__ */ j("div", {
-					className: "flex items-center gap-3 p-3 border border-error-500/30 bg-error-500/5 rounded-lg",
+				$.errored > 0 && /* @__PURE__ */ O("div", {
+					className: "flex items-center gap-3 p-3 border border-status-error-border/30 bg-status-error-bg-subtle rounded-lg",
 					children: [
-						/* @__PURE__ */ A(m, {
+						/* @__PURE__ */ D(m, {
 							size: 16,
-							className: "text-error-500 shrink-0"
+							className: "text-status-error-text shrink-0"
 						}),
-						/* @__PURE__ */ j("p", {
-							className: "text-sm text-error-400",
+						/* @__PURE__ */ O("p", {
+							className: "text-sm text-status-error-text",
 							children: [
-								/* @__PURE__ */ A("span", {
+								/* @__PURE__ */ D("span", {
 									className: "font-semibold",
 									children: $.errored
 								}),
 								" ",
-								y($.errored === 1 ? "channel.errorStateSummarySingle" : "channel.errorStateSummaryMultiple", $.errored === 1 ? "channel in error state" : "channels in error state")
+								v($.errored === 1 ? "channel.errorStateSummarySingle" : "channel.errorStateSummaryMultiple", $.errored === 1 ? "channel in error state" : "channels in error state")
 							]
 						}),
-						/* @__PURE__ */ A("button", {
-							onClick: () => K({ status: "ERROR" }),
-							className: "ml-auto text-xs font-medium text-error-400 hover:text-error-300 transition-colors",
-							children: y("channel.showErrors", "Show errors")
+						/* @__PURE__ */ D("button", {
+							onClick: () => G({ status: "ERROR" }),
+							className: "ml-auto text-xs font-medium text-status-error-text hover:text-status-error-text/80 transition-colors",
+							children: v("channel.showErrors", "Show errors")
 						})
 					]
 				}),
-				/* @__PURE__ */ j("div", {
+				/* @__PURE__ */ O("div", {
 					className: "flex flex-col gap-3 sm:flex-row sm:items-center",
 					children: [
-						/* @__PURE__ */ j("div", {
+						/* @__PURE__ */ O("div", {
 							className: "relative flex-1",
-							children: [/* @__PURE__ */ A(D, {
+							children: [/* @__PURE__ */ D(se, {
 								size: 14,
 								className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-							}), /* @__PURE__ */ A("input", {
+							}), /* @__PURE__ */ D("input", {
 								type: "text",
-								placeholder: y("channel.searchChannels", "Search channels..."),
-								value: G.search || "",
-								onChange: (e) => K({ search: e.target.value }),
+								placeholder: v("channel.searchChannels", "Search channels..."),
+								value: W.search || "",
+								onChange: (e) => G({ search: e.target.value }),
 								className: "w-full pl-9 pr-4 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 placeholder:text-muted-foreground"
 							})]
 						}),
-						/* @__PURE__ */ j("select", {
-							value: G.platform || "",
-							onChange: (e) => K({ platform: e.target.value || void 0 }),
+						/* @__PURE__ */ O("select", {
+							value: W.platform || "",
+							onChange: (e) => G({ platform: e.target.value || void 0 }),
 							className: "px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-foreground",
-							children: [/* @__PURE__ */ A("option", {
+							children: [/* @__PURE__ */ D("option", {
 								value: "",
-								children: y("channel.allPlatforms", "All Platforms")
-							}), Object.entries(M).map(([e, t]) => /* @__PURE__ */ A("option", {
+								children: v("channel.allPlatforms", "All Platforms")
+							}), Object.entries(k).map(([e, t]) => /* @__PURE__ */ D("option", {
 								value: e,
 								children: t.label
 							}, e))]
 						}),
-						/* @__PURE__ */ j("select", {
-							value: G.status || "",
-							onChange: (e) => K({ status: e.target.value || void 0 }),
+						/* @__PURE__ */ O("select", {
+							value: W.status || "",
+							onChange: (e) => G({ status: e.target.value || void 0 }),
 							className: "px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-foreground",
-							children: [/* @__PURE__ */ A("option", {
+							children: [/* @__PURE__ */ D("option", {
 								value: "",
-								children: y("channel.allStatus", "All Status")
-							}), Object.entries(N).map(([e, t]) => /* @__PURE__ */ A("option", {
+								children: v("channel.allStatus", "All Status")
+							}), Object.entries(A).map(([e, t]) => /* @__PURE__ */ D("option", {
 								value: e,
 								children: t.label
 							}, e))]
 						})
 					]
 				}),
-				U && /* @__PURE__ */ j("div", {
-					className: "flex items-center gap-3 p-4 bg-error-500/10 border border-error-500/30 rounded-lg",
+				H && /* @__PURE__ */ O("div", {
+					className: "flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border/30 rounded-lg",
 					children: [
-						/* @__PURE__ */ A(m, {
+						/* @__PURE__ */ D(m, {
 							size: 18,
-							className: "text-error-500 shrink-0"
+							className: "text-status-error-text shrink-0"
 						}),
-						/* @__PURE__ */ j("div", {
+						/* @__PURE__ */ O("div", {
 							className: "flex-1 min-w-0",
-							children: [/* @__PURE__ */ A("p", {
-								className: "text-sm font-medium text-error-400",
-								children: y("channel.loadFailed", "Failed to load channels")
-							}), /* @__PURE__ */ A("p", {
-								className: "text-xs text-error-400/70 truncate",
-								children: U
+							children: [/* @__PURE__ */ D("p", {
+								className: "text-sm font-medium text-status-error-text",
+								children: v("channel.loadFailed", "Failed to load channels")
+							}), /* @__PURE__ */ D("p", {
+								className: "text-xs text-status-error-text/70 truncate",
+								children: H
 							})]
 						}),
-						/* @__PURE__ */ A("button", {
-							onClick: () => Z(),
-							className: "shrink-0 px-3 py-1 text-sm text-error-400 hover:bg-error-500/10 rounded transition-colors",
-							children: y("channel.retry", "Retry")
+						/* @__PURE__ */ D("button", {
+							onClick: () => X(),
+							className: "shrink-0 px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
+							children: v("channel.retry", "Retry")
 						})
 					]
 				}),
-				H && V.length === 0 && /* @__PURE__ */ A("div", {
+				V && B.length === 0 && /* @__PURE__ */ D("div", {
 					className: "flex items-center justify-center py-16",
-					children: /* @__PURE__ */ A(b, {
+					children: /* @__PURE__ */ D(b, {
 						size: 28,
 						className: "animate-spin text-accent-primary"
 					})
 				}),
-				!H && !U && V.length === 0 && /* @__PURE__ */ j("div", {
+				!V && !H && B.length === 0 && /* @__PURE__ */ O("div", {
 					className: "flex flex-col items-center justify-center py-16 text-center",
 					children: [
-						/* @__PURE__ */ A("div", {
+						/* @__PURE__ */ D("div", {
 							className: "p-3 rounded-full bg-accent-primary/10 mb-4",
-							children: /* @__PURE__ */ A(T, {
+							children: /* @__PURE__ */ D(w, {
 								size: 36,
 								className: "text-accent-primary"
 							})
 						}),
-						/* @__PURE__ */ A("h3", {
+						/* @__PURE__ */ D("h3", {
 							className: "text-lg font-semibold text-foreground mb-1",
-							children: G.search || G.platform || G.status ? y("channel.noChannelsMatchFilter", "No channels match your filters") : y("channel.noChannels", "No channels yet")
+							children: W.search || W.platform || W.status ? v("channel.noChannelsMatchFilter", "No channels match your filters") : v("channel.noChannels", "No channels yet")
 						}),
-						/* @__PURE__ */ A("p", {
+						/* @__PURE__ */ D("p", {
 							className: "text-sm text-muted-foreground max-w-sm mb-5",
-							children: G.search || G.platform || G.status ? y("channel.adjustFilters", "Try adjusting your search or filters.") : y("channel.createFirstChannel", "Create your first communication channel to start sending messages across Email, SMS, Push, Slack and more.")
+							children: W.search || W.platform || W.status ? v("channel.adjustFilters", "Try adjusting your search or filters.") : v("channel.createFirstChannel", "Create your first communication channel to start sending messages across Email, SMS, Push, Slack and more.")
 						}),
-						!(G.search || G.platform || G.status) && /* @__PURE__ */ j("button", {
+						!(W.search || W.platform || W.status) && /* @__PURE__ */ O("button", {
 							onClick: () => h("/channels/create"),
 							className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors",
-							children: [/* @__PURE__ */ A(S, { size: 14 }), y("channel.createChannel", "Create Channel")]
+							children: [/* @__PURE__ */ D(x, { size: 14 }), v("channel.createChannel", "Create Channel")]
 						})
 					]
 				}),
-				V.length > 0 && /* @__PURE__ */ j("div", {
+				B.length > 0 && /* @__PURE__ */ O("div", {
 					className: "border border-border rounded-lg overflow-hidden",
-					children: [/* @__PURE__ */ A("div", {
+					children: [/* @__PURE__ */ D("div", {
 						className: "overflow-x-auto min-w-full",
-						children: /* @__PURE__ */ j("table", {
+						children: /* @__PURE__ */ O("table", {
 							className: "w-full text-sm min-w-[800px]",
-							children: [/* @__PURE__ */ A("thead", { children: /* @__PURE__ */ j("tr", {
+							children: [/* @__PURE__ */ D("thead", { children: /* @__PURE__ */ O("tr", {
 								className: "hover:bg-action-primary-bg/10/50 border-b border-border",
 								children: [
-									/* @__PURE__ */ A("th", {
+									/* @__PURE__ */ D("th", {
 										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: y("channel.channel", "Channel")
+										children: v("channel.channel", "Channel")
 									}),
-									/* @__PURE__ */ A("th", {
+									/* @__PURE__ */ D("th", {
 										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: y("channel.platform", "Platform")
+										children: v("channel.platform", "Platform")
 									}),
-									/* @__PURE__ */ A("th", {
+									/* @__PURE__ */ D("th", {
 										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: y("channel.status", "Status")
+										children: v("channel.status", "Status")
 									}),
-									/* @__PURE__ */ A("th", {
+									/* @__PURE__ */ D("th", {
 										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: y("channel.health", "Health")
+										children: v("channel.health", "Health")
 									}),
-									/* @__PURE__ */ A("th", {
+									/* @__PURE__ */ D("th", {
 										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: y("channel.connection", "Connection")
+										children: v("channel.connection", "Connection")
 									}),
-									/* @__PURE__ */ A("th", {
+									/* @__PURE__ */ D("th", {
 										className: "text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: y("channel.msgs24h", "Msgs 24h")
+										children: v("channel.msgs24h", "Msgs 24h")
 									}),
-									/* @__PURE__ */ A("th", {
+									/* @__PURE__ */ D("th", {
 										className: "text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: y("channel.updated", "Updated")
+										children: v("channel.updated", "Updated")
 									}),
-									/* @__PURE__ */ A("th", {
+									/* @__PURE__ */ D("th", {
 										className: "text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: y("channel.actions", "Actions")
+										children: v("channel.actions", "Actions")
 									})
 								]
-							}) }), /* @__PURE__ */ A("tbody", {
+							}) }), /* @__PURE__ */ D("tbody", {
 								className: "divide-y divide-border",
-								children: V.map((e) => {
-									let t = ue === e.id;
-									return /* @__PURE__ */ j("tr", {
+								children: B.map((e) => {
+									let t = fe === e.id;
+									return /* @__PURE__ */ O("tr", {
 										className: "bg-surface hover:hover:bg-action-primary-bg/10/60 transition-colors group",
 										children: [
-											/* @__PURE__ */ A("td", {
+											/* @__PURE__ */ D("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ j("button", {
+												children: /* @__PURE__ */ O("button", {
 													onClick: () => h(`/channels/${e.id}`),
 													className: "text-left group/name",
-													children: [/* @__PURE__ */ A("p", {
+													children: [/* @__PURE__ */ D("p", {
 														className: "font-medium text-foreground group-hover/name:text-accent-primary transition-colors truncate max-w-[200px]",
 														children: e.name
-													}), e.description && /* @__PURE__ */ A("p", {
+													}), e.description && /* @__PURE__ */ D("p", {
 														className: "text-xs text-muted-foreground truncate max-w-[200px]",
 														children: e.description
 													})]
 												})
 											}),
-											/* @__PURE__ */ j("td", {
+											/* @__PURE__ */ O("td", {
 												className: "px-4 py-3",
-												children: [/* @__PURE__ */ A("span", {
-													className: `inline-flex items-center px-2 py-0.5 text-[11px] font-semibold rounded-full ${R(e.platform).color}`,
-													children: R(e.platform).label
-												}), e.adapterType && /* @__PURE__ */ A("p", {
+												children: [/* @__PURE__ */ D("span", {
+													className: `inline-flex items-center px-2 py-0.5 text-[11px] font-semibold rounded-full ${L(e.platform).color}`,
+													children: L(e.platform).label
+												}), e.adapterType && /* @__PURE__ */ D("p", {
 													className: "text-[10px] text-muted-foreground mt-0.5 font-mono",
 													children: e.adapterType.replace(/_/g, " ")
 												})]
 											}),
-											/* @__PURE__ */ A("td", {
+											/* @__PURE__ */ D("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ j("span", {
+												children: /* @__PURE__ */ O("span", {
 													className: "inline-flex items-center gap-1.5",
-													children: [/* @__PURE__ */ A("span", { className: `w-1.5 h-1.5 rounded-full ${z(e.status).dotColor}` }), /* @__PURE__ */ A("span", {
-														className: `text-xs ${z(e.status).textColor}`,
-														children: z(e.status).label
+													children: [/* @__PURE__ */ D("span", { className: `w-1.5 h-1.5 rounded-full ${R(e.status).dotColor}` }), /* @__PURE__ */ D("span", {
+														className: `text-xs ${R(e.status).textColor}`,
+														children: R(e.status).label
 													})]
 												})
 											}),
-											/* @__PURE__ */ A("td", {
+											/* @__PURE__ */ D("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ j("span", {
-													className: `inline-flex items-center gap-1 text-xs ${B(e.connectionHealth).color}`,
+												children: /* @__PURE__ */ O("span", {
+													className: `inline-flex items-center gap-1 text-xs ${z(e.connectionHealth).color}`,
 													children: [(() => {
-														let t = B(e.connectionHealth).icon;
-														return /* @__PURE__ */ A(t, { size: 12 });
-													})(), B(e.connectionHealth).label]
+														let t = z(e.connectionHealth).icon;
+														return /* @__PURE__ */ D(t, { size: 12 });
+													})(), z(e.connectionHealth).label]
 												})
 											}),
-											/* @__PURE__ */ A("td", {
+											/* @__PURE__ */ D("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ A("span", {
-													className: `text-xs ${e.isConnected ? "text-success-500" : "text-muted-foreground"}`,
-													children: e.isConnected ? y("channel.connected", "Connected") : y("channel.disconnected", "Disconnected")
+												children: /* @__PURE__ */ D("span", {
+													className: `text-xs ${e.isConnected ? "text-status-success-text" : "text-muted-foreground"}`,
+													children: e.isConnected ? v("channel.connected", "Connected") : v("channel.disconnected", "Disconnected")
 												})
 											}),
-											/* @__PURE__ */ A("td", {
+											/* @__PURE__ */ D("td", {
 												className: "px-4 py-3 text-right",
-												children: /* @__PURE__ */ A("span", {
+												children: /* @__PURE__ */ D("span", {
 													className: "text-xs text-foreground tabular-nums",
 													children: (e.messageCount24h ?? 0).toLocaleString()
 												})
 											}),
-											/* @__PURE__ */ A("td", {
+											/* @__PURE__ */ D("td", {
 												className: "px-4 py-3 text-right",
-												children: /* @__PURE__ */ A("span", {
+												children: /* @__PURE__ */ D("span", {
 													className: "text-xs text-muted-foreground whitespace-nowrap",
-													children: le(e.updatedAt)
+													children: de(e.updatedAt)
 												})
 											}),
-											/* @__PURE__ */ A("td", {
+											/* @__PURE__ */ D("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ j("div", {
+												children: /* @__PURE__ */ O("div", {
 													className: "flex items-center justify-end gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
 													children: [
-														/* @__PURE__ */ A("button", {
+														/* @__PURE__ */ D("button", {
 															onClick: () => h(`/channels/${e.id}`),
 															className: "p-1.5 text-muted-foreground hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors",
-															title: y("channel.view", "View"),
-															children: /* @__PURE__ */ A(v, { size: 14 })
+															title: v("channel.view", "View"),
+															children: /* @__PURE__ */ D(ae, { size: 14 })
 														}),
-														/* @__PURE__ */ A(s, {
+														/* @__PURE__ */ D(s, {
 															permission: c.CHANNEL_EXECUTE,
-															children: /* @__PURE__ */ A("button", {
-																onClick: () => pe(e.id),
+															children: /* @__PURE__ */ D("button", {
+																onClick: () => he(e.id),
 																disabled: t,
 																className: "p-1.5 text-muted-foreground hover:text-accent-blue hover:bg-accent-blue-subtle rounded transition-colors disabled:opacity-40",
-																title: y("channel.healthCheck", "Health Check"),
-																children: t ? /* @__PURE__ */ A(b, {
+																title: v("channel.healthCheck", "Health Check"),
+																children: t ? /* @__PURE__ */ D(b, {
 																	size: 14,
 																	className: "animate-spin"
-																}) : /* @__PURE__ */ A(E, { size: 14 })
+																}) : /* @__PURE__ */ D(T, { size: 14 })
 															})
 														}),
-														/* @__PURE__ */ A(s, {
+														/* @__PURE__ */ D(s, {
 															permission: c.CHANNEL_UPDATE,
-															children: /* @__PURE__ */ A("button", {
-																onClick: () => fe(e),
+															children: /* @__PURE__ */ D("button", {
+																onClick: () => me(e),
 																disabled: t,
-																className: `p-1.5 rounded transition-colors disabled:opacity-40 ${e.status === "ACTIVE" ? "text-muted-foreground hover:text-warning-500 hover:bg-warning-500/10" : "text-muted-foreground hover:text-success-500 hover:bg-success-500/10"}`,
-																title: e.status === "ACTIVE" ? y("channel.deactivate", "Deactivate") : y("channel.activate", "Activate"),
-																children: e.status === "ACTIVE" ? /* @__PURE__ */ A(w, { size: 14 }) : /* @__PURE__ */ A(C, { size: 14 })
+																className: `p-1.5 rounded transition-colors disabled:opacity-40 ${e.status === "ACTIVE" ? "text-muted-foreground hover:text-status-warning-text hover:bg-warning-500/10" : "text-muted-foreground hover:text-status-success-text hover:bg-success-500/10"}`,
+																title: e.status === "ACTIVE" ? v("channel.deactivate", "Deactivate") : v("channel.activate", "Activate"),
+																children: e.status === "ACTIVE" ? /* @__PURE__ */ D(C, { size: 14 }) : /* @__PURE__ */ D(S, { size: 14 })
 															})
 														}),
-														k === e.id ? /* @__PURE__ */ j("span", {
+														E === e.id ? /* @__PURE__ */ O("span", {
 															className: "inline-flex items-center gap-1 ml-1",
-															children: [/* @__PURE__ */ A("button", {
-																onClick: () => de(e.id),
+															children: [/* @__PURE__ */ D("button", {
+																onClick: () => pe(e.id),
 																disabled: t,
-																className: "px-1.5 py-0.5 text-[11px] font-medium text-error-400 hover:bg-error-500/10 rounded transition-colors",
-																children: t ? "..." : y("channel.yes", "Yes")
-															}), /* @__PURE__ */ A("button", {
-																onClick: () => I(null),
+																className: "px-1.5 py-0.5 text-[11px] font-medium text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
+																children: t ? "..." : v("channel.yes", "Yes")
+															}), /* @__PURE__ */ D("button", {
+																onClick: () => N(null),
 																className: "px-1.5 py-0.5 text-[11px] text-muted-foreground hover:hover:bg-action-primary-bg/10 rounded transition-colors",
-																children: y("channel.no", "No")
+																children: v("channel.no", "No")
 															})]
-														}) : /* @__PURE__ */ A(s, {
+														}) : /* @__PURE__ */ D(s, {
 															permission: c.CHANNEL_DELETE,
-															children: /* @__PURE__ */ A("button", {
-																onClick: () => I(e.id),
-																className: "p-1.5 text-muted-foreground hover:text-error-500 hover:bg-error-500/10 rounded transition-colors",
-																title: y("channel.delete", "Delete"),
-																children: /* @__PURE__ */ A(se, { size: 14 })
+															children: /* @__PURE__ */ D("button", {
+																onClick: () => N(e.id),
+																className: "p-1.5 text-muted-foreground hover:text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
+																title: v("channel.delete", "Delete"),
+																children: /* @__PURE__ */ D(le, { size: 14 })
 															})
 														})
 													]
@@ -582,89 +595,109 @@ function I() {
 								})
 							})]
 						})
-					}), /* @__PURE__ */ j("div", {
-						className: "px-4 py-2.5 hover:bg-action-primary-bg/10/30 border-t border-border flex items-center justify-between",
-						children: [/* @__PURE__ */ j("p", {
+					}), /* @__PURE__ */ O("div", {
+						className: "px-4 py-2.5 border-t border-border flex items-center justify-between",
+						children: [/* @__PURE__ */ O("p", {
 							className: "text-xs text-muted-foreground",
 							children: [
-								y("channel.showing", "Showing"),
+								v("channel.showing", "Showing"),
 								" ",
-								/* @__PURE__ */ A("span", {
+								/* @__PURE__ */ O("span", {
 									className: "font-medium text-foreground",
-									children: V.length
+									children: [
+										U === 0 ? 0 : F * 10 + 1,
+										"–",
+										Math.min((F + 1) * 10, U)
+									]
 								}),
 								" ",
-								y("channel.of", "of"),
+								v("channel.of", "of"),
 								" ",
-								/* @__PURE__ */ A("span", {
+								/* @__PURE__ */ D("span", {
 									className: "font-medium text-foreground",
-									children: W
+									children: U
 								}),
 								" ",
-								y("channel.channelsLower", "channels")
+								v("channel.channelsLower", "channels")
 							]
-						}), V.length < W && /* @__PURE__ */ j("button", {
-							onClick: () => h("/channels/?tab=all"),
-							className: "inline-flex items-center gap-1 text-xs font-medium text-accent-primary hover:text-action-primary-bg transition-colors",
+						}), /* @__PURE__ */ O("div", {
+							className: "flex items-center gap-2",
 							children: [
-								y("channel.viewAll", "View All"),
-								" ",
-								/* @__PURE__ */ A(ae, { size: 12 })
+								/* @__PURE__ */ D("button", {
+									onClick: () => I((e) => Math.max(0, e - 1)),
+									disabled: F === 0,
+									className: "px-2.5 py-1 text-xs border border-border rounded hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+									children: v("channel.previous", "Prev")
+								}),
+								/* @__PURE__ */ O("span", {
+									className: "text-xs text-muted-foreground",
+									children: [
+										F + 1,
+										" / ",
+										Z
+									]
+								}),
+								/* @__PURE__ */ D("button", {
+									onClick: () => I((e) => Math.min(Z - 1, e + 1)),
+									disabled: F >= Z - 1,
+									className: "px-2.5 py-1 text-xs border border-border rounded hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+									children: v("channel.next", "Next")
+								})
 							]
 						})]
 					})]
 				}),
-				V.length > 0 && /* @__PURE__ */ j("div", {
+				B.length > 0 && /* @__PURE__ */ O("div", {
 					className: "grid gap-3 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ j("button", {
+						/* @__PURE__ */ O("button", {
 							onClick: () => h("/channels/?tab=all"),
 							className: "flex items-center gap-3 p-3 bg-surface border border-border rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors text-left",
-							children: [/* @__PURE__ */ A(T, {
+							children: [/* @__PURE__ */ D(w, {
 								size: 16,
 								className: "text-accent-primary shrink-0"
-							}), /* @__PURE__ */ j("div", {
+							}), /* @__PURE__ */ O("div", {
 								className: "min-w-0",
-								children: [/* @__PURE__ */ A("p", {
+								children: [/* @__PURE__ */ D("p", {
 									className: "text-sm font-medium text-foreground",
-									children: y("channel.allChannels", "All Channels")
-								}), /* @__PURE__ */ A("p", {
+									children: v("channel.allChannels", "All Channels")
+								}), /* @__PURE__ */ D("p", {
 									className: "text-xs text-muted-foreground truncate",
-									children: y("channel.browseChannels", "Browse and manage channel cards")
+									children: v("channel.browseChannels", "Browse and manage channel cards")
 								})]
 							})]
 						}),
-						/* @__PURE__ */ j("button", {
+						/* @__PURE__ */ O("button", {
 							onClick: () => h("/channels/?tab=connections"),
 							className: "flex items-center gap-3 p-3 bg-surface border border-border rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors text-left",
-							children: [/* @__PURE__ */ A(g, {
+							children: [/* @__PURE__ */ D(g, {
 								size: 16,
 								className: "text-accent-blue shrink-0"
-							}), /* @__PURE__ */ j("div", {
+							}), /* @__PURE__ */ O("div", {
 								className: "min-w-0",
-								children: [/* @__PURE__ */ A("p", {
+								children: [/* @__PURE__ */ D("p", {
 									className: "text-sm font-medium text-foreground",
-									children: y("channel.connections", "Connections")
-								}), /* @__PURE__ */ A("p", {
+									children: v("channel.connections", "Connections")
+								}), /* @__PURE__ */ D("p", {
 									className: "text-xs text-muted-foreground truncate",
-									children: y("channel.connectionsSubtitle", "OAuth, API keys & credentials")
+									children: v("channel.connectionsSubtitle", "OAuth, API keys & credentials")
 								})]
 							})]
 						}),
-						/* @__PURE__ */ j("button", {
+						/* @__PURE__ */ O("button", {
 							onClick: () => h("/channels/?tab=send"),
 							className: "flex items-center gap-3 p-3 bg-surface border border-border rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors text-left",
-							children: [/* @__PURE__ */ A(ie, {
+							children: [/* @__PURE__ */ D(p, {
 								size: 16,
 								className: "text-accent-violet shrink-0"
-							}), /* @__PURE__ */ j("div", {
+							}), /* @__PURE__ */ O("div", {
 								className: "min-w-0",
-								children: [/* @__PURE__ */ A("p", {
+								children: [/* @__PURE__ */ D("p", {
 									className: "text-sm font-medium text-foreground",
-									children: y("channel.sendMessage", "Send Message")
-								}), /* @__PURE__ */ A("p", {
+									children: v("channel.sendMessage", "Send Message")
+								}), /* @__PURE__ */ D("p", {
 									className: "text-xs text-muted-foreground truncate",
-									children: y("channel.sendMessageSubtitle", "Send a test or one-off notification")
+									children: v("channel.sendMessageSubtitle", "Send a test or one-off notification")
 								})]
 							})]
 						})
@@ -675,6 +708,6 @@ function I() {
 	});
 }
 //#endregion
-export { I as ChannelDashboardPage };
+export { N as ChannelDashboardPage };
 
 //# sourceMappingURL=ChannelDashboardPage.js.map