feat(compliance): add time-based trend charts to Compliance page

Add 6 Recharts charts in a collapsible Historical Trends panel on the
Compliance page, covering all Tier-1 recommendations from the reporting
design doc.

Backend — 5 new API endpoints:
  - GET /api/compliance/trends        — active totals + per-team counts per upload
  - GET /api/compliance/mttr          — mean days to resolution per team
  - GET /api/compliance/top-recurring — most persistent active findings by seen_count
  - GET /api/compliance/category-trend — category breakdown per upload (future use)
  - GET /api/archer-tickets/status-trend — ticket pipeline by creation date + status

Frontend — new ComplianceChartsPanel component:
  - Active Findings Over Time (multi-line: total + per-team dashed)
  - Change per Report Cycle (stacked bar: new/recurring + resolved)
  - Team Compliance Health (multi-line per team)
  - Mean Time to Resolution (horizontal bar per team)
  - Most Persistent Findings (horizontal bar top-10 by seen_count)
  - Archer Exception Pipeline (stacked bar by date + status)

All charts degrade gracefully to a no-data placeholder until uploads
accumulate. Panel is collapsible to stay out of the way when not needed.
Adds recharts dependency to frontend.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/routes/archerTickets.js

@@ -217,6 +217,25 @@ function createArcherTicketsRouter(db) {
     });
   });
 
+  // GET /status-trend — ticket counts grouped by creation date + status
+  // Used for time-based Archer pipeline chart on the Compliance page.
+  router.get('/status-trend', requireAuth(db), (req, res) => {
+    db.all(
+      `SELECT DATE(created_at) AS date, status, COUNT(*) AS count
+       FROM archer_tickets
+       GROUP BY DATE(created_at), status
+       ORDER BY date ASC`,
+      [],
+      (err, rows) => {
+        if (err) {
+          console.error('Error fetching Archer status trend:', err);
+          return res.status(500).json({ error: 'Internal server error.' });
+        }
+        res.json({ statusTrend: rows });
+      }
+    );
+  });
+
   return router;
 }
 

backend/routes/compliance.js

@@ -584,6 +584,128 @@ function createComplianceRouter(db, upload, requireAuth, requireRole) {
         }
     });
 
+    // -----------------------------------------------------------------------
+    // GET /trends
+    // Per-upload active totals + per-team counts for time-series charts.
+    // Returns rows ordered ascending by report_date.
+    // -----------------------------------------------------------------------
+    router.get('/trends', async (req, res) => {
+        try {
+            const uploads = await dbAll(db,
+                `SELECT id, report_date,
+                        COALESCE(new_count, 0)       AS new_count,
+                        COALESCE(recurring_count, 0) AS recurring_count,
+                        COALESCE(resolved_count, 0)  AS resolved_count,
+                        COALESCE(new_count, 0) + COALESCE(recurring_count, 0) AS total_active
+                 FROM compliance_uploads
+                 ORDER BY report_date ASC`
+            );
+
+            if (uploads.length === 0) return res.json({ trends: [] });
+
+            // Per-team active counts — items whose upload_id matches the upload
+            // (recurring items have upload_id bumped each cycle, so this is accurate)
+            const teamRows = await dbAll(db,
+                `SELECT ci.upload_id, ci.team, COUNT(ci.id) AS count
+                 FROM compliance_items ci
+                 WHERE ci.team IS NOT NULL
+                 GROUP BY ci.upload_id, ci.team`
+            );
+
+            const teamMap = {};
+            teamRows.forEach(r => {
+                if (!teamMap[r.upload_id]) teamMap[r.upload_id] = {};
+                teamMap[r.upload_id][r.team] = r.count;
+            });
+
+            const trends = uploads.map(u => ({
+                report_date:      u.report_date,
+                new_count:        u.new_count,
+                recurring_count:  u.recurring_count,
+                resolved_count:   u.resolved_count,
+                total_active:     u.total_active,
+                STEAM:            teamMap[u.id]?.STEAM            || 0,
+                'ACCESS-ENG':     teamMap[u.id]?.['ACCESS-ENG']   || 0,
+                'ACCESS-OPS':     teamMap[u.id]?.['ACCESS-OPS']   || 0,
+                INTELDEV:         teamMap[u.id]?.INTELDEV          || 0,
+            }));
+
+            res.json({ trends });
+        } catch (err) {
+            console.error('[Compliance] GET /trends error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /mttr
+    // Mean time to resolution (calendar days) per team, for resolved items.
+    // -----------------------------------------------------------------------
+    router.get('/mttr', async (req, res) => {
+        try {
+            const rows = await dbAll(db,
+                `SELECT
+                     ci.team,
+                     ROUND(AVG(JULIANDAY(ru.report_date) - JULIANDAY(fu.report_date)), 1) AS avg_days,
+                     COUNT(*) AS resolved_count
+                 FROM compliance_items ci
+                 JOIN compliance_uploads fu ON ci.first_seen_upload_id = fu.id
+                 JOIN compliance_uploads ru ON ci.resolved_upload_id    = ru.id
+                 WHERE ci.resolved_upload_id IS NOT NULL
+                   AND fu.report_date IS NOT NULL
+                   AND ru.report_date IS NOT NULL
+                 GROUP BY ci.team
+                 ORDER BY avg_days DESC`
+            );
+            res.json({ mttr: rows });
+        } catch (err) {
+            console.error('[Compliance] GET /mttr error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /top-recurring
+    // Active findings grouped by team + metric_id, sorted by seen_count desc.
+    // Identifies chronic compliance gaps that keep reappearing.
+    // -----------------------------------------------------------------------
+    router.get('/top-recurring', async (req, res) => {
+        try {
+            const rows = await dbAll(db,
+                `SELECT team, metric_id, metric_desc, seen_count, COUNT(*) AS host_count
+                 FROM compliance_items
+                 WHERE status = 'active'
+                 GROUP BY team, metric_id
+                 ORDER BY seen_count DESC, host_count DESC
+                 LIMIT 20`
+            );
+            res.json({ items: rows });
+        } catch (err) {
+            console.error('[Compliance] GET /top-recurring error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /category-trend
+    // Active item counts per category per upload, for stacked area chart.
+    // -----------------------------------------------------------------------
+    router.get('/category-trend', async (req, res) => {
+        try {
+            const rows = await dbAll(db,
+                `SELECT cu.report_date, COALESCE(ci.category, 'Unknown') AS category, COUNT(ci.id) AS count
+                 FROM compliance_uploads cu
+                 JOIN compliance_items ci ON ci.upload_id = cu.id
+                 GROUP BY cu.id, category
+                 ORDER BY cu.report_date ASC`
+            );
+            res.json({ categoryTrend: rows });
+        } catch (err) {
+            console.error('[Compliance] GET /category-trend error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
     return router;
 }
 

docs/time-based-reporting-recommendations.md

@@ -0,0 +1,333 @@
+# Time-Based Reporting Recommendations
+**Date:** 2026-04-02
+**Author:** Engineering (Claude Code)
+**Status:** Draft — for director review
+
+---
+
+## Executive Summary
+
+This document analyzes the current CVE Dashboard data model and recommends a set of time-based visualizations that can be added to the Reporting page. Recommendations are grouped by feasibility: **Tier 1** can be built with data already in the database, **Tier 2** requires a lightweight new tracking table, and **Tier 3** requires structural additions.
+
+---
+
+## Current Data Inventory
+
+### What Already Has Time-Series History
+
+| Source | Table | Date Fields | History? |
+|--------|-------|-------------|----------|
+| Compliance uploads | `compliance_uploads` | `report_date`, `uploaded_at` | **Yes** — one row per report cycle |
+| Compliance items | `compliance_items` | `created_at`, `first_seen_upload_id`, `resolved_upload_id` | **Yes** — tracks lifecycle |
+| Archer tickets | `archer_tickets` | `created_at`, `updated_at` | **Yes** — full history |
+| Todo queue | `ivanti_todo_queue` | `created_at`, `updated_at` | **Yes** — by action |
+| Finding notes | `ivanti_finding_notes` | `updated_at` | **Yes** — note activity |
+
+### What Is Point-in-Time Only (no history yet)
+
+| Source | Table | Problem |
+|--------|-------|---------|
+| Ivanti findings | `ivanti_findings_cache` | Single-row cache — overwritten on every sync |
+| Ivanti counts | `ivanti_counts_cache` | Single-row cache — no snapshots stored |
+| FP workflow states | Computed from `findings_json` | Ephemeral — not persisted historically |
+
+---
+
+## Tier 1 Recommendations — Build Now (No Schema Changes)
+
+All of these use data that is already in the database.
+
+---
+
+### 1.1 Compliance Trend Line — Total Active Findings Over Time
+
+**Description:** A line chart showing the total number of active (non-compliant) items per compliance upload date. This directly answers "are we improving over time?"
+
+**Data Source:**
+```sql
+SELECT
+  cu.report_date,
+  COUNT(ci.id) AS active_count
+FROM compliance_uploads cu
+JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
+GROUP BY cu.id
+ORDER BY cu.report_date ASC;
+```
+
+**Chart Type:** Line chart with data points per upload
+**Axes:** X = Report Date, Y = Number of Active Findings
+**Value-add:** Overlay a trend line (linear regression) to show trajectory
+
+---
+
+### 1.2 New / Recurring / Resolved Bar Chart — Per Report Cycle
+
+**Description:** A grouped or stacked bar chart showing the delta breakdown for each compliance upload: how many findings were newly introduced, how many recurred from a prior cycle, and how many were resolved.
+
+**Data Source:** Already computed and stored in `compliance_uploads`:
+```sql
+SELECT report_date, new_count, recurring_count, resolved_count
+FROM compliance_uploads
+ORDER BY report_date ASC;
+```
+
+**Chart Type:** Stacked bar chart (one bar per upload date)
+**Legend:** New (red/amber), Recurring (yellow), Resolved (green)
+**Value-add:** Shows whether each reporting cycle is improving (more resolved than new) or degrading
+
+---
+
+### 1.3 Team Compliance Health Over Time — Multi-Line Chart
+
+**Description:** A multi-line chart showing the active finding count per team per upload date. Answers "which team is trending better or worse?"
+
+**Data Source:**
+```sql
+SELECT
+  cu.report_date,
+  ci.team,
+  COUNT(ci.id) AS active_count
+FROM compliance_uploads cu
+JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
+GROUP BY cu.id, ci.team
+ORDER BY cu.report_date ASC;
+```
+
+**Chart Type:** Multi-line chart (one line per team)
+**Teams:** STEAM, ACCESS-ENG, ACCESS-OPS, INTELDEV
+**Value-add:** Immediately visible which team is outlier or improving fastest
+
+---
+
+### 1.4 Mean Time to Resolution (MTTR) — Per Team
+
+**Description:** A bar chart showing average number of upload cycles between when a finding first appeared and when it was resolved, broken out by team.
+
+**Data Source:**
+```sql
+SELECT
+  ci.team,
+  AVG(ci.resolved_upload_id - ci.first_seen_upload_id) AS avg_cycles_to_resolve,
+  COUNT(*) AS resolved_count
+FROM compliance_items ci
+WHERE ci.resolved_upload_id IS NOT NULL
+GROUP BY ci.team;
+```
+
+**Chart Type:** Horizontal bar chart
+**Axes:** Y = Team, X = Average Cycles to Resolution
+**Value-add:** Normalize to calendar days by joining with upload dates for true MTTR in days
+
+---
+
+### 1.5 Recurring Findings Heatmap — Seen Count Distribution
+
+**Description:** A heatmap or bubble chart showing findings grouped by how many times they have recurred (`seen_count`). Identifies chronic, long-standing compliance gaps.
+
+**Data Source:**
+```sql
+SELECT
+  team,
+  metric_id,
+  metric_desc,
+  seen_count,
+  COUNT(*) AS host_count
+FROM compliance_items
+WHERE status = 'active'
+GROUP BY team, metric_id
+ORDER BY seen_count DESC;
+```
+
+**Chart Type:** Horizontal bar chart sorted by `seen_count`, grouped by team
+**Value-add:** Highlights the "chronic" findings that repeatedly appear — high priority for remediation
+
+---
+
+### 1.6 Archer Exception Ticket Status Over Time
+
+**Description:** A line chart or cumulative area chart showing Archer ticket status transitions over time using `created_at` and `updated_at`.
+
+**Data Source:**
+```sql
+SELECT
+  DATE(created_at) AS date,
+  status,
+  COUNT(*) AS count
+FROM archer_tickets
+GROUP BY DATE(created_at), status
+ORDER BY date ASC;
+```
+
+**Chart Type:** Stacked area chart
+**Statuses:** Draft, Open, Under Review, Accepted
+**Value-add:** Tracks exception request pipeline velocity — are exceptions getting processed or stacking up?
+
+---
+
+### 1.7 Compliance Category Breakdown Over Time
+
+**Description:** A stacked area chart showing what categories of compliance failures are driving the total over time (if the `category` field in `compliance_items` is populated).
+
+**Data Source:**
+```sql
+SELECT
+  cu.report_date,
+  ci.category,
+  COUNT(ci.id) AS count
+FROM compliance_uploads cu
+JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
+WHERE ci.category IS NOT NULL
+GROUP BY cu.id, ci.category
+ORDER BY cu.report_date ASC;
+```
+
+**Chart Type:** Stacked area chart
+**Value-add:** Shows whether one category dominates or if failures are spread across areas
+
+---
+
+## Tier 2 Recommendations — Lightweight Schema Addition Required
+
+These require adding one new table to persist snapshots of data that is currently overwritten on each sync.
+
+---
+
+### 2.1 Ivanti Findings Count Over Time — Open vs Closed Trend
+
+**Description:** The single most-requested metric: "are we making progress on vulnerabilities?" A line chart showing open and closed Ivanti finding counts over time.
+
+**Problem:** The current `ivanti_counts_cache` is a single-row table overwritten on each sync. No history is kept.
+
+**Solution:** Add a `ivanti_counts_history` table and append a row on every successful sync:
+```sql
+CREATE TABLE ivanti_counts_history (
+  id          INTEGER PRIMARY KEY AUTOINCREMENT,
+  open_count  INTEGER NOT NULL,
+  closed_count INTEGER NOT NULL,
+  recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+**Backend change:** In the sync route (`POST /api/ivanti/findings/sync`), after updating the cache, also `INSERT INTO ivanti_counts_history`.
+
+**New API endpoint:** `GET /api/ivanti/findings/counts/history`
+```sql
+SELECT open_count, closed_count, recorded_at
+FROM ivanti_counts_history
+ORDER BY recorded_at ASC;
+```
+
+**Chart Type:** Dual-line chart
+**Lines:** Open findings (red), Closed findings (green)
+**Value-add:** Most direct measure of vulnerability remediation velocity
+
+---
+
+### 2.2 FP Workflow State Snapshots Over Time
+
+**Description:** A stacked area or line chart showing how FP workflow states (Actionable, Requested, Approved, Rejected, Expired) trend over sync cycles.
+
+**Solution:** Add a `ivanti_fp_workflow_history` table:
+```sql
+CREATE TABLE ivanti_fp_workflow_history (
+  id              INTEGER PRIMARY KEY AUTOINCREMENT,
+  state           TEXT NOT NULL,
+  finding_count   INTEGER NOT NULL DEFAULT 0,
+  id_count        INTEGER NOT NULL DEFAULT 0,
+  recorded_at     DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+**Chart Type:** Stacked area chart
+**Value-add:** Shows whether FP requests are being worked through or stacking up in "Requested" state
+
+---
+
+### 2.3 Todo Queue Velocity — Items Added vs Completed Per Week
+
+**Description:** A bar chart showing weekly queue throughput (items added vs items marked complete).
+
+**Data Source:** Already available in `ivanti_todo_queue.created_at` and `updated_at` + `status = 'complete'`:
+```sql
+SELECT
+  STRFTIME('%Y-W%W', created_at) AS week,
+  COUNT(*) AS items_added,
+  SUM(CASE WHEN status = 'complete' THEN 1 ELSE 0 END) AS items_completed
+FROM ivanti_todo_queue
+GROUP BY week
+ORDER BY week ASC;
+```
+
+**Chart Type:** Grouped bar chart (weekly)
+**Value-add:** Measures operational pace of the team's workflow action throughput
+
+---
+
+## Tier 3 Recommendations — Structural Additions (Future Consideration)
+
+These require more significant changes but would provide powerful long-term reporting.
+
+---
+
+### 3.1 Finding Age / Dwell Time Distribution
+
+**Description:** A histogram showing how long open findings have been open (age in days). The `lastFoundOn` field exists in the Ivanti findings JSON but is not persisted to a structured table.
+
+**Requirement:** Parse and store `lastFoundOn` from findings JSON into a structured column during sync.
+
+**Value-add:** Highlights findings that have been open for 90+ days — high-priority remediation targets.
+
+---
+
+### 3.2 SLA Breach Trends
+
+**Description:** Track how many findings breach SLA (Due Date exceeded) over time. Currently SLA status is computed in the frontend on-the-fly.
+
+**Requirement:** Add SLA breach tracking during sync — stamp findings that cross SLA date.
+
+**Value-add:** Compliance and audit reporting for SLA adherence metrics.
+
+---
+
+## Recommended Implementation Order
+
+| Priority | Chart | Effort | Impact |
+|----------|-------|--------|--------|
+| 1 | 1.2 — New/Recurring/Resolved bar chart | Low (data ready) | High |
+| 2 | 1.1 — Compliance trend line | Low (data ready) | High |
+| 3 | 1.3 — Team health multi-line | Low (data ready) | High |
+| 4 | 2.1 — Ivanti open/closed history | Medium (new table) | Very High |
+| 5 | 1.4 — MTTR per team | Low (data ready) | Medium |
+| 6 | 1.6 — Archer ticket pipeline | Low (data ready) | Medium |
+| 7 | 2.3 — Queue velocity | Low (data ready) | Medium |
+| 8 | 1.5 — Recurring findings heatmap | Low (data ready) | Medium |
+| 9 | 2.2 — FP workflow snapshots | Medium (new table) | Medium |
+| 10 | 1.7 — Category breakdown | Low (data ready) | Low–Medium |
+
+---
+
+## Charting Library Consideration
+
+The current implementation uses **hand-rolled SVG donut charts** (no external library). For time-series line/bar/area charts, the team should decide:
+
+| Option | Pros | Cons |
+|--------|------|------|
+| **Continue hand-rolled SVG** | Zero dependencies, full style control | Significant effort for axes, labels, tooltips |
+| **Recharts** (React-native) | Well-matched to React 19, composable, responsive | ~500KB dependency |
+| **Chart.js via react-chartjs-2** | Mature, widely documented | Less React-idiomatic |
+| **Lightweight: uPlot or Chart.xkcd** | Very small bundle | Less community support |
+
+**Recommendation:** Recharts aligns best with the React 19 stack and allows declaring charts as JSX components consistent with the existing code style. It supports all chart types listed above.
+
+---
+
+## Notes for Director Review
+
+- All **Tier 1** recommendations can be implemented with zero database migrations — the data is already there.
+- The **single highest-value addition** is `2.1 — Ivanti open/closed count history`, as it captures the most direct remediation progress metric. It only requires one new table and one line added to the sync handler.
+- **Compliance charts (1.1–1.5)** will only be meaningful once multiple compliance uploads have been committed. If only 1–2 uploads exist currently, the trend will not show much until more data accumulates — but building the charts now means data will automatically populate them.
+- All queries listed above have been validated against the actual database schema.
+
+---
+
+*Next step: Review with director, confirm priority order, then schedule sprint for implementation.*

frontend/package.json

@@ -12,6 +12,7 @@
     "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
     "react-scripts": "5.0.1",
+    "recharts": "^3.8.1",
     "web-vitals": "^2.1.4",
     "xlsx": "^0.18.5"
   },

frontend/src/components/pages/ComplianceChartsPanel.js

@@ -0,0 +1,424 @@
+// ComplianceChartsPanel.js
+// Tier-1 time-based compliance charts using Recharts.
+// Charts rendered: Active Findings Over Time, Change per Cycle,
+// Team Health, MTTR by Team, Persistent Findings, Archer Pipeline.
+
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+    LineChart, Line,
+    BarChart, Bar,
+    XAxis, YAxis, CartesianGrid,
+    Tooltip, Legend,
+    ResponsiveContainer,
+} from 'recharts';
+import { TrendingUp, ChevronDown, ChevronUp, Loader } from 'lucide-react';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+
+const TEAL = '#14B8A6';
+
+const TEAM_COLORS = {
+    'STEAM':      '#0EA5E9',
+    'ACCESS-ENG': '#F59E0B',
+    'ACCESS-OPS': '#8B5CF6',
+    'INTELDEV':   '#10B981',
+};
+
+const ARCHER_STATUS_COLORS = {
+    'Draft':        '#475569',
+    'Open':         '#0EA5E9',
+    'Under Review': '#F59E0B',
+    'Accepted':     '#10B981',
+};
+
+// ---------------------------------------------------------------------------
+// Shared style tokens
+// ---------------------------------------------------------------------------
+const AXIS_STYLE = { fontFamily: 'monospace', fontSize: '0.6rem', fill: '#475569' };
+const GRID_STYLE = { stroke: 'rgba(255,255,255,0.05)', strokeDasharray: '3 3' };
+const LEGEND_STYLE = { fontFamily: 'monospace', fontSize: '0.62rem', color: '#64748B' };
+
+// ---------------------------------------------------------------------------
+// Custom dark tooltip
+// ---------------------------------------------------------------------------
+function DarkTooltip({ active, payload, label }) {
+    if (!active || !payload?.length) return null;
+    return (
+        <div style={{
+            background: 'rgba(10,17,32,0.97)',
+            border: '1px solid rgba(20,184,166,0.3)',
+            borderRadius: '0.375rem',
+            padding: '0.5rem 0.75rem',
+            fontFamily: 'monospace',
+            fontSize: '0.7rem',
+            minWidth: '130px',
+        }}>
+            <div style={{ color: TEAL, marginBottom: '0.3rem', fontWeight: '700', fontSize: '0.65rem' }}>
+                {label}
+            </div>
+            {payload.map(p => (
+                <div key={p.dataKey} style={{ color: p.color || '#94A3B8', marginTop: '0.125rem', display: 'flex', justifyContent: 'space-between', gap: '0.75rem' }}>
+                    <span style={{ opacity: 0.8 }}>{p.name}</span>
+                    <span style={{ fontWeight: '700' }}>
+                        {typeof p.value === 'number'
+                            ? Number.isInteger(p.value) ? p.value : p.value.toFixed(1)
+                            : p.value}
+                    </span>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart card wrapper
+// ---------------------------------------------------------------------------
+function ChartCard({ title, subtitle, children }) {
+    return (
+        <div style={{
+            background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
+            border: '1px solid rgba(20,184,166,0.15)',
+            borderRadius: '0.5rem',
+            padding: '1rem 1.125rem 0.875rem',
+        }}>
+            <div style={{ marginBottom: '0.75rem' }}>
+                <div style={{
+                    fontFamily: 'monospace', fontSize: '0.72rem', fontWeight: '700',
+                    color: '#CBD5E1', textTransform: 'uppercase', letterSpacing: '0.08em',
+                }}>
+                    {title}
+                </div>
+                {subtitle && (
+                    <div style={{ fontSize: '0.62rem', color: '#334155', marginTop: '0.2rem', fontFamily: 'monospace' }}>
+                        {subtitle}
+                    </div>
+                )}
+            </div>
+            {children}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Empty / no-data state
+// ---------------------------------------------------------------------------
+function NoData({ msg }) {
+    return (
+        <div style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            height: '160px', color: '#334155',
+            fontFamily: 'monospace', fontSize: '0.72rem',
+            border: '1px dashed rgba(20,184,166,0.1)',
+            borderRadius: '0.375rem',
+        }}>
+            {msg || 'No data yet — upload compliance reports to populate this chart'}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Shorten a YYYY-MM-DD string to MM/DD/YY
+// ---------------------------------------------------------------------------
+function fmtDate(d) {
+    if (!d) return '';
+    const p = d.split('-');
+    if (p.length === 3) return `${p[1]}/${p[2]}/${p[0].slice(2)}`;
+    return d;
+}
+
+// ---------------------------------------------------------------------------
+// Chart 1 — Active Findings Over Time (line, total + per team)
+// ---------------------------------------------------------------------------
+function ActiveTrendChart({ data }) {
+    if (data.length < 2) return <NoData />;
+    return (
+        <ResponsiveContainer width="100%" height={210}>
+            <LineChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis dataKey="date" tick={AXIS_STYLE} />
+                <YAxis tick={AXIS_STYLE} allowDecimals={false} />
+                <Tooltip content={<DarkTooltip />} />
+                <Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
+                <Line
+                    type="monotone" dataKey="total_active" name="Total"
+                    stroke={TEAL} strokeWidth={2}
+                    dot={{ r: 3, fill: TEAL, strokeWidth: 0 }}
+                    activeDot={{ r: 5 }}
+                />
+                {Object.entries(TEAM_COLORS).map(([team, color]) => (
+                    <Line
+                        key={team}
+                        type="monotone" dataKey={team} name={team}
+                        stroke={color} strokeWidth={1.5}
+                        dot={false} strokeDasharray="5 3"
+                        activeDot={{ r: 4, fill: color }}
+                    />
+                ))}
+            </LineChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart 2 — New / Recurring / Resolved per cycle (stacked + grouped bar)
+// ---------------------------------------------------------------------------
+function DeltaChart({ data }) {
+    if (data.length === 0) return <NoData />;
+    return (
+        <ResponsiveContainer width="100%" height={210}>
+            <BarChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis dataKey="date" tick={AXIS_STYLE} />
+                <YAxis tick={AXIS_STYLE} allowDecimals={false} />
+                <Tooltip content={<DarkTooltip />} />
+                <Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
+                <Bar dataKey="new_count"       name="New"       stackId="in" fill="#EF4444" fillOpacity={0.85} radius={[0,0,0,0]} />
+                <Bar dataKey="recurring_count" name="Recurring" stackId="in" fill="#F59E0B" fillOpacity={0.85} radius={[2,2,0,0]} />
+                <Bar dataKey="resolved_count"  name="Resolved"  fill="#10B981"              fillOpacity={0.8}  radius={[2,2,2,2]} />
+            </BarChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart 3 — Team Health Multi-Line
+// ---------------------------------------------------------------------------
+function TeamTrendChart({ data }) {
+    if (data.length < 2) return <NoData />;
+    return (
+        <ResponsiveContainer width="100%" height={210}>
+            <LineChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis dataKey="date" tick={AXIS_STYLE} />
+                <YAxis tick={AXIS_STYLE} allowDecimals={false} />
+                <Tooltip content={<DarkTooltip />} />
+                <Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
+                {Object.entries(TEAM_COLORS).map(([team, color]) => (
+                    <Line
+                        key={team}
+                        type="monotone" dataKey={team} name={team}
+                        stroke={color} strokeWidth={2}
+                        dot={{ r: 3, fill: color, strokeWidth: 0 }}
+                        activeDot={{ r: 5 }}
+                    />
+                ))}
+            </LineChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart 4 — MTTR by Team (horizontal bar)
+// ---------------------------------------------------------------------------
+function MttrChart({ data }) {
+    if (data.length === 0) return <NoData msg="No resolved findings yet — MTTR will appear after items are remediated" />;
+    return (
+        <ResponsiveContainer width="100%" height={Math.max(160, data.length * 44 + 40)}>
+            <BarChart data={data} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis type="number" tick={AXIS_STYLE} unit=" d" />
+                <YAxis type="category" dataKey="team" tick={AXIS_STYLE} width={86} />
+                <Tooltip content={<DarkTooltip />} />
+                <Bar dataKey="avg_days" name="Avg Days" fill={TEAL} fillOpacity={0.8} radius={[0, 3, 3, 0]}
+                    label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}d` }}
+                />
+            </BarChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart 5 — Most Persistent Findings (horizontal bar by seen_count)
+// ---------------------------------------------------------------------------
+function RecurringChart({ data }) {
+    if (data.length === 0) return <NoData />;
+    const top10 = data.slice(0, 10).map(r => ({
+        ...r,
+        label: r.metric_id.length > 18 ? r.metric_id.slice(0, 18) + '…' : r.metric_id,
+    }));
+    return (
+        <ResponsiveContainer width="100%" height={Math.max(160, top10.length * 28 + 40)}>
+            <BarChart data={top10} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis type="number" tick={AXIS_STYLE} unit=" cycles" allowDecimals={false} />
+                <YAxis type="category" dataKey="label" tick={AXIS_STYLE} width={110} />
+                <Tooltip content={<DarkTooltip />} formatter={(val, name, props) => [
+                    `${val} cycles (${props.payload.host_count} host${props.payload.host_count !== 1 ? 's' : ''})`, props.payload.team
+                ]} />
+                <Bar dataKey="seen_count" name="Cycles Seen" fill="#F59E0B" fillOpacity={0.85} radius={[0, 3, 3, 0]}
+                    label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}×` }}
+                />
+            </BarChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Chart 6 — Archer Exception Ticket Pipeline (stacked bar by creation date)
+// ---------------------------------------------------------------------------
+function ArcherPipelineChart({ data }) {
+    if (data.length === 0) return <NoData msg="No Archer tickets recorded yet" />;
+    return (
+        <ResponsiveContainer width="100%" height={210}>
+            <BarChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
+                <CartesianGrid {...GRID_STYLE} />
+                <XAxis dataKey="date" tick={AXIS_STYLE} />
+                <YAxis tick={AXIS_STYLE} allowDecimals={false} />
+                <Tooltip content={<DarkTooltip />} />
+                <Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
+                {Object.entries(ARCHER_STATUS_COLORS).map(([status, color], i, arr) => (
+                    <Bar
+                        key={status}
+                        dataKey={status} name={status} stackId="s"
+                        fill={color} fillOpacity={0.85}
+                        radius={i === arr.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
+                    />
+                ))}
+            </BarChart>
+        </ResponsiveContainer>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Main panel
+// ---------------------------------------------------------------------------
+export default function ComplianceChartsPanel() {
+    const [collapsed,   setCollapsed]   = useState(false);
+    const [loading,     setLoading]     = useState(true);
+    const [trends,      setTrends]      = useState([]);
+    const [mttr,        setMttr]        = useState([]);
+    const [recurring,   setRecurring]   = useState([]);
+    const [archerRaw,   setArcherRaw]   = useState([]);
+
+    useEffect(() => {
+        let cancelled = false;
+        const load = async () => {
+            setLoading(true);
+            try {
+                const [tRes, mRes, rRes, aRes] = await Promise.all([
+                    fetch(`${API_BASE}/compliance/trends`,           { credentials: 'include' }),
+                    fetch(`${API_BASE}/compliance/mttr`,             { credentials: 'include' }),
+                    fetch(`${API_BASE}/compliance/top-recurring`,    { credentials: 'include' }),
+                    fetch(`${API_BASE}/archer-tickets/status-trend`, { credentials: 'include' }),
+                ]);
+                if (cancelled) return;
+                if (tRes.ok) { const d = await tRes.json(); setTrends(d.trends      || []); }
+                if (mRes.ok) { const d = await mRes.json(); setMttr(d.mttr          || []); }
+                if (rRes.ok) { const d = await rRes.json(); setRecurring(d.items    || []); }
+                if (aRes.ok) { const d = await aRes.json(); setArcherRaw(d.statusTrend || []); }
+            } catch { /* silent — charts will show no-data state */ }
+            finally { if (!cancelled) setLoading(false); }
+        };
+        load();
+        return () => { cancelled = true; };
+    }, []);
+
+    // Format trend rows — add short date label
+    const formattedTrends = useMemo(
+        () => trends.map(t => ({ ...t, date: fmtDate(t.report_date) })),
+        [trends]
+    );
+
+    // Pivot archer raw rows → one object per date
+    const archerByDate = useMemo(() => {
+        if (!archerRaw.length) return [];
+        const map = {};
+        archerRaw.forEach(r => {
+            if (!map[r.date]) map[r.date] = { date: fmtDate(r.date) };
+            map[r.date][r.status] = r.count;
+        });
+        return Object.values(map).sort((a, b) => a.date.localeCompare(b.date));
+    }, [archerRaw]);
+
+    return (
+        <div style={{ marginBottom: '1.5rem' }}>
+
+            {/* ── Section header / collapse toggle ──────────────────────── */}
+            <button
+                onClick={() => setCollapsed(c => !c)}
+                style={{
+                    width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                    background: 'none', border: 'none', cursor: 'pointer',
+                    padding: '0 0 0.625rem 0',
+                    borderBottom: collapsed ? 'none' : '1px solid rgba(20,184,166,0.1)',
+                    marginBottom: collapsed ? 0 : '0.875rem',
+                }}
+            >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <TrendingUp style={{ width: '14px', height: '14px', color: TEAL }} />
+                    <span style={{
+                        fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '700',
+                        color: '#334155', textTransform: 'uppercase', letterSpacing: '0.1em',
+                    }}>
+                        Historical Trends
+                    </span>
+                    {loading && (
+                        <Loader style={{ width: '12px', height: '12px', color: '#334155', animation: 'spin 1s linear infinite' }} />
+                    )}
+                </div>
+                {collapsed
+                    ? <ChevronDown style={{ width: '14px', height: '14px', color: '#334155' }} />
+                    : <ChevronUp   style={{ width: '14px', height: '14px', color: '#334155' }} />
+                }
+            </button>
+
+            {!collapsed && (
+                <div style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(420px, 1fr))',
+                    gap: '1rem',
+                }}>
+
+                    {/* 1. Active findings over time */}
+                    <ChartCard
+                        title="Active Findings Over Time"
+                        subtitle="Total non-compliant items per report cycle (solid) + per team (dashed)"
+                    >
+                        <ActiveTrendChart data={formattedTrends} />
+                    </ChartCard>
+
+                    {/* 2. New / Recurring / Resolved delta per cycle */}
+                    <ChartCard
+                        title="Change per Report Cycle"
+                        subtitle="New (red) and recurring (amber) stacked; resolved (green) as separate bars"
+                    >
+                        <DeltaChart data={formattedTrends} />
+                    </ChartCard>
+
+                    {/* 3. Team health multi-line */}
+                    <ChartCard
+                        title="Team Compliance Health"
+                        subtitle="Active findings per team per cycle — lower is better"
+                    >
+                        <TeamTrendChart data={formattedTrends} />
+                    </ChartCard>
+
+                    {/* 4. MTTR per team */}
+                    <ChartCard
+                        title="Mean Time to Resolution"
+                        subtitle="Average calendar days between first-seen and resolved, by team"
+                    >
+                        <MttrChart data={mttr} />
+                    </ChartCard>
+
+                    {/* 5. Most persistent / recurring findings */}
+                    <ChartCard
+                        title="Most Persistent Findings"
+                        subtitle="Active items with the highest recurrence count (top 10)"
+                    >
+                        <RecurringChart data={recurring} />
+                    </ChartCard>
+
+                    {/* 6. Archer ticket pipeline */}
+                    <ChartCard
+                        title="Archer Exception Pipeline"
+                        subtitle="Exception ticket status distribution by creation date"
+                    >
+                        <ArcherPipelineChart data={archerByDate} />
+                    </ChartCard>
+
+                </div>
+            )}
+        </div>
+    );
+}

frontend/src/components/pages/CompliancePage.js

@@ -3,6 +3,7 @@ import { Upload, MessageSquare, RefreshCw, AlertCircle, Loader } from 'lucide-re
 import { useAuth } from '../../contexts/AuthContext';
 import ComplianceUploadModal from './ComplianceUploadModal';
 import ComplianceDetailPanel from './ComplianceDetailPanel';
+import ComplianceChartsPanel from './ComplianceChartsPanel';
 
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
 const TEAL = '#14B8A6';
@@ -323,6 +324,9 @@ export default function CompliancePage({ onNavigate }) {
                 </div>
             ) : null}
 
+            {/* ── Historical trend charts ──────────────────────────────── */}
+            <ComplianceChartsPanel />
+
             {/* ── Device table ─────────────────────────────────────────── */}
             <div style={{
                 background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',