@@ -42,37 +42,79 @@ function QualityAssuranceReport() {
4242 the system.
4343 </ Typography >
4444
45- { qaReport . map ( ( item ) => (
46- < Box
47- key = { item . type }
48- sx = { {
49- display : 'flex' ,
50- alignItems : 'center' ,
51- backgroundColor : item . passed === false ? red [ 100 ] : undefined ,
52- p : 1 ,
53- mb : 1 ,
54- } }
55- >
56- < Typography variant = "h4" > { item . ids . length } </ Typography >
45+ { qaReport . map ( ( item ) => {
46+ const isGrouped = 'ids_by_election' in item ;
47+ const totalCount = isGrouped ? item . ids_by_election . reduce ( ( sum , g ) => sum + g . ids . length , 0 ) : item . ids . length ;
5748
58- < ListItem
59- secondaryAction = {
60- item . passed === false && isClipboardApiSupported ( ) === true ? (
61- < IconButton edge = "end" onClick = { onCopyToClipboard ( item . ids ) } >
62- < ContentCopy />
63- </ IconButton >
64- ) : undefined
65- }
66- sx = { { pt : 0 , pb : 0 } }
49+ return (
50+ < Box
51+ key = { item . type }
52+ sx = { {
53+ backgroundColor : item . passed === false ? red [ 100 ] : undefined ,
54+ p : 1 ,
55+ mb : 1 ,
56+ } }
6757 >
68- < ListItemText
69- primary = { item . name }
70- secondary = { item . ids . join ( ', ' ) || 'Everything is fine 🎉' }
71- sx = { { flexGrow : 1 } }
72- />
73- </ ListItem >
74- </ Box >
75- ) ) }
58+ { /* Header row: count + check name */ }
59+ < Box sx = { { display : 'flex' , alignItems : 'center' } } >
60+ < Typography variant = "h4" > { totalCount } </ Typography >
61+
62+ { isGrouped ? (
63+ < ListItem sx = { { pt : 0 , pb : 0 } } >
64+ < ListItemText primary = { item . name } sx = { { flexGrow : 1 } } />
65+ </ ListItem >
66+ ) : (
67+ < ListItem
68+ secondaryAction = {
69+ item . passed === false && isClipboardApiSupported ( ) === true ? (
70+ < IconButton edge = "end" onClick = { onCopyToClipboard ( item . ids ) } >
71+ < ContentCopy />
72+ </ IconButton >
73+ ) : undefined
74+ }
75+ sx = { { pt : 0 , pb : 0 } }
76+ >
77+ < ListItemText
78+ primary = { item . name }
79+ secondary = { item . ids . join ( ', ' ) || 'Everything is fine 🎉' }
80+ sx = { { flexGrow : 1 } }
81+ />
82+ </ ListItem >
83+ ) }
84+ </ Box >
85+
86+ { /* Grouped: per-election sub-rows */ }
87+ { isGrouped && item . ids_by_election . length === 0 && (
88+ < Typography variant = "body2" sx = { { pl : 7 , pb : 0.5 , color : 'text.secondary' } } >
89+ Everything is fine 🎉
90+ </ Typography >
91+ ) }
92+
93+ { isGrouped &&
94+ item . ids_by_election . map ( ( group ) => (
95+ < Box key = { group . election_id } sx = { { display : 'flex' , alignItems : 'center' } } >
96+ < ListItem
97+ secondaryAction = {
98+ isClipboardApiSupported ( ) === true ? (
99+ < IconButton edge = "end" onClick = { onCopyToClipboard ( group . ids ) } >
100+ < ContentCopy />
101+ </ IconButton >
102+ ) : undefined
103+ }
104+ sx = { { pt : 0.5 , pb : 0.5 } }
105+ >
106+ < ListItemText
107+ primary = { group . election_name }
108+ primaryTypographyProps = { { variant : 'body2' } }
109+ secondary = { group . ids . join ( ', ' ) }
110+ sx = { { flexGrow : 1 } }
111+ />
112+ </ ListItem >
113+ </ Box >
114+ ) ) }
115+ </ Box >
116+ ) ;
117+ } ) }
76118 </ PageWrapper >
77119 ) ;
78120}
0 commit comments