@burdenoff/microfe-channel 2026.608.1 → 2026.624.1

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

@@ -1 +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  const saveSuccessTimerRef = useRef<ReturnType<typeof setTimeout> | 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  useEffect(() => {\n    const timerRef = saveSuccessTimerRef;\n    return () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    };\n  }, []);\n\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    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        if (saveSuccessTimerRef.current) clearTimeout(saveSuccessTimerRef.current);\n        saveSuccessTimerRef.current = 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                  type=\"button\"\n                  onClick={() => navigate('./list')}\n                  className=\"p-2 hover:bg-muted rounded-lg transition-colors\"\n                >\n                  <ArrowLeft className=\"size-5 \" />\n                </button>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"p-2 bg-primary/10 rounded-lg\">\n                    <Settings className=\"size-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=\"size-4 animate-spin\" />\n              <span className=\"text-sm\">Loading settings…</span>\n            </div>\n          )}\n\n          {/* Settings load error */}\n          {settingsLoadError && (\n            <div className=\"p-4 rounded-lg bg-status-error-bg-subtle border border-status-error-border flex items-center gap-3\">\n              <AlertCircle className=\"size-5 text-status-error-text shrink-0\" />\n              <p className=\"text-sm text-status-error-text\">\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-status-success-bg-subtle border border-status-success-border flex items-center gap-3\">\n              <CheckCircle2 className=\"size-5 text-status-success-text shrink-0\" />\n              <p className=\"text-sm text-status-success-text\">\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=\"size-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=\"size-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\n                    htmlFor=\"channel-settings-rate-limit-min\"\n                    className=\"text-sm font-medium block mb-1\"\n                  >\n                    {tr('channel.rateLimitPerMin', 'Rate Limit (per minute)')}\n                  </label>\n                  <input\n                    id=\"channel-settings-rate-limit-min\"\n                    aria-label={tr('channel.rateLimitPerMin', 'Rate Limit (per minute)')}\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\n                    htmlFor=\"channel-settings-rate-limit-hour\"\n                    className=\"text-sm font-medium block mb-1\"\n                  >\n                    {tr('channel.rateLimitPerHour', 'Rate Limit (per hour)')}\n                  </label>\n                  <input\n                    id=\"channel-settings-rate-limit-hour\"\n                    aria-label={tr('channel.rateLimitPerHour', 'Rate Limit (per hour)')}\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=\"size-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\n                htmlFor=\"channel-settings-health-interval\"\n                className=\"text-sm font-medium block mb-1\"\n              >\n                Health Check Interval (minutes)\n              </label>\n              <select\n                id=\"channel-settings-health-interval\"\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=\"size-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                  aria-label={tr(\n                    'channel.webhookSignatureVerification',\n                    'Webhook Signature Verification'\n                  )}\n                  checked={settings.enableWebhookVerification}\n                  onChange={(e) => updateSetting('enableWebhookVerification', e.target.checked)}\n                  className=\"size-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                  aria-label={tr('channel.auditLogging', 'Audit Logging')}\n                  checked={settings.enableAuditLogging}\n                  onChange={(e) => updateSetting('enableAuditLogging', e.target.checked)}\n                  className=\"size-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=\"size-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-status-warning-border bg-status-warning-bg-subtle\">\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-status-warning-text\">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              type=\"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=\"size-5 animate-spin\" />\n              ) : (\n                <Save className=\"size-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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"}
+{"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  const saveSuccessTimerRef = useRef<ReturnType<typeof setTimeout> | 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  useEffect(() => {\n    const timerRef = saveSuccessTimerRef;\n    return () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    };\n  }, []);\n\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    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        if (saveSuccessTimerRef.current) clearTimeout(saveSuccessTimerRef.current);\n        saveSuccessTimerRef.current = 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-bg-surface\">\n        {/* Header */}\n        <div className=\"border-b bg-bg-surface\">\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                  type=\"button\"\n                  onClick={() => navigate('./list')}\n                  className=\"p-2 hover:bg-bg-sunken rounded-lg transition-colors\"\n                >\n                  <ArrowLeft className=\"size-5 \" />\n                </button>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"p-2 bg-action-primary-bg/10 rounded-lg\">\n                    <Settings className=\"size-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-text-secondary\">\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-text-secondary\">\n              <Loader2 className=\"size-4 animate-spin\" />\n              <span className=\"text-sm\">Loading settings…</span>\n            </div>\n          )}\n\n          {/* Settings load error */}\n          {settingsLoadError && (\n            <div className=\"p-4 rounded-lg bg-status-error-bg-subtle border border-status-error-border flex items-center gap-3\">\n              <AlertCircle className=\"size-5 text-status-error-text shrink-0\" />\n              <p className=\"text-sm text-status-error-text\">\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-status-success-bg-subtle border border-status-success-border flex items-center gap-3\">\n              <CheckCircle2 className=\"size-5 text-status-success-text shrink-0\" />\n              <p className=\"text-sm text-status-success-text\">\n                {tr('channel.settingsSaved', 'Settings saved successfully')}\n              </p>\n            </div>\n          )}\n\n          {saveError && (\n            <div className=\"p-4 rounded-lg bg-status-error-bg/10 border border-status-error-border/20 flex items-center gap-3\">\n              <AlertCircle className=\"size-5 text-status-error-text shrink-0\" />\n              <p className=\"text-sm text-status-error-text\">{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=\"size-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-bg-surface 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-text-secondary 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\n                    htmlFor=\"channel-settings-rate-limit-min\"\n                    className=\"text-sm font-medium block mb-1\"\n                  >\n                    {tr('channel.rateLimitPerMin', 'Rate Limit (per minute)')}\n                  </label>\n                  <input\n                    id=\"channel-settings-rate-limit-min\"\n                    aria-label={tr('channel.rateLimitPerMin', 'Rate Limit (per minute)')}\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-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor=\"channel-settings-rate-limit-hour\"\n                    className=\"text-sm font-medium block mb-1\"\n                  >\n                    {tr('channel.rateLimitPerHour', 'Rate Limit (per hour)')}\n                  </label>\n                  <input\n                    id=\"channel-settings-rate-limit-hour\"\n                    aria-label={tr('channel.rateLimitPerHour', 'Rate Limit (per hour)')}\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-bg-surface 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=\"size-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\n                htmlFor=\"channel-settings-health-interval\"\n                className=\"text-sm font-medium block mb-1\"\n              >\n                Health Check Interval (minutes)\n              </label>\n              <select\n                id=\"channel-settings-health-interval\"\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-bg-surface 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-text-secondary 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=\"size-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-bg-sunken/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-text-secondary\">\n                    Verify HMAC signatures on incoming webhooks\n                  </p>\n                </div>\n                <input\n                  type=\"checkbox\"\n                  aria-label={tr(\n                    'channel.webhookSignatureVerification',\n                    'Webhook Signature Verification'\n                  )}\n                  checked={settings.enableWebhookVerification}\n                  onChange={(e) => updateSetting('enableWebhookVerification', e.target.checked)}\n                  className=\"size-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-bg-sunken/50 cursor-pointer\">\n                <div>\n                  <p className=\"font-medium\">{tr('channel.auditLogging', 'Audit Logging')}</p>\n                  <p className=\"text-sm text-text-secondary\">\n                    Log all channel operations for audit trail\n                  </p>\n                </div>\n                <input\n                  type=\"checkbox\"\n                  aria-label={tr('channel.auditLogging', 'Audit Logging')}\n                  checked={settings.enableAuditLogging}\n                  onChange={(e) => updateSetting('enableAuditLogging', e.target.checked)}\n                  className=\"size-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-bg-surface 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=\"size-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-text-secondary\">7 days</span>\n                </div>\n                <p className=\"text-sm text-text-secondary\">\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-text-secondary\">7 days</span>\n                </div>\n                <p className=\"text-sm text-text-secondary\">\n                  Successful delivery attempts are automatically deleted after 7 days\n                </p>\n              </div>\n\n              <div className=\"p-4 rounded-lg border border-status-warning-border bg-status-warning-bg-subtle\">\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-status-warning-text\">30 days</span>\n                </div>\n                <p className=\"text-sm text-text-secondary\">\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              type=\"button\"\n              onClick={handleSave}\n              disabled={isSaving || isLoadingSettings || !!settingsLoadError}\n              className=\"px-6 py-3 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50 flex items-center gap-2\"\n            >\n              {isSaving ? (\n                <Loader2 className=\"size-5 animate-spin\" />\n              ) : (\n                <Save className=\"size-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.js

@@ -16,7 +16,7 @@ var O = {
 	},
 	OFFLINE: {
 		label: "Offline",
-		color: "text-muted-foreground"
+		color: "text-text-secondary"
 	},
 	AWAY: {
 		label: "Away",
@@ -39,7 +39,7 @@ var O = {
 	},
 	EXPIRED: {
 		label: "Expired",
-		color: "text-muted-foreground bg-muted",
+		color: "text-text-secondary bg-bg-sunken",
 		icon: S
 	}
 };
@@ -120,16 +120,16 @@ function A() {
 							type: "button",
 							onClick: () => g(`/channels/${m}`),
 							"aria-label": j("channel.backToChannel", "Back to channel"),
-							className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors",
+							className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors",
 							children: /* @__PURE__ */ E(d, {
 								size: 20,
 								"aria-hidden": "true"
 							})
 						}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("h1", {
-							className: "text-xl sm:text-2xl font-bold text-foreground",
+							className: "text-xl sm:text-2xl font-bold text-text-primary",
 							children: j("channel.channelUsers", "Channel Users")
 						}), /* @__PURE__ */ D("p", {
-							className: "text-sm text-muted-foreground mt-1",
+							className: "text-sm text-text-secondary mt-1",
 							children: [G.name, " - User connections"]
 						})] })]
 					}), /* @__PURE__ */ D("div", {
@@ -138,7 +138,7 @@ function A() {
 							/* @__PURE__ */ D("select", {
 								value: z,
 								onChange: (e) => B(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",
+								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__ */ E("option", {
 										value: 10,
@@ -162,7 +162,7 @@ function A() {
 								type: "button",
 								onClick: () => void Y(U),
 								disabled: F,
-								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",
+								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__ */ E(y, {
 									size: 16,
 									className: F ? "animate-spin" : ""
@@ -174,7 +174,7 @@ function A() {
 									type: "button",
 									onClick: () => void te(),
 									disabled: 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",
+									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: j("channel.exportCSV", "Export to CSV"),
 									children: [N ? /* @__PURE__ */ E(v, {
 										size: 16,
@@ -196,47 +196,47 @@ function A() {
 					})]
 				}),
 				/* @__PURE__ */ E("div", {
-					className: "p-4 bg-surface border border-border rounded-lg",
+					className: "p-4 bg-surface border border-border-subtle rounded-lg",
 					children: /* @__PURE__ */ E("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: "Users connected to this channel through OAuth or pairing. Manage notification preferences and DM authorization here."
 					})
 				}),
 				/* @__PURE__ */ E("div", {
-					className: "bg-surface border border-border rounded-lg overflow-hidden",
+					className: "bg-surface border border-border-subtle rounded-lg overflow-hidden",
 					children: /* @__PURE__ */ E("div", {
 						className: "overflow-x-auto min-w-full",
 						children: /* @__PURE__ */ D("table", {
 							className: "w-full min-w-[800px]",
 							children: [/* @__PURE__ */ E("thead", {
-								className: "bg-muted/50 border-b border-border",
+								className: "bg-bg-sunken/50 border-b border-border-subtle",
 								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",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: j("channel.user", "User")
 									}),
 									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: j("channel.platformId", "Platform ID")
 									}),
 									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: j("channel.source", "Source")
 									}),
 									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: j("channel.status", "Status")
 									}),
 									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: j("channel.pairing", "Pairing")
 									}),
 									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: j("channel.notifications", "Notifications")
 									}),
 									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: j("channel.dmAllowed", "DM Allowed")
 									})
 								] })
@@ -244,12 +244,12 @@ function A() {
 								className: "divide-y divide-border",
 								children: L.length === 0 ? /* @__PURE__ */ E("tr", { children: /* @__PURE__ */ E("td", {
 									colSpan: 7,
-									className: "px-4 py-8 text-center text-muted-foreground",
+									className: "px-4 py-8 text-center text-text-secondary",
 									children: j("channel.noUsersConnected", "No users connected to this channel")
 								}) }) : L.map((e) => {
 									let t = ie(e.presenceStatus), n = e.pairingStatus ? ae(e.pairingStatus) : null, r = n?.icon ?? S;
 									return /* @__PURE__ */ D("tr", {
-										className: "hover:bg-muted/30 transition-colors",
+										className: "hover:bg-bg-sunken/30 transition-colors",
 										children: [
 											/* @__PURE__ */ E("td", {
 												className: "px-4 py-3",
@@ -262,22 +262,22 @@ function A() {
 															className: "text-accent-primary"
 														})
 													}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
-														className: "text-sm font-medium text-foreground",
+														className: "text-sm font-medium text-text-primary",
 														children: e.externalDisplayName || "Unknown"
 													}), e.externalUsername && /* @__PURE__ */ E("p", {
-														className: "text-xs text-muted-foreground",
+														className: "text-xs text-text-secondary",
 														children: e.externalUsername
 													})] })]
 												})
 											}),
 											/* @__PURE__ */ E("td", {
-												className: "px-4 py-3 text-sm font-mono text-muted-foreground",
+												className: "px-4 py-3 text-sm font-mono text-text-secondary",
 												children: e.externalUserId
 											}),
 											/* @__PURE__ */ E("td", {
 												className: "px-4 py-3",
 												children: /* @__PURE__ */ E("span", {
-													className: "text-xs text-muted-foreground bg-muted px-2 py-1 rounded",
+													className: "text-xs text-text-secondary bg-bg-sunken px-2 py-1 rounded",
 													children: e.source
 												})
 											}),
@@ -297,7 +297,7 @@ function A() {
 													className: `inline-flex items-center gap-1 text-xs px-2 py-1 rounded ${n.color}`,
 													children: [/* @__PURE__ */ E(r, { size: 12 }), n.label]
 												}) : /* @__PURE__ */ E("span", {
-													className: "text-xs text-muted-foreground",
+													className: "text-xs text-text-secondary",
 													children: "-"
 												})
 											}),
@@ -317,7 +317,7 @@ function A() {
 													className: "inline-flex items-center gap-1",
 													children: [/* @__PURE__ */ E(p, {
 														size: 16,
-														className: "text-muted-foreground",
+														className: "text-text-secondary",
 														"aria-hidden": "true"
 													}), /* @__PURE__ */ E("span", {
 														className: "sr-only",
@@ -331,7 +331,7 @@ function A() {
 													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",
+													className: "inline-flex items-center gap-1 text-sm text-text-secondary",
 													children: [/* @__PURE__ */ E(S, { size: 16 }), j("channel.blocked", "Blocked")]
 												})
 											})
@@ -345,7 +345,7 @@ function A() {
 				/* @__PURE__ */ D("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ E("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: V > 0 && /* @__PURE__ */ D(T, { children: [
 							j("channel.showing", "Showing"),
 							" ",
@@ -372,11 +372,11 @@ function A() {
 								type: "button",
 								onClick: () => W((e) => Math.max(0, e - 1)),
 								disabled: !ne || F,
-								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",
+								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__ */ E(ee, { size: 16 }), j("channel.previous", "Previous")]
 							}),
 							/* @__PURE__ */ D("span", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-secondary",
 								children: [
 									U + 1,
 									" / ",
@@ -387,7 +387,7 @@ function A() {
 								type: "button",
 								onClick: () => W((e) => Math.min($ - 1, e + 1)),
 								disabled: !re || F,
-								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",
+								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: [j("channel.next", "Next"), /* @__PURE__ */ E(h, { size: 16 })]
 							})
 						]

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

@@ -1 +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, useRef } 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  ChevronLeft,\n  ChevronRight,\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-status-success-text' },\n  OFFLINE: { label: 'Offline', color: 'text-muted-foreground' },\n  AWAY: { label: 'Away', color: 'text-status-warning-text' },\n  DND: { label: 'Do Not Disturb', color: 'text-status-error-text' },\n};\n\nconst PAIRING_CONFIG: Record<\n  PairingStatus,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  PENDING: {\n    label: 'Pending',\n    color: 'text-status-warning-text bg-status-warning-bg-subtle',\n    icon: Clock,\n  },\n  APPROVED: {\n    label: 'Approved',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\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  const [total, setTotal] = useState(0);\n  const [currentPage, setCurrentPage] = useState(0);\n\n  const { channel, isLoading, error, fetchUserPlatformConnections } = useChannel(channelId);\n\n  const loadUsers = useCallback(\n    async (page: number = 0) => {\n      if (!channelId) return;\n      setIsLoadingUsers(true);\n      try {\n        const result = await fetchUserPlatformConnections(limit, page * limit);\n        setUsers(result.items);\n        setTotal(result.total);\n      } finally {\n        setIsLoadingUsers(false);\n      }\n    },\n    [channelId, fetchUserPlatformConnections, limit]\n  );\n\n  const loadUsersRef = useRef(loadUsers);\n  useEffect(() => {\n    loadUsersRef.current = loadUsers;\n  });\n  const isFirstPageRender = useRef(true);\n  // Prevents the [currentPage] effect from double-loading when limit changes\n  // reset the page back to 0 (the [limit] effect already handles that load).\n  const limitChangingRef = useRef(false);\n\n  useEffect(() => {\n    void Promise.resolve().then(() => {\n      // Set the guard before resetting page so the [currentPage] effect skips\n      // the redundant load that would otherwise fire when page resets to 0.\n      limitChangingRef.current = true;\n      setCurrentPage(0);\n      void loadUsersRef.current(0).finally(() => {\n        limitChangingRef.current = false;\n      });\n    });\n  }, [limit]);\n\n  useEffect(() => {\n    if (isFirstPageRender.current) {\n      isFirstPageRender.current = false;\n      return;\n    }\n    if (limitChangingRef.current) return;\n    void Promise.resolve().then(() => loadUsersRef.current(currentPage));\n  }, [currentPage]);\n\n  const totalPages = Math.max(1, Math.ceil(total / limit));\n  const hasPrevPage = currentPage > 0;\n  const hasNextPage = currentPage < totalPages - 1;\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 (only full-screen for initial channel load)\n  if (isLoading) {\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-status-error-bg-subtle border border-status-error-border rounded-lg\">\n          <AlertCircle size={20} className=\"text-status-error-text\" />\n          <div>\n            <p className=\"text-sm font-medium text-status-error-text\">\n              {error || 'Channel not found'}\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => navigate(`/channels/${channelId}`)}\n            className=\"ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle 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              type=\"button\"\n              onClick={() => navigate(`/channels/${channelId}`)}\n              aria-label={tr('channel.backToChannel', 'Back to channel')}\n              className=\"p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors\"\n            >\n              <ArrowLeft size={20} aria-hidden=\"true\" />\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              type=\"button\"\n              onClick={() => void loadUsers(currentPage)}\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_USER_EXPORT}>\n              <button\n                type=\"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-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3\">\n            <AlertCircle size={20} className=\"text-status-error-text\" />\n            <p className=\"text-sm text-status-error-text 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=\"size-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                            <span className=\"inline-flex items-center gap-1\">\n                              <Bell\n                                size={16}\n                                className=\"text-status-success-text\"\n                                aria-hidden=\"true\"\n                              />\n                              <span className=\"sr-only\">{tr('channel.enabled', 'Enabled')}</span>\n                            </span>\n                          ) : (\n                            <span className=\"inline-flex items-center gap-1\">\n                              <BellOff\n                                size={16}\n                                className=\"text-muted-foreground\"\n                                aria-hidden=\"true\"\n                              />\n                              <span className=\"sr-only\">{tr('channel.disabled', 'Disabled')}</span>\n                            </span>\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-status-success-text\">\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\n        {/* Pagination footer */}\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-sm text-muted-foreground\">\n            {total > 0 && (\n              <>\n                {tr('channel.showing', 'Showing')}{' '}\n                <span className=\"font-medium\">\n                  {currentPage * limit + 1}–{Math.min((currentPage + 1) * limit, total)}\n                </span>{' '}\n                {tr('channel.of', 'of')} <span className=\"font-medium\">{total}</span>\n              </>\n            )}\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}\n              disabled={!hasPrevPage || isLoadingUsers}\n              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\"\n            >\n              <ChevronLeft size={16} />\n              {tr('channel.previous', 'Previous')}\n            </button>\n            <span className=\"text-sm text-muted-foreground\">\n              {currentPage + 1} / {totalPages}\n            </span>\n            <button\n              type=\"button\"\n              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}\n              disabled={!hasNextPage || isLoadingUsers}\n              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\"\n            >\n              {tr('channel.next', 'Next')}\n              <ChevronRight size={16} />\n            </button>\n          </div>\n        </div>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"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, useRef } 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  ChevronLeft,\n  ChevronRight,\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-status-success-text' },\n  OFFLINE: { label: 'Offline', color: 'text-text-secondary' },\n  AWAY: { label: 'Away', color: 'text-status-warning-text' },\n  DND: { label: 'Do Not Disturb', color: 'text-status-error-text' },\n};\n\nconst PAIRING_CONFIG: Record<\n  PairingStatus,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  PENDING: {\n    label: 'Pending',\n    color: 'text-status-warning-text bg-status-warning-bg-subtle',\n    icon: Clock,\n  },\n  APPROVED: {\n    label: 'Approved',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n  EXPIRED: { label: 'Expired', color: 'text-text-secondary bg-bg-sunken', 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  const [total, setTotal] = useState(0);\n  const [currentPage, setCurrentPage] = useState(0);\n\n  const { channel, isLoading, error, fetchUserPlatformConnections } = useChannel(channelId);\n\n  const loadUsers = useCallback(\n    async (page: number = 0) => {\n      if (!channelId) return;\n      setIsLoadingUsers(true);\n      try {\n        const result = await fetchUserPlatformConnections(limit, page * limit);\n        setUsers(result.items);\n        setTotal(result.total);\n      } finally {\n        setIsLoadingUsers(false);\n      }\n    },\n    [channelId, fetchUserPlatformConnections, limit]\n  );\n\n  const loadUsersRef = useRef(loadUsers);\n  useEffect(() => {\n    loadUsersRef.current = loadUsers;\n  });\n  const isFirstPageRender = useRef(true);\n  // Prevents the [currentPage] effect from double-loading when limit changes\n  // reset the page back to 0 (the [limit] effect already handles that load).\n  const limitChangingRef = useRef(false);\n\n  useEffect(() => {\n    void Promise.resolve().then(() => {\n      // Set the guard before resetting page so the [currentPage] effect skips\n      // the redundant load that would otherwise fire when page resets to 0.\n      limitChangingRef.current = true;\n      setCurrentPage(0);\n      void loadUsersRef.current(0).finally(() => {\n        limitChangingRef.current = false;\n      });\n    });\n  }, [limit]);\n\n  useEffect(() => {\n    if (isFirstPageRender.current) {\n      isFirstPageRender.current = false;\n      return;\n    }\n    if (limitChangingRef.current) return;\n    void Promise.resolve().then(() => loadUsersRef.current(currentPage));\n  }, [currentPage]);\n\n  const totalPages = Math.max(1, Math.ceil(total / limit));\n  const hasPrevPage = currentPage > 0;\n  const hasNextPage = currentPage < totalPages - 1;\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 (only full-screen for initial channel load)\n  if (isLoading) {\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-status-error-bg-subtle border border-status-error-border rounded-lg\">\n          <AlertCircle size={20} className=\"text-status-error-text\" />\n          <div>\n            <p className=\"text-sm font-medium text-status-error-text\">\n              {error || 'Channel not found'}\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => navigate(`/channels/${channelId}`)}\n            className=\"ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle 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              type=\"button\"\n              onClick={() => navigate(`/channels/${channelId}`)}\n              aria-label={tr('channel.backToChannel', 'Back to channel')}\n              className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors\"\n            >\n              <ArrowLeft size={20} aria-hidden=\"true\" />\n            </button>\n            <div>\n              <h1 className=\"text-xl sm:text-2xl font-bold text-text-primary\">\n                {tr('channel.channelUsers', 'Channel Users')}\n              </h1>\n              <p className=\"text-sm text-text-secondary 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-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-primary/50 text-text-primary\"\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              type=\"button\"\n              onClick={() => void loadUsers(currentPage)}\n              disabled={isLoadingUsers}\n              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\"\n            >\n              <RefreshCw size={16} className={isLoadingUsers ? 'animate-spin' : ''} />\n              {tr('channel.refresh', 'Refresh')}\n            </button>\n            <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_USER_EXPORT}>\n              <button\n                type=\"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-subtle 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-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3\">\n            <AlertCircle size={20} className=\"text-status-error-text\" />\n            <p className=\"text-sm text-status-error-text flex-1\">{exportUsersError}</p>\n          </div>\n        )}\n\n        {/* Info Banner */}\n        <div className=\"p-4 bg-surface border border-border-subtle rounded-lg\">\n          <p className=\"text-sm text-text-secondary\">\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-subtle 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-bg-sunken/50 border-b border-border-subtle\">\n                <tr>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.user', 'User')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary 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-text-secondary uppercase tracking-wider\">\n                    {tr('channel.source', 'Source')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.status', 'Status')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.pairing', 'Pairing')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.notifications', 'Notifications')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary 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-text-secondary\">\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-bg-sunken/30 transition-colors\">\n                        <td className=\"px-4 py-3\">\n                          <div className=\"flex items-center gap-3\">\n                            <div className=\"size-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-text-primary\">\n                                {user.externalDisplayName || 'Unknown'}\n                              </p>\n                              {user.externalUsername && (\n                                <p className=\"text-xs text-text-secondary\">\n                                  {user.externalUsername}\n                                </p>\n                              )}\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"px-4 py-3 text-sm font-mono text-text-secondary\">\n                          {user.externalUserId}\n                        </td>\n                        <td className=\"px-4 py-3\">\n                          <span className=\"text-xs text-text-secondary bg-bg-sunken 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-text-secondary\">-</span>\n                          )}\n                        </td>\n                        <td className=\"px-4 py-3\">\n                          {user.notificationsEnabled ? (\n                            <span className=\"inline-flex items-center gap-1\">\n                              <Bell\n                                size={16}\n                                className=\"text-status-success-text\"\n                                aria-hidden=\"true\"\n                              />\n                              <span className=\"sr-only\">{tr('channel.enabled', 'Enabled')}</span>\n                            </span>\n                          ) : (\n                            <span className=\"inline-flex items-center gap-1\">\n                              <BellOff\n                                size={16}\n                                className=\"text-text-secondary\"\n                                aria-hidden=\"true\"\n                              />\n                              <span className=\"sr-only\">{tr('channel.disabled', 'Disabled')}</span>\n                            </span>\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-status-success-text\">\n                              <UserCheck size={16} />\n                              {tr('channel.allowed', 'Allowed')}\n                            </span>\n                          ) : (\n                            <span className=\"inline-flex items-center gap-1 text-sm text-text-secondary\">\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\n        {/* Pagination footer */}\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-sm text-text-secondary\">\n            {total > 0 && (\n              <>\n                {tr('channel.showing', 'Showing')}{' '}\n                <span className=\"font-medium\">\n                  {currentPage * limit + 1}–{Math.min((currentPage + 1) * limit, total)}\n                </span>{' '}\n                {tr('channel.of', 'of')} <span className=\"font-medium\">{total}</span>\n              </>\n            )}\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}\n              disabled={!hasPrevPage || isLoadingUsers}\n              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\"\n            >\n              <ChevronLeft size={16} />\n              {tr('channel.previous', 'Previous')}\n            </button>\n            <span className=\"text-sm text-text-secondary\">\n              {currentPage + 1} / {totalPages}\n            </span>\n            <button\n              type=\"button\"\n              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}\n              disabled={!hasNextPage || isLoadingUsers}\n              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\"\n            >\n              {tr('channel.next', 'Next')}\n              <ChevronRight size={16} />\n            </button>\n          </div>\n        </div>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}