@burdenoff/microfe-channel 2026.518.2 → 2026.520.1

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

@@ -5,14 +5,14 @@ import { CHANNEL_PERMISSIONS as r } from "../../../constants/permissions.js";
 import { useExportChannelUsers as i } from "../hooks/useExport.js";
 import { useCallback as a, useEffect 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, Clock as m, Download as h, Loader2 as g, RefreshCw as _, User as v, UserCheck as y, XCircle as b } from "lucide-react";
-import { useNavigate as x, useParams as S } from "react-router-dom";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
+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 y, User as b, UserCheck as x, XCircle as S } from "lucide-react";
+import { useNavigate as C, useParams as w } from "react-router-dom";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
 //#region src/channel/modules/channels/pages/ChannelUsersPage.tsx
-var T = {
+var O = {
 	ONLINE: {
 		label: "Online",
-		color: "text-success-500"
+		color: "text-status-success-text"
 	},
 	OFFLINE: {
 		label: "Offline",
@@ -20,300 +20,307 @@ var T = {
 	},
 	AWAY: {
 		label: "Away",
-		color: "text-warning-500"
+		color: "text-status-warning-text"
 	},
 	DND: {
 		label: "Do Not Disturb",
-		color: "text-error-500"
+		color: "text-status-error-text"
 	}
-}, E = {
+}, k = {
 	PENDING: {
 		label: "Pending",
-		color: "text-warning-500 bg-warning-100",
-		icon: m
+		color: "text-status-warning-text bg-status-warning-bg-subtle",
+		icon: g
 	},
 	APPROVED: {
 		label: "Approved",
-		color: "text-success-500 bg-success-100",
+		color: "text-status-success-text bg-status-success-bg-subtle",
 		icon: p
 	},
 	EXPIRED: {
 		label: "Expired",
 		color: "text-muted-foreground bg-muted",
-		icon: b
+		icon: S
 	}
 };
-function D() {
-	let { channelId: p } = S(), m = x(), { t: D } = c(), O = (e, t) => {
-		let n = D(e);
+function A() {
+	let { channelId: p } = w(), g = C(), { t: A } = c(), j = (e, t) => {
+		let n = A(e);
 		return n === e ? t : n;
-	}, { organizationId: k } = e(), { triggerExport: A, isExporting: j, exportError: M } = i(k ?? void 0, p), [N, P] = s(!0), [F, I] = s([]), [L, R] = s(25), { channel: z, isLoading: B, error: V, fetchUserPlatformConnections: H } = t(p), U = a(async () => {
+	}, { organizationId: M } = e(), { triggerExport: N, isExporting: P, exportError: F } = i(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: q, error: J, fetchUserPlatformConnections: Y } = t(p), X = a(async (e = 0) => {
 		if (p) {
-			P(!0);
+			L(!0);
 			try {
-				I(await H(L));
+				let t = await Y(B, e * B);
+				z(t.items), U(t.total);
 			} finally {
-				P(!1);
+				L(!1);
 			}
 		}
 	}, [
 		p,
-		H,
-		L
+		Y,
+		B
 	]);
 	o(() => {
-		Promise.resolve().then(() => U());
-	}, [U]);
-	let W = (e) => T[e] || T.OFFLINE, G = (e) => E[e] || E.EXPIRED;
-	return B || N ? /* @__PURE__ */ C("div", {
+		Promise.resolve().then(() => {
+			G(0), X(0);
+		});
+	}, [B]), o(() => {
+		Promise.resolve().then(() => X(W));
+	}, [W]), o(() => {
+		Promise.resolve().then(() => X(0));
+	}, []);
+	let Z = Math.max(1, Math.ceil(H / B)), Q = W > 0, $ = W < Z - 1, ee = (e) => O[e] || O.OFFLINE, te = (e) => k[e] || k.EXPIRED;
+	return q ? /* @__PURE__ */ E("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ C(g, {
+		children: /* @__PURE__ */ E(v, {
 			size: 32,
 			className: "animate-spin text-accent-primary"
 		})
-	}) : V || !z ? /* @__PURE__ */ C("div", {
+	}) : J || !K ? /* @__PURE__ */ E("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ w("div", {
-			className: "flex items-center gap-3 p-4 bg-error-100 border border-error-500 rounded-lg",
+		children: /* @__PURE__ */ D("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__ */ E(l, {
 					size: 20,
-					className: "text-error-500"
+					className: "text-status-error-text"
 				}),
-				/* @__PURE__ */ C("div", { children: /* @__PURE__ */ C("p", {
-					className: "text-sm font-medium text-error-700",
-					children: V || "Channel not found"
+				/* @__PURE__ */ E("div", { children: /* @__PURE__ */ E("p", {
+					className: "text-sm font-medium text-status-error-text",
+					children: J || "Channel not found"
 				}) }),
-				/* @__PURE__ */ C("button", {
-					onClick: () => m(`/channels/${p}`),
-					className: "ml-auto px-3 py-1 text-sm text-error-700 hover:bg-error-200 rounded transition-colors",
+				/* @__PURE__ */ E("button", {
+					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__ */ C(n, {
+	}) : /* @__PURE__ */ E(n, {
 		permission: r.USER_PLATFORM_CONNECTION_READ,
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ D("div", {
 			className: "space-y-6 p-3 sm:p-6",
 			children: [
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ D("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ w("div", {
+					children: [/* @__PURE__ */ D("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ C("button", {
-							onClick: () => m(`/channels/${p}`),
-							"aria-label": O("channel.backToChannel", "Back to channel"),
+						children: [/* @__PURE__ */ E("button", {
+							onClick: () => g(`/channels/${p}`),
+							"aria-label": j("channel.backToChannel", "Back to channel"),
 							className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors",
-							children: /* @__PURE__ */ C(u, {
+							children: /* @__PURE__ */ E(u, {
 								size: 20,
 								"aria-hidden": "true"
 							})
-						}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("h1", {
+						}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("h1", {
 							className: "text-xl sm:text-2xl font-bold text-foreground",
-							children: O("channel.channelUsers", "Channel Users")
-						}), /* @__PURE__ */ w("p", {
+							children: j("channel.channelUsers", "Channel Users")
+						}), /* @__PURE__ */ D("p", {
 							className: "text-sm text-muted-foreground mt-1",
-							children: [z.name, " - User connections"]
+							children: [K.name, " - User connections"]
 						})] })]
-					}), /* @__PURE__ */ w("div", {
+					}), /* @__PURE__ */ D("div", {
 						className: "flex items-center gap-3",
 						children: [
-							/* @__PURE__ */ w("select", {
-								value: L,
-								onChange: (e) => R(Number(e.target.value)),
+							/* @__PURE__ */ D("select", {
+								value: B,
+								onChange: (e) => V(Number(e.target.value)),
 								className: "px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-primary/50 text-foreground",
 								children: [
-									/* @__PURE__ */ C("option", {
+									/* @__PURE__ */ E("option", {
 										value: 10,
 										children: "10 results"
 									}),
-									/* @__PURE__ */ C("option", {
+									/* @__PURE__ */ E("option", {
 										value: 25,
 										children: "25 results"
 									}),
-									/* @__PURE__ */ C("option", {
+									/* @__PURE__ */ E("option", {
 										value: 50,
 										children: "50 results"
 									}),
-									/* @__PURE__ */ C("option", {
+									/* @__PURE__ */ E("option", {
 										value: 100,
 										children: "100 results"
 									})
 								]
 							}),
-							/* @__PURE__ */ w("button", {
-								onClick: U,
-								disabled: N,
+							/* @__PURE__ */ D("button", {
+								onClick: () => void X(W),
+								disabled: I,
 								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50",
-								children: [/* @__PURE__ */ C(_, {
+								children: [/* @__PURE__ */ E(y, {
 									size: 16,
-									className: N ? "animate-spin" : ""
-								}), O("channel.refresh", "Refresh")]
+									className: I ? "animate-spin" : ""
+								}), j("channel.refresh", "Refresh")]
 							}),
-							/* @__PURE__ */ C(n, {
+							/* @__PURE__ */ E(n, {
 								permission: r.CHANNEL_ADMIN,
-								children: /* @__PURE__ */ w("button", {
-									onClick: () => void A(),
-									disabled: j,
+								children: /* @__PURE__ */ D("button", {
+									onClick: () => void N(),
+									disabled: P,
 									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-									title: O("channel.exportCSV", "Export to CSV"),
-									children: [j ? /* @__PURE__ */ C(g, {
+									title: j("channel.exportCSV", "Export to CSV"),
+									children: [P ? /* @__PURE__ */ E(v, {
 										size: 16,
 										className: "animate-spin"
-									}) : /* @__PURE__ */ C(h, { size: 16 }), O("channel.export", "Export")]
+									}) : /* @__PURE__ */ E(_, { size: 16 }), j("channel.export", "Export")]
 								})
 							})
 						]
 					})]
 				}),
-				M && /* @__PURE__ */ w("div", {
-					className: "p-4 bg-error-100 border border-error-500 rounded-lg flex items-center gap-3",
-					children: [/* @__PURE__ */ C(l, {
+				F && /* @__PURE__ */ D("div", {
+					className: "p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3",
+					children: [/* @__PURE__ */ E(l, {
 						size: 20,
-						className: "text-error-500"
-					}), /* @__PURE__ */ C("p", {
-						className: "text-sm text-error-700 flex-1",
-						children: M
+						className: "text-status-error-text"
+					}), /* @__PURE__ */ E("p", {
+						className: "text-sm text-status-error-text flex-1",
+						children: F
 					})]
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ E("div", {
 					className: "p-4 bg-surface border border-border rounded-lg",
-					children: /* @__PURE__ */ C("p", {
+					children: /* @__PURE__ */ E("p", {
 						className: "text-sm text-muted-foreground",
 						children: "Users connected to this channel through OAuth or pairing. Manage notification preferences and DM authorization here."
 					})
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ E("div", {
 					className: "bg-surface border border-border rounded-lg overflow-hidden",
-					children: /* @__PURE__ */ C("div", {
+					children: /* @__PURE__ */ E("div", {
 						className: "overflow-x-auto min-w-full",
-						children: /* @__PURE__ */ w("table", {
+						children: /* @__PURE__ */ D("table", {
 							className: "w-full min-w-[800px]",
-							children: [/* @__PURE__ */ C("thead", {
+							children: [/* @__PURE__ */ E("thead", {
 								className: "bg-muted/50 border-b border-border",
-								children: /* @__PURE__ */ w("tr", { children: [
-									/* @__PURE__ */ C("th", {
+								children: /* @__PURE__ */ D("tr", { children: [
+									/* @__PURE__ */ E("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: O("channel.user", "User")
+										children: j("channel.user", "User")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ E("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: O("channel.platformId", "Platform ID")
+										children: j("channel.platformId", "Platform ID")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ E("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: O("channel.source", "Source")
+										children: j("channel.source", "Source")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ E("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: O("channel.status", "Status")
+										children: j("channel.status", "Status")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ E("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: O("channel.pairing", "Pairing")
+										children: j("channel.pairing", "Pairing")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ E("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: O("channel.notifications", "Notifications")
+										children: j("channel.notifications", "Notifications")
 									}),
-									/* @__PURE__ */ C("th", {
+									/* @__PURE__ */ E("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: O("channel.dmAllowed", "DM Allowed")
+										children: j("channel.dmAllowed", "DM Allowed")
 									})
 								] })
-							}), /* @__PURE__ */ C("tbody", {
+							}), /* @__PURE__ */ E("tbody", {
 								className: "divide-y divide-border",
-								children: F.length === 0 ? /* @__PURE__ */ C("tr", { children: /* @__PURE__ */ C("td", {
+								children: R.length === 0 ? /* @__PURE__ */ E("tr", { children: /* @__PURE__ */ E("td", {
 									colSpan: 7,
 									className: "px-4 py-8 text-center text-muted-foreground",
-									children: O("channel.noUsersConnected", "No users connected to this channel")
-								}) }) : F.map((e) => {
-									let t = W(e.presenceStatus), n = e.pairingStatus ? G(e.pairingStatus) : null, r = n?.icon ?? b;
-									return /* @__PURE__ */ w("tr", {
+									children: j("channel.noUsersConnected", "No users connected to this channel")
+								}) }) : R.map((e) => {
+									let t = ee(e.presenceStatus), n = e.pairingStatus ? te(e.pairingStatus) : null, r = n?.icon ?? S;
+									return /* @__PURE__ */ D("tr", {
 										className: "hover:bg-muted/30 transition-colors",
 										children: [
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ E("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ w("div", {
+												children: /* @__PURE__ */ D("div", {
 													className: "flex items-center gap-3",
-													children: [/* @__PURE__ */ C("div", {
+													children: [/* @__PURE__ */ E("div", {
 														className: "w-8 h-8 bg-accent-primary/10 rounded-full flex items-center justify-center",
-														children: /* @__PURE__ */ C(v, {
+														children: /* @__PURE__ */ E(b, {
 															size: 16,
 															className: "text-accent-primary"
 														})
-													}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+													}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
 														className: "text-sm font-medium text-foreground",
 														children: e.externalDisplayName || "Unknown"
-													}), e.externalUsername && /* @__PURE__ */ C("p", {
+													}), e.externalUsername && /* @__PURE__ */ E("p", {
 														className: "text-xs text-muted-foreground",
 														children: e.externalUsername
 													})] })]
 												})
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ E("td", {
 												className: "px-4 py-3 text-sm font-mono text-muted-foreground",
 												children: e.externalUserId
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ E("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ C("span", {
+												children: /* @__PURE__ */ E("span", {
 													className: "text-xs text-muted-foreground bg-muted px-2 py-1 rounded",
 													children: e.source
 												})
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ E("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ w("div", {
+												children: /* @__PURE__ */ D("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__ */ E("span", { className: `w-2 h-2 rounded-full ${t.color.replace("text-", "bg-")}` }), /* @__PURE__ */ E("span", {
 														className: `text-sm ${t.color}`,
 														children: t.label
 													})]
 												})
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ E("td", {
 												className: "px-4 py-3",
-												children: e.pairingStatus && n ? /* @__PURE__ */ w("span", {
+												children: e.pairingStatus && n ? /* @__PURE__ */ D("span", {
 													className: `inline-flex items-center gap-1 text-xs px-2 py-1 rounded ${n.color}`,
-													children: [/* @__PURE__ */ C(r, { size: 12 }), n.label]
-												}) : /* @__PURE__ */ C("span", {
+													children: [/* @__PURE__ */ E(r, { size: 12 }), n.label]
+												}) : /* @__PURE__ */ E("span", {
 													className: "text-xs text-muted-foreground",
 													children: "-"
 												})
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ E("td", {
 												className: "px-4 py-3",
-												children: e.notificationsEnabled ? /* @__PURE__ */ w("span", {
+												children: e.notificationsEnabled ? /* @__PURE__ */ D("span", {
 													className: "inline-flex items-center gap-1",
-													children: [/* @__PURE__ */ C(d, {
+													children: [/* @__PURE__ */ E(d, {
 														size: 16,
-														className: "text-success-500",
+														className: "text-status-success-text",
 														"aria-hidden": "true"
-													}), /* @__PURE__ */ C("span", {
+													}), /* @__PURE__ */ E("span", {
 														className: "sr-only",
-														children: O("channel.enabled", "Enabled")
+														children: j("channel.enabled", "Enabled")
 													})]
-												}) : /* @__PURE__ */ w("span", {
+												}) : /* @__PURE__ */ D("span", {
 													className: "inline-flex items-center gap-1",
-													children: [/* @__PURE__ */ C(f, {
+													children: [/* @__PURE__ */ E(f, {
 														size: 16,
 														className: "text-muted-foreground",
 														"aria-hidden": "true"
-													}), /* @__PURE__ */ C("span", {
+													}), /* @__PURE__ */ E("span", {
 														className: "sr-only",
-														children: O("channel.disabled", "Disabled")
+														children: j("channel.disabled", "Disabled")
 													})]
 												})
 											}),
-											/* @__PURE__ */ C("td", {
+											/* @__PURE__ */ E("td", {
 												className: "px-4 py-3",
-												children: e.dmAllowed ? /* @__PURE__ */ w("span", {
-													className: "inline-flex items-center gap-1 text-sm text-success-500",
-													children: [/* @__PURE__ */ C(y, { size: 16 }), O("channel.allowed", "Allowed")]
-												}) : /* @__PURE__ */ w("span", {
+												children: e.dmAllowed ? /* @__PURE__ */ D("span", {
+													className: "inline-flex items-center gap-1 text-sm text-status-success-text",
+													children: [/* @__PURE__ */ E(x, { size: 16 }), j("channel.allowed", "Allowed")]
+												}) : /* @__PURE__ */ D("span", {
 													className: "inline-flex items-center gap-1 text-sm text-muted-foreground",
-													children: [/* @__PURE__ */ C(b, { size: 16 }), O("channel.blocked", "Blocked")]
+													children: [/* @__PURE__ */ E(S, { size: 16 }), j("channel.blocked", "Blocked")]
 												})
 											})
 										]
@@ -322,12 +329,61 @@ function D() {
 							})]
 						})
 					})
+				}),
+				/* @__PURE__ */ D("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ E("p", {
+						className: "text-sm text-muted-foreground",
+						children: H > 0 && /* @__PURE__ */ D(T, { children: [
+							j("channel.showing", "Showing"),
+							" ",
+							/* @__PURE__ */ D("span", {
+								className: "font-medium",
+								children: [
+									W * B + 1,
+									"–",
+									Math.min((W + 1) * B, H)
+								]
+							}),
+							" ",
+							j("channel.of", "of"),
+							" ",
+							/* @__PURE__ */ E("span", {
+								className: "font-medium",
+								children: H
+							})
+						] })
+					}), /* @__PURE__ */ D("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ D("button", {
+								onClick: () => G((e) => Math.max(0, e - 1)),
+								disabled: !Q || I,
+								className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+								children: [/* @__PURE__ */ E(m, { size: 16 }), j("channel.previous", "Previous")]
+							}),
+							/* @__PURE__ */ D("span", {
+								className: "text-sm text-muted-foreground",
+								children: [
+									W + 1,
+									" / ",
+									Z
+								]
+							}),
+							/* @__PURE__ */ D("button", {
+								onClick: () => G((e) => Math.min(Z - 1, e + 1)),
+								disabled: !$ || I,
+								className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+								children: [j("channel.next", "Next"), /* @__PURE__ */ E(h, { size: 16 })]
+							})
+						]
+					})]
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { D as ChannelUsersPage };
+export { A as ChannelUsersPage };
 
 //# sourceMappingURL=ChannelUsersPage.js.map