Skip to content

feat: Add 5C Dashboard prototype for #291#305

Open
anushkagupta200615-jpg wants to merge 1 commit into
aboutcode-org:mainfrom
anushkagupta200615-jpg:feat/5c-dashboard
Open

feat: Add 5C Dashboard prototype for #291#305
anushkagupta200615-jpg wants to merge 1 commit into
aboutcode-org:mainfrom
anushkagupta200615-jpg:feat/5c-dashboard

Conversation

@anushkagupta200615-jpg

Copy link
Copy Markdown

Fixes #0000

Tasks

  • PR is descriptively titled 📑 and links the original issue above 🔗
  • Tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR
    Run tests locally to check for errors.
  • Commits are in uniquely-named feature branch and has no merge conflicts 📁

Description

Resolves #291

This PR introduces a standalone frontend prototype for the 5C (Continuous Code Compliance Control Center) dashboard. As proposed in the epic, this prototype demonstrates visual compliance observability for software supply chains by providing a single pane of glass for monitoring packages, licenses, vulnerabilities, and CRA compliance.

The prototype is built as a lightweight, zero-dependency static application (HTML/CSS/JS) located in the 5c-dashboard/ directory.

Key Features Implemented

  • Key Compliance Indicators (KCIs): Configurable KCI cards displaying Total Packages, License Compliance, Vulnerability Score, CRA Compliance, Open Issues, and aggregate Risk Level.
  • Visual Compliance Observability:
    • 30-day compliance and vulnerability sparkline trends
    • License category breakdown donut chart
    • Package ecosystem distribution bars
    • Vulnerability severity distribution tracking
  • Actionable Insights & Drill-Down: Clickable KCI cards, event rows, and product rows that open a slide-in detail panel with full context and mock workflow action buttons.
  • Policy Rules & Thresholds: A rules engine UI showing 8 predefined policies (e.g., Critical Vulnerability Limit, CRA Readiness) with progress bars and clear Passing/Breach statuses.
  • Compliance Events Timeline: A filterable timeline aggregating mock events from ScanCode, DejaCode, and VulnerableCode, tagged with severity and status.
  • Modern Premium UI: A dark-mode design system utilizing CSS glassmorphism, responsive grid layouts, and micro-animations for an engaging user experience.

Testing Instructions

  1. Navigate to the 5c-dashboard/ directory.
  2. Open index.html in any modern web browser or serve it locally (python -m http.server).
  3. Verify that the layout is responsive, charts render correctly, and clicking elements opens the drill-down detail panels.
Screenshot 2026-06-25 005738

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.

Project: 5C: Continuous Code Compliance Control Center

1 participant