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

Feature/ui api connect

See merge request !18

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

 import Curriculum from '../models/curriculum.model.js';
+import Tutorial from '../models/tutorial.model.js';
 
 export const getAllCurriculums = async (req, res) => {
     try {
@@ -26,17 +27,39 @@ export const createCurriculum = async (req, res) => {
     const curriculumData = req.body;
     try {
         const newCurriculum = new Curriculum(curriculumData);
+
+        // Calculate total tutorial mark
+        let totalTutorialMark = 0;
+        for (const tutorialId of curriculumData.tutorials) {
+            const tutorial = await Tutorial.findById(tutorialId);
+            totalTutorialMark += tutorial.tutorialMarks;
+        }
+
+        newCurriculum.curriculumMark = totalTutorialMark;
         await newCurriculum.save();
+
         res.status(201).json(newCurriculum);
     } catch (error) {
         res.status(400).json({ message: error.message });
     }
 }
 
+
 export const updateCurriculum = async (req, res) => {
     const { id } = req.params;
     const updatedCurriculum = req.body;
     try {
+        const curriculum = await Curriculum.findById(id);
+
+        // Calculate total tutorial mark
+        let totalTutorialMark = 0;
+        for (const tutorialId of updatedCurriculum.tutorials) {
+            const tutorial = await Tutorial.findById(tutorialId);
+            totalTutorialMark += tutorial.tutorialMarks;
+        }
+
+        updatedCurriculum.curriculumMark = totalTutorialMark;
+
         const result = await Curriculum.findByIdAndUpdate(id, updatedCurriculum, { new: true });
         res.status(200).json(result);
     } catch (error) {

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

 import { exec } from "child_process";
+import multer from "multer"
 
 export const marksCalculator = async (req, res) => {
     const imageData = req.file.buffer.toString('base64');

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

@@ -21,6 +21,11 @@ export const getTutorialById = async (req, res) => {
 
 export const createTutorial = async (req, res) => {
     const tutorialData = req.body;
+    
+    // Calculate total tutorial marks based on task item marks
+    const totalTaskMarks = tutorialData.taskItems.reduce((total, task) => total + (task.taskItemMark || 0), 0);
+    tutorialData.tutorialMarks = totalTaskMarks;
+    
     try {
         const newTutorial = new Tutorial(tutorialData);
         await newTutorial.save();
@@ -32,9 +37,14 @@ export const createTutorial = async (req, res) => {
 
 export const updateTutorial = async (req, res) => {
     const { id } = req.params;
-    const updatedTutorial = req.body;
+    const updatedTutorialData = req.body;
+    
+    // Calculate total tutorial marks based on updated task item marks
+    const totalTaskMarks = updatedTutorialData.taskItems.reduce((total, task) => total + (task.taskItemMark || 0), 0);
+    updatedTutorialData.tutorialMarks = totalTaskMarks;
+    
     try {
-        const result = await Tutorial.findByIdAndUpdate(id, updatedTutorial, { new: true });
+        const result = await Tutorial.findByIdAndUpdate(id, updatedTutorialData, { new: true });
         res.status(200).json(result);
     } catch (error) {
         res.status(404).json({ message: 'Tutorial not found' });

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

-import UserProgress from '../models/userProgress.model.js';
+import UserProgress from "../models/userProgress.model.js";
 
-export const getUserProgress = async (req, res) => {
-    const userId = req.params.userId;
+// Logic to subscribe to a curriculum for a user
+export const subscribeCurriculum = async (req, res) => {
+    const { userId, curriculum } = req.body;
 
     try {
-        const userProgress = await UserProgress.findOne({ userId }).populate('curriculumId tutorialProgress.tutorialId');
-        res.status(200).json(userProgress);
+        let userProgress = await UserProgress.findOne({ userId });
+
+        if (!userProgress) {
+            // If there is no user progress record for this user, create a new one
+            userProgress = new UserProgress({
+                userId,
+                curriculums: [curriculum], // Add the curriculum to the curriculums array
+            });
+        } else {
+            // If there is an existing user progress record, check if the curriculum already exists
+            const existingCurriculumIndex = userProgress.curriculums.findIndex(c => c.curriculumCode === curriculum.curriculumCode);
+
+            if (existingCurriculumIndex !== -1) {
+                // If the curriculum exists, update it
+                userProgress.curriculums[existingCurriculumIndex] = curriculum;
+            } else {
+                // If the curriculum doesn't exist, add it to the array
+                userProgress.curriculums.push(curriculum);
+            }
+        }
+
+        // Update the totalCurriculumsMarks based on curriculum marks
+        const totalCurriculumsMarks = userProgress.curriculums.reduce((total, curriculum) => total + curriculum.curriculumMark, 0);
+        userProgress.totalCurriculumsMarks = totalCurriculumsMarks;
+
+        // Save the user progress record
+        await userProgress.save();
+
+        res.status(200).json({ message: 'Curriculum subscription successful' });
     } catch (error) {
-        res.status(500).json({ message: error.message });
+        console.error(error);
+        res.status(500).json({ error: 'Internal server error' });
     }
-}
+};
 
-export const updateUserProgress = async (req, res) => {
+// Get user's curriculum subscriptions and progress
+export const getUserProgress = async (req, res) => {
     const userId = req.params.userId;
-    const { curriculumId, tutorialId, completed, marks } = req.body;
 
     try {
-        let userProgress = await UserProgress.findOne({ userId });
+        const userProgress = await UserProgress.findOne({ userId });
 
         if (!userProgress) {
-            userProgress = new UserProgress({ userId });
+            return res.status(404).json({ message: 'User progress not found' });
+        }
+
+        res.status(200).json({ userProgress });
+    } catch (error) {
+        console.error(error);
+        res.status(500).json({ error: 'Internal server error' });
     }
+};
 
-        const curriculumProgress = userProgress.curriculumId.find(prog => prog.curriculumId.equals(curriculumId));
+// Update task item progress and calculate overall progress
+export const updateTaskItemProgress = async (req, res) => {
+    const { userId, curriculumCode, tutorialCode, taskItemTitle, taskItemMarkUser, taskItemSpentTime } = req.body;
 
-        if (!curriculumProgress) {
-            userProgress.curriculumId.push({ curriculumId });
+    try {
+        const userProgress = await UserProgress.findOne({ userId });
+
+        if (!userProgress) {
+            return res.status(404).json({ message: 'User progress not found' });
         }
 
-        const tutorialProgress = curriculumProgress.tutorialProgress.find(prog => prog.tutorialId.equals(tutorialId));
+        // Find the curriculum, tutorial, and task item to update
+        const curriculumIndex = userProgress.curriculums.findIndex(c => c.curriculumCode === curriculumCode);
+        if (curriculumIndex === -1) {
+            return res.status(404).json({ message: 'Curriculum not found' });
+        }
 
-        if (!tutorialProgress) {
-            curriculumProgress.tutorialProgress.push({ tutorialId, completed });
-        } else {
-            tutorialProgress.completed = completed;
+        const tutorialIndex = userProgress.curriculums[curriculumIndex].tutorials.findIndex(t => t.tutorialCode === tutorialCode);
+        if (tutorialIndex === -1) {
+            return res.status(404).json({ message: 'Tutorial not found' });
+        }
+
+        const taskItemIndex = userProgress.curriculums[curriculumIndex].tutorials[tutorialIndex].taskItems.findIndex(item => item.title === taskItemTitle);
+        if (taskItemIndex === -1) {
+            return res.status(404).json({ message: 'Task item not found' });
         }
 
-        userProgress.marks = marks;
+        // Update task item progress
+        userProgress.curriculums[curriculumIndex].tutorials[tutorialIndex].taskItems[taskItemIndex].taskItemMarkUser = taskItemMarkUser;
+        userProgress.curriculums[curriculumIndex].tutorials[tutorialIndex].taskItems[taskItemIndex].taskItemSpentTime = taskItemSpentTime;
+
+        // Calculate total task marks and spent time for the tutorial
+        const tutorial = userProgress.curriculums[curriculumIndex].tutorials[tutorialIndex];
+        tutorial.tutorialMarkUser = tutorial.taskItems.reduce((total, item) => total + item.taskItemMarkUser, 0);
+        tutorial.tutorialSpentTime = tutorial.taskItems.reduce((total, item) => total + item.taskItemSpentTime, 0);
 
+        // Calculate total tutorial marks and spent time for the curriculum
+        const curriculum = userProgress.curriculums[curriculumIndex];
+        curriculum.curriculumMarkUser = curriculum.tutorials.reduce((total, t) => total + t.tutorialMarkUser, 0);
+        curriculum.curriculumSpentTime = curriculum.tutorials.reduce((total, t) => total + t.tutorialSpentTime, 0);
+
+        // Calculate total curriculum marks and spent time for the user
+        userProgress.totalCurriculumsMarks = userProgress.curriculums.reduce((total, c) => total + c.curriculumMarkUser, 0);
+        userProgress.totalCurriculumSpentTime = userProgress.curriculums.reduce((total, c) => total + c.curriculumSpentTime, 0);
+
+        // Save the updated user progress
         await userProgress.save();
-        res.status(200).json(userProgress);
+
+        res.status(200).json({ message: 'Task item progress updated successfully' });
     } catch (error) {
-        res.status(500).json({ message: error.message });
+        console.error(error);
+        res.status(500).json({ error: 'Internal server error' });
     }
-}
+};

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

@@ -18,10 +18,14 @@ const curriculumSchema = new mongoose.Schema({
         type: String,
         unique: true, // Ensures unique values for curriculumCode
     },
-    curriculumLevel: String,
+    curriculumLevel: Number,
     curriculumTitle: String,
     curriculumDescription: String,
     curriculumImage: String,
+    curriculumMark: {
+        type: Number,
+        default: 0
+    },
     tutorials: [{
         type: mongoose.Schema.Types.ObjectId,
         ref: "Tutorial",

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

@@ -19,6 +19,10 @@ const taskItemSchema = new mongoose.Schema({
     howToDo: String,
     referenceImage: String,
     referenceVideo: String,
+    taskItemMark : {
+        type: Number,
+        default: 0
+    }
     // Additional fields for task items
 });
 
@@ -30,6 +34,10 @@ const tutorialSchema = new mongoose.Schema({
     tutorialTitle: String,
     tutorialDescription: String,
     tutorialImage: String,
+    tutorialMarks: {
+        type: Number,
+        default: 0
+    },
     taskItems: [taskItemSchema], // Embed task items as subdocuments
     // Additional fields for tutorial details
     status: {

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

 import mongoose from "mongoose";
 
-const userProgressSchema = new mongoose.Schema({
-    userId: {
-        type: mongoose.Schema.Types.ObjectId,
+const taskItemSchema = new mongoose.Schema({
+    title: {
+        type: String,
         required: true,
-        ref: 'User' // Reference to the User model
     },
-    curriculumId: {
-        type: mongoose.Schema.Types.ObjectId,
+    description: {
+        type: String,
         required: true,
-        ref: 'Curriculum' // Reference to the Curriculum model
     },
-    tutorialProgress: [
-        {
-            tutorialId: {
+    howToDo: [String],
+    referenceImage: String,
+    referenceVideo: String,
+    taskItemMark: {
+        type: Number,
+        default: 0
+    },
+    taskItemMarkUser: {
+        type: Number,
+        default: 0
+    },
+    taskItemSpentTime: {
+        type: Number,
+        default: 0
+    },
+}, { _id: false });
+
+const tutorialTypeUserProgressSchema = new mongoose.Schema({
+    tutorialCode: String,
+    tutorialTitle: String,
+    tutorialDescription: String,
+    tutorialImage: String,
+    tutorialMark: {
+        type: Number,
+        default: 0
+    },
+    tutorialMarkUser: {
+        type: Number,
+        default: 0
+    },
+    tutorialSpentTime: {
+        type: Number,
+        default: 0
+    },
+    taskItems: [taskItemSchema],
+}, { _id: false });
+
+const curriculumTypeUserProgressSchema = new mongoose.Schema({
+    curriculumCode: String,
+    curriculumLevel: Number,
+    curriculumTitle: String,
+    curriculumDescription: String,
+    curriculumImage: String,
+    curriculumMark: {
+        type: Number,
+        default: 0
+    },
+    curriculumMarkUser: {
+        type: Number,
+        default: 0
+    },
+    curriculumSpentTime: {
+        type: Number,
+        default: 0
+    },
+    tutorials: [tutorialTypeUserProgressSchema],
+}, { _id: false });
+
+const userProgressSchema = new mongoose.Schema({
+    userId: {
         type: mongoose.Schema.Types.ObjectId,
-                ref: 'Tutorial' // Reference to the Tutorial model
+        required: true,
+        ref: 'User'
+    },
+    curriculums: [curriculumTypeUserProgressSchema],
+    totalCurriculumsMarks: {
+        type: Number,
+        default: 0
     },
-            completed: {
-                type: Boolean,
-                default: false
-            }
-        }
-    ],
-    marks: {
+    totalCurriculumSpentTime: {
         type: Number,
         default: 0
-    }
+    },
+    status: {
+        type: Number,
+        default: 1,
+    },
+    createdBy: String,
+    createdAt: {
+        type: Date,
+        default: new Date(),
+    },
+    updatedBy: String,
+    updatedAt: {
+        type: Date,
+        default: new Date(),
+    },
 });
 
 const UserProgress = mongoose.model("UserProgress", userProgressSchema);

Project/Backend/Server_Node/routes/userProgress.routes.js

 import express from "express";
-import { getUserProgress, updateUserProgress } from "../controllers/userProgress.controller.js";
+import { getUserProgress, subscribeCurriculum, updateTaskItemProgress } from "../controllers/userProgress.controller.js";
 
 const router = express.Router();
 
+router.post('/subscribe-curriculum', subscribeCurriculum);
 router.get('/:userId', getUserProgress);
-router.post('/:userId', updateUserProgress);
+router.put('/update-task-item-progress', updateTaskItemProgress);
 
 export default router;

Project/Backend/Server_Node/yarn.lock

@@ -503,6 +503,11 @@ isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
 
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
 jsonwebtoken@^9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-9.0.1.tgz#81d8c901c112c24e497a55daf6b2be1225b40145"
@@ -540,6 +545,13 @@ lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -750,6 +762,15 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
+prop-types@^15.5.10:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -800,6 +821,24 @@ raw-body@2.5.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-ga@^2.2.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.7.0.tgz#24328f157f31e8cffbf4de74a3396536679d8d7c"
+  integrity sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==
+
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-mic@^12.4.6:
+  version "12.4.6"
+  resolved "https://registry.yarnpkg.com/react-mic/-/react-mic-12.4.6.tgz#e66ca4e1074ebfd26f6972f26ba2d99d85fd3bc2"
+  integrity sha512-2/DZoz7thR2nJyekF10zBvs/7a8HhUQ4L8MV6BpC+Q/T8G1MvpRHGSHjSlVtnbzaCMDJ3R1MdThoLu15WuVh/g==
+  dependencies:
+    prop-types "^15.5.10"
+    react-ga "^2.2.0"
+
 readable-stream@^2.2.2:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"

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

+import { curriculumType } from "types/curriculum";
+
+export const curriculums: curriculumType[] = [
+    {
+        "curriculumCode": "01",
+        "curriculumLevel": 1,
+        "curriculumDescription": "This curriculum teaches basic sign language skills to help beginners communicate effectively using sign language.",
+        "curriculumTitle": "Basic Sign Language Skills",
+        "curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
+        "_id": "1",
+        "status": 1,
+        "createdBy": "Nuwan Gamage",
+        "createdAt": new Date("2023-08-30T12:00:00Z"),
+        "curriculumMark": 100,
+        "tutorials": [
+            {
+                "tutorialCode": "01",
+                "tutorialTitle": "Numbers and Counting",
+                "tutorialDescription": "In this tutorial, you'll discover how to express numbers visually using simple hand gestures. Each number has a unique sign that involves specific finger placements and hand movements. We'll break down each number step by step, providing you with clear instructions, images, and videos to help you learn effectively.",
+                "tutorialImage": "https://drive.google.com/uc?export=view&id=1GeFzoy3xt8UnfCQE3IPVjPXoAg7GAWgf",
+                "_id": "1",
+                "status": 1,
+                "createdBy": "Nuwan Gamage",
+                "createdAt": new Date("2023-08-30T12:00:00Z"),
+                "tutorialMark": 100,
+                "taskItems": [
+                    {
+                        "_id": "1",
+                        "title": "Learn Number One",
+                        "description": "In this lesson, you will learn how to sign the number one. Understanding this basic sign is crucial for counting and expressing singular items or concepts in sign language. Practice the hand shape, movement, and facial expression associated with the sign to improve your fluency.",
+                        "howToDo": [
+                            "- Extend your index finger straight up.",
+                            "- Keep the rest of your fingers closed.",
+                            "- Hold your hand in front of your chest."
+                        ],
+                        "referenceImage": "https://drive.google.com/uc?export=view&id=17sHGfW9zip8xAwbRtUihzxkseKq-Qn7q",
+                        "referenceVideo": "https://example.com/number_seven_video.mp4",
+                        "taskItemMark": 10
+                    },
+                    {
+                        "_id": "2",
+                        "title": "Learn Number Two",
+                        "description": "In this lesson, you will learn how to sign the number two. Mastering this sign is essential for counting and expressing pairs or dual concepts in sign language. Pay attention to the hand shape, movement, and facial expression involved in signing the number two to enhance your signing skills.",
+                        "howToDo": [
+                            "- Extend your index and middle fingers straight up.",
+                            "- Keep the rest of your fingers closed.",
+                            "- Hold your hand in front of your chest."],
+                        "referenceImage": "https://drive.google.com/uc?export=view&id=1Nm-we15Rrr04ovRC1sr-ZVMNHbnALRm2",
+                        "referenceVideo": "https://example.com/number_seven_video.mp4",
+                        "taskItemMark": 10
+                    },
+                    {
+                        "_id": "3",
+                        "title": "Learn Number Three",
+                        "description": "In this lesson, you will learn how to sign the number three in sign language. Mastering this sign is essential for expressing the quantity or position of three items. Pay attention to the hand shape, movement, and facial expression involved in signing the number three to enhance your signing skills.",
+                        "howToDo": [
+                            "- Extend your index, middle, and ring fingers straight up.",
+                            "- Keep the rest of your fingers closed.",
+                            "- Hold your hand in front of your chest."
+                        ],
+                        "referenceImage": "https://drive.google.com/uc?export=view&id=1mKY8D1utbqm8flnNM7DZRKtuPQDXqFSm",
+                        "referenceVideo": "https://example.com/number_seven_video.mp4",
+                        "taskItemMark": 10
+                    },
+                    {
+                        "_id": "4",
+                        "title": "Learn Number Four",
+                        "description": "In this lesson, you will learn how to sign the number four in sign language. This sign is commonly used for counting or indicating the quantity or position of four items. Focus on the hand shape, movement, and expression to accurately convey the number four in sign language.",
+                        "howToDo": [
+                            "- Extend your thumb, index, middle, and ring fingers straight up.",
+                            "- Keep your pinky finger folded.",
+                            "- Hold your hand in front of your chest."
+                        ],
+                        "referenceImage": "https://drive.google.com/uc?export=view&id=1VtbHehsxbOC04fVR6_Ca6HDv6csH17SJ",
+                        "referenceVideo": "https://example.com/number_seven_video.mp4",
+                        "taskItemMark": 10
+
+                    },
+                    {
+                        "_id": "5",
+                        "title": "Learn Number Five",
+                        "description": "In this lesson, you will learn how to sign the number five in sign language. Mastering this sign is crucial for counting, expressing quantities, or representing the concept of five. Practice the hand shape, movement, and facial expression to effectively communicate the number five in sign language.",
+                        "howToDo": [
+                            "- Extend all your fingers straight up.",
+                            "- Keep your thumb resting on the side of your palm.",
+                            "- Hold your hand in front of your chest."
+                        ],
+                        "referenceImage": "https://drive.google.com/uc?export=view&id=1G6qx4dhHTKUPvNag0R3qlDJugNOgcTqM",
+                        "referenceVideo": "https://example.com/number_seven_video.mp4",
+                        "taskItemMark": 10
+                    },
+                    {
+                        "_id": "6",
+                        "title": "Learn Number Six",
+                        "description": "In this lesson, you will learn how to sign the number six in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of six. Pay attention to the hand shape, movement, and expression involved in signing the number six to enhance your signing proficiency.",
+                        "howToDo": [
+                            "- Extend your thumb and pinky finger straight up.",
+                            "- Keep the rest of your fingers closed.",
+                            "- Hold your hand in front of your chest."
+                        ],
+                        "referenceImage": "https://drive.google.com/uc?export=view&id=1Q2TbcPTx8KuLp4v2mPL_7GHO0l52DZXw",
+                        "referenceVideo": "https://example.com/number_seven_video.mp4",
+                        "taskItemMark": 10
+                    },
+                    {
+                        "_id": "7",
+                        "title": "Learn Number Seven",
+                        "description": "In this lesson, you will learn how to sign the number seven in sign language. Mastering this sign is essential for counting, expressing quantities, or representing the concept of seven. Focus on the hand shape, movement, and facial expression to accurately convey the number seven in sign language.",
+                        "howToDo": [
+                            "- Extend your index, middle, and ring fingers straight up.",
+                            "- Keep your thumb, pinky, and pinky finger folded.",
+                            "- Hold your hand in front of your chest."
+                        ],
+                        "referenceImage": "https://drive.google.com/uc?export=view&id=1Jwt1TqXO1L7t3JFqQYzKL4S4GCuqULJ1",
+                        "referenceVideo": "https://example.com/number_seven_video.mp4",
+                        "taskItemMark": 10
+                    },
+                    {
+                        "_id": "8",
+                        "title": "Learn Number Eight",
+                        "description": "In this lesson, you will learn how to sign the number eight in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of eight. Practice the hand shape, movement, and expression to effectively communicate the number eight in sign language.",
+                        "howToDo": [
+                            "- Extend all your fingers straight up.",
+                            "- Cross your index and middle fingers over your ring and pinky fingers.",
+                            "- Hold your hand in front of your chest."
+                        ],
+                        "referenceImage": "https://drive.google.com/uc?export=view&id=1zSf4hmqIUCcfebgoD6DTWmJ3NxY36LJL",
+                        "referenceVideo": "https://example.com/number_seven_video.mp4",
+                        "taskItemMark": 10
+                    },
+                    {
+                        "_id": "9",
+                        "title": "Learn Number Nine",
+                        "description": "In this lesson, you will learn how to sign the number nine in sign language. Mastering this sign is crucial for counting, expressing quantities, or representing the concept of nine. Pay attention to the hand shape, movement, and expression involved in signing the number nine to enhance your signing proficiency.",
+                        "howToDo": [
+                            "- Extend your thumb and all your fingers straight up.",
+                            "- Keep your pinky finger folded.",
+                            "- Hold your hand in front of your chest."
+                        ],
+                        "referenceImage": "https://drive.google.com/uc?export=view&id=16WB1Ifhq_ozKOO-ehfIqVRB6oC3B5STw",
+                        "referenceVideo": "https://example.com/number_seven_video.mp4",
+                        "taskItemMark": 10
+                    },
+                    {
+                        "_id": "10",
+                        "title": "Learn Number Ten",
+                        "description": "In this lesson, you will learn how to sign the number ten in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of ten. Focus on the hand shape, movement, and facial expression to accurately convey the number ten in sign language.",
+                        "howToDo": [
+                            "- Extend your thumb, index, and middle fingers straight up.",
+                            "- Keep the rest of your fingers closed.",
+                            "- Hold your hand in front of your chest."
+                        ],
+                        "referenceImage": "https://drive.google.com/uc?export=view&id=11tCYFYjdVrr5LIFGyzOrIUg8bTURATZh",
+                        "referenceVideo": "https://example.com/number_seven_video.mp4",
+                        "taskItemMark": 10
+                    }
+                ]
+            },
+            {
+                "tutorialCode": "02",
+                "tutorialTitle": "Everyday Vocabulary",
+                "tutorialDescription": "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.",
+                "tutorialImage": "https://drive.google.com/uc?export=view&id=1QqmeBBiAojz7jaHUUdQGLyqUVR-mKSsy",
+                "taskItems": [],
+                "_id": "2",
+                "status": 1,
+                "createdBy": "Nuwan Gamage",
+                "createdAt": new Date("2023-08-30T12:00:00Z"),
+                "tutorialMark": 0,
+            },
+            {
+                "tutorialCode": "03",
+                "tutorialTitle": "Family Signs",
+                "tutorialDescription": "Teach signs for family members, such as mother, father, sister, brother, etc.\nIntroduce signs for common family-related words, such as family, love, and home.\nProvide visual demonstrations and practice exercises for learners to practice these family signs.",
+                "tutorialImage": "https://drive.google.com/uc?export=view&id=1_b3-0HAAWu5Ze20IAAKWxUSUS-fac6Dg",
+                "taskItems": [],
+                "_id": "3",
+                "status": 1,
+                "createdBy": "Nuwan Gamage",
+                "createdAt": new Date("2023-08-30T12:00:00Z"),
+                "tutorialMark": 0,
+            },
+            {
+                "tutorialCode": "04",
+                "tutorialTitle": "Basic Conversational Phrases",
+                "tutorialDescription": "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.",
+                "tutorialImage": "https://drive.google.com/uc?export=view&id=1McSxkqPb7ZnlsDKfZfTj6OTS5GvXXKFE",
+                "taskItems": [],
+                "_id": "4",
+                "status": 1,
+                "createdBy": "Nuwan Gamage",
+                "createdAt": new Date("2023-08-30T12:00:00Z"),
+                "tutorialMark": 0,
+            }
+        ]
+    },
+    {
+        "curriculumCode": "02",
+        "curriculumLevel": 2,
+        "curriculumTitle": "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=1b5C6VNO55k3Wj6DJ-vJiUFFEuQnXs5Jo",
+        "tutorials": [],
+        "_id": "2",
+        "status": 1,
+        "createdBy": "Nuwan Gamage",
+        "createdAt": new Date("2023-08-30T12:00:00Z"),
+        "curriculumMark": 0,
+    },
+    {
+        "curriculumCode": "03",
+        "curriculumLevel": 3,
+        "curriculumTitle": "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=1k-CtiCkM3efhmTBet-JZt2izxVrAdBL3",
+        "tutorials": [],
+        "_id": "3",
+        "status": 1,
+        "createdBy": "Nuwan Gamage",
+        "createdAt": new Date("2023-08-30T12:00:00Z"),
+        "curriculumMark": 100,
+    }
+]

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

+export interface StatusType {
+    id: number
+    code: string
+    description: string
+}
+
+// ==============================|| DATA - Status ||============================== //
+
+const status: readonly StatusType[] = [ 
+    { id: 1, code: "Active", description: "Active" },
+    { id: 2, code: "New", description: "New" },
+    { id: 3, code: "Pending", description: "Pending" },
+    { id: 4, code: "Hold", description: "Hold" },
+    { id: 5, code: "Rejected", description: "Rejected" },
+];
+
+export default status;

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

+import { taskItemType } from "types/taskItem";
+
+export const taskItems: taskItemType[] = [
+    {
+        "_id": "1",
+        "title": "Learn Number One",
+        "description": "In this lesson, you will learn how to sign the number one. Understanding this basic sign is crucial for counting and expressing singular items or concepts in sign language. Practice the hand shape, movement, and facial expression associated with the sign to improve your fluency.",
+        "howToDo": [
+            "- Extend your index finger straight up.",
+            "- Keep the rest of your fingers closed.",
+            "- Hold your hand in front of your chest."
+        ],
+        "referenceImage": "https://drive.google.com/uc?export=view&id=17sHGfW9zip8xAwbRtUihzxkseKq-Qn7q",
+        "referenceVideo": "https://example.com/number_seven_video.mp4",
+        "taskItemMark": 10
+    },
+    {
+        "_id": "2",
+        "title": "Learn Number Two",
+        "description": "In this lesson, you will learn how to sign the number two. Mastering this sign is essential for counting and expressing pairs or dual concepts in sign language. Pay attention to the hand shape, movement, and facial expression involved in signing the number two to enhance your signing skills.",
+        "howToDo": [
+            "- Extend your index and middle fingers straight up.",
+            "- Keep the rest of your fingers closed.",
+            "- Hold your hand in front of your chest."],
+        "referenceImage": "https://drive.google.com/uc?export=view&id=1Nm-we15Rrr04ovRC1sr-ZVMNHbnALRm2",
+        "referenceVideo": "https://example.com/number_seven_video.mp4",
+        "taskItemMark": 10
+    },
+    {
+        "_id": "3",
+        "title": "Learn Number Three",
+        "description": "In this lesson, you will learn how to sign the number three in sign language. Mastering this sign is essential for expressing the quantity or position of three items. Pay attention to the hand shape, movement, and facial expression involved in signing the number three to enhance your signing skills.",
+        "howToDo": [
+            "- Extend your index, middle, and ring fingers straight up.",
+            "- Keep the rest of your fingers closed.",
+            "- Hold your hand in front of your chest."
+        ],
+        "referenceImage": "https://drive.google.com/uc?export=view&id=1mKY8D1utbqm8flnNM7DZRKtuPQDXqFSm",
+        "referenceVideo": "https://example.com/number_seven_video.mp4",
+        "taskItemMark": 10
+    },
+    {
+        "_id": "4",
+        "title": "Learn Number Four",
+        "description": "In this lesson, you will learn how to sign the number four in sign language. This sign is commonly used for counting or indicating the quantity or position of four items. Focus on the hand shape, movement, and expression to accurately convey the number four in sign language.",
+        "howToDo": [
+            "- Extend your thumb, index, middle, and ring fingers straight up.",
+            "- Keep your pinky finger folded.",
+            "- Hold your hand in front of your chest."
+        ],
+        "referenceImage": "https://drive.google.com/uc?export=view&id=1VtbHehsxbOC04fVR6_Ca6HDv6csH17SJ",
+        "referenceVideo": "https://example.com/number_seven_video.mp4",
+        "taskItemMark": 10
+
+    },
+    {
+        "_id": "5",
+        "title": "Learn Number Five",
+        "description": "In this lesson, you will learn how to sign the number five in sign language. Mastering this sign is crucial for counting, expressing quantities, or representing the concept of five. Practice the hand shape, movement, and facial expression to effectively communicate the number five in sign language.",
+        "howToDo": [
+            "- Extend all your fingers straight up.",
+            "- Keep your thumb resting on the side of your palm.",
+            "- Hold your hand in front of your chest."
+        ],
+        "referenceImage": "https://drive.google.com/uc?export=view&id=1G6qx4dhHTKUPvNag0R3qlDJugNOgcTqM",
+        "referenceVideo": "https://example.com/number_seven_video.mp4",
+        "taskItemMark": 10
+    },
+    {
+        "_id": "6",
+        "title": "Learn Number Six",
+        "description": "In this lesson, you will learn how to sign the number six in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of six. Pay attention to the hand shape, movement, and expression involved in signing the number six to enhance your signing proficiency.",
+        "howToDo": [
+            "- Extend your thumb and pinky finger straight up.",
+            "- Keep the rest of your fingers closed.",
+            "- Hold your hand in front of your chest."
+        ],
+        "referenceImage": "https://drive.google.com/uc?export=view&id=1Q2TbcPTx8KuLp4v2mPL_7GHO0l52DZXw",
+        "referenceVideo": "https://example.com/number_seven_video.mp4",
+        "taskItemMark": 10
+    },
+    {
+        "_id": "7",
+        "title": "Learn Number Seven",
+        "description": "In this lesson, you will learn how to sign the number seven in sign language. Mastering this sign is essential for counting, expressing quantities, or representing the concept of seven. Focus on the hand shape, movement, and facial expression to accurately convey the number seven in sign language.",
+        "howToDo": [
+            "- Extend your index, middle, and ring fingers straight up.",
+            "- Keep your thumb, pinky, and pinky finger folded.",
+            "- Hold your hand in front of your chest."
+        ],
+        "referenceImage": "https://drive.google.com/uc?export=view&id=1Jwt1TqXO1L7t3JFqQYzKL4S4GCuqULJ1",
+        "referenceVideo": "https://example.com/number_seven_video.mp4",
+        "taskItemMark": 10
+    },
+    {
+        "_id": "8",
+        "title": "Learn Number Eight",
+        "description": "In this lesson, you will learn how to sign the number eight in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of eight. Practice the hand shape, movement, and expression to effectively communicate the number eight in sign language.",
+        "howToDo": [
+            "- Extend all your fingers straight up.",
+            "- Cross your index and middle fingers over your ring and pinky fingers.",
+            "- Hold your hand in front of your chest."
+        ],
+        "referenceImage": "https://drive.google.com/uc?export=view&id=1zSf4hmqIUCcfebgoD6DTWmJ3NxY36LJL",
+        "referenceVideo": "https://example.com/number_seven_video.mp4",
+        "taskItemMark": 10
+    },
+    {
+        "_id": "9",
+        "title": "Learn Number Nine",
+        "description": "In this lesson, you will learn how to sign the number nine in sign language. Mastering this sign is crucial for counting, expressing quantities, or representing the concept of nine. Pay attention to the hand shape, movement, and expression involved in signing the number nine to enhance your signing proficiency.",
+        "howToDo": [
+            "- Extend your thumb and all your fingers straight up.",
+            "- Keep your pinky finger folded.",
+            "- Hold your hand in front of your chest."
+        ],
+        "referenceImage": "https://drive.google.com/uc?export=view&id=16WB1Ifhq_ozKOO-ehfIqVRB6oC3B5STw",
+        "referenceVideo": "https://example.com/number_seven_video.mp4",
+        "taskItemMark": 10
+    },
+    {
+        "_id": "10",
+        "title": "Learn Number Ten",
+        "description": "In this lesson, you will learn how to sign the number ten in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of ten. Focus on the hand shape, movement, and facial expression to accurately convey the number ten in sign language.",
+        "howToDo": [
+            "- Extend your thumb, index, and middle fingers straight up.",
+            "- Keep the rest of your fingers closed.",
+            "- Hold your hand in front of your chest."
+        ],
+        "referenceImage": "https://drive.google.com/uc?export=view&id=11tCYFYjdVrr5LIFGyzOrIUg8bTURATZh",
+        "referenceVideo": "https://example.com/number_seven_video.mp4",
+        "taskItemMark": 10
+    }
+]
\ No newline at end of file

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

+import { tutorialType } from "types/tutorial";
+
+export const tutorials: tutorialType[] = [
+    {
+        "tutorialCode": "01",
+        "tutorialTitle": "Numbers and Counting in Sign Language",
+        "tutorialDescription": "In this tutorial, you'll discover how to express numbers visually using simple hand gestures. Each number has a unique sign that involves specific finger placements and hand movements. We'll break down each number step by step, providing you with clear instructions, images, and videos to help you learn effectively.",
+        "tutorialImage": "https://drive.google.com/uc?export=view&id=1GeFzoy3xt8UnfCQE3IPVjPXoAg7GAWgf",
+        "_id": "1",
+        "status": 1,
+        "createdBy": "Nuwan Gamage",
+        "createdAt": new Date("2023-08-30T12:00:00Z"),
+        "tutorialMark": 100,
+        "taskItems": [
+            {
+                "_id": "1",
+                "title": "Learn Number One",
+                "description": "In this lesson, you will learn how to sign the number one. Understanding this basic sign is crucial for counting and expressing singular items or concepts in sign language. Practice the hand shape, movement, and facial expression associated with the sign to improve your fluency.",
+                "howToDo": [
+                    "- Extend your index finger straight up.",
+                    "- Keep the rest of your fingers closed.",
+                    "- Hold your hand in front of your chest."
+                ],
+                "referenceImage": "https://drive.google.com/uc?export=view&id=17sHGfW9zip8xAwbRtUihzxkseKq-Qn7q",
+                "referenceVideo": "https://example.com/number_seven_video.mp4",
+                "taskItemMark": 10
+            },
+            {
+                "_id": "2",
+                "title": "Learn Number Two",
+                "description": "In this lesson, you will learn how to sign the number two. Mastering this sign is essential for counting and expressing pairs or dual concepts in sign language. Pay attention to the hand shape, movement, and facial expression involved in signing the number two to enhance your signing skills.",
+                "howToDo": [
+                    "- Extend your index and middle fingers straight up.",
+                    "- Keep the rest of your fingers closed.",
+                    "- Hold your hand in front of your chest."],
+                "referenceImage": "https://drive.google.com/uc?export=view&id=1Nm-we15Rrr04ovRC1sr-ZVMNHbnALRm2",
+                "referenceVideo": "https://example.com/number_seven_video.mp4",
+                "taskItemMark": 10
+            },
+            {
+                "_id": "3",
+                "title": "Learn Number Three",
+                "description": "In this lesson, you will learn how to sign the number three in sign language. Mastering this sign is essential for expressing the quantity or position of three items. Pay attention to the hand shape, movement, and facial expression involved in signing the number three to enhance your signing skills.",
+                "howToDo": [
+                    "- Extend your index, middle, and ring fingers straight up.",
+                    "- Keep the rest of your fingers closed.",
+                    "- Hold your hand in front of your chest."
+                ],
+                "referenceImage": "https://drive.google.com/uc?export=view&id=1mKY8D1utbqm8flnNM7DZRKtuPQDXqFSm",
+                "referenceVideo": "https://example.com/number_seven_video.mp4",
+                "taskItemMark": 10
+            },
+            {
+                "_id": "4",
+                "title": "Learn Number Four",
+                "description": "In this lesson, you will learn how to sign the number four in sign language. This sign is commonly used for counting or indicating the quantity or position of four items. Focus on the hand shape, movement, and expression to accurately convey the number four in sign language.",
+                "howToDo": [
+                    "- Extend your thumb, index, middle, and ring fingers straight up.",
+                    "- Keep your pinky finger folded.",
+                    "- Hold your hand in front of your chest."
+                ],
+                "referenceImage": "https://drive.google.com/uc?export=view&id=1VtbHehsxbOC04fVR6_Ca6HDv6csH17SJ",
+                "referenceVideo": "https://example.com/number_seven_video.mp4",
+                "taskItemMark": 10
+
+            },
+            {
+                "_id": "5",
+                "title": "Learn Number Five",
+                "description": "In this lesson, you will learn how to sign the number five in sign language. Mastering this sign is crucial for counting, expressing quantities, or representing the concept of five. Practice the hand shape, movement, and facial expression to effectively communicate the number five in sign language.",
+                "howToDo": [
+                    "- Extend all your fingers straight up.",
+                    "- Keep your thumb resting on the side of your palm.",
+                    "- Hold your hand in front of your chest."
+                ],
+                "referenceImage": "https://drive.google.com/uc?export=view&id=1G6qx4dhHTKUPvNag0R3qlDJugNOgcTqM",
+                "referenceVideo": "https://example.com/number_seven_video.mp4",
+                "taskItemMark": 10
+            },
+            {
+                "_id": "6",
+                "title": "Learn Number Six",
+                "description": "In this lesson, you will learn how to sign the number six in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of six. Pay attention to the hand shape, movement, and expression involved in signing the number six to enhance your signing proficiency.",
+                "howToDo": [
+                    "- Extend your thumb and pinky finger straight up.",
+                    "- Keep the rest of your fingers closed.",
+                    "- Hold your hand in front of your chest."
+                ],
+                "referenceImage": "https://drive.google.com/uc?export=view&id=1Q2TbcPTx8KuLp4v2mPL_7GHO0l52DZXw",
+                "referenceVideo": "https://example.com/number_seven_video.mp4",
+                "taskItemMark": 10
+            },
+            {
+                "_id": "7",
+                "title": "Learn Number Seven",
+                "description": "In this lesson, you will learn how to sign the number seven in sign language. Mastering this sign is essential for counting, expressing quantities, or representing the concept of seven. Focus on the hand shape, movement, and facial expression to accurately convey the number seven in sign language.",
+                "howToDo": [
+                    "- Extend your index, middle, and ring fingers straight up.",
+                    "- Keep your thumb, pinky, and pinky finger folded.",
+                    "- Hold your hand in front of your chest."
+                ],
+                "referenceImage": "https://drive.google.com/uc?export=view&id=1Jwt1TqXO1L7t3JFqQYzKL4S4GCuqULJ1",
+                "referenceVideo": "https://example.com/number_seven_video.mp4",
+                "taskItemMark": 10
+            },
+            {
+                "_id": "8",
+                "title": "Learn Number Eight",
+                "description": "In this lesson, you will learn how to sign the number eight in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of eight. Practice the hand shape, movement, and expression to effectively communicate the number eight in sign language.",
+                "howToDo": [
+                    "- Extend all your fingers straight up.",
+                    "- Cross your index and middle fingers over your ring and pinky fingers.",
+                    "- Hold your hand in front of your chest."
+                ],
+                "referenceImage": "https://drive.google.com/uc?export=view&id=1zSf4hmqIUCcfebgoD6DTWmJ3NxY36LJL",
+                "referenceVideo": "https://example.com/number_seven_video.mp4",
+                "taskItemMark": 10
+            },
+            {
+                "_id": "9",
+                "title": "Learn Number Nine",
+                "description": "In this lesson, you will learn how to sign the number nine in sign language. Mastering this sign is crucial for counting, expressing quantities, or representing the concept of nine. Pay attention to the hand shape, movement, and expression involved in signing the number nine to enhance your signing proficiency.",
+                "howToDo": [
+                    "- Extend your thumb and all your fingers straight up.",
+                    "- Keep your pinky finger folded.",
+                    "- Hold your hand in front of your chest."
+                ],
+                "referenceImage": "https://drive.google.com/uc?export=view&id=16WB1Ifhq_ozKOO-ehfIqVRB6oC3B5STw",
+                "referenceVideo": "https://example.com/number_seven_video.mp4",
+                "taskItemMark": 10
+            },
+            {
+                "_id": "10",
+                "title": "Learn Number Ten",
+                "description": "In this lesson, you will learn how to sign the number ten in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of ten. Focus on the hand shape, movement, and facial expression to accurately convey the number ten in sign language.",
+                "howToDo": [
+                    "- Extend your thumb, index, and middle fingers straight up.",
+                    "- Keep the rest of your fingers closed.",
+                    "- Hold your hand in front of your chest."
+                ],
+                "referenceImage": "https://drive.google.com/uc?export=view&id=11tCYFYjdVrr5LIFGyzOrIUg8bTURATZh",
+                "referenceVideo": "https://example.com/number_seven_video.mp4",
+                "taskItemMark": 10
+            }
+        ]
+    },
+    {
+        "tutorialCode": "02",
+        "tutorialTitle": "Everyday Vocabulary in Sign Language",
+        "tutorialDescription": "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.",
+        "tutorialImage": "https://drive.google.com/uc?export=view&id=1QqmeBBiAojz7jaHUUdQGLyqUVR-mKSsy",
+        "taskItems": [],
+        "_id": "2",
+        "status": 1,
+        "createdBy": "Nuwan Gamage",
+        "createdAt": new Date("2023-08-30T12:00:00Z"),
+        "tutorialMark": 0,
+    },
+    {
+        "tutorialCode": "03",
+        "tutorialTitle": "Family Signs in Sign Language",
+        "tutorialDescription": "Teach signs for family members, such as mother, father, sister, brother, etc.\nIntroduce signs for common family-related words, such as family, love, and home.\nProvide visual demonstrations and practice exercises for learners to practice these family signs.",
+        "tutorialImage": "https://drive.google.com/uc?export=view&id=1_b3-0HAAWu5Ze20IAAKWxUSUS-fac6Dg",
+        "taskItems": [],
+        "_id": "3",
+        "status": 1,
+        "createdBy": "Nuwan Gamage",
+        "createdAt": new Date("2023-08-30T12:00:00Z"),
+        "tutorialMark": 0,
+    },
+    {
+        "tutorialCode": "04",
+        "tutorialTitle": "Basic Conversational Phrases in Sign Language",
+        "tutorialDescription": "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.",
+        "tutorialImage": "https://drive.google.com/uc?export=view&id=1McSxkqPb7ZnlsDKfZfTj6OTS5GvXXKFE",
+        "taskItems": [],
+        "_id": "4",
+        "status": 1,
+        "createdBy": "Nuwan Gamage",
+        "createdAt": new Date("2023-08-30T12:00:00Z"),
+        "tutorialMark": 0,
+    }
+] 
\ No newline at end of file

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

+import { userProgressType } from "types/userProgress";
+
+export const userProgress: userProgressType = {
+    "_id": "64f1f99f9a5bff5bfdb1bbc9",
+    "userId": "64f087fda8db35e2f70753ab",
+    "curriculums": [
+        {
+            "curriculumCode": "01",
+            "curriculumLevel": 1,
+            "curriculumTitle": "Basic Sign Language Skills",
+            "curriculumDescription": "This curriculum teaches basic sign language skills to help beginners communicate effectively using sign language.",
+            "curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
+            "curriculumMark": 100,
+            "curriculumMarkUser": 24,
+            "curriculumSpentTime": 15,
+            "tutorials": [
+                {
+                    "tutorialCode": "01",
+                    "tutorialTitle": "Numbers and Counting",
+                    "tutorialDescription": "In this tutorial, you'll discover how to express numbers visually using simple hand gestures. Each number has a unique sign that involves specific finger placements and hand movements. We'll break down each number step by step, providing you with clear instructions, images, and videos to help you learn effectively.",
+                    "tutorialImage": "https://drive.google.com/uc?export=view&id=1GeFzoy3xt8UnfCQE3IPVjPXoAg7GAWgf",
+                    "tutorialMark": 100,
+                    "tutorialMarkUser": 24,
+                    "tutorialSpentTime": 15,
+                    "taskItems": [
+                        {
+                            "title": "Learn Number One",
+                            "description": "In this lesson, you will learn how to sign the number one. Understanding this basic sign is crucial for counting and expressing singular items or concepts in sign language. Practice the hand shape, movement, and facial expression associated with the sign to improve your fluency.",
+                            "howToDo": [
+                                "- Extend your index finger straight up.",
+                                "- Keep the rest of your fingers closed.",
+                                "- Hold your hand in front of your chest."
+                            ],
+                            "referenceImage": "https://drive.google.com/uc?export=view&id=17sHGfW9zip8xAwbRtUihzxkseKq-Qn7q",
+                            "referenceVideo": "https://example.com/number_seven_video.mp4",
+                            "taskItemMark": 10,
+                            "taskItemMarkUser": 8,
+                            "taskItemSpentTime": 5
+                        },
+                        {
+                            "title": "Learn Number Two",
+                            "description": "In this lesson, you will learn how to sign the number two. Mastering this sign is essential for counting and expressing pairs or dual concepts in sign language. Pay attention to the hand shape, movement, and facial expression involved in signing the number two to enhance your signing skills.",
+                            "howToDo": [
+                                "- Extend your index and middle fingers straight up.",
+                                "- Keep the rest of your fingers closed.",
+                                "- Hold your hand in front of your chest."
+                            ],
+                            "referenceImage": "https://drive.google.com/uc?export=view&id=1Nm-we15Rrr04ovRC1sr-ZVMNHbnALRm2",
+                            "referenceVideo": "https://example.com/number_seven_video.mp4",
+                            "taskItemMark": 10,
+                            "taskItemMarkUser": 8,
+                            "taskItemSpentTime": 5
+                        },
+                        {
+                            "title": "Learn Number Three",
+                            "description": "In this lesson, you will learn how to sign the number three in sign language. Mastering this sign is essential for expressing the quantity or position of three items. Pay attention to the hand shape, movement, and facial expression involved in signing the number three to enhance your signing skills.",
+                            "howToDo": [
+                                "- Extend your index, middle, and ring fingers straight up.",
+                                "- Keep the rest of your fingers closed.",
+                                "- Hold your hand in front of your chest."
+                            ],
+                            "referenceImage": "https://drive.google.com/uc?export=view&id=1mKY8D1utbqm8flnNM7DZRKtuPQDXqFSm",
+                            "referenceVideo": "https://example.com/number_seven_video.mp4",
+                            "taskItemMark": 10,
+                            "taskItemMarkUser": 8,
+                            "taskItemSpentTime": 5
+                        },
+                        {
+                            "title": "Learn Number Four",
+                            "description": "In this lesson, you will learn how to sign the number four in sign language. This sign is commonly used for counting or indicating the quantity or position of four items. Focus on the hand shape, movement, and expression to accurately convey the number four in sign language.",
+                            "howToDo": [
+                                "- Extend your thumb, index, middle, and ring fingers straight up.",
+                                "- Keep your pinky finger folded.",
+                                "- Hold your hand in front of your chest."
+                            ],
+                            "referenceImage": "https://drive.google.com/uc?export=view&id=1VtbHehsxbOC04fVR6_Ca6HDv6csH17SJ",
+                            "referenceVideo": "https://example.com/number_seven_video.mp4",
+                            "taskItemMark": 10,
+                            "taskItemMarkUser": 0,
+                            "taskItemSpentTime": 0
+                        },
+                        {
+                            "title": "Learn Number Five",
+                            "description": "In this lesson, you will learn how to sign the number five in sign language. Mastering this sign is crucial for counting, expressing quantities, or representing the concept of five. Practice the hand shape, movement, and facial expression to effectively communicate the number five in sign language.",
+                            "howToDo": [
+                                "- Extend all your fingers straight up.",
+                                "- Keep your thumb resting on the side of your palm.",
+                                "- Hold your hand in front of your chest."
+                            ],
+                            "referenceImage": "https://drive.google.com/uc?export=view&id=1G6qx4dhHTKUPvNag0R3qlDJugNOgcTqM",
+                            "referenceVideo": "https://example.com/number_seven_video.mp4",
+                            "taskItemMark": 10,
+                            "taskItemMarkUser": 0,
+                            "taskItemSpentTime": 0
+                        },
+                        {
+                            "title": "Learn Number Six",
+                            "description": "In this lesson, you will learn how to sign the number six in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of six. Pay attention to the hand shape, movement, and expression involved in signing the number six to enhance your signing proficiency.",
+                            "howToDo": [
+                                "- Extend your thumb and pinky finger straight up.",
+                                "- Keep the rest of your fingers closed.",
+                                "- Hold your hand in front of your chest."
+                            ],
+                            "referenceImage": "https://drive.google.com/uc?export=view&id=1Q2TbcPTx8KuLp4v2mPL_7GHO0l52DZXw",
+                            "referenceVideo": "https://example.com/number_seven_video.mp4",
+                            "taskItemMark": 10,
+                            "taskItemMarkUser": 0,
+                            "taskItemSpentTime": 0
+                        },
+                        {
+                            "title": "Learn Number Seven",
+                            "description": "In this lesson, you will learn how to sign the number seven in sign language. Mastering this sign is essential for counting, expressing quantities, or representing the concept of seven. Focus on the hand shape, movement, and facial expression to accurately convey the number seven in sign language.",
+                            "howToDo": [
+                                "- Extend your index, middle, and ring fingers straight up.",
+                                "- Keep your thumb, pinky, and pinky finger folded.",
+                                "- Hold your hand in front of your chest."
+                            ],
+                            "referenceImage": "https://drive.google.com/uc?export=view&id=1Jwt1TqXO1L7t3JFqQYzKL4S4GCuqULJ1",
+                            "referenceVideo": "https://example.com/number_seven_video.mp4",
+                            "taskItemMark": 10,
+                            "taskItemMarkUser": 0,
+                            "taskItemSpentTime": 0
+                        },
+                        {
+                            "title": "Learn Number Eight",
+                            "description": "In this lesson, you will learn how to sign the number eight in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of eight. Practice the hand shape, movement, and expression to effectively communicate the number eight in sign language.",
+                            "howToDo": [
+                                "- Extend all your fingers straight up.",
+                                "- Cross your index and middle fingers over your ring and pinky fingers.",
+                                "- Hold your hand in front of your chest."
+                            ],
+                            "referenceImage": "https://drive.google.com/uc?export=view&id=1zSf4hmqIUCcfebgoD6DTWmJ3NxY36LJL",
+                            "referenceVideo": "https://example.com/number_seven_video.mp4",
+                            "taskItemMark": 10,
+                            "taskItemMarkUser": 0,
+                            "taskItemSpentTime": 0
+                        },
+                        {
+                            "title": "Learn Number Nine",
+                            "description": "In this lesson, you will learn how to sign the number nine in sign language. Mastering this sign is crucial for counting, expressing quantities, or representing the concept of nine. Pay attention to the hand shape, movement, and expression involved in signing the number nine to enhance your signing proficiency.",
+                            "howToDo": [
+                                "- Extend your thumb and all your fingers straight up.",
+                                "- Keep your pinky finger folded.",
+                                "- Hold your hand in front of your chest."
+                            ],
+                            "referenceImage": "https://drive.google.com/uc?export=view&id=16WB1Ifhq_ozKOO-ehfIqVRB6oC3B5STw",
+                            "referenceVideo": "https://example.com/number_seven_video.mp4",
+                            "taskItemMark": 10,
+                            "taskItemMarkUser": 0,
+                            "taskItemSpentTime": 0
+                        },
+                        {
+                            "title": "Learn Number Ten",
+                            "description": "In this lesson, you will learn how to sign the number ten in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of ten. Focus on the hand shape, movement, and facial expression to accurately convey the number ten in sign language.",
+                            "howToDo": [
+                                "- Extend your thumb, index, and middle fingers straight up.",
+                                "- Keep the rest of your fingers closed.",
+                                "- Hold your hand in front of your chest."
+                            ],
+                            "referenceImage": "https://drive.google.com/uc?export=view&id=11tCYFYjdVrr5LIFGyzOrIUg8bTURATZh",
+                            "referenceVideo": "https://example.com/number_seven_video.mp4",
+                            "taskItemMark": 10,
+                            "taskItemMarkUser": 0,
+                            "taskItemSpentTime": 0
+                        }
+                    ]
+                },
+                {
+                    "tutorialCode": "02",
+                    "tutorialTitle": "Everyday Vocabulary",
+                    "tutorialDescription": "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.",
+                    "tutorialImage": "https://drive.google.com/uc?export=view&id=1QqmeBBiAojz7jaHUUdQGLyqUVR-mKSsy",
+                    "tutorialMark": 0,
+                    "tutorialMarkUser": 0,
+                    "tutorialSpentTime": 0,
+                    "taskItems": []
+                },
+                {
+                    "tutorialCode": "03",
+                    "tutorialTitle": "Family Signs",
+                    "tutorialDescription": "Teach signs for family members, such as mother, father, sister, brother, etc.\nIntroduce signs for common family-related words, such as family, love, and home.\nProvide visual demonstrations and practice exercises for learners to practice these family signs.",
+                    "tutorialImage": "https://drive.google.com/uc?export=view&id=1_b3-0HAAWu5Ze20IAAKWxUSUS-fac6Dg",
+                    "tutorialMark": 0,
+                    "tutorialMarkUser": 0,
+                    "tutorialSpentTime": 0,
+                    "taskItems": []
+                },
+                {
+                    "tutorialCode": "04",
+                    "tutorialTitle": "Basic Conversational Phrases",
+                    "tutorialDescription": "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.",
+                    "tutorialImage": "https://drive.google.com/uc?export=view&id=1McSxkqPb7ZnlsDKfZfTj6OTS5GvXXKFE",
+                    "tutorialMark": 0,
+                    "tutorialMarkUser": 0,
+                    "tutorialSpentTime": 0,
+                    "taskItems": []
+                }
+            ]
+        },
+    ],
+    "totalCurriculumsMarks": 24,
+    "totalCurriculumSpentTime": 15,
+    "status": 1,
+    "createdAt": new Date("2023-08-30T12:00:00Z"),
+    "updatedAt": new Date("2023-08-30T12:00:00Z")
+}
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/layout/MainLayout/Header/HeaderContent/index.tsx

@@ -10,7 +10,7 @@ import Message from './Message';
 import Notification from './Notification';
 import Profile from './Profile';
 import Search from './Search';
-// import Customization from './Customization';
+import Customization from './Customization';
 import MobileSection from './MobileSection';
 // import MegaMenuSection from './MegaMenuSection';
 
@@ -42,7 +42,7 @@ const HeaderContent = () => {
 
       <Notification />
       <Message />
-      {/* <Customization /> */}
+      <Customization />
       {!downLG && <Profile />}
       {downLG && <MobileSection />}
     </>

Project/Frontend/SignConnectPlus/src/menu-items/application.tsx

@@ -136,6 +136,12 @@ const application: NavItemType = {
           title: <FormattedMessage id="learning-curriculums-subscribed" />,
           type: 'item',
           url: '/learning-management/curriculums-subscribed',
+        },
+         {
+          id: 'learning-curriculums-subscribed-tutorial',
+          title: <FormattedMessage id="learning-curriculums-subscribed-tutorial" />,
+          type: 'item',
+          url: '/learning-management/curriculums-subscribed-tutorial',
         },
         {
           id: 'learning-lead-board',

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

+import { useEffect, useState } from 'react';
 
 // material-ui
-
-// third-party
+import {
+    Accordion, AccordionDetails, AccordionSummary,
+    Box,
+    FormControl,
+    Grid,
+    MenuItem,
+    Pagination,
+    Select,
+    SelectChangeEvent,
+    Slide,
+    Stack,
+    Theme,
+    Typography,
+    useMediaQuery
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 
 // project import
-import MainCard from 'components/MainCard';
-import ScrollX from 'components/ScrollX';
+import usePagination from 'hooks/usePagination';
+import { GlobalFilter } from 'utils/react-table';
 
+// types
 
 // assets
-
-//types
-
+import { BookOutlined } from '@ant-design/icons';
+import { userProgress } from 'data/userProgress';
+import CurriculumSection from 'sections/learning-management/learning-curriculums-subscribed/CurriculumSection';
+import EmptyCurriculumCard from 'sections/learning-management/learning-curriculums-subscribed/skeleton/EmptyCurriculumCard';
+import { curriculumTypeUserProgress, userProgressType } from 'types/userProgress';
 
 // ==============================|| List ||============================== //
 
+const allColumns = [
+    {
+        id: 1,
+        header: 'Default'
+    },
+    {
+        id: 2,
+        header: 'Title'
+    }
+];
+
 const List = () => {
+    const theme = useTheme();
+
+    const [data, setData] = useState<userProgressType["curriculums"]>([])
+
+    const matchDownSM = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
+
+    const [curriculumsData, setCurriculumsData] = useState<userProgressType["curriculums"]>([]);
+    const [sortBy, setSortBy] = useState('Default');
+    const [globalFilter, setGlobalFilter] = useState('');
+    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.curriculumTitle.toLowerCase().includes(globalFilter.toLowerCase());
+            } else {
+                return value;
+            }
+        });
+
+        setCurriculumsData(newData);
+    }, [globalFilter, data]);
+
+    const PER_PAGE = 6;
+
+    const count = Math.ceil(curriculumsData?.length! / PER_PAGE);
+    const _DATA = usePagination(curriculumsData, PER_PAGE);
+
+    const handleChangePage = (e: any, p: any) => {
+        setPage(p);
+        _DATA.jump(p);
+    };
+
+    useEffect(() => {
+        setData(userProgress.curriculums)
+    }, [])
+
+    const [expanded, setExpanded] = useState<string | false>('panel0');
+
+    const handleAccordionChange = (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+        setExpanded(newExpanded ? panel : false);
+    };
+
+    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}>
+                {curriculumsData?.length! > 0 ? (
+                    _DATA
+                        .currentData()
+                        .sort(function (a: any, b: any) {
+                            if (sortBy === 'Title') return a.curriculumTitle.localeCompare(b.curriculumTitle);
+                            return a;
+                        })
+                        .map((curriculum: curriculumTypeUserProgress, index: number) => (
+                            <Slide key={index} direction="up" in={true} timeout={50}>
+                                <Grid item xs={12} sm={12} lg={12}>
+                                    <Box
+                                        sx={{
+                                            '& .MuiAccordion-root': {
+                                                borderColor: theme.palette.divider,
+                                                '& .MuiAccordionSummary-root': {
+                                                    bgcolor: 'transparent',
+                                                    flexDirection: 'row',
+                                                    '&:focus-visible': {
+                                                        bgcolor: 'primary.lighter'
+                                                    }
+                                                },
+                                                '& .MuiAccordionDetails-root': {
+                                                    borderColor: theme.palette.divider
+                                                },
+                                                '& .Mui-expanded': {
+                                                    color: theme.palette.primary.main
+                                                }
+                                            }
+                                        }}
+                                    >
+                                        <Accordion expanded={expanded === `panel${index}`} onChange={handleAccordionChange(`panel${index}`)}>
+                                            <AccordionSummary aria-controls={`panel${index}d-content`} id={`panel${index}d-header`}>
+                                                <Stack direction="row" spacing={1.5} alignItems="center">
+                                                    <BookOutlined style={{ fontSize: '26px' }} />
+                                                    <Typography variant="h4">{curriculum.curriculumTitle}</Typography>
+                                                </Stack>
+                                            </AccordionSummary>
+                                            <AccordionDetails>
+                                                <CurriculumSection curriculum={curriculum} />
+                                            </AccordionDetails>
+                                        </Accordion>
+                                    </Box>
+                                </Grid>
+                            </Slide>
+                        ))
+                ) : (
+                    <EmptyCurriculumCard title={'System have no curriculumsData 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-subscribed/tutorial/tutorial.tsx

+import { useEffect, useRef, useState } from "react";
+
+// material-ui
+import { Alert, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, 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 { CheckCircleOutlined, CheckOutlined, ClockCircleOutlined, FileImageOutlined, FileMarkdownFilled, LeftOutlined, PlayCircleOutlined, RightOutlined, TrophyOutlined, UserOutlined, VideoCameraOutlined } from "@ant-design/icons";
+import { PopupTransition } from "components/@extended/Transitions";
+import ReportCard from "components/cards/statistics/ReportCard";
+import { userProgress } from "data/userProgress";
+import { selectedCommonDataProps, selectedItemContentProps } from "./types/types";
+
+import Webcam from 'react-webcam';
+
+// 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 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>(null)
+    const [desc, setDesc] = useState("")
+    const [readMore, setReadMore] = useState(false)
+    const [itemDesc, setItemDesc] = useState("")
+    const [itemReadMore, setItemReadMore] = useState(false)
+    const [itemReferenceData, setItemReferenceData] = useState<"image" | "video">("image")
+
+    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]);
+    }, []);
+
+    useEffect(() => {
+        setDesc(data?.tutorialDescription?.slice(0, 200)!)
+    }, [data])
+
+    useEffect(() => {
+        if (!selectedItemContent?.description) return
+        setItemDesc(selectedItemContent?.description.slice(0, 200)!)
+    }, [selectedItemContent])
+
+    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]);
+
+    //alert model
+    const [openModel, setOpenModel] = useState(false);
+
+    const handleModelClose = () => {
+        setOpenModel(!openModel);
+    };
+
+    // web cam
+    const webcamRef = useRef<Webcam>(null);
+    const [capturedImage, setCapturedImage] = useState<string | null>(null);
+
+    const capture = () => {
+        if (webcamRef.current) {
+            const imageSrc = webcamRef.current.getScreenshot();
+            setCapturedImage(imageSrc);
+        }
+    };
+
+    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, 200)!)
+                                                    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?.toLocaleString('en-US', {
+                                                minimumFractionDigits: 2,
+                                                maximumFractionDigits: 2,
+                                            })}`}
+                                            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?.toLocaleString('en-US', {
+                                                        minimumFractionDigits: 2,
+                                                        maximumFractionDigits: 2,
+                                                    })}
+                                                    </Typography>
+                                                    <Typography variant="h6" color="secondary" noWrap> Mark : {item.taskItemMark?.toLocaleString('en-US', {
+                                                        minimumFractionDigits: 2,
+                                                        maximumFractionDigits: 2,
+                                                    })} </Typography>
+                                                </Stack>
+                                            </ListItemSecondaryAction>
+                                        </ListItemButton>
+                                    </>
+                                )
+                            })}
+                        </List>
+                    </MainCard>
+                </Grid>
+                <Grid item md={8}>
+                    <MainCard title="Task View">
+                        <Grid container spacing={2}>
+                            {selectedItemContent !== null
+                                ?
+                                <>
+                                    <Grid item md={8}>
+                                        <Typography variant="h4" sx={{ mb: 2 }}>
+                                            {selectedItemContent?.title}
+                                        </Typography>
+                                        <Typography variant="h5" sx={{ textAlign: "justify", mb: 2 }}>
+                                            {itemDesc}
+                                            <span style={{ fontWeight: "bold", cursor: "pointer" }}
+                                                onClick={() => {
+                                                    if (!itemReadMore) {
+                                                        setItemDesc(selectedItemContent?.description!)
+                                                        setItemReadMore(true)
+                                                    } else {
+                                                        setItemDesc(selectedItemContent?.description?.slice(0, 200)!)
+                                                        setItemReadMore(false)
+                                                    }
+                                                }} color="secondary">
+                                                {itemReadMore ? "Show Less" : "...Read More"}
+                                            </span>
+                                        </Typography>
+                                        <MainCard title="How To Do">
+                                            <List
+                                                component="nav"
+                                                sx={{
+                                                    py: 0,
+                                                    '& .MuiListItemButton-root': {
+                                                        '& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }
+                                                    }
+                                                }}
+                                            >
+                                                {selectedItemContent?.howToDo && selectedItemContent?.howToDo.map((i, index) => {
+                                                    return (
+                                                        <>
+                                                            <ListItemButton divider>
+                                                                <ListItemAvatar>
+                                                                    <AntAvatar alt="Basic" type="combined" color="info">
+                                                                        {index + 1}
+                                                                    </AntAvatar>
+                                                                </ListItemAvatar>
+                                                                <ListItemText primary={<Typography variant="subtitle1">{i}</Typography>} />
+                                                            </ListItemButton>
+                                                        </>
+                                                    )
+                                                })}
+                                            </List>
+                                        </MainCard>
+                                    </Grid>
+                                    <Grid item xs={4}>
+                                        <Grid container spacing={2}>
+                                            <Grid item md={6}>
+                                                <Button
+                                                    variant="outlined"
+                                                    endIcon={<FileImageOutlined />}
+                                                    sx={{ my: 2 }}
+                                                    onClick={() => { setItemReferenceData("image") }}
+                                                    color="success"
+                                                    size="small"
+                                                >
+                                                    Image Reference
+                                                </Button>
+                                            </Grid>
+                                            <Grid item md={6}>
+                                                <Button
+                                                    variant="outlined"
+                                                    endIcon={<VideoCameraOutlined />}
+                                                    sx={{ my: 2 }}
+                                                    onClick={() => { setItemReferenceData("video") }}
+                                                    color="warning"
+                                                    size="small"
+                                                >
+                                                    Vide Reference
+                                                </Button>
+                                            </Grid>
+                                            <Grid item md={12} xs={4} sx={{ height: '246px', '& img': { mb: 0, width: '100%', height: '100%', objectFit: 'contain' } }}>
+                                                {itemReferenceData == "image" && <img src={selectedItemContent?.referenceImage} alt="feature" style={{ width: '100%', height: '100%' }} />}
+                                                {itemReferenceData == "video" && <>In Constriction ....</>}
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                    <Grid item md={8}>
+                                        <Grid container spacing={2}>
+                                            <Grid item md={6}>
+                                                <ReportCard primary={`Task Mark : ${(selectedItemContent.taskItemMark)?.toLocaleString('en-US', {
+                                                    minimumFractionDigits: 2,
+                                                    maximumFractionDigits: 2,
+                                                })}`}
+                                                    secondary="Task Mark" color={theme.palette.success.dark} iconPrimary={CheckCircleOutlined}
+                                                />
+                                            </Grid>
+                                            <Grid item md={6}>
+                                                <ReportCard primary={`User Mark : ${(selectedItemContent.taskItemMarkUser)?.toLocaleString('en-US', {
+                                                    minimumFractionDigits: 2,
+                                                    maximumFractionDigits: 2,
+                                                })}`}
+                                                    secondary="Task User Mark" color={theme.palette.success.dark} iconPrimary={UserOutlined}
+                                                />
+                                            </Grid>
+                                            <Grid item md={12}>
+                                                <ReportCard
+                                                    primary={`Pass Mark : ${(selectedItemContent.taskItemMark * (85 / 100))?.toLocaleString('en-US', {
+                                                        minimumFractionDigits: 2,
+                                                        maximumFractionDigits: 2,
+                                                    })}`}
+                                                    secondary="To Complete the task you should get 85% or higher of the task mark" color={theme.palette.success.dark} iconPrimary={TrophyOutlined}
+                                                />
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                    <Grid item md={4}>
+                                        <Grid container spacing={1}>
+                                            <Grid item md={12}>
+                                                <Button
+                                                    variant="contained"
+                                                    endIcon={<PlayCircleOutlined />}
+                                                    fullWidth
+                                                    sx={{ my: 1, width: "100%", height: "100%" }}
+                                                    onClick={() => { setOpenModel(true) }}
+                                                    color="warning"
+                                                    size="small"
+                                                >
+                                                    Practice Task
+                                                </Button>
+                                            </Grid>
+                                            <Grid item md={12}>
+                                                <Button
+                                                    variant="contained"
+                                                    endIcon={<CheckOutlined />}
+                                                    fullWidth
+                                                    sx={{ my: 1, width: "100%", height: "100%" }}
+                                                    onClick={() => { }}
+                                                    color="success"
+                                                    size="small"
+                                                >
+                                                    Complete Task
+                                                </Button>
+                                            </Grid>
+                                            <Grid item md={6}>
+                                                <Button
+                                                    variant="contained"
+                                                    endIcon={<LeftOutlined />}
+                                                    fullWidth
+                                                    sx={{ my: 1, width: "100%", height: "100%" }}
+                                                    onClick={() => { }}
+                                                    color="secondary"
+                                                    size="small"
+                                                >
+                                                    Previous Task
+                                                </Button>
+                                            </Grid>
+                                            <Grid item md={6}>
+                                                <Button
+                                                    variant="contained"
+                                                    endIcon={<RightOutlined />}
+                                                    fullWidth
+                                                    sx={{ my: 1, width: "100%", height: "100%" }}
+                                                    onClick={() => { }}
+                                                    color={"info"}
+                                                    size="small"
+                                                >
+                                                    Next Task
+                                                </Button>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                </>
+                                :
+                                <Grid item md={12}>
+                                    <Alert variant="border" color="warning">Select a Task</Alert>
+                                </Grid>
+                            }
+                        </Grid>
+                    </MainCard>
+                </Grid>
+            </Grid>
+            <Dialog
+                maxWidth="lg"
+                TransitionComponent={PopupTransition}
+                keepMounted
+                fullWidth
+                onClose={handleModelClose}
+                open={openModel}
+                sx={{ '& .MuiDialog-paper': { p: 0 }, transition: 'transform 225ms' }}
+                aria-describedby="alert-dialog-slide-description"
+            >
+                <DialogTitle>Practice</DialogTitle>
+                <Divider />
+                <DialogContent sx={{ p: 2.5 }}>
+                    <Grid container spacing={2}>
+                        <Grid item md={8}>
+                            <MainCard title="Capture / Upload Image">
+                                <Grid container spacing={2}>
+                                    <Grid item md={6}>
+                                        <Webcam
+                                            audio={false}
+                                            ref={webcamRef}
+                                            screenshotFormat="image/jpeg"
+                                            height={300}
+                                            width={400}
+                                        // videoConstraints={videoConstraints}
+                                        />
+                                    </Grid>
+                                    <Grid item md={6}>
+                                        {capturedImage && (
+                                            <img src={capturedImage} alt="Captured" style={{ width: 400, height: 300 }} />
+                                        )}
+                                    </Grid>
+                                </Grid>
+                            </MainCard>
+                        </Grid>
+                        <Grid item md={4}>
+                            <MainCard title="Practice Result">
+                                <Grid container spacing={2}>
+                                    <Grid item md={12}>
+                                        <ReportCard
+                                            primary={`Result : N/A`}
+                                            secondary="To Complete the task you should get 85% or higher of the task mark" color={theme.palette.success.dark} />
+                                    </Grid>
+                                    <Grid item md={12}>
+                                        <ReportCard
+                                            primary={`Status : N/A`}
+                                            secondary="To Complete the task you should get 85% or higher of the task mark" color={theme.palette.success.dark} />
+                                    </Grid>
+                                    <Grid item md={12}>
+                                        <Button variant="contained" color="success" onClick={() => { }} fullWidth>
+                                            Get Result
+                                        </Button>
+                                    </Grid>
+                                </Grid>
+                            </MainCard>
+                        </Grid>
+                        <Grid item md={8}>
+                            <Button size="small" variant="contained" onClick={capture} fullWidth>
+                                Capture
+                            </Button>
+                        </Grid>
+                        <Grid item md={4} />
+                    </Grid>
+                </DialogContent>
+                <Divider />
+                <DialogActions sx={{ p: 2.5 }}>
+                    <Grid container spacing={2}>
+                        <Grid item md={12}>
+                            <Button type="button" variant="contained" sx={{ float: "right" }} onClick={handleModelClose}>
+                                Close
+                            </Button>
+                        </Grid>
+                    </Grid>
+                </DialogActions>
+            </Dialog>
+        </>
+    )
+}
+
+export default Tutorial;

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

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

@@ -21,12 +21,13 @@ import {
 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 { curriculumType } from 'types/curriculum';
 import { GlobalFilter } from 'utils/react-table';
-import { dataProps } from './types/types';
 
 // types
 
 // assets
+import { curriculums } from 'data/curriculums';
 
 // ==============================|| List ||============================== //
 
@@ -37,64 +38,18 @@ const allColumns = [
     },
     {
         id: 2,
-        header: 'Code'
-    },
-    {
-        id: 3,
-        header: 'Name'
-    },
-    {
-        id: 4,
-        header: 'Level'
-    },
-    {
-        id: 5,
-        header: 'Status'
+        header: 'Title'
     }
 ];
 
 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 [data, setData] = useState<curriculumType[]>([])
 
     const matchDownSM = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
 
+    const [curriculumsData, setCurriculumsData] = useState<curriculumType[]>([]);
     const [sortBy, setSortBy] = useState('Default');
     const [globalFilter, setGlobalFilter] = useState('');
-    const [curriculumCard, setCurriculumCard] = useState<dataProps[]>([]);
     const [page, setPage] = useState(1);
 
     const handleChange = (event: SelectChangeEvent) => {
@@ -105,27 +60,29 @@ const List = () => {
     useEffect(() => {
         const newData = data.filter((value: any) => {
             if (globalFilter) {
-                return value.curriculumName.toLowerCase().includes(globalFilter.toLowerCase());
+                return value.curriculumTitle.toLowerCase().includes(globalFilter.toLowerCase());
             } else {
                 return value;
             }
         });
 
-        console.log(newData.length);
-
-        setCurriculumCard(newData);
-    }, [globalFilter]);
+        setCurriculumsData(newData);
+    }, [globalFilter, data]);
 
     const PER_PAGE = 6;
 
-    const count = Math.ceil(curriculumCard.length / PER_PAGE);
-    const _DATA = usePagination(curriculumCard, PER_PAGE);
+    const count = Math.ceil(curriculumsData.length / PER_PAGE);
+    const _DATA = usePagination(curriculumsData, PER_PAGE);
 
     const handleChangePage = (e: any, p: any) => {
         setPage(p);
         _DATA.jump(p);
     };
 
+    useEffect(() => {
+        setData(curriculums)
+    }, [])
+
     return (
         <>
             <Box sx={{ position: 'relative', marginBottom: 3 }}>
@@ -168,19 +125,14 @@ const List = () => {
                 </Stack>
             </Box>
             <Grid container spacing={3}>
-                {curriculumCard.length > 0 ? (
+                {curriculumsData.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);
+                            if (sortBy === 'Title') return a.curriculumTitle.localeCompare(b.curriculumTitle);
                             return a;
                         })
-                        .map((curriculum: dataProps, index: number) => (
+                        .map((curriculum: curriculumType, index: number) => (
                             <Slide key={index} direction="up" in={true} timeout={50}>
                                 <Grid item xs={12} sm={6} lg={4}>
                                     <CurriculumCard curriculum={curriculum} />
@@ -188,7 +140,7 @@ const List = () => {
                             </Slide>
                         ))
                 ) : (
-                    <EmptyCurriculumCard title={'System have no curriculums yet.'} />
+                    <EmptyCurriculumCard title={'System have no curriculumsData yet.'} />
                 )}
             </Grid>
             <Stack spacing={2} sx={{ p: 2.5 }} alignItems="flex-end">

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

@@ -124,7 +124,143 @@ const List = () => {
     const theme = useTheme();
 
     // table
-    const data: dataProps[] = []
+    const data: dataProps[] = [
+        {
+            "_id": "",
+            "tutorialCode": "01",
+            "tutorialTitle": "Numbers and Counting in Sign Language",
+            "tutorialDescription": "In this tutorial, you'll discover how to express numbers visually using simple hand gestures. Each number has a unique sign that involves specific finger placements and hand movements. We'll break down each number step by step, providing you with clear instructions, images, and videos to help you learn effectively.",
+            "tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
+            "taskItems": [
+                {
+                    "_id": "",
+                    "title": "Learn Number One",
+                    "description": "Learn how to sign the number one in sign language.",
+                    "howToDo": "- Extend your index finger straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
+                    "referenceImage": "https://example.com/number_one.jpg",
+                    "referenceVideo": "https://example.com/number_one_video.mp4",
+                    "taskItemMark": 10
+                },
+                {
+                    "_id": "",
+                    "title": "Learn Number Two",
+                    "description": "Learn how to sign the number two in sign language.",
+                    "howToDo": "- Extend your index and middle fingers straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
+                    "referenceImage": "https://example.com/number_two.jpg",
+                    "referenceVideo": "https://example.com/number_two_video.mp4",
+                    "taskItemMark": 10
+                },
+                {
+                    "_id": "",
+                    "title": "Learn Number Three",
+                    "description": "Learn how to sign the number three in sign language.",
+                    "howToDo": "- Extend your index, middle, and ring fingers straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
+                    "referenceImage": "https://example.com/number_three.jpg",
+                    "referenceVideo": "https://example.com/number_three_video.mp4",
+                    "taskItemMark": 10
+                },
+                {
+                    "_id": "",
+                    "title": "Learn Number Four",
+                    "description": "Learn how to sign the number four in sign language.",
+                    "howToDo": "- Extend your thumb, index, middle, and ring fingers straight up.\n- Keep your pinky finger folded.\n- Hold your hand in front of your chest.",
+                    "referenceImage": "https://example.com/number_four.jpg",
+                    "referenceVideo": "https://example.com/number_four_video.mp4",
+                    "taskItemMark": 10
+                },
+                {
+                    "_id": "",
+                    "title": "Learn Number Five",
+                    "description": "Learn how to sign the number five in sign language.",
+                    "howToDo": "- Extend all your fingers straight up.\n- Keep your thumb resting on the side of your palm.\n- Hold your hand in front of your chest.",
+                    "referenceImage": "https://example.com/number_five.jpg",
+                    "referenceVideo": "https://example.com/number_five_video.mp4",
+                    "taskItemMark": 10
+                },
+                {
+                    "_id": "",
+                    "title": "Learn Number Six",
+                    "description": "Learn how to sign the number six in sign language.",
+                    "howToDo": "- Extend your thumb and pinky finger straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
+                    "referenceImage": "https://example.com/number_six.jpg",
+                    "referenceVideo": "https://example.com/number_six_video.mp4",
+                    "taskItemMark": 10
+                },
+                {
+                    "_id": "",
+                    "title": "Learn Number Seven",
+                    "description": "Learn how to sign the number seven in sign language.",
+                    "howToDo": "- Extend your index, middle, and ring fingers straight up.\n- Keep your thumb, pinky, and pinky finger folded.\n- Hold your hand in front of your chest.",
+                    "referenceImage": "https://example.com/number_seven.jpg",
+                    "referenceVideo": "https://example.com/number_seven_video.mp4",
+                    "taskItemMark": 10
+                },
+                {
+                    "_id": "",
+                    "title": "Learn Number Eight",
+                    "description": "Learn how to sign the number eight in sign language.",
+                    "howToDo": "- Extend all your fingers straight up.\n- Cross your index and middle fingers over your ring and pinky fingers.\n- Hold your hand in front of your chest.",
+                    "referenceImage": "https://example.com/number_eight.jpg",
+                    "referenceVideo": "https://example.com/number_eight_video.mp4",
+                    "taskItemMark": 10
+                },
+                {
+                    "_id": "",
+                    "title": "Learn Number Nine",
+                    "description": "Learn how to sign the number nine in sign language.",
+                    "howToDo": "- Extend your thumb and all your fingers straight up.\n- Keep your pinky finger folded.\n- Hold your hand in front of your chest.",
+                    "referenceImage": "https://example.com/number_nine.jpg",
+                    "referenceVideo": "https://example.com/number_nine_video.mp4",
+                    "taskItemMark": 10
+                },
+                {
+                    "_id": "",
+                    "title": "Learn Number Ten",
+                    "description": "Learn how to sign the number ten in sign language.",
+                    "howToDo": "- Extend your thumb, index, and middle fingers straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
+                    "referenceImage": "https://example.com/number_ten.jpg",
+                    "referenceVideo": "https://example.com/number_ten_video.mp4",
+                    "taskItemMark": 10
+                }
+            ],
+            "status": 1,
+            "createdAt": new Date("2023-08-30T12:00:00Z"),
+            "createdBy": "Nuwan Gamage"
+        },
+        {
+            "_id": "",
+            "tutorialCode": "02",
+            "tutorialTitle": "Everyday Vocabulary in Sign Language",
+            "tutorialDescription": "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.",
+            "tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
+            "taskItems": [],
+            "status": 1,
+            "createdAt": new Date("2023-08-30T12:00:00Z"),
+            "createdBy": "Nuwan Gamage"
+        },
+        {
+            "_id": "",
+            "tutorialCode": "03",
+            "tutorialTitle": "Family Signs in Sign Language",
+            "tutorialDescription": "Teach signs for family members, such as mother, father, sister, brother, etc.\nIntroduce signs for common family-related words, such as family, love, and home.\nProvide visual demonstrations and practice exercises for learners to practice these family signs.",
+            "tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
+            "taskItems": [],
+            "status": 1,
+            "createdAt": new Date("2023-08-30T12:00:00Z"),
+            "createdBy": "Nuwan Gamage"
+        },
+        {
+            "_id": "",
+            "tutorialCode": "04",
+            "tutorialTitle": "Basic Conversational Phrases in Sign Language",
+            "tutorialDescription": "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.",
+            "tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
+            "taskItems": [],
+            "status": 1,
+            "createdAt": new Date("2023-08-30T12:00:00Z"),
+            "createdBy": "Nuwan Gamage"
+        }
+    ]
 
     const columns = useMemo(
         () =>

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

@@ -6,11 +6,11 @@ export interface dataProps {
     tutorialTitle: string;
     tutorialDescription: string;
     tutorialImage: string;
-    status: number;
-    createdBy: string;
-    updatedBy: string;
-    createdAt: Date;
-    updatedAt: Date;
+    status?: number;
+    createdBy?: string;
+    updatedBy?: string;
+    createdAt?: Date;
+    updatedAt?: Date;
     taskItems: taskItemProps[]
 }
 
@@ -41,4 +41,5 @@ export interface taskItemProps {
     howToDo: string;
     referenceImage: string;
     referenceVideo: string;
+    taskItemMark: number;
 }
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/routes/MainRoutes.tsx

@@ -36,6 +36,7 @@ const SSLTranslateProcess = Loadable(lazy(() => import('pages/ssl-translate/proc
 const LearningDashboard = Loadable(lazy(() => import('pages/learning-management/dashboard')));
 const LearningCurriculums = Loadable(lazy(() => import('pages/learning-management/learning-curriculums/list/list')));
 const LearningCurriculumsSubscribed = Loadable(lazy(() => import('pages/learning-management/learning-curriculums-subscribed/list/list')));
+const LearningCurriculumsSubscribedTutorial = Loadable(lazy(() => import('pages/learning-management/learning-curriculums-subscribed/tutorial/tutorial')));
 const LearningLeadBoard = Loadable(lazy(() => import('pages/learning-management/learning-lead-board/list/list')));
 const LearningFeedBack = Loadable(lazy(() => import('pages/learning-management/learning-feedback/list/list')));
 
@@ -134,6 +135,10 @@ const MainRoutes = {
               path: 'curriculums-subscribed',
               element: <LearningCurriculumsSubscribed />
             },
+            {
+              path: 'curriculums-subscribed-tutorial',
+              element: <LearningCurriculumsSubscribedTutorial />
+            },
             {
               path: 'lead-board',
               element: <LearningLeadBoard />

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

+import React, { useEffect } from 'react';
+
+// third party
+import { useInView } from 'react-intersection-observer';
+import { motion, useAnimation } from 'framer-motion';
+
+// =============================|| LANDING - FADE IN ANIMATION ||============================= //
+
+function Animation({ children, variants }: { children: React.ReactElement; variants: any }) {
+  const controls = useAnimation();
+  const [ref, inView] = useInView();
+
+  useEffect(() => {
+    if (inView) {
+      controls.start('visible');
+    }
+  }, [controls, inView]);
+
+  return (
+    <motion.div
+      ref={ref}
+      animate={controls}
+      initial="hidden"
+      transition={{
+        x: {
+          type: 'spring',
+          stiffness: 150,
+          damping: 30,
+          duration: 0.5
+        },
+        opacity: { duration: 1 }
+      }}
+      variants={variants}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export default Animation;

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 }}>
+        <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>
+    </>
+  );
+};
+
+export default CurriculumSection;

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

+import { useState } from 'react';
+import { useNavigate } from 'react-router';
+
+// material-ui
+import {
+    Box,
+    Button,
+    Grid,
+    Typography
+} from '@mui/material';
+
+// project import
+import Animation from 'sections/learning-management/learning-curriculums-subscribed/Animation';
+
+// types 
+import { tutorialTypeUserProgress } from "types/userProgress";
+
+// assets
+import { PlaySquareOutlined } from '@ant-design/icons';
+import AnimateButton from 'components/@extended/AnimateButton';
+import MainCard from 'components/MainCard';
+
+
+
+// ==============================|| Tutorial - Section ||============================== //
+
+
+const TutorialSection = ({ tutorial }: { tutorial: tutorialTypeUserProgress }) => {
+    let navigation = useNavigate()
+
+    const [desc, setDesc] = useState(tutorial.tutorialDescription?.slice(0, 100))
+    const [readMore, setReadMore] = useState(false)
+    return (
+        <>
+            <Grid item md={3}>
+                <Animation
+                    variants={{
+                        visible: { opacity: 1 },
+                        hidden: { opacity: 0 }
+                    }}
+                >
+                    <MainCard contentSX={{ p: 3 }}>
+                        <Grid container spacing={1.5}>
+                            <Grid item xs={12}>
+                                <Typography variant="h4" sx={{ fontWeight: 600, mt: 2 }}>
+                                    {tutorial.tutorialTitle}
+                                </Typography>
+                            </Grid>
+                            <Grid item xs={12}>
+                                <Typography variant="body1" color="secondary" sx={{ textAlign: "justify" }}>
+                                    {desc}
+                                    <span style={{ fontWeight: "bold", cursor: "pointer" }}
+                                        onClick={() => {
+                                            if (!readMore) {
+                                                setDesc(tutorial.tutorialDescription)
+                                                setReadMore(true)
+                                            } else {
+                                                setDesc(tutorial.tutorialDescription?.slice(0, 100))
+                                                setReadMore(false)
+                                            }
+                                        }} color="secondary">
+                                        {readMore ? "Show Less" : "...Read More"}
+                                    </span>
+                                </Typography>
+                            </Grid>
+                            <Grid item xs={12}>
+                                <Box sx={{ display: 'inline-block' }}>
+                                    <AnimateButton>
+                                        <Button
+                                            variant="outlined"
+                                            endIcon={<PlaySquareOutlined />}
+                                            sx={{ my: 2 }}
+                                            onClick={() => { navigation(`/learning-management/curriculums-subscribed-tutorial`) }}
+                                        >
+                                            Start Tutorial
+                                        </Button>
+                                    </AnimateButton>
+                                </Box>
+                            </Grid>
+                            <Grid item xs={12} sx={{ '& img': { mb: -3.75, width: `calc( 100% + 24px)` } }}>
+                                <img src={tutorial.tutorialImage} alt="feature" />
+                            </Grid>
+                        </Grid>
+                    </MainCard>
+                </Animation>
+            </Grid>
+        </>
+    )
+}
+
+export default TutorialSection;
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/sections/learning-management/learning-curriculums-subscribed/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-subscribed/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/learning-management/learning-curriculums/Animation.tsx

+import React, { useEffect } from 'react';
+
+// third party
+import { useInView } from 'react-intersection-observer';
+import { motion, useAnimation } from 'framer-motion';
+
+// =============================|| LANDING - FADE IN ANIMATION ||============================= //
+
+function Animation({ children, variants }: { children: React.ReactElement; variants: any }) {
+  const controls = useAnimation();
+  const [ref, inView] = useInView();
+
+  useEffect(() => {
+    if (inView) {
+      controls.start('visible');
+    }
+  }, [controls, inView]);
+
+  return (
+    <motion.div
+      ref={ref}
+      animate={controls}
+      initial="hidden"
+      transition={{
+        x: {
+          type: 'spring',
+          stiffness: 150,
+          damping: 30,
+          duration: 0.5
+        },
+        opacity: { duration: 1 }
+      }}
+      variants={variants}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export default Animation;

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

 import { useState } from 'react';
+import { useNavigate } from 'react-router';
 
 // material-ui
 import {
+  Box,
   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';
+import { PlusOutlined, SendOutlined } from '@ant-design/icons';
+import AnimateButton from 'components/@extended/AnimateButton';
+import { curriculumType } from 'types/curriculum';
+import Animation from './Animation';
+import CurriculumPreview from './CurriculumPreview';
 
 // 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 CurriculumCard = ({ curriculum }: { curriculum: curriculumType }) => {
+  const navigate = useNavigate()
 
-  // const handleClose = () => {
-  //   setOpen(false);
-  // };
+  const [open, setOpen] = useState(false);
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const openMenu = Boolean(anchorEl);
-  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
+  const handleClickOpen = () => {
+    setOpen(true);
   };
-  const handleMenuClose = () => {
-    setAnchorEl(null);
+
+  const handleClose = () => {
+    setOpen(false);
   };
 
+  const [desc, setDesc] = useState(curriculum.curriculumDescription?.slice(0, 100))
+  const [readMore, setReadMore] = useState(false)
+
   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'
+      <Animation
+        variants={{
+          visible: { opacity: 1 },
+          hidden: { opacity: 0 }
         }}
-              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>
+        <MainCard contentSX={{ p: 3 }}>
+          <Grid container spacing={1.5}>
             <Grid item xs={12}>
-            <Divider />
+              <Typography variant="h3" sx={{ fontWeight: 600, mt: 2 }}>
+                {curriculum.curriculumTitle}
+              </Typography>
             </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>
+              <Typography variant="body1" color="secondary" sx={{ textAlign: "justify" }}>
+                {desc}
+                <span style={{ fontWeight: "bold", cursor: "pointer" }}
+                  onClick={() => {
+                    if (!readMore) {
+                      setDesc(curriculum.curriculumDescription)
+                      setReadMore(true)
+                    } else {
+                      setDesc(curriculum.curriculumDescription?.slice(0, 100))
+                      setReadMore(false)
                     }
-                    />
-                  </ListItem>
-                </List>
+                  }} color="secondary">
+                  {readMore ? "Show Less" : "...Read More"}
+                </span>
+              </Typography>
             </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"
+              <Box sx={{ display: 'inline-block' }}>
+                <AnimateButton>
+                  <Button
+                    fullWidth
+                    variant="outlined"
+                    endIcon={<PlusOutlined />}
+                    sx={{ my: 2, width: "100%" }}
+                    onClick={() => { navigate(`/learning-management/curriculums-subscribed`) }}
+                    color='success'
                   >
-                {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>
+                    Follow Curriculum
+                  </Button>
+                </AnimateButton>
               </Box>
-          </Grid> */}
             </Grid>
-        <Stack
-          direction="row"
-          className="hideforPDf"
-          alignItems="center"
-          spacing={1}
-          justifyContent="space-between"
-          sx={{ mt: 'auto', mb: 0, pt: 2.25 }}
+            <Grid item xs={6}>
+              <Box sx={{ display: 'inline-block' }}>
+                <AnimateButton>
+                  <Button
+                    fullWidth
+                    variant="outlined"
+                    endIcon={<SendOutlined />}
+                    sx={{ my: 2, width: "100%" }}
+                    onClick={handleClickOpen}
                   >
-          <Typography variant="caption" color="secondary">
-            Updated in {curriculum.createdAt?.toLocaleTimeString()}
-          </Typography>
-          <Button variant="outlined" size="small" onClick={() => {
-            // handleClickOpen()
-          }}>
-            Preview
+                    Preview Curriculum
                   </Button>
-        </Stack>
+                </AnimateButton>
+              </Box>
+            </Grid>
+            <Grid item xs={12} sx={{ '& img': { marginBottom: '-3.75px', width: '100%', height: '456px', objectFit: 'cover' } }}>
+              <img src={curriculum.curriculumImage} alt="feature" />
+            </Grid>
+          </Grid>
         </MainCard>
+      </Animation>
 
-      {/* edit customer dialog */}
-      {/* <CustomerPreview customer={customer} open={open} onClose={handleClose} />  */}
+      {/* edit curriculum dialog */}
+      <CurriculumPreview curriculum={curriculum} open={open} onClose={handleClose} />
     </>
   );
 };

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

+import { useState } from 'react';
+
+// material-ui
+import {
+  Accordion, AccordionDetails, AccordionSummary,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Stack,
+  Tooltip,
+  Typography
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+
+// third-party
+import { PDFDownloadLink } from '@react-pdf/renderer';
+
+// project import
+import Avatar from 'components/@extended/Avatar';
+import IconButton from 'components/@extended/IconButton';
+import { PopupTransition } from 'components/@extended/Transitions';
+import MainCard from 'components/MainCard';
+import SimpleBar from 'components/third-party/SimpleBar';
+
+// assets
+import { DownloadOutlined, TagOutlined } from '@ant-design/icons';
+import curriculumLevels from 'data/curriculumLevels';
+import { curriculumType } from 'types/curriculum';
+
+// types 
+
+// ==============================|| Curriculum - CARD PREVIEW ||============================== //
+
+export default function CurriculumPreview({ curriculum, open, onClose }: { curriculum: curriculumType; open: boolean; onClose: () => void }) {
+  const theme = useTheme();
+
+  const [expanded, setExpanded] = useState<string | false>('panel0');
+
+  const handleChange = (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+    setExpanded(newExpanded ? panel : false);
+  };
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        TransitionComponent={PopupTransition}
+        keepMounted
+        onClose={onClose}
+        aria-describedby="alert-dialog-slide-description"
+        sx={{ '& .MuiDialog-paper': { width: 1024, maxWidth: 1, m: { xs: 1.75, sm: 2.5, md: 4 } } }}
+      >
+        <Box id="PopupPrint" sx={{ px: { xs: 2, sm: 3, md: 5 }, py: 1 }}>
+          <DialogTitle sx={{ px: 0 }}>
+            <List sx={{ width: 1, p: 0 }}>
+              <ListItem
+                disablePadding
+                secondaryAction={
+                  <Stack direction="row" alignItems="center" justifyContent="center" spacing={0}>
+                    <Tooltip title="Export">
+                      <PDFDownloadLink
+                        document={<></>} fileName={`${curriculum.curriculumCode}-${curriculum.curriculumTitle}.pdf`}
+                      // document={<ListCard customer={customer} />} fileName={`Customer-${customer.fatherName}.pdf`}
+                      >
+                        <IconButton color="secondary">
+                          <DownloadOutlined />
+                        </IconButton>
+                      </PDFDownloadLink>
+                    </Tooltip>
+                    {/* <Tooltip title="Edit">
+                      <IconButton color="secondary" onClick={handleAdd}>
+                        <EditOutlined />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip title="Delete" onClick={handleClose}>
+                      <IconButton color="error">
+                        <DeleteOutlined />
+                      </IconButton>
+                    </Tooltip> */}
+                  </Stack>
+                }
+              >
+                <ListItemAvatar sx={{ mr: 0.75 }}>
+                  <Avatar alt={curriculum.curriculumTitle} size="lg" src={curriculum.curriculumImage} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={<Typography variant="h5">{curriculum.curriculumTitle}</Typography>}
+                  secondary={<Typography color="secondary"> {curriculumLevels.find(level => level.id === curriculum.curriculumLevel)?.description || ""}</Typography>}
+                />
+              </ListItem>
+            </List>
+          </DialogTitle>
+          <DialogContent dividers sx={{ px: 0 }}>
+            <SimpleBar sx={{ height: 'calc(100vh - 390px)' }}>
+              <Grid container spacing={3}>
+                <Grid item xs={12} sm={8} xl={12}>
+                  <Grid container spacing={2.25}>
+                    <Grid item xs={12}>
+                      <MainCard title="Overview">
+                        <Typography>
+                          {curriculum.curriculumDescription}
+                        </Typography>
+                      </MainCard>
+                    </Grid>
+                    <Grid item xs={12}>
+                      <MainCard title="Tutorials">
+                        <Box
+                          sx={{
+                            '& .MuiAccordion-root': {
+                              borderColor: theme.palette.divider,
+                              '& .MuiAccordionSummary-root': {
+                                bgcolor: 'transparent',
+                                flexDirection: 'row',
+                                '&:focus-visible': {
+                                  bgcolor: 'primary.lighter'
+                                }
+                              },
+                              '& .MuiAccordionDetails-root': {
+                                borderColor: theme.palette.divider
+                              },
+                              '& .Mui-expanded': {
+                                color: theme.palette.primary.main
+                              }
+                            }
+                          }}
+                        >
+                          {curriculum.tutorials?.map((tutorial, index) => {
+                            return (
+                              <>
+                                <Accordion expanded={expanded === `panel${index}`} onChange={handleChange(`panel${index}`)}>
+                                  <AccordionSummary aria-controls={`panel${index}d-content`} id={`panel${index}d-header`}>
+                                    <Stack direction="row" spacing={1.5} alignItems="center">
+                                      <TagOutlined />
+                                      <Typography variant="h6">{tutorial.tutorialTitle}</Typography>
+                                    </Stack>
+                                  </AccordionSummary>
+                                  <AccordionDetails>
+                                    <Stack spacing={2}>
+                                      <Typography variant="h5">{tutorial.tutorialDescription}</Typography> 
+                                    </Stack>
+                                  </AccordionDetails>
+                                </Accordion>
+                              </>
+                            )
+                          })}
+
+                        </Box>
+                      </MainCard>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Grid>
+            </SimpleBar>
+          </DialogContent>
+
+          <DialogActions>
+            <Button color="error" onClick={onClose}>
+              Close
+            </Button>
+          </DialogActions>
+        </Box>
+      </Dialog>
+    </>
+  );
+}

Project/Frontend/SignConnectPlus/src/types/curriculum.ts

+import { tutorialType } from "./tutorial"
+
+export interface curriculumType {
+    _id?: string
+    curriculumCode: string
+    curriculumLevel: number
+    curriculumTitle: string
+    curriculumDescription: string
+    curriculumImage: string
+    curriculumMark: number
+    tutorials: tutorialType[],
+    status: number
+    createdBy: string
+    createdAt: Date
+    updatedBy?: string
+    updatedAt?: Date
+}
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/types/taskItem.ts

+export interface taskItemType {
+    _id?: string
+    title: string,
+    description: string,
+    howToDo: string[],
+    referenceImage: string,
+    referenceVideo: string,
+    taskItemMark: number
+}
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/types/tutorial.ts

+import { taskItemType } from "./taskItem"
+
+export interface tutorialType {
+    _id?: string
+    tutorialCode?: string
+    tutorialTitle?: string
+    tutorialDescription?: string
+    tutorialImage?: string
+    tutorialMark: number
+    taskItems: taskItemType[]
+    status: number
+    createdBy: string
+    createdAt: Date
+    updatedBy?: string
+    updatedAt?: Date
+}
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/types/userProgress.ts

+export interface userProgressType {
+    _id: string
+    userId: string
+    curriculums?: curriculumTypeUserProgress[]
+    totalCurriculumsMarks: number
+    totalCurriculumSpentTime: number
+    status: number
+    createdBy?: string
+    createdAt: Date
+    updatedBy?: string
+    updatedAt?: Date
+}
+
+
+export interface curriculumTypeUserProgress {
+    curriculumCode: string
+    curriculumLevel: number
+    curriculumTitle: string
+    curriculumDescription: string
+    curriculumImage: string
+    curriculumMark: number
+    curriculumMarkUser: number
+    curriculumSpentTime: number
+    tutorials: tutorialTypeUserProgress[],
+}
+
+export interface tutorialTypeUserProgress {
+    tutorialCode?: string
+    tutorialTitle?: string
+    tutorialDescription?: string
+    tutorialImage?: string
+    tutorialMark: number
+    tutorialMarkUser: number
+    tutorialSpentTime: number
+    taskItems: taskItemTypeUserProgress[]
+}
+
+export interface taskItemTypeUserProgress {
+    title: string,
+    description: string,
+    howToDo: string[],
+    referenceImage: string,
+    referenceVideo: string,
+    taskItemMark: number
+    taskItemMarkUser: number
+    taskItemSpentTime: number
+}
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/utils/locales/en.json

@@ -165,5 +165,6 @@
   "emotion-detection": "Emotion Detection",
   "audio-detection": "Audio Detection",
   "video-detection": "Video Detection",
-  "learning-dashboard": "Dashboard"
+  "learning-dashboard": "Dashboard",
+  "learning-curriculums-subscribed-tutorial": "Tutorial"
 }
\ No newline at end of file