fix: update

Desc : update project

Project/Frontend/SignConnectPlus/src/sections/learning-management/learning-curriculums-subscribed/CurriculumSection.tsx

 
 // material-ui
 import {
+  Box,
   Grid,
+  LinearProgress,
   Stack,
   Typography
 } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 
 // project import
 import TutorialSection from './TutorialSection';
 
 // types 
+import MainCard from 'components/MainCard';
+import { ThemeDirection } from 'types/config';
 import { curriculumTypeUserProgress } from "types/userProgress";
 
 // assets
-
+import { CheckCircleOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import Reader from 'assets/images/analytics/reader.svg';
+import ReportCard from 'components/cards/statistics/ReportCard';
 
 // ==============================|| Curriculum - Section ||============================== //
 
 
 const CurriculumSection = ({ curriculum }: { curriculum: curriculumTypeUserProgress }) => {
+  const theme = useTheme();
 
   return (
     <>
       <Stack spacing={2} sx={{ padding: 2 }}>
-        <Typography variant="h5">{curriculum.curriculumDescription}</Typography>
-        <Grid container spacing={2}>
-          {curriculum.tutorials.map((tutorial, index) => {
-            return (<TutorialSection tutorial={tutorial!} />)
-          })}
-        </Grid>
+        <MainCard title="Overview">
+          <Grid container spacing={2}>
+            <Grid
+              item
+              xs={7}
+              sm={7}
+              sx={{
+                bgcolor: `${theme.palette.primary.main}`,
+                position: 'relative',
+                p: 2.75,
+                borderRadius: { xs: 2, sm: '8px 0px 0px 8px' },
+                overflow: 'hidden'
+              }}
+            >
+              <Stack>
+                <Typography variant="h5" color="white">
+                  {curriculum.curriculumDescription}
+                </Typography>
+                <Typography color={theme.palette.grey[0]} variant="caption" sx={{ maxWidth: '55%', pt: 1 }}>
+                  Your learning capacity is 80% as daily analytics
+                </Typography>
+                <Typography variant="h4" color="white" sx={{ pt: 8, pb: 1, zIndex: 1 }}>
+                  {(curriculum.curriculumMarkUser / curriculum.curriculumMark) * 100}% Completed
+                </Typography>
+                <Box sx={{ maxWidth: '60%' }}>
+                  <LinearProgress variant="determinate" color="success" value={(curriculum.curriculumMarkUser / curriculum.curriculumMark) * 100} />
+                </Box>
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    bottom: -7,
+                    right: 0,
+                    ...(theme.direction === ThemeDirection.RTL && { transform: { xs: 'rotateY(180deg)', sm: 'inherit' } })
+                  }}
+                >
+                  <img alt="reder" src={Reader} />
+                </Box>
+              </Stack>
+            </Grid>
+            <Grid md={5} item>
+              <Grid container spacing={2}>
+                <Grid md={12} item>
+                  <ReportCard primary={`LEVEL - ${curriculum.curriculumLevel}`} secondary="Curriculum Level" color={theme.palette.error.main} iconPrimary={UnorderedListOutlined} />
+                </Grid>
+                <Grid md={12} item>
+                  <ReportCard primary={`Pass Mark - ${curriculum.curriculumMark}`} secondary="Curriculum Pass Mark" color={theme.palette.success.dark} iconPrimary={CheckCircleOutlined} />
+                </Grid>
+              </Grid>
+            </Grid>
+          </Grid>
+        </MainCard>
+        <MainCard title="Tutorials">
+          <Grid container spacing={2}>
+            {curriculum.tutorials.map((tutorial, index) => {
+              return (<TutorialSection tutorial={tutorial!} />)
+            })}
+          </Grid>
+        </MainCard>
       </Stack>
     </>
   );