diff --git a/frontend/src/components/pages/CCPMetricsPage.js b/frontend/src/components/pages/CCPMetricsPage.js
index e2ca56f..3c73b24 100644
--- a/frontend/src/components/pages/CCPMetricsPage.js
+++ b/frontend/src/components/pages/CCPMetricsPage.js
@@ -160,12 +160,19 @@ function MetricBreakdownPanel({ metrics }) {
 // Donut Chart
 // ---------------------------------------------------------------------------
 function DonutChart({ donut }) {
-    if (!donut) return null;
+    if (!donut || !donut.blocked || !donut.in_progress) return null;
+    const total = donut.blocked.count + donut.in_progress.count;
+    if (total === 0) {
+        return (
+            <div style={{ ...CARD_STYLE, flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#10B981', fontSize: '0.8rem' }}>
+                No non-compliant devices
+            </div>
+        );
+    }
     const data = [
         { name: 'Blocked', count: donut.blocked.count, color: '#EF4444' },
         { name: 'In-Progress', count: donut.in_progress.count, color: '#F59E0B' },
     ];
-    const total = donut.blocked.count + donut.in_progress.count;
 
     return (
         <div style={{ ...CARD_STYLE, flex: 1 }}>
@@ -410,7 +417,7 @@ function VerticalDetailView({ vertical, onBack, onSelectMetric }) {
     const [loading, setLoading] = useState(true);
     const [expandedMetrics, setExpandedMetrics] = useState(new Set());
     const [teamFilter, setTeamFilter] = useState(''); // '' = all teams (rollup view)
-    // ⚠️ CONVENTION: Missing error state — .catch() silently swallows errors without displaying them to the user. Add an error state and render an error message (see main CCPMetricsPage pattern).
+    // ⚠️ CONVENTION: Missing error state — .catch() silently swallows fetch errors without displaying them to the user. Add an error state and render an error message (see main CCPMetricsPage pattern).
 
     useEffect(() => {
         setLoading(true);
@@ -774,7 +781,7 @@ function MetricSubTeamView({ vertical, metricId, metricData, onBack, onSelectTea
 function MetricDeviceList({ vertical, metricId, team, onBack }) {
     const [devices, setDevices] = useState(null);
     const [loading, setLoading] = useState(true);
-    // ⚠️ CONVENTION: Missing error state — .catch() below silently swallows errors without displaying them to the user. Add an error state and render an error message.
+    // ⚠️ CONVENTION: Missing error state — .catch() below silently swallows fetch errors without displaying them to the user. Add an error state and render an error message.
 
     useEffect(() => {
         setLoading(true);