From dd6fc394eac572bd51f024258489841bd2a271ff Mon Sep 17 00:00:00 2001
From: Jordan Ramos <jordan.ramos@spectrum.com>
Date: Tue, 26 May 2026 11:48:53 -0600
Subject: [PATCH] Show compliant/total counts on metric summary cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Display raw counts alongside percentages in the compliance metric health
cards, e.g. '67% (4/6)' instead of just '67%'. Data was already available
in the summary JSON (compliant, total fields) — just not rendered.

Closes #16
---
 frontend/src/components/pages/CompliancePage.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/components/pages/CompliancePage.js b/frontend/src/components/pages/CompliancePage.js
index c9bb8da..2322da7 100644
--- a/frontend/src/components/pages/CompliancePage.js
+++ b/frontend/src/components/pages/CompliancePage.js
@@ -93,6 +93,7 @@ function groupByMetricFamily(allEntries, team) {
 function VariantPill({ entry, label }) {
     const color = statusColor(entry.status);
     const isOk = entry.status === 'Meets/Exceeds Target';
+    const hasRawCounts = entry.compliant != null && entry.total != null && entry.total > 0;
     return (
         <span style={{
             display: 'inline-flex',
@@ -116,6 +117,9 @@ function VariantPill({ entry, label }) {
             )}
             {label && <span style={{ color: '#94A3B8' }}>{label}</span>}
             <span style={{ color, fontWeight: '600' }}>{pctDisplay(entry.compliance_pct)}</span>
+            {hasRawCounts && (
+                <span style={{ color: '#64748B', fontSize: '0.58rem' }}>({entry.compliant}/{entry.total})</span>
+            )}
         </span>
     );
 }