From 69ad64df283d996afd2ada6afb2142d1398fb4b3 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Fri, 26 Jul 2024 20:41:32 +0530 Subject: [PATCH] s1 --- app/components/ContinueLearning.tsx | 45 ++ app/components/KnowledgeQuest.tsx | 8 +- app/components/KnowledgeQuests.tsx | 169 ++++++ app/components/KnowledgeQuestsPageContent.tsx | 469 ++++++++++++++++ app/components/ProgressReview.tsx | 506 ++++++++++++++++++ app/components/ProgressReviewTopSection.tsx | 44 ++ app/components/QuizzesScore.tsx | 152 ++++++ ...nt.tsx => StudentDashboard-no-content.tsx} | 0 app/components/StudentDashboard.tsx | 459 ---------------- app/components/YourCertificates.tsx | 11 + app/routes/_index.tsx | 2 +- app/routes/classmate-directory.tsx | 2 +- app/routes/knowledge-quest.tsx | 239 ++++++++- app/routes/progress-review.tsx | 251 +++++++++ app/routes/sample.tsx | 229 ++++++++ app/routes/student-dashboard._index.tsx | 289 +++++++--- app/routes/student-dashboard2.tsx | 10 - public/assets/calendar.svg | 3 + public/assets/cart.svg | 3 + public/assets/green-tick.svg | 3 + ...tudent-dashboard.css => left_side_nav.css} | 0 public/assets/module.svg | 3 + public/assets/note.svg | 3 + public/assets/notification-bell.svg | 4 + 24 files changed, 2355 insertions(+), 549 deletions(-) create mode 100644 app/components/ContinueLearning.tsx create mode 100644 app/components/KnowledgeQuests.tsx create mode 100644 app/components/KnowledgeQuestsPageContent.tsx create mode 100644 app/components/ProgressReview.tsx create mode 100644 app/components/ProgressReviewTopSection.tsx create mode 100644 app/components/QuizzesScore.tsx rename app/components/{TestComponent.tsx => StudentDashboard-no-content.tsx} (100%) delete mode 100644 app/components/StudentDashboard.tsx create mode 100644 app/components/YourCertificates.tsx create mode 100644 app/routes/progress-review.tsx create mode 100644 app/routes/sample.tsx delete mode 100644 app/routes/student-dashboard2.tsx create mode 100644 public/assets/calendar.svg create mode 100644 public/assets/cart.svg create mode 100644 public/assets/green-tick.svg rename public/assets/{student-dashboard.css => left_side_nav.css} (100%) create mode 100644 public/assets/module.svg create mode 100644 public/assets/note.svg create mode 100644 public/assets/notification-bell.svg diff --git a/app/components/ContinueLearning.tsx b/app/components/ContinueLearning.tsx new file mode 100644 index 0000000..adc66e3 --- /dev/null +++ b/app/components/ContinueLearning.tsx @@ -0,0 +1,45 @@ +let courseData = [ + { + id : "1", + title : "Life History of Dr. Maria Montessori", + chapter : "1", + Program : "Graduate Program", + img : "../../assets/course1.jpg" + }, + { + id : "2", + title : "Introduction to Montessori Methods", + chapter : "2", + Program : "Graduate Program", + img : "../../assets/course2.jpg" + }, + { + id : "3", + title : "Exercises on Practical Life", + chapter : "3", + Program : "Graduate Program", + img : "../../assets/course3.jpg" + } +]; + +export default function Index() { + return ( +
+
+

Continue Learning

+
+ {courseData.map(data=>( +
+ +

{data.title}

+

+ Chapter {data.chapter} •   + {data.Program} +

+
+ ))} +
+
+
+ ) +} diff --git a/app/components/KnowledgeQuest.tsx b/app/components/KnowledgeQuest.tsx index d642463..723b78e 100644 --- a/app/components/KnowledgeQuest.tsx +++ b/app/components/KnowledgeQuest.tsx @@ -698,7 +698,7 @@ const App: React.FC = () => {
- +

{secondHighestRank.name}

@@ -707,7 +707,7 @@ const App: React.FC = () => {
- +

{highestRank.name}

@@ -715,7 +715,7 @@ const App: React.FC = () => {
- +

{thirdHighestRank.name}

@@ -726,7 +726,7 @@ const App: React.FC = () => { {sortedData.slice(3).map(data => (

# {data.rank}

- +

{data.name}

{data.program}

diff --git a/app/components/KnowledgeQuests.tsx b/app/components/KnowledgeQuests.tsx new file mode 100644 index 0000000..990141f --- /dev/null +++ b/app/components/KnowledgeQuests.tsx @@ -0,0 +1,169 @@ +let knowledgeData = [ + { + id: "1", + status: "1", + title: "Assessment on Special Education", + challenge: "Challenge yourself & climb the leaderboard.", + question: "Subjective Question", + img: "../../assets/knowledge1.jpg" + }, + { + id: "2", + status: "1", + title: "Quiz on Children Psychology", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "../../assets/knowledge2.jpg" + }, + { + id: "3", + status: "1", + title: "Quiz on Montessori Methods", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "../../assets/knowledge3.jpg" + } +]; + +let performersData = [ + { + id: "1", + name: "Eiden", + score: "48/50", + points: "999", + rank: "1", + program: "Graduate Program", + avatar: "avatar1.png" + }, + { + id: "2", + name: "Jackson", + score: "45/50", + points: "997", + rank: "2", + program: "Graduate Program", + avatar: "avatar2.png" + }, + { + id: "3", + name: "Emma Aria", + score: "43/50", + points: "994", + rank: "3", + program: "Graduate Program", + avatar: "avatar3.png" + }, + { + id: "4", + name: "John Doe", + score: "40/50", + points: "990", + rank: "4", + program: "Graduate Program", + avatar: "avatar4.png" + }, + { + id: "5", + name: "Jane Cooper", + score: "37/50", + points: "987", + rank: "5", + program: "Graduate Program", + avatar: "avatar5.png" + }, + { + id: "6", + name: "John Doe", + score: "35/50", + points: "982", + rank: "6", + program: "Graduate Program", + avatar: "avatar6.png" + } +]; + +const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank)); + +const highestRank = sortedData[0]; +const secondHighestRank = sortedData[1]; +const thirdHighestRank = sortedData[2]; + +console.log('The highest rank is:', highestRank); +console.log('The second highest rank is:', secondHighestRank); +console.log('The Third highest rank is:', thirdHighestRank); + + + +export default function(){ + return( +
+
+
+

Knowledge Quests

+
+ {knowledgeData.map(data => ( +
+
+ +
+

{data.title}

+

{data.challenge}

+

{data.question}

+
+
+ +
+ ))} +
+
+
+

Top Performers

+

Knowledge Quest

+
+
+
+ + +
+

{secondHighestRank.name}

+

{secondHighestRank.score}

+
+
+
+ + + +
+

{highestRank.name}

+

{highestRank.score}

+
+
+
+ + +
+

{thirdHighestRank.name}

+

{thirdHighestRank.score}

+
+
+
+ {sortedData.slice(3).map(data => ( +
+

# {data.rank}

+ +
+

{data.name}

+

{data.program}

+
+
+ +

{data.points} Points

+
+
+ ))} +
+
+
+
+ ) +} \ No newline at end of file diff --git a/app/components/KnowledgeQuestsPageContent.tsx b/app/components/KnowledgeQuestsPageContent.tsx new file mode 100644 index 0000000..79de513 --- /dev/null +++ b/app/components/KnowledgeQuestsPageContent.tsx @@ -0,0 +1,469 @@ +import {Layout, Menu, theme, Button, Modal, MenuProps, Tabs} from 'antd'; +import '../../public/assets/knowledge-quest.css'; +const { TabPane } = Tabs; +let performersData = [ + { + id: "1", + name: "Eiden", + score: "48/50", + points: "999", + rank: "1", + program: "Graduate Program", + avatar: "avatar1.png" + }, + { + id: "2", + name: "Jackson", + score: "45/50", + points: "997", + rank: "2", + program: "Graduate Program", + avatar: "avatar2.png" + }, + { + id: "3", + name: "Emma Aria", + score: "43/50", + points: "994", + rank: "3", + program: "Graduate Program", + avatar: "avatar3.png" + }, + { + id: "4", + name: "John Doe", + score: "40/50", + points: "990", + rank: "4", + program: "Graduate Program", + avatar: "avatar4.png" + }, + { + id: "5", + name: "Jane Cooper", + score: "37/50", + points: "987", + rank: "5", + program: "Graduate Program", + avatar: "avatar5.png" + }, + { + id: "6", + name: "John Doe", + score: "35/50", + points: "982", + rank: "6", + program: "Graduate Program", + avatar: "avatar6.png" + }, + { + id: "7", + name: "Alice", + score: "33/50", + points: "980", + rank: "7", + program: "Graduate Program", + avatar: "avatar1.png" + }, + { + id: "8", + name: "Bob", + score: "32/50", + points: "978", + rank: "8", + program: "Graduate Program", + avatar: "avatar2.png" + }, + { + id: "9", + name: "Charlie", + score: "30/50", + points: "975", + rank: "9", + program: "Graduate Program", + avatar: "avatar3.png" + }, + { + id: "10", + name: "Diana", + score: "28/50", + points: "972", + rank: "10", + program: "Graduate Program", + avatar: "avatar4.png" + }, + { + id: "11", + name: "Edward", + score: "27/50", + points: "970", + rank: "11", + program: "Graduate Program", + avatar: "avatar5.png" + }, + { + id: "12", + name: "Fiona", + score: "26/50", + points: "968", + rank: "12", + program: "Graduate Program", + avatar: "avatar6.png" + }, + { + id: "13", + name: "George", + score: "25/50", + points: "965", + rank: "13", + program: "Graduate Program", + avatar: "avatar1.png" + }, + { + id: "14", + name: "Hannah", + score: "23/50", + points: "962", + rank: "14", + program: "Graduate Program", + avatar: "avatar2.png" + }, + { + id: "15", + name: "Ian", + score: "22/50", + points: "960", + rank: "15", + program: "Graduate Program", + avatar: "avatar3.png" + }, + { + id: "16", + name: "Julia", + score: "20/50", + points: "957", + rank: "16", + program: "Graduate Program", + avatar: "avatar4.png" + }, + { + id: "17", + name: "Kyle", + score: "19/50", + points: "955", + rank: "17", + program: "Graduate Program", + avatar: "avatar5.png" + }, + { + id: "18", + name: "Laura", + score: "18/50", + points: "953", + rank: "18", + program: "Graduate Program", + avatar: "avatar6.png" + }, + { + id: "19", + name: "Michael", + score: "17/50", + points: "950", + rank: "19", + program: "Graduate Program", + avatar: "avatar1.png" + }, + { + id: "20", + name: "Nancy", + score: "16/50", + points: "947", + rank: "20", + program: "Graduate Program", + avatar: "avatar2.png" + }, + { + id: "21", + name: "Oliver", + score: "15/50", + points: "945", + rank: "21", + program: "Graduate Program", + avatar: "avatar3.png" + } +]; +let knowledgeData = [ + { + id: "1", + status: "1", + title: "Assessment on Special Education", + challenge: "Challenge yourself & climb the leaderboard.", + question: "Subjective Question", + img: "../../assets/knowledge1.jpg" + }, + { + id: "2", + status: "1", + title: "Quiz on Children Psychology", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "../../assets/knowledge2.jpg" + }, + { + id: "3", + status: "1", + title: "Quiz on Montessori Methods", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "../../assets/knowledge3.jpg" + }, + { + id: "4", + status: "1", + title: "Assessment on Special Education", + challenge: "Challenge yourself & climb the leaderboard.", + question: "Subjective Question", + img: "../../assets/knowledge1.jpg" + }, + { + id: "5", + status: "1", + title: "Quiz on Children Psychology", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "../../assets/knowledge2.jpg" + }, + { + id: "6", + status: "1", + title: "Quiz on Montessori Methods", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "../../assets/knowledge3.jpg" + }, + { + id: "7", + status: "1", + title: "Workshop on Child Development", + challenge: "Expand your knowledge & earn badges.", + question: "Interactive Session", + img: "../../assets/knowledge1.jpg" + }, + { + id: "8", + status: "1", + title: "Webinar on Educational Psychology", + challenge: "Join & enhance your skills.", + question: "Discussion", + img: "../../assets/knowledge2.jpg" + }, + { + id: "9", + status: "1", + title: "Seminar on Inclusive Education", + challenge: "Participate & gain insights.", + question: "Lecture", + img: "../../assets/knowledge3.jpg" + }, + { + id: "10", + status: "1", + title: "Course on Early Childhood Education", + challenge: "Complete the course & get certified.", + question: "Multiple Modules", + img: "../../assets/knowledge1.jpg" + }, + { + id: "11", + status: "1", + title: "Training on Classroom Management", + challenge: "Improve your teaching strategies.", + question: "Practical Tasks", + img: "../../assets/knowledge2.jpg" + }, + { + id: "12", + status: "1", + title: "Lecture on Cognitive Development", + challenge: "Expand your understanding & get certified.", + question: "Q&A Session", + img: "../../assets/knowledge3.jpg" + }, + { + id: "13", + status: "1", + title: "Workshop on Behavioral Issues", + challenge: "Join & learn from experts.", + question: "Interactive Session", + img: "../../assets/knowledge1.jpg" + }, + { + id: "14", + status: "1", + title: "Seminar on Learning Disabilities", + challenge: "Participate & enhance your knowledge.", + question: "Lecture", + img: "../../assets/knowledge2.jpg" + }, + { + id: "15", + status: "1", + title: "Webinar on Child Psychology", + challenge: "Join & expand your skills.", + question: "Discussion", + img: "../../assets/knowledge3.jpg" + }, + { + id: "16", + status: "1", + title: "Course on Special Education Needs", + challenge: "Complete the course & get certified.", + question: "Multiple Modules", + img: "../../assets/knowledge1.jpg" + }, + { + id: "17", + status: "1", + title: "Training on Autism Spectrum Disorder", + challenge: "Improve your teaching strategies.", + question: "Practical Tasks", + img: "../../assets/knowledge2.jpg" + }, + { + id: "18", + status: "1", + title: "Lecture on Emotional Development", + challenge: "Expand your understanding & get certified.", + question: "Q&A Session", + img: "../../assets/knowledge3.jpg" + }, + { + id: "19", + status: "1", + title: "Workshop on ADHD", + challenge: "Join & learn from experts.", + question: "Interactive Session", + img: "../../assets/knowledge1.jpg" + }, + { + id: "20", + status: "1", + title: "Seminar on Speech and Language Disorders", + challenge: "Participate & enhance your knowledge.", + question: "Lecture", + img: "../../assets/knowledge2.jpg" + }, + { + id: "21", + status: "1", + title: "Webinar on Child Nutrition", + challenge: "Join & expand your skills.", + question: "Discussion", + img: "../../assets/knowledge3.jpg" + } +]; +const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank)); + +const highestRank = sortedData[0]; +const secondHighestRank = sortedData[1]; +const thirdHighestRank = sortedData[2]; + +export default function Index(){ + return( +
+
+
+
+ + +
+ {knowledgeData.map(data => ( +
+
+ +
+

{data.title}

+

{data.challenge}

+

{data.question}

+
+
+ +
+ ))} +
+ + +
+ {knowledgeData.map(data => ( +
+
+ +
+

{data.title}

+

{data.challenge}

+

{data.question} | 200 people have taken this quiz

+
+

Score: 9/10

+

Earned: 9  

+
+
+
+

Review

+
+ ))} +
+ + +
+
+
+

Top Performers

+

Knowledge Quest

+
+
+
+ + +
+

{secondHighestRank.name}

+

{secondHighestRank.score}

+
+
+
+ + + +
+

{highestRank.name}

+

{highestRank.score}

+
+
+
+ + +
+

{thirdHighestRank.name}

+

{thirdHighestRank.score}

+
+
+
+ {sortedData.slice(3).map(data => ( +
+

# {data.rank}

+ +
+

{data.name}

+

{data.program}

+
+
+ +

{data.points} Points

+
+
+ ))} +
+
+
+
+ ) +} \ No newline at end of file diff --git a/app/components/ProgressReview.tsx b/app/components/ProgressReview.tsx new file mode 100644 index 0000000..d1b4e8e --- /dev/null +++ b/app/components/ProgressReview.tsx @@ -0,0 +1,506 @@ + + +let quizModuleData = { + modules: [ + { + moduleId: 1, + type: "Theory Quiz Scores", + moduleName: "Module 1 - Life History of Dr. Maria Montessori", + quizzes: [ + { + quizId: 1, + quizName: "Lorem Ipsum Dolor Sit", + attendQuestion: 48, + totalQuestion: 50, + internalMarks: 28, + attendance: 20, + questions: [ + { + questionId: 1, + questionText: "What is the capital of France?", + options: [ + "Paris", + "London", + "Berlin", + "Madrid" + ], + correctAnswer: "Paris" + }, + { + questionId: 2, + questionText: "What is 2 + 2?", + options: [ + "3", + "4", + "5", + "6" + ], + correctAnswer: "4" + }, + { + questionId: 3, + questionText: "What is the boiling point of water?", + options: [ + "90°C", + "100°C", + "110°C", + "120°C" + ], + correctAnswer: "100°C" + }, + { + questionId: 4, + questionText: "Who wrote 'To Kill a Mockingbird'?", + options: [ + "Harper Lee", + "Mark Twain", + "J.K. Rowling", + "Ernest Hemingway" + ], + correctAnswer: "Harper Lee" + }, + { + questionId: 5, + questionText: "What is the largest planet in our solar system?", + options: [ + "Earth", + "Mars", + "Jupiter", + "Saturn" + ], + correctAnswer: "Jupiter" + }, + { + questionId: 6, + questionText: "What is the speed of light?", + options: [ + "300,000 km/s", + "150,000 km/s", + "100,000 km/s", + "50,000 km/s" + ], + correctAnswer: "300,000 km/s" + }, + { + questionId: 7, + questionText: "Who painted the Mona Lisa?", + options: [ + "Vincent van Gogh", + "Pablo Picasso", + "Leonardo da Vinci", + "Claude Monet" + ], + correctAnswer: "Leonardo da Vinci" + }, + { + questionId: 8, + questionText: "What is the chemical symbol for gold?", + options: [ + "Au", + "Ag", + "Pt", + "Pb" + ], + correctAnswer: "Au" + }, + { + questionId: 9, + questionText: "What is the tallest mountain in the world?", + options: [ + "K2", + "Kangchenjunga", + "Mount Everest", + "Lhotse" + ], + correctAnswer: "Mount Everest" + }, + { + questionId: 10, + questionText: "What is the smallest unit of life?", + options: [ + "Cell", + "Atom", + "Molecule", + "Organ" + ], + correctAnswer: "Cell" + } + ] + }, + { + quizId: 2, + quizName: "Lorem Ipsum Dolor Sit", + attendQuestion: 45, + totalQuestion: 50, + internalMarks: 29, + attendance: 20, + questions: [ + { + questionId: 1, + questionText: "What is the capital of Italy?", + options: [ + "Rome", + "Venice", + "Florence", + "Milan" + ], + correctAnswer: "Rome" + }, + { + questionId: 2, + questionText: "What is 3 + 5?", + options: [ + "7", + "8", + "9", + "10" + ], + correctAnswer: "8" + }, + { + questionId: 3, + questionText: "What is the freezing point of water?", + options: [ + "0°C", + "32°C", + "100°C", + "273K" + ], + correctAnswer: "0°C" + }, + { + questionId: 4, + questionText: "Who wrote 'Pride and Prejudice'?", + options: [ + "Jane Austen", + "Charles Dickens", + "Emily Brontë", + "George Eliot" + ], + correctAnswer: "Jane Austen" + }, + { + questionId: 5, + questionText: "What is the smallest planet in our solar system?", + options: [ + "Mercury", + "Venus", + "Earth", + "Mars" + ], + correctAnswer: "Mercury" + }, + { + questionId: 6, + questionText: "What is the speed of sound?", + options: [ + "343 m/s", + "300 m/s", + "1500 m/s", + "1000 m/s" + ], + correctAnswer: "343 m/s" + }, + { + questionId: 7, + questionText: "Who painted the Starry Night?", + options: [ + "Vincent van Gogh", + "Pablo Picasso", + "Leonardo da Vinci", + "Claude Monet" + ], + correctAnswer: "Vincent van Gogh" + }, + { + questionId: 8, + questionText: "What is the chemical symbol for silver?", + options: [ + "Au", + "Ag", + "Pt", + "Pb" + ], + correctAnswer: "Ag" + }, + { + questionId: 9, + questionText: "What is the second tallest mountain in the world?", + options: [ + "K2", + "Kangchenjunga", + "Mount Everest", + "Lhotse" + ], + correctAnswer: "K2" + }, + { + questionId: 10, + questionText: "What is the largest organ in the human body?", + options: [ + "Liver", + "Heart", + "Skin", + "Brain" + ], + correctAnswer: "Skin" + } + ] + } + ] + }, + { + moduleId: 2, + type: "Theory Quiz Scores", + moduleName: "Module 2", + attendQuestion: 42, + totalQuestion: 50, + internalMarks: 22, + attendance: 20, + quizzes: [ + { + quizId: 1, + quizName: "Quiz 1", + attendQuestion: 49, + totalQuestion: 50, + internalMarks: 2, + attendance: 20, + questions: [ + { + questionId: 1, + questionText: "What is the capital of Germany?", + options: [ + "Berlin", + "Munich", + "Hamburg", + "Frankfurt" + ], + correctAnswer: "Berlin" + }, + { + questionId: 2, + questionText: "What is 5 + 3?", + options: [ + "7", + "8", + "9", + "10" + ], + correctAnswer: "8" + }, + { + questionId: 3, + questionText: "What is the melting point of ice?", + options: [ + "0°C", + "32°C", + "100°C", + "273K" + ], + correctAnswer: "0°C" + }, + { + questionId: 4, + questionText: "Who wrote '1984'?", + options: [ + "George Orwell", + "Aldous Huxley", + "Ray Bradbury", + "J.D. Salinger" + ], + correctAnswer: "George Orwell" + }, + { + questionId: 5, + questionText: "What is the second smallest planet in our solar system?", + options: [ + "Mercury", + "Venus", + "Earth", + "Mars" + ], + correctAnswer: "Mars" + }, + { + questionId: 6, + questionText: "What is the speed of light in a vacuum?", + options: [ + "300,000 km/s", + "150,000 km/s", + "299,792 km/s", + "299,792 m/s" + ], + correctAnswer: "299,792 km/s" + }, + { + questionId: 7, + questionText: "Who painted the Last Supper?", + options: [ + "Vincent van Gogh", + "Pablo Picasso", + "Leonardo da Vinci", + "Claude Monet" + ], + correctAnswer: "Leonardo da Vinci" + }, + { + questionId: 8, + questionText: "What is the chemical symbol for iron?", + options: [ + "Fe", + "Ir", + "In", + "I" + ], + correctAnswer: "Fe" + }, + { + questionId: 9, + questionText: "What is the third tallest mountain in the world?", + options: [ + "K2", + "Kangchenjunga", + "Mount Everest", + "Lhotse" + ], + correctAnswer: "Kangchenjunga" + }, + { + questionId: 10, + questionText: "What is the smallest bone in the human body?", + options: [ + "Stapes", + "Femur", + "Tibia", + "Fibula" + ], + correctAnswer: "Stapes" + } + ] + } + ] + } + ] +} +console.log(quizModuleData) +import React, { useState } from 'react'; +import { Modal } from 'antd'; + + +export default function Index() { + const [isModalOpen, setIsModalOpen] = useState(false); + const [selectedQuiz, setSelectedQuiz] = useState(null); + + const showModal = (quiz) => { + setSelectedQuiz(quiz); + setIsModalOpen(true); + }; + + const handleOk = () => { + setIsModalOpen(false); + setSelectedQuiz(null); + }; + + const handleCancel = () => { + setIsModalOpen(false); + setSelectedQuiz(null); + }; + + return ( +
+
+ { + quizModuleData.modules.map((moduleData) => ( +
+
+

{moduleData.type}

+

{moduleData.moduleName}

+

3/8 Quizzes Completed

+
+
+ { + moduleData.quizzes.map((quizData) => ( +
showModal(quizData)} className="flex flex-row justify-between place-items-center hover:bg-[#FFF4EA] duration-500 border-b-[1px] border-b-[#CFCFCF] p-6 cursor-pointer" key={quizData.quizId}> +
+

#{quizData.quizId} {quizData.quizName}

+

+ Internal Marks: {quizData.internalMarks}  •   + Attendance: {quizData.attendance} +

+
+
+

+ {quizData.attendQuestion}/ + {quizData.totalQuestion} +

+ +
+
+ )) + } +
+
+ )) + } +
+ {selectedQuiz && ( + +
+
+
+
+ +
+
+

18/10

+

Attendance

+
+
+
+ +
+
+
+ +
+
+

12 Questions

+

Attempted

+
+
+
+ +
+
+
+ +
+
+

12 Correct

+

Attempts

+
+
+
+
+ {selectedQuiz.questions.map((questionData) => ( +
+

Q{questionData.questionId}: {questionData.questionText}

+

Your Answer

+

{questionData.correctAnswer}

+
+

 Correct

+ +

Correct Answer: {questionData.correctAnswer}

+
+
    + {/* {questionData.options.map((option, index) => ( +
  • {option}
    • + ))} */} +
+
+ ))} + + )} +
+ ); +} diff --git a/app/components/ProgressReviewTopSection.tsx b/app/components/ProgressReviewTopSection.tsx new file mode 100644 index 0000000..d164a4a --- /dev/null +++ b/app/components/ProgressReviewTopSection.tsx @@ -0,0 +1,44 @@ +export default function Index() { + return( +
+
+
+
+
+ +
+

70%

+
+

Average Attendance

+
+
+
+
+ +
+

02

+
+

Total Certificates

+
+
+
+
+ +
+

12

+
+

Tests Taken

+
+
+
+
+ +
+

0

+
+

Modules Completed

+
+
+
+ ) +} \ No newline at end of file diff --git a/app/components/QuizzesScore.tsx b/app/components/QuizzesScore.tsx new file mode 100644 index 0000000..bc7f942 --- /dev/null +++ b/app/components/QuizzesScore.tsx @@ -0,0 +1,152 @@ +import React from 'react'; +import { Flex, Progress } from 'antd'; + +let quizData = [ + { + quizId: 1, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 1", + percentage: "60" + }, + { + quizId: 2, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 2", + percentage: "75" + }, + { + quizId: 3, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 3", + percentage: "80" + }, + { + quizId: 4, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 4", + percentage: "65" + }, + { + quizId: 5, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 5", + percentage: "70" + }, + { + quizId: 6, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 6", + percentage: "85" + }, + { + quizId: 7, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 7", + percentage: "90" + }, + { + quizId: 8, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 8", + percentage: "95" + }, + { + quizId: 9, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 9", + percentage: "88" + }, + { + quizId: 10, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 10", + percentage: "92" + }, + { + quizId: 11, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 11", + percentage: "77" + }, + { + quizId: 12, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 12", + percentage: "82" + }, + { + quizId: 13, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 13", + percentage: "68" + }, + { + quizId: 14, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 14", + percentage: "73" + }, + { + quizId: 15, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 15", + percentage: "79" + }, + { + quizId: 16, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 16", + percentage: "87" + }, + { + quizId: 17, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 17", + percentage: "93" + }, + { + quizId: 18, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 18", + percentage: "67" + }, + { + quizId: 19, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 19", + percentage: "89" + }, + { + quizId: 20, + quizType: "AI Quiz", + quizName: "Assessment on Special Education - 20", + percentage: "91" + } + ] + +export default function Index(){ + return( +
+
+

Quizzes score

+
+ {quizData.slice(15).map((data => ( + +
+

{data.quizType}

+

{data.quizName}

+
+
+ ({percent}%)}/> + +
+ + )))} +
+
+
+ ) +} + + +{/* */} \ No newline at end of file diff --git a/app/components/TestComponent.tsx b/app/components/StudentDashboard-no-content.tsx similarity index 100% rename from app/components/TestComponent.tsx rename to app/components/StudentDashboard-no-content.tsx diff --git a/app/components/StudentDashboard.tsx b/app/components/StudentDashboard.tsx deleted file mode 100644 index 79d4eeb..0000000 --- a/app/components/StudentDashboard.tsx +++ /dev/null @@ -1,459 +0,0 @@ -import React, {useState} from 'react'; -import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons'; -import Icon from '@ant-design/icons'; - -import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; -import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon'; -import ExaminationIcon from '~/components/customIcon/ExaminationIcon'; -import CommunityIcon from '~/components/customIcon/CommunityIcon'; -import NotificationIcon from '~/components/customIcon/NotificationIcon'; -import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd'; -import { Dropdown, Space } from 'antd'; -import '../../public/assets/student-dashboard.css'; - -let courseData = [ - { - id : "1", - title : "Life History of Dr. Maria Montessori", - chapter : "1", - Program : "Graduate Program", - img : "../../assets/course1.jpg" - }, - { - id : "2", - title : "Introduction to Montessori Methods", - chapter : "2", - Program : "Graduate Program", - img : "../../assets/course2.jpg" - }, - { - id : "3", - title : "Exercises on Practical Life", - chapter : "3", - Program : "Graduate Program", - img : "../../assets/course3.jpg" - } -]; -let knowledgeData = [ - { - id: "1", - status: "1", - title: "Assessment on Special Education", - challenge: "Challenge yourself & climb the leaderboard.", - question: "Subjective Question", - img: "../../assets/knowledge1.jpg" - }, - { - id: "2", - status: "1", - title: "Quiz on Children Psychology", - challenge: "Challenge yourself & climb the leaderboard.", - question: "MCQ", - img: "../../assets/knowledge2.jpg" - }, - { - id: "3", - status: "1", - title: "Quiz on Montessori Methods", - challenge: "Challenge yourself & climb the leaderboard.", - question: "MCQ", - img: "../../assets/knowledge3.jpg" - } -]; - -let performersData = [ - { - id: "1", - name: "Eiden", - score: "48/50", - points: "999", - rank: "1", - program: "Graduate Program", - avatar: "avatar1.png" - }, - { - id: "2", - name: "Jackson", - score: "45/50", - points: "997", - rank: "2", - program: "Graduate Program", - avatar: "avatar2.png" - }, - { - id: "3", - name: "Emma Aria", - score: "43/50", - points: "994", - rank: "3", - program: "Graduate Program", - avatar: "avatar3.png" - }, - { - id: "4", - name: "John Doe", - score: "40/50", - points: "990", - rank: "4", - program: "Graduate Program", - avatar: "avatar4.png" - }, - { - id: "5", - name: "Jane Cooper", - score: "37/50", - points: "987", - rank: "5", - program: "Graduate Program", - avatar: "avatar5.png" - }, - { - id: "6", - name: "John Doe", - score: "35/50", - points: "982", - rank: "6", - program: "Graduate Program", - avatar: "avatar6.png" - } -]; - -const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank)); - -const highestRank = sortedData[0]; -const secondHighestRank = sortedData[1]; -const thirdHighestRank = sortedData[2]; - -console.log('The highest rank is:', highestRank); -console.log('The second highest rank is:', secondHighestRank); -console.log('The Third highest rank is:', thirdHighestRank); - - - -// const highestRank = performersData.reduce((prev, current) => (prev.rank < current.rank) ? prev : current); - -// console.log('The highest rank is:', highestRank); - -const { Header, Content, Sider } = Layout; - -const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({ - key, - label: `navsd ${key}`, -})); - -type MenuItem = Required['items'][number]; - - -const items2: MenuProps['items'] = [ - { - key: 'subsd1', - icon: , - label: (

  Administration

), - children: [ - { - key: '1sd', - label: (Class Schedules), - }, - { - key: '2sd', - label: (Classmate Directory), - }, - { - key: '3sd', - label: (Qualifications), - }, - ], - }, - { - key: 'subsd2', - icon: , - label: (

  My Courses

), - children: [ - { - key: '4sd', - label: (Graduate Program), - }, - { - key: '5sd', - label: (Post-Graduate Program), - }, - ], - }, - { - key: 'subsd3', - icon: , - label: (

  Examinations

), - children: [ - { - key: '6sd', - label: (Exam Scheduled), - }, - { - key: '7sd', - label: (Upcoming Exam), - }, - { - key: '8sd', - label: (Passed Exam), - }, - ], - }, - { - key: 'subsd4', - icon: , - label: (

  Community

), - children: [ - { - key: '9sd', - label: (Exam Scheduled), - }, - { - key: '10sd', - label: (Upcoming Exam), - }, - { - key: '11sd', - label: (Passed Exam), - }, - ], - }, - { - key: 'subsd5', - icon: , - label: (

  Notifications

), - children: [ - { - key: '12sd', - label: (Exam Scheduled), - }, - { - key: '13sd', - label: (Upcoming Exam), - }, - { - key: '14sd', - label: (Passed Exam), - }, - ], - }, - // getItem('Files', '9', ), - { - key: 'grp', - label: '', - type: 'group', - style: { marginTop: '100px' }, - children: [ - { - key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, - icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), - label: (

Settings

) - }, - { - key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, - icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }), - label: (

Help & Support

) - }, - { - key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, - icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }), - label: (

Logout

) - }, - ], - }, -]; -const items: MenuProps['items'] = [ - { - label: 1st menu item, - key: '01sd', - }, - { - type: 'divider', - }, - { - label: 2nd menu item, - key: '02sd', - }, - { - type: 'divider', - }, - { - label: '3rd menu item', - key: '03sd', - }, - ]; - -const App: React.FC = () => { - const [collapsed, setCollapsed] = useState(false); - const [open, setOpen] = React.useState(false); - const [loading, setLoading] = React.useState(true); - - const showLoading = () => { - setOpen(true); - setLoading(true); - - // Simple loading mock. You should add cleanup logic in real world. - setTimeout(() => { - setLoading(false); - }, 100); - }; - const { token: { colorBgContainer}, } = theme.useToken(); - - return ( - - <> - {/* */} - Loading Modal

} footer={ } loading={loading} open={open} onCancel={() => setOpen(false)} > -

Some contents...

-

Some contents...

-

Some contents...

- - - {/*
-
- -
*/} - -
- setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}> -
-
-

IIMTT Logo

-
-
- - -
- {/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */} - - -
-
-
- -

Student Dashboard

-
- -
-
-
-
-

Graduate Program

-
-
-
-
-

Continue Learning

-
- {courseData.map(data=>( -
- -

{data.title}

-

- Chapter {data.chapter} •   - {data.Program} -

-
- ))} -
-
-
- {/* knowledgeData */} -
-
-
-

Knowledge Quests

-
- {knowledgeData.map(data => ( -
-
- -
-

{data.title}

-

{data.challenge}

-

{data.question}

-
-
- -
- ))} -
-
-
-

Top Performers

-

Knowledge Quest

-
-
-
- - -
-

{secondHighestRank.name}

-

{secondHighestRank.score}

-
-
-
- - - -
-

{highestRank.name}

-

{highestRank.score}

-
-
-
- - -
-

{thirdHighestRank.name}

-

{thirdHighestRank.score}

-
-
-
- {sortedData.slice(3).map(data => ( -
-

# {data.rank}

- -
-

{data.name}

-

{data.program}

-
-
- -

{data.points} Points

-
-
- ))} -
-
-
-
- - - - - ); -}; -export default App; \ No newline at end of file diff --git a/app/components/YourCertificates.tsx b/app/components/YourCertificates.tsx new file mode 100644 index 0000000..f7f2cd9 --- /dev/null +++ b/app/components/YourCertificates.tsx @@ -0,0 +1,11 @@ +export default function(){ + return( +
+

Your Certificates

+ +
+
+
+
+ ) +} \ No newline at end of file diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 4f8595e..d6e4b5c 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -1,5 +1,5 @@ import type { MetaFunction } from "@remix-run/node"; -import TestComponent from '../components/TestComponent'; // Fix typo here +import TestComponent from '../components/StudentDashboard-no-content'; // Fix typo here export default function Index() { return ( diff --git a/app/routes/classmate-directory.tsx b/app/routes/classmate-directory.tsx index e5df74a..acc859b 100644 --- a/app/routes/classmate-directory.tsx +++ b/app/routes/classmate-directory.tsx @@ -8,7 +8,7 @@ import ExaminationIcon from '~/components/customIcon/ExaminationIcon'; import CommunityIcon from '~/components/customIcon/CommunityIcon'; import NotificationIcon from '~/components/customIcon/NotificationIcon'; import {Layout, Menu, theme, Button, Modal, MenuProps, Breadcrumb, Dropdown, Space} from 'antd'; -import '../../public/assets/student-dashboard.css'; +import '../../public/assets/left_side_nav.css'; let classmatesData = [ { diff --git a/app/routes/knowledge-quest.tsx b/app/routes/knowledge-quest.tsx index 237ca3a..fc6e0d2 100644 --- a/app/routes/knowledge-quest.tsx +++ b/app/routes/knowledge-quest.tsx @@ -1,10 +1,235 @@ -import type { MetaFunction } from "@remix-run/node"; -import KnowledgeQuest from '../components/KnowledgeQuest' +import React, {useState} from 'react'; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons'; +import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; +import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon'; +import ExaminationIcon from '~/components/customIcon/ExaminationIcon'; +import CommunityIcon from '~/components/customIcon/CommunityIcon'; +import NotificationIcon from '~/components/customIcon/NotificationIcon'; +import KnowledgeQuestsPageContent from '~/components/KnowledgeQuestsPageContent'; +import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd'; +import { Dropdown, Space } from 'antd'; +import '../../public/assets/left_side_nav.css'; + + +const { Content, Sider } = Layout; + +const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({ + key, + label: `navsd ${key}`, +})); + +type MenuItem = Required['items'][number]; + + +const items2: MenuProps['items'] = [ + { + key: 'subsd1', + icon: , + label: (

  Administration

), + children: [ + { + key: '1sd', + label: (Class Schedules), + }, + { + key: '2sd', + label: (Classmate Directory), + }, + { + key: '3sd', + label: (Qualifications), + }, + ], + }, + { + key: 'subsd2', + icon: , + label: (

  My Courses

), + children: [ + { + key: '4sd', + label: (Graduate Program), + }, + { + key: '5sd', + label: (Post-Graduate Program), + }, + ], + }, + { + key: 'subsd3', + icon: , + label: (

  Examinations

), + children: [ + { + key: '6sd', + label: (Exam Scheduled), + }, + { + key: '7sd', + label: (Upcoming Exam), + }, + { + key: '8sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd4', + icon: , + label: (

  Community

), + children: [ + { + key: '9sd', + label: (Exam Scheduled), + }, + { + key: '10sd', + label: (Upcoming Exam), + }, + { + key: '11sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd5', + icon: , + label: (

  Notifications

), + children: [ + { + key: '12sd', + label: (Exam Scheduled), + }, + { + key: '13sd', + label: (Upcoming Exam), + }, + { + key: '14sd', + label: (Passed Exam), + }, + ], + }, + // getItem('Files', '9', ), + { + key: 'grp', + label: '', + type: 'group', + style: { marginTop: '100px' }, + children: [ + { + key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), + label: (

Settings

) + }, + { + key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }), + label: (

Help & Support

) + }, + { + key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }), + label: (

Logout

) + }, + ], + }, +]; +const items: MenuProps['items'] = [ + { + label: 1st menu item, + key: '01sd', + }, + { + type: 'divider', + }, + { + label: 2nd menu item, + key: '02sd', + }, + { + type: 'divider', + }, + { + label: '3rd menu item', + key: '03sd', + }, +]; + +const App: React.FC = () => { + const [collapsed, setCollapsed] = useState(false); + const [open, setOpen] = React.useState(false); + const [loading, setLoading] = React.useState(true); + + const showLoading = () => { + setOpen(true); + setLoading(true); + + // Simple loading mock. You should add cleanup logic in real world. + setTimeout(() => { + setLoading(false); + }, 100); + }; + const { token: { colorBgContainer}, } = theme.useToken(); -export default function Index() { return ( -
- {/* Ensure the component name matches the import */} -
+ + +
+ setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}> +
+
+

IIMTT Logo

+
+
+ + +
+ + +
+
+
+ +

Student Dashboard

+
+ +
+
+ {/* Place Content from here */} +
+ +
+ + + + ); -} +}; +export default App; \ No newline at end of file diff --git a/app/routes/progress-review.tsx b/app/routes/progress-review.tsx new file mode 100644 index 0000000..c373daf --- /dev/null +++ b/app/routes/progress-review.tsx @@ -0,0 +1,251 @@ +import React, {useState} from 'react'; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons'; +import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; +import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon'; +import ExaminationIcon from '~/components/customIcon/ExaminationIcon'; +import CommunityIcon from '~/components/customIcon/CommunityIcon'; +import NotificationIcon from '~/components/customIcon/NotificationIcon'; +import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd'; +import ProgressReviewTopSection from '~/components/ProgressReviewTopSection'; +import ProgressReview from '~/components/ProgressReview'; +import QuizzesScore from '~/components/QuizzesScore' +import YourCertificates from '~/components/YourCertificates' +import { Dropdown, Space } from 'antd'; +import '../../public/assets/left_side_nav.css'; + + +const { Content, Sider } = Layout; + +const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({ + key, + label: `navsd ${key}`, +})); + +type MenuItem = Required['items'][number]; + + +const items2: MenuProps['items'] = [ + { + key: 'subsd1', + icon: , + label: (

  Administration

), + children: [ + { + key: '1sd', + label: (Class Schedules), + }, + { + key: '2sd', + label: (Classmate Directory), + }, + { + key: '3sd', + label: (Qualifications), + }, + ], + }, + { + key: 'subsd2', + icon: , + label: (

  My Courses

), + children: [ + { + key: '4sd', + label: (Graduate Program), + }, + { + key: '5sd', + label: (Post-Graduate Program), + }, + ], + }, + { + key: 'subsd3', + icon: , + label: (

  Examinations

), + children: [ + { + key: '6sd', + label: (Exam Scheduled), + }, + { + key: '7sd', + label: (Upcoming Exam), + }, + { + key: '8sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd4', + icon: , + label: (

  Community

), + children: [ + { + key: '9sd', + label: (Exam Scheduled), + }, + { + key: '10sd', + label: (Upcoming Exam), + }, + { + key: '11sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd5', + icon: , + label: (

  Notifications

), + children: [ + { + key: '12sd', + label: (Exam Scheduled), + }, + { + key: '13sd', + label: (Upcoming Exam), + }, + { + key: '14sd', + label: (Passed Exam), + }, + ], + }, + // getItem('Files', '9', ), + { + key: 'grp', + label: '', + type: 'group', + style: { marginTop: '100px' }, + children: [ + { + key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), + label: (

Settings

) + }, + { + key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }), + label: (

Help & Support

) + }, + { + key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }), + label: (

Logout

) + }, + ], + }, +]; +const items: MenuProps['items'] = [ + { + label: 1st menu item, + key: '01sd', + }, + { + type: 'divider', + }, + { + label: 2nd menu item, + key: '02sd', + }, + { + type: 'divider', + }, + { + label: '3rd menu item', + key: '03sd', + }, +]; + +const App: React.FC = () => { + const [collapsed, setCollapsed] = useState(false); + const [open, setOpen] = React.useState(false); + const [loading, setLoading] = React.useState(true); + + const showLoading = () => { + setOpen(true); + setLoading(true); + + // Simple loading mock. You should add cleanup logic in real world. + setTimeout(() => { + setLoading(false); + }, 100); + }; + const { token: { colorBgContainer}, } = theme.useToken(); + + return ( + + +
+ setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}> +
+
+

IIMTT Logo

+
+
+ + +
+ + +
+
+
+ +

Student Dashboard

+
+ +
+
+ + {/* Place Content from here */} +
+ +
+
+
+ +
+
+ + + +
+ +
+ +
+ +
+ + + + + ); +}; +export default App; \ No newline at end of file diff --git a/app/routes/sample.tsx b/app/routes/sample.tsx new file mode 100644 index 0000000..8362b49 --- /dev/null +++ b/app/routes/sample.tsx @@ -0,0 +1,229 @@ +import React, {useState} from 'react'; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons'; +import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; +import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon'; +import ExaminationIcon from '~/components/customIcon/ExaminationIcon'; +import CommunityIcon from '~/components/customIcon/CommunityIcon'; +import NotificationIcon from '~/components/customIcon/NotificationIcon'; +import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd'; +import { Dropdown, Space } from 'antd'; +import '../../public/assets/left_side_nav.css'; + + +const { Content, Sider } = Layout; + +const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({ + key, + label: `navsd ${key}`, +})); + +type MenuItem = Required['items'][number]; + + +const items2: MenuProps['items'] = [ + { + key: 'subsd1', + icon: , + label: (

  Administration

), + children: [ + { + key: '1sd', + label: (Class Schedules), + }, + { + key: '2sd', + label: (Classmate Directory), + }, + { + key: '3sd', + label: (Qualifications), + }, + ], + }, + { + key: 'subsd2', + icon: , + label: (

  My Courses

), + children: [ + { + key: '4sd', + label: (Graduate Program), + }, + { + key: '5sd', + label: (Post-Graduate Program), + }, + ], + }, + { + key: 'subsd3', + icon: , + label: (

  Examinations

), + children: [ + { + key: '6sd', + label: (Exam Scheduled), + }, + { + key: '7sd', + label: (Upcoming Exam), + }, + { + key: '8sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd4', + icon: , + label: (

  Community

), + children: [ + { + key: '9sd', + label: (Exam Scheduled), + }, + { + key: '10sd', + label: (Upcoming Exam), + }, + { + key: '11sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd5', + icon: , + label: (

  Notifications

), + children: [ + { + key: '12sd', + label: (Exam Scheduled), + }, + { + key: '13sd', + label: (Upcoming Exam), + }, + { + key: '14sd', + label: (Passed Exam), + }, + ], + }, + // getItem('Files', '9', ), + { + key: 'grp', + label: '', + type: 'group', + style: { marginTop: '100px' }, + children: [ + { + key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), + label: (

Settings

) + }, + { + key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }), + label: (

Help & Support

) + }, + { + key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }), + label: (

Logout

) + }, + ], + }, +]; +const items: MenuProps['items'] = [ + { + label: 1st menu item, + key: '01sd', + }, + { + type: 'divider', + }, + { + label: 2nd menu item, + key: '02sd', + }, + { + type: 'divider', + }, + { + label: '3rd menu item', + key: '03sd', + }, +]; + +const App: React.FC = () => { + const [collapsed, setCollapsed] = useState(false); + const [open, setOpen] = React.useState(false); + const [loading, setLoading] = React.useState(true); + + const showLoading = () => { + setOpen(true); + setLoading(true); + + // Simple loading mock. You should add cleanup logic in real world. + setTimeout(() => { + setLoading(false); + }, 100); + }; + const { token: { colorBgContainer}, } = theme.useToken(); + + return ( + + +
+ setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}> +
+
+

IIMTT Logo

+
+
+ + +
+ + +
+
+
+ +

Student Dashboard

+
+ +
+
+ + {/* Place Content from here */} + + + + + ); +}; +export default App; \ No newline at end of file diff --git a/app/routes/student-dashboard._index.tsx b/app/routes/student-dashboard._index.tsx index 89ed157..55418a6 100644 --- a/app/routes/student-dashboard._index.tsx +++ b/app/routes/student-dashboard._index.tsx @@ -1,81 +1,236 @@ -import React, { useState } from 'react'; -import { - DesktopOutlined, - FileOutlined, - PieChartOutlined, - TeamOutlined, - UserOutlined, -} from '@ant-design/icons'; -import type { MenuProps } from 'antd'; -import { Breadcrumb, Layout, Menu, theme } from 'antd'; +import React, {useState} from 'react'; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons'; +import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; +import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon'; +import ExaminationIcon from '~/components/customIcon/ExaminationIcon'; +import CommunityIcon from '~/components/customIcon/CommunityIcon'; +import NotificationIcon from '~/components/customIcon/NotificationIcon'; +import ContunueLearning from '~/components/ContinueLearning'; +import KnowledgeQuests from '~/components/KnowledgeQuests' +import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd'; +import { Dropdown, Space } from 'antd'; +import '../../public/assets/left_side_nav.css'; -const { Header, Content, Footer, Sider } = Layout; + +const { Content, Sider } = Layout; + +const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({ + key, + label: `navsd ${key}`, +})); type MenuItem = Required['items'][number]; -function getItem( - label: React.ReactNode, - key: React.Key, - icon?: React.ReactNode, - children?: MenuItem[], -): MenuItem { - return { - key, - icon, - children, - label, - } as MenuItem; -} -const items: MenuItem[] = [ - getItem('Option 1', '1', ), - getItem('Option 2', '2', ), - getItem('User', 'sub1', , [ - getItem('Tom', '3'), - getItem('Bill', '4'), - getItem('Alex', '5'), - ]), - getItem('Team', 'sub2', , [getItem('Team 1', '6'), getItem('Team 2', '8')]), - getItem('Files', '9', ), +const items2: MenuProps['items'] = [ + { + key: 'subsd1', + icon: , + label: (

  Administration

), + children: [ + { + key: '1sd', + label: (Class Schedules), + }, + { + key: '2sd', + label: (Classmate Directory), + }, + { + key: '3sd', + label: (Qualifications), + }, + ], + }, + { + key: 'subsd2', + icon: , + label: (

  My Courses

), + children: [ + { + key: '4sd', + label: (Graduate Program), + }, + { + key: '5sd', + label: (Post-Graduate Program), + }, + ], + }, + { + key: 'subsd3', + icon: , + label: (

  Examinations

), + children: [ + { + key: '6sd', + label: (Exam Scheduled), + }, + { + key: '7sd', + label: (Upcoming Exam), + }, + { + key: '8sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd4', + icon: , + label: (

  Community

), + children: [ + { + key: '9sd', + label: (Exam Scheduled), + }, + { + key: '10sd', + label: (Upcoming Exam), + }, + { + key: '11sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd5', + icon: , + label: (

  Notifications

), + children: [ + { + key: '12sd', + label: (Exam Scheduled), + }, + { + key: '13sd', + label: (Upcoming Exam), + }, + { + key: '14sd', + label: (Passed Exam), + }, + ], + }, + // getItem('Files', '9', ), + { + key: 'grp', + label: '', + type: 'group', + style: { marginTop: '100px' }, + children: [ + { + key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), + label: (

Settings

) + }, + { + key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }), + label: (

Help & Support

) + }, + { + key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }), + label: (

Logout

) + }, + ], + }, +]; +const items: MenuProps['items'] = [ + { + label: 1st menu item, + key: '01sd', + }, + { + type: 'divider', + }, + { + label: 2nd menu item, + key: '02sd', + }, + { + type: 'divider', + }, + { + label: '3rd menu item', + key: '03sd', + }, ]; const App: React.FC = () => { - const [collapsed, setCollapsed] = useState(false); - const { - token: { colorBgContainer, borderRadiusLG }, - } = theme.useToken(); + const [collapsed, setCollapsed] = useState(false); + const [open, setOpen] = React.useState(false); + const [loading, setLoading] = React.useState(true); + + const showLoading = () => { + setOpen(true); + setLoading(true); + + // Simple loading mock. You should add cleanup logic in real world. + setTimeout(() => { + setLoading(false); + }, 100); + }; + const { token: { colorBgContainer}, } = theme.useToken(); return ( - - setCollapsed(value)}> -
IIMTT Logo
- - Hi - - -
- - - User - Bill - -
- Bill is a cat. -
- -
- Ant Design ©{new Date().getFullYear()} Created by Ant UED -
- + + +
+ setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}> +
+
+

IIMTT Logo

+
+
+ + +
+ + +
+
+
+ +

Student Dashboard

+
+ +
+
+ {/* Place content from here */} +
+ +
+
+ +
+ + + ); }; - export default App; \ No newline at end of file diff --git a/app/routes/student-dashboard2.tsx b/app/routes/student-dashboard2.tsx deleted file mode 100644 index 99bc5dc..0000000 --- a/app/routes/student-dashboard2.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { MetaFunction } from "@remix-run/node"; -import StudentDashboard from '../components/StudentDashboard' - -export default function Index() { - return ( -
- {/* Ensure the component name matches the import */} -
- ); -} diff --git a/public/assets/calendar.svg b/public/assets/calendar.svg new file mode 100644 index 0000000..1a96fab --- /dev/null +++ b/public/assets/calendar.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/cart.svg b/public/assets/cart.svg new file mode 100644 index 0000000..866f381 --- /dev/null +++ b/public/assets/cart.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/green-tick.svg b/public/assets/green-tick.svg new file mode 100644 index 0000000..21f7c81 --- /dev/null +++ b/public/assets/green-tick.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/student-dashboard.css b/public/assets/left_side_nav.css similarity index 100% rename from public/assets/student-dashboard.css rename to public/assets/left_side_nav.css diff --git a/public/assets/module.svg b/public/assets/module.svg new file mode 100644 index 0000000..568189c --- /dev/null +++ b/public/assets/module.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/note.svg b/public/assets/note.svg new file mode 100644 index 0000000..0bd3b22 --- /dev/null +++ b/public/assets/note.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/notification-bell.svg b/public/assets/notification-bell.svg new file mode 100644 index 0000000..18b8cd1 --- /dev/null +++ b/public/assets/notification-bell.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file