@burdenoff/microfe-channel 2026.624.2 → 2026.625.1

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

@@ -2,15 +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 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 _, Loader2 as v, RefreshCw as te, User as ne, UserCheck as re, XCircle as y } from "lucide-react";
+import { useNavigate as b, useParams as ie } from "react-router-dom";
+import { usePermissions as ae } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as oe, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { CTAOverflowMenu as C, GlassCard as w, ResponsiveTable as T } 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"
@@ -27,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: _
+		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);
+function O() {
+	let { channelId: p } = ie(), g = b(), { hasPermission: O } = ae(), k = O(r.CHANNEL_USER_EXPORT), { t: A } = c(), j = (e, t) => {
+		let n = A(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: M } = e(), { triggerExport: N, isExporting: P, exportError: F } = ee(M ?? void 0, p), [I, L] = s(!0), [R, z] = s([]), [B, V] = s(25), [H, U] = s(0), [W, G] = s(0), { channel: K, isLoading: se, error: q, fetchUserPlatformConnections: J } = t(p), Y = i(async (e = 0) => {
+		if (p) {
+			L(!0);
 			try {
-				let t = await q(R, e * R);
-				L(t.items), V(t.total);
+				let t = await J(B, e * B);
+				z(t.items), U(t.total);
 			} finally {
-				F(!1);
+				L(!1);
 			}
 		}
 	}, [
-		m,
-		q,
-		R
-	]), Y = s(J);
-	o(() => {
-		Y.current = J;
+		p,
+		J,
+		B
+	]), 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;
+	}, [B]), 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(H / B)), ce = W > 0, le = W < $ - 1, ue = (e) => E[e] || E.OFFLINE, de = (e) => D[e] || D.EXPIRED, fe = [
 		{
 			key: "user",
-			header: A("channel.user", "User"),
+			header: j("channel.user", "User"),
 			priority: "primary",
-			cell: (e) => /* @__PURE__ */ T("div", {
+			cell: (e) => /* @__PURE__ */ S("div", {
 				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ w("div", {
+				children: [/* @__PURE__ */ x("div", {
 					className: "size-8 bg-accent-primary/10 rounded-full flex items-center justify-center",
-					children: /* @__PURE__ */ w(te, {
+					children: /* @__PURE__ */ x(ne, {
 						size: 16,
 						className: "text-accent-primary"
 					})
-				}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+				}), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
 					className: "text-sm font-medium text-text-primary",
 					children: e.externalDisplayName || "Unknown"
-				}), e.externalUsername && /* @__PURE__ */ w("p", {
+				}), e.externalUsername && /* @__PURE__ */ x("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: j("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: j("channel.source", "Source"),
 			priority: "secondary",
-			cell: (e) => /* @__PURE__ */ w("span", {
+			cell: (e) => /* @__PURE__ */ x("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: j("channel.status", "Status"),
 			priority: "primary",
 			cell: (e) => {
-				let t = ae(e.presenceStatus);
-				return /* @__PURE__ */ T("div", {
+				let t = ue(e.presenceStatus);
+				return /* @__PURE__ */ S("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__ */ x("span", { className: `w-2 h-2 rounded-full ${t.color.replace("text-", "bg-")}` }), /* @__PURE__ */ x("span", {
 						className: `text-sm ${t.color}`,
 						children: t.label
 					})]
@@ -135,14 +136,14 @@ function k() {
 		},
 		{
 			key: "pairing",
-			header: A("channel.pairing", "Pairing"),
+			header: j("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 ? de(e.pairingStatus) : null, n = t?.icon ?? y;
+				return e.pairingStatus && t ? /* @__PURE__ */ S("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__ */ x(n, { size: 12 }), t.label]
+				}) : /* @__PURE__ */ x("span", {
 					className: "text-xs text-text-secondary",
 					children: "-"
 				});
@@ -150,219 +151,215 @@ function k() {
 		},
 		{
 			key: "notifications",
-			header: A("channel.notifications", "Notifications"),
+			header: j("channel.notifications", "Notifications"),
 			priority: "secondary",
-			cell: (e) => e.notificationsEnabled ? /* @__PURE__ */ T("span", {
+			cell: (e) => e.notificationsEnabled ? /* @__PURE__ */ S("span", {
 				className: "inline-flex items-center gap-1",
-				children: [/* @__PURE__ */ w(f, {
+				children: [/* @__PURE__ */ x(d, {
 					size: 16,
 					className: "text-status-success-text",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ w("span", {
+				}), /* @__PURE__ */ x("span", {
 					className: "sr-only",
-					children: A("channel.enabled", "Enabled")
+					children: j("channel.enabled", "Enabled")
 				})]
-			}) : /* @__PURE__ */ T("span", {
+			}) : /* @__PURE__ */ S("span", {
 				className: "inline-flex items-center gap-1",
-				children: [/* @__PURE__ */ w(p, {
+				children: [/* @__PURE__ */ x(f, {
 					size: 16,
 					className: "text-text-secondary",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ w("span", {
+				}), /* @__PURE__ */ x("span", {
 					className: "sr-only",
-					children: A("channel.disabled", "Disabled")
+					children: j("channel.disabled", "Disabled")
 				})]
 			})
 		},
 		{
 			key: "dmAllowed",
-			header: A("channel.dmAllowed", "DM Allowed"),
+			header: j("channel.dmAllowed", "DM Allowed"),
 			priority: "secondary",
-			cell: (e) => e.dmAllowed ? /* @__PURE__ */ T("span", {
+			cell: (e) => e.dmAllowed ? /* @__PURE__ */ S("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__ */ x(re, { size: 16 }), j("channel.allowed", "Allowed")]
+			}) : /* @__PURE__ */ S("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__ */ x(y, { size: 16 }), j("channel.blocked", "Blocked")]
 			})
 		}
 	];
-	return G ? /* @__PURE__ */ w("div", {
+	return se ? /* @__PURE__ */ x("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ w(y, {
+		children: /* @__PURE__ */ x(v, {
 			size: 32,
 			className: "animate-spin text-accent-primary"
 		})
-	}) : K || !W ? /* @__PURE__ */ w("div", {
+	}) : q || !K ? /* @__PURE__ */ x("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ T("div", {
+		children: /* @__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__ */ w(u, {
+				/* @__PURE__ */ x(l, {
 					size: 20,
 					className: "text-status-error-text"
 				}),
-				/* @__PURE__ */ w("div", { children: /* @__PURE__ */ w("p", {
+				/* @__PURE__ */ x("div", { children: /* @__PURE__ */ x("p", {
 					className: "text-sm font-medium text-status-error-text",
-					children: K || "Channel not found"
+					children: q || "Channel not found"
 				}) }),
-				/* @__PURE__ */ w("button", {
+				/* @__PURE__ */ x("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__ */ x(n, {
 		permission: r.USER_PLATFORM_CONNECTION_READ,
-		children: /* @__PURE__ */ T("div", {
+		children: /* @__PURE__ */ S("div", {
 			className: "space-y-6 p-3 sm:p-6",
 			children: [
-				/* @__PURE__ */ T("div", {
+				/* @__PURE__ */ S("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ T("div", {
+					children: [/* @__PURE__ */ S("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ w("button", {
+						children: [/* @__PURE__ */ x("button", {
 							type: "button",
-							onClick: () => _(`/channels/${m}`),
-							"aria-label": A("channel.backToChannel", "Back to channel"),
+							onClick: () => g(`/channels/${p}`),
+							"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__ */ w(d, {
+							children: /* @__PURE__ */ x(u, {
 								size: 20,
 								"aria-hidden": "true"
 							})
-						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h1", {
+						}), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h1", {
 							className: "text-xl sm:text-2xl font-bold text-text-primary",
-							children: A("channel.channelUsers", "Channel Users")
-						}), /* @__PURE__ */ T("p", {
+							children: j("channel.channelUsers", "Channel Users")
+						}), /* @__PURE__ */ S("p", {
 							className: "text-sm text-text-secondary mt-1",
-							children: [W.name, " - User connections"]
+							children: [K.name, " - User connections"]
 						})] })]
-					}), /* @__PURE__ */ T("div", {
+					}), /* @__PURE__ */ S("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__ */ S("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__ */ x("option", {
+									value: 10,
+									children: "10 results"
+								}),
+								/* @__PURE__ */ x("option", {
+									value: 25,
+									children: "25 results"
+								}),
+								/* @__PURE__ */ x("option", {
+									value: 50,
+									children: "50 results"
+								}),
+								/* @__PURE__ */ x("option", {
+									value: 100,
+									children: "100 results"
+								})
+							]
+						}), /* @__PURE__ */ x(C, { actions: [{
+							label: j("channel.refresh", "Refresh"),
+							icon: /* @__PURE__ */ x(te, {
+								size: 16,
+								className: I ? "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: I,
+							onSelect: () => void Y(W)
+						}, ...k ? [{
+							label: j("channel.export", "Export"),
+							icon: P ? /* @__PURE__ */ x(v, {
+								size: 16,
+								className: "animate-spin",
+								"aria-hidden": "true"
+							}) : /* @__PURE__ */ x(_, {
+								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: P,
+							onSelect: () => void N()
+						}] : []] })]
 					})]
 				}),
-				N && /* @__PURE__ */ T("div", {
+				F && /* @__PURE__ */ S("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__ */ x(l, {
 						size: 20,
 						className: "text-status-error-text"
-					}), /* @__PURE__ */ w("p", {
+					}), /* @__PURE__ */ x("p", {
 						className: "text-sm text-status-error-text flex-1",
-						children: N
+						children: F
 					})]
 				}),
-				/* @__PURE__ */ w("div", {
-					className: "p-4 bg-surface border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ w("p", {
+				/* @__PURE__ */ x(w, {
+					treatment: "insight",
+					className: "p-4 border-border-seam",
+					children: /* @__PURE__ */ x("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__ */ x(T, {
+					columns: fe,
+					data: R,
 					rowKey: (e) => e.id,
-					emptyState: A("channel.noUsersConnected", "No users connected to this channel"),
-					className: "bg-surface border border-border-subtle rounded-lg"
+					emptyState: j("channel.noUsersConnected", "No users connected to this channel"),
+					className: "bg-surface border border-border-seam rounded-lg"
 				}),
-				/* @__PURE__ */ T("div", {
+				/* @__PURE__ */ S("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ w("p", {
+					children: [/* @__PURE__ */ x("p", {
 						className: "text-sm text-text-secondary",
-						children: B > 0 && /* @__PURE__ */ T(C, { children: [
-							A("channel.showing", "Showing"),
+						children: H > 0 && /* @__PURE__ */ S(oe, { children: [
+							j("channel.showing", "Showing"),
 							" ",
-							/* @__PURE__ */ T("span", {
+							/* @__PURE__ */ S("span", {
 								className: "font-medium",
 								children: [
-									H * R + 1,
+									W * B + 1,
 									"–",
-									Math.min((H + 1) * R, B)
+									Math.min((W + 1) * B, H)
 								]
 							}),
 							" ",
-							A("channel.of", "of"),
+							j("channel.of", "of"),
 							" ",
-							/* @__PURE__ */ w("span", {
+							/* @__PURE__ */ x("span", {
 								className: "font-medium",
-								children: B
+								children: H
 							})
 						] })
-					}), /* @__PURE__ */ T("div", {
+					}), /* @__PURE__ */ S("div", {
 						className: "flex items-center gap-2",
 						children: [
-							/* @__PURE__ */ T("button", {
+							/* @__PURE__ */ S("button", {
 								type: "button",
-								onClick: () => U((e) => Math.max(0, e - 1)),
-								disabled: !$ || P,
+								onClick: () => G((e) => Math.max(0, e - 1)),
+								disabled: !ce || 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__ */ w(h, { size: 16 }), A("channel.previous", "Previous")]
+								children: [/* @__PURE__ */ x(m, { size: 16 }), j("channel.previous", "Previous")]
 							}),
-							/* @__PURE__ */ T("span", {
+							/* @__PURE__ */ S("span", {
 								className: "text-sm text-text-secondary",
 								children: [
-									H + 1,
+									W + 1,
 									" / ",
-									Q
+									$
 								]
 							}),
-							/* @__PURE__ */ T("button", {
+							/* @__PURE__ */ S("button", {
 								type: "button",
-								onClick: () => U((e) => Math.min(Q - 1, e + 1)),
-								disabled: !ie || P,
+								onClick: () => G((e) => Math.min($ - 1, e + 1)),
+								disabled: !le || 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: [A("channel.next", "Next"), /* @__PURE__ */ w(g, { size: 16 })]
+								children: [j("channel.next", "Next"), /* @__PURE__ */ x(h, { size: 16 })]
 							})
 						]
 					})]
@@ -372,6 +369,6 @@ function k() {
 	});
 }
 //#endregion
-export { k as ChannelUsersPage };
+export { O as ChannelUsersPage };
 
 //# sourceMappingURL=ChannelUsersPage.js.map