fix : update

desc : update project

Project/Frontend/SignConnectPlus/src/pages/learning-management/learning-curriculums-subscribed/tutorial/tutorial.tsx

+import { useEffect, useState } from "react";
 
 // material-ui
+import { Box, Grid, LinearProgress, List, ListItemAvatar, ListItemButton, ListItemSecondaryAction, ListItemText, Stack, Typography } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
 
 // project import
-
+import AntAvatar from 'components/@extended/Avatar';
+import MainCard from "components/MainCard";
 
 // types
+import { tutorialTypeUserProgress } from "types/userProgress";
 
 // assets
+import { ClockCircleOutlined, FileMarkdownFilled } from "@ant-design/icons";
+import ReportCard from "components/cards/statistics/ReportCard";
+import { userProgress } from "data/userProgress";
+import { selectedCommonDataProps, selectedItemContentProps } from "./types/types";
+
+
+// action style
+const actionSX = {
+    mt: 0.75,
+    ml: 1,
+    top: 'auto',
+    right: 'auto',
+    alignSelf: 'flex-start',
+    transform: 'none'
+};
+
+function convertMinutesToHMS(minutes: number) {
+    const hours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+    const seconds = Math.round((minutes % 1) * 60);
+
+    return `${hours} hr ${remainingMinutes} min ${seconds} sec`;
+}
 
 // ==============================|| Tutorial ||============================== //
- 
-const Tutorial = () => { 
+
+const Tutorial = () => {
+    const theme = useTheme();
+
+    const [data, setData] = useState<tutorialTypeUserProgress>()
+    const [selectedItem, setSelectedItem] = useState<{ selectedCommonData: selectedCommonDataProps | null, backgroundColor: any | null }>({
+        selectedCommonData: null,
+        backgroundColor: 'white', // Initial background color
+    });
+    const [selectedItemContent, setSelectedItemContent] = useState<selectedItemContentProps | null>()
+
+    const handleItemClick = (item: selectedCommonDataProps, backgroundColor: any) => {
+        setSelectedItem({
+            selectedCommonData: {
+                userId: item.userId,
+                curriculumCode: item.curriculumCode,
+                tutorialCode: item.tutorialCode,
+                title: item.title
+            },
+            backgroundColor,
+        });
+    };
+
+    useEffect(() => {
+        // Set your data here
+        setData(userProgress.curriculums![0].tutorials[0]);
+    }, []);
+
+    const [desc, setDesc] = useState(data?.tutorialDescription?.slice(0, 100))
+    const [readMore, setReadMore] = useState(false)
+
+    useEffect(() => {
+        // Filter data based on selectedItem.title
+        if (selectedItem && data) {
+            const filteredItem = data.taskItems.find((item) => item.title === selectedItem.selectedCommonData?.title);
+            setSelectedItemContent({
+                userId: selectedItem.selectedCommonData?.userId!,
+                curriculumCode: selectedItem.selectedCommonData?.curriculumCode!,
+                tutorialCode: selectedItem.selectedCommonData?.tutorialCode!,
+                ...filteredItem!
+            } || null)
+        } else {
+            setSelectedItemContent(null);
+        }
+    }, [selectedItem, data]);
+
 
     return (
-        <> 
+        <>
+            <Grid container spacing={2}>
+                <Grid item md={12}>
+                    <MainCard title="Overview">
+                        <Grid container spacing={2}>
+                            <Grid
+                                item
+                                xs={7}
+                                sm={7}
+                                sx={{}}
+                            >
+                                <Stack>
+                                    <Typography variant="h3" sx={{ mb: 2 }}>
+                                        {data?.tutorialTitle}
+                                    </Typography>
+                                    <Typography variant="h5" sx={{ textAlign: "justify" }}>
+                                        {desc}
+                                        <span style={{ fontWeight: "bold", cursor: "pointer" }}
+                                            onClick={() => {
+                                                if (!readMore) {
+                                                    setDesc(data?.tutorialDescription)
+                                                    setReadMore(true)
+                                                } else {
+                                                    setDesc(data?.tutorialDescription?.slice(0, 100))
+                                                    setReadMore(false)
+                                                }
+                                            }} color="secondary">
+                                            {readMore ? "Show Less" : "...Read More"}
+                                        </span>
+                                    </Typography>
+                                    <Typography variant="h4" sx={{ pt: 3, pb: 1, zIndex: 1 }}>
+                                        {(data?.tutorialMarkUser! / data?.tutorialMark!) * 100}% Completed
+                                    </Typography>
+                                    <Box sx={{ maxWidth: '60%' }}>
+                                        <LinearProgress variant="determinate" color="success" value={(data?.tutorialMarkUser! / data?.tutorialMark!) * 100} />
+                                    </Box>
+                                </Stack>
+                            </Grid>
+                            <Grid md={5} item>
+                                <Grid container spacing={2}>
+                                    <Grid md={12} item>
+                                        <ReportCard primary={`${data?.tutorialMarkUser}`} secondary="Tutorial User Mark" color={theme.palette.error.main} iconPrimary={FileMarkdownFilled} />
+                                    </Grid>
+                                    <Grid md={12} item>
+                                        <ReportCard primary={`${convertMinutesToHMS(data?.tutorialSpentTime!)}`} secondary="Tutorial Time Spent On" color={theme.palette.success.dark} iconPrimary={ClockCircleOutlined} />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                    </MainCard>
+                </Grid>
+                <Grid item md={4}>
+                    <MainCard title="Task List">
+                        <List
+                            component="nav"
+                            sx={{
+                                py: 0,
+                                '& .MuiListItemButton-root': {
+                                    '& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }
+                                }
+                            }}
+                        >
+                            {data?.taskItems.map((item, index) => {
+                                const isSelected = selectedItem.selectedCommonData?.title === item.title;
+                                const backgroundColor = isSelected ? theme.palette.primary.lighter : 'white';
+                                const iconColor = isSelected ? 'warning' : 'success';
+
+
+                                return (
+                                    <>
+                                        <ListItemButton
+                                            key={index}
+                                            divider
+                                            onClick={() => handleItemClick({
+                                                userId: "",
+                                                curriculumCode: "",
+                                                tutorialCode: data.tutorialCode!,
+                                                title: item.title
+                                            }, backgroundColor)}
+                                            sx={{ backgroundColor }}
+                                        >
+                                            <ListItemAvatar>
+                                                <AntAvatar alt="Basic" type="combined" color={iconColor}>
+                                                    <ClockCircleOutlined />
+                                                </AntAvatar>
+                                            </ListItemAvatar>
+                                            <ListItemText primary={<Typography variant="subtitle1">{item.title}</Typography>} />
+                                            <ListItemSecondaryAction>
+                                                <Stack alignItems="flex-end">
+                                                    <Typography variant="subtitle1" noWrap>User Mark : {item.taskItemMarkUser} </Typography>
+                                                    <Typography variant="h6" color="secondary" noWrap> Mark : {item.taskItemMark} </Typography>
+                                                </Stack>
+                                            </ListItemSecondaryAction>
+                                        </ListItemButton>
+                                    </>
+                                )
+                            })}
+                        </List>
+                    </MainCard>
+                </Grid>
+                <Grid item md={8}>
+                    <MainCard title="Task View">
+                        <Grid container spacing={2}>
+                            <Grid item md={12}>
+                                {selectedItemContent?.title}
+                            </Grid>
+                            <Grid item md={8}></Grid>
+                            <Grid item md={4}></Grid>
+                        </Grid>
+                    </MainCard>
+                </Grid>
+            </Grid>
+
         </>
     )
 }

Project/Frontend/SignConnectPlus/src/pages/learning-management/learning-curriculums-subscribed/tutorial/types/types.tsx

+import { taskItemTypeUserProgress } from "types/userProgress";
+
+export interface selectedItemContentProps extends taskItemTypeUserProgress {
+    userId: string
+    curriculumCode: string
+    tutorialCode: string
+}
+
+export interface selectedCommonDataProps {
+    userId: string
+    curriculumCode: string
+    tutorialCode: string
+    title: string
+}
\ No newline at end of file