@burdenoff/microfe-channel 2026.510.112

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

@@ -0,0 +1,680 @@
+import { useChannel as e } from "../../../providers/ChannelProvider.js";
+import { nativeImpact as t, nativeNotify as n } from "../../../../utils/nativeBridge.js";
+import { subscribeShellEvent as r } from "../../../utils/shellBridge.js";
+import { CHANNEL_HEALTH_CHANGED_SUBSCRIPTION as i, useChannelSubscription as a } from "../../../hooks/useChannelSubscription.js";
+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";
+//#region src/channel/modules/channels/pages/ChannelDashboardPage.tsx
+var M = {
+	EMAIL: {
+		label: "Email",
+		color: "bg-accent-blue-subtle text-accent-blue"
+	},
+	SMS: {
+		label: "SMS",
+		color: "bg-status-success-bg-subtle text-status-success-text"
+	},
+	PUSH: {
+		label: "Push",
+		color: "bg-accent-purple-subtle text-accent-purple"
+	},
+	INAPP: {
+		label: "In-App",
+		color: "bg-accent-indigo-subtle text-accent-indigo"
+	},
+	WEBHOOK: {
+		label: "Webhook",
+		color: "bg-accent-orange-subtle text-accent-orange"
+	},
+	SLACK: {
+		label: "Slack",
+		color: "bg-accent-pink-subtle text-accent-pink"
+	},
+	TEAMS: {
+		label: "Teams",
+		color: "bg-accent-cyan-subtle text-accent-cyan"
+	},
+	DISCORD: {
+		label: "Discord",
+		color: "bg-accent-violet-subtle text-accent-violet"
+	},
+	WHATSAPP: {
+		label: "WhatsApp",
+		color: "bg-accent-emerald-subtle text-accent-emerald"
+	},
+	WEBCHAT: {
+		label: "Webchat",
+		color: "bg-accent-teal-subtle text-accent-teal"
+	}
+}, N = {
+	ACTIVE: {
+		label: "Active",
+		dotColor: "bg-success-500",
+		textColor: "text-success-500",
+		icon: _
+	},
+	INACTIVE: {
+		label: "Inactive",
+		dotColor: "bg-text-tertiary",
+		textColor: "text-muted-foreground",
+		icon: w
+	},
+	ERROR: {
+		label: "Error",
+		dotColor: "bg-error-500",
+		textColor: "text-error-500",
+		icon: k
+	},
+	SUSPENDED: {
+		label: "Suspended",
+		dotColor: "bg-warning-500",
+		textColor: "text-warning-500",
+		icon: h
+	},
+	ARCHIVED: {
+		label: "Archived",
+		dotColor: "bg-text-tertiary",
+		textColor: "text-muted-foreground",
+		icon: w
+	}
+}, P = {
+	HEALTHY: {
+		label: "Healthy",
+		color: "text-success-500",
+		icon: _
+	},
+	DEGRADED: {
+		label: "Degraded",
+		color: "text-warning-500",
+		icon: h
+	},
+	UNHEALTHY: {
+		label: "Unhealthy",
+		color: "text-error-500",
+		icon: k
+	},
+	UNKNOWN: {
+		label: "Unknown",
+		color: "text-muted-foreground",
+		icon: y
+	}
+};
+function le(e) {
+	let t = Date.now() - new Date(e).getTime();
+	if (Number.isNaN(t) || t < 0) return "just now";
+	let n = Math.floor(t / 1e3);
+	if (n < 60) return "just now";
+	let r = Math.floor(n / 60);
+	if (r < 60) return `${r}m ago`;
+	let i = Math.floor(r / 60);
+	if (i < 24) return `${i}h ago`;
+	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", {
+		className: "p-4 bg-surface border border-border rounded-lg",
+		children: [/* @__PURE__ */ j("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ A("div", {
+				className: "p-2 rounded-lg hover:bg-action-primary-bg/10",
+				children: /* @__PURE__ */ A(e, {
+					size: 18,
+					className: t
+				})
+			}), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+				className: "text-2xl font-bold text-foreground leading-tight",
+				children: n
+			}), /* @__PURE__ */ A("p", {
+				className: "text-xs text-muted-foreground",
+				children: r
+			})] })]
+		}), i && /* @__PURE__ */ A("p", {
+			className: "text-[11px] text-muted-foreground mt-2 pl-11",
+			children: i
+		})]
+	});
+}
+function I() {
+	let h = ce(), { t: _ } = p(), y = (e, t) => {
+		let n = _(e);
+		return n === e ? t : n;
+	}, [k, I] = f(null), [ue, L] = f(null), R = (e) => ({
+		...M[e] ?? {
+			label: e,
+			color: "bg-bg-sunken text-text-tertiary"
+		},
+		label: u(e, l, y)
+	}), 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();
+	a({
+		query: i,
+		variables: { organizationId: Q },
+		operationName: "ChannelHealthChanged",
+		enabled: !!Q,
+		onData: () => void Z(),
+		pollFn: Z,
+		pollIntervalMs: 6e4
+	}), ne(() => {
+		let e = [
+			"channel.created",
+			"channel.updated",
+			"channel.deleted",
+			"connection.created",
+			"connection.updated",
+			"connection.deleted",
+			"delivery.completed",
+			"webhook.received"
+		].map((e) => r(e, () => void Z()));
+		return () => e.forEach((e) => e());
+	}, [Z]);
+	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;
+		return {
+			active: e,
+			healthy: t,
+			connected: n,
+			messages24h: r,
+			errored: i,
+			unhealthy: a
+		};
+	}, [V]), de = d(async (e) => {
+		t("medium"), L(e);
+		try {
+			await q(e), n("success"), I(null);
+		} catch (e) {
+			throw n("error"), e;
+		} finally {
+			L(null);
+		}
+	}, [q]), fe = d(async (e) => {
+		L(e.id);
+		try {
+			e.status === "ACTIVE" ? await Y(e.id) : await J(e.id);
+		} finally {
+			L(null);
+		}
+	}, [J, Y]), pe = d(async (e) => {
+		L(e);
+		try {
+			await X(e);
+		} finally {
+			L(null);
+		}
+	}, [X]);
+	return /* @__PURE__ */ A(s, {
+		permission: c.CHANNEL_READ,
+		children: /* @__PURE__ */ j("div", {
+			className: "space-y-5 p-3 sm:p-6",
+			children: [
+				/* @__PURE__ */ j("div", {
+					className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ j("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ A("div", {
+							className: "p-2 rounded-lg bg-accent-primary/10",
+							children: /* @__PURE__ */ A(oe, {
+								size: 20,
+								className: "text-accent-primary"
+							})
+						}), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("h1", {
+							className: "text-xl font-bold text-foreground",
+							children: y("channel.channelDashboard", "Channel Dashboard")
+						}), /* @__PURE__ */ A("p", {
+							className: "text-sm text-muted-foreground",
+							children: y("channel.dashboardSubtitle", "Manage and monitor your communication channels")
+						})] })]
+					}), /* @__PURE__ */ j("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ j("button", {
+							onClick: () => Z(),
+							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", {
+							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")]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ j("div", {
+					className: "grid gap-3 grid-cols-2 lg:grid-cols-4",
+					children: [
+						/* @__PURE__ */ A(F, {
+							icon: T,
+							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
+						}),
+						/* @__PURE__ */ A(F, {
+							icon: O,
+							iconClass: "text-success-500",
+							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
+						}),
+						/* @__PURE__ */ A(F, {
+							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
+						}),
+						/* @__PURE__ */ A(F, {
+							icon: x,
+							iconClass: "text-accent-violet",
+							value: $.messages24h.toLocaleString(),
+							label: y("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",
+					children: [
+						/* @__PURE__ */ A(m, {
+							size: 16,
+							className: "text-error-500 shrink-0"
+						}),
+						/* @__PURE__ */ j("p", {
+							className: "text-sm text-error-400",
+							children: [
+								/* @__PURE__ */ A("span", {
+									className: "font-semibold",
+									children: $.errored
+								}),
+								" ",
+								y($.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__ */ j("div", {
+					className: "flex flex-col gap-3 sm:flex-row sm:items-center",
+					children: [
+						/* @__PURE__ */ j("div", {
+							className: "relative flex-1",
+							children: [/* @__PURE__ */ A(D, {
+								size: 14,
+								className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+							}), /* @__PURE__ */ A("input", {
+								type: "text",
+								placeholder: y("channel.searchChannels", "Search channels..."),
+								value: G.search || "",
+								onChange: (e) => K({ 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 }),
+							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", {
+								value: "",
+								children: y("channel.allPlatforms", "All Platforms")
+							}), Object.entries(M).map(([e, t]) => /* @__PURE__ */ A("option", {
+								value: e,
+								children: t.label
+							}, e))]
+						}),
+						/* @__PURE__ */ j("select", {
+							value: G.status || "",
+							onChange: (e) => K({ 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", {
+								value: "",
+								children: y("channel.allStatus", "All Status")
+							}), Object.entries(N).map(([e, t]) => /* @__PURE__ */ A("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",
+					children: [
+						/* @__PURE__ */ A(m, {
+							size: 18,
+							className: "text-error-500 shrink-0"
+						}),
+						/* @__PURE__ */ j("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
+							})]
+						}),
+						/* @__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")
+						})
+					]
+				}),
+				H && V.length === 0 && /* @__PURE__ */ A("div", {
+					className: "flex items-center justify-center py-16",
+					children: /* @__PURE__ */ A(b, {
+						size: 28,
+						className: "animate-spin text-accent-primary"
+					})
+				}),
+				!H && !U && V.length === 0 && /* @__PURE__ */ j("div", {
+					className: "flex flex-col items-center justify-center py-16 text-center",
+					children: [
+						/* @__PURE__ */ A("div", {
+							className: "p-3 rounded-full bg-accent-primary/10 mb-4",
+							children: /* @__PURE__ */ A(T, {
+								size: 36,
+								className: "text-accent-primary"
+							})
+						}),
+						/* @__PURE__ */ A("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")
+						}),
+						/* @__PURE__ */ A("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.")
+						}),
+						!(G.search || G.platform || G.status) && /* @__PURE__ */ j("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")]
+						})
+					]
+				}),
+				V.length > 0 && /* @__PURE__ */ j("div", {
+					className: "border border-border rounded-lg overflow-hidden",
+					children: [/* @__PURE__ */ A("div", {
+						className: "overflow-x-auto min-w-full",
+						children: /* @__PURE__ */ j("table", {
+							className: "w-full text-sm min-w-[800px]",
+							children: [/* @__PURE__ */ A("thead", { children: /* @__PURE__ */ j("tr", {
+								className: "hover:bg-action-primary-bg/10/50 border-b border-border",
+								children: [
+									/* @__PURE__ */ A("th", {
+										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: y("channel.channel", "Channel")
+									}),
+									/* @__PURE__ */ A("th", {
+										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: y("channel.platform", "Platform")
+									}),
+									/* @__PURE__ */ A("th", {
+										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: y("channel.status", "Status")
+									}),
+									/* @__PURE__ */ A("th", {
+										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: y("channel.health", "Health")
+									}),
+									/* @__PURE__ */ A("th", {
+										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: y("channel.connection", "Connection")
+									}),
+									/* @__PURE__ */ A("th", {
+										className: "text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: y("channel.msgs24h", "Msgs 24h")
+									}),
+									/* @__PURE__ */ A("th", {
+										className: "text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: y("channel.updated", "Updated")
+									}),
+									/* @__PURE__ */ A("th", {
+										className: "text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: y("channel.actions", "Actions")
+									})
+								]
+							}) }), /* @__PURE__ */ A("tbody", {
+								className: "divide-y divide-border",
+								children: V.map((e) => {
+									let t = ue === e.id;
+									return /* @__PURE__ */ j("tr", {
+										className: "bg-surface hover:hover:bg-action-primary-bg/10/60 transition-colors group",
+										children: [
+											/* @__PURE__ */ A("td", {
+												className: "px-4 py-3",
+												children: /* @__PURE__ */ j("button", {
+													onClick: () => h(`/channels/${e.id}`),
+													className: "text-left group/name",
+													children: [/* @__PURE__ */ A("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", {
+														className: "text-xs text-muted-foreground truncate max-w-[200px]",
+														children: e.description
+													})]
+												})
+											}),
+											/* @__PURE__ */ j("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", {
+													className: "text-[10px] text-muted-foreground mt-0.5 font-mono",
+													children: e.adapterType.replace(/_/g, " ")
+												})]
+											}),
+											/* @__PURE__ */ A("td", {
+												className: "px-4 py-3",
+												children: /* @__PURE__ */ j("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
+													})]
+												})
+											}),
+											/* @__PURE__ */ A("td", {
+												className: "px-4 py-3",
+												children: /* @__PURE__ */ j("span", {
+													className: `inline-flex items-center gap-1 text-xs ${B(e.connectionHealth).color}`,
+													children: [(() => {
+														let t = B(e.connectionHealth).icon;
+														return /* @__PURE__ */ A(t, { size: 12 });
+													})(), B(e.connectionHealth).label]
+												})
+											}),
+											/* @__PURE__ */ A("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")
+												})
+											}),
+											/* @__PURE__ */ A("td", {
+												className: "px-4 py-3 text-right",
+												children: /* @__PURE__ */ A("span", {
+													className: "text-xs text-foreground tabular-nums",
+													children: (e.messageCount24h ?? 0).toLocaleString()
+												})
+											}),
+											/* @__PURE__ */ A("td", {
+												className: "px-4 py-3 text-right",
+												children: /* @__PURE__ */ A("span", {
+													className: "text-xs text-muted-foreground whitespace-nowrap",
+													children: le(e.updatedAt)
+												})
+											}),
+											/* @__PURE__ */ A("td", {
+												className: "px-4 py-3",
+												children: /* @__PURE__ */ j("div", {
+													className: "flex items-center justify-end gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
+													children: [
+														/* @__PURE__ */ A("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 })
+														}),
+														/* @__PURE__ */ A(s, {
+															permission: c.CHANNEL_EXECUTE,
+															children: /* @__PURE__ */ A("button", {
+																onClick: () => pe(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, {
+																	size: 14,
+																	className: "animate-spin"
+																}) : /* @__PURE__ */ A(E, { size: 14 })
+															})
+														}),
+														/* @__PURE__ */ A(s, {
+															permission: c.CHANNEL_UPDATE,
+															children: /* @__PURE__ */ A("button", {
+																onClick: () => fe(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 })
+															})
+														}),
+														k === e.id ? /* @__PURE__ */ j("span", {
+															className: "inline-flex items-center gap-1 ml-1",
+															children: [/* @__PURE__ */ A("button", {
+																onClick: () => de(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] text-muted-foreground hover:hover:bg-action-primary-bg/10 rounded transition-colors",
+																children: y("channel.no", "No")
+															})]
+														}) : /* @__PURE__ */ A(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 })
+															})
+														})
+													]
+												})
+											})
+										]
+									}, e.id);
+								})
+							})]
+						})
+					}), /* @__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", {
+							className: "text-xs text-muted-foreground",
+							children: [
+								y("channel.showing", "Showing"),
+								" ",
+								/* @__PURE__ */ A("span", {
+									className: "font-medium text-foreground",
+									children: V.length
+								}),
+								" ",
+								y("channel.of", "of"),
+								" ",
+								/* @__PURE__ */ A("span", {
+									className: "font-medium text-foreground",
+									children: W
+								}),
+								" ",
+								y("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",
+							children: [
+								y("channel.viewAll", "View All"),
+								" ",
+								/* @__PURE__ */ A(ae, { size: 12 })
+							]
+						})]
+					})]
+				}),
+				V.length > 0 && /* @__PURE__ */ j("div", {
+					className: "grid gap-3 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ j("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, {
+								size: 16,
+								className: "text-accent-primary shrink-0"
+							}), /* @__PURE__ */ j("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ A("p", {
+									className: "text-sm font-medium text-foreground",
+									children: y("channel.allChannels", "All Channels")
+								}), /* @__PURE__ */ A("p", {
+									className: "text-xs text-muted-foreground truncate",
+									children: y("channel.browseChannels", "Browse and manage channel cards")
+								})]
+							})]
+						}),
+						/* @__PURE__ */ j("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, {
+								size: 16,
+								className: "text-accent-blue shrink-0"
+							}), /* @__PURE__ */ j("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ A("p", {
+									className: "text-sm font-medium text-foreground",
+									children: y("channel.connections", "Connections")
+								}), /* @__PURE__ */ A("p", {
+									className: "text-xs text-muted-foreground truncate",
+									children: y("channel.connectionsSubtitle", "OAuth, API keys & credentials")
+								})]
+							})]
+						}),
+						/* @__PURE__ */ j("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, {
+								size: 16,
+								className: "text-accent-violet shrink-0"
+							}), /* @__PURE__ */ j("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ A("p", {
+									className: "text-sm font-medium text-foreground",
+									children: y("channel.sendMessage", "Send Message")
+								}), /* @__PURE__ */ A("p", {
+									className: "text-xs text-muted-foreground truncate",
+									children: y("channel.sendMessageSubtitle", "Send a test or one-off notification")
+								})]
+							})]
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { I as ChannelDashboardPage };
+
+//# sourceMappingURL=ChannelDashboardPage.js.map