npm - @burdenoff/microfe-channel - Versions diffs - 2026.830.1 → 2026.830.2 - Mend

@burdenoff/microfe-channel 2026.830.1 → 2026.830.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

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

	@@ -1 +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';\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 CTAOverflowMenu,\n EmphasisPanel,\n ResponsiveTable,\n IllustratedEmptyState,\n PagePurpose,\n type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\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 { hasPermission } = usePermissions();\n const canExport = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_USER_EXPORT);\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 const userColumns: ResponsiveTableColumn<UserPlatformConnection>[] = [\n {\n key: 'user',\n header: tr('channel.user', 'User'),\n priority: 'primary',\n cell: (user) => (\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\">{user.externalUsername}</p>\n )}\n </div>\n </div>\n ),\n },\n {\n key: 'platformId',\n header: tr('channel.platformId', 'Platform ID'),\n priority: 'secondary',\n cellClassName: 'text-sm font-mono text-text-secondary',\n cell: (user) => user.externalUserId,\n },\n {\n key: 'source',\n header: tr('channel.source', 'Source'),\n priority: 'secondary',\n cell: (user) => (\n <span className=\"text-xs text-text-secondary bg-bg-sunken px-2 py-1 rounded\">\n {user.source}\n </span>\n ),\n },\n {\n key: 'status',\n header: tr('channel.status', 'Status'),\n priority: 'primary',\n cell: (user) => {\n const presenceConfig = getPresenceConfig(user.presenceStatus as UserPresenceStatus);\n return (\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}`}>{presenceConfig.label}</span>\n </div>\n );\n },\n },\n {\n key: 'pairing',\n header: tr('channel.pairing', 'Pairing'),\n priority: 'secondary',\n cell: (user) => {\n const pairingConfig = user.pairingStatus\n ? getPairingConfig(user.pairingStatus as PairingStatus)\n : null;\n const PairingIcon = pairingConfig?.icon ?? XCircle;\n return 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 },\n },\n {\n key: 'notifications',\n header: tr('channel.notifications', 'Notifications'),\n priority: 'secondary',\n cell: (user) =>\n user.notificationsEnabled ? (\n <span className=\"inline-flex items-center gap-1\">\n <Bell size={16} className=\"text-status-success-text\" aria-hidden=\"true\" />\n <span className=\"sr-only\">{tr('channel.enabled', 'Enabled')}</span>\n </span>\n ) : (\n <span className=\"inline-flex items-center gap-1\">\n <BellOff size={16} className=\"text-text-secondary\" aria-hidden=\"true\" />\n <span className=\"sr-only\">{tr('channel.disabled', 'Disabled')}</span>\n </span>\n ),\n },\n {\n key: 'dmAllowed',\n header: tr('channel.dmAllowed', 'DM Allowed'),\n priority: 'secondary',\n cell: (user) =>\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 },\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\">{channel.name} - User connections</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 <CTAOverflowMenu\n actions={[\n {\n label: tr('channel.refresh', 'Refresh'),\n icon: (\n <RefreshCw\n size={16}\n className={isLoadingUsers ? 'animate-spin' : ''}\n aria-hidden=\"true\"\n />\n ),\n disabled: isLoadingUsers,\n onSelect: () => void loadUsers(currentPage),\n },\n ...(canExport\n ? [\n {\n label: tr('channel.export', 'Export'),\n icon: isExportingUsers ? (\n <Loader2 size={16} className=\"animate-spin\" aria-hidden=\"true\" />\n ) : (\n <Download size={16} aria-hidden=\"true\" />\n ),\n disabled: isExportingUsers,\n onSelect: () => void exportUsers(),\n },\n ]\n : []),\n ]}\n />\n </div>\n </div>\n\n {/ Page purpose /}\n <PagePurpose icon={<User size={15} aria-hidden=\"true\" />}>\n {tr(\n 'channel.usersPurpose',\n 'The people reachable through this channel — linked via OAuth or a pairing code on platforms like Slack, Teams or WhatsApp. See who is online, whether their pairing is approved, and whether they have opted into notifications and direct messages. Use it to verify a recipient is actually connected before you target them, or to audit who can receive messages here.'\n )}\n </PagePurpose>\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 {/ Emphasis — connected-users summary /}\n <EmphasisPanel className=\"flex items-center gap-3 p-4\">\n <span className=\"rounded-lg bg-accent-blue-subtle p-2\">\n <UserCheck size={18} className=\"text-accent-blue\" aria-hidden=\"true\" />\n </span>\n <div>\n <p className=\"text-sm font-semibold text-text-primary\">\n {total}{' '}\n {total === 1\n ? tr('channel.connectedUserSingular', 'connected user')\n : tr('channel.connectedUsersPlural', 'connected users')}\n </p>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'channel.usersBannerHint',\n 'Users connected to this channel through OAuth or pairing. Notification preferences and DM authorization are managed per user.'\n )}\n </p>\n </div>\n </EmphasisPanel>\n\n {/ Users List /}\n <ResponsiveTable\n columns={userColumns}\n data={users}\n rowKey={(user) => user.id}\n emptyState={\n <IllustratedEmptyState\n illustration=\"empty-people\"\n title={tr('channel.noUsersConnected', 'No users connected to this channel')}\n />\n }\n className=\"bg-surface border border-border-seam rounded-lg\"\n />\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":";;;;;;;;;;;;;AA6CA,IAAM,IAAgF;CACpF,QAAQ;EAAE,OAAO;EAAU,OAAO;EAA4B;CAC9D,SAAS;EAAE,OAAO;EAAW,OAAO;EAAuB;CAC3D,MAAM;EAAE,OAAO;EAAQ,OAAO;EAA4B;CAC1D,KAAK;EAAE,OAAO;EAAkB,OAAO;EAA0B;CAClE,EAEK,IAGF;CACF,SAAS;EACP,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,UAAU;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,SAAS;EAAE,OAAO;EAAW,OAAO;EAAoC,MAAM;EAAS;CACxF;AAED,SAAgB,IAAmB;CACjC,IAAM,EAAE,iBAAc,GAAkC,EAClD,IAAW,IAAa,EACxB,EAAE,qBAAkB,GAAgB,EACpC,IAAY,EAAc,EAAoB,oBAAoB,EAClE,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAE9B,EAAE,sBAAmB,GAAmB,EACxC,EACJ,eAAe,GACf,aAAa,GACb,aAAa,MACX,EAAsB,KAAkB,KAAA,GAAW,EAAU,EAC3D,CAAC,GAAgB,KAAqB,EAAS,GAAK,EACpD,CAAC,GAAO,KAAY,EAAmC,EAAE,CAAC,EAC1D,CAAC,GAAO,KAAY,EAAS,GAAG,EAChC,CAAC,GAAO,KAAY,EAAS,EAAE,EAC/B,CAAC,GAAa,KAAkB,EAAS,EAAE,EAE3C,EAAE,YAAS,eAAW,UAAO,oCAAiC,EAAW,EAAU,EAEnF,IAAY,EAChB,OAAO,IAAe,MAAM;AACrB,SACL;KAAkB,GAAK;AACvB,OAAI;IACF,IAAM,IAAS,MAAM,EAA6B,GAAO,IAAO,EAAM;AAEtE,IADA,EAAS,EAAO,MAAM,EACtB,EAAS,EAAO,MAAM;aACd;AACR,MAAkB,GAAM;;;IAG5B;EAAC;EAAW;EAA8B;EAAM,CACjD,EAEK,IAAe,EAAO,EAAU;AACtC,SAAgB;AACd,IAAa,UAAU;GACvB;CACF,IAAM,IAAoB,EAAO,GAAK,EAGhC,IAAmB,EAAO,GAAM;AActC,CAZA,QAAgB;AACT,UAAQ,SAAS,CAAC,WAAW;AAK3B,GAFL,EAAiB,UAAU,IAC3B,EAAe,EAAE,EACZ,EAAa,QAAQ,EAAE,CAAC,cAAc;AACzC,MAAiB,UAAU;KAC3B;IACF;IACD,CAAC,EAAM,CAAC,EAEX,QAAgB;AACd,MAAI,EAAkB,SAAS;AAC7B,KAAkB,UAAU;AAC5B;;AAEE,IAAiB,WAChB,QAAQ,SAAS,CAAC,WAAW,EAAa,QAAQ,EAAY,CAAC;IACnE,CAAC,EAAY,CAAC;CAEjB,IAAM,IAAa,KAAK,IAAI,GAAG,KAAK,KAAK,IAAQ,EAAM,CAAC,EAClD,KAAc,IAAc,GAC5B,KAAc,IAAc,IAAa,GAEzC,MAAqB,MAClB,EAAgB,MAAW,EAAgB,SAG9C,MAAoB,MACjB,EAAe,MAAW,EAAe,SAG5C,KAA+D;EACnE;GACE,KAAK;GACL,QAAQ,EAAG,gBAAgB,OAAO;GAClC,UAAU;GACV,OAAO,MACL,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MAAM,MAAM;MAAI,WAAU;MAAwB,CAAA;KAC9C,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eACV,EAAK,uBAAuB;KAC3B,CAAA,EACH,EAAK,oBACJ,kBAAC,KAAD;KAAG,WAAU;eAA+B,EAAK;KAAqB,CAAA,CAEpE,EAAA,CAAA,CACF;;GAET;EACD;GACE,KAAK;GACL,QAAQ,EAAG,sBAAsB,cAAc;GAC/C,UAAU;GACV,eAAe;GACf,OAAO,MAAS,EAAK;GACtB;EACD;GACE,KAAK;GACL,QAAQ,EAAG,kBAAkB,SAAS;GACtC,UAAU;GACV,OAAO,MACL,kBAAC,QAAD;IAAM,WAAU;cACb,EAAK;IACD,CAAA;GAEV;EACD;GACE,KAAK;GACL,QAAQ,EAAG,kBAAkB,SAAS;GACtC,UAAU;GACV,OAAO,MAAS;IACd,IAAM,IAAiB,GAAkB,EAAK,eAAqC;AACnF,WACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD,EACE,WAAW,wBAAwB,EAAe,MAAM,QAAQ,SAAS,MAAM,IAC/E,CAAA,EACF,kBAAC,QAAD;MAAM,WAAW,WAAW,EAAe;gBAAU,EAAe;MAAa,CAAA,CAC7E;;;GAGX;EACD;GACE,KAAK;GACL,QAAQ,EAAG,mBAAmB,UAAU;GACxC,UAAU;GACV,OAAO,MAAS;IACd,IAAM,IAAgB,EAAK,gBACvB,GAAiB,EAAK,cAA+B,GACrD,MACE,IAAc,GAAe,QAAQ;AAC3C,WAAO,EAAK,iBAAiB,IAC3B,kBAAC,QAAD;KACE,WAAW,4DAA4D,EAAc;eADvF,CAGE,kBAAC,GAAD,EAAa,MAAM,IAAM,CAAA,EACxB,EAAc,MACV;SAEP,kBAAC,QAAD;KAAM,WAAU;eAA8B;KAAQ,CAAA;;GAG3D;EACD;GACE,KAAK;GACL,QAAQ,EAAG,yBAAyB,gBAAgB;GACpD,UAAU;GACV,OAAO,MACL,EAAK,uBACH,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,GAAD;KAAM,MAAM;KAAI,WAAU;KAA2B,eAAY;KAAS,CAAA,EAC1E,kBAAC,QAAD;KAAM,WAAU;eAAW,EAAG,mBAAmB,UAAU;KAAQ,CAAA,CAC9D;QAEP,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,GAAD;KAAS,MAAM;KAAI,WAAU;KAAsB,eAAY;KAAS,CAAA,EACxE,kBAAC,QAAD;KAAM,WAAU;eAAW,EAAG,oBAAoB,WAAW;KAAQ,CAAA,CAChE;;GAEZ;EACD;GACE,KAAK;GACL,QAAQ,EAAG,qBAAqB,aAAa;GAC7C,UAAU;GACV,OAAO,MACL,EAAK,YACH,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA,EACtB,EAAG,mBAAmB,UAAU,CAC5B;QAEP,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,GAAD,EAAS,MAAM,IAAM,CAAA,EACpB,EAAG,mBAAmB,UAAU,CAC5B;;GAEZ;EACF;AAkCD,QA/BI,KAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GAAS,MAAM;GAAI,WAAU;GAAqC,CAAA;EAC9D,CAAA,GAKN,KAAS,CAAC,IAEV,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KAAa,MAAM;KAAI,WAAU;KAA2B,CAAA;IAC5D,kBAAC,OAAD,EAAA,UACE,kBAAC,KAAD;KAAG,WAAU;eACV,KAAS;KACR,CAAA,EACA,CAAA;IACN,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAS,aAAa,IAAY;KACjD,WAAU;eACX;KAEQ,CAAA;IACL;;EACF,CAAA,GAKR,kBAAC,GAAD;EAAiB,YAAY,EAAoB;YAC/C,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAS,aAAa,IAAY;OACjD,cAAY,EAAG,yBAAyB,kBAAkB;OAC1D,WAAU;iBAEV,kBAAC,GAAD;QAAW,MAAM;QAAI,eAAY;QAAS,CAAA;OACnC,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAG,wBAAwB,gBAAgB;OACzC,CAAA,EACL,kBAAC,KAAD;OAAG,WAAU;iBAAb,CAAiD,EAAQ,MAAK,sBAAuB;SACjF,EAAA,CAAA,CACF;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,OAAO;OACP,WAAW,MAAM,EAAS,OAAO,EAAE,OAAO,MAAM,CAAC;OACjD,WAAU;iBAHZ;QAKE,kBAAC,UAAD;SAAQ,OAAO;mBAAI;SAAmB,CAAA;QACtC,kBAAC,UAAD;SAAQ,OAAO;mBAAI;SAAmB,CAAA;QACtC,kBAAC,UAAD;SAAQ,OAAO;mBAAI;SAAmB,CAAA;QACtC,kBAAC,UAAD;SAAQ,OAAO;mBAAK;SAAoB,CAAA;QACjC;UACT,kBAAC,IAAD,EACE,SAAS,CACP;OACE,OAAO,EAAG,mBAAmB,UAAU;OACvC,MACE,kBAAC,GAAD;QACE,MAAM;QACN,WAAW,IAAiB,iBAAiB;QAC7C,eAAY;QACZ,CAAA;OAEJ,UAAU;OACV,gBAAgB,KAAK,EAAU,EAAY;OAC5C,EACD,GAAI,IACA,CACE;OACE,OAAO,EAAG,kBAAkB,SAAS;OACrC,MAAM,IACJ,kBAAC,GAAD;QAAS,MAAM;QAAI,WAAU;QAAe,eAAY;QAAS,CAAA,GAEjE,kBAAC,IAAD;QAAU,MAAM;QAAI,eAAY;QAAS,CAAA;OAE3C,UAAU;OACV,gBAAgB,KAAK,GAAa;OACnC,CACF,GACD,EAAE,CACP,EACD,CAAA,CACE;QACF;;IAGN,kBAAC,IAAD;KAAa,MAAM,kBAAC,GAAD;MAAM,MAAM;MAAI,eAAY;MAAS,CAAA;eACrD,EACC,wBACA,6WACD;KACW,CAAA;IAGb,KACC,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAa,MAAM;MAAI,WAAU;MAA2B,CAAA,EAC5D,kBAAC,KAAD;MAAG,WAAU;gBAAyC;MAAqB,CAAA,CACvE;;IAIR,kBAAC,IAAD;KAAe,WAAU;eAAzB,CACE,kBAAC,QAAD;MAAM,WAAU;gBACd,kBAAC,GAAD;OAAW,MAAM;OAAI,WAAU;OAAmB,eAAY;OAAS,CAAA;MAClE,CAAA,EACP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG;OAAO;OACP,MAAU,IACP,EAAG,iCAAiC,iBAAiB,GACrD,EAAG,gCAAgC,kBAAkB;OACvD;SACJ,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,2BACA,gIACD;MACC,CAAA,CACA,EAAA,CAAA,CACQ;;IAGhB,kBAAC,IAAD;KACE,SAAS;KACT,MAAM;KACN,SAAS,MAAS,EAAK;KACvB,YACE,kBAAC,IAAD;MACE,cAAa;MACb,OAAO,EAAG,4BAA4B,qCAAqC;MAC3E,CAAA;KAEJ,WAAU;KACV,CAAA;IAGF,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBACV,IAAQ,KACP,kBAAA,GAAA,EAAA,UAAA;OACG,EAAG,mBAAmB,UAAU;OAAE;OACnC,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG,IAAc,IAAQ;SAAE;SAAE,KAAK,KAAK,IAAc,KAAK,GAAO,EAAM;SAChE;;OAAC;OACP,EAAG,cAAc,KAAK;OAAC;OAAC,kBAAC,QAAD;QAAM,WAAU;kBAAe;QAAa,CAAA;OACpE,EAAA,CAAA;MAEH,CAAA,EACJ,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,GAAgB,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC;QACxD,UAAU,CAAC,MAAe;QAC1B,WAAU;kBAJZ,CAME,kBAAC,IAAD,EAAa,MAAM,IAAM,CAAA,EACxB,EAAG,oBAAoB,WAAW,CAC5B;;OACT,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG,IAAc;SAAE;SAAI;SAChB;;OACP,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,GAAgB,MAAM,KAAK,IAAI,IAAa,GAAG,IAAI,EAAE,CAAC;QACrE,UAAU,CAAC,MAAe;QAC1B,WAAU;kBAJZ,CAMG,EAAG,gBAAgB,OAAO,EAC3B,kBAAC,IAAD,EAAc,MAAM,IAAM,CAAA,CACnB;;OACL;QACF;;IACF;;EACU,CAAA"}
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, useMemo } from 'react';\nimport { useParams, useNavigate } from 'react-router';\nimport { useTr } from '../../../hooks/useTr';\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 CTAOverflowMenu,\n EmphasisPanel,\n ResponsiveTable,\n IllustratedEmptyState,\n PagePurpose,\n type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\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\nexport function ChannelUsersPage() {\n const { channelId } = useParams<{ channelId: string }>();\n const navigate = useNavigate();\n const { hasPermission } = usePermissions();\n const canExport = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_USER_EXPORT);\n const tr = useTr();\n\n const PRESENCE_CONFIG: Record<\n UserPresenceStatus,\n { labelKey: string; labelFallback: string; color: string }\n > = useMemo(\n () => ({\n ONLINE: {\n labelKey: 'channel.presence.online',\n labelFallback: 'Online',\n color: 'text-status-success-text',\n },\n OFFLINE: {\n labelKey: 'channel.presence.offline',\n labelFallback: 'Offline',\n color: 'text-text-secondary',\n },\n AWAY: {\n labelKey: 'channel.presence.away',\n labelFallback: 'Away',\n color: 'text-status-warning-text',\n },\n DND: {\n labelKey: 'channel.presence.dnd',\n labelFallback: 'Do Not Disturb',\n color: 'text-status-error-text',\n },\n }),\n []\n );\n\n const PAIRING_CONFIG: Record<\n PairingStatus,\n { labelKey: string; labelFallback: string; color: string; icon: typeof CheckCircle2 }\n > = useMemo(\n () => ({\n PENDING: {\n labelKey: 'channel.pairingLabel.pending',\n labelFallback: 'Pending',\n color: 'text-status-warning-text bg-status-warning-bg-subtle',\n icon: Clock,\n },\n APPROVED: {\n labelKey: 'channel.pairingLabel.approved',\n labelFallback: 'Approved',\n color: 'text-status-success-text bg-status-success-bg-subtle',\n icon: CheckCircle2,\n },\n EXPIRED: {\n labelKey: 'channel.pairingLabel.expired',\n labelFallback: 'Expired',\n color: 'text-text-secondary bg-bg-sunken',\n icon: XCircle,\n },\n }),\n []\n );\n\n const resultsPerPageOptions = useMemo(\n () => [\n { value: 10, label: tr('channel.resultsPerPage', '{{count}} results', { count: 10 }) },\n { value: 25, label: tr('channel.resultsPerPage', '{{count}} results', { count: 25 }) },\n { value: 50, label: tr('channel.resultsPerPage', '{{count}} results', { count: 50 }) },\n { value: 100, label: tr('channel.resultsPerPage', '{{count}} results', { count: 100 }) },\n ],\n [tr]\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 const userColumns: ResponsiveTableColumn<UserPlatformConnection>[] = [\n {\n key: 'user',\n header: tr('channel.user', 'User'),\n priority: 'primary',\n cell: (user) => (\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 \|\| tr('channel.unknownUser', 'Unknown')}\n </p>\n {user.externalUsername && (\n <p className=\"text-xs text-text-secondary\">{user.externalUsername}</p>\n )}\n </div>\n </div>\n ),\n },\n {\n key: 'platformId',\n header: tr('channel.platformId', 'Platform ID'),\n priority: 'secondary',\n cellClassName: 'text-sm font-mono text-text-secondary',\n cell: (user) => user.externalUserId,\n },\n {\n key: 'source',\n header: tr('channel.source', 'Source'),\n priority: 'secondary',\n cell: (user) => (\n <span className=\"text-xs text-text-secondary bg-bg-sunken px-2 py-1 rounded\">\n {user.source}\n </span>\n ),\n },\n {\n key: 'status',\n header: tr('channel.status', 'Status'),\n priority: 'primary',\n cell: (user) => {\n const presenceConfig = getPresenceConfig(user.presenceStatus as UserPresenceStatus);\n return (\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 {tr(presenceConfig.labelKey, presenceConfig.labelFallback)}\n </span>\n </div>\n );\n },\n },\n {\n key: 'pairing',\n header: tr('channel.pairing', 'Pairing'),\n priority: 'secondary',\n cell: (user) => {\n const pairingConfig = user.pairingStatus\n ? getPairingConfig(user.pairingStatus as PairingStatus)\n : null;\n const PairingIcon = pairingConfig?.icon ?? XCircle;\n return 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 {tr(pairingConfig.labelKey, pairingConfig.labelFallback)}\n </span>\n ) : (\n <span className=\"text-xs text-text-secondary\">{tr('channel.noPairing', '-')}</span>\n );\n },\n },\n {\n key: 'notifications',\n header: tr('channel.notifications', 'Notifications'),\n priority: 'secondary',\n cell: (user) =>\n user.notificationsEnabled ? (\n <span className=\"inline-flex items-center gap-1\">\n <Bell size={16} className=\"text-status-success-text\" aria-hidden=\"true\" />\n <span className=\"sr-only\">{tr('channel.enabled', 'Enabled')}</span>\n </span>\n ) : (\n <span className=\"inline-flex items-center gap-1\">\n <BellOff size={16} className=\"text-text-secondary\" aria-hidden=\"true\" />\n <span className=\"sr-only\">{tr('channel.disabled', 'Disabled')}</span>\n </span>\n ),\n },\n {\n key: 'dmAllowed',\n header: tr('channel.dmAllowed', 'DM Allowed'),\n priority: 'secondary',\n cell: (user) =>\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 },\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 \|\| tr('channel.channelNotFound', '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 {tr('channel.goBack', '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 {tr('channel.usersPageSubtitle', '{{channelName}} - User connections', {\n channelName: channel.name,\n })}\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 {resultsPerPageOptions.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <CTAOverflowMenu\n actions={[\n {\n label: tr('channel.refresh', 'Refresh'),\n icon: (\n <RefreshCw\n size={16}\n className={isLoadingUsers ? 'animate-spin' : ''}\n aria-hidden=\"true\"\n />\n ),\n disabled: isLoadingUsers,\n onSelect: () => void loadUsers(currentPage),\n },\n ...(canExport\n ? [\n {\n label: tr('channel.export', 'Export'),\n icon: isExportingUsers ? (\n <Loader2 size={16} className=\"animate-spin\" aria-hidden=\"true\" />\n ) : (\n <Download size={16} aria-hidden=\"true\" />\n ),\n disabled: isExportingUsers,\n onSelect: () => void exportUsers(),\n },\n ]\n : []),\n ]}\n />\n </div>\n </div>\n\n {/ Page purpose /}\n <PagePurpose icon={<User size={15} aria-hidden=\"true\" />}>\n {tr(\n 'channel.usersPurpose',\n 'The people reachable through this channel — linked via OAuth or a pairing code on platforms like Slack, Teams or WhatsApp. See who is online, whether their pairing is approved, and whether they have opted into notifications and direct messages. Use it to verify a recipient is actually connected before you target them, or to audit who can receive messages here.'\n )}\n </PagePurpose>\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 {/ Emphasis — connected-users summary /}\n <EmphasisPanel className=\"flex items-center gap-3 p-4\">\n <span className=\"rounded-lg bg-accent-blue-subtle p-2\">\n <UserCheck size={18} className=\"text-accent-blue\" aria-hidden=\"true\" />\n </span>\n <div>\n <p className=\"text-sm font-semibold text-text-primary\">\n {total}{' '}\n {total === 1\n ? tr('channel.connectedUserSingular', 'connected user')\n : tr('channel.connectedUsersPlural', 'connected users')}\n </p>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'channel.usersBannerHint',\n 'Users connected to this channel through OAuth or pairing. Notification preferences and DM authorization are managed per user.'\n )}\n </p>\n </div>\n </EmphasisPanel>\n\n {/ Users List /}\n <ResponsiveTable\n columns={userColumns}\n data={users}\n rowKey={(user) => user.id}\n emptyState={\n <IllustratedEmptyState\n illustration=\"empty-people\"\n title={tr('channel.noUsersConnected', 'No users connected to this channel')}\n />\n }\n className=\"bg-surface border border-border-seam rounded-lg\"\n />\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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"}

package/dist/channel/modules/channels/pages/ConnectionDetailsPage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConnectionDetailsPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/ConnectionDetailsPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;~~AAwDH~~,wBAAgB,qBAAqB,~~gCA2apC~~"}
1	+ {"version":3,"file":"ConnectionDetailsPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/ConnectionDetailsPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAsCH,wBAAgB,qBAAqB,gCAodpC"}

package/dist/channel/modules/channels/pages/ConnectionDetailsPage.js CHANGED Viewed

@@ -1,43 +1,29 @@
-import { useChannel as e } from "../../../providers/ChannelProvider.js";
-import { nativeImpact as t, nativeNotify as n } from "../../../../utils/nativeBridge.js";
-import { reportShellError as ee } from "../../../utils/shellBridge.js";
-import { getGlobalChannelClient as te } from "../../../graphql/global-client.js";
-import { GetConnectionDocument as r } from "../../../../generated/global-operations.js";
-import { useChannel as ne } from "../../../hooks/useChannels.js";
-import { PermissionGuard as i } from "../../../components/PermissionGuard.js";
-import { CHANNEL_PERMISSIONS as a } from "../../../constants/permissions.js";
-import { useEffect as re, useState as o } from "react";
-import { useI18n as ie } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as s, ArrowLeft as c, CheckCircle2 as l, Clock as u, Edit as d, Loader2 as f, RefreshCw as p, Shield as m, Trash2 as h, XCircle as g } from "lucide-react";
-import { useNavigate as _, useParams as v } from "react-router";
-import { usePermissions as ae } from "@burdenoff/fe-libs/shared/providers/shell";
+import { useTr as e } from "../../../hooks/useTr.js";
+import { useChannel as t } from "../../../providers/ChannelProvider.js";
+import { nativeImpact as n, nativeNotify as r } from "../../../../utils/nativeBridge.js";
+import { reportShellError as i } from "../../../utils/shellBridge.js";
+import { getGlobalChannelClient as a } from "../../../graphql/global-client.js";
+import { GetConnectionDocument as ee } from "../../../../generated/global-operations.js";
+import { useChannel as te } from "../../../hooks/useChannels.js";
+import { PermissionGuard as o } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as s } from "../../../constants/permissions.js";
+import { useEffect as ne, useMemo as c, useState as l } from "react";
+import { AlertCircle as u, ArrowLeft as d, CheckCircle2 as re, Clock as ie, Edit as f, Loader2 as p, RefreshCw as m, Shield as h, Trash2 as g, XCircle as _ } from "lucide-react";
+import { useNavigate as v, useParams as ae } from "react-router";
+import { usePermissions as oe } from "@burdenoff/fe-libs/shared/providers/shell";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import { CTAOverflowMenu as oe, EmphasisPanel as x, GlassCard as S, NextSteps as C, PagePurpose as w } from "@burdenoff/fe-libs/ui";
-import { TagBadge as T } from "@burdenoff/fe-libs/tag";
+import { CTAOverflowMenu as se, EmphasisPanel as ce, GlassCard as x, NextSteps as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
+import { TagBadge as w } from "@burdenoff/fe-libs/tag";
 //#region src/channel/modules/channels/pages/ConnectionDetailsPage.tsx
-var E = {
-	true: {
-		icon: l,
-		color: "text-status-success-text",
-		bgColor: "bg-status-success-bg-subtle",
-		label: "Healthy"
-	},
-	false: {
-		icon: g,
-		color: "text-status-error-text",
-		bgColor: "bg-error-500/10",
-		label: "Unhealthy"
-	}
-};
-function D() {
-	let l = _(), { hasPermission: g } = ae(), D = g(a.CHANNEL_UPDATE), O = g(a.CHANNEL_EXECUTE), k = v(), { connectionId: A } = k, { authToken: j, apiGatewayUrl: M, organizationId: N } = e(), [P, F] = o(k.channelId), [I, L] = o(null);
-	re(() => {
+function T() {
+	let T = v(), { hasPermission: E } = oe(), D = E(s.CHANNEL_UPDATE), O = E(s.CHANNEL_EXECUTE), k = ae(), { connectionId: A } = k, { authToken: j, apiGatewayUrl: M, organizationId: N } = t(), [P, F] = l(k.channelId), [I, L] = l(null);
+	ne(() => {
 		if (P || !A) return;
 		let e = !1;
 		return (async () => {
 			try {
-				let t = await te(M, j, N).query({
-					query: r,
+				let t = await a(M, j, N).query({
+					query: ee,
 					variables: { id: A },
 					fetchPolicy: "network-only"
 				});
@@ -57,23 +43,35 @@ function D() {
 		j,
 		N
 	]);
-	let R = P, { channel: z, isLoading: B, error: V, runHealthCheck: H, deleteConnection: U } = ne(R), { t: W } = ie(), G = (e, t) => {
-		let n = W(e);
-		return n === e ? t : n;
-	}, [K, q] = o(!1), [J, Y] = o(!1), [se, X] = o(!1), Z = z?.connection, Q = async () => {
+	let R = P, { channel: z, isLoading: B, error: V, runHealthCheck: H, deleteConnection: U } = te(R), W = e(), G = c(() => ({
+		true: {
+			icon: re,
+			color: "text-status-success-text",
+			bgColor: "bg-status-success-bg-subtle",
+			labelKey: "channel.healthLabel.healthy",
+			labelFallback: "Healthy"
+		},
+		false: {
+			icon: _,
+			color: "text-status-error-text",
+			bgColor: "bg-error-500/10",
+			labelKey: "channel.healthLabel.unhealthy",
+			labelFallback: "Unhealthy"
+		}
+	}), []), [K, q] = l(!1), [J, Y] = l(!1), [le, X] = l(!1), Z = z?.connection, Q = async () => {
 		Y(!0);
 		try {
 			await H();
 		} finally {
 			Y(!1);
 		}
-	}, ce = async () => {
+	}, ue = async () => {
 		if (A) {
-			t("medium"), q(!0);
+			n("medium"), q(!0);
 			try {
-				await U(A), n("success"), l(`/channels/${R}`);
+				await U(A), r("success"), T(`/channels/${R}`);
 			} catch (e) {
-				n("error"), ee(e, {
+				r("error"), i(e, {
 					module: "channel",
 					context: { action: "Failed to delete connection" }
 				}, "[channel] Failed to delete connection");
@@ -84,47 +82,47 @@ function D() {
 	};
 	if (B || !P && !I) return /* @__PURE__ */ y("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ y(f, { className: "size-8 animate-spin text-text-secondary" })
+		children: /* @__PURE__ */ y(p, { className: "size-8 animate-spin text-text-secondary" })
 	});
 	if (I || V || !z) return /* @__PURE__ */ b("div", {
 		className: "flex flex-col items-center justify-center min-h-screen gap-4",
 		children: [
-			/* @__PURE__ */ y(s, { className: "size-12 text-status-error-text" }),
+			/* @__PURE__ */ y(u, { className: "size-12 text-status-error-text" }),
 			/* @__PURE__ */ y("h1", {
 				className: "text-xl font-semibold",
-				children: G("channel.channelNotFound", "Channel not found")
+				children: W("channel.channelNotFound", "Channel not found")
 			}),
 			/* @__PURE__ */ y("button", {
 				type: "button",
-				onClick: () => l("../../list"),
+				onClick: () => T("../../list"),
 				className: "text-primary hover:underline",
-				children: G("channel.backToChannels", "Back to channels")
+				children: W("channel.backToChannels", "Back to channels")
 			})
 		]
 	});
 	if (!Z) return /* @__PURE__ */ b("div", {
 		className: "flex flex-col items-center justify-center min-h-screen gap-4",
 		children: [
-			/* @__PURE__ */ y(s, { className: "size-12 text-text-secondary" }),
+			/* @__PURE__ */ y(u, { className: "size-12 text-text-secondary" }),
 			/* @__PURE__ */ y("h1", {
 				className: "text-xl font-semibold",
-				children: G("channel.noConnectionFound", "No connection found")
+				children: W("channel.noConnectionFound", "No connection found")
 			}),
 			/* @__PURE__ */ y("p", {
 				className: "text-sm text-text-secondary",
-				children: G("channel.noConnectionConfigured", "This channel does not have a connection configured.")
+				children: W("channel.noConnectionConfigured", "This channel does not have a connection configured.")
 			}),
 			/* @__PURE__ */ y("button", {
 				type: "button",
-				onClick: () => l(`/channels/${R}`),
+				onClick: () => T(`/channels/${R}`),
 				className: "text-primary hover:underline",
-				children: G("channel.backToChannel", "Back to channel")
+				children: W("channel.backToChannel", "Back to channel")
 			})
 		]
 	});
-	let $ = E[String(Z.isHealthy)] || E.false, le = $.icon;
-	return /* @__PURE__ */ y(i, {
-		permission: a.CHANNEL_CONNECTION_READ,
+	let $ = G[String(Z.isHealthy)] || G.false, de = $.icon;
+	return /* @__PURE__ */ y(o, {
+		permission: s.CHANNEL_CONNECTION_READ,
 		children: /* @__PURE__ */ b("div", {
 			className: "min-h-screen bg-bg-surface",
 			children: [/* @__PURE__ */ y("div", {
@@ -137,12 +135,12 @@ function D() {
 							className: "flex items-center gap-4",
 							children: [/* @__PURE__ */ y("button", {
 								type: "button",
-								onClick: () => l(`/channels/${R}`),
+								onClick: () => T(`/channels/${R}`),
 								className: "p-2 hover:bg-bg-sunken rounded-lg transition-colors",
-								children: /* @__PURE__ */ y(c, { className: "size-5 " })
+								children: /* @__PURE__ */ y(d, { className: "size-5 " })
 							}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h1", {
 								className: "text-2xl font-bold",
-								children: G("channel.connectionDetails", "Connection Details")
+								children: W("channel.connectionDetails", "Connection Details")
 							}), /* @__PURE__ */ b("p", {
 								className: "text-sm text-text-secondary",
 								children: [
@@ -151,21 +149,21 @@ function D() {
 									z.platform
 								]
 							})] })]
-						}), /* @__PURE__ */ y(oe, {
+						}), /* @__PURE__ */ y(se, {
 							primary: D ? {
-								label: G("channel.editChannel", "Edit Channel"),
-								icon: /* @__PURE__ */ y(d, {
+								label: W("channel.editChannel", "Edit Channel"),
+								icon: /* @__PURE__ */ y(f, {
 									className: "size-4",
 									"aria-hidden": "true"
 								}),
-								onSelect: () => l(`/channels/${R}/edit`)
+								onSelect: () => T(`/channels/${R}/edit`)
 							} : void 0,
 							actions: O ? [{
-								label: G("channel.runHealthCheck", "Run Health Check"),
-								icon: J ? /* @__PURE__ */ y(f, {
+								label: W("channel.runHealthCheck", "Run Health Check"),
+								icon: J ? /* @__PURE__ */ y(p, {
 									className: "size-4 animate-spin",
 									"aria-hidden": "true"
-								}) : /* @__PURE__ */ y(p, {
+								}) : /* @__PURE__ */ y(m, {
 									className: "size-4",
 									"aria-hidden": "true"
 								}),
@@ -178,21 +176,21 @@ function D() {
 			}), /* @__PURE__ */ b("div", {
 				className: "container mx-auto px-6 py-8 max-w-5xl space-y-6",
 				children: [
-					/* @__PURE__ */ y(w, {
-						icon: /* @__PURE__ */ y(m, {
+					/* @__PURE__ */ y(C, {
+						icon: /* @__PURE__ */ y(h, {
 							size: 15,
 							"aria-hidden": "true"
 						}),
-						children: G("channel.connectionDetailsPurpose", "The authenticated link between this channel and its provider — its auth type, whether it is active, when it was last tested, and how soon its token expires. Use it to verify the channel can actually send, to spot a token that needs refreshing before it lapses, or to remove a connection you no longer need.")
+						children: W("channel.connectionDetailsPurpose", "The authenticated link between this channel and its provider — its auth type, whether it is active, when it was last tested, and how soon its token expires. Use it to verify the channel can actually send, to spot a token that needs refreshing before it lapses, or to remove a connection you no longer need.")
 					}),
-					/* @__PURE__ */ y(C, {
+					/* @__PURE__ */ y(S, {
 						storageKey: "channel-connection-detail",
 						steps: [
 							...O ? [{
 								id: "health",
-								label: G("channel.nextRunHealthCheck", "Run a health check"),
-								description: G("channel.nextConnectionHealthDesc", "Confirm the credentials still authenticate against the provider."),
-								icon: /* @__PURE__ */ y(p, {
+								label: W("channel.nextRunHealthCheck", "Run a health check"),
+								description: W("channel.nextConnectionHealthDesc", "Confirm the credentials still authenticate against the provider."),
+								icon: /* @__PURE__ */ y(m, {
 									size: 16,
 									"aria-hidden": "true"
 								}),
@@ -200,27 +198,27 @@ function D() {
 							}] : [],
 							...D ? [{
 								id: "edit",
-								label: G("channel.nextEditChannel", "Edit the channel"),
-								description: G("channel.nextEditChannelDesc", "Update credentials, status or platform metadata for this channel."),
-								icon: /* @__PURE__ */ y(d, {
+								label: W("channel.nextEditChannel", "Edit the channel"),
+								description: W("channel.nextEditChannelDesc", "Update credentials, status or platform metadata for this channel."),
+								icon: /* @__PURE__ */ y(f, {
 									size: 16,
 									"aria-hidden": "true"
 								}),
-								onClick: () => l(`/channels/${R}/edit`)
+								onClick: () => T(`/channels/${R}/edit`)
 							}] : [],
 							{
 								id: "back",
-								label: G("channel.nextBackToChannel", "Back to the channel"),
-								description: G("channel.nextBackToChannelDesc", "Return to the channel overview to send a test or review deliveries."),
-								icon: /* @__PURE__ */ y(c, {
+								label: W("channel.nextBackToChannel", "Back to the channel"),
+								description: W("channel.nextBackToChannelDesc", "Return to the channel overview to send a test or review deliveries."),
+								icon: /* @__PURE__ */ y(d, {
 									size: 16,
 									"aria-hidden": "true"
 								}),
-								onClick: () => l(`/channels/${R}`)
+								onClick: () => T(`/channels/${R}`)
 							}
 						]
 					}),
-					/* @__PURE__ */ y(x, {
+					/* @__PURE__ */ y(ce, {
 						className: "p-6",
 						children: /* @__PURE__ */ y("div", {
 							className: "flex items-center justify-between",
@@ -228,71 +226,71 @@ function D() {
 								className: "flex items-center gap-4",
 								children: [/* @__PURE__ */ y("div", {
 									className: $.color,
-									children: /* @__PURE__ */ y(le, { className: "size-10 " })
+									children: /* @__PURE__ */ y(de, { className: "size-10 " })
 								}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h2", {
 									className: "text-xl font-semibold",
-									children: $.label
+									children: W($.labelKey, $.labelFallback)
 								}), /* @__PURE__ */ y("p", {
 									className: "text-sm text-text-secondary",
-									children: Z.isHealthy ? G("channel.connectionWorking", "Connection is working properly") : G("channel.connectionNotWorking", "Connection is not working properly")
+									children: Z.isHealthy ? W("channel.connectionWorking", "Connection is working properly") : W("channel.connectionNotWorking", "Connection is not working properly")
 								})] })]
 							})
 						})
 					}),
 					/* @__PURE__ */ b("div", {
 						className: "grid gap-6 lg:grid-cols-3",
-						children: [/* @__PURE__ */ b(S, {
+						children: [/* @__PURE__ */ b(x, {
 							treatment: "plain",
 							className: "border-border-seam p-6 space-y-4 lg:col-span-2",
 							children: [
 								/* @__PURE__ */ y("h3", {
 									className: "font-semibold",
-									children: G("channel.connectionInformation", "Connection Information")
+									children: W("channel.connectionInformation", "Connection Information")
 								}),
 								/* @__PURE__ */ b("div", {
 									className: "grid grid-cols-2 gap-4",
 									children: [
 										/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 											className: "text-sm text-text-secondary",
-											children: "Connection ID"
+											children: W("connection.connectionId", "Connection ID")
 										}), /* @__PURE__ */ y("p", {
 											className: "font-mono text-sm",
 											children: Z.id
 										})] }),
 										/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 											className: "text-sm text-text-secondary",
-											children: "Auth Type"
+											children: W("channel.authType", "Auth Type")
 										}), /* @__PURE__ */ b("p", {
 											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ y(m, { className: "size-4 text-text-secondary" }), Z.authType]
+											children: [/* @__PURE__ */ y(h, { className: "size-4 text-text-secondary" }), Z.authType]
 										})] }),
 										/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 											className: "text-sm text-text-secondary",
-											children: "Status"
+											children: W("channel.status", "Status")
 										}), /* @__PURE__ */ y("p", {
 											className: Z.isActive ? "text-status-success-text" : "text-text-secondary",
-											children: Z.isActive ? G("channel.activeStatus", "Active") : G("channel.inactiveStatus", "Inactive")
+											children: Z.isActive ? W("channel.activeStatus", "Active") : W("channel.inactiveStatus", "Inactive")
 										})] }),
 										/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 											className: "text-sm text-text-secondary",
-											children: "Token Refresh"
+											children: W("connection.tokenRefresh", "Token Refresh")
 										}), /* @__PURE__ */ y("p", {
 											className: Z.needsTokenRefresh ? "text-status-warning-text" : "text-text-secondary",
-											children: Z.needsTokenRefresh ? G("channel.tokenRefreshRequired", "Required soon") : G("channel.tokenRefreshNotNeeded", "Not needed")
+											children: Z.needsTokenRefresh ? W("channel.tokenRefreshRequired", "Required soon") : W("channel.tokenRefreshNotNeeded", "Not needed")
 										})] }),
 										Z.lastTestedAt && /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 											className: "text-sm text-text-secondary",
-											children: "Last Tested"
+											children: W("channel.lastTested", "Last Tested")
 										}), /* @__PURE__ */ b("p", {
 											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ y(u, { className: "size-4 text-text-secondary" }), new Date(Z.lastTestedAt).toLocaleString()]
+											children: [/* @__PURE__ */ y(ie, { className: "size-4 text-text-secondary" }), new Date(Z.lastTestedAt).toLocaleString()]
 										})] }),
 										Z.daysUntilExpiry !== null && Z.daysUntilExpiry !== void 0 && /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 											className: "text-sm text-text-secondary",
-											children: "Days Until Token Expiry"
-										}), /* @__PURE__ */ b("p", {
+											children: W("connection.daysUntilTokenExpiry", "Days Until Token Expiry")
+										}), /* @__PURE__ */ y("p", {
 											className: Z.daysUntilExpiry < 30 ? "text-status-warning-text" : "text-text-secondary",
-											children: [Z.daysUntilExpiry, " days"]
+											children: W("channel.duration.days", "{{count}} days", { count: Z.daysUntilExpiry })
 										})] })
 									]
 								}),
@@ -300,7 +298,7 @@ function D() {
 									className: "pt-4 border-t",
 									children: [/* @__PURE__ */ y("p", {
 										className: "text-sm text-text-secondary mb-2",
-										children: "Last Test Status"
+										children: W("connection.lastTestStatus", "Last Test Status")
 									}), /* @__PURE__ */ y("div", {
 										className: "p-3 rounded-lg bg-bg-sunken",
 										children: /* @__PURE__ */ y("p", {
@@ -313,11 +311,11 @@ function D() {
 									className: "pt-4 border-t",
 									children: [/* @__PURE__ */ y("p", {
 										className: "text-sm text-text-secondary mb-2",
-										children: G("channel.tags", "Tags")
+										children: W("channel.tags", "Tags")
 									}), /* @__PURE__ */ y("div", {
 										className: "flex flex-wrap gap-1.5",
 										"aria-label": "Connection tags",
-										children: Z.tagAssignments.map((e) => /* @__PURE__ */ y(T, {
+										children: Z.tagAssignments.map((e) => /* @__PURE__ */ y(w, {
 											id: e.tagId,
 											label: e.tagId,
 											size: "md"
@@ -325,48 +323,48 @@ function D() {
 									})]
 								})
 							]
-						}), /* @__PURE__ */ b(S, {
+						}), /* @__PURE__ */ b(x, {
 							treatment: "plain",
 							className: "border-border-seam p-6 space-y-4 lg:col-span-1",
 							children: [/* @__PURE__ */ y("h3", {
 								className: "font-semibold",
-								children: G("channel.actions", "Actions")
+								children: W("channel.actions", "Actions")
 							}), /* @__PURE__ */ b("div", {
 								className: "flex flex-col gap-3",
 								children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 									className: "font-medium",
-									children: G("channel.deleteConnection", "Delete Connection")
+									children: W("channel.deleteConnection", "Delete Connection")
 								}), /* @__PURE__ */ y("p", {
 									className: "text-sm text-text-secondary",
-									children: G("channel.deleteConnectionWarning", "Permanently remove this connection. The channel will become inactive.")
-								})] }), se ? /* @__PURE__ */ b("div", {
+									children: W("channel.deleteConnectionWarning", "Permanently remove this connection. The channel will become inactive.")
+								})] }), le ? /* @__PURE__ */ b("div", {
 									className: "flex items-center gap-2",
 									children: [
 										/* @__PURE__ */ y("span", {
 											className: "text-sm text-text-secondary",
-											children: G("channel.confirmDelete", "Confirm delete?")
+											children: W("channel.confirmDelete", "Confirm delete?")
 										}),
 										/* @__PURE__ */ b("button", {
 											type: "button",
-											onClick: ce,
+											onClick: ue,
 											disabled: K,
 											className: "px-4 py-2 rounded-lg bg-status-error-bg text-status-error-text hover:bg-status-error-bg/90 transition-colors flex items-center gap-2",
-											children: [K ? /* @__PURE__ */ y(f, { className: "size-4 animate-spin" }) : /* @__PURE__ */ y(h, { className: "size-4 " }), G("channel.delete", "Delete")]
+											children: [K ? /* @__PURE__ */ y(p, { className: "size-4 animate-spin" }) : /* @__PURE__ */ y(g, { className: "size-4 " }), W("channel.delete", "Delete")]
 										}),
 										/* @__PURE__ */ y("button", {
 											type: "button",
 											onClick: () => X(!1),
 											className: "px-4 py-2 rounded-lg border hover:bg-bg-sunken transition-colors",
-											children: G("channel.cancel", "Cancel")
+											children: W("channel.cancel", "Cancel")
 										})
 									]
-								}) : /* @__PURE__ */ y(i, {
-									permission: a.CHANNEL_CONNECTION_DELETE,
+								}) : /* @__PURE__ */ y(o, {
+									permission: s.CHANNEL_CONNECTION_DELETE,
 									children: /* @__PURE__ */ b("button", {
 										type: "button",
 										onClick: () => X(!0),
 										className: "px-4 py-2 rounded-lg text-status-error-text border border-status-error-border hover:bg-status-error-bg/10 transition-colors flex items-center gap-2",
-										children: [/* @__PURE__ */ y(h, { className: "size-4 " }), G("channel.delete", "Delete")]
+										children: [/* @__PURE__ */ y(g, { className: "size-4 " }), W("channel.delete", "Delete")]
 									})
 								})]
 							})]
@@ -378,6 +376,6 @@ function D() {
 	});
 }
 //#endregion
-export { D as ConnectionDetailsPage };
+export { T as ConnectionDetailsPage };
 //# sourceMappingURL=ConnectionDetailsPage.js.map