);
}
// ---------------------------------------------------------------------------
// Vertical Detail View (metric drill-down)
// ---------------------------------------------------------------------------
function VerticalDetailView({ vertical, onBack, onSelectMetric }) {
const [metrics, setMetrics] = useState(null);
const [categories, setCategories] = useState(null);
const [teams, setTeams] = useState([]);
const [burndown, setBurndown] = useState(null);
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).
useEffect(() => {
setLoading(true);
Promise.all([
fetch(`${API_BASE}/compliance/vcl-multi/vertical/${encodeURIComponent(vertical)}/metrics`, { credentials: 'include' }).then(r => r.json()),
fetch(`${API_BASE}/compliance/vcl-multi/vertical/${encodeURIComponent(vertical)}/burndown`, { credentials: 'include' }).then(r => r.json()),
]).then(([metricsData, burndownData]) => {
setMetrics(metricsData.metrics || []);
setCategories(metricsData.categories || []);
setTeams(metricsData.teams || []);
setBurndown(burndownData);
setLoading(false);
}).catch(() => setLoading(false));
}, [vertical]);
const toggleMetricExpand = (metricId) => {
setExpandedMetrics(prev => {
const next = new Set(prev);
if (next.has(metricId)) next.delete(metricId);
else next.add(metricId);
return next;
});
};
if (loading) return
Loading...
;
// Filter metrics by team if a team filter is active
const displayMetrics = teamFilter
? metrics.filter(m => m.sub_teams && m.sub_teams.some(st => st.team === teamFilter))
: metrics;
return (