Skip to content

feat(dashboard): channel details page — closes #496 - #537

Open
kitWarse wants to merge 1 commit into
Core-Foundry:mainfrom
kitWarse:feature/496-channel-details-page
Open

feat(dashboard): channel details page — closes #496#537
kitWarse wants to merge 1 commit into
Core-Foundry:mainfrom
kitWarse:feature/496-channel-details-page

Conversation

@kitWarse

@kitWarse kitWarse commented Jul 26, 2026

Copy link
Copy Markdown

Closes #496


Summary

Implements issue #496 — Create a dedicated page showing channel details, subscriber count, and notification statistics.

New file

dashboard/src/pages/ChannelDetailsPage.tsx

  • Summary strip — aggregate stats across all channels: total channels, subscribers, notifications sent, overall delivery rate, active channel count
  • Channel cards (one per channel: In-App, Email, Discord, Telegram) showing:
    • Icon, channel name, protocol tag (e.g. SMTP / Sendgrid)
    • Status badge — Active / Degraded / Inactive with colour-coded dot indicator
    • Channel description
    • Subscriber count highlighted in the channel's brand colour
    • Delivery rate progress bar (gradient fill, CSS transition)
    • 4-column stats grid: Sent · Delivered · Failed (with failure %) · Pending
  • Skeleton loaders with shimmer animation while data loads
  • Error banner with a Retry button
  • Data loaded via a simulated async fetch — structured to be swapped for a real endpoint

Modified files

dashboard/src/App.tsx — imports ChannelDetailsPage, adds 'channels' to the Tab type, adds a Channel Details nav button, renders the page

dashboard/src/index.css — full .cd-* stylesheet appended:

  • Responsive grid: 2-col at 900 px, single-col at 600 px
  • Stats grid collapses from 4-col → 2-col on narrow screens
  • Hover lift effect on channel cards

Acceptance Criteria

Criterion Status
Channel details are displayed ✅ Icon, name, protocol, description, status, subscriber count
Statistics load correctly ✅ Skeleton → data transition; error + retry path covered
Responsive layout is maintained ✅ Breakpoints at 900 px and 600 px

- New ChannelDetailsPage component (dashboard/src/pages/ChannelDetailsPage.tsx)
  * Summary strip: total channels, subscribers, sent count, overall delivery rate, active count
  * Per-channel cards with icon, status badge (Active/Degraded/Inactive), protocol tag
  * Subscriber count highlighted in channel brand colour
  * Delivery rate bar with gradient fill animated via CSS transition
  * 4-column stats grid: Sent / Delivered / Failed (with failure %) / Pending
  * Skeleton loader (shimmer animation) while data loads
  * Error banner with retry action
  * Data loaded via simulated async fetch (600 ms timeout) — ready for real API
- App.tsx: import ChannelDetailsPage, add 'channels' Tab type, add nav button, render page
- index.css: full .cd-* stylesheet — responsive at 900 px (2-col stats) and 600 px (single col)

Closes Core-Foundry#496
@drips-wave

drips-wave Bot commented Jul 26, 2026

Copy link
Copy Markdown

@kitWarse Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Display Channel Information Page

1 participant