feat(compliance): add 'View in Reporting' link for 2.3.x Ivanti metrics

In ComplianceDetailPanel, active metrics with a metric_id starting with
'2.3' and an Ivanti_Vulnerability_ID in extra_json now surface the ID
prominently alongside a 'View in Reporting →' button. Clicking navigates
directly to the Reporting page. onNavigate prop threaded through
App → CompliancePage → ComplianceDetailPanel → MetricRow.

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

.gitignore

@@ -39,6 +39,10 @@ frontend.pid
 backend/uploads/temp/
 feature_request*.md
 
+# Planning docs
+docs/aeo-compliance-ui-plan.md
+docs/aeo-compliance-wireframe.md
+
 # AI tooling config
 .claude/
 ai_notes.md

backend/migrations/add_card_workflow_type.js

@@ -24,6 +24,7 @@ db.serialize(() => {
             finding_id TEXT NOT NULL,
             finding_title TEXT,
             cves_json TEXT,
+            ip_address TEXT,
             vendor TEXT NOT NULL,
             workflow_type TEXT NOT NULL CHECK(workflow_type IN ('FP', 'Archer', 'CARD')),
             status TEXT NOT NULL DEFAULT 'pending' CHECK(status IN ('pending', 'complete')),

backend/migrations/add_compliance_tables.js

@@ -0,0 +1,108 @@
+// Migration: Add compliance_uploads, compliance_items, compliance_notes tables
+const sqlite3 = require('sqlite3').verbose();
+const path = require('path');
+
+const dbPath = path.join(__dirname, '..', 'cve_database.db');
+const db = new sqlite3.Database(dbPath);
+
+console.log('Starting add_compliance_tables migration...');
+
+db.serialize(() => {
+    // Each xlsx upload — one row per file ingested
+    db.run(`
+        CREATE TABLE IF NOT EXISTS compliance_uploads (
+            id          INTEGER PRIMARY KEY AUTOINCREMENT,
+            filename    TEXT NOT NULL,
+            report_date TEXT,
+            uploaded_by INTEGER,
+            uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+            new_count       INTEGER DEFAULT 0,
+            resolved_count  INTEGER DEFAULT 0,
+            recurring_count INTEGER DEFAULT 0,
+            FOREIGN KEY (uploaded_by) REFERENCES users(id) ON DELETE SET NULL
+        )
+    `, (err) => {
+        if (err) console.error('Error creating compliance_uploads:', err);
+        else console.log('✓ compliance_uploads created');
+    });
+
+    // One row per non-compliant asset per metric per upload.
+    // hostname + metric_id is the stable identity key used to link history and notes.
+    db.run(`
+        CREATE TABLE IF NOT EXISTS compliance_items (
+            id          INTEGER PRIMARY KEY AUTOINCREMENT,
+            upload_id   INTEGER NOT NULL,
+            hostname    TEXT NOT NULL,
+            ip_address  TEXT,
+            device_type TEXT,
+            team        TEXT,
+            metric_id   TEXT NOT NULL,
+            metric_desc TEXT,
+            category    TEXT,
+            extra_json  TEXT,
+            status      TEXT NOT NULL DEFAULT 'active' CHECK(status IN ('active', 'resolved')),
+            first_seen_upload_id INTEGER,
+            resolved_upload_id   INTEGER,
+            created_at  DATETIME DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (upload_id) REFERENCES compliance_uploads(id) ON DELETE CASCADE,
+            FOREIGN KEY (first_seen_upload_id) REFERENCES compliance_uploads(id) ON DELETE SET NULL,
+            FOREIGN KEY (resolved_upload_id)   REFERENCES compliance_uploads(id) ON DELETE SET NULL
+        )
+    `, (err) => {
+        if (err) console.error('Error creating compliance_items:', err);
+        else console.log('✓ compliance_items created');
+    });
+
+    db.run(`
+        CREATE INDEX IF NOT EXISTS idx_compliance_items_upload
+        ON compliance_items(upload_id)
+    `, (err) => {
+        if (err) console.error('Error creating upload index:', err);
+        else console.log('✓ idx_compliance_items_upload created');
+    });
+
+    db.run(`
+        CREATE INDEX IF NOT EXISTS idx_compliance_items_identity
+        ON compliance_items(hostname, metric_id)
+    `, (err) => {
+        if (err) console.error('Error creating identity index:', err);
+        else console.log('✓ idx_compliance_items_identity created');
+    });
+
+    db.run(`
+        CREATE INDEX IF NOT EXISTS idx_compliance_items_team_status
+        ON compliance_items(team, status)
+    `, (err) => {
+        if (err) console.error('Error creating team/status index:', err);
+        else console.log('✓ idx_compliance_items_team_status created');
+    });
+
+    // Notes keyed on (hostname, metric_id) — persists across uploads.
+    // Each note is its own row so history is preserved.
+    db.run(`
+        CREATE TABLE IF NOT EXISTS compliance_notes (
+            id          INTEGER PRIMARY KEY AUTOINCREMENT,
+            hostname    TEXT NOT NULL,
+            metric_id   TEXT NOT NULL,
+            note        TEXT NOT NULL,
+            created_by  INTEGER,
+            created_at  DATETIME DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (created_by) REFERENCES users(id) ON DELETE SET NULL
+        )
+    `, (err) => {
+        if (err) console.error('Error creating compliance_notes:', err);
+        else console.log('✓ compliance_notes created');
+    });
+
+    db.run(`
+        CREATE INDEX IF NOT EXISTS idx_compliance_notes_identity
+        ON compliance_notes(hostname, metric_id)
+    `, (err) => {
+        if (err) console.error('Error creating notes identity index:', err);
+        else console.log('✓ idx_compliance_notes_identity created');
+    });
+});
+
+db.close(() => {
+    console.log('Migration complete!');
+});

backend/routes/compliance.js

@@ -0,0 +1,589 @@
+// Compliance Routes — AEO metric tracking
+// Handles xlsx upload/parse, non-compliant item history, and notes.
+//
+// Endpoints:
+//   POST /preview          — parse xlsx, compute diff vs DB, return summary (no DB write)
+//   POST /commit           — commit a previewed upload to DB
+//   GET  /uploads          — list all uploads
+//   GET  /summary          — metric health cards for a team (from latest upload)
+//   GET  /items            — non-compliant devices grouped by hostname (?team=X&status=active)
+//   GET  /items/:hostname  — detail panel: all metrics + notes + upload history for a device
+//   POST /notes            — add a note to a (hostname, metric_id) pair
+//   GET  /notes/:hostname/:metricId — notes for a specific device+metric
+
+const express  = require('express');
+const path     = require('path');
+const fs       = require('fs');
+const { spawn } = require('child_process');
+
+const PARSER_SCRIPT = path.join(__dirname, '../scripts/parse_compliance_xlsx.py');
+const TEMP_DIR      = path.join(process.cwd(), 'uploads', 'temp');
+const ALLOWED_TEAMS = new Set(['STEAM', 'ACCESS-ENG', 'ACCESS-OPS', 'INTELDEV']);
+
+// ---------------------------------------------------------------------------
+// DB helpers
+// ---------------------------------------------------------------------------
+function dbRun(db, sql, params = []) {
+    return new Promise((resolve, reject) => {
+        db.run(sql, params, function (err) {
+            if (err) reject(err);
+            else resolve({ lastID: this.lastID, changes: this.changes });
+        });
+    });
+}
+function dbGet(db, sql, params = []) {
+    return new Promise((resolve, reject) => {
+        db.get(sql, params, (err, row) => { if (err) reject(err); else resolve(row || null); });
+    });
+}
+function dbAll(db, sql, params = []) {
+    return new Promise((resolve, reject) => {
+        db.all(sql, params, (err, rows) => { if (err) reject(err); else resolve(rows || []); });
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Run Python parser, return parsed object
+// ---------------------------------------------------------------------------
+function parseXlsx(filePath) {
+    return new Promise((resolve, reject) => {
+        const py = spawn('python3', [PARSER_SCRIPT, filePath]);
+        let out = '';
+        let err = '';
+        py.stdout.on('data', d => { out += d; });
+        py.stderr.on('data', d => { err += d; });
+        py.on('close', code => {
+            if (code !== 0) return reject(new Error(err || `Parser exited with code ${code}`));
+            try { resolve(JSON.parse(out)); }
+            catch (e) { reject(new Error('Parser returned invalid JSON')); }
+        });
+        py.on('error', reject);
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Validate that a temp file path is safely within uploads/temp/
+// ---------------------------------------------------------------------------
+function isSafeTempPath(filePath) {
+    const resolved = path.resolve(filePath);
+    return resolved.startsWith(TEMP_DIR + path.sep) && path.extname(resolved) === '.json';
+}
+
+// ---------------------------------------------------------------------------
+// Compute diff: new / recurring / resolved
+// ---------------------------------------------------------------------------
+async function computeDiff(db, incomingItems) {
+    const activeRows = await dbAll(db,
+        `SELECT hostname, metric_id FROM compliance_items WHERE status = 'active'`
+    );
+    const activeKeys = new Set(activeRows.map(r => `${r.hostname}|||${r.metric_id}`));
+    const newKeys    = new Set(incomingItems.map(i => `${i.hostname}|||${i.metric_id}`));
+
+    let newCount = 0, recurringCount = 0, resolvedCount = 0;
+    for (const k of newKeys)    { if (activeKeys.has(k)) recurringCount++; else newCount++; }
+    for (const k of activeKeys) { if (!newKeys.has(k))   resolvedCount++; }
+
+    return { newCount, recurringCount, resolvedCount };
+}
+
+// ---------------------------------------------------------------------------
+// Write a parsed upload to the DB (within a transaction)
+// ---------------------------------------------------------------------------
+async function persistUpload(db, { items, summary, reportDate, filename, userId }) {
+    // Pull current active items before we modify anything
+    const activeRows = await dbAll(db,
+        `SELECT id, hostname, metric_id, seen_count, first_seen_upload_id FROM compliance_items WHERE status = 'active'`
+    );
+    const activeMap = {};
+    activeRows.forEach(r => { activeMap[`${r.hostname}|||${r.metric_id}`] = r; });
+
+    const newKeys = new Set(items.map(i => `${i.hostname}|||${i.metric_id}`));
+
+    await dbRun(db, 'BEGIN TRANSACTION');
+    try {
+        // 1. Insert the upload record
+        const { lastID: uploadId } = await dbRun(db,
+            `INSERT INTO compliance_uploads (filename, report_date, uploaded_by, uploaded_at, summary_json)
+             VALUES (?, ?, ?, datetime('now'), ?)`,
+            [filename, reportDate || null, userId || null, JSON.stringify(summary)]
+        );
+
+        let newCount = 0, recurringCount = 0, resolvedCount = 0;
+
+        // 2. Upsert each incoming non-compliant item
+        for (const item of items) {
+            const key      = `${item.hostname}|||${item.metric_id}`;
+            const existing = activeMap[key];
+            const extraStr = JSON.stringify(item.extra_json || {});
+
+            if (existing) {
+                // Recurring — bump seen_count, refresh snapshot fields
+                await dbRun(db,
+                    `UPDATE compliance_items
+                     SET upload_id = ?, seen_count = ?, ip_address = ?, device_type = ?, extra_json = ?
+                     WHERE id = ?`,
+                    [uploadId, existing.seen_count + 1, item.ip_address, item.device_type, extraStr, existing.id]
+                );
+                recurringCount++;
+            } else {
+                // New item (or previously resolved and re-appearing)
+                await dbRun(db,
+                    `INSERT INTO compliance_items
+                     (upload_id, hostname, ip_address, device_type, team, metric_id, metric_desc,
+                      category, extra_json, status, first_seen_upload_id, seen_count)
+                     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, 'active', ?, 1)`,
+                    [uploadId, item.hostname, item.ip_address, item.device_type, item.team,
+                     item.metric_id, item.metric_desc, item.category, extraStr, uploadId]
+                );
+                newCount++;
+            }
+        }
+
+        // 3. Mark items not present in this upload as resolved
+        for (const [key, row] of Object.entries(activeMap)) {
+            if (!newKeys.has(key)) {
+                await dbRun(db,
+                    `UPDATE compliance_items
+                     SET status = 'resolved', resolved_upload_id = ?
+                     WHERE id = ?`,
+                    [uploadId, row.id]
+                );
+                resolvedCount++;
+            }
+        }
+
+        // 4. Update upload with final counts
+        await dbRun(db,
+            `UPDATE compliance_uploads
+             SET new_count = ?, resolved_count = ?, recurring_count = ?
+             WHERE id = ?`,
+            [newCount, resolvedCount, recurringCount, uploadId]
+        );
+
+        await dbRun(db, 'COMMIT');
+        return { uploadId, newCount, recurringCount, resolvedCount };
+
+    } catch (err) {
+        await dbRun(db, 'ROLLBACK').catch(() => {});
+        throw err;
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Group flat compliance_items rows into per-device objects
+// ---------------------------------------------------------------------------
+function groupByHostname(rows, noteHostnames) {
+    const deviceMap = {};
+
+    for (const row of rows) {
+        if (!deviceMap[row.hostname]) {
+            deviceMap[row.hostname] = {
+                hostname:        row.hostname,
+                ip_address:      row.ip_address  || '',
+                device_type:     row.device_type || '',
+                team:            row.team        || '',
+                status:          row.status,
+                failing_metrics: [],
+                seen_count:      row.seen_count  || 1,
+                first_seen:      row.first_seen  || null,
+                last_seen:       row.last_seen   || null,
+                resolved_on:     row.resolved_on || null,
+                has_notes:       noteHostnames.has(row.hostname),
+            };
+        }
+
+        const dev = deviceMap[row.hostname];
+        dev.failing_metrics.push({
+            metric_id:   row.metric_id,
+            metric_desc: row.metric_desc  || '',
+            category:    row.category     || '',
+        });
+        // Use the highest seen_count and earliest first_seen across all metrics
+        if ((row.seen_count || 1) > dev.seen_count) dev.seen_count = row.seen_count;
+        if (row.first_seen && (!dev.first_seen || row.first_seen < dev.first_seen))
+            dev.first_seen = row.first_seen;
+        if (row.last_seen  && (!dev.last_seen  || row.last_seen  > dev.last_seen))
+            dev.last_seen  = row.last_seen;
+    }
+
+    return Object.values(deviceMap);
+}
+
+// ---------------------------------------------------------------------------
+// Router factory
+// ---------------------------------------------------------------------------
+function createComplianceRouter(db, upload, requireAuth, requireRole) {
+    const router = express.Router();
+
+    // Idempotent column additions — errors mean column already exists, which is fine
+    db.run(`ALTER TABLE compliance_items   ADD COLUMN seen_count   INTEGER DEFAULT 1`, () => {});
+    db.run(`ALTER TABLE compliance_uploads ADD COLUMN summary_json TEXT`,              () => {});
+
+    // All compliance routes require authentication
+    router.use(requireAuth(db));
+
+    // -----------------------------------------------------------------------
+    // POST /preview
+    // Parse the uploaded xlsx, compute diff, save parsed data to a temp JSON.
+    // Returns diff counts + tempFile path for the commit step.
+    // -----------------------------------------------------------------------
+    router.post('/preview', requireRole('editor', 'admin'), (req, res) => {
+        upload.single('file')(req, res, async (uploadErr) => {
+            if (uploadErr) {
+                return res.status(400).json({ error: uploadErr.message });
+            }
+            if (!req.file) {
+                return res.status(400).json({ error: 'No file uploaded' });
+            }
+            if (path.extname(req.file.originalname).toLowerCase() !== '.xlsx') {
+                fs.unlink(req.file.path, () => {});
+                return res.status(400).json({ error: 'File must be an .xlsx spreadsheet' });
+            }
+
+            try {
+                const parsed = await parseXlsx(req.file.path);
+
+                if (parsed.error) {
+                    fs.unlink(req.file.path, () => {});
+                    return res.status(422).json({ error: parsed.error });
+                }
+
+                const diff = await computeDiff(db, parsed.items);
+
+                // Save parsed data to temp JSON — the commit step reads this
+                if (!fs.existsSync(TEMP_DIR)) fs.mkdirSync(TEMP_DIR, { recursive: true });
+                const tempFilename = `compliance_preview_${Date.now()}_${Math.random().toString(36).slice(2)}.json`;
+                const tempFilePath = path.join(TEMP_DIR, tempFilename);
+
+                fs.writeFileSync(tempFilePath, JSON.stringify({
+                    items:       parsed.items,
+                    summary:     parsed.summary,
+                    report_date: parsed.report_date,
+                    filename:    req.file.originalname,
+                }));
+
+                // Delete the original xlsx from temp (we only need the JSON now)
+                fs.unlink(req.file.path, () => {});
+
+                res.json({
+                    diff: {
+                        new_count:       diff.newCount,
+                        recurring_count: diff.recurringCount,
+                        resolved_count:  diff.resolvedCount,
+                    },
+                    tempFile:    tempFilePath,
+                    filename:    req.file.originalname,
+                    report_date: parsed.report_date,
+                    total_items: parsed.total,
+                });
+
+            } catch (err) {
+                fs.unlink(req.file.path, () => {});
+                console.error('[Compliance] Preview error:', err.message);
+                res.status(500).json({ error: 'Failed to parse file: ' + err.message });
+            }
+        });
+    });
+
+    // -----------------------------------------------------------------------
+    // POST /commit
+    // Commit a previewed upload to the DB.
+    // Body: { tempFile, filename, report_date }
+    // -----------------------------------------------------------------------
+    router.post('/commit', requireRole('editor', 'admin'), async (req, res) => {
+        const { tempFile, filename, report_date } = req.body;
+
+        if (!tempFile || typeof tempFile !== 'string') {
+            return res.status(400).json({ error: 'tempFile is required' });
+        }
+        if (!isSafeTempPath(tempFile)) {
+            return res.status(400).json({ error: 'Invalid tempFile path' });
+        }
+        if (!fs.existsSync(tempFile)) {
+            return res.status(400).json({ error: 'Preview session expired — please upload again' });
+        }
+
+        let parsed;
+        try {
+            parsed = JSON.parse(fs.readFileSync(tempFile, 'utf8'));
+        } catch {
+            return res.status(400).json({ error: 'Could not read preview data — please upload again' });
+        }
+
+        try {
+            const result = await persistUpload(db, {
+                items:      parsed.items,
+                summary:    parsed.summary,
+                reportDate: report_date || parsed.report_date,
+                filename:   filename   || parsed.filename,
+                userId:     req.user?.id || null,
+            });
+
+            fs.unlink(tempFile, () => {});
+
+            const upload = await dbGet(db,
+                `SELECT id, filename, report_date, uploaded_at,
+                        new_count, resolved_count, recurring_count
+                 FROM compliance_uploads WHERE id = ?`,
+                [result.uploadId]
+            );
+
+            res.json({ upload });
+
+        } catch (err) {
+            console.error('[Compliance] Commit error:', err.message);
+            res.status(500).json({ error: 'Failed to commit upload: ' + err.message });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /uploads
+    // List all uploads, most recent first.
+    // -----------------------------------------------------------------------
+    router.get('/uploads', async (req, res) => {
+        try {
+            const rows = await dbAll(db,
+                `SELECT id, filename, report_date, uploaded_at,
+                        new_count, resolved_count, recurring_count
+                 FROM compliance_uploads
+                 ORDER BY id DESC`
+            );
+            res.json({ uploads: rows });
+        } catch (err) {
+            console.error('[Compliance] GET /uploads error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /summary?team=STEAM
+    // Return metric health rows for a team from the latest upload's summary_json.
+    // -----------------------------------------------------------------------
+    router.get('/summary', async (req, res) => {
+        const team = req.query.team;
+        if (team && !ALLOWED_TEAMS.has(team)) {
+            return res.status(400).json({ error: 'Invalid team' });
+        }
+
+        try {
+            const latestUpload = await dbGet(db,
+                `SELECT id, summary_json, report_date, uploaded_at
+                 FROM compliance_uploads ORDER BY id DESC LIMIT 1`
+            );
+            if (!latestUpload || !latestUpload.summary_json) {
+                return res.json({ entries: [], overall_scores: {}, upload: null });
+            }
+
+            let summary;
+            try { summary = JSON.parse(latestUpload.summary_json); }
+            catch { return res.json({ entries: [], overall_scores: {}, upload: null }); }
+
+            let entries = summary.entries || [];
+            if (team) {
+                entries = entries.filter(e => e.team === team);
+            }
+
+            res.json({
+                entries,
+                overall_scores: summary.overall_scores || {},
+                upload: {
+                    id:          latestUpload.id,
+                    report_date: latestUpload.report_date,
+                    uploaded_at: latestUpload.uploaded_at,
+                },
+            });
+        } catch (err) {
+            console.error('[Compliance] GET /summary error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /items?team=STEAM&status=active
+    // Return non-compliant devices grouped by hostname.
+    // -----------------------------------------------------------------------
+    router.get('/items', async (req, res) => {
+        const { team, status = 'active' } = req.query;
+
+        if (!team) return res.status(400).json({ error: 'team is required' });
+        if (!ALLOWED_TEAMS.has(team)) return res.status(400).json({ error: 'Invalid team' });
+        if (!['active', 'resolved'].includes(status)) return res.status(400).json({ error: 'Invalid status' });
+
+        try {
+            const rows = await dbAll(db,
+                `SELECT
+                     ci.hostname, ci.ip_address, ci.device_type, ci.team,
+                     ci.metric_id, ci.metric_desc, ci.category,
+                     ci.status, ci.seen_count,
+                     fu.report_date AS first_seen,
+                     lu.report_date AS last_seen,
+                     ru.report_date AS resolved_on
+                 FROM compliance_items ci
+                 LEFT JOIN compliance_uploads fu ON ci.first_seen_upload_id = fu.id
+                 LEFT JOIN compliance_uploads lu ON ci.upload_id             = lu.id
+                 LEFT JOIN compliance_uploads ru ON ci.resolved_upload_id    = ru.id
+                 WHERE ci.team = ? AND ci.status = ?
+                 ORDER BY ci.hostname, ci.metric_id`,
+                [team, status]
+            );
+
+            // Fetch hostnames that have any notes (for the has_notes indicator)
+            const noteRows = await dbAll(db,
+                `SELECT DISTINCT hostname FROM compliance_notes`
+            );
+            const noteHostnames = new Set(noteRows.map(r => r.hostname));
+
+            const devices = groupByHostname(rows, noteHostnames);
+
+            res.json({ devices, team, status });
+
+        } catch (err) {
+            console.error('[Compliance] GET /items error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /items/:hostname
+    // Detail panel: all metric rows for this hostname + notes + upload history.
+    // -----------------------------------------------------------------------
+    router.get('/items/:hostname', async (req, res) => {
+        const hostname = req.params.hostname;
+        if (!hostname || hostname.length > 300) {
+            return res.status(400).json({ error: 'Invalid hostname' });
+        }
+
+        try {
+            // All metric rows for this hostname
+            const metricRows = await dbAll(db,
+                `SELECT
+                     ci.metric_id, ci.metric_desc, ci.category, ci.status,
+                     ci.ip_address, ci.device_type, ci.team,
+                     ci.seen_count, ci.extra_json,
+                     fu.report_date AS first_seen,
+                     fu.uploaded_at AS first_seen_at,
+                     lu.report_date AS last_seen,
+                     lu.uploaded_at AS last_seen_at,
+                     ru.report_date AS resolved_on
+                 FROM compliance_items ci
+                 LEFT JOIN compliance_uploads fu ON ci.first_seen_upload_id = fu.id
+                 LEFT JOIN compliance_uploads lu ON ci.upload_id             = lu.id
+                 LEFT JOIN compliance_uploads ru ON ci.resolved_upload_id    = ru.id
+                 WHERE ci.hostname = ?
+                 ORDER BY ci.status DESC, ci.metric_id`,
+                [hostname]
+            );
+
+            if (metricRows.length === 0) {
+                return res.status(404).json({ error: 'Device not found' });
+            }
+
+            // Parse extra_json on each row
+            const metrics = metricRows.map(r => ({
+                ...r,
+                extra: (() => { try { return JSON.parse(r.extra_json || '{}'); } catch { return {}; } })(),
+                extra_json: undefined,
+            }));
+
+            // Notes (all metrics for this hostname, sorted newest first)
+            const notes = await dbAll(db,
+                `SELECT cn.id, cn.metric_id, cn.note, cn.created_at,
+                        u.username AS created_by
+                 FROM compliance_notes cn
+                 LEFT JOIN users u ON cn.created_by = u.id
+                 WHERE cn.hostname = ?
+                 ORDER BY cn.created_at DESC`,
+                [hostname]
+            );
+
+            // Derive device identity from the first active row, else any row
+            const identity = metricRows.find(r => r.status === 'active') || metricRows[0];
+
+            res.json({
+                hostname,
+                ip_address:  identity.ip_address  || '',
+                device_type: identity.device_type || '',
+                team:        identity.team        || '',
+                metrics,
+                notes,
+            });
+
+        } catch (err) {
+            console.error('[Compliance] GET /items/:hostname error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // POST /notes
+    // Add a note to a (hostname, metric_id) pair.
+    // Body: { hostname, metric_id, note }
+    // -----------------------------------------------------------------------
+    router.post('/notes', async (req, res) => {
+        const { hostname, metric_id, note } = req.body;
+
+        if (!hostname || typeof hostname !== 'string' || hostname.length > 300) {
+            return res.status(400).json({ error: 'Invalid hostname' });
+        }
+        if (!metric_id || typeof metric_id !== 'string' || metric_id.length > 50) {
+            return res.status(400).json({ error: 'Invalid metric_id' });
+        }
+        const noteText = String(note || '').trim().slice(0, 1000);
+        if (!noteText) {
+            return res.status(400).json({ error: 'Note cannot be empty' });
+        }
+
+        try {
+            const { lastID } = await dbRun(db,
+                `INSERT INTO compliance_notes (hostname, metric_id, note, created_by, created_at)
+                 VALUES (?, ?, ?, ?, datetime('now'))`,
+                [hostname, metric_id, noteText, req.user?.id || null]
+            );
+
+            const created = await dbGet(db,
+                `SELECT cn.id, cn.hostname, cn.metric_id, cn.note, cn.created_at,
+                        u.username AS created_by
+                 FROM compliance_notes cn
+                 LEFT JOIN users u ON cn.created_by = u.id
+                 WHERE cn.id = ?`,
+                [lastID]
+            );
+
+            res.status(201).json(created);
+
+        } catch (err) {
+            console.error('[Compliance] POST /notes error:', err.message);
+            res.status(500).json({ error: 'Failed to save note' });
+        }
+    });
+
+    // -----------------------------------------------------------------------
+    // GET /notes/:hostname/:metricId
+    // Return all notes for a (hostname, metric_id) pair.
+    // -----------------------------------------------------------------------
+    router.get('/notes/:hostname/:metricId', async (req, res) => {
+        const { hostname, metricId } = req.params;
+
+        if (!hostname || hostname.length > 300) return res.status(400).json({ error: 'Invalid hostname' });
+        if (!metricId || metricId.length > 50)  return res.status(400).json({ error: 'Invalid metricId' });
+
+        try {
+            const notes = await dbAll(db,
+                `SELECT cn.id, cn.note, cn.created_at, u.username AS created_by
+                 FROM compliance_notes cn
+                 LEFT JOIN users u ON cn.created_by = u.id
+                 WHERE cn.hostname = ? AND cn.metric_id = ?
+                 ORDER BY cn.created_at DESC`,
+                [hostname, metricId]
+            );
+            res.json({ notes });
+        } catch (err) {
+            console.error('[Compliance] GET /notes error:', err.message);
+            res.status(500).json({ error: 'Database error' });
+        }
+    });
+
+    return router;
+}
+
+module.exports = createComplianceRouter;

backend/scripts/parse_compliance_xlsx.py

@@ -0,0 +1,212 @@
+#!/usr/bin/env python3
+"""
+Parse NTS_AEO compliance xlsx file and write JSON to stdout.
+Usage: python3 parse_compliance_xlsx.py <path_to_xlsx>
+
+Output:
+{
+  "items": [...],          # non-compliant asset rows
+  "summary": { ... },     # metric health data from Summary sheet
+  "report_date": "YYYY-MM-DD" | null,
+  "total": int
+}
+"""
+import sys
+import json
+import re
+import pandas as pd
+from pathlib import Path
+
+METRIC_CATEGORIES = {
+    '2.3.4i':  'Vulnerability Management',
+    '2.3.6i':  'Vulnerability Management',
+    '2.3.8i':  'Vulnerability Management',
+    '5.2.4':   'Access & MFA',
+    '5.2.5':   'Access & MFA',
+    '5.2.6':   'Access & MFA',
+    '5.3.4':   'Endpoint Protection',
+    '5.5.2':   'End-of-Life OS',
+    '5.5.4i':  'Vulnerability Management',
+    '5.5.5':   'Decommissioned Assets',
+    '5.8.1':   'Application Security',
+    '7.1.1':   'Logging & Monitoring',
+    '7.6.13':  'Disaster Recovery',
+    '7.6.16':  'Disaster Recovery',
+    'Missing_AppID': 'Asset Data Quality',
+    'Missing_DF':    'Asset Data Quality',
+    'Missing_OS':    'Asset Data Quality',
+}
+
+# Columns that go into the main item fields — everything else becomes extra_json
+CORE_COLS = {
+    'Preferred - Hostname', 'GRANITE - IPv4_Address', 'GRANITE - Type',
+    'Team', 'Compliant', 'Source_Network', 'Vertical',
+    'GRANITE - Equip_Inst_ID', 'GRANITE - RESPONSIBLE_TEAM',
+}
+
+SKIP_SHEETS = {'Summary', 'CMDB_9box'}
+
+
+def safe_str(val):
+    s = str(val).strip()
+    return '' if s == 'nan' else s
+
+
+def parse_summary(xl):
+    """Return { entries: [...], overall_scores: { customer_network, vertical } }"""
+    df_raw = pd.read_excel(xl, sheet_name='Summary', header=None)
+
+    overall_scores = {
+        'customer_network': float(df_raw.iloc[0, 4]) if pd.notna(df_raw.iloc[0, 4]) else None,
+        'vertical':         float(df_raw.iloc[1, 4]) if pd.notna(df_raw.iloc[1, 4]) else None,
+    }
+
+    df = pd.read_excel(xl, sheet_name='Summary', header=3)
+    # Flatten any newlines in column names
+    df.columns = [str(c).replace('\n', ' ').strip() for c in df.columns]
+
+    # Locate the sub-vertical/team column robustly
+    team_col = next((c for c in df.columns if 'Sub-Vertical' in c or 'Purchase Group' in c), None)
+
+    entries = []
+    for _, row in df.iterrows():
+        metric_id = safe_str(row.get('Metric', ''))
+        if not metric_id or metric_id in ('Metric',):
+            continue
+
+        team = safe_str(row.get(team_col, '')) if team_col else ''
+
+        try:
+            non_compliant  = int(row.get('Non-Compliant',       0) or 0)
+            compliant      = int(row.get('Compliant',           0) or 0)
+            total          = int(row.get('Total',               0) or 0)
+            compliance_pct = float(row.get('Current Compliance', 0) or 0)
+            target         = float(row.get('Metric Target',      0) or 0)
+        except (ValueError, TypeError):
+            continue
+
+        entries.append({
+            'metric_id':      metric_id,
+            'team':           team,
+            'priority':       safe_str(row.get('Priority / Non-Priority / IR', '')),
+            'non_compliant':  non_compliant,
+            'compliant':      compliant,
+            'total':          total,
+            'compliance_pct': compliance_pct,
+            'target':         target,
+            'status':         safe_str(row.get('Status', '')),
+            'description':    safe_str(row.get('Metric Description', '')),
+            'category':       METRIC_CATEGORIES.get(metric_id, 'Other'),
+        })
+
+    return {'entries': entries, 'overall_scores': overall_scores}
+
+
+def parse_sheet(xl, sheet_name, summary_entries):
+    """Return list of non-compliant item dicts for a detail sheet."""
+    try:
+        df = pd.read_excel(xl, sheet_name=sheet_name, header=0)
+    except Exception:
+        return []
+
+    if df.empty:
+        return []
+
+    df.columns = [str(c).strip() for c in df.columns]
+
+    # Filter to non-compliant rows when the Compliant column exists
+    if 'Compliant' in df.columns:
+        df = df[df['Compliant'] == False]
+
+    if df.empty:
+        return []
+
+    # Look up description from summary
+    metric_desc = ''
+    for e in summary_entries:
+        if e['metric_id'] == sheet_name and e['description']:
+            metric_desc = e['description']
+            break
+
+    category = METRIC_CATEGORIES.get(sheet_name, 'Other')
+
+    items = []
+    for _, row in df.iterrows():
+        hostname = safe_str(row.get('Preferred - Hostname', ''))
+        if not hostname:
+            continue
+
+        ip          = safe_str(row.get('GRANITE - IPv4_Address', ''))
+        device_type = safe_str(row.get('GRANITE - Type', ''))
+        team        = safe_str(row.get('Team', ''))
+
+        # Everything non-core goes into extra_json
+        extra = {}
+        for col in df.columns:
+            if col in CORE_COLS:
+                continue
+            val = row.get(col)
+            if pd.isna(val) if not isinstance(val, str) else False:
+                continue
+            s = safe_str(val)
+            if s:
+                extra[col] = val.isoformat() if hasattr(val, 'isoformat') else s
+
+        items.append({
+            'hostname':    hostname,
+            'ip_address':  ip,
+            'device_type': device_type,
+            'team':        team,
+            'metric_id':   sheet_name,
+            'metric_desc': metric_desc,
+            'category':    category,
+            'extra_json':  extra,
+        })
+
+    return items
+
+
+def extract_report_date(filepath):
+    """Try to pull YYYY-MM-DD from the filename, e.g. NTS_AEO_2026_03_25.xlsx"""
+    stem = Path(filepath).stem
+    m = re.search(r'(\d{4})_(\d{2})_(\d{2})', stem)
+    if m:
+        return f"{m.group(1)}-{m.group(2)}-{m.group(3)}"
+    return None
+
+
+def main():
+    if len(sys.argv) < 2:
+        print(json.dumps({'error': 'No file path provided'}))
+        sys.exit(1)
+
+    filepath = sys.argv[1]
+
+    try:
+        xl = pd.ExcelFile(filepath)
+    except Exception as e:
+        print(json.dumps({'error': f'Cannot open file: {str(e)}'}))
+        sys.exit(1)
+
+    try:
+        summary = parse_summary(xl)
+    except Exception as e:
+        summary = {'entries': [], 'overall_scores': {}, 'parse_error': str(e)}
+
+    all_items = []
+    for sheet_name in xl.sheet_names:
+        if sheet_name in SKIP_SHEETS:
+            continue
+        items = parse_sheet(xl, sheet_name, summary.get('entries', []))
+        all_items.extend(items)
+
+    print(json.dumps({
+        'items':       all_items,
+        'summary':     summary,
+        'report_date': extract_report_date(filepath),
+        'total':       len(all_items),
+    }))
+
+
+if __name__ == '__main__':
+    main()

backend/server.js

@@ -23,6 +23,7 @@ const createArcherTicketsRouter = require('./routes/archerTickets');
 const createIvantiWorkflowsRouter = require('./routes/ivantiWorkflows');
 const createIvantiFindingsRouter = require('./routes/ivantiFindings');
 const createIvantiTodoQueueRouter = require('./routes/ivantiTodoQueue');
+const createComplianceRouter      = require('./routes/compliance');
 
 const app = express();
 const PORT = process.env.PORT || 3001;
@@ -218,6 +219,9 @@ app.use('/api/ivanti/findings', createIvantiFindingsRouter(db, requireAuth));
 // Ivanti queue routes — per-user staging queue for FP / Archer workflows
 app.use('/api/ivanti/todo-queue', createIvantiTodoQueueRouter(db, requireAuth));
 
+// AEO compliance routes — xlsx upload, non-compliant item tracking, notes
+app.use('/api/compliance', createComplianceRouter(db, upload, requireAuth, requireRole));
+
 // ========== CVE ENDPOINTS ==========
 
 // Get all CVEs with optional filters (authenticated users)

docs/security-posture-workflow.md

@@ -0,0 +1,402 @@
+# Security Posture Workflow — Host Finding Review & Remediation
+
+**Document Type:** Process Guide
+**Applies To:** STEAM Security Dashboard — All Pages
+**Audience:** NTS-AEO-STEAM / NTS-AEO-ACCESS-ENG team members
+**Last Updated:** 2026-03-27
+
+---
+
+## Table of Contents
+
+1. [Overview](#1-overview)
+2. [Dashboard Orientation](#2-dashboard-orientation)
+3. [Vulnerability Designations](#3-vulnerability-designations)
+4. [The Host Finding Review Workflow](#4-the-host-finding-review-workflow)
+   - [Step 1 — Sync and Sort by Due Date](#step-1--sync-and-sort-by-due-date)
+   - [Step 2 — Identify the Host](#step-2--identify-the-host)
+   - [Step 3 — Identify Asset Ownership](#step-3--identify-asset-ownership)
+   - [Step 4 — Review the CVEs in the Finding](#step-4--review-the-cves-in-the-finding)
+   - [Step 5 — Determine and Execute the Required Action](#step-5--determine-and-execute-the-required-action)
+5. [Using the Ivanti Queue](#5-using-the-ivanti-queue)
+6. [Workflow Status Reference](#6-workflow-status-reference)
+7. [Quick Reference Card](#7-quick-reference-card)
+
+---
+
+## 1. Overview
+
+The STEAM Security Dashboard centralises vulnerability management for the NTS-AEO-STEAM and NTS-AEO-ACCESS-ENG business units. It pulls host findings directly from Ivanti/RiskSense and gives the team a single place to triage, track, and action every open vulnerability.
+
+**Scope:** This document covers severity findings in the **8.5 – 9.9 VRR range**. All findings in this range require some form of documented action. A finding that is not actioned before its Due Date results in the device being recorded as non-compliant.
+
+> **SLA Rule:** By default, all vulnerabilities must have an action taken or in-flight within **60 days of detection**. The Due Date column on the Reporting page shows the exact deadline. Metrics and compliance reporting are based on vulnerabilities aged under 60 days.
+
+---
+
+## 2. Dashboard Orientation
+
+### Pages
+
+| Page | Purpose |
+|------|---------|
+| **Home (CVE Management)** | Track and research individual CVEs across vendors. Store supporting documentation. Log Archer EXC ticket numbers against CVE/vendor pairs. |
+| **Reporting (Host Findings)** | The primary operational page. Live view of all open Ivanti findings with filtering, sorting, inline editing, the Ivanti Queue, and export. |
+| **Knowledge Base** | Internal document library — policies, runbooks, vendor advisories. |
+| **Exports** | Bulk export tools for reports and data extracts. |
+
+### Reporting Page — At a Glance
+
+When you open the Reporting page for the first time in a session, click **Sync** (top right) to pull the latest findings from Ivanti. The page shows:
+
+- **Four metric charts** at the top — Open vs Closed, Action Coverage, FP Finding Status, FP Workflow Status
+- **Findings table** below — every open finding for the configured BUs, one row per host finding
+- **Ivanti Queue panel** (click the Queue button, top right) — your personal staging list for batch-processing FP and Archer workflows
+
+The charts and table update together. Clicking a chart segment filters the table to that subset.
+
+---
+
+## 3. Vulnerability Designations
+
+Every finding in the 8.5–9.9 range requires one of three documented actions. Understanding these upfront makes triage faster.
+
+### 3.1 Remediation
+
+The vulnerability is addressed by fixing the root cause.
+
+| Remediation Method | Archer Ticket Required? | Notes |
+|---|---|---|
+| Firmware or software update | **No** | Upgrading removes the vulnerability entirely. The finding will fall off the report on the next scan. |
+| Configuration change | **Yes** | A config change does not remove the vulnerability — if the config is ever rolled back, the vulnerability returns. An Archer Risk Acceptance ticket is required to document this. |
+
+### 3.2 False Positive (FP)
+
+A false positive occurs when the scanner detects a vulnerability that is **not actually present** or **does not apply** to the platform or software version in use.
+
+**An FP workflow must be opened in Ivanti.** The workflow requires:
+
+1. A **screenshot** taken directly from the device showing:
+   - Hostname
+   - IP address
+   - Software / firmware version
+   > **Important:** This must be a screenshot. CLI text output or copy-pasted command output is not accepted.
+
+2. **Vendor documentation** confirming the vulnerability does not affect the platform — one of:
+   - Direct vendor communication (email, support ticket)
+   - Published security advisory stating the version or platform is not affected
+   - Proof that the vulnerability does not apply to the currently installed version
+
+Supporting files (screenshots, emails, advisories) should be saved into the CVE Database (Home page → upload documents against the relevant CVE/vendor pair) for future reference and re-use if the FP expires and needs to be renewed.
+
+### 3.3 Risk Acceptance / Archer Request
+
+An Archer Risk Acceptance ticket (EXC-XXXXX) is required when a vulnerability **cannot be patched** for a documented business or technical reason. Common scenarios:
+
+| Scenario | Required Action |
+|---|---|
+| Patch not yet available (waiting on vendor) | Open Archer ticket; close it when patch is deployed |
+| Device is End-of-Sale (EOS) or End-of-Life (EOL) | Archer ticket required with mitigation steps and a remediation plan |
+| Business constraint prevents patching | Archer ticket with justification and compensating controls |
+| Configuration-change-only remediation | Archer ticket required (see Remediation above) |
+
+For EOL/EOS devices the ticket must include:
+- Current mitigation steps (network segmentation, compensating controls)
+- A remediation plan — what will replace or retire the device and when
+
+If vendor communication is needed (patch timeline, configuration guidance), open a vendor support ticket and use the vendor's response to fill out the Archer remediation plan field.
+
+> Archer EXC numbers are tracked in the dashboard. Once entered on the Home page against the relevant CVE/vendor pair, the EXC badge appears on that CVE row. Clicking the badge navigates to the Reporting page pre-filtered to findings with that EXC number in their notes.
+
+---
+
+## 4. The Host Finding Review Workflow
+
+Work through the Reporting page top-to-bottom by Due Date. The goal of each session is to ensure every finding either has an action in-flight or gets one started.
+
+---
+
+### Step 1 — Sync and Sort by Due Date
+
+1. Navigate to the **Reporting** page.
+2. Click **Sync** (top right). Wait for the sync to complete — the timestamp updates when done.
+3. Click the **Due Date** column header to sort ascending (soonest due date first).
+   - Red due dates = overdue
+   - Amber due dates = due within 30 days
+   - Start with red, then amber
+
+> If you want to focus on findings with no action yet, click the **Pending** segment on the Action Coverage donut chart. The table will filter to only findings with no FP ticket and no EXC number in notes.
+
+---
+
+### Step 2 — Identify the Host
+
+Each finding row includes a **Host** (hostname), **IP Address**, and **DNS** column.
+
+1. Use the reported **IP address** to verify the hostname in:
+   - **IPControl** (read-only, historical IPAM data)
+   - **Infoblox** (current IPAM — preferred for current state)
+
+2. If the hostname shown in the dashboard is incorrect (Ivanti sometimes reports stale data):
+   - Click the **Host** cell in the finding row — it is inline editable.
+   - Type the correct hostname and press **Enter** or click away to save.
+   - An amber dot (●) will appear on the cell to indicate an override is in place. The original Ivanti value is preserved and can be restored using the revert button (↻).
+   - The same applies to the **DNS** column.
+
+> Overrides survive Ivanti re-syncs — your corrections are not overwritten when new data is pulled.
+
+---
+
+### Step 3 — Identify Asset Ownership
+
+Check the **BU** column to determine ownership.
+
+| BU Value | Ownership | Action |
+|---|---|---|
+| `NTS-AEO-STEAM` | Our team | Continue to Step 4 |
+| `NTS-AEO-ACCESS-ENG` | Our team | Continue to Step 4 |
+| Any other value, or blank | Not our asset | Add to CARD queue (see below) |
+
+**If the asset is not owned by our BU:**
+
+1. Check the checkbox at the left of the finding row.
+2. A popover will appear. The **CARD** workflow type should already be selected.
+   - No vendor entry is required for CARD — the IP address is captured automatically for use when searching in CARD.
+3. Click **Add to Queue**.
+4. The finding is now staged in your Ivanti Queue under the **CARD** section.
+
+CARD queue items are processed in a separate session — see the [Ivanti Queue](#5-using-the-ivanti-queue) section and the dedicated CARD process documentation.
+
+---
+
+### Step 4 — Review the CVEs in the Finding
+
+Each finding has one or more CVEs listed in the **CVEs** column (up to 2 shown; hover the "+N" badge to see the rest).
+
+For each CVE in the finding:
+
+1. **Check if the CVE already exists in the database.**
+   - Navigate to the **Home** page.
+   - Search for the CVE ID in the search bar.
+   - If an entry exists for this CVE and vendor, review what's already documented — there may be existing notes, documents, or an Archer ticket already linked.
+
+2. **If no entry exists, create one:**
+   - Click **Add CVE** on the Home page.
+   - Enter the CVE ID — the NVD auto-fill will populate the description, CVSS severity, and published date automatically.
+   - Select the correct vendor/platform.
+   - Save the entry.
+
+3. **Research the CVE** to determine the required action:
+   - Check the vendor's security advisory portal (e.g., Juniper Security Advisories, Cisco Security Advisories / Bug Search Tool)
+   - Determine whether the CVE: (a) is a False Positive for this platform/version, (b) can be Remediated, or (c) requires a Risk Acceptance
+
+---
+
+### Step 5 — Determine and Execute the Required Action
+
+Based on your research in Step 4, choose the path below.
+
+---
+
+#### Path A — Remediation (Firmware or Software Update)
+
+> No Archer ticket required if the fix is a firmware or software upgrade.
+
+1. Plan and schedule the upgrade with the relevant team.
+2. No dashboard action is required beyond ensuring a note is added to the finding (click the **Notes** cell) confirming the upgrade is planned or complete.
+3. After the device is upgraded, the finding will fall off the Reporting page on the next Ivanti scan if the vulnerability is no longer detected.
+
+---
+
+#### Path B — Remediation (Configuration Change)
+
+> An Archer Risk Acceptance ticket **is required** when the fix is a configuration change.
+
+1. Check the checkbox at the left of the finding row.
+2. In the popover, enter the **Vendor / Platform** (e.g., Juniper, Cisco, ADTRAN).
+3. Select **Archer** as the workflow type.
+4. Click **Add to Queue**.
+5. Process the Archer ticket in a dedicated session — see [Ivanti Queue](#5-using-the-ivanti-queue) and the Archer process documentation.
+
+---
+
+#### Path C — False Positive
+
+1. **Collect the required evidence:**
+   - Log into the device and **take a screenshot** showing the hostname, IP address, and software/firmware version.
+   - Obtain vendor documentation confirming the CVE does not affect this platform or version (security advisory, vendor email, etc.).
+
+2. **Save supporting files to the database:**
+   - Go to the Home page and find (or create) the CVE entry for this vendor.
+   - Upload the screenshot as type `screenshot` and the vendor communication as type `advisory` or `email`.
+   - This ensures the evidence is accessible when the FP expires and needs to be renewed.
+
+3. **Stage the finding in the queue:**
+   - Check the checkbox at the left of the finding row on the Reporting page.
+   - Enter the **Vendor / Platform**.
+   - Select **FP** as the workflow type.
+   - Click **Add to Queue**.
+
+4. **Open the False Positive workflow in Ivanti:**
+   - Process queued FP items in a dedicated session.
+   - See the dedicated FP workflow documentation for the full Ivanti submission steps.
+
+---
+
+#### Path D — Risk Acceptance (Archer Ticket)
+
+1. **Collect information** as you would for a False Positive (device screenshot, version info).
+2. If vendor communication is required (patch timeline, EOL statement, recommended mitigations):
+   - Open a vendor support ticket requesting remediation steps, configuration guidance, or a patch commitment date.
+   - Use the vendor's response to fill out the Archer remediation plan.
+3. **Stage the finding in the queue:**
+   - Check the checkbox on the finding row.
+   - Enter the **Vendor / Platform**.
+   - Select **Archer** as the workflow type.
+   - Click **Add to Queue**.
+4. **Open the Archer Risk Acceptance ticket:**
+   - Process queued Archer items in a dedicated session.
+   - See the dedicated Archer process documentation for the full submission steps.
+5. Once the EXC number is assigned, enter it in the finding's **Notes** cell on the Reporting page (format: `EXC-XXXXX`). The dashboard will recognise the pattern and include it in the Action Coverage chart under "Archer Exception".
+
+---
+
+## 5. Using the Ivanti Queue
+
+The Ivanti Queue is a personal staging list built into the Reporting page. Rather than interrupting your review to context-switch into Ivanti, you tag findings as you go and then batch-process all the Ivanti work in one focused session.
+
+### Adding Items to the Queue
+
+1. On the Reporting page, check the **checkbox at the far left** of any finding row.
+2. A popover appears anchored to the row.
+3. For **FP** and **Archer** items: enter the **Vendor / Platform** (free text — e.g., "Juniper MX", "Cisco IOS-XE").
+4. Select the **workflow type**:
+   - **FP** — False Positive request to be submitted in Ivanti
+   - **Archer** — Archer Risk Acceptance ticket to be opened
+   - **CARD** — Asset not owned by our BU; IP address is captured automatically
+5. Click **Add to Queue**. The row checkbox turns solid blue to indicate it is queued.
+
+### Opening the Queue Panel
+
+Click the **Queue** button in the top-right of the Reporting page. A slide-out panel opens from the right showing all your queued items.
+
+- **CARD** items appear at the top of the panel in their own green section, with the IP address displayed for easy CARD search.
+- **FP and Archer** items are grouped alphabetically by vendor/platform below.
+- Each item shows: Finding ID, CVEs (or IP for CARD), and the workflow type badge (amber = FP, sky = Archer, green = CARD).
+
+### Working the Queue
+
+**Marking items complete:**
+Once you have submitted the FP or Archer ticket in Ivanti (or actioned the CARD item), check the item's green checkbox to mark it complete. Completed items are shown with a strikethrough at reduced opacity.
+
+**Deleting items:**
+- Click the trash icon on an individual item to remove it.
+- To remove multiple items at once: check the small red selection checkbox on the left of each item you want to remove, then click **Delete (N)** in the footer.
+
+**Clearing completed items:**
+Click **Clear Completed** in the footer to remove all marked-complete items at once.
+
+> Queue items are stored in the database and are **personal to your login** — they persist across sessions and page refreshes. Other team members see only their own queue.
+
+---
+
+## 6. Workflow Status Reference
+
+The **Workflow** column on the Reporting page tracks FP# tickets — False Positive requests submitted in Ivanti. The badge shows the ticket ID and its current state, colour-coded by urgency.
+
+> SYS# workflows are auto-generated system tracking records. They are not displayed and do not require team action.
+
+### Status Colour Codes
+
+#### 🔴 Red — Act Immediately
+
+| State | Meaning | Required Action |
+|---|---|---|
+| **Expired** | An FP# ticket existed but the exception window has lapsed. The finding has re-opened. | Log into Ivanti and submit a **new FP request** for this finding. Reference the previous ticket if relevant. |
+| **Rejected** | The security team reviewed the FP and denied it. The finding is a confirmed, exploitable vulnerability. | **Remediate the vulnerability.** Apply the relevant patch, configuration change, or compensating control. Do not resubmit an FP without new evidence. |
+
+#### 🟡 Amber — Action Required Soon
+
+| State | Meaning | Required Action |
+|---|---|---|
+| **Reworked** | The FP request was challenged by the reviewer and returned for revision. | Open the ticket in Ivanti, review the feedback, update the justification, and **resubmit**. |
+| **Actionable** | The FP ticket has been flagged as needing team action. | Open the ticket in Ivanti and respond to what is required. |
+
+#### 🔵 Blue — In Flight, Monitor
+
+| State | Meaning | Required Action |
+|---|---|---|
+| **Requested** | An FP# ticket has been submitted and is awaiting security team approval. | No immediate action. Monitor for approval or rejection. If the SLA window is approaching with no response, follow up with the approver. |
+
+#### — (No Badge) — Untriaged
+
+| State | Meaning | Required Action |
+|---|---|---|
+| **No workflow badge** | No FP ticket has ever been submitted for this finding. | Triage the finding using the workflow in Section 4. Determine whether to remediate, submit an FP, or open an Archer ticket. |
+
+### Decision Flowchart
+
+```
+Finding appears in Reporting page
+│
+├── Check the Workflow column
+│
+├── No badge (—)
+│   └── Triage → follow Section 4 workflow
+│
+└── Has a badge → check the colour:
+    │
+    ├── 🔵 BLUE (Requested)
+    │   └── Monitor. Follow up if SLA window is approaching.
+    │
+    ├── 🟡 AMBER (Reworked / Actionable)
+    │   └── Open Ivanti ticket → review feedback → update → resubmit
+    │
+    └── 🔴 RED
+        │
+        ├── Expired → Submit a new FP request in Ivanti
+        │
+        └── Rejected → Remediate the vulnerability
+```
+
+---
+
+## 7. Quick Reference Card
+
+### Action Decision Matrix
+
+| Research Outcome | Config Change? | Action Required |
+|---|---|---|
+| Can be patched (firmware/software) | N/A | Upgrade device — no ticket needed |
+| Can be patched (configuration change only) | Yes | Archer Risk Acceptance ticket (EXC-XXXXX) |
+| False Positive — not applicable to platform/version | N/A | FP workflow in Ivanti + evidence in CVE database |
+| Cannot be patched — patch pending from vendor | N/A | Archer Risk Acceptance ticket (renew when patched) |
+| Cannot be patched — EOL/EOS device | N/A | Archer ticket with mitigation steps + remediation plan |
+| Asset not owned by our BU | N/A | CARD queue → CARD asset disposition process |
+
+### Workflow Badge Quick Reference
+
+| Badge | State | One-Line Action |
+|---|---|---|
+| 🔴 Red | Expired | Renew FP request in Ivanti |
+| 🔴 Red | Rejected | Remediate the vulnerability |
+| 🟡 Amber | Reworked | Update and resubmit FP ticket |
+| 🟡 Amber | Actionable | Review ticket in Ivanti and respond |
+| 🔵 Blue | Requested | Monitor — no action yet |
+| — | No badge | Triage: follow Section 4 |
+
+### Dashboard Shortcut Reference
+
+| Task | How |
+|---|---|
+| See only untriaged findings | Click **Pending** segment on Action Coverage chart |
+| See findings due this week | Click a date on the Home page calendar widget |
+| See all findings for a specific Archer ticket | Click the EXC badge on the Home page CVE row |
+| Correct a wrong hostname | Click the Host cell inline on the Reporting page |
+| Save a screenshot or advisory to a CVE | Home page → CVE row → Upload document |
+| Stage findings for a batch FP/Archer session | Use the Ivanti Queue (checkbox column on Reporting page) |
+| Filter to a specific vendor or SLA status | Click the filter icon (⊙) on the relevant column header |
+
+---
+
+*Related documentation: FP Workflow Submission (Ivanti) · Archer Risk Acceptance Process · CARD Asset Disposition Process · MOP: Workflow Status Colour Codes*

frontend/src/App.js

@@ -13,6 +13,7 @@ import CalendarWidget from './components/CalendarWidget';
 import ReportingPage from './components/pages/ReportingPage';
 import KnowledgeBasePage from './components/pages/KnowledgeBasePage';
 import ExportsPage from './components/pages/ExportsPage';
+import CompliancePage from './components/pages/CompliancePage';
 import './App.css';
 
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
@@ -1043,6 +1044,7 @@ export default function App() {
 
         {/* Page content */}
         {currentPage === 'reporting'      && <ReportingPage filterDate={calendarFilter} filterEXC={reportingExcFilter} />}
+        {currentPage === 'compliance'     && <CompliancePage onNavigate={setCurrentPage} />}
         {currentPage === 'knowledge-base' && <KnowledgeBasePage />}
         {currentPage === 'exports'        && <ExportsPage />}
 

frontend/src/components/NavDrawer.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { X, Home, BarChart2, BookOpen, Download } from 'lucide-react';
+import { X, Home, BarChart2, BookOpen, Download, ShieldCheck } from 'lucide-react';
 
 const NAV_ITEMS = [
   { id: 'home',           label: 'Home',           icon: Home,        color: '#0EA5E9', description: 'Main dashboard'            },
   { id: 'reporting',      label: 'Reporting',      icon: BarChart2,   color: '#F59E0B', description: 'Reports & analytics'       },
+  { id: 'compliance',     label: 'Compliance',     icon: ShieldCheck, color: '#14B8A6', description: 'AEO posture & metrics'     },
   { id: 'knowledge-base', label: 'Knowledge Base', icon: BookOpen,    color: '#10B981', description: 'Articles & documentation'   },
   { id: 'exports',        label: 'Exports',        icon: Download,    color: '#8B5CF6', description: 'Export data & reports'      },
 ];

frontend/src/components/pages/ComplianceDetailPanel.js

@@ -0,0 +1,366 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { X, MessageSquare, Send, Loader, AlertCircle, Clock, Shield } from 'lucide-react';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+
+const TEAL = '#14B8A6';
+
+const CATEGORY_COLORS = {
+    'Vulnerability Management': '#EF4444',
+    'Access & MFA':             '#F59E0B',
+    'Logging & Monitoring':     '#8B5CF6',
+    'End-of-Life OS':           '#F97316',
+    'Decommissioned Assets':    '#64748B',
+    'Asset Data Quality':       '#64748B',
+    'Application Security':     '#0EA5E9',
+    'Disaster Recovery':        TEAL,
+    'Endpoint Protection':      '#F97316',
+};
+
+function categoryColor(category) {
+    return CATEGORY_COLORS[category] || '#94A3B8';
+}
+
+function MetricChip({ metricId, category, status }) {
+    const color = status === 'resolved' ? '#64748B' : categoryColor(category);
+    return (
+        <span style={{
+            display: 'inline-flex', alignItems: 'center',
+            padding: '0.2rem 0.5rem',
+            background: `${color}18`,
+            border: `1px solid ${color}50`,
+            borderRadius: '0.25rem',
+            color, fontSize: '0.7rem', fontFamily: 'monospace', fontWeight: '600',
+        }}>
+            {metricId}
+        </span>
+    );
+}
+
+export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded, onNavigate }) {
+    const [detail, setDetail]       = useState(null);
+    const [loading, setLoading]     = useState(true);
+    const [error, setError]         = useState(null);
+    const [noteText, setNoteText]   = useState('');
+    const [noteMetric, setNoteMetric] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [noteError, setNoteError] = useState(null);
+
+    const fetchDetail = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res  = await fetch(`${API_BASE}/compliance/items/${encodeURIComponent(hostname)}`, { credentials: 'include' });
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Failed to load device');
+            setDetail(data);
+
+            // Default note metric to first active failing metric
+            const firstActive = (data.metrics || []).find(m => m.status === 'active');
+            if (firstActive) setNoteMetric(firstActive.metric_id);
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    }, [hostname]);
+
+    useEffect(() => { fetchDetail(); }, [fetchDetail]);
+
+    const handleAddNote = async () => {
+        if (!noteText.trim() || !noteMetric) return;
+        setSubmitting(true);
+        setNoteError(null);
+        try {
+            const res = await fetch(`${API_BASE}/compliance/notes`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ hostname, metric_id: noteMetric, note: noteText.trim() }),
+            });
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Failed to save note');
+            setNoteText('');
+            await fetchDetail();
+            if (onNoteAdded) onNoteAdded();
+        } catch (err) {
+            setNoteError(err.message);
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    const activeMetrics   = detail?.metrics?.filter(m => m.status === 'active')   || [];
+    const resolvedMetrics = detail?.metrics?.filter(m => m.status === 'resolved') || [];
+
+    return (
+        <>
+            {/* Backdrop */}
+            <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 40 }} />
+
+            {/* Panel */}
+            <div style={{
+                position: 'fixed', top: 0, right: 0, bottom: 0, width: '420px',
+                background: 'linear-gradient(180deg, #0F1A2E 0%, #0A1628 100%)',
+                borderLeft: `1px solid ${TEAL}30`,
+                boxShadow: `-8px 0 32px rgba(0,0,0,0.6)`,
+                zIndex: 41,
+                display: 'flex', flexDirection: 'column',
+                overflowY: 'auto',
+            }}>
+                {/* Header */}
+                <div style={{
+                    padding: '1.25rem 1.25rem 1rem',
+                    borderBottom: '1px solid rgba(255,255,255,0.06)',
+                    flexShrink: 0,
+                }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                        <div style={{ minWidth: 0, flex: 1, marginRight: '0.75rem' }}>
+                            <div style={{ fontFamily: 'monospace', fontSize: '0.9rem', fontWeight: '700', color: '#F8FAFC', wordBreak: 'break-all', lineHeight: 1.3 }}>
+                                {hostname}
+                            </div>
+                            {detail && (
+                                <div style={{ marginTop: '0.4rem', display: 'flex', flexWrap: 'wrap', gap: '0.4rem' }}>
+                                    {detail.ip_address && (
+                                        <span style={{ fontSize: '0.72rem', fontFamily: 'monospace', color: '#64748B' }}>{detail.ip_address}</span>
+                                    )}
+                                    {detail.device_type && (
+                                        <span style={{ fontSize: '0.72rem', color: '#475569' }}>· {detail.device_type}</span>
+                                    )}
+                                    <span style={{ fontSize: '0.72rem', color: TEAL }}>· {detail.team}</span>
+                                </div>
+                            )}
+                        </div>
+                        <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#475569', flexShrink: 0, padding: '0.25rem' }}
+                            onMouseEnter={e => e.currentTarget.style.color = '#E2E8F0'}
+                            onMouseLeave={e => e.currentTarget.style.color = '#475569'}>
+                            <X style={{ width: '18px', height: '18px' }} />
+                        </button>
+                    </div>
+                </div>
+
+                {loading && (
+                    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <Loader style={{ width: '28px', height: '28px', color: TEAL, animation: 'spin 1s linear infinite' }} />
+                    </div>
+                )}
+
+                {error && (
+                    <div style={{ padding: '1.25rem', display: 'flex', gap: '0.5rem', color: '#F87171', fontSize: '0.8rem' }}>
+                        <AlertCircle style={{ width: '16px', height: '16px', flexShrink: 0, marginTop: '1px' }} />{error}
+                    </div>
+                )}
+
+                {!loading && !error && detail && (
+                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+
+                        {/* Active failing metrics */}
+                        {activeMetrics.length > 0 && (
+                            <Section title="Failing Metrics" icon={<Shield style={{ width: '14px', height: '14px' }} />}>
+                                {activeMetrics.map(m => (
+                                    <MetricRow key={m.metric_id} metric={m} onNavigate={onNavigate} />
+                                ))}
+                            </Section>
+                        )}
+
+                        {/* Resolved metrics */}
+                        {resolvedMetrics.length > 0 && (
+                            <Section title="Resolved Metrics" muted>
+                                {resolvedMetrics.map(m => (
+                                    <MetricRow key={m.metric_id} metric={m} resolved />
+                                ))}
+                            </Section>
+                        )}
+
+                        {/* Upload history summary */}
+                        {activeMetrics.length > 0 && (
+                            <Section title="History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>
+                                {activeMetrics.map(m => (
+                                    <div key={m.metric_id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
+                                        <MetricChip metricId={m.metric_id} category={m.category} />
+                                        <div style={{ fontSize: '0.72rem', color: '#64748B', fontFamily: 'monospace', textAlign: 'right' }}>
+                                            <span style={{ color: m.seen_count > 2 ? '#F59E0B' : '#94A3B8' }}>
+                                                {m.seen_count}× seen
+                                            </span>
+                                            {m.first_seen && <span style={{ marginLeft: '0.5rem' }}>since {m.first_seen}</span>}
+                                        </div>
+                                    </div>
+                                ))}
+                            </Section>
+                        )}
+
+                        {/* Notes */}
+                        <Section title="Notes" icon={<MessageSquare style={{ width: '14px', height: '14px' }} />} grow>
+                            {detail.notes.length === 0 && (
+                                <div style={{ color: '#334155', fontSize: '0.75rem', fontStyle: 'italic', marginBottom: '0.75rem' }}>No notes yet</div>
+                            )}
+                            {detail.notes.map(n => (
+                                <div key={n.id} style={{
+                                    marginBottom: '0.75rem', padding: '0.625rem 0.75rem',
+                                    background: 'rgba(15,23,42,0.6)', borderRadius: '0.375rem',
+                                    border: '1px solid rgba(255,255,255,0.05)',
+                                }}>
+                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.3rem' }}>
+                                        <MetricChip metricId={n.metric_id} category={activeMetrics.find(m => m.metric_id === n.metric_id)?.category || ''} />
+                                        <span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace' }}>
+                                            {n.created_by && `${n.created_by} · `}{n.created_at?.slice(0, 10)}
+                                        </span>
+                                    </div>
+                                    <div style={{ fontSize: '0.8rem', color: '#CBD5E1', lineHeight: 1.5 }}>{n.note}</div>
+                                </div>
+                            ))}
+
+                            {/* Add note */}
+                            <div style={{ marginTop: 'auto', paddingTop: '0.75rem', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+                                {activeMetrics.length > 1 && (
+                                    <select
+                                        value={noteMetric}
+                                        onChange={e => setNoteMetric(e.target.value)}
+                                        style={{
+                                            width: '100%', marginBottom: '0.5rem',
+                                            background: 'rgba(15,23,42,0.8)', border: '1px solid rgba(20,184,166,0.25)',
+                                            borderRadius: '0.25rem', color: '#CBD5E1',
+                                            padding: '0.4rem 0.5rem', fontSize: '0.75rem', fontFamily: 'monospace',
+                                        }}>
+                                        {activeMetrics.map(m => (
+                                            <option key={m.metric_id} value={m.metric_id}>{m.metric_id} — {m.category}</option>
+                                        ))}
+                                    </select>
+                                )}
+                                <div style={{ display: 'flex', gap: '0.5rem' }}>
+                                    <textarea
+                                        value={noteText}
+                                        onChange={e => setNoteText(e.target.value)}
+                                        placeholder="Add a note…"
+                                        rows={2}
+                                        style={{
+                                            flex: 1, resize: 'none',
+                                            background: 'rgba(15,23,42,0.8)', border: '1px solid rgba(20,184,166,0.25)',
+                                            borderRadius: '0.375rem', color: '#F8FAFC',
+                                            padding: '0.5rem 0.625rem', fontSize: '0.8rem',
+                                            outline: 'none',
+                                        }}
+                                        onFocus={e => e.target.style.borderColor = `${TEAL}70`}
+                                        onBlur={e => e.target.style.borderColor = 'rgba(20,184,166,0.25)'}
+                                        onKeyDown={e => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) handleAddNote(); }}
+                                    />
+                                    <button onClick={handleAddNote} disabled={!noteText.trim() || submitting}
+                                        style={{
+                                            padding: '0.5rem 0.625rem', flexShrink: 0,
+                                            background: noteText.trim() ? `${TEAL}20` : 'transparent',
+                                            border: `1px solid ${noteText.trim() ? TEAL : 'rgba(20,184,166,0.2)'}`,
+                                            borderRadius: '0.375rem', color: noteText.trim() ? TEAL : '#334155',
+                                            cursor: noteText.trim() ? 'pointer' : 'default', transition: 'all 0.15s',
+                                        }}>
+                                        {submitting
+                                            ? <Loader style={{ width: '16px', height: '16px', animation: 'spin 1s linear infinite' }} />
+                                            : <Send style={{ width: '16px', height: '16px' }} />}
+                                    </button>
+                                </div>
+                                {noteError && <div style={{ marginTop: '0.4rem', color: '#F87171', fontSize: '0.72rem' }}>{noteError}</div>}
+                            </div>
+                        </Section>
+                    </div>
+                )}
+            </div>
+        </>
+    );
+}
+
+function Section({ title, icon, children, muted, grow }) {
+    return (
+        <div style={{
+            padding: '1rem 1.25rem',
+            borderBottom: '1px solid rgba(255,255,255,0.04)',
+            ...(grow ? { flex: 1, display: 'flex', flexDirection: 'column' } : {}),
+        }}>
+            <div style={{
+                display: 'flex', alignItems: 'center', gap: '0.4rem',
+                fontSize: '0.68rem', fontFamily: 'monospace', textTransform: 'uppercase',
+                letterSpacing: '0.1em', color: muted ? '#334155' : '#475569',
+                marginBottom: '0.75rem',
+            }}>
+                {icon && <span style={{ color: muted ? '#334155' : TEAL }}>{icon}</span>}
+                {title}
+            </div>
+            {children}
+        </div>
+    );
+}
+
+function MetricRow({ metric, resolved, onNavigate }) {
+    const color = resolved ? '#475569' : categoryColor(metric.category);
+    const extra = metric.extra || {};
+
+    const ivantiId = (!resolved && metric.metric_id?.startsWith('2.3'))
+        ? (extra['Ivanti_Vulnerability_ID'] || null)
+        : null;
+
+    // Surface the most useful extra fields per metric type
+    const highlights = [];
+    if (extra['CVEs_Associated'])     highlights.push({ label: 'CVEs',    value: extra['CVEs_Associated'] });
+    if (extra['SLA_Status'])          highlights.push({ label: 'SLA',     value: extra['SLA_Status'] });
+    if (extra['Due_Date'])            highlights.push({ label: 'Due',     value: extra['Due_Date'] });
+    if (extra['Normalized - Operating System'])
+        highlights.push({ label: 'OS', value: `${extra['Normalized - Operating System']} ${extra['Normalized - Operating System Version'] || ''}`.trim() });
+    if (extra['EOS - End of Service Life'])
+        highlights.push({ label: 'EoL', value: extra['EOS - End of Service Life'] });
+    if (extra['Splunk - Last Seen'])  highlights.push({ label: 'Splunk', value: extra['Splunk - Last Seen'] });
+    if (extra['MFA - Software'])      highlights.push({ label: 'MFA SW', value: extra['MFA - Software'] });
+
+    return (
+        <div style={{
+            marginBottom: '0.625rem', padding: '0.625rem 0.75rem',
+            background: resolved ? 'transparent' : `${color}08`,
+            border: `1px solid ${color}25`,
+            borderRadius: '0.375rem',
+            opacity: resolved ? 0.5 : 1,
+        }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: highlights.length ? '0.4rem' : 0 }}>
+                <MetricChip metricId={metric.metric_id} category={metric.category} status={metric.status} />
+                {resolved && <span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace' }}>resolved {metric.resolved_on || ''}</span>}
+            </div>
+            {metric.metric_desc && (
+                <div style={{ fontSize: '0.72rem', color: '#475569', marginBottom: (highlights.length || ivantiId) ? '0.4rem' : 0, lineHeight: 1.4 }}>
+                    {metric.metric_desc.length > 100 ? metric.metric_desc.slice(0, 100) + '…' : metric.metric_desc}
+                </div>
+            )}
+            {ivantiId && (
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: highlights.length ? '0.25rem' : 0 }}>
+                    <div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center', minWidth: 0 }}>
+                        <span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace', flexShrink: 0 }}>Ivanti ID</span>
+                        <span style={{ fontSize: '0.68rem', color: '#94A3B8', fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ivantiId}</span>
+                    </div>
+                    {onNavigate && (
+                        <button
+                            onClick={e => { e.stopPropagation(); onNavigate('reporting'); }}
+                            style={{
+                                flexShrink: 0, marginLeft: '0.5rem',
+                                background: 'rgba(14,165,233,0.1)',
+                                border: '1px solid rgba(14,165,233,0.4)',
+                                borderRadius: '0.25rem',
+                                color: '#0EA5E9',
+                                fontSize: '0.65rem', fontFamily: 'monospace',
+                                padding: '0.2rem 0.5rem',
+                                cursor: 'pointer', whiteSpace: 'nowrap',
+                                transition: 'all 0.15s',
+                            }}
+                            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.18)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.7)'; }}
+                            onMouseLeave={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.1)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.4)'; }}
+                        >
+                            View in Reporting →
+                        </button>
+                    )}
+                </div>
+            )}
+            {highlights.map(h => (
+                <div key={h.label} style={{ display: 'flex', gap: '0.4rem', marginTop: '0.25rem' }}>
+                    <span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace', minWidth: '48px' }}>{h.label}</span>
+                    <span style={{ fontSize: '0.68rem', color: '#94A3B8', fontFamily: 'monospace', wordBreak: 'break-all' }}>
+                        {String(h.value).length > 80 ? String(h.value).slice(0, 80) + '…' : h.value}
+                    </span>
+                </div>
+            ))}
+        </div>
+    );
+}

frontend/src/components/pages/CompliancePage.js

@@ -0,0 +1,495 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Upload, MessageSquare, RefreshCw, AlertCircle, Loader } from 'lucide-react';
+import { useAuth } from '../../contexts/AuthContext';
+import ComplianceUploadModal from './ComplianceUploadModal';
+import ComplianceDetailPanel from './ComplianceDetailPanel';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+const TEAL = '#14B8A6';
+const TEAMS = ['STEAM', 'ACCESS-ENG'];
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const STATUS_COLOR = {
+    'Meets/Exceeds Target':  '#10B981',
+    'Within 15% of Target':  '#F59E0B',
+    'Below 15% of Target':   '#EF4444',
+};
+
+const CATEGORY_COLORS = {
+    'Vulnerability Management': '#EF4444',
+    'Access & MFA':             '#F59E0B',
+    'Logging & Monitoring':     '#8B5CF6',
+    'End-of-Life OS':           '#F97316',
+    'Decommissioned Assets':    '#64748B',
+    'Asset Data Quality':       '#64748B',
+    'Application Security':     '#0EA5E9',
+    'Disaster Recovery':        TEAL,
+    'Endpoint Protection':      '#F97316',
+};
+
+function statusColor(status) {
+    return STATUS_COLOR[status] || '#EF4444';
+}
+
+function pctDisplay(pct) {
+    return `${Math.round(pct * 100)}%`;
+}
+
+// Deduplicate summary entries — one per metric_id for the selected team
+// (exclude aggregate "ALL: NTS-AEO" rows)
+function teamMetrics(entries, team) {
+    return entries.filter(e => e.team === team);
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+function MetricHealthCard({ entry, active, onClick }) {
+    const color = statusColor(entry.status);
+    const isOk  = entry.status === 'Meets/Exceeds Target';
+
+    return (
+        <button
+            onClick={onClick}
+            style={{
+                background: active
+                    ? `${color}18`
+                    : 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
+                border: `1.5px solid ${active ? color : color + '40'}`,
+                borderRadius: '0.5rem',
+                padding: '0.875rem 1rem',
+                cursor: 'pointer',
+                textAlign: 'left',
+                transition: 'all 0.15s',
+                minWidth: '160px',
+                flex: '1 1 0',
+            }}
+            onMouseEnter={e => { if (!active) e.currentTarget.style.borderColor = color + '80'; }}
+            onMouseLeave={e => { if (!active) e.currentTarget.style.borderColor = color + '40'; }}
+        >
+            {/* Metric ID */}
+            <div style={{ fontFamily: 'monospace', fontSize: '0.95rem', fontWeight: '700', color: active ? color : '#E2E8F0', marginBottom: '0.25rem' }}>
+                {entry.metric_id}
+            </div>
+
+            {/* Category */}
+            <div style={{ fontSize: '0.65rem', color: '#475569', marginBottom: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                {entry.category}
+            </div>
+
+            {/* Compliance % */}
+            <div style={{ fontFamily: 'monospace', fontSize: '1.4rem', fontWeight: '700', color, lineHeight: 1, marginBottom: '0.3rem' }}>
+                {pctDisplay(entry.compliance_pct)}
+            </div>
+
+            {/* Target */}
+            <div style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace' }}>
+                target {pctDisplay(entry.target)}
+            </div>
+
+            {/* Status pill */}
+            <div style={{
+                marginTop: '0.625rem', display: 'inline-flex', alignItems: 'center', gap: '0.3rem',
+                fontSize: '0.62rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.04em',
+                color, padding: '0.2rem 0.5rem',
+                background: `${color}12`, borderRadius: '999px',
+                border: `1px solid ${color}30`,
+            }}>
+                <span style={{
+                    width: '5px', height: '5px', borderRadius: '50%',
+                    background: color, flexShrink: 0,
+                    ...(isOk ? {} : { boxShadow: `0 0 6px ${color}` }),
+                }} />
+                {isOk ? 'OK' : entry.status.replace(' of Target', '')}
+            </div>
+        </button>
+    );
+}
+
+function MetricBadge({ metricId, category }) {
+    const color = CATEGORY_COLORS[category] || '#94A3B8';
+    return (
+        <span style={{
+            display: 'inline-flex', alignItems: 'center',
+            padding: '0.15rem 0.45rem',
+            background: `${color}15`, border: `1px solid ${color}40`,
+            borderRadius: '0.2rem', color,
+            fontSize: '0.65rem', fontFamily: 'monospace', fontWeight: '600',
+            whiteSpace: 'nowrap',
+        }}>
+            {metricId}
+        </span>
+    );
+}
+
+function SeenBadge({ count }) {
+    const color = count > 3 ? '#EF4444' : count > 1 ? '#F59E0B' : '#64748B';
+    return (
+        <span style={{
+            fontSize: '0.65rem', fontFamily: 'monospace', fontWeight: '700',
+            color, padding: '0.15rem 0.4rem',
+            background: `${color}12`, borderRadius: '0.2rem',
+            border: `1px solid ${color}30`, whiteSpace: 'nowrap',
+        }}>
+            {count}×
+        </span>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Main Page
+// ---------------------------------------------------------------------------
+export default function CompliancePage({ onNavigate }) {
+    const { canWrite } = useAuth();
+
+    const [activeTeam,      setActiveTeam]      = useState('STEAM');
+    const [activeTab,       setActiveTab]        = useState('active');
+    const [metricFilter,    setMetricFilter]     = useState(null);
+    const [hostSearch,      setHostSearch]       = useState('');
+    const [summary,         setSummary]          = useState({ entries: [], overall_scores: {}, upload: null });
+    const [devices,         setDevices]          = useState([]);
+    const [loading,         setLoading]          = useState(false);
+    const [error,           setError]            = useState(null);
+    const [selectedHost,    setSelectedHost]     = useState(null);
+    const [showUpload,      setShowUpload]       = useState(false);
+
+    const fetchSummary = useCallback(async (team) => {
+        try {
+            const res  = await fetch(`${API_BASE}/compliance/summary?team=${team}`, { credentials: 'include' });
+            const data = await res.json();
+            setSummary(data);
+        } catch { /* silent */ }
+    }, []);
+
+    const fetchDevices = useCallback(async (team, tab) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res  = await fetch(`${API_BASE}/compliance/items?team=${team}&status=${tab}`, { credentials: 'include' });
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Failed to load');
+            setDevices(data.devices || []);
+        } catch (err) {
+            setError(err.message);
+            setDevices([]);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        setMetricFilter(null);
+        setHostSearch('');
+        setSelectedHost(null);
+        fetchSummary(activeTeam);
+        fetchDevices(activeTeam, activeTab);
+    }, [activeTeam]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        setMetricFilter(null);
+        fetchDevices(activeTeam, activeTab);
+    }, [activeTab]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const refresh = () => {
+        fetchSummary(activeTeam);
+        fetchDevices(activeTeam, activeTab);
+    };
+
+    // In-memory filters
+    const filteredDevices = devices
+        .filter(d => !metricFilter || d.failing_metrics.some(m => m.metric_id === metricFilter))
+        .filter(d => !hostSearch  || d.hostname.toLowerCase().includes(hostSearch.toLowerCase()));
+
+    const metrics   = teamMetrics(summary.entries, activeTeam);
+    const lastUpload = summary.upload;
+
+    return (
+        <div style={{ paddingBottom: '2rem' }}>
+
+            {/* ── Page header ─────────────────────────────────────────── */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '1.5rem' }}>
+                <div>
+                    <h2 style={{
+                        fontFamily: 'monospace', fontSize: '1.5rem', fontWeight: '700',
+                        color: TEAL, textTransform: 'uppercase', letterSpacing: '0.1em',
+                        textShadow: `0 0 16px ${TEAL}40`, marginBottom: '0.25rem',
+                    }}>
+                        AEO Compliance
+                    </h2>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
+                        {lastUpload ? (
+                            <span style={{ fontSize: '0.72rem', color: '#475569', fontFamily: 'monospace' }}>
+                                Last report: <span style={{ color: '#64748B' }}>{lastUpload.report_date || lastUpload.uploaded_at?.slice(0, 10)}</span>
+                            </span>
+                        ) : (
+                            <span style={{ fontSize: '0.72rem', color: '#334155', fontFamily: 'monospace' }}>No reports uploaded</span>
+                        )}
+                        {summary.overall_scores?.customer_network != null && (
+                            <span style={{ fontSize: '0.68rem', fontFamily: 'monospace', color: '#64748B' }}>
+                                Network: <span style={{ color: TEAL }}>{pctDisplay(summary.overall_scores.customer_network)}</span>
+                            </span>
+                        )}
+                        {summary.overall_scores?.vertical != null && (
+                            <span style={{ fontSize: '0.68rem', fontFamily: 'monospace', color: '#64748B' }}>
+                                Vertical: <span style={{ color: TEAL }}>{pctDisplay(summary.overall_scores.vertical)}</span>
+                            </span>
+                        )}
+                    </div>
+                </div>
+
+                <div style={{ display: 'flex', gap: '0.5rem', flexShrink: 0 }}>
+                    <button onClick={refresh} title="Refresh"
+                        style={{ background: 'none', border: '1px solid rgba(20,184,166,0.25)', borderRadius: '0.375rem', padding: '0.5rem', cursor: 'pointer', color: '#475569' }}
+                        onMouseEnter={e => { e.currentTarget.style.color = TEAL; e.currentTarget.style.borderColor = `${TEAL}60`; }}
+                        onMouseLeave={e => { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'rgba(20,184,166,0.25)'; }}>
+                        <RefreshCw style={{ width: '16px', height: '16px' }} />
+                    </button>
+                    {canWrite() && (
+                        <button onClick={() => setShowUpload(true)}
+                            className="intel-button"
+                            style={{
+                                background: `${TEAL}18`, border: `1px solid ${TEAL}`,
+                                color: TEAL, padding: '0.5rem 1rem',
+                                display: 'flex', alignItems: 'center', gap: '0.4rem',
+                                fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
+                                textTransform: 'uppercase', letterSpacing: '0.05em', cursor: 'pointer',
+                                borderRadius: '0.375rem',
+                            }}>
+                            <Upload style={{ width: '14px', height: '14px' }} />
+                            Upload Report
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {/* ── Team tabs ────────────────────────────────────────────── */}
+            <div style={{ display: 'flex', gap: '0.375rem', marginBottom: '1.5rem' }}>
+                {TEAMS.map(team => {
+                    const isActive = activeTeam === team;
+                    return (
+                        <button key={team} onClick={() => setActiveTeam(team)}
+                            style={{
+                                padding: '0.5rem 1.25rem', cursor: 'pointer',
+                                fontFamily: 'monospace', fontSize: '0.8rem', fontWeight: '600',
+                                textTransform: 'uppercase', letterSpacing: '0.06em',
+                                borderRadius: '0.375rem',
+                                border: isActive ? `1px solid ${TEAL}` : '1px solid rgba(20,184,166,0.2)',
+                                background: isActive ? `${TEAL}18` : 'transparent',
+                                color: isActive ? TEAL : '#475569',
+                                transition: 'all 0.15s',
+                            }}
+                            onMouseEnter={e => { if (!isActive) { e.currentTarget.style.color = '#94A3B8'; e.currentTarget.style.borderColor = 'rgba(20,184,166,0.4)'; }}}
+                            onMouseLeave={e => { if (!isActive) { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'rgba(20,184,166,0.2)'; }}}>
+                            {team}
+                        </button>
+                    );
+                })}
+            </div>
+
+            {/* ── Metric health cards ──────────────────────────────────── */}
+            {metrics.length > 0 ? (
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <div style={{ fontSize: '0.65rem', color: '#334155', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.625rem' }}>
+                        Metric Health — click to filter
+                        {metricFilter && (
+                            <button onClick={() => setMetricFilter(null)}
+                                style={{ marginLeft: '0.75rem', color: TEAL, background: 'none', border: 'none', cursor: 'pointer', fontSize: '0.65rem', fontFamily: 'monospace' }}>
+                                × clear filter
+                            </button>
+                        )}
+                    </div>
+                    <div style={{ display: 'flex', gap: '0.625rem', flexWrap: 'wrap' }}>
+                        {metrics.map(entry => (
+                            <MetricHealthCard
+                                key={entry.metric_id}
+                                entry={entry}
+                                active={metricFilter === entry.metric_id}
+                                onClick={() => setMetricFilter(metricFilter === entry.metric_id ? null : entry.metric_id)}
+                            />
+                        ))}
+                    </div>
+                </div>
+            ) : lastUpload === null ? (
+                <div style={{
+                    marginBottom: '1.5rem', padding: '2rem',
+                    border: '1px dashed rgba(20,184,166,0.2)', borderRadius: '0.5rem',
+                    textAlign: 'center',
+                }}>
+                    <div style={{ color: '#334155', fontFamily: 'monospace', fontSize: '0.8rem' }}>
+                        No compliance data — upload a report to get started
+                    </div>
+                </div>
+            ) : null}
+
+            {/* ── Device table ─────────────────────────────────────────── */}
+            <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',
+                overflow: 'hidden',
+            }}>
+                {/* Table toolbar */}
+                <div style={{
+                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                    padding: '0.875rem 1rem', borderBottom: '1px solid rgba(255,255,255,0.05)',
+                }}>
+                    {/* Active / Resolved tabs */}
+                    <div style={{ display: 'flex', gap: '0.25rem' }}>
+                        {['active', 'resolved'].map(tab => {
+                            const isActive = activeTab === tab;
+                            return (
+                                <button key={tab} onClick={() => setActiveTab(tab)}
+                                    style={{
+                                        padding: '0.35rem 0.875rem', cursor: 'pointer',
+                                        fontFamily: 'monospace', fontSize: '0.72rem', fontWeight: '600',
+                                        textTransform: 'uppercase', letterSpacing: '0.04em',
+                                        borderRadius: '0.25rem',
+                                        border: isActive ? `1px solid ${TEAL}60` : '1px solid transparent',
+                                        background: isActive ? `${TEAL}12` : 'transparent',
+                                        color: isActive ? TEAL : '#475569',
+                                    }}>
+                                    {tab}
+                                    {isActive && (
+                                        <span style={{ marginLeft: '0.4rem', color: '#64748B' }}>
+                                            ({loading ? '…' : filteredDevices.length})
+                                        </span>
+                                    )}
+                                </button>
+                            );
+                        })}
+                    </div>
+
+                    {/* Hostname search */}
+                    <input
+                        value={hostSearch}
+                        onChange={e => setHostSearch(e.target.value)}
+                        placeholder="Search hostname…"
+                        style={{
+                            background: 'rgba(15,23,42,0.8)', border: '1px solid rgba(20,184,166,0.2)',
+                            borderRadius: '0.25rem', color: '#E2E8F0', outline: 'none',
+                            padding: '0.35rem 0.625rem', fontSize: '0.75rem', fontFamily: 'monospace',
+                            width: '220px',
+                        }}
+                        onFocus={e => e.target.style.borderColor = `${TEAL}60`}
+                        onBlur={e => e.target.style.borderColor = 'rgba(20,184,166,0.2)'}
+                    />
+                </div>
+
+                {/* Column headers */}
+                <div style={{
+                    display: 'grid',
+                    gridTemplateColumns: '2.5fr 1.1fr 1fr 2fr 0.5fr 0.4fr',
+                    padding: '0.5rem 1rem',
+                    borderBottom: '1px solid rgba(255,255,255,0.05)',
+                    fontSize: '0.62rem', color: '#334155',
+                    fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.08em',
+                }}>
+                    <span>Hostname</span>
+                    <span>IP Address</span>
+                    <span>Type</span>
+                    <span>Failing Metrics</span>
+                    <span>Seen</span>
+                    <span></span>
+                </div>
+
+                {/* Rows */}
+                {loading ? (
+                    <div style={{ padding: '3rem', textAlign: 'center' }}>
+                        <Loader style={{ width: '28px', height: '28px', color: TEAL, margin: '0 auto', animation: 'spin 1s linear infinite' }} />
+                    </div>
+                ) : error ? (
+                    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem', color: '#F87171', fontSize: '0.8rem' }}>
+                        <AlertCircle style={{ width: '16px', height: '16px' }} />{error}
+                    </div>
+                ) : filteredDevices.length === 0 ? (
+                    <div style={{ padding: '3rem', textAlign: 'center', color: '#334155', fontFamily: 'monospace', fontSize: '0.8rem' }}>
+                        {lastUpload === null ? 'No reports uploaded yet' : activeTab === 'active' ? 'No non-compliant devices' : 'No resolved items'}
+                    </div>
+                ) : (
+                    filteredDevices.map(device => (
+                        <DeviceRow
+                            key={device.hostname}
+                            device={device}
+                            selected={selectedHost === device.hostname}
+                            onClick={() => setSelectedHost(selectedHost === device.hostname ? null : device.hostname)}
+                        />
+                    ))
+                )}
+            </div>
+
+            {/* ── Detail panel ─────────────────────────────────────────── */}
+            {selectedHost && (
+                <ComplianceDetailPanel
+                    hostname={selectedHost}
+                    onClose={() => setSelectedHost(null)}
+                    onNoteAdded={refresh}
+                    onNavigate={onNavigate}
+                />
+            )}
+
+            {/* ── Upload modal ─────────────────────────────────────────── */}
+            {showUpload && (
+                <ComplianceUploadModal
+                    onClose={() => setShowUpload(false)}
+                    onUploadComplete={() => { setShowUpload(false); refresh(); }}
+                />
+            )}
+        </div>
+    );
+}
+
+function DeviceRow({ device, selected, onClick }) {
+    return (
+        <div
+            onClick={onClick}
+            style={{
+                display: 'grid',
+                gridTemplateColumns: '2.5fr 1.1fr 1fr 2fr 0.5fr 0.4fr',
+                padding: '0.625rem 1rem',
+                borderBottom: '1px solid rgba(255,255,255,0.04)',
+                cursor: 'pointer',
+                background: selected ? `${TEAL}08` : 'transparent',
+                borderLeft: selected ? `2px solid ${TEAL}` : '2px solid transparent',
+                transition: 'all 0.15s',
+                alignItems: 'center',
+            }}
+            onMouseEnter={e => { if (!selected) e.currentTarget.style.background = 'rgba(255,255,255,0.025)'; }}
+            onMouseLeave={e => { if (!selected) e.currentTarget.style.background = 'transparent'; }}
+        >
+            {/* Hostname */}
+            <div style={{ fontFamily: 'monospace', fontSize: '0.78rem', color: selected ? TEAL : '#E2E8F0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {device.hostname}
+            </div>
+
+            {/* IP */}
+            <div style={{ fontFamily: 'monospace', fontSize: '0.72rem', color: '#64748B' }}>
+                {device.ip_address || '—'}
+            </div>
+
+            {/* Type */}
+            <div style={{ fontSize: '0.7rem', color: '#475569', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {device.device_type || '—'}
+            </div>
+
+            {/* Failing metrics */}
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
+                {device.failing_metrics.map(m => (
+                    <MetricBadge key={m.metric_id} metricId={m.metric_id} category={m.category} />
+                ))}
+            </div>
+
+            {/* Seen count */}
+            <div>
+                <SeenBadge count={device.seen_count} />
+            </div>
+
+            {/* Notes indicator */}
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                {device.has_notes && (
+                    <MessageSquare style={{ width: '13px', height: '13px', color: TEAL, opacity: 0.7 }} />
+                )}
+            </div>
+        </div>
+    );
+}

frontend/src/components/pages/ComplianceUploadModal.js

@@ -0,0 +1,221 @@
+import React, { useState, useRef } from 'react';
+import { X, CheckCircle, AlertCircle, Loader, FileSpreadsheet } from 'lucide-react';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+
+// phase: idle → uploading → preview → committing → done | error
+export default function ComplianceUploadModal({ onClose, onUploadComplete }) {
+    const [phase, setPhase]           = useState('idle');
+    const [previewData, setPreviewData] = useState(null);
+    const [error, setError]           = useState(null);
+    const [dragOver, setDragOver]     = useState(false);
+    const fileInputRef                = useRef(null);
+
+    const handleFile = async (file) => {
+        if (!file) return;
+        if (!file.name.toLowerCase().endsWith('.xlsx')) {
+            setError('File must be an .xlsx spreadsheet');
+            return;
+        }
+
+        setPhase('uploading');
+        setError(null);
+
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            const res  = await fetch(`${API_BASE}/compliance/preview`, {
+                method: 'POST',
+                credentials: 'include',
+                body: formData,
+            });
+            const data = await res.json();
+
+            if (!res.ok) {
+                throw new Error(data.error || 'Upload failed');
+            }
+
+            setPreviewData(data);
+            setPhase('preview');
+        } catch (err) {
+            setError(err.message);
+            setPhase('error');
+        }
+    };
+
+    const handleCommit = async () => {
+        if (!previewData) return;
+        setPhase('committing');
+        setError(null);
+
+        try {
+            const res  = await fetch(`${API_BASE}/compliance/commit`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    tempFile:    previewData.tempFile,
+                    filename:    previewData.filename,
+                    report_date: previewData.report_date,
+                }),
+            });
+            const data = await res.json();
+
+            if (!res.ok) throw new Error(data.error || 'Commit failed');
+
+            setPhase('done');
+            setTimeout(onUploadComplete, 1200);
+        } catch (err) {
+            setError(err.message);
+            setPhase('error');
+        }
+    };
+
+    const TEAL = '#14B8A6';
+
+    return (
+        <div style={{
+            position: 'fixed', inset: 0, zIndex: 60,
+            background: 'rgba(10, 14, 39, 0.97)',
+            backdropFilter: 'blur(12px)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            padding: '1rem',
+        }}>
+            <div style={{
+                background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
+                border: `1px solid ${TEAL}40`,
+                borderRadius: '0.75rem',
+                boxShadow: `0 20px 60px rgba(0,0,0,0.7), 0 0 40px ${TEAL}15`,
+                width: '100%', maxWidth: '480px',
+                padding: '2rem',
+            }}>
+                {/* Header */}
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.75rem' }}>
+                    <div>
+                        <div style={{ fontFamily: 'monospace', fontSize: '1rem', fontWeight: '700', color: TEAL, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
+                            Upload Report
+                        </div>
+                        <div style={{ fontSize: '0.75rem', color: '#475569', marginTop: '2px' }}>NTS_AEO xlsx compliance report</div>
+                    </div>
+                    <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#475569', padding: '0.25rem' }}
+                        onMouseEnter={e => e.currentTarget.style.color = '#E2E8F0'}
+                        onMouseLeave={e => e.currentTarget.style.color = '#475569'}>
+                        <X style={{ width: '20px', height: '20px' }} />
+                    </button>
+                </div>
+
+                {/* IDLE — drop zone */}
+                {phase === 'idle' && (
+                    <>
+                        <div
+                            onClick={() => fileInputRef.current?.click()}
+                            onDragOver={e => { e.preventDefault(); setDragOver(true); }}
+                            onDragLeave={() => setDragOver(false)}
+                            onDrop={e => { e.preventDefault(); setDragOver(false); handleFile(e.dataTransfer.files[0]); }}
+                            style={{
+                                border: `2px dashed ${dragOver ? TEAL : 'rgba(20,184,166,0.3)'}`,
+                                borderRadius: '0.5rem',
+                                padding: '2.5rem',
+                                textAlign: 'center',
+                                cursor: 'pointer',
+                                background: dragOver ? `${TEAL}08` : 'transparent',
+                                transition: 'all 0.2s',
+                            }}>
+                            <FileSpreadsheet style={{ width: '40px', height: '40px', color: TEAL, margin: '0 auto 1rem', opacity: 0.8 }} />
+                            <div style={{ color: '#CBD5E1', fontSize: '0.875rem', marginBottom: '0.5rem' }}>
+                                Drop your xlsx file here or <span style={{ color: TEAL }}>browse</span>
+                            </div>
+                            <div style={{ color: '#475569', fontSize: '0.75rem' }}>NTS_AEO_YYYY_MM_DD.xlsx</div>
+                        </div>
+                        <input ref={fileInputRef} type="file" accept=".xlsx" style={{ display: 'none' }}
+                            onChange={e => handleFile(e.target.files[0])} />
+                        {error && (
+                            <div style={{ marginTop: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem', color: '#F87171', fontSize: '0.8rem' }}>
+                                <AlertCircle style={{ width: '16px', height: '16px', flexShrink: 0 }} />{error}
+                            </div>
+                        )}
+                    </>
+                )}
+
+                {/* UPLOADING / COMMITTING — spinner */}
+                {(phase === 'uploading' || phase === 'committing') && (
+                    <div style={{ textAlign: 'center', padding: '2rem 0' }}>
+                        <Loader style={{ width: '40px', height: '40px', color: TEAL, margin: '0 auto 1rem', animation: 'spin 1s linear infinite' }} />
+                        <div style={{ color: '#CBD5E1', fontFamily: 'monospace', fontSize: '0.875rem' }}>
+                            {phase === 'uploading' ? 'Parsing report…' : 'Committing upload…'}
+                        </div>
+                    </div>
+                )}
+
+                {/* PREVIEW — diff summary + confirm */}
+                {phase === 'preview' && previewData && (
+                    <>
+                        <div style={{ marginBottom: '1.5rem' }}>
+                            <div style={{ fontSize: '0.8rem', color: '#64748B', fontFamily: 'monospace', marginBottom: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                                {previewData.filename}
+                                {previewData.report_date && <span style={{ color: TEAL, marginLeft: '0.75rem' }}>{previewData.report_date}</span>}
+                            </div>
+
+                            {[
+                                { label: 'Recurring items',  count: previewData.diff.recurring_count, color: '#94A3B8', icon: '↺' },
+                                { label: 'New items',        count: previewData.diff.new_count,       color: '#EF4444', icon: '+' },
+                                { label: 'Resolved',         count: previewData.diff.resolved_count,  color: '#10B981', icon: '✓' },
+                            ].map(({ label, count, color, icon }) => (
+                                <div key={label} style={{
+                                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                                    padding: '0.75rem 1rem', marginBottom: '0.5rem',
+                                    background: 'rgba(15,23,42,0.6)', borderRadius: '0.375rem',
+                                    border: `1px solid ${color}25`,
+                                }}>
+                                    <span style={{ color: '#CBD5E1', fontSize: '0.875rem' }}>
+                                        <span style={{ color, marginRight: '0.5rem', fontWeight: '700' }}>{icon}</span>
+                                        {label}
+                                    </span>
+                                    <span style={{ color, fontFamily: 'monospace', fontWeight: '700', fontSize: '1.1rem' }}>{count}</span>
+                                </div>
+                            ))}
+                        </div>
+
+                        <div style={{ display: 'flex', gap: '0.75rem' }}>
+                            <button onClick={() => { setPhase('idle'); setPreviewData(null); }}
+                                style={{ flex: 1, padding: '0.625rem', background: 'transparent', border: '1px solid rgba(100,116,139,0.4)', borderRadius: '0.375rem', color: '#64748B', cursor: 'pointer', fontFamily: 'monospace', fontSize: '0.8rem' }}
+                                onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(100,116,139,0.8)'}
+                                onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(100,116,139,0.4)'}>
+                                Cancel
+                            </button>
+                            <button onClick={handleCommit}
+                                style={{ flex: 2, padding: '0.625rem', background: `${TEAL}18`, border: `1px solid ${TEAL}`, borderRadius: '0.375rem', color: TEAL, cursor: 'pointer', fontFamily: 'monospace', fontSize: '0.8rem', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em' }}
+                                onMouseEnter={e => e.currentTarget.style.background = `${TEAL}28`}
+                                onMouseLeave={e => e.currentTarget.style.background = `${TEAL}18`}>
+                                Confirm Upload
+                            </button>
+                        </div>
+                    </>
+                )}
+
+                {/* DONE */}
+                {phase === 'done' && (
+                    <div style={{ textAlign: 'center', padding: '1.5rem 0' }}>
+                        <CheckCircle style={{ width: '44px', height: '44px', color: '#10B981', margin: '0 auto 1rem' }} />
+                        <div style={{ color: '#10B981', fontFamily: 'monospace', fontSize: '0.875rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                            Upload committed
+                        </div>
+                    </div>
+                )}
+
+                {/* ERROR */}
+                {phase === 'error' && (
+                    <div style={{ textAlign: 'center', padding: '1rem 0' }}>
+                        <AlertCircle style={{ width: '36px', height: '36px', color: '#EF4444', margin: '0 auto 0.75rem' }} />
+                        <div style={{ color: '#F87171', fontSize: '0.875rem', marginBottom: '1.25rem' }}>{error}</div>
+                        <button onClick={() => { setPhase('idle'); setError(null); }}
+                            style={{ padding: '0.5rem 1.25rem', background: 'rgba(239,68,68,0.1)', border: '1px solid #EF4444', borderRadius: '0.375rem', color: '#F87171', cursor: 'pointer', fontFamily: 'monospace', fontSize: '0.8rem' }}>
+                            Try Again
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}