From 31fc25827639fa482ec44c58110d5da9ee0a7706 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Mon, 23 Jun 2025 13:37:29 +0200
Subject: [PATCH 01/23] Clean code

---
 app/courses/page.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/courses/page.tsx b/app/courses/page.tsx
index 7ab03f0..aee74bb 100644
--- a/app/courses/page.tsx
+++ b/app/courses/page.tsx
@@ -16,9 +16,7 @@ export default function CoursesPage() {
   const isAdmin = user?.organisation?.role === "admin";
 
   useEffect(() => {
-    // Fetch courses from API or database
     async function fetchCourses() {
-      // Replace with actual API call
       const fetchedCourses = await fetch("/api/courses", {
         credentials: "include",
       })
@@ -33,6 +31,5 @@ export default function CoursesPage() {
     fetchCourses();
   }, []);
 
-  // 3) Render the client component that will show/hide admin buttons
   return <CourseList courses={courses} isAdmin={isAdmin} />;
 }

From 6d5f4637677d21839ec597ec6b3b2d7efd28a347 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 00:27:35 +0200
Subject: [PATCH 02/23] Get enrolled and unenrolled courses

---
 app/courses/page.tsx                          | 60 +++++++++++++++++--
 .../organisation/courses/CourseCard.tsx       | 17 ++++++
 2 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/app/courses/page.tsx b/app/courses/page.tsx
index aee74bb..33d5f4a 100644
--- a/app/courses/page.tsx
+++ b/app/courses/page.tsx
@@ -8,6 +8,8 @@ import { useState, useEffect } from "react";
 export default function CoursesPage() {
   const { user } = useAuth();
   const [courses, setCourses] = useState<Course[]>([]);
+  const [enrolled, setEnrolled] = useState<Course[]>([]);
+  const [other, setOther] = useState<Course[]>([]);
 
   if (!user || !user.hasCompletedOnboarding) {
     return null;
@@ -15,8 +17,11 @@ export default function CoursesPage() {
 
   const isAdmin = user?.organisation?.role === "admin";
 
+  // for user: courses and enrolments
+  // for admin: all courses
+
   useEffect(() => {
-    async function fetchCourses() {
+    async function fetchAdminCourses() {
       const fetchedCourses = await fetch("/api/courses", {
         credentials: "include",
       })
@@ -28,8 +33,55 @@ export default function CoursesPage() {
         });
       setCourses(fetchedCourses);
     }
-    fetchCourses();
-  }, []);
+    async function fetchUserCourses() {
+      const userCourses = await fetch("/api/courses/all-user-courses", {
+        credentials: "include",
+      })
+        .then((res) => res.json())
+        .then((data) => {
+          setEnrolled(data.enrolled || []);
+          setOther(data.other || []);
+        })
+        .catch((err) => {
+          console.error("Failed to fetch user courses:", err);
+          setEnrolled([]);
+          setOther([]);
+        });
+    }
+    if (isAdmin) {
+      fetchAdminCourses();
+    } else {
+      fetchUserCourses();
+    }
+  }, [isAdmin]);
+
+  if (isAdmin) {
+    return <CourseList courses={courses} isAdmin={true} />;
+  }
+
+  return (
+    <div className="space-y-8">
+      <section>
+        <h2 className="text-2xl font-semibold text-purple-600">My Courses</h2>
+        {enrolled.length > 0 ? (
+          <CourseList courses={enrolled} isAdmin={false} />
+        ) : (
+          <p className="text-gray-600">
+            You’re not enrolled in any courses yet.
+          </p>
+        )}
+      </section>
 
-  return <CourseList courses={courses} isAdmin={isAdmin} />;
+      <section>
+        <h2 className="text-2xl font-semibold text-purple-600">
+          Available Courses
+        </h2>
+        {other.length > 0 ? (
+          <CourseList courses={other} isAdmin={false} />
+        ) : (
+          <p className="text-gray-600">No other courses available.</p>
+        )}
+      </section>
+    </div>
+  );
 }
diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index 6ab3e5f..d0fd070 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -13,6 +13,15 @@ interface Props {
   isAdmin: boolean;
 }
 
+// todo
+// get user enrollements from backed
+// so from backend: user enrollments + other courses
+// endpoints to:
+// 1. get all courses (admin)
+// 2. get user enrollments (user)
+// 3. get other courses (user)
+// admin is not enrolled in any course
+
 export default function CourseCard({ course, isAdmin }: Props) {
   return (
     <div className="bg-white border rounded-lg p-6 shadow-sm hover:shadow-md transition">
@@ -25,6 +34,14 @@ export default function CourseCard({ course, isAdmin }: Props) {
             View Modules
           </button>
         </Link>
+        {!isAdmin && (
+          <button
+            className="text-purple-600 hover:underline"
+            onClick={() => {}}
+          >
+            Enroll
+          </button>
+        )}
         {isAdmin && (
           <Link href={`/courses/${course.id}/edit`}>
             <button className="px-3 py-1 border border-purple-600 rounded text-purple-600 hover:bg-purple-50">

From e7ff970f31a62c4330ea7bbb1f63c1c10998b7d5 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 00:29:59 +0200
Subject: [PATCH 03/23] Add isenrolled prop

---
 app/courses/page.tsx                           |  6 +++---
 components/organisation/courses/CourseCard.tsx |  5 +++--
 components/organisation/courses/CourseList.tsx | 10 ++++++++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/courses/page.tsx b/app/courses/page.tsx
index 33d5f4a..42cf139 100644
--- a/app/courses/page.tsx
+++ b/app/courses/page.tsx
@@ -56,7 +56,7 @@ export default function CoursesPage() {
   }, [isAdmin]);
 
   if (isAdmin) {
-    return <CourseList courses={courses} isAdmin={true} />;
+    return <CourseList courses={courses} isAdmin={true} isEnrolled={true} />;
   }
 
   return (
@@ -64,7 +64,7 @@ export default function CoursesPage() {
       <section>
         <h2 className="text-2xl font-semibold text-purple-600">My Courses</h2>
         {enrolled.length > 0 ? (
-          <CourseList courses={enrolled} isAdmin={false} />
+          <CourseList courses={enrolled} isAdmin={false} isEnrolled={true} />
         ) : (
           <p className="text-gray-600">
             You’re not enrolled in any courses yet.
@@ -77,7 +77,7 @@ export default function CoursesPage() {
           Available Courses
         </h2>
         {other.length > 0 ? (
-          <CourseList courses={other} isAdmin={false} />
+          <CourseList courses={other} isAdmin={false} isEnrolled={false} />
         ) : (
           <p className="text-gray-600">No other courses available.</p>
         )}
diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index d0fd070..1762d93 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -11,6 +11,7 @@ export interface Course {
 interface Props {
   course: Course;
   isAdmin: boolean;
+  isEnrolled: boolean;
 }
 
 // todo
@@ -22,7 +23,7 @@ interface Props {
 // 3. get other courses (user)
 // admin is not enrolled in any course
 
-export default function CourseCard({ course, isAdmin }: Props) {
+export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
   return (
     <div className="bg-white border rounded-lg p-6 shadow-sm hover:shadow-md transition">
       <h2 className="text-xl font-semibold text-purple-600">{course.name}</h2>
@@ -34,7 +35,7 @@ export default function CourseCard({ course, isAdmin }: Props) {
             View Modules
           </button>
         </Link>
-        {!isAdmin && (
+        {!isAdmin && !isEnrolled && (
           <button
             className="text-purple-600 hover:underline"
             onClick={() => {}}
diff --git a/components/organisation/courses/CourseList.tsx b/components/organisation/courses/CourseList.tsx
index 12b0d58..bef1efc 100644
--- a/components/organisation/courses/CourseList.tsx
+++ b/components/organisation/courses/CourseList.tsx
@@ -6,9 +6,10 @@ import CourseCard, { Course } from "./CourseCard";
 interface Props {
   courses: Course[];
   isAdmin: boolean;
+  isEnrolled: boolean;
 }
 
-export default function CourseList({ courses, isAdmin }: Props) {
+export default function CourseList({ courses, isAdmin, isEnrolled }: Props) {
   return (
     <div className="space-y-6">
       {isAdmin && (
@@ -23,7 +24,12 @@ export default function CourseList({ courses, isAdmin }: Props) {
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {courses.map((c) => (
-          <CourseCard key={c.id} course={c} isAdmin={isAdmin} />
+          <CourseCard
+            key={c.id}
+            course={c}
+            isAdmin={isAdmin}
+            isEnrolled={isEnrolled}
+          />
         ))}
       </div>
     </div>

From 37e2b5fb8996b0487230a42bc68206653eee28be Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 00:33:06 +0200
Subject: [PATCH 04/23] Add api endpoint call to enroll user

---
 .../organisation/courses/CourseCard.tsx       | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index 1762d93..421c97d 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -24,6 +24,27 @@ interface Props {
 // admin is not enrolled in any course
 
 export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
+  const handleEnroll = async () => {
+    try {
+      const response = await fetch("/api/courses/enroll-course", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ courseId: course.id }),
+        credentials: "include",
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to enroll in course");
+      }
+
+      window.location.reload();
+    } catch (error) {
+      console.error("Error enrolling in course:", error);
+    }
+  };
+
   return (
     <div className="bg-white border rounded-lg p-6 shadow-sm hover:shadow-md transition">
       <h2 className="text-xl font-semibold text-purple-600">{course.name}</h2>
@@ -38,7 +59,7 @@ export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
         {!isAdmin && !isEnrolled && (
           <button
             className="text-purple-600 hover:underline"
-            onClick={() => {}}
+            onClick={handleEnroll}
           >
             Enroll
           </button>

From dce05e651100316ef799f582c15153c230a50047 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 00:35:54 +0200
Subject: [PATCH 05/23] Add unenrolled endpoint api call

---
 .../organisation/courses/CourseCard.tsx       | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index 421c97d..7132e6c 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -45,6 +45,27 @@ export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
     }
   };
 
+  const handleUnEnroll = async () => {
+    try {
+      const response = await fetch("/api/courses/unenroll-course", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ courseId: course.id }),
+        credentials: "include",
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to unenroll from course");
+      }
+
+      window.location.reload();
+    } catch (error) {
+      console.error("Error unenrolling from course:", error);
+    }
+  };
+
   return (
     <div className="bg-white border rounded-lg p-6 shadow-sm hover:shadow-md transition">
       <h2 className="text-xl font-semibold text-purple-600">{course.name}</h2>
@@ -64,6 +85,14 @@ export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
             Enroll
           </button>
         )}
+        {!isAdmin && isEnrolled && (
+          <button
+            className="text-purple-600 hover:underline"
+            onClick={handleUnEnroll}
+          >
+            UnEnroll
+          </button>
+        )}
         {isAdmin && (
           <Link href={`/courses/${course.id}/edit`}>
             <button className="px-3 py-1 border border-purple-600 rounded text-purple-600 hover:bg-purple-50">

From 0ebe913933d12aabede31f470b558092dd45edb7 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 00:46:30 +0200
Subject: [PATCH 06/23] Add enrollment requirement for module list

---
 .../organisation/courses/ModuleCard.tsx       | 16 +++++++---
 .../organisation/courses/ModuleList.tsx       | 32 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/components/organisation/courses/ModuleCard.tsx b/components/organisation/courses/ModuleCard.tsx
index fc4fdb9..de9c741 100644
--- a/components/organisation/courses/ModuleCard.tsx
+++ b/components/organisation/courses/ModuleCard.tsx
@@ -13,9 +13,10 @@ export interface Module {
 interface Props {
   module: Module;
   isEditMode: boolean;
+  isEnrolled: boolean;
 }
 
-export default function ModuleCard({ module, isEditMode }: Props) {
+export default function ModuleCard({ module, isEditMode, isEnrolled }: Props) {
   const { courseId } = useParams() as { courseId: string };
 
   return (
@@ -30,11 +31,18 @@ export default function ModuleCard({ module, isEditMode }: Props) {
           </p>
         </div>
         <div className="flex items-center space-x-2">
-          <Link href={`/courses/${courseId}/modules/${module.id}`}>
+          {(isEnrolled || isEditMode) && (
+            <Link href={`/courses/${courseId}/modules/${module.id}`}>
+              <button className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded">
+                Open
+              </button>
+            </Link>
+          )}
+          {!isEnrolled && !isEditMode && (
             <button className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded">
-              Open
+              Enroll to View
             </button>
-          </Link>
+          )}
           {isEditMode && (
             <Link href={`/courses/${courseId}/modules/${module.id}/edit`}>
               <button className="px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded">
diff --git a/components/organisation/courses/ModuleList.tsx b/components/organisation/courses/ModuleList.tsx
index ae63b8d..8a6da03 100644
--- a/components/organisation/courses/ModuleList.tsx
+++ b/components/organisation/courses/ModuleList.tsx
@@ -10,6 +10,7 @@ interface Props {
 
 export default function ModuleList({ courseId, isEditMode }: Props) {
   const [modules, setModules] = useState<Module[]>([]);
+  const [enrolled, setEnrolled] = useState<boolean>(false);
 
   useEffect(() => {
     async function fetchModules() {
@@ -32,6 +33,30 @@ export default function ModuleList({ courseId, isEditMode }: Props) {
         setModules([]);
       }
     }
+    async function checkEnrollmentInCourse() {
+      try {
+        const response = await fetch(`/api/courses/is-enrolled`, {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ courseId }),
+        });
+        if (!response.ok) {
+          throw new Error("Failed to check enrollment");
+        }
+        const data = await response.json();
+        if (data.enrolled) {
+          setEnrolled(true);
+        }
+      } catch (error) {
+        console.error("Error checking enrollment:", error);
+        alert("Failed to check enrollment. Please try again later.");
+        return;
+      }
+    }
+    checkEnrollmentInCourse();
     fetchModules();
   }, [courseId]);
 
@@ -42,7 +67,12 @@ export default function ModuleList({ courseId, isEditMode }: Props) {
   return (
     <div className="space-y-4">
       {modules.map((m) => (
-        <ModuleCard key={m.id} module={m} isEditMode={isEditMode} />
+        <ModuleCard
+          key={m.id}
+          module={m}
+          isEditMode={isEditMode}
+          isEnrolled={enrolled}
+        />
       ))}
     </div>
   );

From 8717b93869cee47b3822a7d5415cfea496f007d2 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 00:51:27 +0200
Subject: [PATCH 07/23] Add enrollment requirement for module

---
 .../organisation/courses/ModuleDetail.tsx     | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index 8a05588..447793d 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -27,6 +27,7 @@ interface Props {
 
 export default function ModuleDetail({ moduleId }: Props) {
   const [data, setData] = React.useState<ModuleDetailData | null>(null);
+  const [endrolled, setEnrolled] = React.useState<boolean>(false);
 
   useEffect(() => {
     async function fetchModuleDetails() {
@@ -49,6 +50,27 @@ export default function ModuleDetail({ moduleId }: Props) {
         setData(null);
       }
     }
+    async function checkEnrollmentInCourse() {
+      try {
+        const response = await fetch(`/api/courses/is-enrolled`, {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ courseId: moduleId }),
+        });
+        if (!response.ok) {
+          throw new Error("Failed to check enrollment");
+        }
+        const data = await response.json();
+        setEnrolled(data.enrolled);
+      } catch (error) {
+        console.error("Error checking enrollment:", error);
+        setEnrolled(false);
+      }
+    }
+    checkEnrollmentInCourse();
     fetchModuleDetails();
   }, [moduleId]);
 
@@ -56,6 +78,14 @@ export default function ModuleDetail({ moduleId }: Props) {
     return <p className="text-gray-600">Loading module details...</p>;
   }
 
+  if (!endrolled) {
+    return (
+      <p className="text-red-600">
+        You must be enrolled in the course to view this module.
+      </p>
+    );
+  }
+
   const finalUrl = `http://localhost:4000${data.file_url}`;
   return (
     <div className="space-y-6">

From eea5617310e23f9ff520393f581eeed9a6dd0332 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 01:04:44 +0200
Subject: [PATCH 08/23] fix bug of finding enrollment by course id

---
 components/organisation/courses/ModuleDetail.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index 447793d..4ebeeb8 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect } from "react";
+import { useParams } from "next/navigation";
 
 export interface QuizQuestion {
   id: number;
@@ -28,6 +29,7 @@ interface Props {
 export default function ModuleDetail({ moduleId }: Props) {
   const [data, setData] = React.useState<ModuleDetailData | null>(null);
   const [endrolled, setEnrolled] = React.useState<boolean>(false);
+  const { courseId } = useParams() as { courseId: string };
 
   useEffect(() => {
     async function fetchModuleDetails() {
@@ -58,7 +60,7 @@ export default function ModuleDetail({ moduleId }: Props) {
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ courseId: moduleId }),
+          body: JSON.stringify({ courseId: courseId }),
         });
         if (!response.ok) {
           throw new Error("Failed to check enrollment");

From 23681292ca50eabd248c08d9601feb24f27afb45 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 01:10:10 +0200
Subject: [PATCH 09/23] improve spacing in courses page

---
 app/courses/page.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/courses/page.tsx b/app/courses/page.tsx
index 42cf139..1abcb6f 100644
--- a/app/courses/page.tsx
+++ b/app/courses/page.tsx
@@ -62,7 +62,9 @@ export default function CoursesPage() {
   return (
     <div className="space-y-8">
       <section>
-        <h2 className="text-2xl font-semibold text-purple-600">My Courses</h2>
+        <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+          My Courses
+        </h2>
         {enrolled.length > 0 ? (
           <CourseList courses={enrolled} isAdmin={false} isEnrolled={true} />
         ) : (
@@ -73,7 +75,7 @@ export default function CoursesPage() {
       </section>
 
       <section>
-        <h2 className="text-2xl font-semibold text-purple-600">
+        <h2 className="text-2xl font-semibold text-purple-600 mb-4">
           Available Courses
         </h2>
         {other.length > 0 ? (

From f4a56a901c040d5ecc00ade6f3b37553f54166bc Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 01:59:12 +0200
Subject: [PATCH 10/23] Store quiz response

---
 .../organisation/courses/ModuleDetail.tsx     | 169 +++++++++++++-----
 1 file changed, 120 insertions(+), 49 deletions(-)

diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index 4ebeeb8..de3cb61 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -2,12 +2,18 @@
 
 import React, { useEffect } from "react";
 import { useParams } from "next/navigation";
+import { useState } from "react";
+
+export interface QuizOption {
+  id: number;
+  option_text: string;
+}
 
 export interface QuizQuestion {
   id: number;
   question_text: string;
-  question_type: string;
-  options?: { id: number; option_text: string }[];
+  question_type: "multiple_choice" | "true_false";
+  options: QuizOption[];
 }
 
 export interface ModuleDetailData {
@@ -17,6 +23,7 @@ export interface ModuleDetailData {
   description?: string;
   file_url?: string;
   quiz?: {
+    id: number;
     title: string;
     questions: QuizQuestion[];
   };
@@ -30,6 +37,7 @@ export default function ModuleDetail({ moduleId }: Props) {
   const [data, setData] = React.useState<ModuleDetailData | null>(null);
   const [endrolled, setEnrolled] = React.useState<boolean>(false);
   const { courseId } = useParams() as { courseId: string };
+  const [answers, setAnswers] = useState<Record<number, number | number[]>>({});
 
   useEffect(() => {
     async function fetchModuleDetails() {
@@ -88,55 +96,118 @@ export default function ModuleDetail({ moduleId }: Props) {
     );
   }
 
-  const finalUrl = `http://localhost:4000${data.file_url}`;
+  if (
+    data.module_type !== "video" &&
+    data.module_type !== "pdf" &&
+    data.module_type !== "slide" &&
+    data.module_type !== "quiz"
+  ) {
+    return (
+      <p className="text-gray-600">
+        No preview available for this module type: {data.module_type}.
+      </p>
+    );
+  }
+
+  if (data.module_type !== "quiz") {
+    const finalUrl = `http://localhost:4000${data.file_url}`;
+    return (
+      <div className="space-y-6">
+        <h2 className="text-3xl font-bold text-purple-600">{data.title}</h2>
+        <p>{data.description}</p>
+
+        {data.module_type === "video" && data.file_url && (
+          <video controls src={finalUrl} className="w-full rounded-lg" />
+        )}
+
+        {["pdf", "slide"].includes(data.module_type) && data.file_url && (
+          <iframe
+            src={finalUrl}
+            className="w-full h-[600px] rounded-lg border"
+          />
+        )}
+      </div>
+    );
+  }
+
+  const { quiz } = data;
+
+  const handleChange = (qId: number, optId: number, multiple: boolean) => {
+    setAnswers((ans) => {
+      if (multiple) {
+        const prev = Array.isArray(ans[qId]) ? (ans[qId] as number[]) : [];
+        if (prev.includes(optId)) {
+          return { ...ans, [qId]: prev.filter((x) => x !== optId) };
+        } else {
+          return { ...ans, [qId]: [...prev, optId] };
+        }
+      } else {
+        return { ...ans, [qId]: optId };
+      }
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const payload = {
+      quizId: quiz?.id,
+      answers: Object.entries(answers).map(([qId, sel]) => ({
+        questionId: Number(qId),
+
+        selectedOptionIds: Array.isArray(sel) ? sel : [sel],
+      })),
+    };
+    try {
+      const res = await fetch("/api/courses/submit-quiz", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) throw new Error("Submit failed");
+      alert("Quiz submitted!");
+    } catch (err) {
+      console.error(err);
+      alert("Failed to submit quiz.");
+    }
+  };
+
   return (
-    <div className="space-y-6">
-      <h2 className="text-3xl font-bold text-purple-600">{data.title}</h2>
-      <p>{data.description}</p>
-
-      {data.module_type === "video" && data.file_url && (
-        <video controls src={finalUrl} className="w-full rounded-lg" />
-      )}
-
-      {["pdf", "slide"].includes(data.module_type) && data.file_url && (
-        <iframe src={finalUrl} className="w-full h-[600px] rounded-lg border" />
-      )}
-
-      {data.module_type === "quiz" && data.quiz && (
-        <div className="space-y-4">
-          <h3 className="text-2xl font-semibold">{data.quiz.title}</h3>
-          {data.quiz.questions.map((q) => (
-            <div key={q.id} className="space-y-2">
-              <p className="font-medium">{q.question_text}</p>
-              {q.options?.map((opt) => (
-                <div key={opt.id} className="flex items-center space-x-2">
-                  {q.question_type === "multiple_choice" && (
-                    <input
-                      type="checkbox"
-                      name={`q-${q.id}`}
-                      disabled
-                      className="border-gray-300"
-                    />
-                  )}
-                  {q.question_type === "true_false" && (
-                    <input
-                      type="radio"
-                      name={`q-${q.id}`}
-                      disabled
-                      className="border-gray-300"
-                    />
-                  )}
-                  <label>{opt.option_text}</label>
-                </div>
-              ))}
-            </div>
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <h2 className="text-3xl font-bold">{data.title}</h2>
+      {quiz?.questions.map((q) => (
+        <div key={q.id} className="space-y-2">
+          <p className="font-medium">{q.question_text}</p>
+          {q.options.map((opt) => (
+            <label key={opt.id} className="flex items-center space-x-2">
+              <input
+                type={q.question_type === "true_false" ? "radio" : "checkbox"}
+                name={`q-${q.id}`}
+                value={opt.id}
+                checked={
+                  q.question_type === "true_false"
+                    ? answers[q.id] === opt.id
+                    : Array.isArray(answers[q.id]) &&
+                      (answers[q.id] as number[]).includes(opt.id)
+                }
+                onChange={() =>
+                  handleChange(q.id, opt.id, q.question_type !== "true_false")
+                }
+                className="border-gray-300"
+                required={q.question_type === "true_false"}
+              />
+              <span>{opt.option_text}</span>
+            </label>
           ))}
         </div>
-      )}
-
-      {!["video", "pdf", "slide", "quiz"].includes(data.module_type) && (
-        <p className="text-gray-600">No preview available for this module.</p>
-      )}
-    </div>
+      ))}
+      <button
+        type="submit"
+        className="px-4 py-2 bg-purple-600 text-white rounded"
+      >
+        Submit Quiz
+      </button>
+    </form>
   );
 }

From 50d90a68256b14452f601782f39b4cadd0a2bc33 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 02:02:28 +0200
Subject: [PATCH 11/23] Clean up code

---
 app/courses/page.tsx                           | 3 ---
 components/organisation/courses/CourseCard.tsx | 9 ---------
 2 files changed, 12 deletions(-)

diff --git a/app/courses/page.tsx b/app/courses/page.tsx
index 1abcb6f..5d8bca5 100644
--- a/app/courses/page.tsx
+++ b/app/courses/page.tsx
@@ -17,9 +17,6 @@ export default function CoursesPage() {
 
   const isAdmin = user?.organisation?.role === "admin";
 
-  // for user: courses and enrolments
-  // for admin: all courses
-
   useEffect(() => {
     async function fetchAdminCourses() {
       const fetchedCourses = await fetch("/api/courses", {
diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index 7132e6c..78c243a 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -14,15 +14,6 @@ interface Props {
   isEnrolled: boolean;
 }
 
-// todo
-// get user enrollements from backed
-// so from backend: user enrollments + other courses
-// endpoints to:
-// 1. get all courses (admin)
-// 2. get user enrollments (user)
-// 3. get other courses (user)
-// admin is not enrolled in any course
-
 export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
   const handleEnroll = async () => {
     try {

From 371e55fb5ec19a6d68f6aafbb26313919c3dce7d Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 03:00:57 +0200
Subject: [PATCH 12/23] Display quiz results

---
 .../organisation/courses/ModuleDetail.tsx     | 64 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 2 deletions(-)

diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index de3cb61..91253e5 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -39,6 +39,16 @@ export default function ModuleDetail({ moduleId }: Props) {
   const { courseId } = useParams() as { courseId: string };
   const [answers, setAnswers] = useState<Record<number, number | number[]>>({});
 
+  const [results, setResults] = useState<
+    | {
+        questionId: number;
+        correctOptions: { id: number; text: string }[];
+        selectedOptions: { id: number; text: string }[];
+        isCorrect: boolean;
+      }[]
+    | null
+  >(null);
+
   useEffect(() => {
     async function fetchModuleDetails() {
       try {
@@ -132,6 +142,16 @@ export default function ModuleDetail({ moduleId }: Props) {
 
   const { quiz } = data;
 
+  // todo
+  // get results for quiz
+  // steps: send result to backend; get back: results
+  // then display results
+
+  // show results if already submitted
+  // steps: have to send a backend request to get results, otherwise show quiz form
+
+  // give option to retake quiz if already submitted
+
   const handleChange = (qId: number, optId: number, multiple: boolean) => {
     setAnswers((ans) => {
       if (multiple) {
@@ -159,20 +179,60 @@ export default function ModuleDetail({ moduleId }: Props) {
       })),
     };
     try {
-      const res = await fetch("/api/courses/submit-quiz", {
+      const res = await fetch("/api/courses/submit-and-grade-quiz", {
         method: "POST",
         credentials: "include",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(payload),
       });
       if (!res.ok) throw new Error("Submit failed");
-      alert("Quiz submitted!");
+      const data = await res.json();
+      setResults(data.results);
     } catch (err) {
       console.error(err);
       alert("Failed to submit quiz.");
     }
   };
 
+  const handleRetake = () => {
+    setResults(null);
+    setAnswers({});
+  };
+
+  if (data.module_type === "quiz" && results) {
+    return (
+      <div className="space-y-6">
+        <h2 className="text-3xl font-bold">{data.title} — Results</h2>
+        {results.map((r) => (
+          <div key={r.questionId} className="p-4 border rounded space-y-2">
+            <p className="font-medium">Question {r.questionId}</p>
+            <p>
+              Your answers:&nbsp;
+              {r.selectedOptions.map((o) => o.text).join(", ")}
+            </p>
+            <p>
+              Correct:&nbsp;
+              {r.correctOptions.map((o) => o.text).join(", ")}
+            </p>
+            <p>
+              {r.isCorrect ? (
+                <span className="text-green-600">Correct</span>
+              ) : (
+                <span className="text-red-600">Incorrect</span>
+              )}
+            </p>
+          </div>
+        ))}
+        <button
+          onClick={handleRetake}
+          className="px-4 py-2 bg-yellow-500 text-white rounded"
+        >
+          Retake Quiz
+        </button>
+      </div>
+    );
+  }
+
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       <h2 className="text-3xl font-bold">{data.title}</h2>

From 997d1414c3d3d940856912584f7b12ae520ff5e0 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Tue, 24 Jun 2025 03:16:06 +0200
Subject: [PATCH 13/23] Add endpoint call to show latest results for quiz

---
 .../organisation/courses/ModuleDetail.tsx     | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index 91253e5..a2f7375 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -35,7 +35,7 @@ interface Props {
 
 export default function ModuleDetail({ moduleId }: Props) {
   const [data, setData] = React.useState<ModuleDetailData | null>(null);
-  const [endrolled, setEnrolled] = React.useState<boolean>(false);
+  const [enrolled, setEnrolled] = React.useState<boolean>(false);
   const { courseId } = useParams() as { courseId: string };
   const [answers, setAnswers] = useState<Record<number, number | number[]>>({});
 
@@ -65,6 +65,9 @@ export default function ModuleDetail({ moduleId }: Props) {
         }
         const result = await response.json();
         setData(result);
+        if (result.module_type === "quiz" && result.quiz) {
+          getQuizResults(result.quiz.id);
+        }
       } catch (error) {
         console.error("Error fetching module details:", error);
         setData(null);
@@ -90,6 +93,26 @@ export default function ModuleDetail({ moduleId }: Props) {
         setEnrolled(false);
       }
     }
+
+    async function getQuizResults(quizId: number) {
+      try {
+        const { responseId, results } = await fetch(
+          "/api/courses/get-latest-quiz-response",
+          {
+            method: "POST",
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ quizId: quizId }),
+          }
+        ).then((r) => r.json());
+
+        if (responseId && results) {
+          setResults(results);
+        }
+      } catch (err) {
+        console.error("Could not fetch or grade quiz:", err);
+      }
+    }
     checkEnrollmentInCourse();
     fetchModuleDetails();
   }, [moduleId]);
@@ -98,7 +121,7 @@ export default function ModuleDetail({ moduleId }: Props) {
     return <p className="text-gray-600">Loading module details...</p>;
   }
 
-  if (!endrolled) {
+  if (!enrolled) {
     return (
       <p className="text-red-600">
         You must be enrolled in the course to view this module.
@@ -142,16 +165,6 @@ export default function ModuleDetail({ moduleId }: Props) {
 
   const { quiz } = data;
 
-  // todo
-  // get results for quiz
-  // steps: send result to backend; get back: results
-  // then display results
-
-  // show results if already submitted
-  // steps: have to send a backend request to get results, otherwise show quiz form
-
-  // give option to retake quiz if already submitted
-
   const handleChange = (qId: number, optId: number, multiple: boolean) => {
     setAnswers((ans) => {
       if (multiple) {

From dd6fb0da2064a64a2e741c752e9e2f731cd5e337 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 25 Jun 2025 22:43:05 +0200
Subject: [PATCH 14/23] Add backend call to check for user status

---
 .../organisation/courses/ModuleCard.tsx       | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/components/organisation/courses/ModuleCard.tsx b/components/organisation/courses/ModuleCard.tsx
index de9c741..f342ff6 100644
--- a/components/organisation/courses/ModuleCard.tsx
+++ b/components/organisation/courses/ModuleCard.tsx
@@ -2,6 +2,8 @@
 
 import Link from "next/link";
 import { useParams } from "next/navigation";
+import { useEffect } from "react";
+import { useState } from "react";
 
 export interface Module {
   id: number;
@@ -18,6 +20,33 @@ interface Props {
 
 export default function ModuleCard({ module, isEditMode, isEnrolled }: Props) {
   const { courseId } = useParams() as { courseId: string };
+  const [moduleStatus, setModuleStatus] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function checkModuleStatus() {
+      try {
+        const response = await fetch(`/api/courses/get-module-status`, {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ moduleId: module.id }),
+        });
+        if (!response.ok) {
+          throw new Error("Failed to fetch module status");
+        }
+        const data = await response.json();
+        setModuleStatus(data.status || null);
+      } catch (error) {
+        console.error("Error fetching module status:", error);
+        setModuleStatus(null);
+      }
+    }
+    if (isEnrolled && !isEditMode) {
+      checkModuleStatus();
+    }
+  }, [module.id]);
 
   return (
     <div className="bg-white border rounded-lg p-4 shadow-sm hover:shadow-md transition">
@@ -34,7 +63,11 @@ export default function ModuleCard({ module, isEditMode, isEnrolled }: Props) {
           {(isEnrolled || isEditMode) && (
             <Link href={`/courses/${courseId}/modules/${module.id}`}>
               <button className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded">
-                Open
+                {moduleStatus === "completed"
+                  ? "View Completed"
+                  : moduleStatus === "in-progress"
+                  ? "Continue"
+                  : "View"}
               </button>
             </Link>
           )}

From ec83393f9a418ad1d4d5e04cbe90ac109b664c00 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 25 Jun 2025 23:03:23 +0200
Subject: [PATCH 15/23] Add functionality to update module status

---
 .../organisation/courses/ModuleCard.tsx       |  4 +-
 .../organisation/courses/ModuleDetail.tsx     | 82 ++++++++++++++++++-
 2 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/components/organisation/courses/ModuleCard.tsx b/components/organisation/courses/ModuleCard.tsx
index f342ff6..abb7ffd 100644
--- a/components/organisation/courses/ModuleCard.tsx
+++ b/components/organisation/courses/ModuleCard.tsx
@@ -64,8 +64,8 @@ export default function ModuleCard({ module, isEditMode, isEnrolled }: Props) {
             <Link href={`/courses/${courseId}/modules/${module.id}`}>
               <button className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded">
                 {moduleStatus === "completed"
-                  ? "View Completed"
-                  : moduleStatus === "in-progress"
+                  ? "View Completed Module"
+                  : moduleStatus === "in_progress"
                   ? "Continue"
                   : "View"}
               </button>
diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index a2f7375..083b766 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -38,6 +38,7 @@ export default function ModuleDetail({ moduleId }: Props) {
   const [enrolled, setEnrolled] = React.useState<boolean>(false);
   const { courseId } = useParams() as { courseId: string };
   const [answers, setAnswers] = useState<Record<number, number | number[]>>({});
+  const [moduleStatus, setModuleStatus] = useState<string | null>(null);
 
   const [results, setResults] = useState<
     | {
@@ -88,12 +89,36 @@ export default function ModuleDetail({ moduleId }: Props) {
         }
         const data = await response.json();
         setEnrolled(data.enrolled);
+        if (data.enrolled) {
+          checkModuleStatus();
+        }
       } catch (error) {
         console.error("Error checking enrollment:", error);
         setEnrolled(false);
       }
     }
 
+    async function checkModuleStatus() {
+      try {
+        const response = await fetch(`/api/courses/get-module-status`, {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ moduleId: moduleId }),
+        });
+        if (!response.ok) {
+          throw new Error("Failed to fetch module status");
+        }
+        const data = await response.json();
+        setModuleStatus(data.status || null);
+      } catch (error) {
+        console.error("Error fetching module status:", error);
+        setModuleStatus(null);
+      }
+    }
+
     async function getQuizResults(quizId: number) {
       try {
         const { responseId, results } = await fetch(
@@ -145,7 +170,62 @@ export default function ModuleDetail({ moduleId }: Props) {
   if (data.module_type !== "quiz") {
     const finalUrl = `http://localhost:4000${data.file_url}`;
     return (
-      <div className="space-y-6">
+      <div className="space-y-4">
+        <div className="flex gap-4 mb-6">
+          {moduleStatus === "not_started" && (
+            <button
+              onClick={async () => {
+                await fetch("/api/courses/mark-module-started", {
+                  method: "POST",
+                  credentials: "include",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({ moduleId: data.id }),
+                });
+                alert("Module started!");
+                setModuleStatus("in_progress");
+              }}
+              className="px-4 py-2 bg-blue-600 text-white rounded"
+            >
+              Start Module
+            </button>
+          )}
+
+          {moduleStatus === "in_progress" && (
+            <button
+              onClick={async () => {
+                await fetch("/api/courses/mark-module-completed", {
+                  method: "POST",
+                  credentials: "include",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({ moduleId: data.id }),
+                });
+                alert("Module completed!");
+                setModuleStatus("completed");
+              }}
+              className="px-4 py-2 bg-green-600 text-white rounded"
+            >
+              Mark as Completed
+            </button>
+          )}
+
+          {moduleStatus === "completed" && (
+            <button
+              onClick={async () => {
+                await fetch("/api/courses/mark-module-started", {
+                  method: "POST",
+                  credentials: "include",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({ moduleId: data.id }),
+                });
+                alert("Module restarted!");
+                setModuleStatus("in_progress");
+              }}
+              className="px-4 py-2 bg-green-600 text-white rounded"
+            >
+              Module has been completed. Reset Module Progress
+            </button>
+          )}
+        </div>
         <h2 className="text-3xl font-bold text-purple-600">{data.title}</h2>
         <p>{data.description}</p>
 

From d88015e88a168cb1b51a7aa3068b1ccc2caa56d1 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 25 Jun 2025 23:09:34 +0200
Subject: [PATCH 16/23] update colour of mark module as completed

---
 components/organisation/courses/ModuleDetail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index 083b766..2d1d45d 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -202,7 +202,7 @@ export default function ModuleDetail({ moduleId }: Props) {
                 alert("Module completed!");
                 setModuleStatus("completed");
               }}
-              className="px-4 py-2 bg-green-600 text-white rounded"
+              className="px-4 py-2 bg-red-600 text-white rounded"
             >
               Mark as Completed
             </button>

From 422403577469ee60a590be002c02315b8140668e Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 25 Jun 2025 23:22:26 +0200
Subject: [PATCH 17/23] Dont show Module enrollments for Admin

---
 .../[courseId]/modules/[moduleId]/page.tsx    |  9 ++++---
 .../organisation/courses/ModuleDetail.tsx     | 25 +++++++++++++++++--
 .../organisation/courses/ModuleList.tsx       |  1 -
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/courses/[courseId]/modules/[moduleId]/page.tsx b/app/courses/[courseId]/modules/[moduleId]/page.tsx
index cc8e5b2..f948bb9 100644
--- a/app/courses/[courseId]/modules/[moduleId]/page.tsx
+++ b/app/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -1,18 +1,19 @@
 // app/courses/[courseId]/modules/[moduleId]/page.tsx
-import ModuleDetail, {
-  ModuleDetailData,
-} from "@/components/organisation/courses/ModuleDetail";
+import ModuleDetail from "@/components/organisation/courses/ModuleDetail";
+import { getAuthUser } from "@/lib/auth";
 
 export default async function ModulePage({
   params,
 }: {
   params: { courseId: string; moduleId: string };
 }) {
+  const user = await getAuthUser();
+  const isAdmin = user?.organisation?.role === "admin";
   const { moduleId } = await params;
 
   return (
     <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
-      <ModuleDetail moduleId={moduleId} />
+      <ModuleDetail moduleId={moduleId} isAdmin={isAdmin} />
     </div>
   );
 }
diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index 2d1d45d..ce0f50e 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -31,9 +31,10 @@ export interface ModuleDetailData {
 
 interface Props {
   moduleId: string;
+  isAdmin: boolean;
 }
 
-export default function ModuleDetail({ moduleId }: Props) {
+export default function ModuleDetail({ moduleId, isAdmin }: Props) {
   const [data, setData] = React.useState<ModuleDetailData | null>(null);
   const [enrolled, setEnrolled] = React.useState<boolean>(false);
   const { courseId } = useParams() as { courseId: string };
@@ -89,7 +90,7 @@ export default function ModuleDetail({ moduleId }: Props) {
         }
         const data = await response.json();
         setEnrolled(data.enrolled);
-        if (data.enrolled) {
+        if (data.enrolled && !isAdmin) {
           checkModuleStatus();
         }
       } catch (error) {
@@ -263,6 +264,25 @@ export default function ModuleDetail({ moduleId }: Props) {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    if (isAdmin) {
+      return;
+    }
+
+    const missing = quiz!.questions
+      .filter((q) => q.question_type === "multiple_choice")
+      .filter((q) => {
+        const sel = answers[q.id];
+        return !Array.isArray(sel) || sel.length === 0;
+      });
+
+    if (missing.length > 0) {
+      alert(
+        "Please select at least one option for:\n" +
+          missing.map((q) => `• ${q.question_text}`).join("\n")
+      );
+      return;
+    }
+
     const payload = {
       quizId: quiz?.id,
       answers: Object.entries(answers).map(([qId, sel]) => ({
@@ -349,6 +369,7 @@ export default function ModuleDetail({ moduleId }: Props) {
                 }
                 className="border-gray-300"
                 required={q.question_type === "true_false"}
+                disabled={isAdmin}
               />
               <span>{opt.option_text}</span>
             </label>
diff --git a/components/organisation/courses/ModuleList.tsx b/components/organisation/courses/ModuleList.tsx
index 8a6da03..4025ef5 100644
--- a/components/organisation/courses/ModuleList.tsx
+++ b/components/organisation/courses/ModuleList.tsx
@@ -52,7 +52,6 @@ export default function ModuleList({ courseId, isEditMode }: Props) {
         }
       } catch (error) {
         console.error("Error checking enrollment:", error);
-        alert("Failed to check enrollment. Please try again later.");
         return;
       }
     }

From 081ad4b32e97e7e1b0d8a96906b04c6aeaafc29d Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 25 Jun 2025 23:32:05 +0200
Subject: [PATCH 18/23] Show course progress on course card

---
 components/organisation/courses/CourseCard.tsx   | 16 ++++++++++++++++
 components/organisation/courses/ModuleDetail.tsx |  4 ++++
 2 files changed, 20 insertions(+)

diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index 78c243a..dd922a5 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -6,6 +6,8 @@ export interface Course {
   id: number;
   name: string;
   description?: string;
+  total_modules?: number;
+  completed_modules?: number;
 }
 
 interface Props {
@@ -62,6 +64,20 @@ export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
       <h2 className="text-xl font-semibold text-purple-600">{course.name}</h2>
       <p className="mt-2 text-gray-700">{course.description?.slice(0, 100)}</p>
 
+      {!isAdmin && isEnrolled && (
+        <p className="mt-3 text-sm text-gray-600">
+          Progress:{" "}
+          <span className="font-medium text-gray-800">
+            {course.completed_modules ?? 0}
+          </span>
+          /
+          <span className="font-medium text-gray-800">
+            {course.total_modules ?? 0}
+          </span>{" "}
+          modules completed.
+        </p>
+      )}
+
       <div className="mt-4 flex items-center space-x-4">
         <Link href={`/courses/${course.id}`}>
           <button className="text-purple-600 hover:underline">
diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index ce0f50e..ab0622b 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -349,6 +349,10 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       <h2 className="text-3xl font-bold">{data.title}</h2>
+      <p className="text-red-600">
+        Please note that if you leave this page without submitting, your answers
+        will be lost
+      </p>
       {quiz?.questions.map((q) => (
         <div key={q.id} className="space-y-2">
           <p className="font-medium">{q.question_text}</p>

From cda3215ff025ebb986ebd4be281d505e07a54ac8 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 25 Jun 2025 23:35:19 +0200
Subject: [PATCH 19/23] Add button to mark course as completed

---
 .../organisation/courses/CourseCard.tsx       | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index dd922a5..9e3d361 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -59,6 +59,27 @@ export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
     }
   };
 
+  const handleCompleteCourse = async () => {
+    try {
+      const res = await fetch("/api/courses/complete-course", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ courseId: course.id }),
+      });
+      if (!res.ok) throw new Error("Failed to complete course");
+      window.location.reload();
+    } catch (err) {
+      console.error(err);
+      alert("Could not mark course complete");
+    }
+  };
+
+  const allDone =
+    course.total_modules &&
+    course.completed_modules === course.total_modules &&
+    course.total_modules > 0;
+
   return (
     <div className="bg-white border rounded-lg p-6 shadow-sm hover:shadow-md transition">
       <h2 className="text-xl font-semibold text-purple-600">{course.name}</h2>
@@ -78,6 +99,15 @@ export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
         </p>
       )}
 
+      {allDone && !isAdmin && (
+        <button
+          onClick={handleCompleteCourse}
+          className="mt-4 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+        >
+          Mark Course as Completed
+        </button>
+      )}
+
       <div className="mt-4 flex items-center space-x-4">
         <Link href={`/courses/${course.id}`}>
           <button className="text-purple-600 hover:underline">

From d80262c193040a56734219d8017840eadde5e4de Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 25 Jun 2025 23:53:01 +0200
Subject: [PATCH 20/23] display completed courses

---
 app/courses/page.tsx                          | 41 +++++++++++++++++--
 .../organisation/courses/CourseCard.tsx       | 14 +++++--
 .../organisation/courses/CourseList.tsx       |  9 +++-
 3 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/app/courses/page.tsx b/app/courses/page.tsx
index 5d8bca5..d91be7c 100644
--- a/app/courses/page.tsx
+++ b/app/courses/page.tsx
@@ -10,6 +10,7 @@ export default function CoursesPage() {
   const [courses, setCourses] = useState<Course[]>([]);
   const [enrolled, setEnrolled] = useState<Course[]>([]);
   const [other, setOther] = useState<Course[]>([]);
+  const [completed, setCompleted] = useState<Course[]>([]);
 
   if (!user || !user.hasCompletedOnboarding) {
     return null;
@@ -38,11 +39,13 @@ export default function CoursesPage() {
         .then((data) => {
           setEnrolled(data.enrolled || []);
           setOther(data.other || []);
+          setCompleted(data.completed || []);
         })
         .catch((err) => {
           console.error("Failed to fetch user courses:", err);
           setEnrolled([]);
           setOther([]);
+          setCompleted([]);
         });
     }
     if (isAdmin) {
@@ -53,7 +56,14 @@ export default function CoursesPage() {
   }, [isAdmin]);
 
   if (isAdmin) {
-    return <CourseList courses={courses} isAdmin={true} isEnrolled={true} />;
+    return (
+      <CourseList
+        courses={courses}
+        isAdmin={true}
+        isEnrolled={true}
+        isCompleted={true}
+      />
+    );
   }
 
   return (
@@ -63,7 +73,12 @@ export default function CoursesPage() {
           My Courses
         </h2>
         {enrolled.length > 0 ? (
-          <CourseList courses={enrolled} isAdmin={false} isEnrolled={true} />
+          <CourseList
+            courses={enrolled}
+            isAdmin={false}
+            isEnrolled={true}
+            isCompleted={false}
+          />
         ) : (
           <p className="text-gray-600">
             You’re not enrolled in any courses yet.
@@ -76,11 +91,31 @@ export default function CoursesPage() {
           Available Courses
         </h2>
         {other.length > 0 ? (
-          <CourseList courses={other} isAdmin={false} isEnrolled={false} />
+          <CourseList
+            courses={other}
+            isAdmin={false}
+            isEnrolled={false}
+            isCompleted={false}
+          />
         ) : (
           <p className="text-gray-600">No other courses available.</p>
         )}
       </section>
+      <section>
+        <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+          Completed Courses
+        </h2>
+        {completed.length > 0 ? (
+          <CourseList
+            courses={completed}
+            isAdmin={false}
+            isEnrolled={false}
+            isCompleted={true}
+          />
+        ) : (
+          <p className="text-gray-600">No completed courses.</p>
+        )}
+      </section>
     </div>
   );
 }
diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index 9e3d361..26a3fab 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -14,9 +14,15 @@ interface Props {
   course: Course;
   isAdmin: boolean;
   isEnrolled: boolean;
+  isCompleted: boolean;
 }
 
-export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
+export default function CourseCard({
+  course,
+  isAdmin,
+  isEnrolled,
+  isCompleted,
+}: Props) {
   const handleEnroll = async () => {
     try {
       const response = await fetch("/api/courses/enroll-course", {
@@ -99,7 +105,7 @@ export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
         </p>
       )}
 
-      {allDone && !isAdmin && (
+      {allDone && !isAdmin && !isCompleted && (
         <button
           onClick={handleCompleteCourse}
           className="mt-4 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
@@ -114,7 +120,7 @@ export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
             View Modules
           </button>
         </Link>
-        {!isAdmin && !isEnrolled && (
+        {!isAdmin && !isEnrolled && !isCompleted && (
           <button
             className="text-purple-600 hover:underline"
             onClick={handleEnroll}
@@ -122,7 +128,7 @@ export default function CourseCard({ course, isAdmin, isEnrolled }: Props) {
             Enroll
           </button>
         )}
-        {!isAdmin && isEnrolled && (
+        {!isAdmin && isEnrolled && !isCompleted && (
           <button
             className="text-purple-600 hover:underline"
             onClick={handleUnEnroll}
diff --git a/components/organisation/courses/CourseList.tsx b/components/organisation/courses/CourseList.tsx
index bef1efc..49f74e2 100644
--- a/components/organisation/courses/CourseList.tsx
+++ b/components/organisation/courses/CourseList.tsx
@@ -7,9 +7,15 @@ interface Props {
   courses: Course[];
   isAdmin: boolean;
   isEnrolled: boolean;
+  isCompleted: boolean;
 }
 
-export default function CourseList({ courses, isAdmin, isEnrolled }: Props) {
+export default function CourseList({
+  courses,
+  isAdmin,
+  isEnrolled,
+  isCompleted,
+}: Props) {
   return (
     <div className="space-y-6">
       {isAdmin && (
@@ -29,6 +35,7 @@ export default function CourseList({ courses, isAdmin, isEnrolled }: Props) {
             course={c}
             isAdmin={isAdmin}
             isEnrolled={isEnrolled}
+            isCompleted={isCompleted}
           />
         ))}
       </div>

From d7f56d406d6a75e2a7f0f225ce0efabb5da0ce21 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 26 Jun 2025 00:04:02 +0200
Subject: [PATCH 21/23] Allow courses to be unenrolled and check for new
 modules after completion

---
 .../organisation/courses/CourseCard.tsx       | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index 26a3fab..9d47288 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -65,6 +65,27 @@ export default function CourseCard({
     }
   };
 
+  const markNotCompleted = async () => {
+    try {
+      const response = await fetch("/api/courses/uncomplete-course", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ courseId: course.id }),
+        credentials: "include",
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to unenroll from course");
+      }
+
+      window.location.reload();
+    } catch (error) {
+      console.error("Error unenrolling from course:", error);
+    }
+  };
+
   const handleCompleteCourse = async () => {
     try {
       const res = await fetch("/api/courses/complete-course", {
@@ -136,6 +157,22 @@ export default function CourseCard({
             UnEnroll
           </button>
         )}
+        {!isAdmin && isCompleted && !allDone && (
+          <button
+            className="text-red-600 hover:underline"
+            onClick={markNotCompleted}
+          >
+            New modules added, click to continue Course
+          </button>
+        )}
+        {!isAdmin && isCompleted && allDone && (
+          <button
+            className="text-red-600 hover:underline"
+            onClick={markNotCompleted}
+          >
+            Mark as Not Completed
+          </button>
+        )}
         {isAdmin && (
           <Link href={`/courses/${course.id}/edit`}>
             <button className="px-3 py-1 border border-purple-600 rounded text-purple-600 hover:bg-purple-50">

From 0c96d5020d06da10f2c19ccf8828613e569e624f Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 26 Jun 2025 00:21:06 +0200
Subject: [PATCH 22/23] Manage permissions if course completed

---
 .../organisation/courses/ModuleDetail.tsx     | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index ab0622b..6f4f74c 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -40,6 +40,7 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
   const { courseId } = useParams() as { courseId: string };
   const [answers, setAnswers] = useState<Record<number, number | number[]>>({});
   const [moduleStatus, setModuleStatus] = useState<string | null>(null);
+  const [courseCompleted, setCourseCompleted] = useState<boolean>(false);
 
   const [results, setResults] = useState<
     | {
@@ -114,9 +115,11 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
         }
         const data = await response.json();
         setModuleStatus(data.status || null);
+        setCourseCompleted(data.isCourseCompleted || false);
       } catch (error) {
         console.error("Error fetching module status:", error);
         setModuleStatus(null);
+        setCourseCompleted(false);
       }
     }
 
@@ -173,7 +176,7 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
     return (
       <div className="space-y-4">
         <div className="flex gap-4 mb-6">
-          {moduleStatus === "not_started" && (
+          {moduleStatus === "not_started" && !courseCompleted && (
             <button
               onClick={async () => {
                 await fetch("/api/courses/mark-module-started", {
@@ -191,7 +194,7 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
             </button>
           )}
 
-          {moduleStatus === "in_progress" && (
+          {moduleStatus === "in_progress" && !courseCompleted && (
             <button
               onClick={async () => {
                 await fetch("/api/courses/mark-module-completed", {
@@ -209,7 +212,7 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
             </button>
           )}
 
-          {moduleStatus === "completed" && (
+          {moduleStatus === "completed" && !courseCompleted && (
             <button
               onClick={async () => {
                 await fetch("/api/courses/mark-module-started", {
@@ -264,7 +267,7 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (isAdmin) {
+    if (isAdmin || courseCompleted) {
       return;
     }
 
@@ -336,12 +339,14 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
             </p>
           </div>
         ))}
-        <button
-          onClick={handleRetake}
-          className="px-4 py-2 bg-yellow-500 text-white rounded"
-        >
-          Retake Quiz
-        </button>
+        {!courseCompleted && (
+          <button
+            onClick={handleRetake}
+            className="px-4 py-2 bg-yellow-500 text-white rounded"
+          >
+            Retake Quiz
+          </button>
+        )}
       </div>
     );
   }
@@ -349,10 +354,12 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       <h2 className="text-3xl font-bold">{data.title}</h2>
-      <p className="text-red-600">
-        Please note that if you leave this page without submitting, your answers
-        will be lost
-      </p>
+      {!courseCompleted && (
+        <p className="text-red-600">
+          Please note that if you leave this page without submitting, your
+          answers will be lost
+        </p>
+      )}
       {quiz?.questions.map((q) => (
         <div key={q.id} className="space-y-2">
           <p className="font-medium">{q.question_text}</p>
@@ -373,7 +380,7 @@ export default function ModuleDetail({ moduleId, isAdmin }: Props) {
                 }
                 className="border-gray-300"
                 required={q.question_type === "true_false"}
-                disabled={isAdmin}
+                disabled={isAdmin || courseCompleted}
               />
               <span>{opt.option_text}</span>
             </label>

From 1dcbf4d3b895eb79ae8440b988fb6eb618bc464b Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 26 Jun 2025 00:49:09 +0200
Subject: [PATCH 23/23] refactor form to handle delete separately

---
 .../organisation/courses/CourseForm.tsx       | 73 +++++++++----------
 .../organisation/courses/ModuleForm.tsx       | 51 +++++++------
 2 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/components/organisation/courses/CourseForm.tsx b/components/organisation/courses/CourseForm.tsx
index a40e3b8..b3353c2 100644
--- a/components/organisation/courses/CourseForm.tsx
+++ b/components/organisation/courses/CourseForm.tsx
@@ -19,7 +19,6 @@ interface Props {
 export default function CourseForm({ mode, courseId }: Props) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
-  const [deleteMode, setDeleteMode] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -78,38 +77,6 @@ export default function CourseForm({ mode, courseId }: Props) {
         alert("Failed to create course. Please try again.");
         return;
       }
-    } else if (deleteMode) {
-      const confirmed = window.confirm(
-        "Are you sure you want to delete this course? This action cannot be undone."
-      );
-      if (!confirmed) {
-        setDeleteMode(false);
-        return;
-      }
-      if (!courseId) {
-        alert("Please provide a course name to delete.");
-        return;
-      }
-      try {
-        const res = await fetch(`/api/courses`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          credentials: "include",
-          body: JSON.stringify({ courseId: courseId }),
-        });
-        if (!res.ok) {
-          throw new Error("Failed to delete course");
-        }
-        const data = await res.json();
-        console.log("Course deleted:", data);
-        router.push("/courses");
-      } catch (error) {
-        console.error("Error deleting course:", error);
-        alert("Failed to delete course. Please try again.");
-        return;
-      }
     } else {
       try {
         const res = await fetch("/api/courses", {
@@ -134,6 +101,41 @@ export default function CourseForm({ mode, courseId }: Props) {
     }
   };
 
+  const handleDelete = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const confirmed = window.confirm(
+      "Are you sure you want to delete this course? This action cannot be undone."
+    );
+    if (!confirmed) {
+      return;
+    }
+    if (!courseId) {
+      alert("Please provide a course name to delete.");
+      return;
+    }
+    try {
+      const res = await fetch(`/api/courses`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify({ courseId: courseId }),
+      });
+      if (!res.ok) {
+        throw new Error("Failed to delete course");
+      }
+      const data = await res.json();
+      console.log("Course deleted:", data);
+      router.push("/courses");
+    } catch (error) {
+      console.error("Error deleting course:", error);
+      alert("Failed to delete course. Please try again.");
+      return;
+    }
+  };
+
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       <div>
@@ -165,11 +167,8 @@ export default function CourseForm({ mode, courseId }: Props) {
         </button>
         {mode === "edit" && (
           <button
-            type="submit"
             className="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded"
-            onClick={(e) => {
-              setDeleteMode(true);
-            }}
+            onClick={(e) => handleDelete(e)}
           >
             Delete Course
           </button>
diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
index 713c827..b40c097 100644
--- a/components/organisation/courses/ModuleForm.tsx
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -20,7 +20,6 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [uploadFile, setUploadFile] = useState<File | null>(null);
-  const [deleteMode, setDeleteMode] = useState(false);
   const router = useRouter();
   const [moduleType, setModuleType] =
     useState<ModuleDetailData["module_type"]>("pdf");
@@ -126,28 +125,6 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
         console.error(err);
         alert("Could not create module. Please try again.");
       }
-    } else if (deleteMode) {
-      if (!confirm("Are you sure you want to delete this module?")) return;
-
-      try {
-        const response = await fetch("/api/courses/delete-module", {
-          method: "DELETE",
-          credentials: "include",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ moduleId }),
-        });
-
-        if (!response.ok) {
-          throw new Error("Failed to delete module");
-        }
-
-        router.push(`/courses`);
-      } catch (error) {
-        console.error("Error deleting module:", error);
-        alert("Failed to delete module. Please try again.");
-      }
     } else {
       const fd = new FormData();
       fd.append("moduleId", moduleId || "");
@@ -214,6 +191,32 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
     }
   };
 
+  const handleDelete = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!confirm("Are you sure you want to delete this module?")) return;
+
+    try {
+      const response = await fetch("/api/courses/delete-module", {
+        method: "DELETE",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ moduleId }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to delete module");
+      }
+
+      router.push(`/courses`);
+    } catch (error) {
+      console.error("Error deleting module:", error);
+      alert("Failed to delete module. Please try again.");
+    }
+  };
+
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       <div>
@@ -453,7 +456,7 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
             type="submit"
             className="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded"
             onClick={(e) => {
-              setDeleteMode(true);
+              handleDelete(e);
             }}
           >
             Delete Module