feat(reporting): add Open vs Closed donut chart to Metrics panel

Backend: adds ivanti_counts_cache table, fetches Closed count (page 0,
size 1) from Ivanti after each Open sync, and exposes GET /counts endpoint.

Frontend: replaces the Metrics placeholder with an SVG donut chart showing
Open vs Closed proportions with counts and percentages. Counts are fetched
on mount and refreshed after manual sync.

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

backend/routes/ivantiFindings.js

@@ -9,6 +9,7 @@ const IVANTI_URL_BASE = 'https://platform4.risksense.com/api/v1';
 const SYNC_INTERVAL_MS = 24 * 60 * 60 * 1000;
 
 const FINDINGS_FILTERS = [
+    // NOTE: This filters for Open findings only — Closed count is fetched separately via syncClosedCount()
     {
         field: 'assetCustomAttributes.1550_host_1.value',
         exclusive: false,
@@ -38,6 +39,37 @@ const FINDINGS_FILTERS = [
     }
 ];
 
+// Same BU + severity filters but for Closed state — used only to fetch the total count
+const CLOSED_COUNT_FILTERS = [
+    {
+        field: 'assetCustomAttributes.1550_host_1.value',
+        exclusive: false,
+        operator: 'IN',
+        orWithPrevious: false,
+        implicitFilters: [],
+        value: 'NTS-AEO-ACCESS-ENG,NTS-AEO-STEAM',
+        caseSensitive: false
+    },
+    {
+        field: 'severity',
+        exclusive: false,
+        operator: 'RANGE',
+        orWithPrevious: false,
+        implicitFilters: [],
+        value: '8.5,9.9',
+        caseSensitive: false
+    },
+    {
+        field: 'generic_state',
+        exclusive: false,
+        operator: 'EXACT',
+        orWithPrevious: false,
+        implicitFilters: [],
+        value: 'Closed',
+        caseSensitive: false
+    }
+];
+
 // ---------------------------------------------------------------------------
 // HTTP helper — mirrors the one in ivantiWorkflows.js
 // ---------------------------------------------------------------------------
@@ -105,6 +137,20 @@ function initTables(db) {
                 )
             `, (err) => { if (err) return reject(err); });
 
+            db.run(`
+                CREATE TABLE IF NOT EXISTS ivanti_counts_cache (
+                    id INTEGER PRIMARY KEY CHECK (id = 1),
+                    open_count INTEGER DEFAULT 0,
+                    closed_count INTEGER DEFAULT 0,
+                    synced_at DATETIME
+                )
+            `, (err) => { if (err) return reject(err); });
+
+            db.run(`
+                INSERT OR IGNORE INTO ivanti_counts_cache (id, open_count, closed_count)
+                VALUES (1, 0, 0)
+            `, (err) => { if (err) return reject(err); });
+
             db.run(`
                 CREATE INDEX IF NOT EXISTS idx_finding_notes_finding_id
                 ON ivanti_finding_notes(finding_id)
@@ -120,6 +166,47 @@ function initTables(db) {
 // Extract only the fields we need from a raw finding object
 // ---------------------------------------------------------------------------
 function extractFinding(f) {
+    // statusEmbedded.dueDate = "2026-03-06T00:00:00" — strip to date part
+    const rawDueDate = f.statusEmbedded?.dueDate || '';
+    const dueDate = rawDueDate ? rawDueDate.split('T')[0] : '';
+
+    // BU ownership: assetCustomAttributes['1550_host_1'] is an array like ["NTS-AEO-STEAM"]
+    const buOwnership = f.assetCustomAttributes?.['1550_host_1']?.[0] || '';
+
+    // CVE list: vulnerabilities.vulnInfoList[].cve
+    const cves = (f.vulnerabilities?.vulnInfoList || []).map(v => v.cve).filter(Boolean);
+
+    // Workflow: only capture FP# (False Positive) tickets — SYS# are auto-generated
+    // system workflows and not actionable for our purposes.
+    const wfDist = f.workflowDistribution || {};
+    const fpBuckets = [
+        ...(wfDist.actionableWorkflows || []),
+        ...(wfDist.requestedWorkflows  || []),
+        ...(wfDist.reworkedWorkflows   || []),
+        ...(wfDist.rejectedWorkflows   || []),
+        ...(wfDist.expiredWorkflows    || []),
+        ...(wfDist.approvedWorkflows   || []),
+    ].filter(w => (w.generatedId || '').startsWith('FP#'));
+
+    // Priority: actionable > requested > reworked > rejected > expired > approved
+    const fpEntry = fpBuckets[0] || null;
+
+    // Fallback: if no FP# in distribution, check workflowGeneratedNames directly
+    const generatedNames = f.workflowGeneratedNames || [];
+    const fpFromNames = !fpEntry
+        ? generatedNames.find(n => n.startsWith('FP#')) || null
+        : null;
+
+    const workflow = fpEntry ? {
+        id:    fpEntry.generatedId || '',
+        state: fpEntry.state || '',
+        type:  'FP',
+    } : fpFromNames ? {
+        id:    fpFromNames,
+        state: '',
+        type:  'FP',
+    } : null;
+
     return {
         id: String(f.id),
         title: f.title || '',
@@ -130,14 +217,50 @@ function extractFinding(f) {
         dns: f.dns || f.host?.fqdn || '',
         status: f.status || '',
         slaStatus: f.slaStatus || '',
-        discoveredOn: f.discoveredOn || '',
+        dueDate,
         lastFoundOn: f.lastFoundOn || '',
-        source: f.scannerPrettyName || f.scannerName || f.source || '',
-        pluginFamily: f.pluginFamily || '',
-        findingType: f.findingType || ''
+        buOwnership,
+        cves,
+        workflow
     };
 }
 
+// ---------------------------------------------------------------------------
+// Fetch total count of Closed findings from Ivanti (page 0, size 1)
+// ---------------------------------------------------------------------------
+async function syncClosedCount(db, openCount, apiKey, clientId, skipTls) {
+    const urlPath = `/client/${encodeURIComponent(clientId)}/hostFinding/search`;
+    try {
+        const body = {
+            filters: CLOSED_COUNT_FILTERS,
+            projection: 'internal',
+            sort: [{ field: 'severity', direction: 'ASC' }],
+            page: 0,
+            size: 1
+        };
+
+        const result = await ivantiPost(urlPath, body, apiKey, skipTls);
+        if (result.status !== 200) throw new Error(`Closed count API returned status ${result.status}`);
+
+        const data = JSON.parse(result.body);
+        // RiskSense returns total in page.totalElements or page.total
+        const closedCount = data.page?.totalElements ?? data.page?.total ?? 0;
+
+        await dbRun(db,
+            `UPDATE ivanti_counts_cache SET open_count=?, closed_count=?, synced_at=datetime('now') WHERE id=1`,
+            [openCount, closedCount]
+        );
+        console.log(`[Ivanti Findings] Counts updated — open: ${openCount}, closed: ${closedCount}`);
+    } catch (err) {
+        console.error('[Ivanti Findings] Failed to fetch closed count:', err.message);
+        // Still update open count so it stays in sync; leave closed_count as-is
+        await dbRun(db,
+            `UPDATE ivanti_counts_cache SET open_count=?, synced_at=datetime('now') WHERE id=1`,
+            [openCount]
+        ).catch(() => {});
+    }
+}
+
 // ---------------------------------------------------------------------------
 // Core sync — fetches ALL pages, stores slimmed findings in SQLite
 // ---------------------------------------------------------------------------
@@ -192,6 +315,7 @@ async function syncFindings(db) {
         );
 
         console.log(`[Ivanti Findings] Sync complete — ${allFindings.length} findings`);
+        await syncClosedCount(db, allFindings.length, apiKey, clientId, skipTls);
     } catch (err) {
         const msg = err.message || 'Unknown error';
         console.error('[Ivanti Findings] Sync failed:', msg);
@@ -255,6 +379,22 @@ function readNotes(db) {
     });
 }
 
+function readCounts(db) {
+    return new Promise((resolve, reject) => {
+        db.get(
+            'SELECT open_count, closed_count, synced_at FROM ivanti_counts_cache WHERE id = 1',
+            (err, row) => {
+                if (err) return reject(err);
+                resolve({
+                    open:      row?.open_count   ?? 0,
+                    closed:    row?.closed_count  ?? 0,
+                    synced_at: row?.synced_at     ?? null,
+                });
+            }
+        );
+    });
+}
+
 async function readStateWithNotes(db) {
     const [state, notes] = await Promise.all([readState(db), readNotes(db)]);
     state.findings = state.findings.map((f) => ({ ...f, note: notes[f.id] || '' }));
@@ -292,6 +432,15 @@ function createIvantiFindingsRouter(db, requireAuth) {
         }
     });
 
+    // GET /counts — open vs closed totals for pie chart
+    router.get('/counts', async (req, res) => {
+        try {
+            res.json(await readCounts(db));
+        } catch {
+            res.status(500).json({ error: 'Database error reading counts' });
+        }
+    });
+
     // PUT /:findingId/note — save or update a note (max 255 chars enforced here)
     router.put('/:findingId/note', (req, res) => {
         const { findingId } = req.params;

docs/MOP-workflow-color-codes.md

@@ -0,0 +1,120 @@
+# MOP: Ivanti Finding Workflow Status — STEAM Security Dashboard
+
+**Document Type:** Method of Procedure
+**Applies To:** STEAM Security Dashboard — Reporting Page
+**Audience:** NTS-AEO-ACCESS-ENG / NTS-AEO-STEAM team members
+
+---
+
+## 1. Purpose
+
+This document explains how to interpret the **Workflow** column on the Reporting page and what action to take for each status. The goal is to ensure every open finding is actively managed and no False Positive (FP) exception lapses unnoticed.
+
+---
+
+## 2. Background
+
+### What the Reporting Page Shows
+The Reporting page displays **open findings only** (severity 8.5+, `generic_state = Open`). A finding disappears from this list when it is closed — which happens when a valid, approved FP exception is on file or when the vulnerability is remediated.
+
+### What the Workflow Column Shows
+The Workflow column tracks **FP# tickets only** — False Positive requests that a team member has manually submitted in Ivanti. These represent cases where the team has asserted a finding is not exploitable or applicable in our environment.
+
+> **SYS# workflows are not shown.** SYS# are auto-generated system tracking records and do not require team action.
+
+### Key Rule
+If a finding appears in the Reporting page, it requires action — regardless of whether it has an FP# badge or not.
+
+---
+
+## 3. Workflow Column Color Codes
+
+### 🔴 Red — Act Immediately
+
+| State | What It Means | Required Action |
+|---|---|---|
+| **Expired** | An FP# ticket existed but the exception window has lapsed. The finding 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 request and denied it. The finding is considered a real, 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 | What It Means | Required Action |
+|---|---|---|
+| **Reworked** | The FP request was challenged by the reviewer and sent back for revision. | Review the reviewer's comments in Ivanti. Update the FP justification and **resubmit the ticket**. |
+| **Actionable** | The FP ticket has been flagged as needing team action. | Open the ticket in Ivanti to review what is needed and respond accordingly. |
+
+---
+
+### 🔵 Blue — In Flight, Monitor
+
+| State | What It Means | Required Action |
+|---|---|---|
+| **Requested** | An FP# ticket has been submitted and is awaiting security team approval. | No immediate action. Monitor for approval or rejection. If no response within your SLA window, follow up with the approver. |
+
+---
+
+### — (No Badge) — Untriaged
+
+| State | What It Means | Required Action |
+|---|---|---|
+| **No workflow badge** | No FP ticket has ever been submitted for this finding. | Triage the finding. Determine whether to: (1) remediate it, or (2) submit a new FP request if you have justification that it is a false positive. |
+
+---
+
+## 4. Decision Flowchart
+
+```
+Finding appears in Reporting page
+│
+├── Does it have a Workflow badge?
+│   │
+│   ├── NO (—)
+│   │   └── Triage → Remediate OR submit new FP request
+│   │
+│   └── YES → Check the color:
+│       │
+│       ├── 🔵 BLUE (Requested)
+│       │   └── Wait for approval. Follow up if SLA window is approaching.
+│       │
+│       ├── 🟡 AMBER (Reworked / Actionable)
+│       │   └── Open Ivanti ticket → Review feedback → Update → Resubmit
+│       │
+│       └── 🔴 RED
+│           │
+│           ├── Expired → Submit NEW FP request in Ivanti
+│           │
+│           └── Rejected → Remediate the vulnerability
+```
+
+---
+
+## 5. How to Submit or Renew an FP Request in Ivanti
+
+1. Log into [Ivanti / RiskSense](https://platform4.risksense.com)
+2. Navigate to **Host Findings**
+3. Search for the Finding ID shown in the dashboard (Finding ID column)
+4. Select the finding → **Actions** → **Request False Positive**
+5. Complete the justification form:
+   - Describe why the finding is not exploitable in this environment
+   - Reference any compensating controls, network segmentation, or vendor guidance
+   - Attach supporting evidence if available
+6. Submit — ticket will appear as **Requested** (blue) in the dashboard once processed
+
+---
+
+## 6. Quick Reference Card
+
+| Badge Color | 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 |
+| 🔵 Blue | Requested | Monitor — no action yet |
+| — | No badge | Triage: remediate or submit FP |
+
+---
+
+*Last updated: 2026-03-11*

frontend/package.json

@@ -12,7 +12,8 @@
     "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "xlsx": "^0.18.5"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/App.js

@@ -9,6 +9,7 @@ import NvdSyncModal from './components/NvdSyncModal';
 import KnowledgeBaseModal from './components/KnowledgeBaseModal';
 import KnowledgeBaseViewer from './components/KnowledgeBaseViewer';
 import NavDrawer from './components/NavDrawer';
+import CalendarWidget from './components/CalendarWidget';
 import ReportingPage from './components/pages/ReportingPage';
 import KnowledgeBasePage from './components/pages/KnowledgeBasePage';
 import ExportsPage from './components/pages/ExportsPage';
@@ -177,6 +178,7 @@ export default function App() {
   const [quickCheckResult, setQuickCheckResult] = useState(null);
   const [currentPage, setCurrentPage] = useState('home');
   const [navOpen, setNavOpen] = useState(false);
+  const [calendarFilter, setCalendarFilter] = useState(null);
   const [showAddCVE, setShowAddCVE] = useState(false);
   const [showUserManagement, setShowUserManagement] = useState(false);
   const [showAuditLog, setShowAuditLog] = useState(false);
@@ -960,12 +962,16 @@ export default function App() {
         isOpen={navOpen}
         onClose={() => setNavOpen(false)}
         currentPage={currentPage}
-        onNavigate={setCurrentPage}
+        onNavigate={(page) => {
+          // Clear calendar filter when navigating directly via the nav drawer
+          if (page === 'reporting') setCalendarFilter(null);
+          setCurrentPage(page);
+        }}
       />
       {/* Scanning line effect */}
       <div className="scan-line"></div>
 
-      <div className="max-w-7xl mx-auto relative z-10">
+      <div className={`${currentPage === 'reporting' ? 'w-full' : 'max-w-7xl mx-auto'} relative z-10`}>
         {/* Header */}
         <div className="mb-8">
           <div className="flex justify-between items-start mb-6">
@@ -1035,7 +1041,7 @@ export default function App() {
         </div>
 
         {/* Page content */}
-        {currentPage === 'reporting'      && <ReportingPage />}
+        {currentPage === 'reporting'      && <ReportingPage filterDate={calendarFilter} />}
         {currentPage === 'knowledge-base' && <KnowledgeBasePage />}
         {currentPage === 'exports'        && <ExportsPage />}
 
@@ -2219,63 +2225,12 @@ export default function App() {
                 Calendar
               </h2>
 
-              {/* Simple Calendar Grid */}
-              <div className="mb-2">
-                <div className="text-center mb-3">
-                  <span className="text-white font-semibold font-mono">February 2024</span>
-                </div>
-                <div className="grid grid-cols-7 gap-1 text-center text-xs mb-2">
-                  <div className="text-gray-400 font-mono">Su</div>
-                  <div className="text-gray-400 font-mono">Mo</div>
-                  <div className="text-gray-400 font-mono">Tu</div>
-                  <div className="text-gray-400 font-mono">We</div>
-                  <div className="text-gray-400 font-mono">Th</div>
-                  <div className="text-gray-400 font-mono">Fr</div>
-                  <div className="text-gray-400 font-mono">Sa</div>
-                </div>
-                <div className="grid grid-cols-7 gap-1 text-center">
-                  {/* Week 1 */}
-                  <div className="text-gray-600 font-mono text-xs p-1">28</div>
-                  <div className="text-gray-600 font-mono text-xs p-1">29</div>
-                  <div className="text-gray-600 font-mono text-xs p-1">30</div>
-                  <div className="text-gray-600 font-mono text-xs p-1">31</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">1</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">2</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">3</div>
-                  {/* Week 2 */}
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">4</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">5</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">6</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">7</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">8</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">9</div>
-                  <div className="bg-intel-accent/30 text-white font-mono text-xs p-1 rounded font-bold border border-intel-accent">10</div>
-                  {/* Week 3 */}
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">11</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">12</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">13</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">14</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">15</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">16</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">17</div>
-                  {/* Week 4 */}
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">18</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">19</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">20</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">21</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">22</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">23</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">24</div>
-                  {/* Week 5 */}
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">25</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">26</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">27</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">28</div>
-                  <div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">29</div>
-                  <div className="text-gray-600 font-mono text-xs p-1">1</div>
-                  <div className="text-gray-600 font-mono text-xs p-1">2</div>
-                </div>
-              </div>
+              <CalendarWidget
+                onDateClick={(dateStr) => {
+                  setCalendarFilter(dateStr);
+                  setCurrentPage('reporting');
+                }}
+              />
             </div>
 
             {/* Open Vendor Tickets */}

frontend/src/components/CalendarWidget.js

@@ -0,0 +1,167 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
+
+const MONTH_NAMES = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+];
+const DAY_NAMES = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+function toLocalDateStr(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+}
+
+export default function CalendarWidget({ onDateClick }) {
+    const today    = new Date();
+    const todayStr = toLocalDateStr(today);
+
+    const [calYear,  setCalYear]  = useState(today.getFullYear());
+    const [calMonth, setCalMonth] = useState(today.getMonth()); // 0-indexed
+
+    // Map of "YYYY-MM-DD" → count of findings due that day
+    const [dueDates, setDueDates] = useState({});
+
+    useEffect(() => {
+        fetch(`${API_BASE}/ivanti/findings`, { credentials: 'include' })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((data) => {
+                if (!data?.findings) return;
+                const counts = {};
+                data.findings.forEach((f) => {
+                    if (f.dueDate) {
+                        counts[f.dueDate] = (counts[f.dueDate] || 0) + 1;
+                    }
+                });
+                setDueDates(counts);
+            })
+            .catch(() => {});
+    }, []);
+
+    const prevMonth = () => {
+        if (calMonth === 0) { setCalMonth(11); setCalYear((y) => y - 1); }
+        else { setCalMonth((m) => m - 1); }
+    };
+
+    const nextMonth = () => {
+        if (calMonth === 11) { setCalMonth(0); setCalYear((y) => y + 1); }
+        else { setCalMonth((m) => m + 1); }
+    };
+
+    // Build cell array: null = padding, number = day of month
+    const firstDow    = new Date(calYear, calMonth, 1).getDay(); // 0=Sun
+    const daysInMonth = new Date(calYear, calMonth + 1, 0).getDate();
+    const cells = [
+        ...Array(firstDow).fill(null),
+        ...Array.from({ length: daysInMonth }, (_, i) => i + 1),
+    ];
+    while (cells.length % 7 !== 0) cells.push(null); // complete last row
+
+    const hasDueDatesThisMonth = cells.some((day) => {
+        if (!day) return false;
+        const ds = `${calYear}-${String(calMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        return !!dueDates[ds];
+    });
+
+    return (
+        <div>
+            {/* Month navigation */}
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.75rem' }}>
+                <button
+                    onClick={prevMonth}
+                    style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#64748B', padding: '2px 4px', borderRadius: '4px', lineHeight: 1, transition: 'color 0.15s' }}
+                    onMouseEnter={(e) => { e.currentTarget.style.color = '#0EA5E9'; }}
+                    onMouseLeave={(e) => { e.currentTarget.style.color = '#64748B'; }}
+                >
+                    <ChevronLeft style={{ width: '14px', height: '14px' }} />
+                </button>
+
+                <span style={{ color: '#E2E8F0', fontFamily: 'monospace', fontWeight: '600', fontSize: '0.85rem' }}>
+                    {MONTH_NAMES[calMonth]} {calYear}
+                </span>
+
+                <button
+                    onClick={nextMonth}
+                    style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#64748B', padding: '2px 4px', borderRadius: '4px', lineHeight: 1, transition: 'color 0.15s' }}
+                    onMouseEnter={(e) => { e.currentTarget.style.color = '#0EA5E9'; }}
+                    onMouseLeave={(e) => { e.currentTarget.style.color = '#64748B'; }}
+                >
+                    <ChevronRight style={{ width: '14px', height: '14px' }} />
+                </button>
+            </div>
+
+            {/* Day-of-week headers */}
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '2px', textAlign: 'center', marginBottom: '4px' }}>
+                {DAY_NAMES.map((d) => (
+                    <div key={d} style={{ fontSize: '0.6rem', color: '#475569', fontFamily: 'monospace', fontWeight: '600', textTransform: 'uppercase' }}>
+                        {d}
+                    </div>
+                ))}
+            </div>
+
+            {/* Day cells */}
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '2px' }}>
+                {cells.map((day, idx) => {
+                    if (!day) return <div key={idx} />;
+
+                    const dateStr  = `${calYear}-${String(calMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+                    const isToday  = dateStr === todayStr;
+                    const dueCount = dueDates[dateStr] || 0;
+                    const hasDue   = dueCount > 0;
+
+                    return (
+                        <div
+                            key={idx}
+                            title={hasDue ? `${dueCount} finding${dueCount > 1 ? 's' : ''} due — click to view` : undefined}
+                            onClick={hasDue && onDateClick ? () => onDateClick(dateStr) : undefined}
+                            style={{
+                                display: 'flex', flexDirection: 'column', alignItems: 'center',
+                                gap: '2px', padding: '3px 1px',
+                                borderRadius: '4px',
+                                background: isToday ? 'rgba(14,165,233,0.2)' : 'transparent',
+                                border: isToday ? '1px solid rgba(14,165,233,0.5)' : '1px solid transparent',
+                                cursor: hasDue ? 'pointer' : 'default',
+                                transition: hasDue ? 'background 0.15s' : undefined,
+                            }}
+                            onMouseEnter={hasDue ? (e) => { e.currentTarget.style.background = isToday ? 'rgba(14,165,233,0.35)' : 'rgba(239,68,68,0.15)'; } : undefined}
+                            onMouseLeave={hasDue ? (e) => { e.currentTarget.style.background = isToday ? 'rgba(14,165,233,0.2)' : 'transparent'; } : undefined}
+                        >
+                            <span style={{
+                                fontSize: '0.7rem', fontFamily: 'monospace', lineHeight: 1,
+                                color: isToday ? '#0EA5E9' : hasDue ? '#EF4444' : '#CBD5E1',
+                                fontWeight: (isToday || hasDue) ? '700' : '400',
+                            }}>
+                                {day}
+                            </span>
+                            {/* Red dot indicator for due dates */}
+                            {hasDue ? (
+                                <div style={{
+                                    width: '4px', height: '4px', borderRadius: '50%',
+                                    background: '#EF4444',
+                                    boxShadow: '0 0 4px rgba(239,68,68,0.6)',
+                                    flexShrink: 0,
+                                }} />
+                            ) : (
+                                <div style={{ width: '4px', height: '4px' }} /> // spacer to keep rows even
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+
+            {/* Legend — only shown when there are due dates this month */}
+            {hasDueDatesThisMonth && (
+                <div style={{ marginTop: '0.75rem', paddingTop: '0.625rem', borderTop: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+                    <div style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#EF4444', boxShadow: '0 0 4px rgba(239,68,68,0.5)', flexShrink: 0 }} />
+                    <span style={{ fontSize: '0.62rem', color: '#64748B', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                        Ivanti finding due
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+}