#PS-1317 fixPS-1527 UI Improvement

tekdi · Aug 14, 2024 · 47924e0 · 47924e0
2 parents 5d1441e + 4089f69
commit 47924e0
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 81 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -166,7 +166,8 @@
     "LEARNER": "Learners",
     "ATTENDANCE_COMPARISON": "Attendance Comparison",
     "CENTER_TYPE": "Center Type",
-    "BLOCK_AVERAGE_ATTENDANCE": "Block Average Attendance",
+    "REMOTE_AVERAGE_ATTENDANCE": "Remote Average Attendance",
+    "REGULAR_AVERAGE_ATTENDANCE": "Regular Average Attendance",
     "BLOCK": "Block",
     "ATTENDANCE": "Attendance (%)"
   },

diff --git a/src/components/AttendanceComparison.tsx b/src/components/AttendanceComparison.tsx
@@ -22,7 +22,7 @@ import { useTranslation } from 'next-i18next';
 import useStore from '../store/store';
 import { useTheme } from '@mui/material/styles';
 import { overallAttendanceInPercentageStatusList } from '@/services/AttendanceService';
-import { cohortPrivileges } from '@/utils/app.constant';
+import { CenterType, cohortPrivileges } from '@/utils/app.constant';
 
 interface AttendanceComparisonProps {
   blockName: string;
@@ -158,59 +158,61 @@ const AttendanceComparison: React.FC<AttendanceComparisonProps> = ({
           {t('DASHBOARD.CENTER_TYPE')}
         </Typography>
         <RadioGroup
-          row
-          aria-label="center type"
-          name="centerType"
-          value={centerType}
-          onChange={handleCenterTypeChange}
-        >
-          <FormControlLabel
-            color="black"
-            value="REGULAR"
-            control={
-              <Radio
-                sx={{
-                  '&.Mui-checked': {
-                    color: 'black',
-                  },
-                }}
-              />
-            }
-            label="Regular"
-            sx={{
-              '& .MuiFormControlLabel-label': {
-                color: 'black',
-                fontSize: '18px',
-              },
-            }}
-          />
-          <FormControlLabel
-            value="REMOTE"
-            control={
-              <Radio
-                sx={{
-                  '&.Mui-checked': {
-                    color: 'black',
-                  },
-                }}
-              />
-            }
-            label="Remote"
-            sx={{
-              '& .MuiFormControlLabel-label': {
-                color: 'black',
-                fontSize: '18px',
-              },
-            }}
-          />
-        </RadioGroup>
-      </FormControl>
+        row
+        aria-label="center type"
+        name="centerType"
+        value={centerType}
+        onChange={handleCenterTypeChange}
+      >
+        <FormControlLabel
+          color="black"
+          value="REGULAR"
+          control={
+            <Radio
+              sx={{
+                '&.Mui-checked': {
+                  color: 'black',
+                },
+              }}
+            />
+          }
+          label="Regular"
+          sx={{
+            '& .MuiFormControlLabel-label': {
+              color: 'black',
+              fontSize: '18px',
+            },
+          }}
+        />
+        <FormControlLabel
+          value="REMOTE"
+          control={
+            <Radio
+              sx={{
+                '&.Mui-checked': {
+                  color: 'black',
+                },
+              }}
+            />
+          }
+          label="Remote"
+          sx={{
+            '& .MuiFormControlLabel-label': {
+              color: 'black',
+              fontSize: '18px',
+            },
+          }}
+        />
+      </RadioGroup>
       <Box sx={{ mt: 2 }}>
-        <Typography align="left" sx={{ marginBottom: '16px' }}>
-          {t('DASHBOARD.BLOCK_AVERAGE_ATTENDANCE')}:{' '}
-          {averageAttendance.toFixed(2)}%
+        <Typography align="left" sx={{ marginBottom: '16px', fontSize: '15px'}}>
+          {centerType === CenterType.REMOTE
+            ? t('DASHBOARD.REMOTE_AVERAGE_ATTENDANCE')
+            : t('DASHBOARD.REGULAR_AVERAGE_ATTENDANCE')}
+          : {averageAttendance.toFixed(2)}%
         </Typography>
-
+      </Box>
+    </FormControl>
         <Box sx={{ height: '400px', overflowY: 'scroll' }}>
           <ResponsiveContainer width="100%" height={data.length * 70}>
             <BarChart
@@ -295,7 +297,7 @@ const AttendanceComparison: React.FC<AttendanceComparisonProps> = ({
           </Typography>
         </Box>
       </Box>
-    </Box>
+
   );
 };
 

diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx
@@ -13,7 +13,7 @@ import { getCohortList } from '@/services/CohortServices';
 import useStore from '@/store/store';
 import { ICohort } from '@/utils/Interfaces';
 import { CustomField } from '@/utils/Interfaces';
-import { cohortHierarchy } from '@/utils/app.constant';
+import { CenterType, cohortHierarchy } from '@/utils/app.constant';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import ReactGA from 'react-ga4';
@@ -355,17 +355,17 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
                             {cohortsData?.length !== 0 ? (
                               manipulatedCohortData?.map((cohort) => (
                                 <MenuItem
-                                  key={cohort.cohortId}
-                                  value={cohort.cohortId}
-                                  style={{
-                                    fontWeight: '500',
-                                    fontSize: '14px',
-                                    color: theme.palette.warning['A200'],
-                                    textTransform: 'capitalize',
-                                  }}
-                                >
-                                  {cohort.name} ({cohort?.typeOfCohort})
-                                </MenuItem>
+                                key={cohort.cohortId}
+                                value={cohort.cohortId}
+                                style={{
+                                  fontWeight: '500',
+                                  fontSize: '14px',
+                                  color: theme.palette.warning['A200'],
+                                  textTransform: 'capitalize',
+                                }}
+                              >
+                                {cohort.name} {cohort?.typeOfCohort === CenterType.REGULAR || CenterType.UNKNOWN &&`(${cohort.typeOfCohort})`}
+                              </MenuItem>
                               ))
                             ) : (
                               <Typography

diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx
@@ -10,6 +10,7 @@ import { cohortList, getCohortList } from '@/services/CohortServices';
 import { Role, Status } from '@/utils/app.constant';
 import AddIcon from '@mui/icons-material/Add';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import ApartmentIcon from '@mui/icons-material/Apartment';
 import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import Box from '@mui/material/Box';
@@ -251,9 +252,10 @@ const ManageUser: React.FC<ManageUsersProps> = ({
       (event: React.KeyboardEvent | React.MouseEvent) => {
         setCohortDeleteId(isFromFLProfile ? teacherUserId : user.userId);
         if (!isFromFLProfile) {
-          console.log(user);
           const cohortNamesArray = user?.cohortNames?.split(', ');
-          const centerNames = cohortNamesArray?.map((cohortName: string) => cohortName.trim()) || [t('ATTENDANCE.N/A')];
+          const centerNames = cohortNamesArray?.map((cohortName: string) =>
+            cohortName.trim()
+          ) || [t('ATTENDANCE.N/A')];
           setCenters(centerNames);
           setSelectedUser(user);
         }
@@ -635,15 +637,25 @@ const ManageUser: React.FC<ManageUsersProps> = ({
                                             }}
                                           >
                                             {user?.cohortNames
-                                              ? `${user.cohortNames}`
+                                              ? `${user.cohortNames
+                                                .charAt(0)
+                                                .toUpperCase() +
+                                              user.cohortNames.slice(1)
+                                              }`
                                               : t('ATTENDANCE.N/A')}
                                           </Box>
                                         </Box>
                                       </Box>
                                       <Box>
                                         <MoreVertIcon
                                           onClick={(event) => {
-                                            isMobile ? toggleDrawer('bottom', true, user)(event) : handleMenuOpen(event)
+                                            isMobile
+                                              ? toggleDrawer(
+                                                'bottom',
+                                                true,
+                                                user
+                                              )(event)
+                                              : handleMenuOpen(event);
                                           }}
                                           sx={{
                                             fontSize: '24px',
@@ -665,7 +677,13 @@ const ManageUser: React.FC<ManageUsersProps> = ({
                                   width: '100%',
                                 }}
                               >
-                                <Typography style={{ fontWeight: 'bold', width: '100%', textAlign: 'center' }}>
+                                <Typography
+                                  style={{
+                                    fontWeight: 'bold',
+                                    width: '100%',
+                                    textAlign: 'center',
+                                  }}
+                                >
                                   {t('COMMON.NO_DATA_FOUND')}
                                 </Typography>
                               </Box>
@@ -695,7 +713,7 @@ const ManageUser: React.FC<ManageUsersProps> = ({
                     {
                       label: t('COMMON.REASSIGN_BLOCKS'),
                       icon: (
-                        <LocationOnOutlinedIcon
+                        <ApartmentIcon
                           sx={{ color: theme.palette.warning['300'] }}
                         />
                       ),
@@ -721,6 +739,20 @@ const ManageUser: React.FC<ManageUsersProps> = ({
                     },
                   ]}
                 >
+                  <Box
+                    sx={{
+                      fontSize: '16px',
+                      fontWeight: 300,
+                      marginLeft: '20px',
+                      marginBottom: '10px',
+                      color: theme.palette.warning['400'],
+                    }}
+                  >
+                    {selectedUser?.name
+                      ? selectedUser.name.charAt(0).toUpperCase() +
+                      selectedUser.name.slice(1)
+                      : ''}
+                  </Box>
                   <Box
                     bgcolor={theme.palette.success.contrastText}
                     display="flex"
@@ -731,7 +763,13 @@ const ManageUser: React.FC<ManageUsersProps> = ({
                     padding={'1rem'}
                     borderRadius={'1rem'}
                   >
-                    <Box sx={{ fontSize: "12px", fontWeight: 500, color: theme.palette.warning['400'] }}>
+                    <Box
+                      sx={{
+                        fontSize: '12px',
+                        fontWeight: 500,
+                        color: theme.palette.warning['400'],
+                      }}
+                    >
                       {t('COMMON.CENTERS_ASSIGNED', {
                         block: newStore.block,
                       })}

diff --git a/src/components/center/RenameCenterModal.tsx b/src/components/center/RenameCenterModal.tsx
@@ -19,11 +19,15 @@ import { showToastMessage } from '../Toastify';
 interface CreateBlockModalProps {
   open: boolean;
   handleClose: () => void;
+  reloadState: boolean;
+  setReloadState: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const RenameCenterModal: React.FC<CreateBlockModalProps> = ({
   open,
   handleClose,
+  reloadState,
+  setReloadState,
 }) => {
   const router = useRouter();
   const { t } = useTranslation();
@@ -34,6 +38,12 @@ const RenameCenterModal: React.FC<CreateBlockModalProps> = ({
   const [centerName, setCenterName] = useState<string>('');
   const [error, setError] = useState<string>('');
 
+  React.useEffect(() => {
+    if (reloadState) {
+      setReloadState(false);
+    }
+  }, [reloadState, setReloadState]);
+
   const handleTextFieldChange = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -57,8 +67,9 @@ const RenameCenterModal: React.FC<CreateBlockModalProps> = ({
     const name = centerName;
 
     const response = await renameFacilitator(cohortId, name);
-
+    setReloadState(true);
     showToastMessage(t('CENTERS.CENTER_RENAMED'), 'success');
+
     handleClose();
   };
 

diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx
@@ -193,7 +193,7 @@ const TeachingCenterDetails = () => {
       }
     };
     getCohortData();
-  }, []);
+  }, [reloadState]);
 
   useEffect(() => {
     const getSessionsData = async () => {
@@ -383,7 +383,7 @@ const TeachingCenterDetails = () => {
               {t('CENTERS.RENAME_CENTER')}
             </MenuItem>
             <MenuItem
-              onClick={() => {
+              onClick={() => {  
                 setOpenDeleteCenterModal(true);
                 handleMenuClose();
               }}
@@ -397,6 +397,8 @@ const TeachingCenterDetails = () => {
           <RenameCenterModal
             open={openRenameCenterModal}
             handleClose={handleRenameCenterClose}
+            reloadState={reloadState}
+            setReloadState={setReloadState}
           />
           <DeleteCenterModal
             open={openDeleteCenterModal}

diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx
@@ -378,6 +378,8 @@ const TeachingCenterDetails = () => {
           <RenameCenterModal
             open={openRenameCenterModal}
             handleClose={handleRenameCenterClose}
+            reloadState={reloadState}
+            setReloadState={setReloadState}
           />
           <DeleteCenterModal
             open={openDeleteCenterModal}