diff --git a/src/components/AttendanceComparison.tsx b/src/components/AttendanceComparison.tsx index d71e95c5..28a0d0ea 100644 --- a/src/components/AttendanceComparison.tsx +++ b/src/components/AttendanceComparison.tsx @@ -150,7 +150,7 @@ const AttendanceComparison: React.FC = ({ {t('DASHBOARD.ATTENDANCE_COMPARISON')} - + {blockName} {t('DASHBOARD.BLOCK')} @@ -216,7 +216,7 @@ const AttendanceComparison: React.FC = ({ = ({ tickFormatter={(value: any) => `${value}%`} height={0} /> - + { + const { x, y, payload } = props; + const name = payload.value; + const firstLine = name.slice(0, 6); + const secondLine = name.slice(6); + const capitalizedFirstLine = + firstLine.charAt(0).toUpperCase() + firstLine.slice(1); + + return ( + + + {capitalizedFirstLine} + + {secondLine && ( + + {secondLine} + + )} + + ); + }} + /> + `${value}%`} /> @@ -239,7 +271,7 @@ const AttendanceComparison: React.FC = ({ = ({ - {t('DASHBOARD.ATTENDANCE')} + {t('DASHBOARD.ATTENDANCE')} diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx index 22594acb..77853346 100644 --- a/src/components/ManageUser.tsx +++ b/src/components/ManageUser.tsx @@ -29,6 +29,7 @@ import DeleteUserModal from './DeleteUserModal'; import ReassignModal from './ReassignModal'; import SimpleModal from './SimpleModal'; import { setTimeout } from 'timers'; +import Loader from './Loader'; interface Cohort { cohortId: string; @@ -282,23 +283,23 @@ const ManageUser: React.FC = ({ const toggleDrawer = (anchor: Anchor, open: boolean, user: any) => - (event: React.KeyboardEvent | React.MouseEvent) => { - setCohortDeleteId(user.userId); - setCenters( - cohortsData?.[user?.userId]?.map((cohort) => cohort?.name) || [] - ); - setSelectedUser(user); - - if ( - event.type === 'keydown' && - ((event as React.KeyboardEvent).key === 'Tab' || - (event as React.KeyboardEvent).key === 'Shift') - ) { - return; - } + (event: React.KeyboardEvent | React.MouseEvent) => { + setCohortDeleteId(user.userId); + setCenters( + cohortsData?.[user?.userId]?.map((cohort) => cohort?.name) || [] + ); + setSelectedUser(user); + + if ( + event.type === 'keydown' && + ((event as React.KeyboardEvent).key === 'Tab' || + (event as React.KeyboardEvent).key === 'Shift') + ) { + return; + } - setState({ ...state, bottom: open }); - }; + setState({ ...state, bottom: open }); + }; const listItemClick = async (event: React.MouseEvent, name: string) => { if (name === 'delete-User') { @@ -488,16 +489,20 @@ const ManageUser: React.FC = ({ setOpenFacilitatorModal(false); }; - const handleDeleteUser = () => { }; + const handleDeleteUser = () => {}; const handleFacilitatorAdded = () => { setIsFacilitatorAdded((prev) => prev); }; return ( - <> - {/*
*/} - - {/* + {loading ? ( + + ) : ( + <> + {/*
*/} + + {/* = ({ > {t('COMMON.MANAGE_USERS')} */} - - {/* + + {/* = ({ */} - - {value === 1 && ( - <> - - - {/* + + {value === 1 && ( + <> + + + {/* = ({ }} /> */} - - - {/* + + + {/* */} - - - - {/* + + + + {/* {t('COMMON.ADD_CENTER')} */} - - - - - - - + - > - - {users && - users.length !== 0 && - [...users] - .sort((a, b) => a.name.localeCompare(b.name)) - .map((user) => ( - - - - - e.preventDefault()} + + + + + + {users && + users.length !== 0 && + [...users] + .sort((a, b) => a.name.localeCompare(b.name)) + .map((user) => ( + + + - { - handleTeacherFullProfile(user.userId!); - // ReactGA.event('teacher-details-link-clicked', { - // userId: userId, - // }); - }} + + e.preventDefault()} + > + { + handleTeacherFullProfile( + user.userId! + ); + // ReactGA.event('teacher-details-link-clicked', { + // userId: userId, + // }); + }} + sx={{ + textAlign: 'left', + fontSize: '16px', + fontWeight: '400', + marginTop: '5px', + color: + theme.palette.secondary.main, + }} + > + {user.name.charAt(0).toUpperCase() + + user.name.slice(1)} + + + + {user?.cohortNames + ? `${user.cohortNames}` + : t('ATTENDANCE.N/A')} + + + + + - {user.name.charAt(0).toUpperCase() + - user.name.slice(1)} - - - - {user?.cohortNames - ? `${user.cohortNames}` - : t('ATTENDANCE.N/A')} + /> - - - - - - - ))} - {!users?.length && ( - - - {t('COMMON.NO_DATA_FOUND')} - - - )} - + + ))} + {!users?.length && ( + + + {t('COMMON.NO_DATA_FOUND')} + + + )} + + + - - - - - - ), - name: 'reassign-block', - }, - { - label: t('COMMON.REASSIGN_BLOCKS_REQUEST'), - icon: ( - - ), - name: 'reassign-block-request', - }, - // { - // label: t('COMMON.REASSIGN_CENTERS'), - // icon: ( - // - // ), - // name: 'reassign-centers', - // }, - { - label: t('COMMON.DELETE_USER'), - icon: ( - - ), - name: 'delete-User', - }, - ]} - > - {/* + + ), + name: 'reassign-block', + }, + { + label: t('COMMON.REASSIGN_BLOCKS_REQUEST'), + icon: ( + + ), + name: 'reassign-block-request', + }, + // { + // label: t('COMMON.REASSIGN_CENTERS'), + // icon: ( + // + // ), + // name: 'reassign-centers', + // }, + { + label: t('COMMON.DELETE_USER'), + icon: ( + + ), + name: 'delete-User', + }, + ]} + > + {/* = ({ ))} */} - - - - - - - + + + + - - - {' '} - - - {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')}{' '} - {removeCohortNames} -
- {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')} - - - - {openAddFacilitatorModal && ( - + + + + + + {' '} + + + {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')}{' '} + {removeCohortNames} +
+ {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')} + + + + {openAddFacilitatorModal && ( + + )} + )} - - )} - {/* Learners list */} - {/* {value === 2 && ( + {/* Learners list */} + {/* {value === 2 && ( <> = ({ /> )} */} - - + + + )} + ); }; diff --git a/src/components/ReassignModal.tsx b/src/components/ReassignModal.tsx index 5febd1ce..4245762a 100644 --- a/src/components/ReassignModal.tsx +++ b/src/components/ReassignModal.tsx @@ -136,7 +136,7 @@ const ReassignModal: React.FC = ({ top: '50%', left: '50%', transform: 'translate(-50%, -50%)', - width: '75%', + width: '80%', bgcolor: '#fff', boxShadow: 24, borderRadius: '16px', @@ -148,8 +148,8 @@ const ReassignModal: React.FC = ({ return ( - - {message} + + {message} @@ -171,16 +171,29 @@ const ReassignModal: React.FC = ({ /> - {filteredCenters.map((center) => ( - - {center.name} - handleToggle(center.name)} - /> - - ))} + {filteredCenters.map((center, index) => ( + + + {center.name} + handleToggle(center.name)} + sx={{ + color: theme.palette.text.primary, + '&.Mui-checked': { + color: 'black', + }, + verticalAlign: 'middle', + marginTop: '-10px', + }} + /> + + {index < filteredCenters.length - 1 && ( + + )} + ))} + diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx index 2beea25e..df5d1552 100644 --- a/src/pages/centers/index.tsx +++ b/src/pages/centers/index.tsx @@ -236,12 +236,9 @@ const TeachingCenters = () => { onChange={handleChange} textColor="inherit" // Use "inherit" to apply custom color aria-label="secondary tabs example" - sx={{ - fontSize: '14px', - borderBottom: (theme) => - `1px solid #EBE1D4`, + borderBottom: (theme) => `1px solid #EBE1D4`, '& .MuiTab-root': { color: theme.palette.warning['A200'], @@ -305,7 +302,9 @@ const TeachingCenters = () => { InputProps={{ endAdornment: ( - + ), }} @@ -341,27 +340,27 @@ const TeachingCenters = () => { accessControl, userRole ) && ( - - - {/* + + + {/* {t('COMMON.ADD_CENTER')} */} - - )} + + )} { onCenterAdded={handleCenterAdded} /> - {accessGranted('showBlockLevelCenterData', accessControl, userRole) && - filteredCenters && ( - <> - {/* Regular Centers */} + {accessGranted( + 'showBlockLevelCenterData', + accessControl, + userRole + ) && + filteredCenters && ( + <> + {/* Regular Centers */} + {filteredCenters.some( + (center) => center.centerType?.toUpperCase() === 'REGULAR' || center.centerType === '' + ) && ( {t('CENTERS.REGULAR_CENTERS')} - {filteredCenters.some( - (center) => - center.centerType?.toUpperCase() === 'REGULAR' || - center.centerType === '' - ) && ( - - - - {filteredCenters - .filter( - (center) => - center.centerType?.toUpperCase() === 'REGULAR' || - center.centerType === '' - ) - .map((center) => ( - - + )} + + {filteredCenters.some( + (center) => center.centerType?.toUpperCase() === 'REGULAR' || center.centerType === '' + ) && ( + + + {filteredCenters + .filter( + (center) => center.centerType?.toUpperCase() === 'REGULAR' || center.centerType === '' + ) + .map((center) => ( + + + { + router.push(`/centers/${center.cohortId}`); + localStorage.setItem('classId', center.cohortId); + }} + sx={{ + cursor: 'pointer', + }} + > + { - router.push(`/centers/${center.cohortId}`); - localStorage.setItem('classId', center.cohortId); + sx={{ + width: '56px', + display: 'flex', + background: theme.palette.primary.light, + justifyContent: 'center', + alignItems: 'center', + borderTopLeftRadius: '8px', + borderBottomLeftRadius: '8px', }} + > + center + + + - - center - - - - - {center.cohortName} - - - + {center.cohortName + .charAt(0) + .toUpperCase() + + center.cohortName.slice(1)} + - - - ))} - - - )} - - {/* Remote Centers */} + + + + + ))} + + + )} + + {/* Remote Centers */} + {filteredCenters.some( + (center) => center.centerType?.toUpperCase() === 'REMOTE' + ) && ( {t('CENTERS.REMOTE_CENTERS')} - {filteredCenters.some( - (center) => - center.centerType?.toUpperCase() === 'REMOTE' - ) && ( - - - {filteredCenters - .filter( - (center) => - center.centerType?.toUpperCase() === 'REMOTE' - ) - .map((center) => ( - - + )} + + {filteredCenters.some( + (center) => center.centerType?.toUpperCase() === 'REMOTE' + ) && ( + + + {filteredCenters + .filter( + (center) => center.centerType?.toUpperCase() === 'REMOTE' + ) + .map((center) => ( + + + { + router.push(`/centers/${center.cohortId}`); + localStorage.setItem('classId', center.cohortId); + }} + sx={{ + cursor: 'pointer', + }} + > + { - router.push(`/centers/${center.cohortId}`); - localStorage.setItem('classId', center.cohortId); + sx={{ + width: '56px', + display: 'flex', + background: theme.palette.primary.light, + justifyContent: 'center', + alignItems: 'center', + borderTopLeftRadius: '8px', + borderBottomLeftRadius: '8px', }} + > + + + + - - - - - - - {center.cohortName} - - - + {center.cohortName} + - - - ))} - - - )} - - )} + + + + + ))} + + + )} + + )} + {/* Teacher-Level Centers */} - {accessGranted('showTeacherLevelCenterData', accessControl, userRole) && + {accessGranted( + 'showTeacherLevelCenterData', + accessControl, + userRole + ) && cohortsData?.map((cohort: any) => { return ( @@ -580,18 +592,23 @@ const TeachingCenters = () => { router.push(`/centers/${cohort.cohortId}`); localStorage.setItem('classId', cohort.cohortId); }} - sx={{ cursor: 'pointer', marginBottom: '20px', background: theme.palette.action.selected, p: 2, m: 2, borderRadius: 5 }} + sx={{ + cursor: 'pointer', + marginBottom: '20px', + background: theme.palette.action.selected, + p: 2, + m: 2, + borderRadius: 5, + }} > { ); })} - )} @@ -645,7 +661,7 @@ const TeachingCenters = () => { /> )} - +