From 1903e410886765478db510ddd4a237750ebeb6da Mon Sep 17 00:00:00 2001
From: Jordan Ramos <jordan.ramos@spectrum.com>
Date: Wed, 27 May 2026 16:25:31 -0600
Subject: [PATCH] Add LIVE and LAST REPORT badges to VCL compliance page

The burndown chart uses live compliance_items data (updates as
remediation plans and resolution dates are entered), while the
metrics overview table shows the snapshot from the last uploaded
report. Add visual badges to clarify this distinction:
- Burndown chart: green 'LIVE' badge
- Metrics overview: grey 'LAST REPORT' badge
---
 .../src/components/pages/CCPMetricsPage.js     | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/pages/CCPMetricsPage.js b/frontend/src/components/pages/CCPMetricsPage.js
index 2722705..ae2705e 100644
--- a/frontend/src/components/pages/CCPMetricsPage.js
+++ b/frontend/src/components/pages/CCPMetricsPage.js
@@ -392,8 +392,13 @@ function MetricTable({ metrics, onSelectMetric }) {
 
     return (
         <div style={{ ...CARD_STYLE, marginTop: '1.5rem' }}>
-            <div style={{ fontSize: '0.7rem', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '1rem' }}>
-                Metrics Overview
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem' }}>
+                <span style={{ fontSize: '0.7rem', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                    Metrics Overview
+                </span>
+                <span style={{ fontSize: '0.6rem', color: '#64748B', background: 'rgba(100, 116, 139, 0.1)', padding: '0.15rem 0.4rem', borderRadius: '3px', fontWeight: '600' }}>
+                    LAST REPORT
+                </span>
             </div>
             <div style={{ overflowX: 'auto' }}>
                 <table style={TABLE_STYLE}>
@@ -1422,8 +1427,13 @@ function ForecastBurndownChart({ metricId }) {
 
     return (
         <div style={{ ...CARD_STYLE }}>
-            <div style={{ fontSize: '0.7rem', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '1rem' }}>
-                Forecast Burndown — {metricId}
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem' }}>
+                <span style={{ fontSize: '0.7rem', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                    Forecast Burndown — {metricId}
+                </span>
+                <span style={{ fontSize: '0.6rem', color: '#10B981', background: 'rgba(16, 185, 129, 0.1)', padding: '0.15rem 0.4rem', borderRadius: '3px', fontWeight: '600' }}>
+                    LIVE
+                </span>
             </div>
             <ResponsiveContainer width="100%" height={350}>
                 <ComposedChart data={combinedData} margin={{ top: 35, right: 40, left: 10, bottom: 5 }}>