@burdenoff/microfe-channel 2026.805.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.
- package/dist/channel/ChannelRoot.d.ts.map +1 -1
- package/dist/channel/ChannelRoot.js +32 -35
- package/dist/channel/ChannelRoot.js.map +1 -1
- package/dist/channel/components/AdapterCredentialsForm.d.ts.map +1 -1
- package/dist/channel/components/AdapterCredentialsForm.js +52 -58
- package/dist/channel/components/AdapterCredentialsForm.js.map +1 -1
- package/dist/channel/components/FeatureNotEnabled.d.ts.map +1 -1
- package/dist/channel/components/FeatureNotEnabled.js +27 -22
- package/dist/channel/components/FeatureNotEnabled.js.map +1 -1
- package/dist/channel/components/MarkdownEditor.d.ts.map +1 -1
- package/dist/channel/components/MarkdownEditor.js +78 -77
- package/dist/channel/components/MarkdownEditor.js.map +1 -1
- package/dist/channel/components/PermissionGuard.d.ts.map +1 -1
- package/dist/channel/components/PermissionGuard.js +6 -9
- package/dist/channel/components/PermissionGuard.js.map +1 -1
- package/dist/channel/hooks/useTr.d.ts +17 -0
- package/dist/channel/hooks/useTr.d.ts.map +1 -0
- package/dist/channel/hooks/useTr.js +14 -0
- package/dist/channel/hooks/useTr.js.map +1 -0
- package/dist/channel/modules/channels/i18n.js +24 -24
- package/dist/channel/modules/channels/i18n.js.map +1 -1
- package/dist/channel/modules/channels/pages/ChannelDashboardPage.js +2 -2
- package/dist/channel/modules/channels/pages/ChannelDashboardPage.js.map +1 -1
- package/dist/channel/modules/channels/pages/ChannelSettingsPage.d.ts.map +1 -1
- package/dist/channel/modules/channels/pages/ChannelSettingsPage.js +232 -226
- package/dist/channel/modules/channels/pages/ChannelSettingsPage.js.map +1 -1
- package/dist/channel/modules/channels/pages/ChannelUsersPage.d.ts.map +1 -1
- package/dist/channel/modules/channels/pages/ChannelUsersPage.js +152 -146
- package/dist/channel/modules/channels/pages/ChannelUsersPage.js.map +1 -1
- package/dist/channel/modules/channels/pages/ConnectionDetailsPage.d.ts.map +1 -1
- package/dist/channel/modules/channels/pages/ConnectionDetailsPage.js +112 -114
- package/dist/channel/modules/channels/pages/ConnectionDetailsPage.js.map +1 -1
- package/dist/channel/modules/channels/pages/CreateChannelPage.d.ts.map +1 -1
- package/dist/channel/modules/channels/pages/CreateChannelPage.js +300 -269
- package/dist/channel/modules/channels/pages/CreateChannelPage.js.map +1 -1
- package/dist/channel/modules/channels/pages/CreateConnectionPage.d.ts.map +1 -1
- package/dist/channel/modules/channels/pages/CreateConnectionPage.js +108 -102
- package/dist/channel/modules/channels/pages/CreateConnectionPage.js.map +1 -1
- package/dist/channel/modules/channels/pages/EditChannelPage.d.ts.map +1 -1
- package/dist/channel/modules/channels/pages/EditChannelPage.js +384 -343
- package/dist/channel/modules/channels/pages/EditChannelPage.js.map +1 -1
- package/dist/channel/modules/channels/pages/SendMessagePage.d.ts.map +1 -1
- package/dist/channel/modules/channels/pages/SendMessagePage.js +170 -156
- package/dist/channel/modules/channels/pages/SendMessagePage.js.map +1 -1
- package/dist/channel/pages/ChannelLandingPage.d.ts.map +1 -1
- package/dist/channel/pages/ChannelLandingPage.js +47 -50
- package/dist/channel/pages/ChannelLandingPage.js.map +1 -1
- package/dist/translations/en.d.ts +271 -4
- package/dist/translations/en.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelDashboardPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/ChannelDashboardPage.tsx"],"sourcesContent":["/**\n * Channel Dashboard Page\n *\n * Main overview page for the Channel microfrontend.\n * Fetches real data from global-channel-svc via the useChannels hook.\n *\n * Sections:\n * 1. Header with Create Channel action\n * 2. KPI summary cards (total, active, healthy, connected)\n * 3. Search + platform/status filters\n * 4. Channel table with inline actions\n */\n\nimport { useState, useMemo, useCallback, useEffect, useRef } from 'react';\nimport { nativeImpact, nativeNotify } from '../../../../utils/nativeBridge';\nimport { subscribeShellEvent } from '../../../utils/shellBridge';\nimport {\n CTAOverflowMenu,\n GlassCard,\n AuroraBackground,\n GradientText,\n IllustratedEmptyState,\n PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport {\n CHANNEL_HEALTH_CHANGED_SUBSCRIPTION,\n useChannelSubscription,\n} from '../../../hooks/useChannelSubscription';\nimport { useNavigate } from 'react-router';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport {\n Radio,\n Plus,\n Search,\n Loader2,\n AlertCircle,\n RefreshCw,\n Power,\n PowerOff,\n Eye,\n Trash2,\n CheckCircle2,\n XCircle,\n AlertTriangle,\n HelpCircle,\n Cable,\n MessageSquare,\n ShieldCheck,\n Activity,\n LayoutDashboard,\n} from 'lucide-react';\nimport {\n useChannels,\n type Channel,\n type ChannelPlatform,\n type ChannelStatus,\n type ConnectionHealth,\n} from '../../../hooks/useChannels';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\nimport { HEALTH_I18N, PLATFORM_I18N, STATUS_I18N, translateLabel } from '../i18n';\n\n// ============================================================================\n// DISPLAY CONFIG\n// ============================================================================\n\nconst PLATFORM_CONFIG: Record<ChannelPlatform, { label: string; color: string }> = {\n EMAIL: { label: 'Email', color: 'bg-accent-blue-subtle text-accent-blue' },\n SMS: { label: 'SMS', color: 'bg-status-success-bg-subtle text-status-success-text' },\n PUSH: { label: 'Push', color: 'bg-accent-purple-subtle text-accent-purple' },\n INAPP: { label: 'In-App', color: 'bg-accent-indigo-subtle text-accent-indigo' },\n WEBHOOK: { label: 'Webhook', color: 'bg-accent-orange-subtle text-accent-orange' },\n SLACK: { label: 'Slack', color: 'bg-accent-pink-subtle text-accent-pink' },\n TEAMS: { label: 'Teams', color: 'bg-accent-cyan-subtle text-accent-cyan' },\n DISCORD: { label: 'Discord', color: 'bg-accent-violet-subtle text-accent-violet' },\n WHATSAPP: { label: 'WhatsApp', color: 'bg-accent-emerald-subtle text-accent-emerald' },\n WEBCHAT: { label: 'Webchat', color: 'bg-accent-teal-subtle text-accent-teal' },\n};\n\nconst STATUS_CONFIG: Record<\n ChannelStatus,\n { label: string; dotColor: string; textColor: string; icon: typeof CheckCircle2 }\n> = {\n ACTIVE: {\n label: 'Active',\n dotColor: 'bg-status-success-bg',\n textColor: 'text-status-success-text',\n icon: CheckCircle2,\n },\n INACTIVE: {\n label: 'Inactive',\n dotColor: 'bg-text-tertiary',\n textColor: 'text-text-secondary',\n icon: PowerOff,\n },\n ERROR: {\n label: 'Error',\n dotColor: 'bg-status-error-bg-subtle',\n textColor: 'text-status-error-text',\n icon: XCircle,\n },\n SUSPENDED: {\n label: 'Suspended',\n dotColor: 'bg-status-warning-bg',\n textColor: 'text-status-warning-text',\n icon: AlertTriangle,\n },\n ARCHIVED: {\n label: 'Archived',\n dotColor: 'bg-text-tertiary',\n textColor: 'text-text-secondary',\n icon: PowerOff,\n },\n};\n\nconst HEALTH_CONFIG: Record<\n ConnectionHealth,\n { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n HEALTHY: { label: 'Healthy', color: 'text-status-success-text', icon: CheckCircle2 },\n DEGRADED: { label: 'Degraded', color: 'text-status-warning-text', icon: AlertTriangle },\n UNHEALTHY: { label: 'Unhealthy', color: 'text-status-error-text', icon: XCircle },\n UNKNOWN: { label: 'Unknown', color: 'text-text-secondary', icon: HelpCircle },\n};\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\nfunction formatRelativeTime(dateStr: string): string {\n const diffMs = Date.now() - new Date(dateStr).getTime();\n if (Number.isNaN(diffMs) || diffMs < 0) return 'just now';\n const sec = Math.floor(diffMs / 1000);\n if (sec < 60) return 'just now';\n const min = Math.floor(sec / 60);\n if (min < 60) return `${min}m ago`;\n const hr = Math.floor(min / 60);\n if (hr < 24) return `${hr}h ago`;\n const d = Math.floor(hr / 24);\n if (d < 7) return `${d}d ago`;\n if (d < 30) return `${Math.floor(d / 7)}w ago`;\n return `${Math.floor(d / 30)}mo ago`;\n}\n\n// ============================================================================\n// SUB-COMPONENTS\n// ============================================================================\n\nfunction KpiCard({\n icon: Icon,\n iconClass,\n value,\n label,\n sub,\n featured,\n}: {\n icon: typeof Radio;\n iconClass: string;\n value: string | number;\n label: string;\n sub?: string;\n featured?: boolean;\n}) {\n return (\n <GlassCard\n treatment={featured ? 'glass' : 'metric'}\n glow={featured}\n className=\"p-4 border-border-seam\"\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"p-2 rounded-lg bg-accent-primary/10\">\n <Icon size={18} className={iconClass} />\n </div>\n <div>\n <p className=\"text-2xl font-bold text-text-primary leading-tight tabular-nums\">{value}</p>\n <p className=\"text-xs text-text-secondary\">{label}</p>\n </div>\n </div>\n {sub && <p className=\"text-[11px] text-text-muted mt-2 pl-11\">{sub}</p>}\n </GlassCard>\n );\n}\n\n// ============================================================================\n// MAIN COMPONENT\n// ============================================================================\n\nexport function ChannelDashboardPage() {\n const navigate = useNavigate();\n const { hasPermission } = usePermissions();\n // Channel creation is admin-only (channel:create) — hide the affordance otherwise.\n const canCreate = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_CREATE);\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 [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);\n const [actionLoading, setActionLoading] = useState<string | null>(null);\n const pageSize = 10;\n const [currentPage, setCurrentPage] = useState(0);\n const getPlatformConfig = (platform: ChannelPlatform) => {\n const config = PLATFORM_CONFIG[platform] ?? {\n label: platform,\n color: 'bg-bg-sunken text-text-tertiary',\n };\n return {\n ...config,\n label: translateLabel(platform, PLATFORM_I18N, tr),\n };\n };\n const getStatusConfig = (status: ChannelStatus) => {\n const config = STATUS_CONFIG[status] ?? STATUS_CONFIG.INACTIVE;\n return {\n ...config,\n label: translateLabel(status, STATUS_I18N, tr),\n };\n };\n const getHealthConfig = (health: ConnectionHealth) => {\n const config = HEALTH_CONFIG[health] ?? HEALTH_CONFIG.UNKNOWN;\n return {\n ...config,\n label: translateLabel(health, HEALTH_I18N, tr),\n };\n };\n\n const {\n channels,\n isLoading,\n error,\n total,\n filter,\n updateFilter,\n deleteChannel,\n activateChannel,\n deactivateChannel,\n runHealthCheck,\n refetch,\n } = useChannels();\n\n const totalPages = Math.max(1, Math.ceil(total / pageSize));\n\n const refetchRef = useRef(refetch);\n useEffect(() => {\n refetchRef.current = refetch;\n });\n\n useEffect(() => {\n void refetchRef.current({ offset: currentPage * pageSize, limit: pageSize });\n }, [currentPage, pageSize]);\n\n useEffect(() => {\n void Promise.resolve().then(() => setCurrentPage(0));\n }, [filter.search, filter.platform, filter.status]);\n\n const { organizationId } = useChannelContext();\n\n // Real-time channel health stream. Subscribes when the gateway exposes\n // `channelHealthChanged`; otherwise falls back to polling every 60s.\n // Conservative fallback interval keeps gateway/svc cost low when subs\n // are unavailable; live updates flow through the subscription path.\n useChannelSubscription({\n query: CHANNEL_HEALTH_CHANGED_SUBSCRIPTION,\n variables: { organizationId },\n operationName: 'ChannelHealthChanged',\n enabled: Boolean(organizationId),\n onData: () => void refetch(),\n pollFn: refetch,\n pollIntervalMs: 60_000,\n });\n\n // ── Cross-MFE refresh: subscribe to channel/connection bus events so the\n // dashboard auto-updates when another tab or another MFE mutates state. ─\n useEffect(() => {\n const events = [\n 'channel.created',\n 'channel.updated',\n 'channel.deleted',\n 'connection.created',\n 'connection.updated',\n 'connection.deleted',\n 'delivery.completed',\n 'webhook.received',\n ];\n const unsubs = events.map((name) => subscribeShellEvent(name, () => void refetch()));\n return () => unsubs.forEach((u) => u());\n }, [refetch]);\n\n // ── Derived KPIs ──────────────────────────────────────────────────────\n const kpis = useMemo(() => {\n let active = 0;\n let healthy = 0;\n let connected = 0;\n let messages24h = 0;\n let errored = 0;\n let unhealthy = 0;\n\n for (const ch of channels) {\n if (ch.status === 'ACTIVE') active++;\n if (ch.status === 'ERROR') errored++;\n if (ch.connectionHealth === 'HEALTHY') healthy++;\n if (ch.connectionHealth === 'UNHEALTHY') unhealthy++;\n if (ch.isConnected) connected++;\n messages24h += ch.messageCount24h ?? 0;\n }\n\n return { active, healthy, connected, messages24h, errored, unhealthy };\n }, [channels]);\n\n // ── Action handlers ───────────────────────────────────────────────────\n const handleDelete = useCallback(\n async (id: string) => {\n void nativeImpact('medium');\n setActionLoading(id);\n try {\n await deleteChannel(id);\n void nativeNotify('success');\n setDeleteConfirm(null);\n } catch (err) {\n void nativeNotify('error');\n throw err;\n } finally {\n setActionLoading(null);\n }\n },\n [deleteChannel]\n );\n\n const handleToggle = useCallback(\n async (ch: Channel) => {\n setActionLoading(ch.id);\n try {\n if (ch.status === 'ACTIVE') await deactivateChannel(ch.id);\n else await activateChannel(ch.id);\n } finally {\n setActionLoading(null);\n }\n },\n [activateChannel, deactivateChannel]\n );\n\n const handleHealthCheck = useCallback(\n async (id: string) => {\n setActionLoading(id);\n try {\n await runHealthCheck(id);\n } finally {\n setActionLoading(null);\n }\n },\n [runHealthCheck]\n );\n\n // ── Render ────────────────────────────────────────────────────────────\n return (\n <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_READ}>\n <div className=\"space-y-5 p-3 sm:p-6\">\n {/* ── Header ───────────────────────────────────────────────────── */}\n <div className=\"relative overflow-hidden rounded-xl\">\n <AuroraBackground intensity=\"subtle\" />\n <div className=\"flex flex-col gap-3 p-2 sm:flex-row sm:items-center sm:justify-between\">\n <div className=\"flex items-center gap-3\">\n <div className=\"p-2 rounded-lg bg-accent-primary/10\">\n <LayoutDashboard size={20} className=\"text-accent-primary\" />\n </div>\n <div>\n <h1 className=\"text-xl font-bold text-text-primary\">\n <GradientText>{tr('channel.channelDashboard', 'Channel Dashboard')}</GradientText>\n </h1>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'channel.dashboardSubtitle',\n 'Manage and monitor your communication channels'\n )}\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\" data-tour=\"channels-dashboard-create-button\">\n <CTAOverflowMenu\n primary={\n canCreate\n ? {\n label: tr('channel.createChannel', 'Create Channel'),\n icon: <Plus size={16} aria-hidden=\"true\" />,\n onSelect: () => navigate('/channels/create'),\n }\n : undefined\n }\n actions={[\n {\n label: tr('channel.refresh', 'Refresh'),\n icon: <RefreshCw size={16} aria-hidden=\"true\" />,\n onSelect: () => void refetch(),\n },\n ]}\n />\n </div>\n </div>\n </div>\n\n {/* ── Page purpose ─────────────────────────────────────────────── */}\n <PagePurpose icon={<Radio size={15} aria-hidden=\"true\" />}>\n {tr(\n 'channel.dashboardPurpose',\n 'Your command centre for every outbound communication channel — Email, SMS, Push, Slack, WhatsApp and more. Watch health and delivery volume at a glance, spot channels in error, and jump straight to fixing or testing them. Use it to confirm a channel is live before a campaign or to triage why a notification did not arrive.'\n )}\n </PagePurpose>\n\n {/* ── KPI Cards ────────────────────────────────────────────────── */}\n <div\n data-tour=\"channels-dashboard-kpi-section\"\n className=\"grid gap-3 grid-cols-2 md:grid-cols-3 lg:grid-cols-4\"\n >\n <KpiCard\n featured\n icon={Radio}\n iconClass=\"text-accent-primary\"\n value={total}\n label={tr('channel.totalChannels', 'Total Channels')}\n sub={\n kpis.active > 0\n ? `${kpis.active} ${tr('channel.status.active', 'Active').toLowerCase()}, ${total - kpis.active} ${tr('channel.status.inactive', 'Inactive').toLowerCase()}`\n : undefined\n }\n />\n <KpiCard\n icon={ShieldCheck}\n iconClass=\"text-status-success-text\"\n value={kpis.healthy}\n label={tr('channel.healthy', 'Healthy')}\n sub={\n kpis.unhealthy > 0\n ? `${kpis.unhealthy} ${tr('channel.health.unhealthy', 'Unhealthy').toLowerCase()}`\n : total > 0\n ? kpis.healthy === total\n ? tr('channel.allSystemsNominal', 'All systems nominal')\n : `${total - kpis.healthy} ${tr('channel.health.unchecked', 'unchecked')}`\n : undefined\n }\n />\n <KpiCard\n icon={Cable}\n iconClass=\"text-accent-blue\"\n value={kpis.connected}\n label={tr('channel.connected', 'Connected')}\n sub={\n total > 0\n ? `${total - kpis.connected} ${tr('channel.disconnected', 'Disconnected').toLowerCase()}`\n : undefined\n }\n />\n <KpiCard\n icon={MessageSquare}\n iconClass=\"text-accent-violet\"\n value={kpis.messages24h.toLocaleString()}\n label={tr('channel.messages24h', 'Messages (24h)')}\n />\n </div>\n\n {/* ── Alerts ───────────────────────────────────────────────────── */}\n {kpis.errored > 0 && (\n <div className=\"flex items-center gap-3 p-3 border border-status-error-border/30 bg-status-error-bg-subtle rounded-lg\">\n <AlertCircle size={16} className=\"text-status-error-text shrink-0\" />\n <p className=\"text-sm text-status-error-text\">\n <span className=\"font-semibold\">{kpis.errored}</span>{' '}\n {tr(\n kpis.errored === 1\n ? 'channel.errorStateSummarySingle'\n : 'channel.errorStateSummaryMultiple',\n kpis.errored === 1 ? 'channel in error state' : 'channels in error state'\n )}\n </p>\n <button\n type=\"button\"\n onClick={() => updateFilter({ status: 'ERROR' as ChannelStatus })}\n className=\"ml-auto text-xs font-medium text-status-error-text hover:text-status-error-text/80 transition-colors\"\n >\n {tr('channel.showErrors', 'Show errors')}\n </button>\n </div>\n )}\n\n {/* ── Search & Filters ─────────────────────────────────────────── */}\n <div\n className=\"flex flex-col gap-3 sm:flex-row sm:items-center\"\n data-tour=\"channels-dashboard-search-filters\"\n >\n <div className=\"relative flex-1\">\n <Search\n size={14}\n className=\"absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n />\n <input\n type=\"text\"\n aria-label={tr('channel.searchChannels', 'Search channels...')}\n placeholder={tr('channel.searchChannels', 'Search channels...')}\n value={filter.search || ''}\n onChange={(e) => updateFilter({ search: e.target.value })}\n className=\"w-full pl-9 pr-4 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 placeholder:text-text-secondary\"\n />\n </div>\n\n <select\n value={filter.platform || ''}\n onChange={(e) =>\n updateFilter({ platform: (e.target.value as ChannelPlatform) || undefined })\n }\n className=\"px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-text-primary\"\n >\n <option value=\"\">{tr('channel.allPlatforms', 'All Platforms')}</option>\n {Object.entries(PLATFORM_CONFIG).map(([key, cfg]) => (\n <option key={key} value={key}>\n {cfg.label}\n </option>\n ))}\n </select>\n\n <select\n value={filter.status || ''}\n onChange={(e) =>\n updateFilter({ status: (e.target.value as ChannelStatus) || undefined })\n }\n className=\"px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-text-primary\"\n >\n <option value=\"\">{tr('channel.allStatus', 'All Status')}</option>\n {Object.entries(STATUS_CONFIG).map(([key, cfg]) => (\n <option key={key} value={key}>\n {cfg.label}\n </option>\n ))}\n </select>\n </div>\n\n {/* ── Error State ──────────────────────────────────────────────── */}\n {error && (\n <div className=\"flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border/30 rounded-lg\">\n <AlertCircle size={18} className=\"text-status-error-text shrink-0\" />\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium text-status-error-text\">\n {tr('channel.loadFailed', 'Failed to load channels')}\n </p>\n <p className=\"text-xs text-status-error-text/70 truncate\">{error}</p>\n </div>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"shrink-0 px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors\"\n >\n {tr('channel.retry', 'Retry')}\n </button>\n </div>\n )}\n\n {/* ── Loading ──────────────────────────────────────────────────── */}\n {isLoading && channels.length === 0 && (\n <div className=\"flex items-center justify-center py-16\">\n <Loader2 size={28} className=\"animate-spin text-accent-primary\" />\n </div>\n )}\n\n {/* ── Empty State ──────────────────────────────────────────────── */}\n {!isLoading && !error && channels.length === 0 && (\n <IllustratedEmptyState\n illustration={\n filter.search || filter.platform || filter.status ? 'empty-search' : 'onboarding'\n }\n title={\n filter.search || filter.platform || filter.status\n ? tr('channel.noChannelsMatchFilter', 'No channels match your filters')\n : tr('channel.noChannels', 'No channels yet')\n }\n description={\n filter.search || filter.platform || filter.status\n ? tr('channel.adjustFilters', 'Try adjusting your search or filters.')\n : tr(\n 'channel.createFirstChannel',\n 'Create your first communication channel to start sending messages across Email, SMS, Push, Slack and more.'\n )\n }\n action={\n canCreate && !(filter.search || filter.platform || filter.status) ? (\n <button\n type=\"button\"\n onClick={() => navigate('/channels/create')}\n className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors\"\n >\n <Plus size={14} />\n {tr('channel.createChannel', 'Create Channel')}\n </button>\n ) : undefined\n }\n />\n )}\n\n {/* ── Channel Table ────────────────────────────────────────────── */}\n {channels.length > 0 && (\n <GlassCard\n treatment=\"plain\"\n className=\"border-border-seam rounded-lg overflow-hidden p-0\"\n data-tour=\"channels-dashboard-table\"\n >\n <div className=\"overflow-x-auto min-w-full\">\n <table className=\"w-full text-sm min-w-[800px]\">\n <thead>\n <tr className=\"hover:bg-action-primary-bg/10 border-b border-border-subtle\">\n <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.channel', 'Channel')}\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.platform', 'Platform')}\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.status', 'Status')}\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.health', 'Health')}\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.connection', 'Connection')}\n </th>\n <th className=\"text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.msgs24h', 'Msgs 24h')}\n </th>\n <th className=\"text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.updated', 'Updated')}\n </th>\n <th className=\"text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.actions', 'Actions')}\n </th>\n </tr>\n </thead>\n\n <tbody className=\"divide-y divide-border\">\n {channels.map((ch) => {\n const isAL = actionLoading === ch.id;\n\n return (\n <tr\n key={ch.id}\n className=\"bg-surface hover:bg-action-primary-bg/60 transition-colors group\"\n >\n {/* Name */}\n <td className=\"px-4 py-3\">\n <button\n type=\"button\"\n onClick={() => navigate(`/channels/${ch.id}`)}\n className=\"text-left group/name\"\n >\n <p className=\"font-medium text-text-primary group-hover/name:text-accent-primary transition-colors truncate max-w-[200px]\">\n {ch.name}\n </p>\n {ch.description && (\n <p className=\"text-xs text-text-secondary truncate max-w-[200px]\">\n {ch.description}\n </p>\n )}\n </button>\n </td>\n\n {/* Platform */}\n <td className=\"px-4 py-3\">\n <span\n className={`inline-flex items-center px-2 py-0.5 text-[11px] font-semibold rounded-full ${getPlatformConfig(ch.platform).color}`}\n >\n {getPlatformConfig(ch.platform).label}\n </span>\n {ch.adapterType && (\n <p className=\"text-[10px] text-text-secondary mt-0.5 font-mono\">\n {ch.adapterType.replace(/_/g, ' ')}\n </p>\n )}\n </td>\n\n {/* Status */}\n <td className=\"px-4 py-3\">\n <span className=\"inline-flex items-center gap-1.5\">\n <span\n className={`w-1.5 h-1.5 rounded-full ${getStatusConfig(ch.status).dotColor} ${\n ch.status === 'ACTIVE' ? 'motion-safe:animate-vc-glow-pulse' : ''\n }`}\n />\n <span className={`text-xs ${getStatusConfig(ch.status).textColor}`}>\n {getStatusConfig(ch.status).label}\n </span>\n </span>\n </td>\n\n {/* Health */}\n <td className=\"px-4 py-3\">\n <span\n className={`inline-flex items-center gap-1 text-xs ${getHealthConfig(ch.connectionHealth).color}`}\n >\n {(() => {\n const Icon = getHealthConfig(ch.connectionHealth).icon;\n return <Icon size={12} />;\n })()}\n {getHealthConfig(ch.connectionHealth).label}\n </span>\n </td>\n\n {/* Connection */}\n <td className=\"px-4 py-3\">\n <span\n className={`text-xs ${ch.isConnected ? 'text-status-success-text' : 'text-text-secondary'}`}\n >\n {ch.isConnected\n ? tr('channel.connected', 'Connected')\n : tr('channel.disconnected', 'Disconnected')}\n </span>\n </td>\n\n {/* Messages 24h */}\n <td className=\"px-4 py-3 text-right\">\n <span className=\"text-xs text-text-primary tabular-nums\">\n {(ch.messageCount24h ?? 0).toLocaleString()}\n </span>\n </td>\n\n {/* Updated */}\n <td className=\"px-4 py-3 text-right\">\n <span className=\"text-xs text-text-secondary whitespace-nowrap\">\n {formatRelativeTime(ch.updatedAt)}\n </span>\n </td>\n\n {/* Actions */}\n <td className=\"px-4 py-3\">\n <div className=\"flex items-center justify-end gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity\">\n <button\n type=\"button\"\n onClick={() => navigate(`/channels/${ch.id}`)}\n className=\"p-1.5 text-text-secondary hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors\"\n title={tr('channel.view', 'View')}\n >\n <Eye size={14} />\n </button>\n\n <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_EXECUTE}>\n <button\n type=\"button\"\n onClick={() => handleHealthCheck(ch.id)}\n disabled={isAL}\n className=\"p-1.5 text-text-secondary hover:text-accent-blue hover:bg-accent-blue-subtle rounded transition-colors disabled:opacity-40\"\n title={tr('channel.healthCheck', 'Health Check')}\n >\n {isAL ? (\n <Loader2 size={14} className=\"animate-spin\" />\n ) : (\n <RefreshCw size={14} />\n )}\n </button>\n </PermissionGuard>\n\n <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_UPDATE}>\n <button\n type=\"button\"\n onClick={() => handleToggle(ch)}\n disabled={isAL}\n className={`p-1.5 rounded transition-colors disabled:opacity-40 ${\n ch.status === 'ACTIVE'\n ? 'text-text-secondary hover:text-status-warning-text hover:bg-status-warning-bg-subtle'\n : 'text-text-secondary hover:text-status-success-text hover:bg-status-success-bg-subtle'\n }`}\n title={\n ch.status === 'ACTIVE'\n ? tr('channel.deactivate', 'Deactivate')\n : tr('channel.activate', 'Activate')\n }\n >\n {ch.status === 'ACTIVE' ? (\n <PowerOff size={14} />\n ) : (\n <Power size={14} />\n )}\n </button>\n </PermissionGuard>\n\n {deleteConfirm === ch.id ? (\n <span className=\"inline-flex items-center gap-1 ml-1\">\n <button\n type=\"button\"\n onClick={() => handleDelete(ch.id)}\n disabled={isAL}\n className=\"px-1.5 py-0.5 text-[11px] font-medium text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors\"\n >\n {isAL ? '...' : tr('channel.yes', 'Yes')}\n </button>\n <button\n type=\"button\"\n onClick={() => setDeleteConfirm(null)}\n className=\"px-1.5 py-0.5 text-[11px] text-text-secondary hover:bg-action-primary-bg/10 rounded transition-colors\"\n >\n {tr('channel.no', 'No')}\n </button>\n </span>\n ) : (\n <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELETE}>\n <button\n type=\"button\"\n onClick={() => setDeleteConfirm(ch.id)}\n className=\"p-1.5 text-text-secondary hover:text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors\"\n title={tr('channel.delete', 'Delete')}\n >\n <Trash2 size={14} />\n </button>\n </PermissionGuard>\n )}\n </div>\n </td>\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n\n {/* Table footer — pagination */}\n <div className=\"px-4 py-2.5 border-t border-border-subtle flex items-center justify-between\">\n <p className=\"text-xs text-text-secondary\">\n {tr('channel.showing', 'Showing')}{' '}\n <span className=\"font-medium text-text-primary\">\n {total === 0 ? 0 : currentPage * pageSize + 1}–\n {Math.min((currentPage + 1) * pageSize, total)}\n </span>{' '}\n {tr('channel.of', 'of')}{' '}\n <span className=\"font-medium text-text-primary\">{total}</span>{' '}\n {tr('channel.channelsLower', 'channels')}\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={currentPage === 0}\n className=\"px-2.5 py-1 text-xs border border-border-subtle rounded hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n >\n {tr('channel.previous', 'Prev')}\n </button>\n <span className=\"text-xs 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={currentPage >= totalPages - 1}\n className=\"px-2.5 py-1 text-xs border border-border-subtle rounded hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n >\n {tr('channel.next', 'Next')}\n </button>\n </div>\n </div>\n </GlassCard>\n )}\n\n {/* ── Quick Links ──────────────────────────────────────────────── */}\n {channels.length > 0 && (\n <div className=\"grid gap-3 sm:grid-cols-3\" data-tour=\"channels-dashboard-quick-links\">\n <button\n type=\"button\"\n onClick={() => navigate('/channels/?tab=all')}\n className=\"flex items-center gap-3 p-3 bg-gloss-card border border-border-seam rounded-lg shadow-[var(--shadow-pop)] hover:bg-action-primary-bg/10 transition-colors text-left\"\n >\n <Radio size={16} className=\"text-accent-primary shrink-0\" />\n <div className=\"min-w-0\">\n <p className=\"text-sm font-medium text-text-primary\">\n {tr('channel.allChannels', 'All Channels')}\n </p>\n <p className=\"text-xs text-text-secondary truncate\">\n {tr('channel.browseChannels', 'Browse and manage channel cards')}\n </p>\n </div>\n </button>\n <button\n type=\"button\"\n onClick={() => navigate('/channels/?tab=connections')}\n className=\"flex items-center gap-3 p-3 bg-gloss-card border border-border-seam rounded-lg shadow-[var(--shadow-pop)] hover:bg-action-primary-bg/10 transition-colors text-left\"\n >\n <Cable size={16} className=\"text-accent-blue shrink-0\" />\n <div className=\"min-w-0\">\n <p className=\"text-sm font-medium text-text-primary\">\n {tr('channel.connections', 'Connections')}\n </p>\n <p className=\"text-xs text-text-secondary truncate\">\n {tr('channel.connectionsSubtitle', 'OAuth, API keys & credentials')}\n </p>\n </div>\n </button>\n <button\n type=\"button\"\n onClick={() => navigate('/channels/?tab=send')}\n className=\"flex items-center gap-3 p-3 bg-gloss-card border border-border-seam rounded-lg shadow-[var(--shadow-pop)] hover:bg-action-primary-bg/10 transition-colors text-left\"\n >\n <Activity size={16} className=\"text-accent-violet shrink-0\" />\n <div className=\"min-w-0\">\n <p className=\"text-sm font-medium text-text-primary\">\n {tr('channel.sendMessage', 'Send Message')}\n </p>\n <p className=\"text-xs text-text-secondary truncate\">\n {tr('channel.sendMessageSubtitle', 'Send a test or one-off notification')}\n </p>\n </div>\n </button>\n </div>\n )}\n </div>\n </PermissionGuard>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChannelDashboardPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/ChannelDashboardPage.tsx"],"sourcesContent":["/**\n * Channel Dashboard Page\n *\n * Main overview page for the Channel microfrontend.\n * Fetches real data from global-channel-svc via the useChannels hook.\n *\n * Sections:\n * 1. Header with Create Channel action\n * 2. KPI summary cards (total, active, healthy, connected)\n * 3. Search + platform/status filters\n * 4. Channel table with inline actions\n */\n\nimport { useState, useMemo, useCallback, useEffect, useRef } from 'react';\nimport { nativeImpact, nativeNotify } from '../../../../utils/nativeBridge';\nimport { subscribeShellEvent } from '../../../utils/shellBridge';\nimport {\n CTAOverflowMenu,\n GlassCard,\n AuroraBackground,\n GradientText,\n IllustratedEmptyState,\n PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport {\n CHANNEL_HEALTH_CHANGED_SUBSCRIPTION,\n useChannelSubscription,\n} from '../../../hooks/useChannelSubscription';\nimport { useNavigate } from 'react-router';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport {\n Radio,\n Plus,\n Search,\n Loader2,\n AlertCircle,\n RefreshCw,\n Power,\n PowerOff,\n Eye,\n Trash2,\n CheckCircle2,\n XCircle,\n AlertTriangle,\n HelpCircle,\n Cable,\n MessageSquare,\n ShieldCheck,\n Activity,\n LayoutDashboard,\n} from 'lucide-react';\nimport {\n useChannels,\n type Channel,\n type ChannelPlatform,\n type ChannelStatus,\n type ConnectionHealth,\n} from '../../../hooks/useChannels';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\nimport { HEALTH_I18N, PLATFORM_I18N, STATUS_I18N, translateLabel } from '../i18n';\n\n// ============================================================================\n// DISPLAY CONFIG\n// ============================================================================\n\nconst PLATFORM_CONFIG: Record<ChannelPlatform, { label: string; color: string }> = {\n EMAIL: { label: 'Email', color: 'bg-accent-blue-subtle text-accent-blue' },\n SMS: { label: 'SMS', color: 'bg-status-success-bg-subtle text-status-success-text' },\n PUSH: { label: 'Push', color: 'bg-accent-purple-subtle text-accent-purple' },\n INAPP: { label: 'In-App', color: 'bg-accent-indigo-subtle text-accent-indigo' },\n WEBHOOK: { label: 'Webhook', color: 'bg-accent-orange-subtle text-accent-orange' },\n SLACK: { label: 'Slack', color: 'bg-accent-pink-subtle text-accent-pink' },\n TEAMS: { label: 'Teams', color: 'bg-accent-cyan-subtle text-accent-cyan' },\n DISCORD: { label: 'Discord', color: 'bg-accent-violet-subtle text-accent-violet' },\n WHATSAPP: { label: 'WhatsApp', color: 'bg-accent-emerald-subtle text-accent-emerald' },\n WEBCHAT: { label: 'Webchat', color: 'bg-accent-teal-subtle text-accent-teal' },\n};\n\nconst STATUS_CONFIG: Record<\n ChannelStatus,\n { label: string; dotColor: string; textColor: string; icon: typeof CheckCircle2 }\n> = {\n ACTIVE: {\n label: 'Active',\n dotColor: 'bg-status-success-bg',\n textColor: 'text-status-success-text',\n icon: CheckCircle2,\n },\n INACTIVE: {\n label: 'Inactive',\n dotColor: 'bg-text-tertiary',\n textColor: 'text-text-secondary',\n icon: PowerOff,\n },\n ERROR: {\n label: 'Error',\n dotColor: 'bg-status-error-bg-subtle',\n textColor: 'text-status-error-text',\n icon: XCircle,\n },\n SUSPENDED: {\n label: 'Suspended',\n dotColor: 'bg-status-warning-bg',\n textColor: 'text-status-warning-text',\n icon: AlertTriangle,\n },\n ARCHIVED: {\n label: 'Archived',\n dotColor: 'bg-text-tertiary',\n textColor: 'text-text-secondary',\n icon: PowerOff,\n },\n};\n\nconst HEALTH_CONFIG: Record<\n ConnectionHealth,\n { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n HEALTHY: { label: 'Healthy', color: 'text-status-success-text', icon: CheckCircle2 },\n DEGRADED: { label: 'Degraded', color: 'text-status-warning-text', icon: AlertTriangle },\n UNHEALTHY: { label: 'Unhealthy', color: 'text-status-error-text', icon: XCircle },\n UNKNOWN: { label: 'Unknown', color: 'text-text-secondary', icon: HelpCircle },\n};\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\nfunction formatRelativeTime(dateStr: string): string {\n const diffMs = Date.now() - new Date(dateStr).getTime();\n if (Number.isNaN(diffMs) || diffMs < 0) return 'just now';\n const sec = Math.floor(diffMs / 1000);\n if (sec < 60) return 'just now';\n const min = Math.floor(sec / 60);\n if (min < 60) return `${min}m ago`;\n const hr = Math.floor(min / 60);\n if (hr < 24) return `${hr}h ago`;\n const d = Math.floor(hr / 24);\n if (d < 7) return `${d}d ago`;\n if (d < 30) return `${Math.floor(d / 7)}w ago`;\n return `${Math.floor(d / 30)}mo ago`;\n}\n\n// ============================================================================\n// SUB-COMPONENTS\n// ============================================================================\n\nfunction KpiCard({\n icon: Icon,\n iconClass,\n value,\n label,\n sub,\n featured,\n}: {\n icon: typeof Radio;\n iconClass: string;\n value: string | number;\n label: string;\n sub?: string;\n featured?: boolean;\n}) {\n return (\n <GlassCard\n treatment={featured ? 'glass' : 'metric'}\n glow={featured}\n className=\"p-4 border-border-seam\"\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"p-2 rounded-lg bg-accent-primary/10\">\n <Icon size={18} className={iconClass} />\n </div>\n <div>\n <p className=\"text-2xl font-bold text-text-primary leading-tight tabular-nums\">{value}</p>\n <p className=\"text-xs text-text-secondary\">{label}</p>\n </div>\n </div>\n {sub && <p className=\"text-[11px] text-text-muted mt-2 pl-11\">{sub}</p>}\n </GlassCard>\n );\n}\n\n// ============================================================================\n// MAIN COMPONENT\n// ============================================================================\n\nexport function ChannelDashboardPage() {\n const navigate = useNavigate();\n const { hasPermission } = usePermissions();\n // Channel creation is admin-only (channel:create) — hide the affordance otherwise.\n const canCreate = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_CREATE);\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 [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);\n const [actionLoading, setActionLoading] = useState<string | null>(null);\n const pageSize = 10;\n const [currentPage, setCurrentPage] = useState(0);\n const getPlatformConfig = (platform: ChannelPlatform) => {\n const config = PLATFORM_CONFIG[platform] ?? {\n label: platform,\n color: 'bg-bg-sunken text-text-tertiary',\n };\n return {\n ...config,\n label: translateLabel(platform, PLATFORM_I18N, tr),\n };\n };\n const getStatusConfig = (status: ChannelStatus) => {\n const config = STATUS_CONFIG[status] ?? STATUS_CONFIG.INACTIVE;\n return {\n ...config,\n label: translateLabel(status, STATUS_I18N, tr),\n };\n };\n const getHealthConfig = (health: ConnectionHealth) => {\n const config = HEALTH_CONFIG[health] ?? HEALTH_CONFIG.UNKNOWN;\n return {\n ...config,\n label: translateLabel(health, HEALTH_I18N, tr),\n };\n };\n\n const {\n channels,\n isLoading,\n error,\n total,\n filter,\n updateFilter,\n deleteChannel,\n activateChannel,\n deactivateChannel,\n runHealthCheck,\n refetch,\n } = useChannels();\n\n const totalPages = Math.max(1, Math.ceil(total / pageSize));\n\n const refetchRef = useRef(refetch);\n useEffect(() => {\n refetchRef.current = refetch;\n });\n\n useEffect(() => {\n void refetchRef.current({ offset: currentPage * pageSize, limit: pageSize });\n }, [currentPage, pageSize]);\n\n useEffect(() => {\n void Promise.resolve().then(() => setCurrentPage(0));\n }, [filter.search, filter.platform, filter.status]);\n\n const { organizationId } = useChannelContext();\n\n // Real-time channel health stream. Subscribes when the gateway exposes\n // `channelHealthChanged`; otherwise falls back to polling every 60s.\n // Conservative fallback interval keeps gateway/svc cost low when subs\n // are unavailable; live updates flow through the subscription path.\n useChannelSubscription({\n query: CHANNEL_HEALTH_CHANGED_SUBSCRIPTION,\n variables: { organizationId },\n operationName: 'ChannelHealthChanged',\n enabled: Boolean(organizationId),\n onData: () => void refetch(),\n pollFn: refetch,\n pollIntervalMs: 60_000,\n });\n\n // ── Cross-MFE refresh: subscribe to channel/connection bus events so the\n // dashboard auto-updates when another tab or another MFE mutates state. ─\n useEffect(() => {\n const events = [\n 'channel.created',\n 'channel.updated',\n 'channel.deleted',\n 'connection.created',\n 'connection.updated',\n 'connection.deleted',\n 'delivery.completed',\n 'webhook.received',\n ];\n const unsubs = events.map((name) => subscribeShellEvent(name, () => void refetch()));\n return () => unsubs.forEach((u) => u());\n }, [refetch]);\n\n // ── Derived KPIs ──────────────────────────────────────────────────────\n const kpis = useMemo(() => {\n let active = 0;\n let healthy = 0;\n let connected = 0;\n let messages24h = 0;\n let errored = 0;\n let unhealthy = 0;\n\n for (const ch of channels) {\n if (ch.status === 'ACTIVE') active++;\n if (ch.status === 'ERROR') errored++;\n if (ch.connectionHealth === 'HEALTHY') healthy++;\n if (ch.connectionHealth === 'UNHEALTHY') unhealthy++;\n if (ch.isConnected) connected++;\n messages24h += ch.messageCount24h ?? 0;\n }\n\n return { active, healthy, connected, messages24h, errored, unhealthy };\n }, [channels]);\n\n // ── Action handlers ───────────────────────────────────────────────────\n const handleDelete = useCallback(\n async (id: string) => {\n void nativeImpact('medium');\n setActionLoading(id);\n try {\n await deleteChannel(id);\n void nativeNotify('success');\n setDeleteConfirm(null);\n } catch (err) {\n void nativeNotify('error');\n throw err;\n } finally {\n setActionLoading(null);\n }\n },\n [deleteChannel]\n );\n\n const handleToggle = useCallback(\n async (ch: Channel) => {\n setActionLoading(ch.id);\n try {\n if (ch.status === 'ACTIVE') await deactivateChannel(ch.id);\n else await activateChannel(ch.id);\n } finally {\n setActionLoading(null);\n }\n },\n [activateChannel, deactivateChannel]\n );\n\n const handleHealthCheck = useCallback(\n async (id: string) => {\n setActionLoading(id);\n try {\n await runHealthCheck(id);\n } finally {\n setActionLoading(null);\n }\n },\n [runHealthCheck]\n );\n\n // ── Render ────────────────────────────────────────────────────────────\n return (\n <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_READ}>\n <div className=\"space-y-5 p-3 sm:p-6\">\n {/* ── Header ───────────────────────────────────────────────────── */}\n <div className=\"relative overflow-hidden rounded-xl\">\n <AuroraBackground intensity=\"subtle\" />\n <div className=\"flex flex-col gap-3 p-2 sm:flex-row sm:items-center sm:justify-between\">\n <div className=\"flex items-center gap-3\">\n <div className=\"p-2 rounded-lg bg-accent-primary/10\">\n <LayoutDashboard size={20} className=\"text-accent-primary\" />\n </div>\n <div>\n <h1 className=\"text-xl font-bold text-text-primary\">\n <GradientText>{tr('channel.channelDashboard', 'Channel Dashboard')}</GradientText>\n </h1>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'channel.dashboardSubtitle',\n 'Manage and monitor your communication channels'\n )}\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\" data-tour=\"channels-dashboard-create-button\">\n <CTAOverflowMenu\n primary={\n canCreate\n ? {\n label: tr('channel.createChannel', 'Create Channel'),\n icon: <Plus size={16} aria-hidden=\"true\" />,\n onSelect: () => navigate('/channels/create'),\n }\n : undefined\n }\n actions={[\n {\n label: tr('channel.refresh', 'Refresh'),\n icon: <RefreshCw size={16} aria-hidden=\"true\" />,\n onSelect: () => void refetch(),\n },\n ]}\n />\n </div>\n </div>\n </div>\n\n {/* ── Page purpose ─────────────────────────────────────────────── */}\n <PagePurpose icon={<Radio size={15} aria-hidden=\"true\" />}>\n {tr(\n 'channel.dashboardPurpose',\n 'Your command centre for every outbound communication channel — Email, SMS, Push, Slack, WhatsApp and more. Watch health and delivery volume at a glance, spot channels in error, and jump straight to fixing or testing them. Use it to confirm a channel is live before a campaign or to triage why a notification did not arrive.'\n )}\n </PagePurpose>\n\n {/* ── KPI Cards ────────────────────────────────────────────────── */}\n <div\n data-tour=\"channels-dashboard-kpi-section\"\n className=\"grid gap-3 grid-cols-2 md:grid-cols-3 lg:grid-cols-4\"\n >\n <KpiCard\n featured\n icon={Radio}\n iconClass=\"text-accent-primary\"\n value={total}\n label={tr('channel.totalChannels', 'Total Channels')}\n sub={\n kpis.active > 0\n ? `${kpis.active} ${tr('channel.statusLabel.active', 'Active').toLowerCase()}, ${total - kpis.active} ${tr('channel.statusLabel.inactive', 'Inactive').toLowerCase()}`\n : undefined\n }\n />\n <KpiCard\n icon={ShieldCheck}\n iconClass=\"text-status-success-text\"\n value={kpis.healthy}\n label={tr('channel.healthy', 'Healthy')}\n sub={\n kpis.unhealthy > 0\n ? `${kpis.unhealthy} ${tr('channel.healthLabel.unhealthy', 'Unhealthy').toLowerCase()}`\n : total > 0\n ? kpis.healthy === total\n ? tr('channel.allSystemsNominal', 'All systems nominal')\n : `${total - kpis.healthy} ${tr('channel.healthLabel.unchecked', 'unchecked')}`\n : undefined\n }\n />\n <KpiCard\n icon={Cable}\n iconClass=\"text-accent-blue\"\n value={kpis.connected}\n label={tr('channel.connected', 'Connected')}\n sub={\n total > 0\n ? `${total - kpis.connected} ${tr('channel.disconnected', 'Disconnected').toLowerCase()}`\n : undefined\n }\n />\n <KpiCard\n icon={MessageSquare}\n iconClass=\"text-accent-violet\"\n value={kpis.messages24h.toLocaleString()}\n label={tr('channel.messages24h', 'Messages (24h)')}\n />\n </div>\n\n {/* ── Alerts ───────────────────────────────────────────────────── */}\n {kpis.errored > 0 && (\n <div className=\"flex items-center gap-3 p-3 border border-status-error-border/30 bg-status-error-bg-subtle rounded-lg\">\n <AlertCircle size={16} className=\"text-status-error-text shrink-0\" />\n <p className=\"text-sm text-status-error-text\">\n <span className=\"font-semibold\">{kpis.errored}</span>{' '}\n {tr(\n kpis.errored === 1\n ? 'channel.errorStateSummarySingle'\n : 'channel.errorStateSummaryMultiple',\n kpis.errored === 1 ? 'channel in error state' : 'channels in error state'\n )}\n </p>\n <button\n type=\"button\"\n onClick={() => updateFilter({ status: 'ERROR' as ChannelStatus })}\n className=\"ml-auto text-xs font-medium text-status-error-text hover:text-status-error-text/80 transition-colors\"\n >\n {tr('channel.showErrors', 'Show errors')}\n </button>\n </div>\n )}\n\n {/* ── Search & Filters ─────────────────────────────────────────── */}\n <div\n className=\"flex flex-col gap-3 sm:flex-row sm:items-center\"\n data-tour=\"channels-dashboard-search-filters\"\n >\n <div className=\"relative flex-1\">\n <Search\n size={14}\n className=\"absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n />\n <input\n type=\"text\"\n aria-label={tr('channel.searchChannels', 'Search channels...')}\n placeholder={tr('channel.searchChannels', 'Search channels...')}\n value={filter.search || ''}\n onChange={(e) => updateFilter({ search: e.target.value })}\n className=\"w-full pl-9 pr-4 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 placeholder:text-text-secondary\"\n />\n </div>\n\n <select\n value={filter.platform || ''}\n onChange={(e) =>\n updateFilter({ platform: (e.target.value as ChannelPlatform) || undefined })\n }\n className=\"px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-text-primary\"\n >\n <option value=\"\">{tr('channel.allPlatforms', 'All Platforms')}</option>\n {Object.entries(PLATFORM_CONFIG).map(([key, cfg]) => (\n <option key={key} value={key}>\n {cfg.label}\n </option>\n ))}\n </select>\n\n <select\n value={filter.status || ''}\n onChange={(e) =>\n updateFilter({ status: (e.target.value as ChannelStatus) || undefined })\n }\n className=\"px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-text-primary\"\n >\n <option value=\"\">{tr('channel.allStatus', 'All Status')}</option>\n {Object.entries(STATUS_CONFIG).map(([key, cfg]) => (\n <option key={key} value={key}>\n {cfg.label}\n </option>\n ))}\n </select>\n </div>\n\n {/* ── Error State ──────────────────────────────────────────────── */}\n {error && (\n <div className=\"flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border/30 rounded-lg\">\n <AlertCircle size={18} className=\"text-status-error-text shrink-0\" />\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium text-status-error-text\">\n {tr('channel.loadFailed', 'Failed to load channels')}\n </p>\n <p className=\"text-xs text-status-error-text/70 truncate\">{error}</p>\n </div>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"shrink-0 px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors\"\n >\n {tr('channel.retry', 'Retry')}\n </button>\n </div>\n )}\n\n {/* ── Loading ──────────────────────────────────────────────────── */}\n {isLoading && channels.length === 0 && (\n <div className=\"flex items-center justify-center py-16\">\n <Loader2 size={28} className=\"animate-spin text-accent-primary\" />\n </div>\n )}\n\n {/* ── Empty State ──────────────────────────────────────────────── */}\n {!isLoading && !error && channels.length === 0 && (\n <IllustratedEmptyState\n illustration={\n filter.search || filter.platform || filter.status ? 'empty-search' : 'onboarding'\n }\n title={\n filter.search || filter.platform || filter.status\n ? tr('channel.noChannelsMatchFilter', 'No channels match your filters')\n : tr('channel.noChannels', 'No channels yet')\n }\n description={\n filter.search || filter.platform || filter.status\n ? tr('channel.adjustFilters', 'Try adjusting your search or filters.')\n : tr(\n 'channel.createFirstChannel',\n 'Create your first communication channel to start sending messages across Email, SMS, Push, Slack and more.'\n )\n }\n action={\n canCreate && !(filter.search || filter.platform || filter.status) ? (\n <button\n type=\"button\"\n onClick={() => navigate('/channels/create')}\n className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors\"\n >\n <Plus size={14} />\n {tr('channel.createChannel', 'Create Channel')}\n </button>\n ) : undefined\n }\n />\n )}\n\n {/* ── Channel Table ────────────────────────────────────────────── */}\n {channels.length > 0 && (\n <GlassCard\n treatment=\"plain\"\n className=\"border-border-seam rounded-lg overflow-hidden p-0\"\n data-tour=\"channels-dashboard-table\"\n >\n <div className=\"overflow-x-auto min-w-full\">\n <table className=\"w-full text-sm min-w-[800px]\">\n <thead>\n <tr className=\"hover:bg-action-primary-bg/10 border-b border-border-subtle\">\n <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.channel', 'Channel')}\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.platform', 'Platform')}\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.status', 'Status')}\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.health', 'Health')}\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.connection', 'Connection')}\n </th>\n <th className=\"text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.msgs24h', 'Msgs 24h')}\n </th>\n <th className=\"text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.updated', 'Updated')}\n </th>\n <th className=\"text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider\">\n {tr('channel.actions', 'Actions')}\n </th>\n </tr>\n </thead>\n\n <tbody className=\"divide-y divide-border\">\n {channels.map((ch) => {\n const isAL = actionLoading === ch.id;\n\n return (\n <tr\n key={ch.id}\n className=\"bg-surface hover:bg-action-primary-bg/60 transition-colors group\"\n >\n {/* Name */}\n <td className=\"px-4 py-3\">\n <button\n type=\"button\"\n onClick={() => navigate(`/channels/${ch.id}`)}\n className=\"text-left group/name\"\n >\n <p className=\"font-medium text-text-primary group-hover/name:text-accent-primary transition-colors truncate max-w-[200px]\">\n {ch.name}\n </p>\n {ch.description && (\n <p className=\"text-xs text-text-secondary truncate max-w-[200px]\">\n {ch.description}\n </p>\n )}\n </button>\n </td>\n\n {/* Platform */}\n <td className=\"px-4 py-3\">\n <span\n className={`inline-flex items-center px-2 py-0.5 text-[11px] font-semibold rounded-full ${getPlatformConfig(ch.platform).color}`}\n >\n {getPlatformConfig(ch.platform).label}\n </span>\n {ch.adapterType && (\n <p className=\"text-[10px] text-text-secondary mt-0.5 font-mono\">\n {ch.adapterType.replace(/_/g, ' ')}\n </p>\n )}\n </td>\n\n {/* Status */}\n <td className=\"px-4 py-3\">\n <span className=\"inline-flex items-center gap-1.5\">\n <span\n className={`w-1.5 h-1.5 rounded-full ${getStatusConfig(ch.status).dotColor} ${\n ch.status === 'ACTIVE' ? 'motion-safe:animate-vc-glow-pulse' : ''\n }`}\n />\n <span className={`text-xs ${getStatusConfig(ch.status).textColor}`}>\n {getStatusConfig(ch.status).label}\n </span>\n </span>\n </td>\n\n {/* Health */}\n <td className=\"px-4 py-3\">\n <span\n className={`inline-flex items-center gap-1 text-xs ${getHealthConfig(ch.connectionHealth).color}`}\n >\n {(() => {\n const Icon = getHealthConfig(ch.connectionHealth).icon;\n return <Icon size={12} />;\n })()}\n {getHealthConfig(ch.connectionHealth).label}\n </span>\n </td>\n\n {/* Connection */}\n <td className=\"px-4 py-3\">\n <span\n className={`text-xs ${ch.isConnected ? 'text-status-success-text' : 'text-text-secondary'}`}\n >\n {ch.isConnected\n ? tr('channel.connected', 'Connected')\n : tr('channel.disconnected', 'Disconnected')}\n </span>\n </td>\n\n {/* Messages 24h */}\n <td className=\"px-4 py-3 text-right\">\n <span className=\"text-xs text-text-primary tabular-nums\">\n {(ch.messageCount24h ?? 0).toLocaleString()}\n </span>\n </td>\n\n {/* Updated */}\n <td className=\"px-4 py-3 text-right\">\n <span className=\"text-xs text-text-secondary whitespace-nowrap\">\n {formatRelativeTime(ch.updatedAt)}\n </span>\n </td>\n\n {/* Actions */}\n <td className=\"px-4 py-3\">\n <div className=\"flex items-center justify-end gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity\">\n <button\n type=\"button\"\n onClick={() => navigate(`/channels/${ch.id}`)}\n className=\"p-1.5 text-text-secondary hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors\"\n title={tr('channel.view', 'View')}\n >\n <Eye size={14} />\n </button>\n\n <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_EXECUTE}>\n <button\n type=\"button\"\n onClick={() => handleHealthCheck(ch.id)}\n disabled={isAL}\n className=\"p-1.5 text-text-secondary hover:text-accent-blue hover:bg-accent-blue-subtle rounded transition-colors disabled:opacity-40\"\n title={tr('channel.healthCheck', 'Health Check')}\n >\n {isAL ? (\n <Loader2 size={14} className=\"animate-spin\" />\n ) : (\n <RefreshCw size={14} />\n )}\n </button>\n </PermissionGuard>\n\n <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_UPDATE}>\n <button\n type=\"button\"\n onClick={() => handleToggle(ch)}\n disabled={isAL}\n className={`p-1.5 rounded transition-colors disabled:opacity-40 ${\n ch.status === 'ACTIVE'\n ? 'text-text-secondary hover:text-status-warning-text hover:bg-status-warning-bg-subtle'\n : 'text-text-secondary hover:text-status-success-text hover:bg-status-success-bg-subtle'\n }`}\n title={\n ch.status === 'ACTIVE'\n ? tr('channel.deactivate', 'Deactivate')\n : tr('channel.activate', 'Activate')\n }\n >\n {ch.status === 'ACTIVE' ? (\n <PowerOff size={14} />\n ) : (\n <Power size={14} />\n )}\n </button>\n </PermissionGuard>\n\n {deleteConfirm === ch.id ? (\n <span className=\"inline-flex items-center gap-1 ml-1\">\n <button\n type=\"button\"\n onClick={() => handleDelete(ch.id)}\n disabled={isAL}\n className=\"px-1.5 py-0.5 text-[11px] font-medium text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors\"\n >\n {isAL ? '...' : tr('channel.yes', 'Yes')}\n </button>\n <button\n type=\"button\"\n onClick={() => setDeleteConfirm(null)}\n className=\"px-1.5 py-0.5 text-[11px] text-text-secondary hover:bg-action-primary-bg/10 rounded transition-colors\"\n >\n {tr('channel.no', 'No')}\n </button>\n </span>\n ) : (\n <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELETE}>\n <button\n type=\"button\"\n onClick={() => setDeleteConfirm(ch.id)}\n className=\"p-1.5 text-text-secondary hover:text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors\"\n title={tr('channel.delete', 'Delete')}\n >\n <Trash2 size={14} />\n </button>\n </PermissionGuard>\n )}\n </div>\n </td>\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n\n {/* Table footer — pagination */}\n <div className=\"px-4 py-2.5 border-t border-border-subtle flex items-center justify-between\">\n <p className=\"text-xs text-text-secondary\">\n {tr('channel.showing', 'Showing')}{' '}\n <span className=\"font-medium text-text-primary\">\n {total === 0 ? 0 : currentPage * pageSize + 1}–\n {Math.min((currentPage + 1) * pageSize, total)}\n </span>{' '}\n {tr('channel.of', 'of')}{' '}\n <span className=\"font-medium text-text-primary\">{total}</span>{' '}\n {tr('channel.channelsLower', 'channels')}\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={currentPage === 0}\n className=\"px-2.5 py-1 text-xs border border-border-subtle rounded hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n >\n {tr('channel.previous', 'Prev')}\n </button>\n <span className=\"text-xs 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={currentPage >= totalPages - 1}\n className=\"px-2.5 py-1 text-xs border border-border-subtle rounded hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n >\n {tr('channel.next', 'Next')}\n </button>\n </div>\n </div>\n </GlassCard>\n )}\n\n {/* ── Quick Links ──────────────────────────────────────────────── */}\n {channels.length > 0 && (\n <div className=\"grid gap-3 sm:grid-cols-3\" data-tour=\"channels-dashboard-quick-links\">\n <button\n type=\"button\"\n onClick={() => navigate('/channels/?tab=all')}\n className=\"flex items-center gap-3 p-3 bg-gloss-card border border-border-seam rounded-lg shadow-[var(--shadow-pop)] hover:bg-action-primary-bg/10 transition-colors text-left\"\n >\n <Radio size={16} className=\"text-accent-primary shrink-0\" />\n <div className=\"min-w-0\">\n <p className=\"text-sm font-medium text-text-primary\">\n {tr('channel.allChannels', 'All Channels')}\n </p>\n <p className=\"text-xs text-text-secondary truncate\">\n {tr('channel.browseChannels', 'Browse and manage channel cards')}\n </p>\n </div>\n </button>\n <button\n type=\"button\"\n onClick={() => navigate('/channels/?tab=connections')}\n className=\"flex items-center gap-3 p-3 bg-gloss-card border border-border-seam rounded-lg shadow-[var(--shadow-pop)] hover:bg-action-primary-bg/10 transition-colors text-left\"\n >\n <Cable size={16} className=\"text-accent-blue shrink-0\" />\n <div className=\"min-w-0\">\n <p className=\"text-sm font-medium text-text-primary\">\n {tr('channel.connections', 'Connections')}\n </p>\n <p className=\"text-xs text-text-secondary truncate\">\n {tr('channel.connectionsSubtitle', 'OAuth, API keys & credentials')}\n </p>\n </div>\n </button>\n <button\n type=\"button\"\n onClick={() => navigate('/channels/?tab=send')}\n className=\"flex items-center gap-3 p-3 bg-gloss-card border border-border-seam rounded-lg shadow-[var(--shadow-pop)] hover:bg-action-primary-bg/10 transition-colors text-left\"\n >\n <Activity size={16} className=\"text-accent-violet shrink-0\" />\n <div className=\"min-w-0\">\n <p className=\"text-sm font-medium text-text-primary\">\n {tr('channel.sendMessage', 'Send Message')}\n </p>\n <p className=\"text-xs text-text-secondary truncate\">\n {tr('channel.sendMessageSubtitle', 'Send a test or one-off notification')}\n </p>\n </div>\n </button>\n </div>\n )}\n </div>\n </PermissionGuard>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelSettingsPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/ChannelSettingsPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA2CH,wBAAgB,mBAAmB,
|
|
1
|
+
{"version":3,"file":"ChannelSettingsPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/ChannelSettingsPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA2CH,wBAAgB,mBAAmB,gCAkelC"}
|