From b808d0e38e6685f05f043eb66b63545d2108e9c1 Mon Sep 17 00:00:00 2001
From: Jordan Ramos <jordan.ramos@spectrum.com>
Date: Thu, 14 May 2026 15:30:43 -0600
Subject: [PATCH] Color metric card percentage green/yellow/red based on
 target, keep NC count always red

---
 frontend/src/components/pages/CCPMetricsPage.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/pages/CCPMetricsPage.js b/frontend/src/components/pages/CCPMetricsPage.js
index f0de15f..2c43374 100644
--- a/frontend/src/components/pages/CCPMetricsPage.js
+++ b/frontend/src/components/pages/CCPMetricsPage.js
@@ -132,22 +132,22 @@ function MetricBreakdownPanel({ metrics }) {
                 {displayMetrics.map(m => {
                     const pct = m.total > 0 ? (m.compliant / m.total) : 0;
                     const target = Number(m.target || 0);
-                    const color = pct >= target ? '#10B981' : pct >= target * 0.85 ? '#F59E0B' : '#EF4444';
+                    const pctColor = pct >= target ? '#10B981' : pct >= target * 0.85 ? '#F59E0B' : '#EF4444';
                     return (
                         <div
                             key={m.metric_id}
                             style={{
                                 background: 'rgba(15, 23, 42, 0.7)',
-                                border: `1px solid ${color}30`,
+                                border: `1px solid ${pctColor}30`,
                                 borderRadius: '0.4rem',
                                 padding: '0.6rem 0.75rem',
                             }}
                         >
                             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.3rem' }}>
                                 <span style={{ fontFamily: 'monospace', fontSize: '0.8rem', fontWeight: '700', color: '#E2E8F0' }}>{m.metric_id}</span>
-                                <span style={{ fontSize: '0.55rem', color: '#475569', fontFamily: 'monospace' }}>{(pct * 100).toFixed(0)}%</span>
+                                <span style={{ fontSize: '0.55rem', fontFamily: 'monospace', color: pctColor }}>{(pct * 100).toFixed(0)}%</span>
                             </div>
-                            <div style={{ fontSize: '1rem', fontWeight: '700', color }}>{m.non_compliant.toLocaleString()}</div>
+                            <div style={{ fontSize: '1rem', fontWeight: '700', color: '#EF4444' }}>{m.non_compliant.toLocaleString()}</div>
                         </div>
                     );
                 })}