Merge branch 'feature/UI-API-Connect' into 'master'

Feature/ui api connect

See merge request !14

Project/Backend/Server_Node/controllers/curriculum.controller.js

@@ -2,22 +2,25 @@ import Curriculum from '../models/curriculum.model.js';
 
 export const getAllCurriculums = async (req, res) => {
     try {
-        const curriculums = await Curriculum.find();
+        const curriculums = await Curriculum.find().populate("tutorials");
         res.status(200).json(curriculums);
     } catch (error) {
         res.status(500).json({ message: error.message });
     }
-}
+};
 
 export const getCurriculumById = async (req, res) => {
     const { id } = req.params;
     try {
-        const curriculum = await Curriculum.findById(id);
+        const curriculum = await Curriculum.findById(id).populate("tutorials");
+        if (!curriculum) {
+            return res.status(404).json({ message: 'Curriculum not found' });
+        }
         res.status(200).json(curriculum);
     } catch (error) {
-        res.status(404).json({ message: 'Curriculum not found' });
+        res.status(500).json({ message: error.message });
     }
-}
+};
 
 export const createCurriculum = async (req, res) => {
     const curriculumData = req.body;

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/Backend/Server_Node/models/curriculum.model.js

 import mongoose from "mongoose";
 
-const tutorialSchema = new mongoose.Schema({
-    tutorialCode: String,
-    tutorialTitle: String,
-    tutorialImage: String,
-    // Additional fields for tutorial content
-});
-
-const curriculumSchema = new mongoose.Schema({
-    curriculumCode: String,
-    curriculumLevel: String,
-    curriculumName: String,
-    curriculumImage: String,
-    tutorials: [tutorialSchema], // Embed tutorials as subdocuments
-    // Additional fields for curriculum details
-    status: {
-        type: Number,
-        default: 1, // Default status as active (1)
-    },
+const commonFields = {
     createdBy: String,
     updatedBy: String,
     createdAt: {
@@ -28,6 +11,27 @@ const curriculumSchema = new mongoose.Schema({
         type: Date,
         default: new Date(),
     },
+}; 
+ 
+const curriculumSchema = new mongoose.Schema({ 
+    curriculumCode: {
+        type: String,
+        unique: true, // Ensures unique values for curriculumCode
+    },
+    curriculumLevel: String,
+    curriculumTitle: String,
+    curriculumDescription: String,
+    curriculumImage: String,
+    tutorials: [{
+        type: mongoose.Schema.Types.ObjectId,
+        ref: "Tutorial",
+    }],
+    // Additional fields for curriculum details
+    status: {
+        type: Number,
+        default: 1, // Default status as active (1)
+    },
+    ...commonFields
 });
 
 const Curriculum = mongoose.model("Curriculum", curriculumSchema);

Project/Backend/Server_Node/models/tutorial.model.js

 import mongoose from "mongoose";
 
+const commonFields = {
+    createdBy: String,
+    updatedBy: String,
+    createdAt: {
+        type: Date,
+        default: new Date(),
+    },
+    updatedAt: {
+        type: Date,
+        default: new Date(),
+    },
+};
+
 const taskItemSchema = new mongoose.Schema({
     title: String,
     description: String,
@@ -10,8 +23,12 @@ const taskItemSchema = new mongoose.Schema({
 });
 
 const tutorialSchema = new mongoose.Schema({
-    tutorialCode: String,
+    tutorialCode: {
+        type: String,
+        unique: true, // Ensures unique values for tutorialCode
+    },
     tutorialTitle: String,
+    tutorialDescription: String,
     tutorialImage: String,
     taskItems: [taskItemSchema], // Embed task items as subdocuments
     // Additional fields for tutorial details
@@ -19,16 +36,7 @@ const tutorialSchema = new mongoose.Schema({
         type: Number,
         default: 1, // Default status as active (1)
     },
-    createdBy: String,
-    updatedBy: String,
-    createdAt: {
-        type: Date,
-        default: new Date(),
-    },
-    updatedAt: {
-        type: Date,
-        default: new Date(),
-    },
+    ...commonFields
 });
 
 const Tutorial = mongoose.model("Tutorial", tutorialSchema);

Project/Frontend/SignConnectPlus/src/data/curriculumLevels.ts

+export interface CurriculumLevelsType {
+    id: number
+    code: string
+    description: string
+}
+
+// ==============================|| DATA - CURRICULUM LEVELS ||============================== //
+
+const curriculumLevels: readonly CurriculumLevelsType[] = [
+    { id: 1, code: "Level 1", description: "Preliminary" },
+    { id: 2, code: "Level 2", description: "Intermediate" },
+    { id: 3, code: "Level 3", description: "Advance" },
+];
+
+export default curriculumLevels;

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/list.tsx

@@ -157,7 +157,7 @@ const List = () => {
                 }, 
                 {
                     Header: 'Curriculum Name',
-                    accessor: 'curriculumName'
+                    accessor: 'curriculumTitle'
                 }, 
                 {
                     Header: 'Status',

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;
-    curriculumLevel: String;
-    curriculumName: String;
-    curriculumImage: String;
+    curriculumCode: string;
+    curriculumLevel: number;
+    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,26 +23,28 @@ export interface ReactTableProps {
 
 export interface curriculumProps {
     _id: number | string | undefined;
-    curriculumCode: String;
-    curriculumLevel: String;
-    curriculumName: String;
-    curriculumImage: String;
-    tutorials: tutorialItemProps[];
-    status: Number;
-    createdBy: String;
-    updatedBy: String;
+    curriculumCode: string;
+    curriculumLevel: number;
+    curriculumTitle: string;
+    curriculumDescription: string;
+    curriculumImage: string;
+    tutorials: string[];
+    status: number;
+    createdBy: string;
+    updatedBy: string;
     createdAt: Date;
     updatedAt: Date;
 }
 
 export interface tutorialItemProps {
     _id: number | string | undefined;
-    tutorialCode: String;
-    tutorialTitle: 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[]
@@ -49,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/list.tsx

@@ -152,7 +152,7 @@ const List = () => {
                     accessor: 'tutorialCode'
                 },
                 {
-                    Header: 'Tutorial Title',
+                    Header: 'Tutorial Name',
                     accessor: 'tutorialTitle'
                 },
                 {

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

@@ -2,12 +2,13 @@ import { Column } from 'react-table';
 
 export interface dataProps {
     _id: number | string | undefined;
-    tutorialCode: String;
-    tutorialTitle: 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[]
@@ -21,12 +22,13 @@ export interface ReactTableProps {
 
 export interface tutorialProps {
     _id: number | string | undefined;
-    tutorialCode: String;
-    tutorialTitle: 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[]
@@ -34,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;