@burdenoff/microfe-channel 2026.805.1 → 2026.830.2

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

@@ -1,102 +1,122 @@
-import { useChannel as e } from "../../../providers/ChannelProvider.js";
-import { useChannel as t } from "../../../hooks/useChannels.js";
-import { PermissionGuard as n } from "../../../components/PermissionGuard.js";
-import { CHANNEL_PERMISSIONS as r } from "../../../constants/permissions.js";
-import { useExportChannelUsers as i } from "../hooks/useExport.js";
-import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
-import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as u, ArrowLeft as d, Bell as f, BellOff as p, CheckCircle2 as m, ChevronLeft as ee, ChevronRight as te, Clock as h, Download as ne, Loader2 as g, RefreshCw as _, User as v, UserCheck as y, XCircle as b } from "lucide-react";
-import { useNavigate as re, useParams as x } from "react-router";
+import { useTr as e } from "../../../hooks/useTr.js";
+import { useChannel as t } from "../../../providers/ChannelProvider.js";
+import { useChannel as n } from "../../../hooks/useChannels.js";
+import { PermissionGuard as r } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as i } from "../../../constants/permissions.js";
+import { useExportChannelUsers as a } from "../hooks/useExport.js";
+import { useCallback as ee, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { AlertCircle as u, ArrowLeft as d, Bell as f, BellOff as p, CheckCircle2 as m, ChevronLeft as h, ChevronRight as te, Clock as ne, Download as re, Loader2 as g, RefreshCw as ie, User as _, UserCheck as v, XCircle as y } from "lucide-react";
+import { useNavigate as b, useParams as x } from "react-router";
 import { usePermissions as S } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
-import { CTAOverflowMenu as ie, EmphasisPanel as ae, IllustratedEmptyState as oe, PagePurpose as se, ResponsiveTable as ce } from "@burdenoff/fe-libs/ui";
+import { CTAOverflowMenu as ae, EmphasisPanel as oe, IllustratedEmptyState as se, PagePurpose as ce, ResponsiveTable as le } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/ChannelUsersPage.tsx
-var E = {
-	ONLINE: {
-		label: "Online",
-		color: "text-status-success-text"
-	},
-	OFFLINE: {
-		label: "Offline",
-		color: "text-text-secondary"
-	},
-	AWAY: {
-		label: "Away",
-		color: "text-status-warning-text"
-	},
-	DND: {
-		label: "Do Not Disturb",
-		color: "text-status-error-text"
-	}
-}, D = {
-	PENDING: {
-		label: "Pending",
-		color: "text-status-warning-text bg-status-warning-bg-subtle",
-		icon: h
-	},
-	APPROVED: {
-		label: "Approved",
-		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: m
-	},
-	EXPIRED: {
-		label: "Expired",
-		color: "text-text-secondary bg-bg-sunken",
-		icon: b
-	}
-};
-function O() {
-	let { channelId: m } = x(), h = re(), { hasPermission: O } = S(), k = O(r.CHANNEL_USER_EXPORT), { t: A } = l(), j = (e, t) => {
-		let n = A(e);
-		return n === e ? t : n;
-	}, { organizationId: M } = e(), { triggerExport: N, isExporting: P, exportError: F } = i(M ?? void 0, m), [I, L] = c(!0), [R, z] = c([]), [B, V] = c(25), [H, U] = c(0), [W, G] = c(0), { channel: K, isLoading: le, error: q, fetchUserPlatformConnections: J } = t(m), Y = a(async (e = 0) => {
-		if (m) {
-			L(!0);
+function E() {
+	let { channelId: E } = x(), D = b(), { hasPermission: O } = S(), k = O(i.CHANNEL_USER_EXPORT), A = e(), j = s(() => ({
+		ONLINE: {
+			labelKey: "channel.presence.online",
+			labelFallback: "Online",
+			color: "text-status-success-text"
+		},
+		OFFLINE: {
+			labelKey: "channel.presence.offline",
+			labelFallback: "Offline",
+			color: "text-text-secondary"
+		},
+		AWAY: {
+			labelKey: "channel.presence.away",
+			labelFallback: "Away",
+			color: "text-status-warning-text"
+		},
+		DND: {
+			labelKey: "channel.presence.dnd",
+			labelFallback: "Do Not Disturb",
+			color: "text-status-error-text"
+		}
+	}), []), M = s(() => ({
+		PENDING: {
+			labelKey: "channel.pairingLabel.pending",
+			labelFallback: "Pending",
+			color: "text-status-warning-text bg-status-warning-bg-subtle",
+			icon: ne
+		},
+		APPROVED: {
+			labelKey: "channel.pairingLabel.approved",
+			labelFallback: "Approved",
+			color: "text-status-success-text bg-status-success-bg-subtle",
+			icon: m
+		},
+		EXPIRED: {
+			labelKey: "channel.pairingLabel.expired",
+			labelFallback: "Expired",
+			color: "text-text-secondary bg-bg-sunken",
+			icon: y
+		}
+	}), []), N = s(() => [
+		{
+			value: 10,
+			label: A("channel.resultsPerPage", "{{count}} results", { count: 10 })
+		},
+		{
+			value: 25,
+			label: A("channel.resultsPerPage", "{{count}} results", { count: 25 })
+		},
+		{
+			value: 50,
+			label: A("channel.resultsPerPage", "{{count}} results", { count: 50 })
+		},
+		{
+			value: 100,
+			label: A("channel.resultsPerPage", "{{count}} results", { count: 100 })
+		}
+	], [A]), { organizationId: P } = t(), { triggerExport: F, isExporting: I, exportError: L } = a(P ?? void 0, E), [R, z] = l(!0), [B, V] = l([]), [H, ue] = l(25), [U, de] = l(0), [W, G] = l(0), { channel: K, isLoading: fe, error: q, fetchUserPlatformConnections: J } = n(E), Y = ee(async (e = 0) => {
+		if (E) {
+			z(!0);
 			try {
-				let t = await J(B, e * B);
-				z(t.items), U(t.total);
+				let t = await J(H, e * H);
+				V(t.items), de(t.total);
 			} finally {
-				L(!1);
+				z(!1);
 			}
 		}
 	}, [
-		m,
+		E,
 		J,
-		B
-	]), X = s(Y);
+		H
+	]), X = c(Y);
 	o(() => {
 		X.current = Y;
 	});
-	let Z = s(!0), Q = s(!1);
+	let Z = c(!0), Q = c(!1);
 	o(() => {
 		Promise.resolve().then(() => {
 			Q.current = !0, G(0), X.current(0).finally(() => {
 				Q.current = !1;
 			});
 		});
-	}, [B]), o(() => {
+	}, [H]), o(() => {
 		if (Z.current) {
 			Z.current = !1;
 			return;
 		}
 		Q.current || Promise.resolve().then(() => X.current(W));
 	}, [W]);
-	let $ = Math.max(1, Math.ceil(H / B)), ue = W > 0, de = W < $ - 1, fe = (e) => E[e] || E.OFFLINE, pe = (e) => D[e] || D.EXPIRED, me = [
+	let $ = Math.max(1, Math.ceil(U / H)), pe = W > 0, me = W < $ - 1, he = (e) => j[e] || j.OFFLINE, ge = (e) => M[e] || M.EXPIRED, _e = [
 		{
 			key: "user",
-			header: j("channel.user", "User"),
+			header: A("channel.user", "User"),
 			priority: "primary",
 			cell: (e) => /* @__PURE__ */ T("div", {
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ w("div", {
 					className: "size-8 bg-accent-primary/10 rounded-full flex items-center justify-center",
-					children: /* @__PURE__ */ w(v, {
+					children: /* @__PURE__ */ w(_, {
 						size: 16,
 						className: "text-accent-primary"
 					})
 				}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 					className: "text-sm font-medium text-text-primary",
-					children: e.externalDisplayName || "Unknown"
+					children: e.externalDisplayName || A("channel.unknownUser", "Unknown")
 				}), e.externalUsername && /* @__PURE__ */ w("p", {
 					className: "text-xs text-text-secondary",
 					children: e.externalUsername
@@ -105,14 +125,14 @@ function O() {
 		},
 		{
 			key: "platformId",
-			header: j("channel.platformId", "Platform ID"),
+			header: A("channel.platformId", "Platform ID"),
 			priority: "secondary",
 			cellClassName: "text-sm font-mono text-text-secondary",
 			cell: (e) => e.externalUserId
 		},
 		{
 			key: "source",
-			header: j("channel.source", "Source"),
+			header: A("channel.source", "Source"),
 			priority: "secondary",
 			cell: (e) => /* @__PURE__ */ w("span", {
 				className: "text-xs text-text-secondary bg-bg-sunken px-2 py-1 rounded",
@@ -121,37 +141,37 @@ function O() {
 		},
 		{
 			key: "status",
-			header: j("channel.status", "Status"),
+			header: A("channel.status", "Status"),
 			priority: "primary",
 			cell: (e) => {
-				let t = fe(e.presenceStatus);
+				let t = he(e.presenceStatus);
 				return /* @__PURE__ */ T("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ w("span", { className: `w-2 h-2 rounded-full ${t.color.replace("text-", "bg-")}` }), /* @__PURE__ */ w("span", {
 						className: `text-sm ${t.color}`,
-						children: t.label
+						children: A(t.labelKey, t.labelFallback)
 					})]
 				});
 			}
 		},
 		{
 			key: "pairing",
-			header: j("channel.pairing", "Pairing"),
+			header: A("channel.pairing", "Pairing"),
 			priority: "secondary",
 			cell: (e) => {
-				let t = e.pairingStatus ? pe(e.pairingStatus) : null, n = t?.icon ?? b;
+				let t = e.pairingStatus ? ge(e.pairingStatus) : null, n = t?.icon ?? y;
 				return e.pairingStatus && t ? /* @__PURE__ */ T("span", {
 					className: `inline-flex items-center gap-1 text-xs px-2 py-1 rounded ${t.color}`,
-					children: [/* @__PURE__ */ w(n, { size: 12 }), t.label]
+					children: [/* @__PURE__ */ w(n, { size: 12 }), A(t.labelKey, t.labelFallback)]
 				}) : /* @__PURE__ */ w("span", {
 					className: "text-xs text-text-secondary",
-					children: "-"
+					children: A("channel.noPairing", "-")
 				});
 			}
 		},
 		{
 			key: "notifications",
-			header: j("channel.notifications", "Notifications"),
+			header: A("channel.notifications", "Notifications"),
 			priority: "secondary",
 			cell: (e) => e.notificationsEnabled ? /* @__PURE__ */ T("span", {
 				className: "inline-flex items-center gap-1",
@@ -161,7 +181,7 @@ function O() {
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ w("span", {
 					className: "sr-only",
-					children: j("channel.enabled", "Enabled")
+					children: A("channel.enabled", "Enabled")
 				})]
 			}) : /* @__PURE__ */ T("span", {
 				className: "inline-flex items-center gap-1",
@@ -171,24 +191,24 @@ function O() {
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ w("span", {
 					className: "sr-only",
-					children: j("channel.disabled", "Disabled")
+					children: A("channel.disabled", "Disabled")
 				})]
 			})
 		},
 		{
 			key: "dmAllowed",
-			header: j("channel.dmAllowed", "DM Allowed"),
+			header: A("channel.dmAllowed", "DM Allowed"),
 			priority: "secondary",
 			cell: (e) => e.dmAllowed ? /* @__PURE__ */ T("span", {
 				className: "inline-flex items-center gap-1 text-sm text-status-success-text",
-				children: [/* @__PURE__ */ w(y, { size: 16 }), j("channel.allowed", "Allowed")]
+				children: [/* @__PURE__ */ w(v, { size: 16 }), A("channel.allowed", "Allowed")]
 			}) : /* @__PURE__ */ T("span", {
 				className: "inline-flex items-center gap-1 text-sm text-text-secondary",
-				children: [/* @__PURE__ */ w(b, { size: 16 }), j("channel.blocked", "Blocked")]
+				children: [/* @__PURE__ */ w(y, { size: 16 }), A("channel.blocked", "Blocked")]
 			})
 		}
 	];
-	return le ? /* @__PURE__ */ w("div", {
+	return fe ? /* @__PURE__ */ w("div", {
 		className: "flex items-center justify-center min-h-screen",
 		children: /* @__PURE__ */ w(g, {
 			size: 32,
@@ -205,18 +225,18 @@ function O() {
 				}),
 				/* @__PURE__ */ w("div", { children: /* @__PURE__ */ w("p", {
 					className: "text-sm font-medium text-status-error-text",
-					children: q || "Channel not found"
+					children: q || A("channel.channelNotFound", "Channel not found")
 				}) }),
 				/* @__PURE__ */ w("button", {
 					type: "button",
-					onClick: () => h(`/channels/${m}`),
+					onClick: () => D(`/channels/${E}`),
 					className: "ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
-					children: "Go Back"
+					children: A("channel.goBack", "Go Back")
 				})
 			]
 		})
-	}) : /* @__PURE__ */ w(n, {
-		permission: r.USER_PLATFORM_CONNECTION_READ,
+	}) : /* @__PURE__ */ w(r, {
+		permission: i.USER_PLATFORM_CONNECTION_READ,
 		children: /* @__PURE__ */ T("div", {
 			className: "space-y-6 p-3 sm:p-6",
 			children: [
@@ -226,8 +246,8 @@ function O() {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ w("button", {
 							type: "button",
-							onClick: () => h(`/channels/${m}`),
-							"aria-label": j("channel.backToChannel", "Back to channel"),
+							onClick: () => D(`/channels/${E}`),
+							"aria-label": A("channel.backToChannel", "Back to channel"),
 							className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors",
 							children: /* @__PURE__ */ w(d, {
 								size: 20,
@@ -235,81 +255,67 @@ function O() {
 							})
 						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h1", {
 							className: "text-xl sm:text-2xl font-bold text-text-primary",
-							children: j("channel.channelUsers", "Channel Users")
-						}), /* @__PURE__ */ T("p", {
+							children: A("channel.channelUsers", "Channel Users")
+						}), /* @__PURE__ */ w("p", {
 							className: "text-sm text-text-secondary mt-1",
-							children: [K.name, " - User connections"]
+							children: A("channel.usersPageSubtitle", "{{channelName}} - User connections", { channelName: K.name })
 						})] })]
 					}), /* @__PURE__ */ T("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ T("select", {
-							value: B,
-							onChange: (e) => V(Number(e.target.value)),
+						children: [/* @__PURE__ */ w("select", {
+							value: H,
+							onChange: (e) => ue(Number(e.target.value)),
 							className: "px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-primary/50 text-text-primary",
-							children: [
-								/* @__PURE__ */ w("option", {
-									value: 10,
-									children: "10 results"
-								}),
-								/* @__PURE__ */ w("option", {
-									value: 25,
-									children: "25 results"
-								}),
-								/* @__PURE__ */ w("option", {
-									value: 50,
-									children: "50 results"
-								}),
-								/* @__PURE__ */ w("option", {
-									value: 100,
-									children: "100 results"
-								})
-							]
-						}), /* @__PURE__ */ w(ie, { actions: [{
-							label: j("channel.refresh", "Refresh"),
-							icon: /* @__PURE__ */ w(_, {
+							children: N.map((e) => /* @__PURE__ */ w("option", {
+								value: e.value,
+								children: e.label
+							}, e.value))
+						}), /* @__PURE__ */ w(ae, { actions: [{
+							label: A("channel.refresh", "Refresh"),
+							icon: /* @__PURE__ */ w(ie, {
 								size: 16,
-								className: I ? "animate-spin" : "",
+								className: R ? "animate-spin" : "",
 								"aria-hidden": "true"
 							}),
-							disabled: I,
+							disabled: R,
 							onSelect: () => void Y(W)
 						}, ...k ? [{
-							label: j("channel.export", "Export"),
-							icon: P ? /* @__PURE__ */ w(g, {
+							label: A("channel.export", "Export"),
+							icon: I ? /* @__PURE__ */ w(g, {
 								size: 16,
 								className: "animate-spin",
 								"aria-hidden": "true"
-							}) : /* @__PURE__ */ w(ne, {
+							}) : /* @__PURE__ */ w(re, {
 								size: 16,
 								"aria-hidden": "true"
 							}),
-							disabled: P,
-							onSelect: () => void N()
+							disabled: I,
+							onSelect: () => void F()
 						}] : []] })]
 					})]
 				}),
-				/* @__PURE__ */ w(se, {
-					icon: /* @__PURE__ */ w(v, {
+				/* @__PURE__ */ w(ce, {
+					icon: /* @__PURE__ */ w(_, {
 						size: 15,
 						"aria-hidden": "true"
 					}),
-					children: j("channel.usersPurpose", "The people reachable through this channel — linked via OAuth or a pairing code on platforms like Slack, Teams or WhatsApp. See who is online, whether their pairing is approved, and whether they have opted into notifications and direct messages. Use it to verify a recipient is actually connected before you target them, or to audit who can receive messages here.")
+					children: A("channel.usersPurpose", "The people reachable through this channel — linked via OAuth or a pairing code on platforms like Slack, Teams or WhatsApp. See who is online, whether their pairing is approved, and whether they have opted into notifications and direct messages. Use it to verify a recipient is actually connected before you target them, or to audit who can receive messages here.")
 				}),
-				F && /* @__PURE__ */ T("div", {
+				L && /* @__PURE__ */ T("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3",
 					children: [/* @__PURE__ */ w(u, {
 						size: 20,
 						className: "text-status-error-text"
 					}), /* @__PURE__ */ w("p", {
 						className: "text-sm text-status-error-text flex-1",
-						children: F
+						children: L
 					})]
 				}),
-				/* @__PURE__ */ T(ae, {
+				/* @__PURE__ */ T(oe, {
 					className: "flex items-center gap-3 p-4",
 					children: [/* @__PURE__ */ w("span", {
 						className: "rounded-lg bg-accent-blue-subtle p-2",
-						children: /* @__PURE__ */ w(y, {
+						children: /* @__PURE__ */ w(v, {
 							size: 18,
 							className: "text-accent-blue",
 							"aria-hidden": "true"
@@ -317,22 +323,22 @@ function O() {
 					}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("p", {
 						className: "text-sm font-semibold text-text-primary",
 						children: [
-							H,
+							U,
 							" ",
-							H === 1 ? j("channel.connectedUserSingular", "connected user") : j("channel.connectedUsersPlural", "connected users")
+							U === 1 ? A("channel.connectedUserSingular", "connected user") : A("channel.connectedUsersPlural", "connected users")
 						]
 					}), /* @__PURE__ */ w("p", {
 						className: "text-sm text-text-secondary",
-						children: j("channel.usersBannerHint", "Users connected to this channel through OAuth or pairing. Notification preferences and DM authorization are managed per user.")
+						children: A("channel.usersBannerHint", "Users connected to this channel through OAuth or pairing. Notification preferences and DM authorization are managed per user.")
 					})] })]
 				}),
-				/* @__PURE__ */ w(ce, {
-					columns: me,
-					data: R,
+				/* @__PURE__ */ w(le, {
+					columns: _e,
+					data: B,
 					rowKey: (e) => e.id,
-					emptyState: /* @__PURE__ */ w(oe, {
+					emptyState: /* @__PURE__ */ w(se, {
 						illustration: "empty-people",
-						title: j("channel.noUsersConnected", "No users connected to this channel")
+						title: A("channel.noUsersConnected", "No users connected to this channel")
 					}),
 					className: "bg-surface border border-border-seam rounded-lg"
 				}),
@@ -340,23 +346,23 @@ function O() {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ w("p", {
 						className: "text-sm text-text-secondary",
-						children: H > 0 && /* @__PURE__ */ T(C, { children: [
-							j("channel.showing", "Showing"),
+						children: U > 0 && /* @__PURE__ */ T(C, { children: [
+							A("channel.showing", "Showing"),
 							" ",
 							/* @__PURE__ */ T("span", {
 								className: "font-medium",
 								children: [
-									W * B + 1,
+									W * H + 1,
 									"–",
-									Math.min((W + 1) * B, H)
+									Math.min((W + 1) * H, U)
 								]
 							}),
 							" ",
-							j("channel.of", "of"),
+							A("channel.of", "of"),
 							" ",
 							/* @__PURE__ */ w("span", {
 								className: "font-medium",
-								children: H
+								children: U
 							})
 						] })
 					}), /* @__PURE__ */ T("div", {
@@ -365,9 +371,9 @@ function O() {
 							/* @__PURE__ */ T("button", {
 								type: "button",
 								onClick: () => G((e) => Math.max(0, e - 1)),
-								disabled: !ue || I,
+								disabled: !pe || R,
 								className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-								children: [/* @__PURE__ */ w(ee, { size: 16 }), j("channel.previous", "Previous")]
+								children: [/* @__PURE__ */ w(h, { size: 16 }), A("channel.previous", "Previous")]
 							}),
 							/* @__PURE__ */ T("span", {
 								className: "text-sm text-text-secondary",
@@ -380,9 +386,9 @@ function O() {
 							/* @__PURE__ */ T("button", {
 								type: "button",
 								onClick: () => G((e) => Math.min($ - 1, e + 1)),
-								disabled: !de || I,
+								disabled: !me || R,
 								className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-								children: [j("channel.next", "Next"), /* @__PURE__ */ w(te, { size: 16 })]
+								children: [A("channel.next", "Next"), /* @__PURE__ */ w(te, { size: 16 })]
 							})
 						]
 					})]
@@ -392,6 +398,6 @@ function O() {
 	});
 }
 //#endregion
-export { O as ChannelUsersPage };
+export { E as ChannelUsersPage };
 
 //# sourceMappingURL=ChannelUsersPage.js.map