From 83d9429bdb7bfbbe9f048dee17225ad8b94d5118 Mon Sep 17 00:00:00 2001
From: ttpl-rt-099 <shreyas_s@techjoomla.com>
Date: Fri, 2 Aug 2024 12:46:19 +0530
Subject: [PATCH 1/2] Issue #PS-1534 feat: Foundation Course detail view UI
 implementation

---
 public/locales/en/common.json |   1 +
 src/pages/course-planner.tsx  | 154 +++++++++++++++++++---------------
 2 files changed, 89 insertions(+), 66 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 01c1f3cc5..ef8089a35 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -442,6 +442,7 @@
     "FOUNDATION_COURSE": "Foundation Course",
     "MAIN_COURSE": "Main Course",
     "COLLAPSE_ALL": "Collapse All",
+    "EXPAND_ALL":"Expand All",
     "RESOURCES": "Resources"
   }
 }
diff --git a/src/pages/course-planner.tsx b/src/pages/course-planner.tsx
index b398b387c..63cc331c1 100644
--- a/src/pages/course-planner.tsx
+++ b/src/pages/course-planner.tsx
@@ -15,6 +15,7 @@ import {
   Typography,
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { sub } from 'date-fns';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
@@ -23,6 +24,10 @@ import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 
 const CoursePlanner = () => {
   const [value, setValue] = React.useState(1);
+  const [subjects, setSubjects] = React.useState([
+    { id: 1, subject: 'Mathematics', circular: 10 },
+    { id: 2, subject: 'Science', circular: 50 },
+  ]);
   const theme = useTheme<any>();
   const { t } = useTranslation();
   const router = useRouter();
@@ -112,7 +117,16 @@ const CoursePlanner = () => {
       </Grid>
 
       <Box sx={{ mt: 2 }}>
-        <Box sx={{ width: '100%' }}>
+        <Box
+          sx={{
+            width: '100%',
+            '@media (max-width: 600px)': {
+              display: 'flex',
+              justifyContent: 'center',
+            },
+            borderBottom: `1px solid ${theme.palette.primary.contrastText}`,
+          }}
+        >
           <Tabs
             value={value}
             onChange={handleChange}
@@ -120,7 +134,6 @@ const CoursePlanner = () => {
             aria-label="secondary tabs example"
             sx={{
               fontSize: '14px',
-              borderBottom: `1px solid ${theme.palette.primary.contrastText}`,
 
               '& .MuiTab-root': {
                 color: '#4D4639',
@@ -150,94 +163,103 @@ const CoursePlanner = () => {
             <Box
               sx={{
                 background: theme.palette.action.selected,
-                padding: '14px',
+                py: '2px',
                 borderRadius: '8px',
               }}
             >
-              <Box
-                sx={{
-                  border: `1px solid ${theme.palette.warning.A100}`,
-                  borderRadius: '8px',
-                  padding: '12px',
-                  cursor: 'pointer',
-                }}
-                onClick={() => {
-                  router.push(`/course-planner-detail`); // Check route
-                }}
-              >
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                  }}
-                >
-                  <Box>
+              {subjects.map((item, index) => {
+                return (
+                  <Box
+                    key={item.id}
+                    sx={{
+                      border: `1px solid ${theme.palette.warning.A100}`,
+                      borderRadius: '8px',
+                      padding: '12px',
+                      cursor: 'pointer',
+                      margin: '14px',
+                    }}
+                    onClick={() => {
+                      router.push(`/course-planner-detail`); // Check route
+                    }}
+                  >
                     <Box
                       sx={{
                         display: 'flex',
-                        gap: '15px',
+                        justifyContent: 'space-between',
                         alignItems: 'center',
                       }}
                     >
-                      <Box
-                        sx={{ position: 'relative', display: 'inline-flex' }}
-                      >
-                        <Box sx={{ width: '40px', height: '40px' }}>
-                          <CircularProgressbar
-                            value={10}
-                            strokeWidth={10}
-                            styles={buildStyles({
-                              pathColor: '#06A816',
-                              trailColor: '#E6E6E6',
-                              strokeLinecap: 'round',
-                            })}
-                          />
-                        </Box>
-
+                      <Box>
                         <Box
                           sx={{
-                            top: 0,
-                            left: 0,
-                            bottom: 0,
-                            right: 0,
-                            position: 'absolute',
                             display: 'flex',
+                            gap: '15px',
                             alignItems: 'center',
-                            justifyContent: 'center',
                           }}
                         >
-                          <Typography
-                            variant="caption"
-                            component="div"
+                          <Box
                             sx={{
-                              fontSize: '11px',
+                              position: 'relative',
+                              display: 'inline-flex',
+                            }}
+                          >
+                            <Box sx={{ width: '40px', height: '40px' }}>
+                              <CircularProgressbar
+                                value={item.circular}
+                                strokeWidth={10}
+                                styles={buildStyles({
+                                  pathColor: '#06A816',
+                                  trailColor: '#E6E6E6',
+                                  strokeLinecap: 'round',
+                                })}
+                              />
+                            </Box>
+
+                            <Box
+                              sx={{
+                                top: 0,
+                                left: 0,
+                                bottom: 0,
+                                right: 0,
+                                position: 'absolute',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                              }}
+                            >
+                              <Typography
+                                variant="caption"
+                                component="div"
+                                sx={{
+                                  fontSize: '11px',
+                                  color: theme.palette.warning['300'],
+                                  fontWeight: '500',
+                                }}
+                              >
+                                {item.circular}%
+                              </Typography>
+                            </Box>
+                          </Box>
+
+                          <Box
+                            sx={{
+                              fontSize: '16px',
                               color: theme.palette.warning['300'],
-                              fontWeight: '500',
                             }}
                           >
-                            10%
-                          </Typography>
+                            {item.subject}
+                          </Box>
                         </Box>
                       </Box>
-
-                      <Box
-                        sx={{
-                          fontSize: '16px',
-                          color: theme.palette.warning['300'],
-                        }}
-                      >
-                        Mathematics {/*  will come form API */}
+                      <Box>
+                        <KeyboardArrowRightIcon
+                          sx={{ color: theme.palette.warning['300'] }}
+                        />
                       </Box>
                     </Box>
                   </Box>
-                  <Box>
-                    <KeyboardArrowRightIcon
-                      sx={{ color: theme.palette.warning['300'] }}
-                    />
-                  </Box>
-                </Box>
-              </Box>
+                );
+              })}
             </Box>
           </Box>
         )}

From 73b74429d6a86a7b32333f4c885505b47daa2980 Mon Sep 17 00:00:00 2001
From: ttpl-rt-099 <shreyas_s@techjoomla.com>
Date: Fri, 2 Aug 2024 14:27:17 +0530
Subject: [PATCH 2/2] Issue #PS-1534 feat: Foundation Course detail view UI
 implementation

---
 src/pages/course-planner.tsx | 156 ++++++++++++++++++-----------------
 1 file changed, 82 insertions(+), 74 deletions(-)

diff --git a/src/pages/course-planner.tsx b/src/pages/course-planner.tsx
index 63cc331c1..fde9877a1 100644
--- a/src/pages/course-planner.tsx
+++ b/src/pages/course-planner.tsx
@@ -15,7 +15,6 @@ import {
   Typography,
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { sub } from 'date-fns';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
@@ -27,6 +26,11 @@ const CoursePlanner = () => {
   const [subjects, setSubjects] = React.useState([
     { id: 1, subject: 'Mathematics', circular: 10 },
     { id: 2, subject: 'Science', circular: 50 },
+    { id: 2, subject: 'History', circular: 30 },
+    { id: 2, subject: 'Geography', circular: 60 },
+    { id: 2, subject: 'Marathi', circular: 90 },
+    { id: 2, subject: 'Hindi', circular: 70 },
+    { id: 2, subject: 'Social Science', circular: 80 },
   ]);
   const theme = useTheme<any>();
   const { t } = useTranslation();
@@ -81,7 +85,7 @@ const CoursePlanner = () => {
                   }}
                 >
                   <MenuItem className="text-truncate">
-                    Khapari Dharmu (Chimur, Chandrap {/* will come from API */}
+                    Khapari Dharmu (Chimur, Chandrap) {/* will come from API */}
                   </MenuItem>
                 </Select>
               </FormControl>
@@ -165,101 +169,105 @@ const CoursePlanner = () => {
                 background: theme.palette.action.selected,
                 py: '2px',
                 borderRadius: '8px',
+                marginBottom: '20px',
               }}
             >
-              {subjects.map((item, index) => {
-                return (
-                  <Box
-                    key={item.id}
-                    sx={{
-                      border: `1px solid ${theme.palette.warning.A100}`,
-                      borderRadius: '8px',
-                      padding: '12px',
-                      cursor: 'pointer',
-                      margin: '14px',
-                    }}
-                    onClick={() => {
-                      router.push(`/course-planner-detail`); // Check route
-                    }}
-                  >
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                      }}
-                    >
-                      <Box>
+              <Grid container>
+                {subjects.map((item, index) => {
+                  return (
+                    <Grid key={item.id} item xs={12} sm={6} md={4}>
+                      <Box
+                        sx={{
+                          border: `1px solid ${theme.palette.warning.A100}`,
+                          borderRadius: '8px',
+                          padding: '12px',
+                          cursor: 'pointer',
+                          margin: '14px',
+                        }}
+                        onClick={() => {
+                          router.push(`/course-planner-detail`); // Check route
+                        }}
+                      >
                         <Box
                           sx={{
                             display: 'flex',
-                            gap: '15px',
+                            justifyContent: 'space-between',
                             alignItems: 'center',
                           }}
                         >
-                          <Box
-                            sx={{
-                              position: 'relative',
-                              display: 'inline-flex',
-                            }}
-                          >
-                            <Box sx={{ width: '40px', height: '40px' }}>
-                              <CircularProgressbar
-                                value={item.circular}
-                                strokeWidth={10}
-                                styles={buildStyles({
-                                  pathColor: '#06A816',
-                                  trailColor: '#E6E6E6',
-                                  strokeLinecap: 'round',
-                                })}
-                              />
-                            </Box>
-
+                          <Box>
                             <Box
                               sx={{
-                                top: 0,
-                                left: 0,
-                                bottom: 0,
-                                right: 0,
-                                position: 'absolute',
                                 display: 'flex',
+                                gap: '15px',
                                 alignItems: 'center',
-                                justifyContent: 'center',
                               }}
                             >
-                              <Typography
-                                variant="caption"
-                                component="div"
+                              <Box
                                 sx={{
-                                  fontSize: '11px',
+                                  position: 'relative',
+                                  display: 'inline-flex',
+                                }}
+                              >
+                                <Box sx={{ width: '40px', height: '40px' }}>
+                                  <CircularProgressbar
+                                    value={item.circular}
+                                    strokeWidth={10}
+                                    styles={buildStyles({
+                                      pathColor: '#06A816',
+                                      trailColor: '#E6E6E6',
+                                      strokeLinecap: 'round',
+                                    })}
+                                  />
+                                </Box>
+
+                                <Box
+                                  sx={{
+                                    top: 0,
+                                    left: 0,
+                                    bottom: 0,
+                                    right: 0,
+                                    position: 'absolute',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                  }}
+                                >
+                                  <Typography
+                                    variant="caption"
+                                    component="div"
+                                    sx={{
+                                      fontSize: '11px',
+                                      color: theme.palette.warning['300'],
+                                      fontWeight: '500',
+                                    }}
+                                  >
+                                    {item.circular}%
+                                  </Typography>
+                                </Box>
+                              </Box>
+
+                              <Box
+                                sx={{
+                                  fontSize: '16px',
                                   color: theme.palette.warning['300'],
-                                  fontWeight: '500',
                                 }}
                               >
-                                {item.circular}%
-                              </Typography>
+                                {item.subject}
+                              </Box>
                             </Box>
                           </Box>
-
-                          <Box
-                            sx={{
-                              fontSize: '16px',
-                              color: theme.palette.warning['300'],
-                            }}
-                          >
-                            {item.subject}
+                          <Box>
+                            <KeyboardArrowRightIcon
+                              sx={{ color: theme.palette.warning['300'] }}
+                            />
                           </Box>
                         </Box>
                       </Box>
-                      <Box>
-                        <KeyboardArrowRightIcon
-                          sx={{ color: theme.palette.warning['300'] }}
-                        />
-                      </Box>
-                    </Box>
-                  </Box>
-                );
-              })}
+                    </Grid>
+                  );
+                })}
+              </Grid>
             </Box>
           </Box>
         )}