fix: update

Desc : update project

Project/Backend/Server_Node/mocq_data/Curriculums.ts

@@ -84,9 +84,9 @@ const curriculums = [
             },
             {
                 "tutorialCode": "02",
-                "tutorialTitle": "Learn the Basics of Sign Language",
+                "tutorialTitle": "Everyday Vocabulary in Sign Language",
                 "tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
-                "tutorialContent": "Introduce the concept of sign language and its importance.\nTeach basic greetings and expressions, such as hello, goodbye, thank you, and sorry.\nProvide visual demonstrations and practice exercises for learners to practice these basic signs."
+                "tutorialContent": "Teach signs for everyday objects and activities, such as eat, drink, sleep, book, pen, etc.\nIntroduce signs for common words used in daily life.\nProvide visual demonstrations and interactive exercises for learners to practice using these signs."
             }, 
             {
                 "tutorialCode": "03",
@@ -96,12 +96,6 @@ const curriculums = [
             }, 
             {
                 "tutorialCode": "04",
-                "tutorialTitle": "Everyday Vocabulary in Sign Language",
-                "tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
-                "tutorialContent": "Teach signs for everyday objects and activities, such as eat, drink, sleep, book, pen, etc.\nIntroduce signs for common words used in daily life.\nProvide visual demonstrations and interactive exercises for learners to practice using these signs."
-            },
-            {
-                "tutorialCode": "05",
                 "tutorialTitle": "Basic Conversational Phrases in Sign Language",
                 "tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
                 "tutorialContent": "Teach simple conversational phrases, such as \"What is your name?\" or \"How are you?\"\nIntroduce signs for common question words and phrases.\nProvide visual demonstrations and practice exercises for learners to practice these conversational phrases."

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

+import { useEffect, useState } from 'react';
 
 // material-ui
-
-// third-party
+import {
+    Box,
+    FormControl,
+    Grid,
+    MenuItem,
+    Pagination,
+    Select,
+    SelectChangeEvent,
+    Slide,
+    Stack,
+    Theme,
+    Typography,
+    useMediaQuery
+} from '@mui/material';
 
 // project import
-import MainCard from 'components/MainCard';
-import ScrollX from 'components/ScrollX';
 
+import usePagination from 'hooks/usePagination';
+import CurriculumCard from 'sections/learning-management/learning-curriculums/CurriculumCard';
+import EmptyCurriculumCard from 'sections/learning-management/learning-curriculums/skeleton/EmptyCurriculumCard';
+import { GlobalFilter } from 'utils/react-table';
+import { dataProps } from './types/types';
 
-// assets
+// types
 
-//types
+// assets
 
 // ==============================|| List ||============================== //
 
+const allColumns = [
+    {
+        id: 1,
+        header: 'Default'
+    },
+    {
+        id: 2,
+        header: 'Code'
+    },
+    {
+        id: 3,
+        header: 'Name'
+    },
+    {
+        id: 4,
+        header: 'Level'
+    },
+    {
+        id: 5,
+        header: 'Status'
+    }
+];
+
 const List = () => {
+    const data: dataProps[] = [
+        {
+            "_id": "1",
+            "curriculumCode": "01",
+            "curriculumLevel": 1,
+            "curriculumDescription": "This curriculum teaches basic sign language skills to help beginners communicate effectively using sign language.",
+            "curriculumName": "Learn Basic Sign Language Skills",
+            "curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
+            "tutorials": [],
+            "status": 1,
+            "createdAt": new Date("2023-08-30T12:00:00Z"),
+        },
+        {
+            "_id": "2",
+            "curriculumCode": "02",
+            "curriculumLevel": 2,
+            "curriculumName": "Learn Intermediate Sign Language Skills",
+            "curriculumDescription": "This curriculum focuses on building intermediate sign language skills, allowing learners to engage in more complex conversations and interactions using sign language.",
+            "curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
+            "tutorials": [],
+            "status": 1,
+            "createdAt": new Date("2023-08-30T12:00:00Z"),
+        },
+        {
+            "_id": "3",
+            "curriculumCode": "03",
+            "curriculumLevel": 3,
+            "curriculumName": "Learn Advance Sign Language Skills",
+            "curriculumDescription": "This curriculum is designed for those who already have a solid foundation in sign language. It covers advanced topics, nuances, and cultural aspects of sign language communication.",
+            "curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
+            "tutorials": [],
+            "status": 1,
+            "createdAt": new Date("2023-08-30T12:00:00Z"),
+        }
+    ]
+
+    const matchDownSM = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
+
+    const [sortBy, setSortBy] = useState('Default');
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [curriculumCard, setCurriculumCard] = useState<dataProps[]>([]);
+    const [page, setPage] = useState(1);
+
+    const handleChange = (event: SelectChangeEvent) => {
+        setSortBy(event.target.value as string);
+    };
+
+    // search
+    useEffect(() => {
+        const newData = data.filter((value: any) => {
+            if (globalFilter) {
+                return value.curriculumName.toLowerCase().includes(globalFilter.toLowerCase());
+            } else {
+                return value;
+            }
+        });
+
+        console.log(newData.length);
+
+        setCurriculumCard(newData);
+    }, [globalFilter]);
+
+    const PER_PAGE = 6;
+
+    const count = Math.ceil(curriculumCard.length / PER_PAGE);
+    const _DATA = usePagination(curriculumCard, PER_PAGE);
+
+    const handleChangePage = (e: any, p: any) => {
+        setPage(p);
+        _DATA.jump(p);
+    };
+
+    return (
+        <>
+            <Box sx={{ position: 'relative', marginBottom: 3 }}>
+                <Stack direction="row" alignItems="center">
+                    <Stack
+                        direction={matchDownSM ? 'column' : 'row'}
+                        sx={{ width: '100%' }}
+                        spacing={1}
+                        justifyContent="space-between"
+                        alignItems="center"
+                    >
+                        {/* @ts-ignore */}
+                        <GlobalFilter preGlobalFilteredRows={data} globalFilter={globalFilter} setGlobalFilter={setGlobalFilter} />
+                        <Stack direction={matchDownSM ? 'column' : 'row'} alignItems="center" spacing={1}>
+                            <FormControl sx={{ m: 1, minWidth: 120 }}>
+                                <Select
+                                    value={sortBy}
+                                    onChange={handleChange}
+                                    displayEmpty
+                                    inputProps={{ 'aria-label': 'Without label' }}
+                                    renderValue={(selected) => {
+                                        if (!selected) {
+                                            return <Typography variant="subtitle1">Sort By</Typography>;
+                                        }
+
+                                        return <Typography variant="subtitle2">Sort by ({sortBy})</Typography>;
+                                    }}
+                                >
+                                    {allColumns.map((column) => {
                                         return (
-        <MainCard content={false}>
-            <ScrollX> 
-            </ScrollX>
-        </MainCard>
+                                            <MenuItem key={column.id} value={column.header}>
+                                                {column.header}
+                                            </MenuItem>
+                                        );
+                                    })}
+                                </Select>
+                            </FormControl>
+                        </Stack>
+                    </Stack>
+                </Stack>
+            </Box>
+            <Grid container spacing={3}>
+                {curriculumCard.length > 0 ? (
+                    _DATA
+                        .currentData()
+                        .sort(function (a: any, b: any) {
+                            if (sortBy === 'Customer Name') return a.fatherName.localeCompare(b.fatherName);
+                            if (sortBy === 'Email') return a.email.localeCompare(b.email);
+                            if (sortBy === 'Contact') return a.contact.localeCompare(b.contact);
+                            if (sortBy === 'Age') return b.age < a.age ? 1 : -1;
+                            if (sortBy === 'Country') return a.country.localeCompare(b.country);
+                            if (sortBy === 'Status') return a.status.localeCompare(b.status);
+                            return a;
+                        })
+                        .map((curriculum: dataProps, index: number) => (
+                            <Slide key={index} direction="up" in={true} timeout={50}>
+                                <Grid item xs={12} sm={6} lg={4}>
+                                    <CurriculumCard curriculum={curriculum} />
+                                </Grid>
+                            </Slide>
+                        ))
+                ) : (
+                    <EmptyCurriculumCard title={'System have no curriculums yet.'} />
+                )}
+            </Grid>
+            <Stack spacing={2} sx={{ p: 2.5 }} alignItems="flex-end">
+                <Pagination
+                    count={count}
+                    size="medium"
+                    page={page}
+                    showFirstButton
+                    showLastButton
+                    variant="combined"
+                    color="primary"
+                    onChange={handleChangePage}
+                />
+            </Stack>
+        </>
     )
 }
 

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

+export interface dataProps {
+    _id: number | string | undefined;
+    curriculumCode: string;
+    curriculumLevel: number;
+    curriculumName: string;
+    curriculumDescription: string;
+    curriculumImage: string;
+    tutorials?: tutorialItemProps[];
+    status?: number;
+    createdBy?: string;
+    updatedBy?: string;
+    createdAt?: Date;
+    updatedAt?: Date;
+}
+
+export interface tutorialItemProps {
+    _id: number | string | undefined;
+    tutorialCode: string;
+    tutorialTitle: string;
+    tutorialDescription: string;
+    tutorialImage: string;
+    status?: number;
+    createdBy?: string;
+    updatedBy?: string;
+    createdAt?: Date;
+    updatedAt?: Date;
+    taskItems?: taskItemProps[]
+}
+
+export interface taskItemProps {
+    _id: number | string | undefined;
+    title: string;
+    description: string;
+    howToDo: string;
+    referenceImage: string;
+    referenceVideo: string;
+}
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/pages/parameter/curriculum-management/list/types/types.tsx

@@ -2,14 +2,15 @@ import { Column } from 'react-table';
 
 export interface dataProps {
     _id: number | string | undefined;
-    curriculumCode: String;
+    curriculumCode: string;
     curriculumLevel: number;
-    curriculumName: String;
-    curriculumImage: String;
+    curriculumName: string;
+    curriculumDescription: string;
+    curriculumImage: string;
     tutorials: tutorialItemProps[];
-    status: Number;
-    createdBy: String;
-    updatedBy: String;
+    status: number;
+    createdBy: string;
+    updatedBy: string;
     createdAt: Date;
     updatedAt: Date;
 }
@@ -22,28 +23,28 @@ export interface ReactTableProps {
 
 export interface curriculumProps {
     _id: number | string | undefined;
-    curriculumCode: String;
+    curriculumCode: string;
     curriculumLevel: number;
-    curriculumTitle: String;
-    curriculumDescription: String;
-    curriculumImage: String;
+    curriculumTitle: string;
+    curriculumDescription: string;
+    curriculumImage: string;
     tutorials: string[];
-    status: Number;
-    createdBy: String;
-    updatedBy: String;
+    status: number;
+    createdBy: string;
+    updatedBy: string;
     createdAt: Date;
     updatedAt: Date;
 }
 
 export interface tutorialItemProps {
     _id: number | string | undefined;
-    tutorialCode: String;
-    tutorialTitle: String;
-    tutorialDescription: String;
-    tutorialImage: String;
-    status: Number;
-    createdBy: String;
-    updatedBy: String;
+    tutorialCode: string;
+    tutorialTitle: string;
+    tutorialDescription: string;
+    tutorialImage: string;
+    status: number;
+    createdBy: string;
+    updatedBy: string;
     createdAt: Date;
     updatedAt: Date;
     taskItems: taskItemProps[]
@@ -51,9 +52,9 @@ export interface tutorialItemProps {
 
 export interface taskItemProps {
     _id: number | string | undefined;
-    title: String;
-    description: String;
-    howToDo: String;
-    referenceImage: String;
-    referenceVideo: String;
+    title: string;
+    description: string;
+    howToDo: string;
+    referenceImage: string;
+    referenceVideo: string;
 }
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/pages/parameter/tutorial-management/list/types/types.tsx

@@ -2,13 +2,13 @@ import { Column } from 'react-table';
 
 export interface dataProps {
     _id: number | string | undefined;
-    tutorialCode: String;
-    tutorialTitle: String;
-    tutorialDescription: String;
-    tutorialImage: String;
-    status: Number;
-    createdBy: String;
-    updatedBy: String;
+    tutorialCode: string;
+    tutorialTitle: string;
+    tutorialDescription: string;
+    tutorialImage: string;
+    status: number;
+    createdBy: string;
+    updatedBy: string;
     createdAt: Date;
     updatedAt: Date;
     taskItems: taskItemProps[]
@@ -22,13 +22,13 @@ export interface ReactTableProps {
 
 export interface tutorialProps {
     _id: number | string | undefined;
-    tutorialCode: String;
-    tutorialTitle: String;
-    tutorialDescription: String;
-    tutorialImage: String;
-    status: Number;
-    createdBy: String;
-    updatedBy: String;
+    tutorialCode: string;
+    tutorialTitle: string;
+    tutorialDescription: string;
+    tutorialImage: string;
+    status: number;
+    createdBy: string;
+    updatedBy: string;
     createdAt: Date;
     updatedAt: Date;
     taskItems: taskItemProps[]
@@ -36,9 +36,9 @@ export interface tutorialProps {
 
 export interface taskItemProps {
     _id: number | string | undefined;
-    title: String;
-    description: String;
-    howToDo: String;
-    referenceImage: String;
-    referenceVideo: String;
+    title: string;
+    description: string;
+    howToDo: string;
+    referenceImage: string;
+    referenceVideo: string;
 }
\ No newline at end of file

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

+import { useState } from 'react';
+
+// material-ui
+import {
+  Button,
+  Divider,
+  Fade,
+  Grid,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack,
+  Typography
+} from '@mui/material';
+
+// third-party
+import { PDFDownloadLink } from '@react-pdf/renderer';
+
+// project import
+import IconButton from 'components/@extended/IconButton';
+import MainCard from 'components/MainCard';
+
+// assets
+import { MoreOutlined } from '@ant-design/icons';
+import Avatar from 'components/@extended/Avatar';
+import curriculumLevels from 'data/curriculumLevels';
+
+// types
+export interface curriculumCardProps {
+  _id: number | string | undefined;
+  curriculumCode: string;
+  curriculumLevel: number;
+  curriculumName: string;
+  curriculumDescription: string;
+  curriculumImage: string;
+  tutorials?: tutorialItemProps[];
+  status?: number;
+  createdBy?: string;
+  updatedBy?: string;
+  createdAt?: Date;
+  updatedAt?: Date;
+}
+
+export interface tutorialItemProps {
+  _id: number | string | undefined;
+  tutorialCode: string;
+  tutorialTitle: string;
+  tutorialDescription: string;
+  tutorialImage: string;
+  status?: number;
+  createdBy?: string;
+  updatedBy?: string;
+  createdAt?: Date;
+  updatedAt?: Date;
+  taskItems?: taskItemProps[]
+}
+
+export interface taskItemProps {
+  _id: number | string | undefined;
+  title: string;
+  description: string;
+  howToDo: string;
+  referenceImage: string;
+  referenceVideo: string;
+}
+
+// ==============================|| CURRICULUM - CARD ||============================== //
+
+const CurriculumCard = ({ curriculum }: { curriculum: curriculumCardProps }) => {
+  // const [open, setOpen] = useState(false);
+
+  // const handleClickOpen = () => {
+  //   setOpen(true);
+  // };
+
+  // const handleClose = () => {
+  //   setOpen(false);
+  // };
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const openMenu = Boolean(anchorEl);
+  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <MainCard sx={{ height: 1, '& .MuiCardContent-root': { height: 1, display: 'flex', flexDirection: 'column' } }}>
+        <Grid id="print" container spacing={2.25}>
+          <Grid item xs={12}>
+            <List sx={{ width: 1, p: 0 }}>
+              <ListItem
+                disablePadding
+                secondaryAction={
+                  <IconButton edge="end" aria-label="comments" color="secondary" onClick={handleMenuClick}>
+                    <MoreOutlined style={{ fontSize: '1.15rem' }} />
+                  </IconButton>
+                }
+              >
+                <ListItemAvatar>
+                  <Avatar alt={curriculum.curriculumName!} src={curriculum.curriculumImage!} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={<Typography variant="subtitle1">{curriculum.curriculumName}</Typography>}
+                  secondary={
+                    <Typography variant="caption" color="secondary">
+                      {curriculumLevels.find(level => level.id === curriculum.curriculumLevel)?.description || ""}
+                    </Typography>
+                  }
+                />
+              </ListItem>
+            </List>
+            <Menu
+              id="fade-menu"
+              MenuListProps={{
+                'aria-labelledby': 'fade-button'
+              }}
+              anchorEl={anchorEl}
+              open={openMenu}
+              onClose={handleMenuClose}
+              TransitionComponent={Fade}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right'
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right'
+              }}
+            >
+              <MenuItem sx={{ a: { textDecoration: 'none', color: 'inherit' } }}>
+                <PDFDownloadLink
+                  document={<></>} fileName={`${curriculum.curriculumCode}-${curriculum.curriculumName}.pdf`}
+                // document={<ListSmallCard customer={customer} />} fileName={`Customer-${customer.fatherName}.pdf`}
+                >
+                  Export PDF
+                </PDFDownloadLink>
+              </MenuItem>
+            </Menu>
+          </Grid>
+          <Grid item xs={12}>
+            <Divider />
+          </Grid>
+          <Grid item xs={12}>
+            <Typography>{curriculum.curriculumDescription}</Typography>
+          </Grid>
+          {/* <Grid item xs={12}>
+            <Grid container spacing={1}>
+              <Grid item xs={6}>
+                <List sx={{ p: 0, overflow: 'hidden', '& .MuiListItem-root': { px: 0, py: 0.5 } }}>
+                  <ListItem>
+                    <ListItemIcon>
+                      <MailOutlined />
+                    </ListItemIcon>
+                    <ListItemText primary={<Typography color="secondary">{customer.email}</Typography>} />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemIcon>
+                      <PhoneOutlined />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={
+                        <Typography color="secondary">
+                          <PatternFormat displayType="text" format="+1 (###) ###-####" mask="_" defaultValue={customer.contact} />
+                        </Typography>
+                      }
+                    />
+                  </ListItem>
+                </List>
+              </Grid>
+              <Grid item xs={6}>
+                <List sx={{ p: 0, overflow: 'hidden', '& .MuiListItem-root': { px: 0, py: 0.5 } }}>
+                  <ListItem>
+                    <ListItemIcon>
+                      <EnvironmentOutlined />
+                    </ListItemIcon>
+                    <ListItemText primary={<Typography color="secondary">{customer.country}</Typography>} />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemIcon>
+                      <LinkOutlined />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={
+                        <Link href="https://google.com" target="_blank" sx={{ textTransform: 'lowercase' }}>
+                          https://{customer.firstName}.en
+                        </Link>
+                      }
+                    />
+                  </ListItem>
+                </List>
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item xs={12}>
+            <Box>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  listStyle: 'none',
+                  p: 0.5,
+                  m: 0
+                }}
+                component="ul"
+              >
+                {customer.skills.map((skill: string, index: number) => (
+                  <ListItem disablePadding key={index} sx={{ width: 'auto', pr: 0.75, pb: 0.75 }}>
+                    <Chip color="secondary" variant="outlined" size="small" label={skill} />
+                  </ListItem>
+                ))}
+              </Box>
+            </Box>
+          </Grid> */}
+        </Grid>
+        <Stack
+          direction="row"
+          className="hideforPDf"
+          alignItems="center"
+          spacing={1}
+          justifyContent="space-between"
+          sx={{ mt: 'auto', mb: 0, pt: 2.25 }}
+        >
+          <Typography variant="caption" color="secondary">
+            Updated in {curriculum.createdAt?.toLocaleTimeString()}
+          </Typography>
+          <Button variant="outlined" size="small" onClick={() => {
+            // handleClickOpen()
+          }}>
+            Preview
+          </Button>
+        </Stack>
+      </MainCard>
+
+      {/* edit customer dialog */}
+      {/* <CustomerPreview customer={customer} open={open} onClose={handleClose} />  */}
+    </>
+  );
+};
+
+export default CurriculumCard;

Project/Frontend/SignConnectPlus/src/sections/learning-management/learning-curriculums/skeleton/CurriculumCard.tsx

+// material-ui
+import { CardContent, Grid, Skeleton, Stack, Avatar } from '@mui/material';
+
+// project import
+import MainCard from 'components/MainCard';
+
+// assets
+import { ContactsOutlined } from '@ant-design/icons';
+
+// ===========================|| SKELETON - USER EMPTY CARD ||=========================== //
+
+const UserCard = () => {
+  return (
+    <MainCard
+      border={false}
+      content={false}
+      boxShadow
+      sx={{ boxShadow: `rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px`, borderRadius: 2 }}
+    >
+      <CardContent sx={{ p: 2 }}>
+        <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <Stack flexDirection="row" alignItems="center">
+              <Avatar>
+                <ContactsOutlined style={{ visibility: 'inherit' }} />
+              </Avatar>
+              <Stack sx={{ width: '100%', pl: 2.5 }}>
+                <Skeleton animation={false} height={20} width="80%" />
+                <Skeleton animation={false} height={20} width="40%" />
+              </Stack>
+            </Stack>
+          </Grid>
+          <Grid item xs={12}>
+            <Skeleton animation={false} height={20} width={45} />
+            <Skeleton animation={false} height={20} />
+            <Stack direction="row" alignItems="center" spacing={1}>
+              <Skeleton animation={false} height={20} width={90} />
+              <Skeleton animation={false} height={20} width={38} />
+            </Stack>
+          </Grid>
+          <Grid item xs={12}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Grid container spacing={1}>
+                <Grid item>
+                  <Skeleton animation={false} height={20} width={40} />
+                </Grid>
+                <Grid item>
+                  <Skeleton animation={false} height={17} width={20} />
+                </Grid>
+              </Grid>
+              <Skeleton animation={false} height={32} width={47} />
+            </Stack>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </MainCard>
+  );
+};
+
+export default UserCard;

Project/Frontend/SignConnectPlus/src/sections/learning-management/learning-curriculums/skeleton/EmptyCurriculumCard.tsx

+// material-ui
+import { Box, Grid, Stack, Typography } from '@mui/material';
+
+// project import
+import CurriculumCard from './CurriculumCard';
+
+interface Props {
+  title: string;
+}
+
+// ==============================|| EMPTY STATE ||============================== //
+
+const EmptyCurriculumCard = ({ title }: Props) => {
+  return (
+    <Grid container spacing={3}>
+      <Grid item xs={12}>
+        <Box
+          sx={{
+            p: { xs: 2.5, sm: 6 },
+            height: `calc(100vh - 192px)`,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            bgcolor: 'transparent'
+          }}
+        >
+          <Grid container direction="column" justifyContent="center" alignItems="center">
+            <Grid item>
+              <Box sx={{ ml: -9, mb: { xs: -8, sm: -5 } }}>
+                <Box sx={{ position: 'relative' }}>
+                  <CurriculumCard />
+                </Box>
+                <Box sx={{ position: 'relative', top: -120, left: 72 }}>
+                  <CurriculumCard />
+                </Box>
+              </Box>
+            </Grid>
+            <Grid item>
+              <Stack spacing={1}>
+                <Typography align="center" variant="h4">
+                  {title}
+                </Typography>
+              </Stack>
+            </Grid>
+          </Grid>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default EmptyCurriculumCard;

Project/Frontend/SignConnectPlus/src/sections/parameters/curriculum-management/AddEditCurriculum.tsx

@@ -62,15 +62,15 @@ const getInitialValues = (curriculum: FormikValues | null) => {
 export interface Props {
     curriculum?: {
         _id: number | string | undefined;
-        curriculumCode: String;
+        curriculumCode: string;
         curriculumLevel: number;
-        curriculumTitle: String;
-        curriculumDescription: String;
-        curriculumImage: String;
+        curriculumTitle: string;
+        curriculumDescription: string;
+        curriculumImage: string;
         tutorials: string[];
-        status: Number;
-        createdBy: String;
-        updatedBy: String;
+        status: number;
+        createdBy: string;
+        updatedBy: string;
         createdAt: Date;
         updatedAt: Date;
     };

Project/Frontend/SignConnectPlus/src/sections/parameters/tutorial-management/AddEditTutorial.tsx

@@ -69,13 +69,13 @@ const getInitialValues = (tutorial: FormikValues | null) => {
 export interface Props {
     tutorial?: {
         _id: number | string | undefined
-        tutorialCode: String;
-        tutorialTitle: String;
-        tutorialDescription: String;
-        tutorialImage: String;
-        status: Number;
-        createdBy: String;
-        updatedBy: String;
+        tutorialCode: string;
+        tutorialTitle: string;
+        tutorialDescription: string;
+        tutorialImage: string;
+        status: number;
+        createdBy: string;
+        updatedBy: string;
         createdAt: Date;
         updatedAt: Date;
         taskItems: taskItemProps[]
@@ -85,11 +85,11 @@ export interface Props {
 
 export interface taskItemProps {
     _id: number | string | undefined;
-    title: String;
-    description: String;
-    howToDo: String;
-    referenceImage: String;
-    referenceVideo: String;
+    title: string;
+    description: string;
+    howToDo: string;
+    referenceImage: string;
+    referenceVideo: string;
 }
 
 const AddEditTutorial = ({ tutorial, onCancel }: Props) => {