Dashboard Module

Complete

Overview

The Dashboard is the landing page of the ThreatOps SOCaaS platform. It provides an executive-level operational overview combining MDR case monitoring, threat intelligence, ransomware tracking, and capability utilization into a single view. The dashboard follows a BlueVoyant-inspired portal design with a two-column layout: the left column (70%) shows operational data, while the right column (30%) displays cyber intelligence and platform capabilities.

Additionally, three reusable chart components (Alert Volume, Recent Incidents, Severity Distribution) are used across the dashboard and other pages to visualize security telemetry.

What Was Proposed

Executive dashboard with MDR operational metrics
Case monitoring summary (security, support, health counts)
Security cases tracking with escalation rates and trends
Active cases by severity breakdown
Threat intelligence feed (top targeted sectors, ransomware geography, ransomware groups)
Cyber intel panel with latest advisories
Capability utilization tracking
Interactive charts: alert volume trend, severity distribution pie, recent incidents table
Navigation links to Detection & Response, ThreatOps, Threat Advisories, Compliance Engine

What's Built

Two-column dashboard layout (70/30)	✓ Complete
MDR section with case monitoring	✓ Complete
Security cases (escalated/non-escalated with trends)	✓ Complete
Active security cases by severity	✓ Complete
ThreatOps section (targeted sectors, ransomware geography, ransomware activity)	✓ Complete
Discover section with feature promotion cards	✓ Complete
Cyber Intel panel with advisory feed	✓ Complete
More Capabilities panel with utilization bars	✓ Complete
Alert Volume chart (Recharts AreaChart, 30-day)	✓ Complete
Recent Incidents table component	✓ Complete
Severity Distribution pie chart (Recharts PieChart)	✓ Complete

MDR Section

Managed Detection & Response

The MDR section occupies the top of the left column with a blue Shield icon and "Go to MDR" navigation link. It contains three sub-cards:

Case Monitoring Card — 3-column grid showing Security (orange AlertTriangle icon), Support (blue Headphones icon), and Health (green Heart icon) case counts
Security Cases Card — Progress bars showing escalated cases (red) and non-escalated cases (green) with percentage change indicators and total count footer
Active Security Cases by Severity — Horizontal bar chart showing case counts per severity level (Critical, High, Medium, Low) with color-coded progress bars

Data source: src/lib/dashboard-data.ts (static operational data)

ThreatOps Section

ThreatOps Intelligence

The ThreatOps section shows threat landscape intelligence in a 3-column card grid with an orange Settings icon and "Go to ThreatOps" link:

Top Five Targeted Sectors — Ranked list of industry sectors most targeted by threat actors (e.g., Healthcare, Financial Services, Government)
Ransomware Geography — Ranked list of countries with most ransomware activity
Top Ransomware Activity — Ranked list of active ransomware groups/campaigns

Data source: src/lib/dashboard-data.ts

Discover Section

Discover

Feature promotion section with gradient-accented link cards. Each card has a left-side gradient border (orange-to-blue or blue-to-orange) and links to platform features:

/threat-ops — ThreatOps module
/compliance-engine — Compliance Engine module

Cyber Intel Panel (Right Column)

Cyber Intel

Right-column panel showing a feed of cyber intelligence advisories. Each item has a left-side colored accent bar (orange or blue), title text, date, and a source badge. Links to /threat-advisories for full view.

Data source: cyberIntelItems from src/lib/dashboard-data.ts

More Capabilities Panel (Right Column)

More Capabilities

Right-column panel showing platform capability utilization. Displays a Sparkles icon with utilization percentage text, followed by a list of capability categories each with a horizontal progress bar showing current/total adoption.

Data source: capabilities and capabilityUtilization from src/lib/dashboard-data.ts

Component: Alert Volume Chart

alert-chart.tsx

File: src/components/dashboard/alert-chart.tsx

A Recharts AreaChart showing 30-day alert volume trend with three stacked areas:

Auto-Resolved (green, #22c55e) — Alerts automatically resolved by AI triage
Manual Review (yellow, #eab308) — Alerts requiring analyst investigation
Escalated (red, #ef4444) — Alerts escalated to incidents

Fetches from getAlertVolumeData() API function, falling back to mockAlertTrend data. Uses gradient fills, CartesianGrid, and a custom tooltip with white background.

API Data Source: /api/v1/alerts (aggregated client-side or via custom endpoint)

Component: Recent Incidents

recent-incidents.tsx

File: src/components/dashboard/recent-incidents.tsx

A table showing the 10 most recent incidents sorted by creation date. Columns: ID (orange link), Title (link to detail), Severity (badge), Status (badge), Tenant/Source, MITRE technique (monospace chip), Created (relative time). Has a "View all" link to /incidents.

Fetches from getIncidents({ limit: 10 }), falling back to mockIncidents.

API Data Source: GET /api/v1/incidents/

Component: Severity Distribution

severity-pie.tsx

File: src/components/dashboard/severity-pie.tsx

A Recharts PieChart with donut style (innerRadius=60, outerRadius=100) showing alert distribution by severity level. Each severity has a distinct color. Includes tooltip and legend. Fetches from getSeverityDistribution(), falling back to mockSeverityDist.

API Data Source: /api/v1/alerts/stats (or custom severity distribution endpoint)

Architecture

Page Structure

File: src/app/page.tsx — The root page of the Next.js application.

The dashboard is a client-side rendered page ("use client") that imports static data from src/lib/dashboard-data.ts. It is composed of several function components:

DashboardPage          # Root component, two-column flex layout
  MdrSection             # Left: MDR operational data
    CaseMonitoringCard   # Security/Support/Health counts
    SecurityCasesCard    # Escalated vs non-escalated with progress bars
    ActiveSeverityCard   # Severity breakdown with horizontal bars
  ThreatOpsSection       # Left: Threat intelligence cards (3-column grid)
  DiscoverSection        # Left: Feature promotion cards
  CyberIntelPanel        # Right: Advisory feed
  MoreCapabilitiesPanel  # Right: Capability utilization

Dashboard Data Source

The dashboard primarily uses static data from src/lib/dashboard-data.ts which exports:

caseMonitoring — { security, support, health } counts
securityCases — { total, escalated, nonEscalated, escalatedChange, nonEscalatedChange, periodDays }
activeSeverityCases — Array of { severity, count, color }
targetedSectors — Ranked list of targeted industry sectors
ransomwareGeography — Ranked list of countries
ransomwareActivity — Ranked list of ransomware groups
cyberIntelItems — Array of advisory items
capabilities — Array of { name, current, total }
capabilityUtilization — Overall utilization percentage
discoverFeatures — Feature cards

Chart Component API Calls

alert-chart.tsx     ->  getAlertVolumeData()       ->  /api/v1/alerts (aggregated)
recent-incidents.tsx ->  getIncidents({ limit: 10 }) ->  GET /api/v1/incidents/
severity-pie.tsx    ->  getSeverityDistribution()   ->  /api/v1/alerts/stats

Routing

Layer	Path
/	Frontend root page (Dashboard)
/api/v1/alerts	Alert data for chart component
/api/v1/alerts/stats	Alert statistics for severity pie
/api/v1/incidents	Incident data for recent incidents table

Prerequisites

Recharts — Charting library for AreaChart and PieChart components
Dashboard Data — src/lib/dashboard-data.ts for static operational data
Mock Data — src/lib/mock-data.ts for chart component fallbacks
API Functions — src/lib/api.ts for getAlertVolumeData(), getIncidents(), getSeverityDistribution()
API Client — src/lib/api-client.ts for authenticated HTTP requests
Shared Components — SeverityBadge, StatusBadge, formatRelativeTime utility
Alerts API — /api/v1/alerts for chart data
Incidents API — /api/v1/incidents for recent incidents table