@@ -12,6 +12,7 @@ import {
1212 Switch ,
1313 Grid ,
1414 Paper ,
15+ Stack ,
1516 IconButton ,
1617} from "@mui/material" ;
1718import { PictureAsPdf , Download , Close , Settings } from "@mui/icons-material" ;
@@ -3065,64 +3066,59 @@ export const ExecutiveReportButton = (props) => {
30653066 in real-time.
30663067 </ Typography >
30673068
3068- < Grid container spacing = { 1.5 } >
3069+ < Stack spacing = { 1.5 } >
30693070 { sectionOptions . map ( ( option ) => (
3070- < Grid item xs = { 12 } key = { option . key } >
3071- < Paper
3072- sx = { {
3073- p : 1.5 ,
3074- border : "1px solid" ,
3075- borderColor : sectionConfig [ option . key ] ? "primary.main" : "divider" ,
3076- bgcolor : sectionConfig [ option . key ] ? "primary.50" : "background.paper" ,
3077- cursor : "pointer" ,
3078- transition : "all 0.2s ease-in-out" ,
3079- "&:hover" : {
3080- borderColor : "primary.main" ,
3081- bgcolor : sectionConfig [ option . key ] ? "primary.100" : "primary.25" ,
3082- } ,
3071+ < Paper
3072+ key = { option . key }
3073+ onClick = { ( ) => handleSectionToggle ( option . key ) }
3074+ sx = { {
3075+ p : 1.5 ,
3076+ border : "1px solid" ,
3077+ borderColor : sectionConfig [ option . key ] ? "primary.main" : "divider" ,
3078+ bgcolor : sectionConfig [ option . key ] ? "primary.50" : "background.paper" ,
3079+ cursor : "pointer" ,
3080+ transition : "all 0.2s ease-in-out" ,
3081+ display : "flex" ,
3082+ alignItems : "center" ,
3083+ "&:hover" : {
3084+ borderColor : "primary.main" ,
3085+ bgcolor : sectionConfig [ option . key ] ? "primary.100" : "primary.25" ,
3086+ } ,
3087+ } }
3088+ >
3089+ < Switch
3090+ checked = { sectionConfig [ option . key ] }
3091+ onChange = { ( event ) => {
3092+ event . stopPropagation ( ) ;
3093+ handleSectionToggle ( option . key ) ;
30833094 } }
3084- >
3085- < FormControlLabel
3086- control = {
3087- < Switch
3088- checked = { sectionConfig [ option . key ] }
3089- onChange = { ( event ) => {
3090- event . stopPropagation ( ) ;
3091- handleSectionToggle ( option . key ) ;
3092- } }
3093- color = "primary"
3094- size = "small"
3095- disabled = {
3096- // Disable if this is the last enabled section
3097- sectionConfig [ option . key ] &&
3098- Object . values ( sectionConfig ) . filter ( Boolean ) . length === 1
3099- }
3100- />
3101- }
3102- label = {
3103- < Box onClick = { ( ) => handleSectionToggle ( option . key ) } >
3104- < Typography
3105- variant = "subtitle2"
3106- fontWeight = "bold"
3107- sx = { { fontSize : "0.875rem" } }
3108- >
3109- { option . label }
3110- </ Typography >
3111- < Typography
3112- variant = "caption"
3113- color = "text.secondary"
3114- sx = { { fontSize : "0.75rem" } }
3115- >
3116- { option . description }
3117- </ Typography >
3118- </ Box >
3119- }
3120- sx = { { margin : 0 , width : "100%" } }
3121- />
3122- </ Paper >
3123- </ Grid >
3095+ onClick = { ( event ) => event . stopPropagation ( ) }
3096+ color = "primary"
3097+ size = "small"
3098+ disabled = {
3099+ sectionConfig [ option . key ] &&
3100+ Object . values ( sectionConfig ) . filter ( Boolean ) . length === 1
3101+ }
3102+ />
3103+ < Box sx = { { ml : 1 , flexGrow : 1 } } >
3104+ < Typography
3105+ variant = "subtitle2"
3106+ fontWeight = "bold"
3107+ sx = { { fontSize : "0.875rem" } }
3108+ >
3109+ { option . label }
3110+ </ Typography >
3111+ < Typography
3112+ variant = "caption"
3113+ color = "text.secondary"
3114+ sx = { { fontSize : "0.75rem" } }
3115+ >
3116+ { option . description }
3117+ </ Typography >
3118+ </ Box >
3119+ </ Paper >
31243120 ) ) }
3125- </ Grid >
3121+ </ Stack >
31263122
31273123 < Box sx = { { mt : 3 , p : 2 , bgcolor : "primary.50" , borderRadius : 1 } } >
31283124 < Typography variant = "caption" color = "primary.main" fontWeight = "bold" >
0 commit comments