From 8a12a773924297755a4c73d7652cd28f81f82540 Mon Sep 17 00:00:00 2001
From: ttpl-rt-214 <shreyas_s@techjoomla.com>
Date: Thu, 22 Aug 2024 12:08:45 +0530
Subject: [PATCH] #PS-1769 Course Planner bottom drawer desktop view UI

---
 src/components/FacilitatorDrawer.tsx   |  16 +-
 src/pages/centers/[cohortId]/index.tsx |   5 +-
 src/pages/centers/index.tsx            | 221 ++++++++++++-------------
 src/styles/globals.css                 |   1 +
 4 files changed, 127 insertions(+), 116 deletions(-)

diff --git a/src/components/FacilitatorDrawer.tsx b/src/components/FacilitatorDrawer.tsx
index d529bd7d..98cb4398 100644
--- a/src/components/FacilitatorDrawer.tsx
+++ b/src/components/FacilitatorDrawer.tsx
@@ -20,7 +20,17 @@ const FacilitatorDrawer: React.FC<FacilitatorDrawerProps> = ({
         open={drawerState.bottom}
         onClose={toggleDrawer(true)}
         onOpen={toggleDrawer(true)}
-        sx={{ position: 'unset' }}
+        sx={{
+          position: 'unset',
+          '@media (min-width: 900px)': {
+          '& .MuiPaper-root': {
+            marginLeft: '352px',
+            // bottom:'3rem',
+            // borderRadius:'16px'
+          },
+        }
+        }}
+        className='facilitator-drawer'
         BackdropProps={{ invisible: true }}
       >
         <Box
@@ -38,7 +48,9 @@ const FacilitatorDrawer: React.FC<FacilitatorDrawerProps> = ({
               fontSize: '14px',
               fontWeight: '400',
               color: theme?.palette?.warning['A400'],
+              '@media (min-width: 600px)': {
               textAlign: 'center',
+              }
             }}
           >
             Khapari Dharmu (Chimur, Chandrapur) {/*  will come from API */}
@@ -74,7 +86,7 @@ const FacilitatorDrawer: React.FC<FacilitatorDrawerProps> = ({
                         width: '100%',
                       },
                     }}
-                    // onClick={handleSecondaryModel} // Uncomment and implement this function if needed
+                  // onClick={handleSecondaryModel} // Uncomment and implement this function if needed
                   >
                     {secondary}
                   </Button>
diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx
index 0c1b66ff..4b0f839b 100644
--- a/src/pages/centers/[cohortId]/index.tsx
+++ b/src/pages/centers/[cohortId]/index.tsx
@@ -324,15 +324,14 @@ const CohortPage = () => {
           <Box
             sx={{
               display: 'flex',
-              alignItems: 'center',
               cursor: 'pointer',
             }}
             onClick={handleBackEvent}
           >
             <KeyboardBackspaceOutlinedIcon
-              sx={{ color: theme.palette.warning['A200'], marginTop: '8px' }}
+              sx={{ color: theme.palette.warning['A200'], marginTop: '18px' }}
             />
-            <Box m={'1rem 1rem 0.5rem'} display={'column'} gap={'5px'}>
+            <Box m={'1rem 1rem 0.5rem 0.5rem'} display={'column'} gap={'5px'}>
               <Typography textAlign={'left'} fontSize={'22px'}>
                 {toPascalCase(cohortDetails?.name)}
               </Typography>
diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx
index 691b5d0d..c9a25bf1 100644
--- a/src/pages/centers/index.tsx
+++ b/src/pages/centers/index.tsx
@@ -395,130 +395,129 @@ const CentersPage = () => {
                 onCenterAdded={handleCenterAdded}
               />
 
-{accessGranted('showBlockLevelCenterData', accessControl, userRole) &&
-  (filteredCenters && filteredCenters.length > 0 ? (
-    <>
-      {/* Regular Centers */}
-      {filteredCenters.some(
-        (center) =>
-          center.centerType?.toUpperCase() === CenterType.REGULAR ||
-          center.centerType === ''
-      ) && (
-        <CenterList
-          title="CENTERS.REGULAR_CENTERS"
-          centers={filteredCenters.filter(
-            (center) =>
-              center.centerType?.toUpperCase() === CenterType.REGULAR ||
-              center.centerType === ''
-          )}
-          router={router}
-          theme={theme}
-          t={t}
-        />
-      )}
+              {accessGranted('showBlockLevelCenterData', accessControl, userRole) &&
+                (filteredCenters && filteredCenters.length > 0 ? (
+                  <>
+                    {/* Regular Centers */}
+                    {filteredCenters.some(
+                      (center) =>
+                        center.centerType?.toUpperCase() === CenterType.REGULAR ||
+                        center.centerType === ''
+                    ) && (
+                        <CenterList
+                          title="CENTERS.REGULAR_CENTERS"
+                          centers={filteredCenters.filter(
+                            (center) =>
+                              center.centerType?.toUpperCase() === CenterType.REGULAR ||
+                              center.centerType === ''
+                          )}
+                          router={router}
+                          theme={theme}
+                          t={t}
+                        />
+                      )}
 
-      {/* Remote Centers */}
-      {filteredCenters.some(
-        (center) => center.centerType?.toUpperCase() === CenterType.REMOTE
-      ) && (
-        <CenterList
-          title="CENTERS.REMOTE_CENTERS"
-          centers={filteredCenters.filter(
-            (center) =>
-              center.centerType?.toUpperCase() === CenterType.REMOTE
-          )}
-          router={router}
-          theme={theme}
-          t={t}
-        />
-      )}
-    </>
-  ) : (
-    <Box
-      sx={{
-        fontSize: '16px',
-        fontWeight: '500',
-        color: theme.palette.warning['400'],
-        m: 2,
-      }}
-    >
-      {t('COMMON.NO_DATA_FOUND')}
-    </Box>
-  ))}
+                    {/* Remote Centers */}
+                    {filteredCenters.some(
+                      (center) => center.centerType?.toUpperCase() === CenterType.REMOTE
+                    ) && (
+                        <CenterList
+                          title="CENTERS.REMOTE_CENTERS"
+                          centers={filteredCenters.filter(
+                            (center) =>
+                              center.centerType?.toUpperCase() === CenterType.REMOTE
+                          )}
+                          router={router}
+                          theme={theme}
+                          t={t}
+                        />
+                      )}
+                  </>
+                ) : (
+                  <Box
+                    sx={{
+                      fontSize: '16px',
+                      fontWeight: '500',
+                      color: theme.palette.warning['400'],
+                      m: 2,
+                    }}
+                  >
+                    {t('COMMON.NO_DATA_FOUND')}
+                  </Box>
+                ))}
 
 
               {/* Teacher-Level Centers */}
-              {accessGranted(
-                'showTeacherLevelCenterData',
-                accessControl,
-                userRole
-              ) &&
-                cohortsData?.map((cohort: any) => {
-                  return (
-                    <React.Fragment key={cohort?.cohortId}>
-                      <Box
-                        onClick={() => {
-                          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,
-                        }}
-                      >
-                        <Box
-                          sx={{
-                            display: 'flex',
-                            gap: '10px',
-                            background: '#fff',
-                            height: '56px',
-                            borderRadius: '8px',
-                          }}
-                        >
+              <Box sx={{
+                cursor: 'pointer',
+                marginBottom: '20px',
+                background: theme.palette.action.selected,
+                p: 2,
+                m: 2,
+                borderRadius: 5,
+              }}>
+                <Grid container spacing={3}>
+                  {accessGranted('showTeacherLevelCenterData', accessControl, userRole) &&
+                    cohortsData?.map((cohort: any) => {
+                      return (
+                        <Grid item xs={12} sm={6} md={4} key={cohort?.cohortId}>
                           <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>
-
-                          <Box
-                            sx={{
-                              display: 'flex',
-                              justifyContent: 'space-between',
-                              alignItems: 'center',
-                              width: '100%',
-                              padding: '0 10px',
+                            onClick={() => {
+                              router.push(`/centers/${cohort?.cohortId}/`);
+                              localStorage.setItem('classId', cohort.cohortId);
                             }}
                           >
                             <Box
                               sx={{
-                                fontSize: '16px',
-                                fontWeight: '400',
-                                color: theme.palette.warning['300'],
+                                display: 'flex',
+                                gap: '10px',
+                                background: '#fff',
+                                height: '56px',
+                                borderRadius: '8px',
                               }}
                             >
-                              {cohort?.cohortName}
+                              <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>
+
+                              <Box
+                                sx={{
+                                  display: 'flex',
+                                  justifyContent: 'space-between',
+                                  alignItems: 'center',
+                                  width: '100%',
+                                  padding: '0 10px',
+                                }}
+                              >
+                                <Box
+                                  sx={{
+                                    fontSize: '16px',
+                                    fontWeight: '400',
+                                    color: theme.palette.warning['300'],
+                                  }}
+                                >
+                                  {cohort?.cohortName}
+                                </Box>
+                                <ChevronRightIcon />
+                              </Box>
                             </Box>
-                            <ChevronRightIcon />
                           </Box>
-                        </Box>
-                      </Box>
-                    </React.Fragment>
-                  );
-                })}
+                        </Grid>
+                      );
+                    })}
+                </Grid>
+
+              </Box>
             </>
           )}
         </Box>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0949c871..aff09f66 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1027,3 +1027,4 @@ legend.Mui-focused {
 .MuiInputLabel-root.Mui-focused {
   color: var(--mui-palette-warning-300) !important; 
 }
+