@burdenoff/microfe-channel 2026.625.2 → 2026.626.1

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

@@ -2,16 +2,16 @@ 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 ee } from "../hooks/useExport.js";
-import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
-import { useI18n as c } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as l, ArrowLeft as u, Bell as d, BellOff as f, CheckCircle2 as p, ChevronLeft as m, ChevronRight as h, Clock as g, Download as te, Loader2 as _, RefreshCw as ne, User as re, UserCheck as v, XCircle as y } from "lucide-react";
-import { useNavigate as b, useParams as ie } from "react-router-dom";
-import { usePermissions as x } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { CTAOverflowMenu as T, GlassCard as E, IllustratedEmptyState as ae, ResponsiveTable as oe } from "@burdenoff/fe-libs/ui";
+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-dom";
+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";
 //#region src/channel/modules/channels/pages/ChannelUsersPage.tsx
-var D = {
+var E = {
 	ONLINE: {
 		label: "Online",
 		color: "text-status-success-text"
@@ -28,76 +28,76 @@ var D = {
 		label: "Do Not Disturb",
 		color: "text-status-error-text"
 	}
-}, O = {
+}, D = {
 	PENDING: {
 		label: "Pending",
 		color: "text-status-warning-text bg-status-warning-bg-subtle",
-		icon: g
+		icon: h
 	},
 	APPROVED: {
 		label: "Approved",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: p
+		icon: m
 	},
 	EXPIRED: {
 		label: "Expired",
 		color: "text-text-secondary bg-bg-sunken",
-		icon: y
+		icon: b
 	}
 };
-function k() {
-	let { channelId: p } = ie(), g = b(), { hasPermission: k } = x(), A = k(r.CHANNEL_USER_EXPORT), { t: j } = c(), M = (e, t) => {
-		let n = j(e);
+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: N } = e(), { triggerExport: P, isExporting: F, exportError: I } = ee(N ?? void 0, p), [L, R] = s(!0), [z, B] = s([]), [V, H] = s(25), [U, se] = s(0), [W, G] = s(0), { channel: K, isLoading: ce, error: q, fetchUserPlatformConnections: J } = t(p), Y = i(async (e = 0) => {
-		if (p) {
-			R(!0);
+	}, { 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);
 			try {
-				let t = await J(V, e * V);
-				B(t.items), se(t.total);
+				let t = await J(B, e * B);
+				z(t.items), U(t.total);
 			} finally {
-				R(!1);
+				L(!1);
 			}
 		}
 	}, [
-		p,
+		m,
 		J,
-		V
-	]), X = o(Y);
-	a(() => {
+		B
+	]), X = s(Y);
+	o(() => {
 		X.current = Y;
 	});
-	let Z = o(!0), Q = o(!1);
-	a(() => {
+	let Z = s(!0), Q = s(!1);
+	o(() => {
 		Promise.resolve().then(() => {
 			Q.current = !0, G(0), X.current(0).finally(() => {
 				Q.current = !1;
 			});
 		});
-	}, [V]), a(() => {
+	}, [B]), o(() => {
 		if (Z.current) {
 			Z.current = !1;
 			return;
 		}
 		Q.current || Promise.resolve().then(() => X.current(W));
 	}, [W]);
-	let $ = Math.max(1, Math.ceil(U / V)), le = W > 0, ue = W < $ - 1, de = (e) => D[e] || D.OFFLINE, fe = (e) => O[e] || O.EXPIRED, pe = [
+	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 = [
 		{
 			key: "user",
-			header: M("channel.user", "User"),
+			header: j("channel.user", "User"),
 			priority: "primary",
-			cell: (e) => /* @__PURE__ */ w("div", {
+			cell: (e) => /* @__PURE__ */ T("div", {
 				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ C("div", {
+				children: [/* @__PURE__ */ w("div", {
 					className: "size-8 bg-accent-primary/10 rounded-full flex items-center justify-center",
-					children: /* @__PURE__ */ C(re, {
+					children: /* @__PURE__ */ w(v, {
 						size: 16,
 						className: "text-accent-primary"
 					})
-				}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+				}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 					className: "text-sm font-medium text-text-primary",
 					children: e.externalDisplayName || "Unknown"
-				}), e.externalUsername && /* @__PURE__ */ C("p", {
+				}), e.externalUsername && /* @__PURE__ */ w("p", {
 					className: "text-xs text-text-secondary",
 					children: e.externalUsername
 				})] })]
@@ -105,29 +105,29 @@ function k() {
 		},
 		{
 			key: "platformId",
-			header: M("channel.platformId", "Platform ID"),
+			header: j("channel.platformId", "Platform ID"),
 			priority: "secondary",
 			cellClassName: "text-sm font-mono text-text-secondary",
 			cell: (e) => e.externalUserId
 		},
 		{
 			key: "source",
-			header: M("channel.source", "Source"),
+			header: j("channel.source", "Source"),
 			priority: "secondary",
-			cell: (e) => /* @__PURE__ */ C("span", {
+			cell: (e) => /* @__PURE__ */ w("span", {
 				className: "text-xs text-text-secondary bg-bg-sunken px-2 py-1 rounded",
 				children: e.source
 			})
 		},
 		{
 			key: "status",
-			header: M("channel.status", "Status"),
+			header: j("channel.status", "Status"),
 			priority: "primary",
 			cell: (e) => {
-				let t = de(e.presenceStatus);
-				return /* @__PURE__ */ w("div", {
+				let t = fe(e.presenceStatus);
+				return /* @__PURE__ */ T("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ C("span", { className: `w-2 h-2 rounded-full ${t.color.replace("text-", "bg-")}` }), /* @__PURE__ */ C("span", {
+					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
 					})]
@@ -136,14 +136,14 @@ function k() {
 		},
 		{
 			key: "pairing",
-			header: M("channel.pairing", "Pairing"),
+			header: j("channel.pairing", "Pairing"),
 			priority: "secondary",
 			cell: (e) => {
-				let t = e.pairingStatus ? fe(e.pairingStatus) : null, n = t?.icon ?? y;
-				return e.pairingStatus && t ? /* @__PURE__ */ w("span", {
+				let t = e.pairingStatus ? pe(e.pairingStatus) : null, n = t?.icon ?? b;
+				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__ */ C(n, { size: 12 }), t.label]
-				}) : /* @__PURE__ */ C("span", {
+					children: [/* @__PURE__ */ w(n, { size: 12 }), t.label]
+				}) : /* @__PURE__ */ w("span", {
 					className: "text-xs text-text-secondary",
 					children: "-"
 				});
@@ -151,205 +151,225 @@ function k() {
 		},
 		{
 			key: "notifications",
-			header: M("channel.notifications", "Notifications"),
+			header: j("channel.notifications", "Notifications"),
 			priority: "secondary",
-			cell: (e) => e.notificationsEnabled ? /* @__PURE__ */ w("span", {
+			cell: (e) => e.notificationsEnabled ? /* @__PURE__ */ T("span", {
 				className: "inline-flex items-center gap-1",
-				children: [/* @__PURE__ */ C(d, {
+				children: [/* @__PURE__ */ w(f, {
 					size: 16,
 					className: "text-status-success-text",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ C("span", {
+				}), /* @__PURE__ */ w("span", {
 					className: "sr-only",
-					children: M("channel.enabled", "Enabled")
+					children: j("channel.enabled", "Enabled")
 				})]
-			}) : /* @__PURE__ */ w("span", {
+			}) : /* @__PURE__ */ T("span", {
 				className: "inline-flex items-center gap-1",
-				children: [/* @__PURE__ */ C(f, {
+				children: [/* @__PURE__ */ w(p, {
 					size: 16,
 					className: "text-text-secondary",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ C("span", {
+				}), /* @__PURE__ */ w("span", {
 					className: "sr-only",
-					children: M("channel.disabled", "Disabled")
+					children: j("channel.disabled", "Disabled")
 				})]
 			})
 		},
 		{
 			key: "dmAllowed",
-			header: M("channel.dmAllowed", "DM Allowed"),
+			header: j("channel.dmAllowed", "DM Allowed"),
 			priority: "secondary",
-			cell: (e) => e.dmAllowed ? /* @__PURE__ */ w("span", {
+			cell: (e) => e.dmAllowed ? /* @__PURE__ */ T("span", {
 				className: "inline-flex items-center gap-1 text-sm text-status-success-text",
-				children: [/* @__PURE__ */ C(v, { size: 16 }), M("channel.allowed", "Allowed")]
-			}) : /* @__PURE__ */ w("span", {
+				children: [/* @__PURE__ */ w(y, { size: 16 }), j("channel.allowed", "Allowed")]
+			}) : /* @__PURE__ */ T("span", {
 				className: "inline-flex items-center gap-1 text-sm text-text-secondary",
-				children: [/* @__PURE__ */ C(y, { size: 16 }), M("channel.blocked", "Blocked")]
+				children: [/* @__PURE__ */ w(b, { size: 16 }), j("channel.blocked", "Blocked")]
 			})
 		}
 	];
-	return ce ? /* @__PURE__ */ C("div", {
+	return le ? /* @__PURE__ */ w("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ C(_, {
+		children: /* @__PURE__ */ w(g, {
 			size: 32,
 			className: "animate-spin text-accent-primary"
 		})
-	}) : q || !K ? /* @__PURE__ */ C("div", {
+	}) : q || !K ? /* @__PURE__ */ w("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ T("div", {
 			className: "flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg",
 			children: [
-				/* @__PURE__ */ C(l, {
+				/* @__PURE__ */ w(u, {
 					size: 20,
 					className: "text-status-error-text"
 				}),
-				/* @__PURE__ */ C("div", { children: /* @__PURE__ */ C("p", {
+				/* @__PURE__ */ w("div", { children: /* @__PURE__ */ w("p", {
 					className: "text-sm font-medium text-status-error-text",
 					children: q || "Channel not found"
 				}) }),
-				/* @__PURE__ */ C("button", {
+				/* @__PURE__ */ w("button", {
 					type: "button",
-					onClick: () => g(`/channels/${p}`),
+					onClick: () => h(`/channels/${m}`),
 					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"
 				})
 			]
 		})
-	}) : /* @__PURE__ */ C(n, {
+	}) : /* @__PURE__ */ w(n, {
 		permission: r.USER_PLATFORM_CONNECTION_READ,
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ T("div", {
 			className: "space-y-6 p-3 sm:p-6",
 			children: [
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ w("div", {
+					children: [/* @__PURE__ */ T("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ C("button", {
+						children: [/* @__PURE__ */ w("button", {
 							type: "button",
-							onClick: () => g(`/channels/${p}`),
-							"aria-label": M("channel.backToChannel", "Back to channel"),
+							onClick: () => h(`/channels/${m}`),
+							"aria-label": j("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__ */ C(u, {
+							children: /* @__PURE__ */ w(d, {
 								size: 20,
 								"aria-hidden": "true"
 							})
-						}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("h1", {
+						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h1", {
 							className: "text-xl sm:text-2xl font-bold text-text-primary",
-							children: M("channel.channelUsers", "Channel Users")
-						}), /* @__PURE__ */ w("p", {
+							children: j("channel.channelUsers", "Channel Users")
+						}), /* @__PURE__ */ T("p", {
 							className: "text-sm text-text-secondary mt-1",
 							children: [K.name, " - User connections"]
 						})] })]
-					}), /* @__PURE__ */ w("div", {
+					}), /* @__PURE__ */ T("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ w("select", {
-							value: V,
-							onChange: (e) => H(Number(e.target.value)),
+						children: [/* @__PURE__ */ T("select", {
+							value: B,
+							onChange: (e) => V(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__ */ C("option", {
+								/* @__PURE__ */ w("option", {
 									value: 10,
 									children: "10 results"
 								}),
-								/* @__PURE__ */ C("option", {
+								/* @__PURE__ */ w("option", {
 									value: 25,
 									children: "25 results"
 								}),
-								/* @__PURE__ */ C("option", {
+								/* @__PURE__ */ w("option", {
 									value: 50,
 									children: "50 results"
 								}),
-								/* @__PURE__ */ C("option", {
+								/* @__PURE__ */ w("option", {
 									value: 100,
 									children: "100 results"
 								})
 							]
-						}), /* @__PURE__ */ C(T, { actions: [{
-							label: M("channel.refresh", "Refresh"),
-							icon: /* @__PURE__ */ C(ne, {
+						}), /* @__PURE__ */ w(ie, { actions: [{
+							label: j("channel.refresh", "Refresh"),
+							icon: /* @__PURE__ */ w(_, {
 								size: 16,
-								className: L ? "animate-spin" : "",
+								className: I ? "animate-spin" : "",
 								"aria-hidden": "true"
 							}),
-							disabled: L,
+							disabled: I,
 							onSelect: () => void Y(W)
-						}, ...A ? [{
-							label: M("channel.export", "Export"),
-							icon: F ? /* @__PURE__ */ C(_, {
+						}, ...k ? [{
+							label: j("channel.export", "Export"),
+							icon: P ? /* @__PURE__ */ w(g, {
 								size: 16,
 								className: "animate-spin",
 								"aria-hidden": "true"
-							}) : /* @__PURE__ */ C(te, {
+							}) : /* @__PURE__ */ w(ne, {
 								size: 16,
 								"aria-hidden": "true"
 							}),
-							disabled: F,
-							onSelect: () => void P()
+							disabled: P,
+							onSelect: () => void N()
 						}] : []] })]
 					})]
 				}),
-				I && /* @__PURE__ */ w("div", {
+				/* @__PURE__ */ w(se, {
+					icon: /* @__PURE__ */ w(v, {
+						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.")
+				}),
+				F && /* @__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__ */ C(l, {
+					children: [/* @__PURE__ */ w(u, {
 						size: 20,
 						className: "text-status-error-text"
-					}), /* @__PURE__ */ C("p", {
+					}), /* @__PURE__ */ w("p", {
 						className: "text-sm text-status-error-text flex-1",
-						children: I
+						children: F
 					})]
 				}),
-				/* @__PURE__ */ C(E, {
-					treatment: "insight",
-					className: "p-4 border-border-seam",
-					children: /* @__PURE__ */ C("p", {
+				/* @__PURE__ */ T(ae, {
+					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, {
+							size: 18,
+							className: "text-accent-blue",
+							"aria-hidden": "true"
+						})
+					}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("p", {
+						className: "text-sm font-semibold text-text-primary",
+						children: [
+							H,
+							" ",
+							H === 1 ? j("channel.connectedUserSingular", "connected user") : j("channel.connectedUsersPlural", "connected users")
+						]
+					}), /* @__PURE__ */ w("p", {
 						className: "text-sm text-text-secondary",
-						children: "Users connected to this channel through OAuth or pairing. Manage notification preferences and DM authorization here."
-					})
+						children: j("channel.usersBannerHint", "Users connected to this channel through OAuth or pairing. Notification preferences and DM authorization are managed per user.")
+					})] })]
 				}),
-				/* @__PURE__ */ C(oe, {
-					columns: pe,
-					data: z,
+				/* @__PURE__ */ w(ce, {
+					columns: me,
+					data: R,
 					rowKey: (e) => e.id,
-					emptyState: /* @__PURE__ */ C(ae, {
+					emptyState: /* @__PURE__ */ w(oe, {
 						illustration: "empty-people",
-						title: M("channel.noUsersConnected", "No users connected to this channel")
+						title: j("channel.noUsersConnected", "No users connected to this channel")
 					}),
 					className: "bg-surface border border-border-seam rounded-lg"
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ C("p", {
+					children: [/* @__PURE__ */ w("p", {
 						className: "text-sm text-text-secondary",
-						children: U > 0 && /* @__PURE__ */ w(S, { children: [
-							M("channel.showing", "Showing"),
+						children: H > 0 && /* @__PURE__ */ T(C, { children: [
+							j("channel.showing", "Showing"),
 							" ",
-							/* @__PURE__ */ w("span", {
+							/* @__PURE__ */ T("span", {
 								className: "font-medium",
 								children: [
-									W * V + 1,
+									W * B + 1,
 									"–",
-									Math.min((W + 1) * V, U)
+									Math.min((W + 1) * B, H)
 								]
 							}),
 							" ",
-							M("channel.of", "of"),
+							j("channel.of", "of"),
 							" ",
-							/* @__PURE__ */ C("span", {
+							/* @__PURE__ */ w("span", {
 								className: "font-medium",
-								children: U
+								children: H
 							})
 						] })
-					}), /* @__PURE__ */ w("div", {
+					}), /* @__PURE__ */ T("div", {
 						className: "flex items-center gap-2",
 						children: [
-							/* @__PURE__ */ w("button", {
+							/* @__PURE__ */ T("button", {
 								type: "button",
 								onClick: () => G((e) => Math.max(0, e - 1)),
-								disabled: !le || L,
+								disabled: !ue || I,
 								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__ */ C(m, { size: 16 }), M("channel.previous", "Previous")]
+								children: [/* @__PURE__ */ w(ee, { size: 16 }), j("channel.previous", "Previous")]
 							}),
-							/* @__PURE__ */ w("span", {
+							/* @__PURE__ */ T("span", {
 								className: "text-sm text-text-secondary",
 								children: [
 									W + 1,
@@ -357,12 +377,12 @@ function k() {
 									$
 								]
 							}),
-							/* @__PURE__ */ w("button", {
+							/* @__PURE__ */ T("button", {
 								type: "button",
 								onClick: () => G((e) => Math.min($ - 1, e + 1)),
-								disabled: !ue || L,
+								disabled: !de || I,
 								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: [M("channel.next", "Next"), /* @__PURE__ */ C(h, { size: 16 })]
+								children: [j("channel.next", "Next"), /* @__PURE__ */ w(te, { size: 16 })]
 							})
 						]
 					})]
@@ -372,6 +392,6 @@ function k() {
 	});
 }
 //#endregion
-export { k as ChannelUsersPage };
+export { O as ChannelUsersPage };
 
 //# sourceMappingURL=ChannelUsersPage.js.map