From 5da7f8966d094ae8cfdb7ca97b38fa3519eb45c2 Mon Sep 17 00:00:00 2001 From: upendraTekdi <upendra_k@tekditechnologies.com> Date: Wed, 21 Aug 2024 18:51:46 +0530 Subject: [PATCH 1/3] Task #225334 : update in Remove user from class,Reason for Remove,My classes ,mark for Learners & makr for self,reasons for absen,use all reasons of oblf when attendance popup in absent case --- app.config.ts | 9 +++++++++ public/locales/en/common.json | 4 ++++ src/components/DeleteUserModal.tsx | 4 ++-- src/components/MenuDrawer.tsx | 2 +- src/pages/centers/index.tsx | 2 +- src/pages/dashboard.tsx | 15 ++++++++++----- 6 files changed, 27 insertions(+), 9 deletions(-) diff --git a/app.config.ts b/app.config.ts index cb9933db..9b095379 100644 --- a/app.config.ts +++ b/app.config.ts @@ -28,6 +28,15 @@ export const dropoutReasons = [ { label: 'SCHOOL_ADMISSION', value: 'School admission' }, ]; +export const absentReasonOptions = [ + { label: 'PAID_LEAVE_HALF_DAY', value: 'Paid leave - Half day' }, + { label: 'PAID_LEAVE_FULL_DAY', value: 'Paid leave - Full day' }, + { label: 'UNPAID_LEAVE_HALF_DAY', value: 'Unpaid leave - Half day' }, + { label: 'UNPAID_LEAVE_FULL_DAY', value: 'Unpaid leave - Full day' }, + { label: 'MENSTRUAL_LEAVE_HALF_DAY', value: 'Menstrual leave - Half day' }, + { label: 'MENSTRUAL_LEAVE_FULL_DAY', value: 'Menstrual leave - Full day' }, +]; + export const accessControl: { [key: string]: Role[] } = { accessDashboard: [Role.TEACHER, Role.TEAM_LEADER], accessAttendanceHistory: [Role.TEACHER, Role.TEAM_LEADER], diff --git a/public/locales/en/common.json b/public/locales/en/common.json index a2011b6f..2e03eb5f 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -5,6 +5,8 @@ "MARK": "Mark", "MARK_TO_LEARNER": "Mark To Learners", "MARK_TO_SELF": "Mark To Self", + "MARK_FOR_LEARNER": "Mark For Learners", + "MARK_FOR_SELF": "Mark For Self", "MARK_MY_ATTENDANCE": "Mark My Attendance", "MARK_CENTER_ATTENDANCE": "Mark Center Attendance", "MARK_ATTENDANCE": "Mark Attendance", @@ -73,6 +75,8 @@ "DROP_OUT": "Drop Out", "REASON_FOR_DROPOUT": "Reason for Dropout", "REASON_FOR_DELETION": "Reason for Deletion", + "REASON_FOR_REMOVE": "Reason for Remove", + "REASON_FOR_ABSENT": "Reason for Absent", "SURE_LOGOUT": "Are you sure you want to Logout?", "SURE_UPDATE": "Are you sure you want to update this attendance?", "SURE_REMOVE": "Are you sure you want to remove this learner?", diff --git a/src/components/DeleteUserModal.tsx b/src/components/DeleteUserModal.tsx index 51696179..f931f646 100644 --- a/src/components/DeleteUserModal.tsx +++ b/src/components/DeleteUserModal.tsx @@ -130,7 +130,7 @@ const DeleteUserModal: React.FC<DeleteUserModalProps> = ({ }} component="h2" > - {t('COMMON.DELETE_USER')} + {t('COMMON.REMOVE_USER_FROM_CLASS')} </Typography> </Box> <CloseIcon @@ -152,7 +152,7 @@ const DeleteUserModal: React.FC<DeleteUserModalProps> = ({ }} component="h2" > - {t('COMMON.REASON_FOR_DELETION')} + {t('COMMON.REASON_FOR_REMOVE')} </Typography> </Box> <> diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx index 6c0468d0..546e26f8 100644 --- a/src/components/MenuDrawer.tsx +++ b/src/components/MenuDrawer.tsx @@ -266,7 +266,7 @@ const MenuDrawer: React.FC<DrawerProps> = ({ > {accessGranted('showTeachingCenter', accessControl, userRole) ? t('DASHBOARD.TEACHING_CENTERS') - : t('DASHBOARD.MY_TEACHING_CENTERS')} + : t('DASHBOARD.MY_CLASSES')} </Button> </Box> )} diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx index 6681d01d..c3eae3b5 100644 --- a/src/pages/centers/index.tsx +++ b/src/pages/centers/index.tsx @@ -227,7 +227,7 @@ const TeachingCenters = () => { p={'18px 0 0px 18px'} color={theme?.palette?.warning['300']} > - {t('DASHBOARD.MY_TEACHING_CENTERS')} + {t('DASHBOARD.MY_CLASSES')} </Box> )} {accessGranted('showBlockLevelData', accessControl, userRole) && ( diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index e38c741f..f1bda372 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -43,6 +43,7 @@ import { } from '../utils/Interfaces'; import { ShowSelfAttendance, + absentReasonOptions, accessControl, dropoutReasons, lowLearnerAttendanceLimit, @@ -1115,7 +1116,7 @@ const Dashboard: React.FC<DashboardProps> = () => { > {currentAttendance === 'notMarked' || currentAttendance === 'futureDate' - ? t('COMMON.MARK_TO_LEARNER') + ? t('COMMON.MARK_FOR_LEARNER') : t('COMMON.MODIFY_FOR_LEARNER')} </Button> </Stack> @@ -1331,7 +1332,7 @@ const Dashboard: React.FC<DashboardProps> = () => { attendanceData?.[0]?.attendance === attendanceType.ABSENT ? t('COMMON.MODIFY_FOR_SELF') - : t('COMMON.MARK_TO_SELF')} + : t('COMMON.MARK_FOR_SELF')} {/* {currentAttendance === 'notMarked' || currentAttendance === 'futureDate' ? t('COMMON.MARK_TO_SELF') @@ -1424,17 +1425,21 @@ const Dashboard: React.FC<DashboardProps> = () => { }} id="demo-multiple-name-label" > - {t('COMMON.REASON_FOR_DROPOUT')} + {t('COMMON.REASON_FOR_ABSENT')} </InputLabel> <Select labelId="demo-multiple-name-label" id="demo-multiple-name" input={ - <OutlinedInput label="Reason for Dropout" /> + <OutlinedInput + label={t( + 'COMMON.REASON_FOR_ABSENT' + )} + /> } onChange={handleChange} > - {dropoutReasons?.map((reason) => ( + {absentReasonOptions?.map((reason) => ( <MenuItem key={reason.value} value={reason.value} From 57dc52b7fb862cedcad4fea5728b9f5b39e6bbe3 Mon Sep 17 00:00:00 2001 From: upendraTekdi <upendra_k@tekditechnologies.com> Date: Wed, 21 Aug 2024 19:04:37 +0530 Subject: [PATCH 2/3] Task #225334 : add const variable for reason absent --- public/locales/en/common.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 2e03eb5f..7959d703 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -217,7 +217,13 @@ "CENTER_NAME": "Center Name", "ALL_CENTERS": "All Centers", "NO_LEARNER_WITH_LOW_ATTENDANCE": "None", - "ATTENDANCE_MARKED_OUT_OF_DAYS": "Attendance marked: {{count}} out of last 7 days" + "ATTENDANCE_MARKED_OUT_OF_DAYS": "Attendance marked: {{count}} out of last 7 days", + "PAID_LEAVE_HALF_DAY": "Paid leave - Half day", + "PAID_LEAVE_FULL_DAY": "Paid leave - Full day", + "UNPAID_LEAVE_HALF_DAY": "Unpaid leave - Half day", + "UNPAID_LEAVE_FULL_DAY": "Unpaid leave - Full day", + "MENSTRUAL_LEAVE_HALF_DAY": "Menstrual leave - Half day", + "MENSTRUAL_LEAVE_FULL_DAY": "Menstrual leave - Full day" }, "PROFILE": { "EDIT_PROFILE": "Edit Profile", From cafc95fb52a4c5fb17a9f0e521a1a74aa1957905 Mon Sep 17 00:00:00 2001 From: upendraTekdi <upendra_k@tekditechnologies.com> Date: Thu, 22 Aug 2024 00:42:30 +0530 Subject: [PATCH 3/3] Task #225334 : update code --- app.config.ts | 3 + src/components/DeleteUserModal.tsx | 9 +- src/components/MenuDrawer.tsx | 16 +- src/pages/centers/index.tsx | 410 +++++++++++++++-------------- src/pages/dashboard.tsx | 18 +- 5 files changed, 238 insertions(+), 218 deletions(-) diff --git a/app.config.ts b/app.config.ts index 9b095379..b1a5abff 100644 --- a/app.config.ts +++ b/app.config.ts @@ -90,3 +90,6 @@ export const ShowSelfAttendance = true; export const reassignCenters = false; export const markdDropOut = false; + +// show lables as per product +export const showLablesForOther = true; diff --git a/src/components/DeleteUserModal.tsx b/src/components/DeleteUserModal.tsx index f931f646..d28f6955 100644 --- a/src/components/DeleteUserModal.tsx +++ b/src/components/DeleteUserModal.tsx @@ -21,6 +21,7 @@ import { updateFacilitator } from '@/services/ManageUser'; import { updateCohortMemberStatus } from '@/services/MyClassDetailsService'; import { Role, Status } from '@/utils/app.constant'; import manageUserStore from '@/store/manageUserStore'; +import { showLablesForOther } from '../../app.config'; interface DeleteUserModalProps { type: Role.STUDENT | Role.TEACHER; @@ -130,7 +131,9 @@ const DeleteUserModal: React.FC<DeleteUserModalProps> = ({ }} component="h2" > - {t('COMMON.REMOVE_USER_FROM_CLASS')} + {showLablesForOther + ? t('COMMON.REMOVE_USER_FROM_CLASS') + : t('COMMON.DELETE_USER')} </Typography> </Box> <CloseIcon @@ -152,7 +155,9 @@ const DeleteUserModal: React.FC<DeleteUserModalProps> = ({ }} component="h2" > - {t('COMMON.REASON_FOR_REMOVE')} + {showLablesForOther + ? t('COMMON.REASON_FOR_REMOVE') + : t('COMMON.REASON_FOR_DELETION')} </Typography> </Box> <> diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx index 546e26f8..c3ec07ec 100644 --- a/src/components/MenuDrawer.tsx +++ b/src/components/MenuDrawer.tsx @@ -27,6 +27,7 @@ import { ShowMyTeachingCenter, ShowObservationsAndForms, accessControl, + showLablesForOther, } from '../../app.config'; import EventAvailableOutlinedIcon from '@mui/icons-material/EventAvailableOutlined'; import checkBook from '../assets/images/checkbook.svg'; @@ -84,7 +85,6 @@ const MenuDrawer: React.FC<DrawerProps> = ({ handleToggleDrawer(false)(); } }; - const navigateToDashboard = () => { closeDrawer(); @@ -106,9 +106,7 @@ const MenuDrawer: React.FC<DrawerProps> = ({ return ( <Drawer open={isDesktop || isOpen} - onClose={ - closeDrawer - } + onClose={closeDrawer} transitionDuration={{ enter: 500, exit: 500 }} className="backgroundFaded" variant={isDesktop ? 'persistent' : 'temporary'} @@ -138,11 +136,7 @@ const MenuDrawer: React.FC<DrawerProps> = ({ </Box> {!isDesktop && ( <Box> - <IconButton - onClick={ - closeDrawer - } - > + <IconButton onClick={closeDrawer}> <ClearIcon sx={{ color: theme.palette.warning['300'] }} /> </IconButton> </Box> @@ -266,7 +260,9 @@ const MenuDrawer: React.FC<DrawerProps> = ({ > {accessGranted('showTeachingCenter', accessControl, userRole) ? t('DASHBOARD.TEACHING_CENTERS') - : t('DASHBOARD.MY_CLASSES')} + : showLablesForOther + ? t('DASHBOARD.MY_CLASSES') + : t('DASHBOARD.MY_TEACHING_CENTERS')} </Button> </Box> )} diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx index c3eae3b5..fb60c8cd 100644 --- a/src/pages/centers/index.tsx +++ b/src/pages/centers/index.tsx @@ -32,7 +32,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import Image from 'next/image'; import { useRouter } from 'next/router'; import { setTimeout } from 'timers'; -import { accessControl } from '../../../app.config'; +import { accessControl, showLablesForOther } from '../../../app.config'; import building from '../../assets/images/apartment.png'; const TeachingCenters = () => { @@ -227,7 +227,9 @@ const TeachingCenters = () => { p={'18px 0 0px 18px'} color={theme?.palette?.warning['300']} > - {t('DASHBOARD.MY_CLASSES')} + {showLablesForOther + ? t('DASHBOARD.MY_CLASSES') + : t('DASHBOARD.MY_TEACHING_CENTERS')} </Box> )} {accessGranted('showBlockLevelData', accessControl, userRole) && ( @@ -327,13 +329,14 @@ const TeachingCenters = () => { </Box> </Grid> <Grid item xs={4}> - <Box sx={{ - '@media (min-width: 900px)': { - display: 'flex', - justifyContent: 'end' - - }, - }}> + <Box + sx={{ + '@media (min-width: 900px)': { + display: 'flex', + justifyContent: 'end', + }, + }} + > <FormControl className="drawer-select" sx={{ @@ -369,27 +372,27 @@ const TeachingCenters = () => { accessControl, userRole ) && ( - <Box mt={'18px'} px={'18px'}> - <Button - sx={{ - border: '1px solid #1E1B16', - borderRadius: '100px', - height: '40px', - width: '9rem', - color: theme.palette.error.contrastText, - }} - className="text-1E" - endIcon={<AddIcon />} - onClick={() => setOpenCreateCenterModal(true)} - > - {t('BLOCKS.CREATE_NEW')} - </Button> - {/* <Box sx={{ display: 'flex', gap: '5px' }}> + <Box mt={'18px'} px={'18px'}> + <Button + sx={{ + border: '1px solid #1E1B16', + borderRadius: '100px', + height: '40px', + width: '9rem', + color: theme.palette.error.contrastText, + }} + className="text-1E" + endIcon={<AddIcon />} + onClick={() => setOpenCreateCenterModal(true)} + > + {t('BLOCKS.CREATE_NEW')} + </Button> + {/* <Box sx={{ display: 'flex', gap: '5px' }}> <ErrorOutlineIcon style={{ fontSize: '15px' }} /> <Box className="fs-12 fw-500 ">{t('COMMON.ADD_CENTER')}</Box> </Box> */} - </Box> - )} + </Box> + )} </Grid> <CreateCenterModal @@ -408,224 +411,227 @@ const TeachingCenters = () => { {/* Regular Centers */} {filteredCenters.some( (center) => - center.centerType?.toUpperCase() === CenterType.REGULAR || - center.centerType === '' + center.centerType?.toUpperCase() === + CenterType.REGULAR || center.centerType === '' ) && ( - <> - <Box - sx={{ - fontSize: '14px', - fontWeight: '500', - color: theme.palette.warning['300'], - marginBottom: '8px', - m: 2, - }} - > - {t('CENTERS.REGULAR_CENTERS')} - </Box> + <> + <Box + sx={{ + fontSize: '14px', + fontWeight: '500', + color: theme.palette.warning['300'], + marginBottom: '8px', + m: 2, + }} + > + {t('CENTERS.REGULAR_CENTERS')} + </Box> - <Box - sx={{ - borderRadius: '16px', - p: 2, - background: theme.palette.action.selected, - m: 2, - }} - > - <Grid container spacing={2}> - {filteredCenters - .filter( - (center) => - center?.centerType?.toUpperCase() === - CenterType.REGULAR || center?.centerType === '' - ) - .map((center) => ( - <Grid - item - xs={12} - sm={6} - md={4} - key={center?.cohortId} + <Box + sx={{ + borderRadius: '16px', + p: 2, + background: theme.palette.action.selected, + m: 2, + }} + > + <Grid container spacing={2}> + {filteredCenters + .filter( + (center) => + center?.centerType?.toUpperCase() === + CenterType.REGULAR || + center?.centerType === '' + ) + .map((center) => ( + <Grid + item + xs={12} + sm={6} + md={4} + key={center?.cohortId} + > + <Box + onClick={() => { + router.push( + `/centers/${center?.cohortId}` + ); + localStorage.setItem( + 'classId', + center?.cohortId + ); + }} + sx={{ + cursor: 'pointer', + }} > <Box - onClick={() => { - router.push( - `/centers/${center?.cohortId}` - ); - localStorage.setItem( - 'classId', - center?.cohortId - ); - }} sx={{ - cursor: 'pointer', + display: 'flex', + gap: '10px', + background: '#fff', + height: '56px', + borderRadius: '8px', }} + mt={1} > <Box sx={{ + width: '56px', display: 'flex', - gap: '10px', - background: '#fff', - height: '56px', - borderRadius: '8px', + background: + theme.palette.primary.light, + justifyContent: 'center', + alignItems: 'center', + borderTopLeftRadius: '8px', + borderBottomLeftRadius: '8px', }} - mt={1} > - <Box - sx={{ - width: '56px', - display: 'flex', - background: - theme.palette.primary.light, - justifyContent: 'center', - alignItems: 'center', - borderTopLeftRadius: '8px', - borderBottomLeftRadius: '8px', - }} - > - <Image src={building} alt="center" /> - </Box> + <Image src={building} alt="center" /> + </Box> + <Box + sx={{ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + padding: '0 10px', + }} + > <Box sx={{ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - padding: '0 10px', + fontSize: '16px', + fontWeight: '400', + color: theme.palette.warning['300'], }} > - <Box - sx={{ - fontSize: '16px', - fontWeight: '400', - color: theme.palette.warning['300'], - }} - > - {center.cohortName - .charAt(0) - .toUpperCase() + - center.cohortName.slice(1)} - </Box> - <ChevronRightIcon /> + {center.cohortName + .charAt(0) + .toUpperCase() + + center.cohortName.slice(1)} </Box> + <ChevronRightIcon /> </Box> </Box> - </Grid> - ))} - </Grid> - </Box> - </> - )} + </Box> + </Grid> + ))} + </Grid> + </Box> + </> + )} {/* Remote Centers */} {filteredCenters.some( - (center) => center.centerType?.toUpperCase() === CenterType.REMOTE + (center) => + center.centerType?.toUpperCase() === CenterType.REMOTE ) && ( - <> - <Box - sx={{ - fontSize: '14px', - fontWeight: '500', - color: theme.palette.warning['300'], - marginBottom: '8px', - m: 2, - }} - > - {t('CENTERS.REMOTE_CENTERS')} - </Box> + <> + <Box + sx={{ + fontSize: '14px', + fontWeight: '500', + color: theme.palette.warning['300'], + marginBottom: '8px', + m: 2, + }} + > + {t('CENTERS.REMOTE_CENTERS')} + </Box> - <Box - sx={{ - borderRadius: '16px', - p: 2, - background: theme.palette.action.selected, - m: 2, - }} - > - <Grid container spacing={2}> - {filteredCenters - .filter( - (center) => - center.centerType?.toUpperCase() === CenterType.REMOTE - ) - .map((center) => ( - <Grid - item - xs={12} - sm={6} - md={4} - key={center?.cohortId} + <Box + sx={{ + borderRadius: '16px', + p: 2, + background: theme.palette.action.selected, + m: 2, + }} + > + <Grid container spacing={2}> + {filteredCenters + .filter( + (center) => + center.centerType?.toUpperCase() === + CenterType.REMOTE + ) + .map((center) => ( + <Grid + item + xs={12} + sm={6} + md={4} + key={center?.cohortId} + > + <Box + onClick={() => { + router.push( + `/centers/${center?.cohortId}` + ); + localStorage.setItem( + 'classId', + center?.cohortId + ); + }} + sx={{ + cursor: 'pointer', + }} > <Box - onClick={() => { - router.push( - `/centers/${center?.cohortId}` - ); - localStorage.setItem( - 'classId', - center?.cohortId - ); - }} sx={{ - cursor: 'pointer', + display: 'flex', + gap: '10px', + background: '#fff', + height: '56px', + borderRadius: '8px', }} + mt={1} > <Box sx={{ + width: '56px', display: 'flex', - gap: '10px', - background: '#fff', - height: '56px', - borderRadius: '8px', + background: + theme.palette.primary.light, + justifyContent: 'center', + alignItems: 'center', + borderTopLeftRadius: '8px', + borderBottomLeftRadius: '8px', }} - mt={1} > - <Box - sx={{ - width: '56px', - display: 'flex', - background: - theme.palette.primary.light, - justifyContent: 'center', - alignItems: 'center', - borderTopLeftRadius: '8px', - borderBottomLeftRadius: '8px', - }} - > - <SmartDisplayOutlinedIcon - sx={{ color: '#4D4639' }} - /> - </Box> + <SmartDisplayOutlinedIcon + sx={{ color: '#4D4639' }} + /> + </Box> + <Box + sx={{ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + padding: '0 10px', + }} + > <Box sx={{ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - padding: '0 10px', + fontSize: '16px', + fontWeight: '400', + color: theme.palette.warning['300'], }} > - <Box - sx={{ - fontSize: '16px', - fontWeight: '400', - color: theme.palette.warning['300'], - }} - > - {center.cohortName} - </Box> - <ChevronRightIcon /> + {center.cohortName} </Box> + <ChevronRightIcon /> </Box> </Box> - </Grid> - ))} - </Grid> - </Box> - </> - )} + </Box> + </Grid> + ))} + </Grid> + </Box> + </> + )} </> ) : ( <Box diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index f1bda372..5f34dadf 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -47,6 +47,7 @@ import { accessControl, dropoutReasons, lowLearnerAttendanceLimit, + showLablesForOther, } from './../../app.config'; import AttendanceComparison from '@/components/AttendanceComparison'; @@ -1116,7 +1117,9 @@ const Dashboard: React.FC<DashboardProps> = () => { > {currentAttendance === 'notMarked' || currentAttendance === 'futureDate' - ? t('COMMON.MARK_FOR_LEARNER') + ? showLablesForOther + ? t('COMMON.MARK_FOR_LEARNER') + : t('COMMON.MARK_TO_LEARNER') : t('COMMON.MODIFY_FOR_LEARNER')} </Button> </Stack> @@ -1332,7 +1335,9 @@ const Dashboard: React.FC<DashboardProps> = () => { attendanceData?.[0]?.attendance === attendanceType.ABSENT ? t('COMMON.MODIFY_FOR_SELF') - : t('COMMON.MARK_FOR_SELF')} + : showLablesForOther + ? t('COMMON.MARK_FOR_SELF') + : t('COMMON.MARK_TO_SELF')} {/* {currentAttendance === 'notMarked' || currentAttendance === 'futureDate' ? t('COMMON.MARK_TO_SELF') @@ -1425,7 +1430,9 @@ const Dashboard: React.FC<DashboardProps> = () => { }} id="demo-multiple-name-label" > - {t('COMMON.REASON_FOR_ABSENT')} + {showLablesForOther + ? t('COMMON.REASON_FOR_ABSENT') + : t('COMMON.REASON_FOR_DROPOUT')} </InputLabel> <Select labelId="demo-multiple-name-label" @@ -1439,7 +1446,10 @@ const Dashboard: React.FC<DashboardProps> = () => { } onChange={handleChange} > - {absentReasonOptions?.map((reason) => ( + {(showLablesForOther + ? absentReasonOptions + : dropoutReasons + )?.map((reason) => ( <MenuItem key={reason.value} value={reason.value}