@burdenoff/microfe-channel 2026.624.3 → 2026.625.2

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

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