+
= 98 ? 1 : rate >= 95 ? 0.85 : 0.65 }}
+ />
+
+ );
+}
+
+function ChannelCard({ ch }: { ch: ChannelDetail }) {
+ return (
+
+ {/* Header */}
+
+
{ch.icon}
+
+
{ch.label}
+
{ch.protocol}
+
+
+ {statusLabel(ch.status)}
+
+
{ch.description}
+
+ {/* Subscriber count */}
+
+ Subscribers
+
+ {formatNumber(ch.subscriberCount)}
+
+
+
+ {/* Delivery rate bar */}
+
+ Delivery rate
+ {ch.stats.deliveryRate.toFixed(2)}%
+
+
+
+ {/* Stats grid */}
+
+
+
+ 0 ? `${((ch.stats.failed / ch.stats.sent) * 100).toFixed(1)}%` : undefined}
+ />
+
+
+
+ );
+}
+
+function ChannelCardSkeleton() {
+ return (
+
+
+
+
+
+
+ {[1, 2, 3, 4].map((i) => (
+
+ ))}
+
+
+ );
+}
+
+// ── Summary strip ─────────────────────────────────────────────────────────────
+
+function SummaryStrip({ channels }: { channels: ChannelDetail[] }) {
+ const totalSubs = channels.reduce((s, c) => s + c.subscriberCount, 0);
+ const totalSent = channels.reduce((s, c) => s + c.stats.sent, 0);
+ const totalFailed = channels.reduce((s, c) => s + c.stats.failed, 0);
+ const overallRate = ((totalSent - totalFailed) / totalSent) * 100;
+
+ return (
+
+
+ {channels.length}
+ Channels
+
+
+ {formatNumber(totalSubs)}
+ Total subscribers
+
+
+ {formatNumber(totalSent)}
+ Total sent
+
+
+ {overallRate.toFixed(2)}%
+ Overall delivery rate
+
+
+
+ {channels.filter((c) => c.status === 'active').length}
+
+ Active
+
+
+ );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export function ChannelDetailsPage() {
+ const [channels, setChannels] = useState
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+ setLoading(true);
+ setError(null);
+
+ // Simulate async API fetch — replace with real endpoint when available
+ const timer = window.setTimeout(() => {
+ if (cancelled) return;
+ try {
+ setChannels(MOCK_CHANNELS);
+ } catch {
+ setError('Failed to load channel data. Please try again.');
+ } finally {
+ setLoading(false);
+ }
+ }, 600);
+
+ return () => {
+ cancelled = true;
+ window.clearTimeout(timer);
+ };
+ }, []);
+
+ function handleRetry() {
+ setChannels([]);
+ setLoading(true);
+ setError(null);
+ window.setTimeout(() => {
+ setChannels(MOCK_CHANNELS);
+ setLoading(false);
+ }, 600);
+ }
+
+ return (
+
+ {/* Page header */}
+
+
+ {/* Error banner */}
+ {error && (
+
+ Error: {error}
+
+
+ )}
+
+ {/* Summary strip */}
+ {!loading && !error && }
+
+ {/* Channel grid */}
+
+ {loading
+ ? [1, 2, 3, 4].map((i) => )
+ : channels.map((ch) => )}
+
+
+ );
+}