@burdenoff/microfe-channel 2026.624.3 → 2026.625.1

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

@@ -8,13 +8,14 @@ import { HEALTH_I18N as ee, PLATFORM_I18N as te, STATUS_I18N as ne, translateLab
 import { useExportChannels as re } from "../hooks/useExport.js";
 import { useEffect as u, useMemo as d, useRef as ie, useState as f } from "react";
 import { useI18n as ae } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as p, AlertTriangle as m, CheckCircle2 as h, Download as oe, Eye as se, HelpCircle as g, Loader2 as _, Pencil as ce, Plus as v, Power as le, PowerOff as y, Radio as ue, RefreshCw as de, Search as fe, Trash2 as pe, XCircle as b } from "lucide-react";
+import { AlertCircle as oe, AlertTriangle as p, CheckCircle2 as m, Download as se, Eye as ce, HelpCircle as h, Loader2 as g, Pencil as le, Plus as _, Power as ue, PowerOff as v, Radio as y, RefreshCw as de, Search as fe, Trash2 as pe, XCircle as b } from "lucide-react";
 import { useNavigate as me } from "react-router-dom";
 import { usePermissions as he } from "@burdenoff/fe-libs/shared/providers/shell";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
-import { TagBadge as ge } from "@burdenoff/fe-libs/tag";
+import { CTAOverflowMenu as ge, GlassCard as _e } from "@burdenoff/fe-libs/ui";
+import { TagBadge as ve } from "@burdenoff/fe-libs/tag";
 //#region src/channel/modules/channels/pages/ChannelsListPage.tsx
-var C = {
+var ye = {
 	EMAIL: {
 		label: "Email",
 		color: "bg-accent-blue-subtle text-accent-blue"
@@ -55,16 +56,16 @@ var C = {
 		label: "Webchat",
 		color: "bg-accent-teal-subtle text-accent-teal"
 	}
-}, w = {
+}, C = {
 	ACTIVE: {
 		label: "Active",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: h
+		icon: m
 	},
 	INACTIVE: {
 		label: "Inactive",
 		color: "text-text-secondary bg-bg-sunken",
-		icon: y
+		icon: v
 	},
 	ERROR: {
 		label: "Error",
@@ -74,23 +75,23 @@ var C = {
 	SUSPENDED: {
 		label: "Suspended",
 		color: "text-status-warning-text bg-status-warning-bg-subtle",
-		icon: m
+		icon: p
 	},
 	ARCHIVED: {
 		label: "Archived",
 		color: "text-text-secondary bg-bg-sunken",
-		icon: y
+		icon: v
 	}
-}, T = {
+}, w = {
 	HEALTHY: {
 		label: "Healthy",
 		color: "text-status-success-text",
-		icon: h
+		icon: m
 	},
 	DEGRADED: {
 		label: "Degraded",
 		color: "text-status-warning-text",
-		icon: m
+		icon: p
 	},
 	UNHEALTHY: {
 		label: "Unhealthy",
@@ -100,27 +101,27 @@ var C = {
 	UNKNOWN: {
 		label: "Unknown",
 		color: "text-text-secondary",
-		icon: g
+		icon: h
 	}
 };
-function _e() {
-	let m = me(), { hasPermission: h } = he(), g = h(c.CHANNEL_CREATE), b = h(c.CHANNEL_UPDATE), { t: _e } = ae(), E = (e, t) => {
-		let n = _e(e);
+function T() {
+	let p = me(), { hasPermission: m } = he(), h = m(c.CHANNEL_CREATE), b = m(c.CHANNEL_UPDATE), T = m(c.CHANNEL_EXPORT), { t: be } = ae(), E = (e, t) => {
+		let n = be(e);
 		return n === e ? t : n;
-	}, [ve, D] = f(null), [ye, O] = f(null), [k, A] = f(/* @__PURE__ */ new Set()), [j, M] = f(null), { organizationId: be } = e(), { triggerExport: xe, isExporting: N, exportError: P } = re(be ?? void 0), [F] = f(12), [I, L] = f(0), { channels: R, isLoading: Se, error: z, total: B, filter: V, updateFilter: H, deleteChannel: U, activateChannel: W, deactivateChannel: G, runHealthCheck: K, refetch: q } = o(), J = Math.max(1, Math.ceil(B / F)), Y = ie(q);
+	}, [xe, D] = f(null), [Se, O] = f(null), [k, A] = f(/* @__PURE__ */ new Set()), [j, M] = f(null), { organizationId: Ce } = e(), { triggerExport: we, isExporting: N, exportError: P } = re(Ce ?? void 0), [F] = f(12), [I, L] = f(0), { channels: R, isLoading: z, error: B, total: V, filter: H, updateFilter: U, deleteChannel: W, activateChannel: G, deactivateChannel: K, runHealthCheck: q, refetch: J } = o(), Y = Math.max(1, Math.ceil(V / F)), Te = ie(J);
 	u(() => {
-		Y.current = q;
+		Te.current = J;
 	}), u(() => {
-		Y.current({
+		Te.current({
 			offset: I * F,
 			limit: F
 		});
 	}, [I, F]), u(() => {
 		Promise.resolve().then(() => L(0));
 	}, [
-		V.search,
-		V.platform,
-		V.status
+		H.search,
+		H.platform,
+		H.status
 	]), u(() => {
 		let e = [
 			"channel.created",
@@ -129,13 +130,13 @@ function _e() {
 			"connection.created",
 			"connection.updated",
 			"connection.deleted"
-		].map((e) => a(e, () => void q()));
+		].map((e) => a(e, () => void J()));
 		return () => e.forEach((e) => e());
-	}, [q]);
-	let Ce = async (e) => {
+	}, [J]);
+	let Ee = async (e) => {
 		n("medium"), O(e);
 		try {
-			await U(e), r("success"), D(null);
+			await W(e), r("success"), D(null);
 		} catch (e) {
 			r("error"), i(e, {
 				module: "channel",
@@ -144,10 +145,10 @@ function _e() {
 		} finally {
 			O(null);
 		}
-	}, we = async (e) => {
+	}, De = async (e) => {
 		O(e.id);
 		try {
-			e.status === "ACTIVE" ? await G(e.id) : await W(e.id);
+			e.status === "ACTIVE" ? await K(e.id) : await G(e.id);
 		} catch (e) {
 			i(e, {
 				module: "channel",
@@ -156,10 +157,10 @@ function _e() {
 		} finally {
 			O(null);
 		}
-	}, Te = async (e) => {
+	}, Oe = async (e) => {
 		O(e);
 		try {
-			await K(e);
+			await q(e);
 		} catch (e) {
 			i(e, {
 				module: "channel",
@@ -168,19 +169,19 @@ function _e() {
 		} finally {
 			O(null);
 		}
-	}, X = d(() => R.filter((e) => k.has(e.id)), [R, k]), Z = d(() => X.filter((e) => e.status === "ACTIVE"), [X]), Q = d(() => X.filter((e) => e.status !== "ACTIVE"), [X]), $ = R.length > 0 && R.every((e) => k.has(e.id)), Ee = R.some((e) => k.has(e.id)) && !$, De = (e, t) => {
+	}, X = d(() => R.filter((e) => k.has(e.id)), [R, k]), Z = d(() => X.filter((e) => e.status === "ACTIVE"), [X]), Q = d(() => X.filter((e) => e.status !== "ACTIVE"), [X]), $ = R.length > 0 && R.every((e) => k.has(e.id)), ke = R.some((e) => k.has(e.id)) && !$, Ae = (e, t) => {
 		A((n) => {
 			let r = new Set(n);
 			return t ? r.add(e) : r.delete(e), r;
 		});
-	}, Oe = (e) => {
+	}, je = (e) => {
 		A((t) => {
 			let n = new Set(t);
 			return R.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
-	}, ke = async () => {
+	}, Me = async () => {
 		if (X.length === 0) return;
 		n("medium");
 		let e = E(X.length === 1 ? "channel.bulkDeleteConfirmSingle" : "channel.bulkDeleteConfirmMultiple", X.length === 1 ? "Delete 1 selected channel?" : `Delete ${X.length} selected channels?`), r = await t({
@@ -192,49 +193,49 @@ function _e() {
 		if (r === null ? window.confirm(e) : r) {
 			M("delete");
 			try {
-				await Promise.allSettled(X.map((e) => U(e.id))), A(/* @__PURE__ */ new Set());
+				await Promise.allSettled(X.map((e) => W(e.id))), A(/* @__PURE__ */ new Set());
 			} finally {
 				M(null);
 			}
 		}
-	}, Ae = async () => {
+	}, Ne = async () => {
 		if (Q.length !== 0) {
 			M("activate");
 			try {
-				await Promise.allSettled(Q.map((e) => W(e.id))), A(/* @__PURE__ */ new Set());
+				await Promise.allSettled(Q.map((e) => G(e.id))), A(/* @__PURE__ */ new Set());
 			} finally {
 				M(null);
 			}
 		}
-	}, je = async () => {
+	}, Pe = async () => {
 		if (Z.length !== 0) {
 			M("deactivate");
 			try {
-				await Promise.allSettled(Z.map((e) => G(e.id))), A(/* @__PURE__ */ new Set());
+				await Promise.allSettled(Z.map((e) => K(e.id))), A(/* @__PURE__ */ new Set());
 			} finally {
 				M(null);
 			}
 		}
-	}, Me = async () => {
+	}, Fe = async () => {
 		if (X.length !== 0) {
 			M("health");
 			try {
-				await Promise.allSettled(X.map((e) => K(e.id)));
+				await Promise.allSettled(X.map((e) => q(e.id)));
 			} finally {
 				M(null);
 			}
 		}
-	}, Ne = (e) => ({
-		...C[e] || {
+	}, Ie = (e) => ({
+		...ye[e] || {
 			label: e,
 			color: "bg-bg-sunken text-text-secondary"
 		},
 		label: l(e, te, E)
-	}), Pe = (e) => ({
-		...w[e] || w.INACTIVE,
+	}), Le = (e) => ({
+		...C[e] || C.INACTIVE,
 		label: l(e, ne, E)
-	}), Fe = (e) => ({
-		...T[e] || T.UNKNOWN,
+	}), Re = (e) => ({
+		...w[e] || w.UNKNOWN,
 		label: l(e, ee, E)
 	});
 	return /* @__PURE__ */ x(s, {
@@ -252,31 +253,35 @@ function _e() {
 						children: [
 							E("channel.manageChannels", "Manage your communication channels"),
 							" (",
-							B,
+							V,
 							" total)"
 						]
-					})] }), /* @__PURE__ */ S("div", {
+					})] }), /* @__PURE__ */ x("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ x(s, {
-							permission: c.CHANNEL_EXPORT,
-							children: /* @__PURE__ */ S("button", {
-								type: "button",
-								onClick: () => void xe(),
-								disabled: N,
-								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border-subtle hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-								title: E("channel.exportCSV", "Export to CSV"),
-								"data-tour": "channels-list-export-button",
-								children: [N ? /* @__PURE__ */ x(_, {
+						"data-tour": "channels-list-export-button",
+						children: /* @__PURE__ */ x(ge, {
+							primary: h ? {
+								label: E("channel.createChannel", "Create Channel"),
+								icon: /* @__PURE__ */ x(_, {
 									size: 16,
-									className: "animate-spin"
-								}) : /* @__PURE__ */ x(oe, { size: 16 }), E("channel.export", "Export")]
-							})
-						}), g && /* @__PURE__ */ S("button", {
-							type: "button",
-							onClick: () => m("/channels/create"),
-							className: "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__ */ x(v, { size: 16 }), E("channel.createChannel", "Create Channel")]
-						})]
+									"aria-hidden": "true"
+								}),
+								onSelect: () => p("/channels/create")
+							} : void 0,
+							actions: T ? [{
+								label: E("channel.export", "Export"),
+								icon: N ? /* @__PURE__ */ x(g, {
+									size: 16,
+									className: "animate-spin",
+									"aria-hidden": "true"
+								}) : /* @__PURE__ */ x(se, {
+									size: 16,
+									"aria-hidden": "true"
+								}),
+								disabled: N,
+								onSelect: () => void we()
+							}] : []
+						})
 					})]
 				}),
 				/* @__PURE__ */ S("div", {
@@ -291,31 +296,31 @@ function _e() {
 								"aria-label": E("channel.searchChannels", "Search channels..."),
 								type: "text",
 								placeholder: E("channel.searchChannels", "Search channels..."),
-								value: V.search || "",
-								onChange: (e) => H({ search: e.target.value }),
+								value: H.search || "",
+								onChange: (e) => U({ search: e.target.value }),
 								className: "w-full pl-9 pr-4 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
 							})]
 						}),
 						/* @__PURE__ */ S("select", {
-							value: V.platform || "",
-							onChange: (e) => H({ platform: e.target.value || void 0 }),
+							value: H.platform || "",
+							onChange: (e) => U({ platform: e.target.value || void 0 }),
 							className: "px-3 py-2 text-sm bg-bg-surface text-text-primary border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
 							children: [/* @__PURE__ */ x("option", {
 								value: "",
 								children: E("channel.allPlatforms", "All Platforms")
-							}), Object.entries(C).map(([e, t]) => /* @__PURE__ */ x("option", {
+							}), Object.entries(ye).map(([e, t]) => /* @__PURE__ */ x("option", {
 								value: e,
 								children: t.label
 							}, e))]
 						}),
 						/* @__PURE__ */ S("select", {
-							value: V.status || "",
-							onChange: (e) => H({ status: e.target.value || void 0 }),
+							value: H.status || "",
+							onChange: (e) => U({ status: e.target.value || void 0 }),
 							className: "px-3 py-2 text-sm bg-bg-surface text-text-primary border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
 							children: [/* @__PURE__ */ x("option", {
 								value: "",
 								children: E("channel.allStatus", "All Status")
-							}), Object.entries(w).map(([e, t]) => /* @__PURE__ */ x("option", {
+							}), Object.entries(C).map(([e, t]) => /* @__PURE__ */ x("option", {
 								value: e,
 								children: t.label
 							}, e))]
@@ -324,7 +329,7 @@ function _e() {
 				}),
 				P && /* @__PURE__ */ S("div", {
 					className: "flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg",
-					children: [/* @__PURE__ */ x(p, {
+					children: [/* @__PURE__ */ x(oe, {
 						size: 20,
 						className: "text-status-error-text"
 					}), /* @__PURE__ */ x("p", {
@@ -332,8 +337,9 @@ function _e() {
 						children: P
 					})]
 				}),
-				R.length > 0 && /* @__PURE__ */ S("div", {
-					className: "flex flex-col gap-3 rounded-lg border border-border-subtle bg-surface p-4 sm:flex-row sm:items-center sm:justify-between",
+				R.length > 0 && /* @__PURE__ */ S(_e, {
+					treatment: "plain",
+					className: "flex flex-col gap-3 border-border-seam p-4 sm:flex-row sm:items-center sm:justify-between",
 					"data-tour": "channels-list-bulk-actions",
 					children: [/* @__PURE__ */ S("label", {
 						className: "flex items-center gap-2 text-sm text-text-primary",
@@ -341,9 +347,9 @@ function _e() {
 							type: "checkbox",
 							checked: $,
 							ref: (e) => {
-								e && (e.indeterminate = Ee && !$);
+								e && (e.indeterminate = ke && !$);
 							},
-							onChange: (e) => Oe(e.target.checked),
+							onChange: (e) => je(e.target.checked),
 							"aria-label": "Select all channels",
 							className: "size-4 rounded border-border-subtle text-primary"
 						}), /* @__PURE__ */ x("span", { children: E("channel.selectAllVisible", "Select all visible") })]
@@ -368,7 +374,7 @@ function _e() {
 								permission: c.CHANNEL_EXECUTE,
 								children: /* @__PURE__ */ S("button", {
 									type: "button",
-									onClick: Me,
+									onClick: Fe,
 									disabled: X.length === 0 || j !== null,
 									className: "px-3 py-2 text-sm font-medium border border-border-subtle rounded-md hover:bg-bg-sunken transition-colors disabled:opacity-50",
 									children: [E("channel.healthCheck", "Health Check"), X.length > 0 ? ` (${X.length})` : ""]
@@ -378,7 +384,7 @@ function _e() {
 								permission: c.CHANNEL_UPDATE,
 								children: /* @__PURE__ */ S("button", {
 									type: "button",
-									onClick: Ae,
+									onClick: Ne,
 									disabled: Q.length === 0 || j !== null,
 									className: "px-3 py-2 text-sm font-medium border border-status-success-border/30 text-status-success-text rounded-md hover:bg-status-success-bg-subtle transition-colors disabled:opacity-50",
 									children: [E("channel.activateSelected", "Activate Selected"), Q.length > 0 ? ` (${Q.length})` : ""]
@@ -388,7 +394,7 @@ function _e() {
 								permission: c.CHANNEL_UPDATE,
 								children: /* @__PURE__ */ S("button", {
 									type: "button",
-									onClick: je,
+									onClick: Pe,
 									disabled: Z.length === 0 || j !== null,
 									className: "px-3 py-2 text-sm font-medium border border-status-warning-border text-status-warning-text rounded-md hover:bg-status-warning-bg-subtle transition-colors disabled:opacity-50",
 									children: [E("channel.deactivateSelected", "Deactivate Selected"), Z.length > 0 ? ` (${Z.length})` : ""]
@@ -398,7 +404,7 @@ function _e() {
 								permission: c.CHANNEL_DELETE,
 								children: /* @__PURE__ */ S("button", {
 									type: "button",
-									onClick: ke,
+									onClick: Me,
 									disabled: X.length === 0 || j !== null,
 									className: "px-3 py-2 text-sm font-medium border border-status-error-border/30 text-status-error-text rounded-md hover:bg-status-error-bg-subtle transition-colors disabled:opacity-50",
 									children: [E("channel.deleteSelected", "Delete Selected"), X.length > 0 ? ` (${X.length})` : ""]
@@ -407,10 +413,10 @@ function _e() {
 						]
 					})]
 				}),
-				z && /* @__PURE__ */ S("div", {
+				B && /* @__PURE__ */ S("div", {
 					className: "flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg",
 					children: [
-						/* @__PURE__ */ x(p, {
+						/* @__PURE__ */ x(oe, {
 							size: 20,
 							className: "text-status-error-text"
 						}),
@@ -419,27 +425,27 @@ function _e() {
 							children: E("channel.loadFailed", "Failed to load channels")
 						}), /* @__PURE__ */ x("p", {
 							className: "text-xs text-status-error-text",
-							children: z
+							children: B
 						})] }),
 						/* @__PURE__ */ x("button", {
 							type: "button",
-							onClick: () => q(),
+							onClick: () => J(),
 							className: "ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
 							children: E("channel.retry", "Retry")
 						})
 					]
 				}),
-				Se && R.length === 0 && /* @__PURE__ */ x("div", {
+				z && R.length === 0 && /* @__PURE__ */ x("div", {
 					className: "flex items-center justify-center py-12",
-					children: /* @__PURE__ */ x(_, {
+					children: /* @__PURE__ */ x(g, {
 						size: 32,
 						className: "animate-spin text-accent-primary"
 					})
 				}),
-				!Se && !z && R.length === 0 && /* @__PURE__ */ S("div", {
+				!z && !B && R.length === 0 && /* @__PURE__ */ S("div", {
 					className: "flex flex-col items-center justify-center py-12 text-center",
 					children: [
-						/* @__PURE__ */ x(ue, {
+						/* @__PURE__ */ x(y, {
 							size: 48,
 							className: "text-text-secondary mb-4"
 						}),
@@ -449,13 +455,13 @@ function _e() {
 						}),
 						/* @__PURE__ */ x("p", {
 							className: "text-sm text-text-secondary max-w-md mb-4",
-							children: V.search || V.platform || V.status ? E("channel.adjustFilters", "Try adjusting your filters to see more channels.") : E("channel.createFirstChannelPrompt", "Create your first communication channel to get started.")
+							children: H.search || H.platform || H.status ? E("channel.adjustFilters", "Try adjusting your filters to see more channels.") : E("channel.createFirstChannelPrompt", "Create your first communication channel to get started.")
 						}),
-						g && !V.search && !V.platform && !V.status && /* @__PURE__ */ S("button", {
+						h && !H.search && !H.platform && !H.status && /* @__PURE__ */ S("button", {
 							type: "button",
-							onClick: () => m("/channels/create"),
+							onClick: () => p("/channels/create"),
 							className: "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__ */ x(v, { size: 16 }), E("channel.createChannel", "Create Channel")]
+							children: [/* @__PURE__ */ x(_, { size: 16 }), E("channel.createChannel", "Create Channel")]
 						})
 					]
 				}),
@@ -463,9 +469,10 @@ function _e() {
 					className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
 					"data-tour": "channels-list-grid",
 					children: R.map((e) => {
-						let t = Ne(e.platform), n = Pe(e.status), r = Fe(e.connectionHealth), i = n.icon, a = r.icon, o = ye === e.id;
-						return /* @__PURE__ */ S("div", {
-							className: `p-4 bg-surface border rounded-lg transition-colors group ${k.has(e.id) ? "ring-2 ring-action-primary-bg border-action-primary-bg/40" : "border-border-subtle hover:border-action-primary-bg/40"}`,
+						let t = Ie(e.platform), n = Le(e.status), r = Re(e.connectionHealth), i = n.icon, a = r.icon, o = Se === e.id;
+						return /* @__PURE__ */ S(_e, {
+							treatment: "insight",
+							className: `p-4 transition-colors group ${k.has(e.id) ? "ring-2 ring-action-primary-bg border-action-primary-bg/40" : "border-border-seam"}`,
 							children: [
 								/* @__PURE__ */ S("div", {
 									className: "flex items-start justify-between mb-3",
@@ -475,11 +482,11 @@ function _e() {
 											/* @__PURE__ */ x("input", {
 												type: "checkbox",
 												checked: k.has(e.id),
-												onChange: (t) => De(e.id, t.target.checked),
+												onChange: (t) => Ae(e.id, t.target.checked),
 												"aria-label": `Select channel ${e.name}`,
 												className: "size-4 rounded border-border-subtle text-primary"
 											}),
-											/* @__PURE__ */ x(ue, {
+											/* @__PURE__ */ x(y, {
 												size: 20,
 												className: "text-accent-primary"
 											}),
@@ -502,9 +509,9 @@ function _e() {
 								/* @__PURE__ */ S("div", {
 									role: "button",
 									tabIndex: 0,
-									onClick: () => m(`/channels/${e.id}`),
+									onClick: () => p(`/channels/${e.id}`),
 									onKeyDown: (t) => {
-										(t.key === "Enter" || t.key === " ") && (t.preventDefault(), m(`/channels/${e.id}`));
+										(t.key === "Enter" || t.key === " ") && (t.preventDefault(), p(`/channels/${e.id}`));
 									},
 									className: "cursor-pointer",
 									children: [
@@ -553,7 +560,7 @@ function _e() {
 								e.tagAssignments && e.tagAssignments.length > 0 && /* @__PURE__ */ S("div", {
 									className: "flex flex-wrap gap-1 mt-2",
 									"aria-label": "Channel tags",
-									children: [e.tagAssignments.slice(0, 4).map((e) => /* @__PURE__ */ x(ge, {
+									children: [e.tagAssignments.slice(0, 4).map((e) => /* @__PURE__ */ x(ve, {
 										id: e.tagId,
 										label: e.tagId,
 										size: "sm"
@@ -569,27 +576,27 @@ function _e() {
 										children: [
 											/* @__PURE__ */ x("button", {
 												type: "button",
-												onClick: () => m(`/channels/${e.id}`),
+												onClick: () => p(`/channels/${e.id}`),
 												className: "p-1.5 text-text-secondary hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors cursor-pointer",
 												title: E("channel.viewDetails", "View Details"),
-												children: /* @__PURE__ */ x(se, { size: 14 })
+												children: /* @__PURE__ */ x(ce, { size: 14 })
 											}),
 											b && /* @__PURE__ */ x("button", {
 												type: "button",
-												onClick: () => m(`/channels/${e.id}/edit`),
+												onClick: () => p(`/channels/${e.id}/edit`),
 												className: "p-1.5 text-text-secondary hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors cursor-pointer",
 												title: E("channel.editChannel", "Edit Channel"),
-												children: /* @__PURE__ */ x(ce, { size: 14 })
+												children: /* @__PURE__ */ x(le, { size: 14 })
 											}),
 											/* @__PURE__ */ x(s, {
 												permission: c.CHANNEL_EXECUTE,
 												children: /* @__PURE__ */ x("button", {
 													type: "button",
-													onClick: () => Te(e.id),
+													onClick: () => Oe(e.id),
 													disabled: o,
 													className: "p-1.5 text-text-secondary hover:text-status-info-text hover:bg-status-info-bg-subtle rounded transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed",
 													title: E("channel.runHealthCheck", "Run Health Check"),
-													children: o ? /* @__PURE__ */ x(_, {
+													children: o ? /* @__PURE__ */ x(g, {
 														size: 14,
 														className: "animate-spin"
 													}) : /* @__PURE__ */ x(de, { size: 14 })
@@ -599,15 +606,15 @@ function _e() {
 												permission: c.CHANNEL_UPDATE,
 												children: /* @__PURE__ */ x("button", {
 													type: "button",
-													onClick: () => we(e),
+													onClick: () => De(e),
 													disabled: o,
 													className: `p-1.5 rounded transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed ${e.status === "ACTIVE" ? "text-text-secondary hover:text-status-warning-text hover:bg-status-warning-bg-subtle" : "text-text-secondary hover:text-status-success-text hover:bg-status-success-bg-subtle"}`,
 													title: e.status === "ACTIVE" ? E("channel.deactivate", "Deactivate") : E("channel.activate", "Activate"),
-													children: e.status === "ACTIVE" ? /* @__PURE__ */ x(y, { size: 14 }) : /* @__PURE__ */ x(le, { size: 14 })
+													children: e.status === "ACTIVE" ? /* @__PURE__ */ x(v, { size: 14 }) : /* @__PURE__ */ x(ue, { size: 14 })
 												})
 											})
 										]
-									}), ve === e.id ? /* @__PURE__ */ S("div", {
+									}), xe === e.id ? /* @__PURE__ */ S("div", {
 										className: "flex items-center gap-2",
 										children: [
 											/* @__PURE__ */ x("span", {
@@ -616,7 +623,7 @@ function _e() {
 											}),
 											/* @__PURE__ */ x("button", {
 												type: "button",
-												onClick: () => Ce(e.id),
+												onClick: () => Ee(e.id),
 												disabled: o,
 												className: "px-2 py-1 text-xs text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors cursor-pointer disabled:cursor-not-allowed",
 												children: o ? "..." : E("channel.yes", "Yes")
@@ -643,7 +650,7 @@ function _e() {
 						}, e.id);
 					})
 				}),
-				B > F && /* @__PURE__ */ S("div", {
+				V > F && /* @__PURE__ */ S("div", {
 					className: "flex items-center justify-between px-1 py-2",
 					children: [/* @__PURE__ */ S("p", {
 						className: "text-sm text-text-secondary",
@@ -655,7 +662,7 @@ function _e() {
 								children: [
 									I * F + 1,
 									"–",
-									Math.min((I + 1) * F, B)
+									Math.min((I + 1) * F, V)
 								]
 							}),
 							" ",
@@ -663,7 +670,7 @@ function _e() {
 							" ",
 							/* @__PURE__ */ x("span", {
 								className: "font-medium text-text-primary",
-								children: B
+								children: V
 							}),
 							" ",
 							E("channel.channelsLower", "channels")
@@ -683,13 +690,13 @@ function _e() {
 								children: [
 									I + 1,
 									" / ",
-									J
+									Y
 								]
 							}),
 							/* @__PURE__ */ x("button", {
 								type: "button",
-								onClick: () => L((e) => Math.min(J - 1, e + 1)),
-								disabled: I >= J - 1,
+								onClick: () => L((e) => Math.min(Y - 1, e + 1)),
+								disabled: I >= Y - 1,
 								className: "px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
 								children: E("channel.next", "Next")
 							})
@@ -701,6 +708,6 @@ function _e() {
 	});
 }
 //#endregion
-export { _e as ChannelsListPage };
+export { T as ChannelsListPage };
 
 //# sourceMappingURL=ChannelsListPage.js.map