@burdenoff/microfe-channel 2026.510.112

package/dist/channel/modules/channels/pages/ChannelSettingsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSettingsPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/ChannelSettingsPage.tsx"],"sourcesContent":["/**\n * Channel Settings Page\n *\n * Global settings for the channels module.\n */\n\nimport { useState, useEffect, useRef } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  ArrowLeft,\n  Settings,\n  Bell,\n  Shield,\n  Clock,\n  Database,\n  Save,\n  Loader2,\n  AlertCircle,\n  CheckCircle2,\n} from 'lucide-react';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\nimport { useChannelOrgSettings } from '../../../hooks/useChannelOrgSettings';\nimport type { ChannelOrgSettingsInput } from '../../../hooks/useChannelOrgSettings';\n\ninterface ChannelSettings {\n  defaultPriority: number;\n  rateLimitPerMinute: number;\n  rateLimitPerHour: number;\n  healthCheckIntervalMinutes: number;\n  enableAuditLogging: boolean;\n  enableWebhookVerification: boolean;\n  sessionTimeoutMinutes: number;\n}\n\nconst DEFAULT_SETTINGS: ChannelSettings = {\n  defaultPriority: 2,\n  rateLimitPerMinute: 100,\n  rateLimitPerHour: 5000,\n  healthCheckIntervalMinutes: 5,\n  enableAuditLogging: true,\n  enableWebhookVerification: true,\n  sessionTimeoutMinutes: 30,\n};\n\nexport function ChannelSettingsPage() {\n  const navigate = useNavigate();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  const {\n    settings: remoteSettings,\n    isLoading: isLoadingSettings,\n    error: settingsLoadError,\n    saveSettings,\n  } = useChannelOrgSettings();\n\n  const [settings, setSettings] = useState<ChannelSettings>(DEFAULT_SETTINGS);\n  const [isSaving, setIsSaving] = useState(false);\n  const [saveSuccess, setSaveSuccess] = useState(false);\n  const [saveError, setSaveError] = useState<string | null>(null);\n\n  // Populate / re-sync form from remote settings whenever they change.\n  // This handles both the initial load and server-side normalisations returned\n  // by saveSettings (e.g. clamped values), so the form always reflects the\n  // true persisted state rather than potentially stale local values.\n  // Defer setState to a microtask to avoid react-hooks/exhaustive-deps warnings.\n  const loadedOrgIdRef = useRef<string | null>(null);\n  useEffect(() => {\n    if (!remoteSettings) return;\n    // Re-hydrate whenever the org changes *or* the updatedAt timestamp changes,\n    // so server-side coercion after a save is reflected immediately.\n    const changeKey = `${remoteSettings.organizationId}:${remoteSettings.updatedAt}`;\n    if (changeKey === loadedOrgIdRef.current) return;\n    loadedOrgIdRef.current = changeKey;\n    void Promise.resolve().then(() => {\n      setSettings({\n        defaultPriority: remoteSettings.defaultPriority,\n        rateLimitPerMinute: remoteSettings.rateLimitPerMinute,\n        rateLimitPerHour: remoteSettings.rateLimitPerHour,\n        healthCheckIntervalMinutes: remoteSettings.healthCheckIntervalMinutes,\n        enableAuditLogging: remoteSettings.enableAuditLogging,\n        enableWebhookVerification: remoteSettings.enableWebhookVerification,\n        sessionTimeoutMinutes: remoteSettings.sessionTimeoutMinutes,\n      });\n    });\n  }, [remoteSettings]);\n\n  const handleSave = async () => {\n    // Guard: refuse to save when the initial load failed to prevent accidentally\n    // overwriting existing org settings with client-side defaults (P1).\n    if (settingsLoadError) {\n      setSaveError(\n        tr(\n          'channel.settingsLoadErrorSaveBlocked',\n          'Cannot save — settings failed to load. Please refresh and try again.'\n        )\n      );\n      return;\n    }\n\n    setIsSaving(true);\n    setSaveError(null);\n    setSaveSuccess(false);\n\n    try {\n      const input: ChannelOrgSettingsInput = {\n        defaultPriority: settings.defaultPriority,\n        rateLimitPerMinute: settings.rateLimitPerMinute,\n        rateLimitPerHour: settings.rateLimitPerHour,\n        healthCheckIntervalMinutes: settings.healthCheckIntervalMinutes,\n        enableAuditLogging: settings.enableAuditLogging,\n        enableWebhookVerification: settings.enableWebhookVerification,\n        sessionTimeoutMinutes: settings.sessionTimeoutMinutes,\n      };\n      // saveSettings returns null when organizationId is absent (context not\n      // ready); only show success when something was actually persisted (P2).\n      const saved = await saveSettings(input);\n      if (saved) {\n        setSaveSuccess(true);\n        setTimeout(() => setSaveSuccess(false), 3000);\n      } else {\n        setSaveError(\n          tr(\n            'channel.settingsSaveNotPersisted',\n            'Settings could not be saved — organization context is unavailable.'\n          )\n        );\n      }\n    } catch (err: unknown) {\n      const message = err instanceof Error ? err.message : 'Failed to save settings';\n      setSaveError(message);\n    } finally {\n      setIsSaving(false);\n    }\n  };\n\n  const updateSetting = <K extends keyof ChannelSettings>(key: K, value: ChannelSettings[K]) => {\n    setSettings((prev) => ({ ...prev, [key]: value }));\n  };\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_UPDATE}>\n      <div className=\"min-h-screen bg-background\">\n        {/* Header */}\n        <div className=\"border-b bg-card\">\n          <div className=\"container mx-auto px-6 py-4\">\n            <div className=\"flex items-center justify-between\">\n              <div className=\"flex items-center gap-4\">\n                <button\n                  onClick={() => navigate('./list')}\n                  className=\"p-2 hover:bg-muted rounded-lg transition-colors\"\n                >\n                  <ArrowLeft className=\"w-5 h-5\" />\n                </button>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"p-2 bg-primary/10 rounded-lg\">\n                    <Settings className=\"w-5 h-5 text-primary\" />\n                  </div>\n                  <div>\n                    <h1 className=\"text-2xl font-bold\">\n                      {tr('channel.channelSettings', 'Channel Settings')}\n                    </h1>\n                    <p className=\"text-sm text-muted-foreground\">\n                      {tr(\n                        'channel.channelSettingsSubtitle',\n                        'Configure global channel preferences'\n                      )}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Content */}\n        <div className=\"container mx-auto px-6 py-8 max-w-2xl space-y-8\">\n          {/* Loading state */}\n          {isLoadingSettings && (\n            <div className=\"flex items-center gap-2 text-muted-foreground\">\n              <Loader2 className=\"w-4 h-4 animate-spin\" />\n              <span className=\"text-sm\">Loading settings…</span>\n            </div>\n          )}\n\n          {/* Settings load error — shown persistently when the initial fetch failed */}\n          {settingsLoadError && (\n            <div className=\"p-4 rounded-lg bg-destructive/10 border border-destructive/20 flex items-center gap-3\">\n              <AlertCircle className=\"w-5 h-5 text-destructive shrink-0\" />\n              <p className=\"text-sm text-destructive\">\n                {tr(\n                  'channel.settingsLoadError',\n                  'Failed to load settings — saving is disabled to prevent overwriting existing configuration.'\n                )}\n              </p>\n            </div>\n          )}\n\n          {/* Alerts */}\n          {saveSuccess && (\n            <div className=\"p-4 rounded-lg bg-green-500/10 border border-green-500/20 flex items-center gap-3\">\n              <CheckCircle2 className=\"w-5 h-5 text-green-500 shrink-0\" />\n              <p className=\"text-sm text-green-500\">\n                {tr('channel.settingsSaved', 'Settings saved successfully')}\n              </p>\n            </div>\n          )}\n\n          {saveError && (\n            <div className=\"p-4 rounded-lg bg-destructive/10 border border-destructive/20 flex items-center gap-3\">\n              <AlertCircle className=\"w-5 h-5 text-destructive shrink-0\" />\n              <p className=\"text-sm text-destructive\">{saveError}</p>\n            </div>\n          )}\n\n          {/* Delivery Settings */}\n          <div className=\"border rounded-lg p-6 space-y-4\">\n            <div className=\"flex items-center gap-2\">\n              <Bell className=\"w-5 h-5 text-primary\" />\n              <h2 className=\"text-lg font-semibold\">\n                {tr('channel.deliverySettings', 'Delivery Settings')}\n              </h2>\n            </div>\n\n            <div className=\"space-y-4\">\n              <div>\n                <label className=\"text-sm font-medium block mb-1\">\n                  {tr('channel.defaultPriority', 'Default Priority')}\n                </label>\n                <select\n                  value={settings.defaultPriority}\n                  onChange={(e) => updateSetting('defaultPriority', Number(e.target.value))}\n                  className=\"w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n                >\n                  <option value={0}>0 - Lowest</option>\n                  <option value={1}>1 - Low</option>\n                  <option value={2}>2 - Normal</option>\n                  <option value={3}>3 - High</option>\n                  <option value={4}>4 - Highest</option>\n                </select>\n                <p className=\"text-xs text-muted-foreground mt-1\">\n                  Priority used when creating new channels without explicit priority\n                </p>\n              </div>\n\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label className=\"text-sm font-medium block mb-1\">\n                    {tr('channel.rateLimitPerMin', 'Rate Limit (per minute)')}\n                  </label>\n                  <input\n                    type=\"number\"\n                    value={settings.rateLimitPerMinute}\n                    onChange={(e) => updateSetting('rateLimitPerMinute', Number(e.target.value))}\n                    min={1}\n                    max={1000}\n                    className=\"w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"text-sm font-medium block mb-1\">\n                    {tr('channel.rateLimitPerHour', 'Rate Limit (per hour)')}\n                  </label>\n                  <input\n                    type=\"number\"\n                    value={settings.rateLimitPerHour}\n                    onChange={(e) => updateSetting('rateLimitPerHour', Number(e.target.value))}\n                    min={1}\n                    max={50000}\n                    className=\"w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Health Check Settings */}\n          <div className=\"border rounded-lg p-6 space-y-4\">\n            <div className=\"flex items-center gap-2\">\n              <Clock className=\"w-5 h-5 text-primary\" />\n              <h2 className=\"text-lg font-semibold\">\n                {tr('channel.healthMonitoring', 'Health Monitoring')}\n              </h2>\n            </div>\n\n            <div>\n              <label className=\"text-sm font-medium block mb-1\">\n                Health Check Interval (minutes)\n              </label>\n              <select\n                value={settings.healthCheckIntervalMinutes}\n                onChange={(e) =>\n                  updateSetting('healthCheckIntervalMinutes', Number(e.target.value))\n                }\n                className=\"w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n              >\n                <option value={1}>1 minute</option>\n                <option value={5}>5 minutes</option>\n                <option value={10}>10 minutes</option>\n                <option value={15}>15 minutes</option>\n                <option value={30}>30 minutes</option>\n                <option value={60}>1 hour</option>\n              </select>\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                How often to check connection health status\n              </p>\n            </div>\n          </div>\n\n          {/* Security Settings */}\n          <div className=\"border rounded-lg p-6 space-y-4\">\n            <div className=\"flex items-center gap-2\">\n              <Shield className=\"w-5 h-5 text-primary\" />\n              <h2 className=\"text-lg font-semibold\">{tr('channel.security', 'Security')}</h2>\n            </div>\n\n            <div className=\"space-y-4\">\n              <label className=\"flex items-center justify-between p-4 rounded-lg border hover:bg-muted/50 cursor-pointer\">\n                <div>\n                  <p className=\"font-medium\">\n                    {tr('channel.webhookSignatureVerification', 'Webhook Signature Verification')}\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    Verify HMAC signatures on incoming webhooks\n                  </p>\n                </div>\n                <input\n                  type=\"checkbox\"\n                  checked={settings.enableWebhookVerification}\n                  onChange={(e) => updateSetting('enableWebhookVerification', e.target.checked)}\n                  className=\"w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary\"\n                />\n              </label>\n\n              <label className=\"flex items-center justify-between p-4 rounded-lg border hover:bg-muted/50 cursor-pointer\">\n                <div>\n                  <p className=\"font-medium\">{tr('channel.auditLogging', 'Audit Logging')}</p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    Log all channel operations for audit trail\n                  </p>\n                </div>\n                <input\n                  type=\"checkbox\"\n                  checked={settings.enableAuditLogging}\n                  onChange={(e) => updateSetting('enableAuditLogging', e.target.checked)}\n                  className=\"w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary\"\n                />\n              </label>\n\n              <div>\n                <label className=\"text-sm font-medium block mb-1\">\n                  {tr('channel.sessionTimeout', 'Session Timeout (minutes)')}\n                </label>\n                <select\n                  value={settings.sessionTimeoutMinutes}\n                  onChange={(e) => updateSetting('sessionTimeoutMinutes', Number(e.target.value))}\n                  className=\"w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n                >\n                  <option value={15}>15 minutes</option>\n                  <option value={30}>30 minutes</option>\n                  <option value={60}>1 hour</option>\n                  <option value={120}>2 hours</option>\n                  <option value={240}>4 hours</option>\n                </select>\n              </div>\n            </div>\n          </div>\n\n          {/* Data Management */}\n          <div className=\"border rounded-lg p-6 space-y-4\">\n            <div className=\"flex items-center gap-2\">\n              <Database className=\"w-5 h-5 text-primary\" />\n              <h2 className=\"text-lg font-semibold\">\n                {tr('channel.dataManagement', 'Data Management')}\n              </h2>\n            </div>\n\n            <div className=\"space-y-4\">\n              <div className=\"p-4 rounded-lg border\">\n                <div className=\"flex items-center justify-between mb-2\">\n                  <p className=\"font-medium\">\n                    {tr('channel.webhookEventRetention', 'Webhook Event Retention')}\n                  </p>\n                  <span className=\"text-sm text-muted-foreground\">7 days</span>\n                </div>\n                <p className=\"text-sm text-muted-foreground\">\n                  Incoming webhook events are automatically deleted after 7 days\n                </p>\n              </div>\n\n              <div className=\"p-4 rounded-lg border\">\n                <div className=\"flex items-center justify-between mb-2\">\n                  <p className=\"font-medium\">\n                    {tr('channel.deliveryAttemptRetention', 'Delivery Attempt Retention')}\n                  </p>\n                  <span className=\"text-sm text-muted-foreground\">7 days</span>\n                </div>\n                <p className=\"text-sm text-muted-foreground\">\n                  Successful delivery attempts are automatically deleted after 7 days\n                </p>\n              </div>\n\n              <div className=\"p-4 rounded-lg border border-yellow-500/20 bg-yellow-500/5\">\n                <div className=\"flex items-center justify-between mb-2\">\n                  <p className=\"font-medium\">\n                    {tr('channel.failedDeliveryRetention', 'Failed Delivery Retention')}\n                  </p>\n                  <span className=\"text-sm text-yellow-500\">30 days</span>\n                </div>\n                <p className=\"text-sm text-muted-foreground\">\n                  Failed delivery attempts are kept for 30 days for debugging\n                </p>\n              </div>\n            </div>\n          </div>\n\n          {/* Save Button */}\n          <div className=\"flex justify-end pt-4\">\n            <button\n              onClick={handleSave}\n              disabled={isSaving || isLoadingSettings || !!settingsLoadError}\n              className=\"px-6 py-3 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 flex items-center gap-2\"\n            >\n              {isSaving ? (\n                <Loader2 className=\"w-5 h-5 animate-spin\" />\n              ) : (\n                <Save className=\"w-5 h-5\" />\n              )}\n              {tr('channel.saveSettings', 'Save Settings')}\n            </button>\n          </div>\n        </div>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}

package/dist/channel/modules/channels/pages/ChannelUsersPage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Channel Users Page
+ *
+ * Displays user platform connections for a specific channel
+ */
+export declare function ChannelUsersPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChannelUsersPage.d.ts.map

package/dist/channel/modules/channels/pages/ChannelUsersPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelUsersPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/ChannelUsersPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA8CH,wBAAgB,gBAAgB,4CA+Q/B"}

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

@@ -0,0 +1,315 @@
+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, 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";
+//#region src/channel/modules/channels/pages/ChannelUsersPage.tsx
+var T = {
+	ONLINE: {
+		label: "Online",
+		color: "text-success-500"
+	},
+	OFFLINE: {
+		label: "Offline",
+		color: "text-muted-foreground"
+	},
+	AWAY: {
+		label: "Away",
+		color: "text-warning-500"
+	},
+	DND: {
+		label: "Do Not Disturb",
+		color: "text-error-500"
+	}
+}, E = {
+	PENDING: {
+		label: "Pending",
+		color: "text-warning-500 bg-warning-100",
+		icon: m
+	},
+	APPROVED: {
+		label: "Approved",
+		color: "text-success-500 bg-success-100",
+		icon: p
+	},
+	EXPIRED: {
+		label: "Expired",
+		color: "text-muted-foreground bg-muted",
+		icon: b
+	}
+};
+function D() {
+	let { channelId: p } = S(), m = x(), { t: D } = c(), O = (e, t) => {
+		let n = D(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 () => {
+		if (p) {
+			P(!0);
+			try {
+				I(await H(L));
+			} finally {
+				P(!1);
+			}
+		}
+	}, [
+		p,
+		H,
+		L
+	]);
+	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", {
+		className: "flex items-center justify-center min-h-screen",
+		children: /* @__PURE__ */ C(g, {
+			size: 32,
+			className: "animate-spin text-accent-primary"
+		})
+	}) : V || !z ? /* @__PURE__ */ C("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__ */ C(l, {
+					size: 20,
+					className: "text-error-500"
+				}),
+				/* @__PURE__ */ C("div", { children: /* @__PURE__ */ C("p", {
+					className: "text-sm font-medium text-error-700",
+					children: V || "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",
+					children: "Go Back"
+				})
+			]
+		})
+	}) : /* @__PURE__ */ C(n, {
+		permission: r.USER_PLATFORM_CONNECTION_READ,
+		children: /* @__PURE__ */ w("div", {
+			className: "space-y-6 p-3 sm:p-6",
+			children: [
+				/* @__PURE__ */ w("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ w("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ C("button", {
+							onClick: () => m(`/channels/${p}`),
+							className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors",
+							children: /* @__PURE__ */ C(u, { size: 20 })
+						}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("h1", {
+							className: "text-xl sm:text-2xl font-bold text-foreground",
+							children: O("channel.channelUsers", "Channel Users")
+						}), /* @__PURE__ */ w("p", {
+							className: "text-sm text-muted-foreground mt-1",
+							children: [z.name, " - User connections"]
+						})] })]
+					}), /* @__PURE__ */ w("div", {
+						className: "flex items-center gap-3",
+						children: [
+							/* @__PURE__ */ w("select", {
+								value: L,
+								onChange: (e) => R(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", {
+										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__ */ w("button", {
+								onClick: U,
+								disabled: N,
+								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(_, {
+									size: 16,
+									className: N ? "animate-spin" : ""
+								}), O("channel.refresh", "Refresh")]
+							}),
+							/* @__PURE__ */ C(n, {
+								permission: r.CHANNEL_ADMIN,
+								children: /* @__PURE__ */ w("button", {
+									onClick: () => void A(),
+									disabled: j,
+									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, {
+										size: 16,
+										className: "animate-spin"
+									}) : /* @__PURE__ */ C(h, { size: 16 }), O("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, {
+						size: 20,
+						className: "text-error-500"
+					}), /* @__PURE__ */ C("p", {
+						className: "text-sm text-error-700 flex-1",
+						children: M
+					})]
+				}),
+				/* @__PURE__ */ C("div", {
+					className: "p-4 bg-surface border border-border rounded-lg",
+					children: /* @__PURE__ */ C("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", {
+					className: "bg-surface border border-border rounded-lg overflow-hidden",
+					children: /* @__PURE__ */ C("div", {
+						className: "overflow-x-auto min-w-full",
+						children: /* @__PURE__ */ w("table", {
+							className: "w-full min-w-[800px]",
+							children: [/* @__PURE__ */ C("thead", {
+								className: "bg-muted/50 border-b border-border",
+								children: /* @__PURE__ */ w("tr", { children: [
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: O("channel.user", "User")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: O("channel.platformId", "Platform ID")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: O("channel.source", "Source")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: O("channel.status", "Status")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: O("channel.pairing", "Pairing")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: O("channel.notifications", "Notifications")
+									}),
+									/* @__PURE__ */ C("th", {
+										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: O("channel.dmAllowed", "DM Allowed")
+									})
+								] })
+							}), /* @__PURE__ */ C("tbody", {
+								className: "divide-y divide-border",
+								children: F.length === 0 ? /* @__PURE__ */ C("tr", { children: /* @__PURE__ */ C("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", {
+										className: "hover:bg-muted/30 transition-colors",
+										children: [
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3",
+												children: /* @__PURE__ */ w("div", {
+													className: "flex items-center gap-3",
+													children: [/* @__PURE__ */ C("div", {
+														className: "w-8 h-8 bg-accent-primary/10 rounded-full flex items-center justify-center",
+														children: /* @__PURE__ */ C(v, {
+															size: 16,
+															className: "text-accent-primary"
+														})
+													}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+														className: "text-sm font-medium text-foreground",
+														children: e.externalDisplayName || "Unknown"
+													}), e.externalUsername && /* @__PURE__ */ C("p", {
+														className: "text-xs text-muted-foreground",
+														children: e.externalUsername
+													})] })]
+												})
+											}),
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3 text-sm font-mono text-muted-foreground",
+												children: e.externalUserId
+											}),
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3",
+												children: /* @__PURE__ */ C("span", {
+													className: "text-xs text-muted-foreground bg-muted px-2 py-1 rounded",
+													children: e.source
+												})
+											}),
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3",
+												children: /* @__PURE__ */ w("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", {
+														className: `text-sm ${t.color}`,
+														children: t.label
+													})]
+												})
+											}),
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3",
+												children: e.pairingStatus && n ? /* @__PURE__ */ w("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", {
+													className: "text-xs text-muted-foreground",
+													children: "-"
+												})
+											}),
+											/* @__PURE__ */ C("td", {
+												className: "px-4 py-3",
+												children: e.notificationsEnabled ? /* @__PURE__ */ C(d, {
+													size: 16,
+													className: "text-success-500"
+												}) : /* @__PURE__ */ C(f, {
+													size: 16,
+													className: "text-muted-foreground"
+												})
+											}),
+											/* @__PURE__ */ C("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", {
+													className: "inline-flex items-center gap-1 text-sm text-muted-foreground",
+													children: [/* @__PURE__ */ C(b, { size: 16 }), O("channel.blocked", "Blocked")]
+												})
+											})
+										]
+									}, e.id);
+								})
+							})]
+						})
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { D as ChannelUsersPage };
+
+//# sourceMappingURL=ChannelUsersPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelUsersPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/ChannelUsersPage.tsx"],"sourcesContent":["/**\n * Channel Users Page\n *\n * Displays user platform connections for a specific channel\n */\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  ArrowLeft,\n  Loader2,\n  AlertCircle,\n  CheckCircle2,\n  XCircle,\n  Clock,\n  User,\n  UserCheck,\n  Bell,\n  BellOff,\n  RefreshCw,\n  Download,\n} from 'lucide-react';\nimport {\n  useChannel,\n  type UserPlatformConnection,\n  type UserPresenceStatus,\n  type PairingStatus,\n} from '../../../hooks/useChannels';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\nimport { useExportChannelUsers } from '../hooks/useExport';\n\nconst PRESENCE_CONFIG: Record<UserPresenceStatus, { label: string; color: string }> = {\n  ONLINE: { label: 'Online', color: 'text-success-500' },\n  OFFLINE: { label: 'Offline', color: 'text-muted-foreground' },\n  AWAY: { label: 'Away', color: 'text-warning-500' },\n  DND: { label: 'Do Not Disturb', color: 'text-error-500' },\n};\n\nconst PAIRING_CONFIG: Record<\n  PairingStatus,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  PENDING: { label: 'Pending', color: 'text-warning-500 bg-warning-100', icon: Clock },\n  APPROVED: { label: 'Approved', color: 'text-success-500 bg-success-100', icon: CheckCircle2 },\n  EXPIRED: { label: 'Expired', color: 'text-muted-foreground bg-muted', icon: XCircle },\n};\n\nexport function ChannelUsersPage() {\n  const { channelId } = useParams<{ channelId: string }>();\n  const navigate = useNavigate();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const { organizationId } = useChannelContext();\n  const {\n    triggerExport: exportUsers,\n    isExporting: isExportingUsers,\n    exportError: exportUsersError,\n  } = useExportChannelUsers(organizationId ?? undefined, channelId);\n  const [isLoadingUsers, setIsLoadingUsers] = useState(true);\n  const [users, setUsers] = useState<UserPlatformConnection[]>([]);\n  const [limit, setLimit] = useState(25);\n\n  const { channel, isLoading, error, fetchUserPlatformConnections } = useChannel(channelId);\n\n  const loadUsers = useCallback(async () => {\n    if (!channelId) return;\n    setIsLoadingUsers(true);\n    try {\n      const data = await fetchUserPlatformConnections(limit);\n      setUsers(data);\n    } finally {\n      setIsLoadingUsers(false);\n    }\n  }, [channelId, fetchUserPlatformConnections, limit]);\n\n  useEffect(() => {\n    void Promise.resolve().then(() => loadUsers());\n  }, [loadUsers]);\n\n  const getPresenceConfig = (status: UserPresenceStatus) => {\n    return PRESENCE_CONFIG[status] || PRESENCE_CONFIG.OFFLINE;\n  };\n\n  const getPairingConfig = (status: PairingStatus) => {\n    return PAIRING_CONFIG[status] || PAIRING_CONFIG.EXPIRED;\n  };\n\n  // Loading state\n  if (isLoading || isLoadingUsers) {\n    return (\n      <div className=\"flex items-center justify-center min-h-screen\">\n        <Loader2 size={32} className=\"animate-spin text-accent-primary\" />\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !channel) {\n    return (\n      <div className=\"p-6\">\n        <div className=\"flex items-center gap-3 p-4 bg-error-100 border border-error-500 rounded-lg\">\n          <AlertCircle size={20} className=\"text-error-500\" />\n          <div>\n            <p className=\"text-sm font-medium text-error-700\">{error || 'Channel not found'}</p>\n          </div>\n          <button\n            onClick={() => navigate(`/channels/${channelId}`)}\n            className=\"ml-auto px-3 py-1 text-sm text-error-700 hover:bg-error-200 rounded transition-colors\"\n          >\n            Go Back\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.USER_PLATFORM_CONNECTION_READ}>\n      <div className=\"space-y-6 p-3 sm:p-6\">\n        {/* Header */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <button\n              onClick={() => navigate(`/channels/${channelId}`)}\n              className=\"p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors\"\n            >\n              <ArrowLeft size={20} />\n            </button>\n            <div>\n              <h1 className=\"text-xl sm:text-2xl font-bold text-foreground\">\n                {tr('channel.channelUsers', 'Channel Users')}\n              </h1>\n              <p className=\"text-sm text-muted-foreground mt-1\">\n                {channel.name} - User connections\n              </p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <select\n              value={limit}\n              onChange={(e) => setLimit(Number(e.target.value))}\n              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\"\n            >\n              <option value={10}>10 results</option>\n              <option value={25}>25 results</option>\n              <option value={50}>50 results</option>\n              <option value={100}>100 results</option>\n            </select>\n            <button\n              onClick={loadUsers}\n              disabled={isLoadingUsers}\n              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\"\n            >\n              <RefreshCw size={16} className={isLoadingUsers ? 'animate-spin' : ''} />\n              {tr('channel.refresh', 'Refresh')}\n            </button>\n            <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_ADMIN}>\n              <button\n                onClick={() => void exportUsers()}\n                disabled={isExportingUsers}\n                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\"\n                title={tr('channel.exportCSV', 'Export to CSV')}\n              >\n                {isExportingUsers ? (\n                  <Loader2 size={16} className=\"animate-spin\" />\n                ) : (\n                  <Download size={16} />\n                )}\n                {tr('channel.export', 'Export')}\n              </button>\n            </PermissionGuard>\n          </div>\n        </div>\n\n        {/* Export Error Banner */}\n        {exportUsersError && (\n          <div className=\"p-4 bg-error-100 border border-error-500 rounded-lg flex items-center gap-3\">\n            <AlertCircle size={20} className=\"text-error-500\" />\n            <p className=\"text-sm text-error-700 flex-1\">{exportUsersError}</p>\n          </div>\n        )}\n\n        {/* Info Banner */}\n        <div className=\"p-4 bg-surface border border-border rounded-lg\">\n          <p className=\"text-sm text-muted-foreground\">\n            Users connected to this channel through OAuth or pairing. Manage notification\n            preferences and DM authorization here.\n          </p>\n        </div>\n\n        {/* Users List */}\n        <div className=\"bg-surface border border-border rounded-lg overflow-hidden\">\n          <div className=\"overflow-x-auto min-w-full\">\n            <table className=\"w-full min-w-[800px]\">\n              <thead className=\"bg-muted/50 border-b border-border\">\n                <tr>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.user', 'User')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.platformId', 'Platform ID')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.source', 'Source')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.status', 'Status')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.pairing', 'Pairing')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.notifications', 'Notifications')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.dmAllowed', 'DM Allowed')}\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-y divide-border\">\n                {users.length === 0 ? (\n                  <tr>\n                    <td colSpan={7} className=\"px-4 py-8 text-center text-muted-foreground\">\n                      {tr('channel.noUsersConnected', 'No users connected to this channel')}\n                    </td>\n                  </tr>\n                ) : (\n                  users.map((user) => {\n                    const presenceConfig = getPresenceConfig(\n                      user.presenceStatus as UserPresenceStatus\n                    );\n                    const pairingConfig = user.pairingStatus\n                      ? getPairingConfig(user.pairingStatus as PairingStatus)\n                      : null;\n                    const PairingIcon = pairingConfig?.icon ?? XCircle;\n                    return (\n                      <tr key={user.id} className=\"hover:bg-muted/30 transition-colors\">\n                        <td className=\"px-4 py-3\">\n                          <div className=\"flex items-center gap-3\">\n                            <div className=\"w-8 h-8 bg-accent-primary/10 rounded-full flex items-center justify-center\">\n                              <User size={16} className=\"text-accent-primary\" />\n                            </div>\n                            <div>\n                              <p className=\"text-sm font-medium text-foreground\">\n                                {user.externalDisplayName || 'Unknown'}\n                              </p>\n                              {user.externalUsername && (\n                                <p className=\"text-xs text-muted-foreground\">\n                                  {user.externalUsername}\n                                </p>\n                              )}\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"px-4 py-3 text-sm font-mono text-muted-foreground\">\n                          {user.externalUserId}\n                        </td>\n                        <td className=\"px-4 py-3\">\n                          <span className=\"text-xs text-muted-foreground bg-muted px-2 py-1 rounded\">\n                            {user.source}\n                          </span>\n                        </td>\n                        <td className=\"px-4 py-3\">\n                          <div className=\"flex items-center gap-2\">\n                            <span\n                              className={`w-2 h-2 rounded-full ${presenceConfig.color.replace('text-', 'bg-')}`}\n                            />\n                            <span className={`text-sm ${presenceConfig.color}`}>\n                              {presenceConfig.label}\n                            </span>\n                          </div>\n                        </td>\n                        <td className=\"px-4 py-3\">\n                          {user.pairingStatus && pairingConfig ? (\n                            <span\n                              className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded ${pairingConfig.color}`}\n                            >\n                              <PairingIcon size={12} />\n                              {pairingConfig.label}\n                            </span>\n                          ) : (\n                            <span className=\"text-xs text-muted-foreground\">-</span>\n                          )}\n                        </td>\n                        <td className=\"px-4 py-3\">\n                          {user.notificationsEnabled ? (\n                            <Bell size={16} className=\"text-success-500\" />\n                          ) : (\n                            <BellOff size={16} className=\"text-muted-foreground\" />\n                          )}\n                        </td>\n                        <td className=\"px-4 py-3\">\n                          {user.dmAllowed ? (\n                            <span className=\"inline-flex items-center gap-1 text-sm text-success-500\">\n                              <UserCheck size={16} />\n                              {tr('channel.allowed', 'Allowed')}\n                            </span>\n                          ) : (\n                            <span className=\"inline-flex items-center gap-1 text-sm text-muted-foreground\">\n                              <XCircle size={16} />\n                              {tr('channel.blocked', 'Blocked')}\n                            </span>\n                          )}\n                        </td>\n                      </tr>\n                    );\n                  })\n                )}\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}

package/dist/channel/modules/channels/pages/ChannelsListPage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Channels List Page
+ *
+ * Displays a list of all channels with CRUD operations
+ */
+export declare function ChannelsListPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChannelsListPage.d.ts.map

package/dist/channel/modules/channels/pages/ChannelsListPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelsListPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/ChannelsListPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA4EH,wBAAgB,gBAAgB,4CA4oB/B"}