Skip to content

Add UK Compliance Reports section to RetailShield dashboard #83

@TFT444

Description

@TFT444

Summary

Add a UK Compliance Reports section to frontend/src/RetailShield.jsx that automatically generates live compliance report cards when a CRITICAL incident is detected via the SIMULATE ATTACK flow.

Feature Requirements

Trigger

When SIMULATE ATTACK fires and a CRITICAL severity event is injected, a compliance report card is automatically generated in the new section.

UI Elements

  1. Urgent header banner — Red "UK REGULATORY NOTIFICATION REQUIRED" bar when reports are active
  2. Incident summary table — title, severity, detection time, MITRE technique, affected systems
  3. Live countdown timers:
    • 24h NCSC early-warning (CSR Bill) — turns red when < 6h remaining
    • 72h ICO full report (UK GDPR Art.33) — turns amber when < 24h remaining
  4. Pre-filled 7-section UK draft report (expandable):
    • §1 Incident Overview (auto-filled)
    • §2 Nature of the Breach (auto-filled based on MITRE tactic)
    • §3 Affected Data Categories & Volume (auto-filled)
    • §4 Likely Consequences (auto-filled)
    • §5 Measures Taken (auto-filled from playbook actions)
    • §6 Notification Timeline (auto-filled with deadlines)
    • §7 Data Controller Contact ([REVIEWER] placeholders)
  5. Action buttons:
    • "Submit to ICO" — opens https://ico.org.uk/for-organisations/report-a-breach/ in new tab
    • "Submit to NCSC" — opens https://www.ncsc.gov.uk/section/about-this-website/incident-management in new tab
    • "Download Draft Report" — generates .txt file via URL.createObjectURL
  6. Disclaimer banner — amber warning that human review is required before submission
  7. Empty state — green "No reportable incidents" card when no active compliance reports

Design

  • Match existing dark design system (C tokens: C.card, C.surface, C.border, C.red, C.orange, C.yellow, C.green, C.blue)
  • No external CSS or new dependencies

Affected Files

  • frontend/src/RetailShield.jsx — new state, modified runAttackSimulation, new ComplianceReportCard component, new section in JSX

Acceptance Criteria

  • Section shows green "No reportable incidents" on load
  • Clicking SIMULATE ATTACK generates 4 compliance report cards (one per CRITICAL event)
  • Each card shows live countdown timers that decrement every second
  • Countdowns change colour when approaching deadline (NCSC red < 6h, ICO amber < 24h)
  • Expanding a card shows all 7 draft report sections
  • §7 displays [REVIEWER] placeholders
  • Download button saves a .txt file with the full 7-section report
  • ICO and NCSC buttons open correct official URLs in a new tab
  • Disclaimer banner visible on each expanded card
  • Design matches existing dark theme

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestfrontendReact SOC dashboard component

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions