From 39a6990057aea62227a3601e54d7188fa23f2e7e Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 24 May 2025 20:50:47 +0800
Subject: [PATCH 01/36] Add organisation settings page

---
 app/dashboard/page.tsx                        |   1 -
 app/settings/page.tsx                         |  33 ++++-
 .../organisation/settings/OrgSettings.tsx     | 129 ++++++++++++++++++
 .../settings/SettingsComponent.tsx            |  11 ++
 context/AuthContext.tsx                       |   2 +-
 5 files changed, 171 insertions(+), 5 deletions(-)
 create mode 100644 components/organisation/settings/OrgSettings.tsx
 create mode 100644 components/organisation/settings/SettingsComponent.tsx

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 486d7a8..c730522 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,4 +1,3 @@
-import { redirect } from "next/navigation";
 import { getAuthUser } from "@/lib/auth";
 
 export default async function DashboardPage() {
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 2d5771f..f289a0f 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,8 +1,35 @@
-export default function SettingsPage() {
+import { getAuthUser } from "@/lib/auth";
+import SettingsComponent from "@/components/organisation/settings/SettingsComponent";
+
+export default async function SettingsPage() {
+  const user = await getAuthUser();
+  if (!user) {
+    return null;
+  }
+  const organisation = user.organisation;
+  const role = organisation.role;
+  const isAdmin = role === "admin";
+  const isMember = role === "employee";
+
+  if (isAdmin) {
+    return (
+      <div>
+        <SettingsComponent />
+      </div>
+    );
+  }
+
+  if (isMember) {
+    return (
+      <div>
+        <h1>Member Settings</h1>
+      </div>
+    );
+  }
+
   return (
     <div>
-      <h1>Settings</h1>
-      <p>Settings page content goes here.</p>
+      <h1>Page should not reach here</h1>
     </div>
   );
 }
diff --git a/components/organisation/settings/OrgSettings.tsx b/components/organisation/settings/OrgSettings.tsx
new file mode 100644
index 0000000..6dfe879
--- /dev/null
+++ b/components/organisation/settings/OrgSettings.tsx
@@ -0,0 +1,129 @@
+"use client";
+import { useState } from "react";
+
+export default function OrgSettings({ initialData }: { initialData: any }) {
+  const [name, setName] = useState(initialData.organisation_name);
+  const [description, setDescription] = useState(initialData.description);
+  const [aiEnabled, setAiEnabled] = useState(initialData.ai_enabled);
+  const [transferEmail, setTransferEmail] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+    try {
+      // Call API to update organisation settings
+      // show success toast
+    } catch (err) {
+      // show error toast
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleTransfer = async () => {
+    if (!transferEmail) return;
+    // open confirmation modal...
+    // then call API to transfer ownership
+  };
+
+  return (
+    <div className="flex justify-center py-10 px-4">
+      <div className="w-full max-w-lg bg-white p-8 rounded-2xl shadow-lg">
+        <h2 className="text-2xl font-semibold mb-6 text-purple-700">
+          Organisation Settings
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-5">
+          {/* Organisation Name */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700">
+              Organisation Name
+            </label>
+            <input
+              type="text"
+              value={name}
+              maxLength={100}
+              required
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-blue-200"
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700">
+              Description
+            </label>
+            <textarea
+              value={description}
+              rows={4}
+              onChange={(e) => setDescription(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-gray-300 p-2 focus:border-purple-600 focus:ring focus:ring-purple-200"
+            />
+          </div>
+
+          {/* AI Toggle */}
+          <div className="flex items-center">
+            <input
+              id="aiEnabled"
+              type="checkbox"
+              checked={aiEnabled}
+              onChange={(e) => setAiEnabled(e.target.checked)}
+              className="h-4 w-4 text-purple-600 focus:ring-purple-500 rounded"
+            />
+            <label htmlFor="aiEnabled" className="ml-2 text-sm text-gray-700">
+              Enable AI-powered recommendations
+            </label>
+          </div>
+
+          {/* Transfer Ownership */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700">
+              Transfer Ownership
+            </label>
+            <div className="flex space-x-2 mt-1">
+              <input
+                type="email"
+                placeholder="New admin’s email"
+                value={transferEmail}
+                onChange={(e) => setTransferEmail(e.target.value)}
+                className="flex-1 rounded-md border border-gray-300 p-2 focus:border-red-500 focus:ring focus:ring-red-200"
+              />
+              <button
+                type="button"
+                onClick={handleTransfer}
+                className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300"
+              >
+                Transfer
+              </button>
+            </div>
+          </div>
+
+          {/* Save / Cancel */}
+          <div className="flex justify-end space-x-3 pt-6 border-t">
+            <button
+              type="button"
+              onClick={() => {
+                setName(name);
+                setDescription(description);
+                setAiEnabled(aiEnabled);
+                setTransferEmail(transferEmail);
+              }}
+              disabled={isSaving}
+              className="rounded border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-200"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSaving}
+              className="rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-300"
+            >
+              {isSaving ? "Saving..." : "Save Changes"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/components/organisation/settings/SettingsComponent.tsx b/components/organisation/settings/SettingsComponent.tsx
new file mode 100644
index 0000000..c917505
--- /dev/null
+++ b/components/organisation/settings/SettingsComponent.tsx
@@ -0,0 +1,11 @@
+import OrgSettings from "./OrgSettings";
+
+export default async function SettingsComponent() {
+  const orgDetails = {
+    organisation_name: "My Organisation",
+    description: "This is a sample organisation description.",
+    ai_enabled: false,
+  };
+
+  return <OrgSettings initialData={orgDetails} />;
+}
diff --git a/context/AuthContext.tsx b/context/AuthContext.tsx
index b5901ec..e95240d 100644
--- a/context/AuthContext.tsx
+++ b/context/AuthContext.tsx
@@ -13,7 +13,7 @@ type OrgRole = "admin" | "employee";
 
 export interface OrganisationMembership {
   id: number;
-  organisationName: string;
+  organisationname: string;
   role: OrgRole;
 }
 

From 2036f25bb99c95cbbfb0f8a2455a76226b5594a1 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 24 May 2025 21:02:58 +0800
Subject: [PATCH 02/36] Fetch data from backend

---
 app/settings/page.tsx                         |  4 +--
 .../organisation/settings/OrgSettings.tsx     | 32 ++++++++++++++++---
 .../settings/SettingsComponent.tsx            | 11 -------
 3 files changed, 29 insertions(+), 18 deletions(-)
 delete mode 100644 components/organisation/settings/SettingsComponent.tsx

diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index f289a0f..5fa01df 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,5 +1,5 @@
 import { getAuthUser } from "@/lib/auth";
-import SettingsComponent from "@/components/organisation/settings/SettingsComponent";
+import OrgSettings from "@/components/organisation/settings/OrgSettings";
 
 export default async function SettingsPage() {
   const user = await getAuthUser();
@@ -14,7 +14,7 @@ export default async function SettingsPage() {
   if (isAdmin) {
     return (
       <div>
-        <SettingsComponent />
+        <OrgSettings />
       </div>
     );
   }
diff --git a/components/organisation/settings/OrgSettings.tsx b/components/organisation/settings/OrgSettings.tsx
index 6dfe879..b553138 100644
--- a/components/organisation/settings/OrgSettings.tsx
+++ b/components/organisation/settings/OrgSettings.tsx
@@ -1,12 +1,34 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
-export default function OrgSettings({ initialData }: { initialData: any }) {
-  const [name, setName] = useState(initialData.organisation_name);
-  const [description, setDescription] = useState(initialData.description);
-  const [aiEnabled, setAiEnabled] = useState(initialData.ai_enabled);
+export default function OrgSettings() {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [aiEnabled, setAiEnabled] = useState(false);
   const [transferEmail, setTransferEmail] = useState("");
   const [isSaving, setIsSaving] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function loadSettings() {
+      try {
+        const res = await fetch("/api/orgs/settings", {
+          credentials: "include",
+        });
+        if (!res.ok) throw new Error("Network response was not ok");
+        const data = (await res.json()).organisation;
+        setName(data.organisation_name);
+        setDescription(data.description);
+        setAiEnabled(data.ai_enabled);
+      } catch (err: any) {
+        setError(err.message || "Failed to load settings");
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadSettings();
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
diff --git a/components/organisation/settings/SettingsComponent.tsx b/components/organisation/settings/SettingsComponent.tsx
deleted file mode 100644
index c917505..0000000
--- a/components/organisation/settings/SettingsComponent.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import OrgSettings from "./OrgSettings";
-
-export default async function SettingsComponent() {
-  const orgDetails = {
-    organisation_name: "My Organisation",
-    description: "This is a sample organisation description.",
-    ai_enabled: false,
-  };
-
-  return <OrgSettings initialData={orgDetails} />;
-}

From 5ee944be0e309925b0a9e72599e19da77e2786ee Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 24 May 2025 22:00:52 +0800
Subject: [PATCH 03/36] Call api endpoint to update settings

---
 .../organisation/settings/OrgSettings.tsx     | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/components/organisation/settings/OrgSettings.tsx b/components/organisation/settings/OrgSettings.tsx
index b553138..43adc41 100644
--- a/components/organisation/settings/OrgSettings.tsx
+++ b/components/organisation/settings/OrgSettings.tsx
@@ -2,6 +2,7 @@
 import { useState, useEffect } from "react";
 
 export default function OrgSettings() {
+  const [organisationId, setOrganisationId] = useState("");
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [aiEnabled, setAiEnabled] = useState(false);
@@ -21,6 +22,8 @@ export default function OrgSettings() {
         setName(data.organisation_name);
         setDescription(data.description);
         setAiEnabled(data.ai_enabled);
+        setOrganisationId(data.id);
+        setError(null);
       } catch (err: any) {
         setError(err.message || "Failed to load settings");
       } finally {
@@ -34,10 +37,25 @@ export default function OrgSettings() {
     e.preventDefault();
     setIsSaving(true);
     try {
-      // Call API to update organisation settings
-      // show success toast
-    } catch (err) {
-      // show error toast
+      const res = await fetch("/api/orgs/settings", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          organisation_id: organisationId,
+          organisation_name: name,
+          description,
+          ai_enabled: aiEnabled,
+        }),
+      });
+      if (!res.ok) throw new Error("Failed to save settings");
+      setName(name);
+      setDescription(description);
+      setAiEnabled(aiEnabled);
+      setError(null);
+    } catch (err: any) {
+      setError(err.message || "Failed to save settings");
+      console.error("Error saving organisation settings:", err);
     } finally {
       setIsSaving(false);
     }
@@ -121,6 +139,10 @@ export default function OrgSettings() {
             </div>
           </div>
 
+          {error && (
+            <div className="text-red-600 text-sm mb-4 text-center">{error}</div>
+          )}
+
           {/* Save / Cancel */}
           <div className="flex justify-end space-x-3 pt-6 border-t">
             <button
@@ -129,7 +151,6 @@ export default function OrgSettings() {
                 setName(name);
                 setDescription(description);
                 setAiEnabled(aiEnabled);
-                setTransferEmail(transferEmail);
               }}
               disabled={isSaving}
               className="rounded border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-200"

From df4f8fe9e94621e3970d8124af18129bbcdfc026 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 24 May 2025 22:15:32 +0800
Subject: [PATCH 04/36] Save initial data and save only when needed

---
 .../organisation/settings/OrgSettings.tsx     | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/components/organisation/settings/OrgSettings.tsx b/components/organisation/settings/OrgSettings.tsx
index 43adc41..788ed33 100644
--- a/components/organisation/settings/OrgSettings.tsx
+++ b/components/organisation/settings/OrgSettings.tsx
@@ -1,7 +1,15 @@
 "use client";
 import { useState, useEffect } from "react";
 
+interface OrganisationData {
+  organisation_name: string;
+  description: string;
+  ai_enabled: boolean;
+  id: string;
+}
+
 export default function OrgSettings() {
+  const [initialData, setInitialData] = useState<OrganisationData | null>(null);
   const [organisationId, setOrganisationId] = useState("");
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
@@ -10,6 +18,7 @@ export default function OrgSettings() {
   const [isSaving, setIsSaving] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
 
   useEffect(() => {
     async function loadSettings() {
@@ -19,13 +28,16 @@ export default function OrgSettings() {
         });
         if (!res.ok) throw new Error("Network response was not ok");
         const data = (await res.json()).organisation;
+        setInitialData(data);
         setName(data.organisation_name);
         setDescription(data.description);
         setAiEnabled(data.ai_enabled);
         setOrganisationId(data.id);
         setError(null);
+        setMessage(null);
       } catch (err: any) {
         setError(err.message || "Failed to load settings");
+        setMessage(null);
       } finally {
         setLoading(false);
       }
@@ -35,6 +47,17 @@ export default function OrgSettings() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    setMessage(null);
+    setError(null);
+    if (
+      initialData &&
+      initialData.organisation_name === name &&
+      initialData.description === description &&
+      initialData.ai_enabled === aiEnabled
+    ) {
+      setMessage("No changes made");
+      return;
+    }
     setIsSaving(true);
     try {
       const res = await fetch("/api/orgs/settings", {
@@ -53,8 +76,10 @@ export default function OrgSettings() {
       setDescription(description);
       setAiEnabled(aiEnabled);
       setError(null);
+      setMessage("Settings saved successfully");
     } catch (err: any) {
       setError(err.message || "Failed to save settings");
+      setMessage(null);
       console.error("Error saving organisation settings:", err);
     } finally {
       setIsSaving(false);
@@ -142,6 +167,11 @@ export default function OrgSettings() {
           {error && (
             <div className="text-red-600 text-sm mb-4 text-center">{error}</div>
           )}
+          {message && (
+            <div className="text-green-600 text-sm mb-4 text-center">
+              {message}
+            </div>
+          )}
 
           {/* Save / Cancel */}
           <div className="flex justify-end space-x-3 pt-6 border-t">

From bdecd796a1d3dbf7b7aff58de32dacaead236a70 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 24 May 2025 22:17:20 +0800
Subject: [PATCH 05/36] Add page for organisation courses

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

diff --git a/app/courses/page.tsx b/app/courses/page.tsx
index 29a7f48..4c6d3a0 100644
--- a/app/courses/page.tsx
+++ b/app/courses/page.tsx
@@ -1,8 +1,34 @@
-export default function CoursesPage() {
+import { getAuthUser } from "@/lib/auth";
+
+export default async function SettingsPage() {
+  const user = await getAuthUser();
+  if (!user) {
+    return null;
+  }
+  const organisation = user.organisation;
+  const role = organisation.role;
+  const isAdmin = role === "admin";
+  const isMember = role === "employee";
+
+  if (isAdmin) {
+    return (
+      <div>
+        <h1>Organisation Courses</h1>
+      </div>
+    );
+  }
+
+  if (isMember) {
+    return (
+      <div>
+        <h1>Member Settings</h1>
+      </div>
+    );
+  }
+
   return (
     <div>
-      <h1>Courses</h1>
-      <p>List of courses will be displayed here.</p>
+      <h1>Page should not reach here</h1>
     </div>
   );
 }

From 7d87f35e1dbdd15f3ebd7a080db661233c1fecf0 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 24 May 2025 22:58:04 +0800
Subject: [PATCH 06/36] Add structure for courses

---
 app/courses/[courseId]/edit/page.tsx                 | 0
 app/courses/[courseId]/layout.tsx                    | 0
 app/courses/[courseId]/modules/[moduleId]/layout.tsx | 0
 app/courses/[courseId]/modules/[moduleId]/page.tsx   | 0
 app/courses/[courseId]/page.tsx                      | 0
 app/courses/layout.tsx                               | 0
 app/courses/new/page.tsx                             | 0
 components/organisation/courses/CourseCard.tsx       | 0
 components/organisation/courses/CourseDetail.tsx     | 0
 components/organisation/courses/CourseForm.tsx       | 0
 components/organisation/courses/CourseList.tsx       | 0
 components/organisation/courses/ModuleCard.tsx       | 0
 components/organisation/courses/ModuleDetail.tsx     | 0
 components/organisation/courses/ModuleList.tsx       | 0
 14 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 app/courses/[courseId]/edit/page.tsx
 create mode 100644 app/courses/[courseId]/layout.tsx
 create mode 100644 app/courses/[courseId]/modules/[moduleId]/layout.tsx
 create mode 100644 app/courses/[courseId]/modules/[moduleId]/page.tsx
 create mode 100644 app/courses/[courseId]/page.tsx
 create mode 100644 app/courses/layout.tsx
 create mode 100644 app/courses/new/page.tsx
 create mode 100644 components/organisation/courses/CourseCard.tsx
 create mode 100644 components/organisation/courses/CourseDetail.tsx
 create mode 100644 components/organisation/courses/CourseForm.tsx
 create mode 100644 components/organisation/courses/CourseList.tsx
 create mode 100644 components/organisation/courses/ModuleCard.tsx
 create mode 100644 components/organisation/courses/ModuleDetail.tsx
 create mode 100644 components/organisation/courses/ModuleList.tsx

diff --git a/app/courses/[courseId]/edit/page.tsx b/app/courses/[courseId]/edit/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/courses/[courseId]/modules/[moduleId]/layout.tsx b/app/courses/[courseId]/modules/[moduleId]/layout.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/courses/[courseId]/modules/[moduleId]/page.tsx b/app/courses/[courseId]/modules/[moduleId]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/courses/[courseId]/page.tsx b/app/courses/[courseId]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/courses/layout.tsx b/app/courses/layout.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/courses/new/page.tsx b/app/courses/new/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/organisation/courses/CourseDetail.tsx b/components/organisation/courses/CourseDetail.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/organisation/courses/CourseForm.tsx b/components/organisation/courses/CourseForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/organisation/courses/CourseList.tsx b/components/organisation/courses/CourseList.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/organisation/courses/ModuleCard.tsx b/components/organisation/courses/ModuleCard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/organisation/courses/ModuleList.tsx b/components/organisation/courses/ModuleList.tsx
new file mode 100644
index 0000000..e69de29

From a312ae5e05ce412228c02e751d2dfed1f5fb195e Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sun, 25 May 2025 00:07:48 +0800
Subject: [PATCH 07/36] Add guard for non authorised users

---
 app/auth/page.tsx       | 1 -
 app/onboarding/page.tsx | 4 ++++
 app/settings/page.tsx   | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/auth/page.tsx b/app/auth/page.tsx
index 3d7e6c7..efa5091 100644
--- a/app/auth/page.tsx
+++ b/app/auth/page.tsx
@@ -1,4 +1,3 @@
-// app/auth/page.tsx
 import { redirect } from "next/navigation";
 import { getAuthUser } from "@/lib/auth";
 import AuthClient from "./AuthClient";
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index 293187c..cb916f9 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -8,6 +8,10 @@ export default function OnboardingPage() {
   const router = useRouter();
   const { user, setUser } = useAuth();
 
+  if (!user || !user.isLoggedIn) {
+    return null;
+  }
+
   const [role, setRole] = useState<"admin" | "employee">("employee");
   const [orgName, setOrgName] = useState("");
   const [orgId, setOrgId] = useState("");
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 5fa01df..a6b1030 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -3,7 +3,7 @@ import OrgSettings from "@/components/organisation/settings/OrgSettings";
 
 export default async function SettingsPage() {
   const user = await getAuthUser();
-  if (!user) {
+  if (!user || !user.hasCompletedOnboarding) {
     return null;
   }
   const organisation = user.organisation;

From 2eb7dab2d346f56632c8e6f584da7a1b73a8454d Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sun, 25 May 2025 00:18:42 +0800
Subject: [PATCH 08/36] Add basic course pages

---
 app/courses/[courseId]/edit/page.tsx          | 33 +++++++++
 app/courses/[courseId]/layout.tsx             | 47 +++++++++++++
 .../[courseId]/modules/[moduleId]/layout.tsx  |  0
 .../[courseId]/modules/[moduleId]/page.tsx    | 26 +++++++
 app/courses/[courseId]/page.tsx               | 16 +++++
 app/courses/layout.tsx                        | 11 +++
 app/courses/new/page.tsx                      | 20 ++++++
 app/courses/page.tsx                          | 39 ++++-------
 .../organisation/courses/CourseCard.tsx       | 38 ++++++++++
 .../organisation/courses/CourseForm.tsx       | 67 ++++++++++++++++++
 .../organisation/courses/CourseList.tsx       | 31 ++++++++
 .../organisation/courses/ModuleCard.tsx       | 39 +++++++++++
 .../organisation/courses/ModuleDetail.tsx     | 70 +++++++++++++++++++
 .../organisation/courses/ModuleList.tsx       | 21 ++++++
 14 files changed, 433 insertions(+), 25 deletions(-)
 delete mode 100644 app/courses/[courseId]/modules/[moduleId]/layout.tsx

diff --git a/app/courses/[courseId]/edit/page.tsx b/app/courses/[courseId]/edit/page.tsx
index e69de29..7653c9b 100644
--- a/app/courses/[courseId]/edit/page.tsx
+++ b/app/courses/[courseId]/edit/page.tsx
@@ -0,0 +1,33 @@
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import CourseForm, {
+  Course,
+} from "@/components/organisation/courses/CourseForm";
+
+export default async function EditCoursePage({
+  params,
+}: {
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const { courseId } = await params;
+  if (user?.organisation?.role !== "admin") {
+    redirect(`/courses/${courseId}`);
+  }
+
+  // Dummy course; swap for real fetch/DB call
+  const course: Course = {
+    id: Number(courseId),
+    name: `Course #${courseId}`,
+    description: "Existing course description",
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Edit Course
+      </h2>
+      <CourseForm mode="edit" course={course} />
+    </div>
+  );
+}
diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
index e69de29..39a7133 100644
--- a/app/courses/[courseId]/layout.tsx
+++ b/app/courses/[courseId]/layout.tsx
@@ -0,0 +1,47 @@
+// app/courses/[courseId]/layout.tsx
+import { ReactNode } from "react";
+import Link from "next/link";
+import { getAuthUser } from "@/lib/auth";
+
+export default async function CourseLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const isAdmin = user?.organisation?.role === "admin";
+  const { courseId } = await params;
+
+  // Dummy course; swap for DB call
+  const course = {
+    id: Number(courseId),
+    name: `Course #${courseId}`,
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
+      <nav className="text-sm mb-4">
+        <Link href="/courses" className="text-purple-600 hover:underline">
+          Courses
+        </Link>
+        <span className="mx-2">/</span>
+        <span className="font-medium">{course.name}</span>
+      </nav>
+
+      {isAdmin && (
+        <div className="text-right mb-6">
+          <Link
+            href={`/courses/${course.id}/edit`}
+            className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+          >
+            Edit Course
+          </Link>
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}
diff --git a/app/courses/[courseId]/modules/[moduleId]/layout.tsx b/app/courses/[courseId]/modules/[moduleId]/layout.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/app/courses/[courseId]/modules/[moduleId]/page.tsx b/app/courses/[courseId]/modules/[moduleId]/page.tsx
index e69de29..6d56bac 100644
--- a/app/courses/[courseId]/modules/[moduleId]/page.tsx
+++ b/app/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -0,0 +1,26 @@
+// app/courses/[courseId]/modules/[moduleId]/page.tsx
+import ModuleDetail, {
+  ModuleDetailData,
+} from "@/components/organisation/courses/ModuleDetail";
+
+export default async function ModulePage({
+  params,
+}: {
+  params: { courseId: string; moduleId: string };
+}) {
+  const { courseId, moduleId } = await params;
+  // add actual data
+  const data: ModuleDetailData = {
+    id: Number(moduleId),
+    title: `Module #${moduleId}`,
+    module_type: "video",
+    file_url: "/videos/sample.mp4",
+    // For quizzes, add a `quiz: { title, questions }` field here
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <ModuleDetail data={data} />
+    </div>
+  );
+}
diff --git a/app/courses/[courseId]/page.tsx b/app/courses/[courseId]/page.tsx
index e69de29..f768c39 100644
--- a/app/courses/[courseId]/page.tsx
+++ b/app/courses/[courseId]/page.tsx
@@ -0,0 +1,16 @@
+import ModuleList from "@/components/organisation/courses/ModuleList";
+import { Module } from "@/components/organisation/courses/ModuleCard";
+
+export default function CoursePage({
+  params,
+}: {
+  params: { courseId: string };
+}) {
+  // Replace with actual api
+  const modules: Module[] = [
+    { id: 1, title: "Getting Started", module_type: "video", position: 1 },
+    { id: 2, title: "Deep Dive", module_type: "pdf", position: 2 },
+  ];
+
+  return <ModuleList modules={modules} />;
+}
diff --git a/app/courses/layout.tsx b/app/courses/layout.tsx
index e69de29..675d669 100644
--- a/app/courses/layout.tsx
+++ b/app/courses/layout.tsx
@@ -0,0 +1,11 @@
+// app/courses/layout.tsx
+import { ReactNode } from "react";
+
+export default function CoursesLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-white p-6">
+      <h1 className="text-4xl font-bold text-purple-600 mb-8">Courses</h1>
+      {children}
+    </div>
+  );
+}
diff --git a/app/courses/new/page.tsx b/app/courses/new/page.tsx
index e69de29..f47e241 100644
--- a/app/courses/new/page.tsx
+++ b/app/courses/new/page.tsx
@@ -0,0 +1,20 @@
+// app/courses/new/page.tsx
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import CourseForm from "@/components/organisation/courses/CourseForm";
+
+export default async function NewCoursePage() {
+  const user = await getAuthUser();
+  if (user?.organisation?.role !== "admin") {
+    redirect("/courses");
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Create New Course
+      </h2>
+      <CourseForm mode="create" />
+    </div>
+  );
+}
diff --git a/app/courses/page.tsx b/app/courses/page.tsx
index 4c6d3a0..bc64877 100644
--- a/app/courses/page.tsx
+++ b/app/courses/page.tsx
@@ -1,34 +1,23 @@
+// app/courses/page.tsx
+import CourseList from "@/components/organisation/courses/CourseList";
+import { Course } from "@/components/organisation/courses/CourseCard";
 import { getAuthUser } from "@/lib/auth";
 
-export default async function SettingsPage() {
+export default async function CoursesPage() {
   const user = await getAuthUser();
-  if (!user) {
+
+  if (!user || !user.hasCompletedOnboarding) {
     return null;
   }
-  const organisation = user.organisation;
-  const role = organisation.role;
-  const isAdmin = role === "admin";
-  const isMember = role === "employee";
 
-  if (isAdmin) {
-    return (
-      <div>
-        <h1>Organisation Courses</h1>
-      </div>
-    );
-  }
+  const isAdmin = user?.organisation?.role === "admin";
 
-  if (isMember) {
-    return (
-      <div>
-        <h1>Member Settings</h1>
-      </div>
-    );
-  }
+  // 2) Dummy data
+  const courses: Course[] = [
+    { id: 1, name: "Intro to TypeScript", description: "Learn TS basics" },
+    { id: 2, name: "Advanced React", description: "Hooks, Suspense, SSR" },
+  ];
 
-  return (
-    <div>
-      <h1>Page should not reach here</h1>
-    </div>
-  );
+  // 3) Render the client component that will show/hide admin buttons
+  return <CourseList courses={courses} isAdmin={isAdmin} />;
 }
diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index e69de29..a40cad0 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import Link from "next/link";
+
+export interface Course {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+interface Props {
+  course: Course;
+  isAdmin: boolean;
+}
+
+export default function CourseCard({ course, isAdmin }: 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>
+      <p className="mt-2 text-gray-700">{course.description}</p>
+
+      <div className="mt-4 flex items-center space-x-4">
+        <Link href={`/courses/${course.id}`}>
+          <button className="text-purple-600 hover:underline">
+            View Modules
+          </button>
+        </Link>
+        {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">
+              Edit
+            </button>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/organisation/courses/CourseForm.tsx b/components/organisation/courses/CourseForm.tsx
index e69de29..4237c2e 100644
--- a/components/organisation/courses/CourseForm.tsx
+++ b/components/organisation/courses/CourseForm.tsx
@@ -0,0 +1,67 @@
+// components/organisation/courses/CourseForm.tsx
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export interface Course {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+interface Props {
+  mode: "create" | "edit";
+  course?: Course;
+}
+
+export default function CourseForm({ mode, course }: Props) {
+  const [name, setName] = useState(course?.name ?? "");
+  const [description, setDescription] = useState(course?.description ?? "");
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const payload = { name, description };
+
+    if (mode === "create") {
+      // add api call to create a new course
+      router.push("/courses");
+    } else {
+      // add api call to edit course
+      router.push(`/courses/${course?.id}`);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div>
+        <label className="block text-gray-700">Name</label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          className="w-full mt-1 p-2 border rounded"
+        />
+      </div>
+
+      <div>
+        <label className="block text-gray-700">Description</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          className="w-full mt-1 p-2 border rounded"
+          rows={4}
+        />
+      </div>
+
+      <button
+        type="submit"
+        className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+      >
+        {mode === "create" ? "Create Course" : "Save Changes"}
+      </button>
+    </form>
+  );
+}
diff --git a/components/organisation/courses/CourseList.tsx b/components/organisation/courses/CourseList.tsx
index e69de29..12b0d58 100644
--- a/components/organisation/courses/CourseList.tsx
+++ b/components/organisation/courses/CourseList.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import Link from "next/link";
+import CourseCard, { Course } from "./CourseCard";
+
+interface Props {
+  courses: Course[];
+  isAdmin: boolean;
+}
+
+export default function CourseList({ courses, isAdmin }: Props) {
+  return (
+    <div className="space-y-6">
+      {isAdmin && (
+        <div className="text-right">
+          <Link href="/courses/new">
+            <button className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded">
+              + Add Course
+            </button>
+          </Link>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {courses.map((c) => (
+          <CourseCard key={c.id} course={c} isAdmin={isAdmin} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/organisation/courses/ModuleCard.tsx b/components/organisation/courses/ModuleCard.tsx
index e69de29..111d4aa 100644
--- a/components/organisation/courses/ModuleCard.tsx
+++ b/components/organisation/courses/ModuleCard.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+
+export interface Module {
+  id: number;
+  title: string;
+  module_type: string;
+  position: number;
+}
+
+interface Props {
+  module: Module;
+}
+
+export default function ModuleCard({ module }: Props) {
+  const { courseId } = useParams() as { courseId: string };
+
+  return (
+    <div className="bg-white border rounded-lg p-4 shadow-sm hover:shadow-md transition">
+      <div className="flex justify-between items-center">
+        <div>
+          <h3 className="text-lg font-semibold text-purple-600">
+            {module.position}. {module.title}
+          </h3>
+          <p className="text-sm text-gray-500 capitalize">
+            {module.module_type}
+          </p>
+        </div>
+        <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>
+      </div>
+    </div>
+  );
+}
diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index e69de29..4da73eb 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+
+export interface QuizQuestion {
+  id: number;
+  question_text: string;
+  question_type: string;
+  options?: { id: number; option_text: string }[];
+}
+
+export interface ModuleDetailData {
+  id: number;
+  title: string;
+  module_type: "video" | "pdf" | "slide" | "quiz" | string;
+  file_url?: string;
+  quiz?: {
+    title: string;
+    questions: QuizQuestion[];
+  };
+}
+
+interface Props {
+  data: ModuleDetailData;
+}
+
+export default function ModuleDetail({ data }: Props) {
+  return (
+    <div className="space-y-6">
+      <h2 className="text-3xl font-bold text-purple-600">{data.title}</h2>
+
+      {data.module_type === "video" && data.file_url && (
+        <video controls src={data.file_url} className="w-full rounded-lg" />
+      )}
+
+      {["pdf", "slide"].includes(data.module_type) && data.file_url && (
+        <iframe
+          src={data.file_url}
+          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">
+                  <input
+                    type="radio"
+                    name={`q-${q.id}`}
+                    disabled
+                    className="border-gray-300"
+                  />
+                  <label>{opt.option_text}</label>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!["video", "pdf", "slide", "quiz"].includes(data.module_type) && (
+        <p className="text-gray-600">No preview available for this module.</p>
+      )}
+    </div>
+  );
+}
diff --git a/components/organisation/courses/ModuleList.tsx b/components/organisation/courses/ModuleList.tsx
index e69de29..d1de861 100644
--- a/components/organisation/courses/ModuleList.tsx
+++ b/components/organisation/courses/ModuleList.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import ModuleCard, { Module } from "./ModuleCard";
+
+interface Props {
+  modules: Module[];
+}
+
+export default function ModuleList({ modules }: Props) {
+  if (modules.length === 0) {
+    return <p className="text-gray-600">No modules added yet.</p>;
+  }
+  // assume modules already sorted by position???
+  return (
+    <div className="space-y-4">
+      {modules.map((m) => (
+        <ModuleCard key={m.id} module={m} />
+      ))}
+    </div>
+  );
+}

From 1601454c96729fb5502b6fb9089d4afb17ea8fc4 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 14:48:36 +0800
Subject: [PATCH 09/36] Add module edit flag

---
 app/courses/[courseId]/edit/modules/page.tsx  | 16 +++++++
 app/courses/[courseId]/layout.tsx             | 10 ++++-
 app/courses/[courseId]/page.tsx               |  2 +-
 .../organisation/courses/ModuleCard.tsx       | 43 ++++++++++++++++---
 .../organisation/courses/ModuleList.tsx       |  5 ++-
 5 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 app/courses/[courseId]/edit/modules/page.tsx

diff --git a/app/courses/[courseId]/edit/modules/page.tsx b/app/courses/[courseId]/edit/modules/page.tsx
new file mode 100644
index 0000000..ca78693
--- /dev/null
+++ b/app/courses/[courseId]/edit/modules/page.tsx
@@ -0,0 +1,16 @@
+import ModuleList from "@/components/organisation/courses/ModuleList";
+import { Module } from "@/components/organisation/courses/ModuleCard";
+
+export default function EditModulesPage({
+  params,
+}: {
+  params: { courseId: string };
+}) {
+  // Replace with actual api
+  const modules: Module[] = [
+    { id: 1, title: "Getting Started", module_type: "video", position: 1 },
+    { id: 2, title: "Deep Dive", module_type: "pdf", position: 2 },
+  ];
+
+  return <ModuleList modules={modules} isEditMode={true} />;
+}
diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
index 39a7133..39a6c88 100644
--- a/app/courses/[courseId]/layout.tsx
+++ b/app/courses/[courseId]/layout.tsx
@@ -31,12 +31,18 @@ export default async function CourseLayout({
       </nav>
 
       {isAdmin && (
-        <div className="text-right mb-6">
+        <div className="text-right mb-6 space-x-2">
           <Link
             href={`/courses/${course.id}/edit`}
             className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
           >
-            Edit Course
+            Edit Course Details
+          </Link>
+          <Link
+            href={`/courses/${course.id}/edit/modules`}
+            className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+          >
+            Edit Modules
           </Link>
         </div>
       )}
diff --git a/app/courses/[courseId]/page.tsx b/app/courses/[courseId]/page.tsx
index f768c39..40f7fd6 100644
--- a/app/courses/[courseId]/page.tsx
+++ b/app/courses/[courseId]/page.tsx
@@ -12,5 +12,5 @@ export default function CoursePage({
     { id: 2, title: "Deep Dive", module_type: "pdf", position: 2 },
   ];
 
-  return <ModuleList modules={modules} />;
+  return <ModuleList modules={modules} isEditMode={true} />;
 }
diff --git a/components/organisation/courses/ModuleCard.tsx b/components/organisation/courses/ModuleCard.tsx
index 111d4aa..ee412cf 100644
--- a/components/organisation/courses/ModuleCard.tsx
+++ b/components/organisation/courses/ModuleCard.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useParams } from "next/navigation";
+import { useState } from "react";
 
 export interface Module {
   id: number;
@@ -12,10 +13,12 @@ export interface Module {
 
 interface Props {
   module: Module;
+  isEditMode: boolean;
 }
 
-export default function ModuleCard({ module }: Props) {
+export default function ModuleCard({ module, isEditMode }: Props) {
   const { courseId } = useParams() as { courseId: string };
+  const [editingMode, setEditingMode] = useState(false);
 
   return (
     <div className="bg-white border rounded-lg p-4 shadow-sm hover:shadow-md transition">
@@ -28,11 +31,39 @@ export default function ModuleCard({ module }: Props) {
             {module.module_type}
           </p>
         </div>
-        <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>
+        <div className="flex items-center space-x-2">
+          <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>
+          {isEditMode && !editingMode && (
+            <button
+              className="px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded"
+              onClick={() => setEditingMode(true)}
+            >
+              Edit
+            </button>
+          )}
+          {isEditMode && editingMode && (
+            <div className="flex space-x-2">
+              <button
+                className="px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded"
+                onClick={() => setEditingMode(false)}
+              >
+                Save
+              </button>
+              <button
+                className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded"
+                onClick={() =>
+                  alert("Delete module functionality not implemented yet")
+                }
+              >
+                Delete
+              </button>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/components/organisation/courses/ModuleList.tsx b/components/organisation/courses/ModuleList.tsx
index d1de861..34e3e1a 100644
--- a/components/organisation/courses/ModuleList.tsx
+++ b/components/organisation/courses/ModuleList.tsx
@@ -4,9 +4,10 @@ import ModuleCard, { Module } from "./ModuleCard";
 
 interface Props {
   modules: Module[];
+  isEditMode: boolean;
 }
 
-export default function ModuleList({ modules }: Props) {
+export default function ModuleList({ modules, isEditMode }: Props) {
   if (modules.length === 0) {
     return <p className="text-gray-600">No modules added yet.</p>;
   }
@@ -14,7 +15,7 @@ export default function ModuleList({ modules }: Props) {
   return (
     <div className="space-y-4">
       {modules.map((m) => (
-        <ModuleCard key={m.id} module={m} />
+        <ModuleCard key={m.id} module={m} isEditMode={isEditMode} />
       ))}
     </div>
   );

From 5b34bc24a523ab976f4ae6fc2c0170a4f157e7c8 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 15:05:19 +0800
Subject: [PATCH 10/36] Add isEdit flag based on role

---
 app/courses/[courseId]/layout.tsx | 6 ------
 app/courses/[courseId]/page.tsx   | 7 +++++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
index 39a6c88..56008ff 100644
--- a/app/courses/[courseId]/layout.tsx
+++ b/app/courses/[courseId]/layout.tsx
@@ -38,12 +38,6 @@ export default async function CourseLayout({
           >
             Edit Course Details
           </Link>
-          <Link
-            href={`/courses/${course.id}/edit/modules`}
-            className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
-          >
-            Edit Modules
-          </Link>
         </div>
       )}
 
diff --git a/app/courses/[courseId]/page.tsx b/app/courses/[courseId]/page.tsx
index 40f7fd6..0596480 100644
--- a/app/courses/[courseId]/page.tsx
+++ b/app/courses/[courseId]/page.tsx
@@ -1,16 +1,19 @@
 import ModuleList from "@/components/organisation/courses/ModuleList";
 import { Module } from "@/components/organisation/courses/ModuleCard";
+import { getAuthUser } from "@/lib/auth";
 
-export default function CoursePage({
+export default async function CoursePage({
   params,
 }: {
   params: { courseId: string };
 }) {
+  const user = await getAuthUser();
+  const isAdmin = user?.organisation?.role === "admin";
   // Replace with actual api
   const modules: Module[] = [
     { id: 1, title: "Getting Started", module_type: "video", position: 1 },
     { id: 2, title: "Deep Dive", module_type: "pdf", position: 2 },
   ];
 
-  return <ModuleList modules={modules} isEditMode={true} />;
+  return <ModuleList modules={modules} isEditMode={isAdmin} />;
 }

From 75594bf831cd9b198c0d30b17e2c63b127a6766e Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 15:54:36 +0800
Subject: [PATCH 11/36] Add api call to add new course

---
 .../organisation/courses/CourseForm.tsx       | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/components/organisation/courses/CourseForm.tsx b/components/organisation/courses/CourseForm.tsx
index 4237c2e..012e97f 100644
--- a/components/organisation/courses/CourseForm.tsx
+++ b/components/organisation/courses/CourseForm.tsx
@@ -22,11 +22,28 @@ export default function CourseForm({ mode, course }: Props) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const payload = { name, description };
+    const payload = { courseName: name, description };
 
     if (mode === "create") {
-      // add api call to create a new course
-      router.push("/courses");
+      try {
+        const res = await fetch("/api/courses", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        });
+        if (!res.ok) {
+          throw new Error("Failed to create course");
+        }
+        const data = await res.json();
+        console.log("Course created:", data);
+        router.push("/courses");
+      } catch (error) {
+        console.error("Error creating course:", error);
+        alert("Failed to create course. Please try again.");
+        return;
+      }
     } else {
       // add api call to edit course
       router.push(`/courses/${course?.id}`);

From d8b11c03e5000ce78fc17dfe99df2bc6c3221e83 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 16:01:33 +0800
Subject: [PATCH 12/36] Add endpoint to fetch courses

---
 app/courses/page.tsx | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/app/courses/page.tsx b/app/courses/page.tsx
index bc64877..7ab03f0 100644
--- a/app/courses/page.tsx
+++ b/app/courses/page.tsx
@@ -1,10 +1,13 @@
-// app/courses/page.tsx
+"use client";
+
 import CourseList from "@/components/organisation/courses/CourseList";
 import { Course } from "@/components/organisation/courses/CourseCard";
-import { getAuthUser } from "@/lib/auth";
+import { useAuth } from "@/context/AuthContext";
+import { useState, useEffect } from "react";
 
-export default async function CoursesPage() {
-  const user = await getAuthUser();
+export default function CoursesPage() {
+  const { user } = useAuth();
+  const [courses, setCourses] = useState<Course[]>([]);
 
   if (!user || !user.hasCompletedOnboarding) {
     return null;
@@ -12,11 +15,23 @@ export default async function CoursesPage() {
 
   const isAdmin = user?.organisation?.role === "admin";
 
-  // 2) Dummy data
-  const courses: Course[] = [
-    { id: 1, name: "Intro to TypeScript", description: "Learn TS basics" },
-    { id: 2, name: "Advanced React", description: "Hooks, Suspense, SSR" },
-  ];
+  useEffect(() => {
+    // Fetch courses from API or database
+    async function fetchCourses() {
+      // Replace with actual API call
+      const fetchedCourses = await fetch("/api/courses", {
+        credentials: "include",
+      })
+        .then((response) => response.json())
+        .then((data) => data["courses"] || [])
+        .catch((error) => {
+          console.error("Failed to fetch courses:", error);
+          return [];
+        });
+      setCourses(fetchedCourses);
+    }
+    fetchCourses();
+  }, []);
 
   // 3) Render the client component that will show/hide admin buttons
   return <CourseList courses={courses} isAdmin={isAdmin} />;

From 8f188f8ea0a857c1b9f580857078ce506cf5835e Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 16:21:24 +0800
Subject: [PATCH 13/36] Add api call to delete course

---
 .../organisation/courses/CourseForm.tsx       | 51 ++++++++++++++++---
 1 file changed, 44 insertions(+), 7 deletions(-)

diff --git a/components/organisation/courses/CourseForm.tsx b/components/organisation/courses/CourseForm.tsx
index 012e97f..5275154 100644
--- a/components/organisation/courses/CourseForm.tsx
+++ b/components/organisation/courses/CourseForm.tsx
@@ -18,6 +18,7 @@ interface Props {
 export default function CourseForm({ mode, course }: Props) {
   const [name, setName] = useState(course?.name ?? "");
   const [description, setDescription] = useState(course?.description ?? "");
+  const [deleteMode, setDeleteMode] = useState(false);
   const router = useRouter();
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -44,6 +45,30 @@ export default function CourseForm({ mode, course }: Props) {
         alert("Failed to create course. Please try again.");
         return;
       }
+    } else if (deleteMode) {
+      if (!course?.id) {
+        alert("Please provide a course name to delete.");
+        return;
+      }
+      try {
+        const res = await fetch(`/api/courses`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ courseId: course.id }),
+        });
+        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 {
       // add api call to edit course
       router.push(`/courses/${course?.id}`);
@@ -72,13 +97,25 @@ export default function CourseForm({ mode, course }: Props) {
           rows={4}
         />
       </div>
-
-      <button
-        type="submit"
-        className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
-      >
-        {mode === "create" ? "Create Course" : "Save Changes"}
-      </button>
+      <div className="space-x-4">
+        <button
+          type="submit"
+          className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+        >
+          {mode === "create" ? "Create Course" : "Save Changes"}
+        </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);
+            }}
+          >
+            Delete Course
+          </button>
+        )}
+      </div>
     </form>
   );
 }

From d00ec8e265bddbce334a468d27ab4edeff54fe7f Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 19:42:40 +0800
Subject: [PATCH 14/36] Add editing of courses

---
 app/courses/[courseId]/edit/page.tsx          | 13 +---
 app/courses/[courseId]/layout.tsx             | 13 ++--
 .../organisation/courses/CourseForm.tsx       | 75 +++++++++++++++++--
 3 files changed, 75 insertions(+), 26 deletions(-)

diff --git a/app/courses/[courseId]/edit/page.tsx b/app/courses/[courseId]/edit/page.tsx
index 7653c9b..99b32c9 100644
--- a/app/courses/[courseId]/edit/page.tsx
+++ b/app/courses/[courseId]/edit/page.tsx
@@ -1,8 +1,6 @@
 import { redirect } from "next/navigation";
 import { getAuthUser } from "@/lib/auth";
-import CourseForm, {
-  Course,
-} from "@/components/organisation/courses/CourseForm";
+import CourseForm from "@/components/organisation/courses/CourseForm";
 
 export default async function EditCoursePage({
   params,
@@ -15,19 +13,12 @@ export default async function EditCoursePage({
     redirect(`/courses/${courseId}`);
   }
 
-  // Dummy course; swap for real fetch/DB call
-  const course: Course = {
-    id: Number(courseId),
-    name: `Course #${courseId}`,
-    description: "Existing course description",
-  };
-
   return (
     <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
       <h2 className="text-2xl font-semibold text-purple-600 mb-4">
         Edit Course
       </h2>
-      <CourseForm mode="edit" course={course} />
+      <CourseForm mode="edit" courseId={courseId} />
     </div>
   );
 }
diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
index 56008ff..aa628da 100644
--- a/app/courses/[courseId]/layout.tsx
+++ b/app/courses/[courseId]/layout.tsx
@@ -2,6 +2,7 @@
 import { ReactNode } from "react";
 import Link from "next/link";
 import { getAuthUser } from "@/lib/auth";
+import { redirect } from "next/navigation";
 
 export default async function CourseLayout({
   children,
@@ -14,12 +15,10 @@ export default async function CourseLayout({
   const isAdmin = user?.organisation?.role === "admin";
   const { courseId } = await params;
 
-  // Dummy course; swap for DB call
-  const course = {
-    id: Number(courseId),
-    name: `Course #${courseId}`,
+  const response = {
+    id: courseId,
+    name: "Sample Course", // Replace with actual API call to fetch course details
   };
-
   return (
     <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
       <nav className="text-sm mb-4">
@@ -27,13 +26,13 @@ export default async function CourseLayout({
           Courses
         </Link>
         <span className="mx-2">/</span>
-        <span className="font-medium">{course.name}</span>
+        <span className="font-medium">{response.name}</span>
       </nav>
 
       {isAdmin && (
         <div className="text-right mb-6 space-x-2">
           <Link
-            href={`/courses/${course.id}/edit`}
+            href={`/courses/${response.id}/edit`}
             className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
           >
             Edit Course Details
diff --git a/components/organisation/courses/CourseForm.tsx b/components/organisation/courses/CourseForm.tsx
index 5275154..a40e3b8 100644
--- a/components/organisation/courses/CourseForm.tsx
+++ b/components/organisation/courses/CourseForm.tsx
@@ -3,6 +3,7 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 export interface Course {
   id: number;
@@ -12,15 +13,46 @@ export interface Course {
 
 interface Props {
   mode: "create" | "edit";
-  course?: Course;
+  courseId?: string;
 }
 
-export default function CourseForm({ mode, course }: Props) {
-  const [name, setName] = useState(course?.name ?? "");
-  const [description, setDescription] = useState(course?.description ?? "");
+export default function CourseForm({ mode, courseId }: Props) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
   const [deleteMode, setDeleteMode] = useState(false);
   const router = useRouter();
 
+  useEffect(() => {
+    async function fetchCourse() {
+      const response = await fetch(
+        `http://localhost:4000/api/courses/get-course`,
+        {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ courseId }),
+        }
+      ).then((res) => {
+        if (!res.ok) {
+          throw new Error("Failed to fetch course");
+        }
+        return res.json();
+      });
+      setName(response.name);
+      setDescription(response.description || "");
+    }
+    if (mode === "edit" && courseId) {
+      // Fetch course details if in edit mode
+      fetchCourse().catch((error) => {
+        console.error("Error fetching course:", error);
+        alert("Failed to load course data. Please try again.");
+        router.push("/courses");
+      });
+    }
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     const payload = { courseName: name, description };
@@ -32,6 +64,7 @@ export default function CourseForm({ mode, course }: Props) {
           headers: {
             "Content-Type": "application/json",
           },
+          credentials: "include",
           body: JSON.stringify(payload),
         });
         if (!res.ok) {
@@ -46,7 +79,14 @@ export default function CourseForm({ mode, course }: Props) {
         return;
       }
     } else if (deleteMode) {
-      if (!course?.id) {
+      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;
       }
@@ -56,7 +96,8 @@ export default function CourseForm({ mode, course }: Props) {
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ courseId: course.id }),
+          credentials: "include",
+          body: JSON.stringify({ courseId: courseId }),
         });
         if (!res.ok) {
           throw new Error("Failed to delete course");
@@ -70,8 +111,26 @@ export default function CourseForm({ mode, course }: Props) {
         return;
       }
     } else {
-      // add api call to edit course
-      router.push(`/courses/${course?.id}`);
+      try {
+        const res = await fetch("/api/courses", {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          credentials: "include",
+          body: JSON.stringify({ courseId: courseId, ...payload }),
+        });
+        if (!res.ok) {
+          throw new Error("Failed to update course");
+        }
+        const data = await res.json();
+        console.log("Course updated:", data);
+        router.push("/courses");
+      } catch (error) {
+        console.error("Error creating course:", error);
+        alert("Failed to update course. Please try again.");
+        return;
+      }
     }
   };
 

From 9659a207cf3535d50ab5fec4cdc19bd3d057aa8c Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 20:07:09 +0800
Subject: [PATCH 15/36] Fetch modules from backend

---
 app/courses/[courseId]/edit/modules/page.tsx  | 16 ----------
 app/courses/[courseId]/layout.tsx             |  6 ++++
 app/courses/[courseId]/modules/new/page.tsx   |  3 ++
 app/courses/[courseId]/page.tsx               |  9 ++----
 .../organisation/courses/CourseCard.tsx       |  2 +-
 .../organisation/courses/ModuleList.tsx       | 31 +++++++++++++++++--
 6 files changed, 41 insertions(+), 26 deletions(-)
 delete mode 100644 app/courses/[courseId]/edit/modules/page.tsx
 create mode 100644 app/courses/[courseId]/modules/new/page.tsx

diff --git a/app/courses/[courseId]/edit/modules/page.tsx b/app/courses/[courseId]/edit/modules/page.tsx
deleted file mode 100644
index ca78693..0000000
--- a/app/courses/[courseId]/edit/modules/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import ModuleList from "@/components/organisation/courses/ModuleList";
-import { Module } from "@/components/organisation/courses/ModuleCard";
-
-export default function EditModulesPage({
-  params,
-}: {
-  params: { courseId: string };
-}) {
-  // Replace with actual api
-  const modules: Module[] = [
-    { id: 1, title: "Getting Started", module_type: "video", position: 1 },
-    { id: 2, title: "Deep Dive", module_type: "pdf", position: 2 },
-  ];
-
-  return <ModuleList modules={modules} isEditMode={true} />;
-}
diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
index aa628da..62519d2 100644
--- a/app/courses/[courseId]/layout.tsx
+++ b/app/courses/[courseId]/layout.tsx
@@ -37,6 +37,12 @@ export default async function CourseLayout({
           >
             Edit Course Details
           </Link>
+          <Link
+            href={`/courses/${response.id}/modules/new`}
+            className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+          >
+            Add module
+          </Link>
         </div>
       )}
 
diff --git a/app/courses/[courseId]/modules/new/page.tsx b/app/courses/[courseId]/modules/new/page.tsx
new file mode 100644
index 0000000..c7bec8d
--- /dev/null
+++ b/app/courses/[courseId]/modules/new/page.tsx
@@ -0,0 +1,3 @@
+export default function NewModulePage() {
+  return <div>New Module page</div>;
+}
diff --git a/app/courses/[courseId]/page.tsx b/app/courses/[courseId]/page.tsx
index 0596480..3f8f466 100644
--- a/app/courses/[courseId]/page.tsx
+++ b/app/courses/[courseId]/page.tsx
@@ -1,5 +1,4 @@
 import ModuleList from "@/components/organisation/courses/ModuleList";
-import { Module } from "@/components/organisation/courses/ModuleCard";
 import { getAuthUser } from "@/lib/auth";
 
 export default async function CoursePage({
@@ -9,11 +8,7 @@ export default async function CoursePage({
 }) {
   const user = await getAuthUser();
   const isAdmin = user?.organisation?.role === "admin";
-  // Replace with actual api
-  const modules: Module[] = [
-    { id: 1, title: "Getting Started", module_type: "video", position: 1 },
-    { id: 2, title: "Deep Dive", module_type: "pdf", position: 2 },
-  ];
+  const { courseId } = await params;
 
-  return <ModuleList modules={modules} isEditMode={isAdmin} />;
+  return <ModuleList courseId={courseId} isEditMode={isAdmin} />;
 }
diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index a40cad0..6ab3e5f 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -17,7 +17,7 @@ export default function CourseCard({ course, isAdmin }: 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>
-      <p className="mt-2 text-gray-700">{course.description}</p>
+      <p className="mt-2 text-gray-700">{course.description?.slice(0, 100)}</p>
 
       <div className="mt-4 flex items-center space-x-4">
         <Link href={`/courses/${course.id}`}>
diff --git a/components/organisation/courses/ModuleList.tsx b/components/organisation/courses/ModuleList.tsx
index 34e3e1a..ae63b8d 100644
--- a/components/organisation/courses/ModuleList.tsx
+++ b/components/organisation/courses/ModuleList.tsx
@@ -1,13 +1,40 @@
 "use client";
 
 import ModuleCard, { Module } from "./ModuleCard";
+import { useEffect, useState } from "react";
 
 interface Props {
-  modules: Module[];
+  courseId: string;
   isEditMode: boolean;
 }
 
-export default function ModuleList({ modules, isEditMode }: Props) {
+export default function ModuleList({ courseId, isEditMode }: Props) {
+  const [modules, setModules] = useState<Module[]>([]);
+
+  useEffect(() => {
+    async function fetchModules() {
+      try {
+        const response = await fetch(`/api/courses/get-modules`, {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ courseId }),
+        });
+        if (!response.ok) {
+          throw new Error("Failed to fetch modules");
+        }
+        const data = await response.json();
+        setModules(data.modules || []);
+      } catch (error) {
+        console.error("Error fetching modules:", error);
+        setModules([]);
+      }
+    }
+    fetchModules();
+  }, [courseId]);
+
   if (modules.length === 0) {
     return <p className="text-gray-600">No modules added yet.</p>;
   }

From dbbc8b45eb485f7ab769158cc833b2ffa37181f1 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 20:10:13 +0800
Subject: [PATCH 16/36] disable reload to auth in layoutClient

---
 app/layoutClient.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/layoutClient.tsx b/app/layoutClient.tsx
index f780c94..8398339 100644
--- a/app/layoutClient.tsx
+++ b/app/layoutClient.tsx
@@ -28,11 +28,11 @@ export default function LayoutClient({
     }
   }, [shouldRedirectToOnboarding, router]);
 
-  useEffect(() => {
-    if (!isLoggedIn) {
-      router.push("/auth");
-    }
-  }, [isLoggedIn, router]);
+  // useEffect(() => {
+  //   if (!isLoggedIn) {
+  //     router.push("/auth");
+  //   }
+  // }, [isLoggedIn, router]);
 
   return (
     <div>

From 58c18df430fb78ab0e59c3f1760bec42705e8bf2 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 20:12:14 +0800
Subject: [PATCH 17/36] Add safeguard on dashboard page

---
 app/dashboard/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index c730522..62de64e 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -2,7 +2,7 @@ import { getAuthUser } from "@/lib/auth";
 
 export default async function DashboardPage() {
   const user = await getAuthUser();
-  if (!user) {
+  if (!user || !user.hasCompletedOnboarding) {
     return null;
   }
 

From 28698b9ebebd1cbf7169aabb7b6ec6a579a0312b Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 20:35:06 +0800
Subject: [PATCH 18/36] fix issue of reloading pages to /auth everytime

---
 app/AuthClientProvider.tsx | 29 +++++++++++++++++++++++++++
 app/AuthClientServer.tsx   | 10 ++++++++++
 app/layout.tsx             |  5 ++++-
 app/layoutClient.tsx       | 10 +++++-----
 context/AuthContext.tsx    | 40 ++++++++++++++++++++++++++++++++++----
 5 files changed, 84 insertions(+), 10 deletions(-)
 create mode 100644 app/AuthClientProvider.tsx
 create mode 100644 app/AuthClientServer.tsx

diff --git a/app/AuthClientProvider.tsx b/app/AuthClientProvider.tsx
new file mode 100644
index 0000000..e64460e
--- /dev/null
+++ b/app/AuthClientProvider.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function AuthClientProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { user, loading } = useAuth();
+
+  useEffect(() => {
+    if (loading) return;
+    if (pathname === "/" || pathname === "/auth") return;
+    if (!user.isLoggedIn) {
+      router.replace("/auth");
+      return;
+    }
+    if (!user.hasCompletedOnboarding && pathname !== "/onboarding") {
+      router.replace("/onboarding");
+    }
+  }, [loading, pathname, user, router]);
+
+  return <>{children}</>;
+}
diff --git a/app/AuthClientServer.tsx b/app/AuthClientServer.tsx
new file mode 100644
index 0000000..ddd2e38
--- /dev/null
+++ b/app/AuthClientServer.tsx
@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import AuthClientProvider from "./AuthClientProvider";
+
+export default function AuthServerProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <AuthClientProvider>{children}</AuthClientProvider>;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index c0e726d..f02a20c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { AuthProvider } from "@/context/AuthContext";
 import LayoutClient from "./layoutClient";
+import AuthServerProvider from "./AuthClientServer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,7 +21,9 @@ export default async function RootLayout({
     <html lang="en">
       <body className={`${inter.className} bg-white`}>
         <AuthProvider>
-          <LayoutClient>{children}</LayoutClient>
+          <AuthServerProvider>
+            <LayoutClient>{children}</LayoutClient>
+          </AuthServerProvider>
         </AuthProvider>
       </body>
     </html>
diff --git a/app/layoutClient.tsx b/app/layoutClient.tsx
index 8398339..50ee546 100644
--- a/app/layoutClient.tsx
+++ b/app/layoutClient.tsx
@@ -22,11 +22,11 @@ export default function LayoutClient({
 
   const shouldRedirectToOnboarding = isLoggedIn && !user.hasCompletedOnboarding;
 
-  useEffect(() => {
-    if (shouldRedirectToOnboarding) {
-      router.push("/onboarding");
-    }
-  }, [shouldRedirectToOnboarding, router]);
+  // useEffect(() => {
+  //   if (shouldRedirectToOnboarding) {
+  //     router.push("/onboarding");
+  //   }
+  // }, [shouldRedirectToOnboarding, router]);
 
   // useEffect(() => {
   //   if (!isLoggedIn) {
diff --git a/context/AuthContext.tsx b/context/AuthContext.tsx
index e95240d..963ef66 100644
--- a/context/AuthContext.tsx
+++ b/context/AuthContext.tsx
@@ -31,19 +31,51 @@ interface AuthCtx {
   user: User;
   setUser: (u: User) => void;
   logout: () => Promise<void>;
+  loading: boolean;
 }
 
 const AuthContext = createContext<AuthCtx | undefined>(undefined);
 
+// export function AuthProvider({ children }: { children: ReactNode }) {
+//   const [user, setUser] = useState<User>({ isLoggedIn: false });
+
+//   useEffect(() => {
+//     // 1) Fetch the “whoami”
+//     fetch("/api/me", { credentials: "include" })
+//       .then((r) => r.json())
+//       .then((u: User) => setUser(u))
+//       .catch(() => {});
+//   }, []);
+
+//   async function logout() {
+//     await fetch("/api/logout", { method: "POST", credentials: "include" });
+//     setUser({ isLoggedIn: false });
+//   }
+
+//   return (
+//     <AuthContext.Provider value={{ user, setUser, logout }}>
+//       {children}
+//     </AuthContext.Provider>
+//   );
+// }
+
+// export function useAuth() {
+//   const ctx = useContext(AuthContext);
+//   if (!ctx) throw new Error("useAuth must be inside AuthProvider");
+//   return ctx;
+// }
+
+// add a loading flag in state
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User>({ isLoggedIn: false });
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    // 1) Fetch the “whoami”
     fetch("/api/me", { credentials: "include" })
       .then((r) => r.json())
       .then((u: User) => setUser(u))
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => setLoading(false));
   }, []);
 
   async function logout() {
@@ -52,7 +84,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }
 
   return (
-    <AuthContext.Provider value={{ user, setUser, logout }}>
+    <AuthContext.Provider value={{ user, setUser, logout, loading }}>
       {children}
     </AuthContext.Provider>
   );
@@ -61,5 +93,5 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 export function useAuth() {
   const ctx = useContext(AuthContext);
   if (!ctx) throw new Error("useAuth must be inside AuthProvider");
-  return ctx;
+  return ctx; // now includes { user, setUser, logout, loading }
 }

From a37ad1105e86b0a1210b496e4e2f92c665e7799b Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 20:35:52 +0800
Subject: [PATCH 19/36] Clean code

---
 app/layoutClient.tsx | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/app/layoutClient.tsx b/app/layoutClient.tsx
index 50ee546..47e4591 100644
--- a/app/layoutClient.tsx
+++ b/app/layoutClient.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import { useAuth } from "@/context/AuthContext";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
 import HeaderNav from "@/components/HeaderNav";
 import SideNav from "@/components/SideNav";
 import OrgNav from "@/components/organisation/OrgNav";
@@ -16,24 +14,9 @@ export default function LayoutClient({
 }) {
   const { user } = useAuth();
   const isLoggedIn = user && user.isLoggedIn;
-  const router = useRouter();
   const role = user && user.hasCompletedOnboarding && user.organisation?.role;
   const isAdmin = role === "admin";
 
-  const shouldRedirectToOnboarding = isLoggedIn && !user.hasCompletedOnboarding;
-
-  // useEffect(() => {
-  //   if (shouldRedirectToOnboarding) {
-  //     router.push("/onboarding");
-  //   }
-  // }, [shouldRedirectToOnboarding, router]);
-
-  // useEffect(() => {
-  //   if (!isLoggedIn) {
-  //     router.push("/auth");
-  //   }
-  // }, [isLoggedIn, router]);
-
   return (
     <div>
       {isLoggedIn && user.hasCompletedOnboarding && isAdmin && (

From 980ab59f2c276531fe22891b43de29173b5141f3 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 21:18:20 +0800
Subject: [PATCH 20/36] Add placeholders for new module

---
 app/courses/[courseId]/modules/new/page.tsx   | 28 ++++++-
 .../organisation/courses/ModuleForm.tsx       | 81 +++++++++++++++++++
 2 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 components/organisation/courses/ModuleForm.tsx

diff --git a/app/courses/[courseId]/modules/new/page.tsx b/app/courses/[courseId]/modules/new/page.tsx
index c7bec8d..e11a5c1 100644
--- a/app/courses/[courseId]/modules/new/page.tsx
+++ b/app/courses/[courseId]/modules/new/page.tsx
@@ -1,3 +1,27 @@
-export default function NewModulePage() {
-  return <div>New Module page</div>;
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import ModuleForm from "@/components/organisation/courses/ModuleForm";
+
+export default async function NewModulePage({
+  params,
+}: {
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const { courseId } = await params;
+  if (!courseId) {
+    redirect("/courses");
+  }
+  if (user?.organisation?.role !== "admin") {
+    redirect(`/${courseId}/modules`);
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Create New Module
+      </h2>
+      <ModuleForm mode="create" courseId={courseId} />
+    </div>
+  );
 }
diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
new file mode 100644
index 0000000..731a27c
--- /dev/null
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -0,0 +1,81 @@
+// components/organisation/courses/CourseForm.tsx
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+interface Props {
+  mode: "create" | "edit";
+  courseId: string;
+}
+
+export default function ModuleForm({ mode, courseId }: Props) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [upload, setUpload] = useState("");
+  const [deleteMode, setDeleteMode] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    // fetch module details
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    router.push("/courses");
+    // module endpoints - new or delete or edit
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div>
+        <label className="block text-gray-700">Name</label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          className="w-full mt-1 p-2 border rounded"
+        />
+      </div>
+
+      <div>
+        <label className="block text-gray-700">Description</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          className="w-full mt-1 p-2 border rounded"
+          rows={4}
+        />
+      </div>
+      <div>
+        <label className="block text-gray-700">Upload Material</label>
+        <textarea
+          value={upload}
+          onChange={(e) => setUpload(e.target.value)}
+          className="w-full mt-1 p-2 border rounded"
+          rows={4}
+        />
+      </div>
+      <div className="space-x-4">
+        <button
+          type="submit"
+          className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+        >
+          {mode === "create" ? "Create Module" : "Save Changes"}
+        </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);
+            }}
+          >
+            Delete Module
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}

From d5e63656d03b3bb2f2eb2d47bb3f84b919f8f173 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 21:55:47 +0800
Subject: [PATCH 21/36] Add logic for file upload

---
 .../organisation/courses/ModuleForm.tsx       | 84 +++++++++++++++++--
 1 file changed, 76 insertions(+), 8 deletions(-)

diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
index 731a27c..e3f5c68 100644
--- a/components/organisation/courses/ModuleForm.tsx
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -1,9 +1,9 @@
-// components/organisation/courses/CourseForm.tsx
 "use client";
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import { ModuleDetailData } from "./ModuleDetail";
 interface Props {
   mode: "create" | "edit";
   courseId: string;
@@ -12,9 +12,11 @@ interface Props {
 export default function ModuleForm({ mode, courseId }: Props) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
-  const [upload, setUpload] = useState("");
+  const [uploadFile, setUploadFile] = useState<File | null>(null);
   const [deleteMode, setDeleteMode] = useState(false);
   const router = useRouter();
+  const [moduleType, setModuleType] =
+    useState<ModuleDetailData["module_type"]>("pdf");
 
   useEffect(() => {
     // fetch module details
@@ -22,7 +24,32 @@ export default function ModuleForm({ mode, courseId }: Props) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    router.push("/courses");
+    if (mode === "create") {
+      const fd = new FormData();
+      fd.append("courseId", courseId);
+      fd.append("name", name);
+      fd.append("description", description);
+      fd.append("type", moduleType);
+      if (uploadFile) {
+        fd.append("file", uploadFile);
+      }
+      try {
+        const res = await fetch("/api/courses/add-module", {
+          method: "POST",
+          credentials: "include",
+          body: fd,
+        });
+
+        if (!res.ok) throw new Error("Failed to upload module");
+
+        const data = await res.json();
+        console.log("Module created:", data);
+        router.push(`/courses/${courseId}/modules/${data.module_id}`);
+      } catch (err) {
+        console.error(err);
+        alert("Could not create module. Please try again.");
+      }
+    } else router.push("/courses");
     // module endpoints - new or delete or edit
   };
 
@@ -49,12 +76,53 @@ export default function ModuleForm({ mode, courseId }: Props) {
         />
       </div>
       <div>
-        <label className="block text-gray-700">Upload Material</label>
-        <textarea
-          value={upload}
-          onChange={(e) => setUpload(e.target.value)}
+        <label className="block text-gray-700">Material Type</label>
+        <select
+          value={moduleType}
+          onChange={(e) => setModuleType(e.target.value as any)}
           className="w-full mt-1 p-2 border rounded"
-          rows={4}
+        >
+          <option value="video">Video</option>
+          <option value="pdf">PDF</option>
+          <option value="slide">Slide</option>
+          <option value="quiz">Quiz</option>
+        </select>
+      </div>
+      <div>
+        <label className="block text-gray-700">Upload Material</label>{" "}
+        <input
+          key={moduleType}
+          type="file"
+          accept={
+            moduleType === "video"
+              ? "video/*"
+              : moduleType === "pdf"
+              ? "application/pdf"
+              : moduleType === "slide"
+              ? ".ppt,.pptx,application/pdf"
+              : undefined
+          }
+          onChange={(e) => setUploadFile(e.target.files?.[0] || null)}
+          required={mode === "create"}
+          className="
+      block w-full 
+      mt-1 p-3 
+      text-gray-600 bg-white 
+      border-2 border-dashed border-gray-300 
+      rounded-lg 
+      cursor-pointer 
+      hover:border-purple-600
+
+      /* style the “Choose file” button: */
+      file:mr-4 
+      file:py-2 file:px-4 
+      file:rounded 
+      file:border-0 
+      file:bg-purple-600 
+      file:text-white 
+      file:font-semibold 
+      hover:file:bg-purple-700
+    "
         />
       </div>
       <div className="space-x-4">

From 12e90fd1b4144fec098724840e29dd1624524aa5 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 22:02:27 +0800
Subject: [PATCH 22/36] Add delete module

---
 .../organisation/courses/ModuleCard.tsx       | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/components/organisation/courses/ModuleCard.tsx b/components/organisation/courses/ModuleCard.tsx
index ee412cf..0d6c8ba 100644
--- a/components/organisation/courses/ModuleCard.tsx
+++ b/components/organisation/courses/ModuleCard.tsx
@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 export interface Module {
   id: number;
@@ -19,6 +20,31 @@ interface Props {
 export default function ModuleCard({ module, isEditMode }: Props) {
   const { courseId } = useParams() as { courseId: string };
   const [editingMode, setEditingMode] = useState(false);
+  const router = useRouter();
+
+  const handleDelete = async () => {
+    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: module.id }),
+      });
+
+      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 (
     <div className="bg-white border rounded-lg p-4 shadow-sm hover:shadow-md transition">
@@ -55,9 +81,7 @@ export default function ModuleCard({ module, isEditMode }: Props) {
               </button>
               <button
                 className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded"
-                onClick={() =>
-                  alert("Delete module functionality not implemented yet")
-                }
+                onClick={handleDelete}
               >
                 Delete
               </button>

From 2bd260ef9e45d7adc0bc6d86235812777a26c24e Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 22:54:30 +0800
Subject: [PATCH 23/36] Add interface to fetch module data and display it

---
 .../[courseId]/modules/[moduleId]/page.tsx    | 12 +----
 .../organisation/courses/ModuleDetail.tsx     | 46 +++++++++++++++----
 2 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/app/courses/[courseId]/modules/[moduleId]/page.tsx b/app/courses/[courseId]/modules/[moduleId]/page.tsx
index 6d56bac..cc8e5b2 100644
--- a/app/courses/[courseId]/modules/[moduleId]/page.tsx
+++ b/app/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -8,19 +8,11 @@ export default async function ModulePage({
 }: {
   params: { courseId: string; moduleId: string };
 }) {
-  const { courseId, moduleId } = await params;
-  // add actual data
-  const data: ModuleDetailData = {
-    id: Number(moduleId),
-    title: `Module #${moduleId}`,
-    module_type: "video",
-    file_url: "/videos/sample.mp4",
-    // For quizzes, add a `quiz: { title, questions }` field here
-  };
+  const { moduleId } = await params;
 
   return (
     <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
-      <ModuleDetail data={data} />
+      <ModuleDetail moduleId={moduleId} />
     </div>
   );
 }
diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
index 4da73eb..7b16fb6 100644
--- a/components/organisation/courses/ModuleDetail.tsx
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 
 export interface QuizQuestion {
   id: number;
@@ -13,6 +13,7 @@ export interface ModuleDetailData {
   id: number;
   title: string;
   module_type: "video" | "pdf" | "slide" | "quiz" | string;
+  description?: string;
   file_url?: string;
   quiz?: {
     title: string;
@@ -21,23 +22,52 @@ export interface ModuleDetailData {
 }
 
 interface Props {
-  data: ModuleDetailData;
+  moduleId: string;
 }
 
-export default function ModuleDetail({ data }: Props) {
+export default function ModuleDetail({ moduleId }: Props) {
+  const [data, setData] = React.useState<ModuleDetailData | null>(null);
+
+  useEffect(() => {
+    async function fetchModuleDetails() {
+      try {
+        const response = await fetch(`/api/courses/get-module`, {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ moduleId }),
+        });
+        if (!response.ok) {
+          throw new Error("Failed to fetch module details");
+        }
+        const result = await response.json();
+        setData(result);
+      } catch (error) {
+        console.error("Error fetching module details:", error);
+        setData(null);
+      }
+    }
+    fetchModuleDetails();
+  }, [moduleId]);
+
+  if (!data) {
+    return <p className="text-gray-600">Loading module details...</p>;
+  }
+
+  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={data.file_url} className="w-full rounded-lg" />
+        <video controls src={finalUrl} className="w-full rounded-lg" />
       )}
 
       {["pdf", "slide"].includes(data.module_type) && data.file_url && (
-        <iframe
-          src={data.file_url}
-          className="w-full h-[600px] rounded-lg border"
-        />
+        <iframe src={finalUrl} className="w-full h-[600px] rounded-lg border" />
       )}
 
       {data.module_type === "quiz" && data.quiz && (

From bb183cab58c540ea20ff3b642fa1fa1a663776fc Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 22:55:30 +0800
Subject: [PATCH 24/36] add in progress message on dashboard

---
 app/dashboard/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 62de64e..da6092a 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -11,6 +11,7 @@ export default async function DashboardPage() {
       <h1>Welcome, {user.firstname || user.email}</h1>
       <p>Organisation: {user.organisation?.organisationname}</p>
       <p>Role: {user.organisation.role}</p>
+      <p>Dashboard is currently in progress.</p>
     </div>
   );
 }

From c218cf0cfefb136040ec5413af57284d5a53c0db Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 23:08:15 +0800
Subject: [PATCH 25/36] fix delete error

---
 .../modules/[moduleId]/edit/page.tsx          | 27 +++++++++
 .../organisation/courses/ModuleCard.tsx       | 55 ++----------------
 .../organisation/courses/ModuleForm.tsx       | 56 ++++++++++++++++++-
 3 files changed, 85 insertions(+), 53 deletions(-)
 create mode 100644 app/courses/[courseId]/modules/[moduleId]/edit/page.tsx

diff --git a/app/courses/[courseId]/modules/[moduleId]/edit/page.tsx b/app/courses/[courseId]/modules/[moduleId]/edit/page.tsx
new file mode 100644
index 0000000..dd6b95e
--- /dev/null
+++ b/app/courses/[courseId]/modules/[moduleId]/edit/page.tsx
@@ -0,0 +1,27 @@
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import ModuleForm from "@/components/organisation/courses/ModuleForm";
+
+export default async function EditModulePage({
+  params,
+}: {
+  params: { courseId: string; moduleId: string };
+}) {
+  const user = await getAuthUser();
+  const { courseId, moduleId } = await params;
+  if (!courseId || !moduleId) {
+    redirect("/courses");
+  }
+  if (user?.organisation?.role !== "admin") {
+    redirect(`/${courseId}/modules`);
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Edit Module
+      </h2>
+      <ModuleForm mode="edit" courseId={courseId} moduleId={moduleId} />
+    </div>
+  );
+}
diff --git a/components/organisation/courses/ModuleCard.tsx b/components/organisation/courses/ModuleCard.tsx
index 0d6c8ba..fc4fdb9 100644
--- a/components/organisation/courses/ModuleCard.tsx
+++ b/components/organisation/courses/ModuleCard.tsx
@@ -2,8 +2,6 @@
 
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
 
 export interface Module {
   id: number;
@@ -19,32 +17,6 @@ interface Props {
 
 export default function ModuleCard({ module, isEditMode }: Props) {
   const { courseId } = useParams() as { courseId: string };
-  const [editingMode, setEditingMode] = useState(false);
-  const router = useRouter();
-
-  const handleDelete = async () => {
-    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: module.id }),
-      });
-
-      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 (
     <div className="bg-white border rounded-lg p-4 shadow-sm hover:shadow-md transition">
@@ -63,29 +35,12 @@ export default function ModuleCard({ module, isEditMode }: Props) {
               Open
             </button>
           </Link>
-          {isEditMode && !editingMode && (
-            <button
-              className="px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded"
-              onClick={() => setEditingMode(true)}
-            >
-              Edit
-            </button>
-          )}
-          {isEditMode && editingMode && (
-            <div className="flex space-x-2">
-              <button
-                className="px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded"
-                onClick={() => setEditingMode(false)}
-              >
-                Save
-              </button>
-              <button
-                className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded"
-                onClick={handleDelete}
-              >
-                Delete
+          {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">
+                Edit
               </button>
-            </div>
+            </Link>
           )}
         </div>
       </div>
diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
index e3f5c68..67efe57 100644
--- a/components/organisation/courses/ModuleForm.tsx
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -7,9 +7,10 @@ import { ModuleDetailData } from "./ModuleDetail";
 interface Props {
   mode: "create" | "edit";
   courseId: string;
+  moduleId?: string;
 }
 
-export default function ModuleForm({ mode, courseId }: Props) {
+export default function ModuleForm({ mode, courseId, moduleId }: Props) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [uploadFile, setUploadFile] = useState<File | null>(null);
@@ -19,8 +20,35 @@ export default function ModuleForm({ mode, courseId }: Props) {
     useState<ModuleDetailData["module_type"]>("pdf");
 
   useEffect(() => {
-    // fetch module details
-  }, []);
+    async function fetchModuleDetails() {
+      try {
+        const response = await fetch(`/api/courses/get-module`, {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ moduleId }),
+        });
+        if (!response.ok) {
+          throw new Error("Failed to fetch module details");
+        }
+        const result = await response.json();
+        setName(result.title);
+        setDescription(result.description);
+        setModuleType(result.module_type);
+      } catch (error) {
+        console.error("Error fetching module details:", error);
+        setName("");
+        setDescription("");
+        setModuleType("pdf");
+      }
+    }
+
+    if (mode === "edit" && moduleId) {
+      fetchModuleDetails();
+    }
+  }, [moduleId]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -49,6 +77,28 @@ export default function ModuleForm({ mode, courseId }: 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 router.push("/courses");
     // module endpoints - new or delete or edit
   };

From 6dfe4ecbac1c092a19c8893d78c779b3f959cf62 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 23:21:25 +0800
Subject: [PATCH 26/36] Add functionality to edit a module

---
 .../organisation/courses/ModuleForm.tsx       | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
index 67efe57..ef7b55c 100644
--- a/components/organisation/courses/ModuleForm.tsx
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -99,8 +99,32 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
         console.error("Error deleting module:", error);
         alert("Failed to delete module. Please try again.");
       }
-    } else router.push("/courses");
-    // module endpoints - new or delete or edit
+    } else {
+      const fd = new FormData();
+      fd.append("moduleId", moduleId || "");
+      fd.append("name", name);
+      fd.append("description", description);
+      if (uploadFile) {
+        fd.append("type", moduleType);
+        fd.append("file", uploadFile);
+      }
+      try {
+        const res = await fetch("/api/courses/update-module", {
+          method: "PUT",
+          credentials: "include",
+          body: fd,
+        });
+
+        if (!res.ok) throw new Error("Failed to update module");
+
+        const data = await res.json();
+        console.log("Module updated:", data);
+        router.push(`/courses/${courseId}/modules/${moduleId}`);
+      } catch (err) {
+        console.error(err);
+        alert("Could not update module. Please try again.");
+      }
+    }
   };
 
   return (
@@ -176,6 +200,13 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
         />
       </div>
       <div className="space-x-4">
+        {mode === "edit" && (
+          <p className="mb-4 text-sm text-red-500">
+            <strong>Note:</strong> If you upload a new file, the existing file
+            will be replaced with the new one. If you don't upload a new file,
+            the existing file and file type will remain unchanged.
+          </p>
+        )}
         <button
           type="submit"
           className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"

From 420f68a7d27fe9757f4e4c79222b12c9e6ebf0b8 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 23:21:46 +0800
Subject: [PATCH 27/36] make wording less ambiguous

---
 app/courses/[courseId]/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
index 62519d2..58bead5 100644
--- a/app/courses/[courseId]/layout.tsx
+++ b/app/courses/[courseId]/layout.tsx
@@ -41,7 +41,7 @@ export default async function CourseLayout({
             href={`/courses/${response.id}/modules/new`}
             className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
           >
-            Add module
+            Add new module
           </Link>
         </div>
       )}

From 191f2d8f89d54d459d8e1e48d29d586777da40dd Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 23:22:24 +0800
Subject: [PATCH 28/36] clean code

---
 app/courses/[courseId]/layout.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
index 58bead5..63759e0 100644
--- a/app/courses/[courseId]/layout.tsx
+++ b/app/courses/[courseId]/layout.tsx
@@ -1,8 +1,6 @@
-// app/courses/[courseId]/layout.tsx
 import { ReactNode } from "react";
 import Link from "next/link";
 import { getAuthUser } from "@/lib/auth";
-import { redirect } from "next/navigation";
 
 export default async function CourseLayout({
   children,

From febaab54706d5b861458909f8653ae1451ad14f0 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 23:28:42 +0800
Subject: [PATCH 29/36] Add placeholder for users list

---
 app/users/layout.tsx                        | 10 ++++++++++
 app/users/page.tsx                          | 18 ++++++++++++++++++
 components/organisation/users/UsersList.tsx | 15 +++++++++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 app/users/layout.tsx
 create mode 100644 app/users/page.tsx
 create mode 100644 components/organisation/users/UsersList.tsx

diff --git a/app/users/layout.tsx b/app/users/layout.tsx
new file mode 100644
index 0000000..1c4aaa3
--- /dev/null
+++ b/app/users/layout.tsx
@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+export default function UsersLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-white p-6">
+      <h1 className="text-4xl font-bold text-purple-600 mb-8">Users</h1>
+      {children}
+    </div>
+  );
+}
diff --git a/app/users/page.tsx b/app/users/page.tsx
new file mode 100644
index 0000000..bba71f8
--- /dev/null
+++ b/app/users/page.tsx
@@ -0,0 +1,18 @@
+import { getAuthUser } from "@/lib/auth";
+import { redirect } from "next/navigation";
+import UsersList from "@/components/organisation/users/UsersList";
+
+export default async function UsersPage() {
+  const user = await getAuthUser();
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+  const isAdmin = user?.organisation?.role === "admin";
+  if (!isAdmin) {
+    redirect("/dashboard");
+    return null;
+  }
+
+  const organisationId = user.organisation.id;
+  return <UsersList organisationId={organisationId} />;
+}
diff --git a/components/organisation/users/UsersList.tsx b/components/organisation/users/UsersList.tsx
new file mode 100644
index 0000000..05f7106
--- /dev/null
+++ b/components/organisation/users/UsersList.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+export default function UsersList({
+  organisationId,
+}: {
+  organisationId: string;
+}) {
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h1 className="text-2xl font-bold mb-4">Users List</h1>
+      <p className="text-gray-600">This is a placeholder for the users list.</p>
+      {/* Add your users list component here */}
+    </div>
+  );
+}

From e500c6b5cdc7397994ae1e879af4aadf2cfebebb Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 23:40:05 +0800
Subject: [PATCH 30/36] Add interface to view users in an organisation

---
 app/users/page.tsx                          |  3 +-
 components/organisation/users/UsersList.tsx | 89 ++++++++++++++++++---
 2 files changed, 81 insertions(+), 11 deletions(-)

diff --git a/app/users/page.tsx b/app/users/page.tsx
index bba71f8..f287a12 100644
--- a/app/users/page.tsx
+++ b/app/users/page.tsx
@@ -13,6 +13,5 @@ export default async function UsersPage() {
     return null;
   }
 
-  const organisationId = user.organisation.id;
-  return <UsersList organisationId={organisationId} />;
+  return <UsersList />;
 }
diff --git a/components/organisation/users/UsersList.tsx b/components/organisation/users/UsersList.tsx
index 05f7106..edc9fe6 100644
--- a/components/organisation/users/UsersList.tsx
+++ b/components/organisation/users/UsersList.tsx
@@ -1,15 +1,86 @@
 "use client";
 
-export default function UsersList({
-  organisationId,
-}: {
-  organisationId: string;
-}) {
+import React, { useState, useEffect } from "react";
+
+interface User {
+  id: number;
+  firstname: string;
+  lastname: string;
+  email: string;
+  role: string;
+}
+
+export default function UsersList() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchUsers() {
+      try {
+        const res = await fetch(`/api/users`, {
+          credentials: "include",
+        });
+        if (!res.ok) throw new Error("Failed to fetch users");
+        const data: User[] = await res.json();
+        setUsers(data);
+      } catch (err: any) {
+        setError(err.message || "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchUsers();
+  }, []);
+
+  if (loading) {
+    return <p className="text-center py-6">Loading users…</p>;
+  }
+  if (error) {
+    return <p className="text-center py-6 text-red-500">Error: {error}</p>;
+  }
+
   return (
-    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
-      <h1 className="text-2xl font-bold mb-4">Users List</h1>
-      <p className="text-gray-600">This is a placeholder for the users list.</p>
-      {/* Add your users list component here */}
+    <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
+      <h1 className="text-2xl font-bold mb-4">Users in Your Organisation</h1>
+
+      {users.length === 0 ? (
+        <p className="text-gray-600">No users found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full table-auto border-collapse">
+            <thead>
+              <tr className="bg-gray-100">
+                <th className="px-4 py-2 text-left text-sm font-medium">
+                  Name
+                </th>
+                <th className="px-4 py-2 text-left text-sm font-medium">
+                  Email
+                </th>
+                <th className="px-4 py-2 text-left text-sm font-medium">
+                  Role
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((u, idx) => (
+                <tr
+                  key={u.id}
+                  className={idx % 2 === 0 ? "bg-white" : "bg-gray-50"}
+                >
+                  <td className="px-4 py-2 text-sm">
+                    {u.firstname} {u.lastname}
+                  </td>
+                  <td className="px-4 py-2 text-sm text-gray-700">{u.email}</td>
+                  <td className="px-4 py-2 text-sm text-purple-600 font-medium">
+                    {u.role}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
     </div>
   );
 }

From 044418d9a824fd21ff5bc3481aae4c071f74a306 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 23:41:22 +0800
Subject: [PATCH 31/36] add alert message for not implemented

---
 components/organisation/settings/OrgSettings.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/organisation/settings/OrgSettings.tsx b/components/organisation/settings/OrgSettings.tsx
index 788ed33..9a1a6e6 100644
--- a/components/organisation/settings/OrgSettings.tsx
+++ b/components/organisation/settings/OrgSettings.tsx
@@ -90,6 +90,7 @@ export default function OrgSettings() {
     if (!transferEmail) return;
     // open confirmation modal...
     // then call API to transfer ownership
+    alert(`Transfer ownership is not implemented yet.`);
   };
 
   return (

From 2131714b477caf7d3000adb8da7b53ac55c992a2 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 23:45:07 +0800
Subject: [PATCH 32/36] Make navbar more visible

---
 components/SideNav.tsx             | 2 +-
 components/organisation/OrgNav.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 1b6783d..6d38d41 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -45,7 +45,7 @@ export default function SideNav() {
   const [imgSrc, setImgSrc] = useState(avatarUrl);
 
   return (
-    <aside className="w-64 h-screen bg-white border-r border-gray-200 flex flex-col justify-between">
+    <aside className="sticky top-0 w-64 h-screen bg-white border-r border-gray-200 flex flex-col justify-between overflow-y-auto">
       <div>
         <Link
           href="/"
diff --git a/components/organisation/OrgNav.tsx b/components/organisation/OrgNav.tsx
index 393472a..bc14a2a 100644
--- a/components/organisation/OrgNav.tsx
+++ b/components/organisation/OrgNav.tsx
@@ -42,7 +42,7 @@ export default function OrgNav() {
   const [imgSrc, setImgSrc] = useState(avatarUrl);
 
   return (
-    <aside className="w-64 h-screen bg-white border-r border-gray-200 flex flex-col justify-between">
+    <aside className="sticky top-0 w-64 h-screen bg-white border-r border-gray-200 flex flex-col justify-between overflow-y-auto">
       <div>
         <Link
           href="/"

From 377571b23fc5757059eb203d17c1919235f682b5 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 29 May 2025 23:58:44 +0800
Subject: [PATCH 33/36] Remove users from organisation

---
 components/organisation/users/UsersList.tsx | 50 ++++++++++++++++++++-
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/components/organisation/users/UsersList.tsx b/components/organisation/users/UsersList.tsx
index edc9fe6..87794c6 100644
--- a/components/organisation/users/UsersList.tsx
+++ b/components/organisation/users/UsersList.tsx
@@ -12,6 +12,13 @@ interface User {
 
 export default function UsersList() {
   const [users, setUsers] = useState<User[]>([]);
+  const sortedUsers = [...users].sort((a, b) =>
+    a.role === "admin" && b.role !== "admin"
+      ? -1
+      : b.role === "admin" && a.role !== "admin"
+      ? 1
+      : 0
+  );
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -40,11 +47,37 @@ export default function UsersList() {
     return <p className="text-center py-6 text-red-500">Error: {error}</p>;
   }
 
+  const handleRemoveUser = async (userId: number) => {
+    if (
+      !confirm(
+        "Are you sure you want to remove this user from your organisation? All enrolments and data will be deleted permanently." +
+          "\n\nThis action cannot be undone."
+      )
+    )
+      return;
+    try {
+      const res = await fetch(`/api/users`, {
+        method: "DELETE",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ userId }),
+      });
+      if (!res.ok) throw new Error("Failed to remove user");
+      setUsers(users.filter((u) => u.id !== userId));
+      alert("User removed successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to remove user");
+      console.error("Error removing user:", err);
+    }
+  };
+
   return (
     <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
       <h1 className="text-2xl font-bold mb-4">Users in Your Organisation</h1>
 
-      {users.length === 0 ? (
+      {sortedUsers.length === 0 ? (
         <p className="text-gray-600">No users found.</p>
       ) : (
         <div className="overflow-x-auto">
@@ -60,10 +93,13 @@ export default function UsersList() {
                 <th className="px-4 py-2 text-left text-sm font-medium">
                   Role
                 </th>
+                <th className="px-4 py-2 text-left text-sm font-medium">
+                  Actions
+                </th>
               </tr>
             </thead>
             <tbody>
-              {users.map((u, idx) => (
+              {sortedUsers.map((u, idx) => (
                 <tr
                   key={u.id}
                   className={idx % 2 === 0 ? "bg-white" : "bg-gray-50"}
@@ -75,6 +111,16 @@ export default function UsersList() {
                   <td className="px-4 py-2 text-sm text-purple-600 font-medium">
                     {u.role}
                   </td>
+                  {u.role !== "admin" && (
+                    <td className="px-4 py-2 text-sm">
+                      <button
+                        onClick={() => handleRemoveUser(u.id)}
+                        className="text-red-600 hover:text-red-800"
+                      >
+                        Remove
+                      </button>
+                    </td>
+                  )}
                 </tr>
               ))}
             </tbody>

From 6cccbb0101d10515ffb3da5b26e0cb55c73e9a93 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Fri, 30 May 2025 00:22:43 +0800
Subject: [PATCH 34/36] Add interface to generate and join using invite code

---
 app/onboarding/page.tsx                     | 28 +++++++--
 components/organisation/users/UsersList.tsx | 67 +++++++++++++++++++++
 2 files changed, 90 insertions(+), 5 deletions(-)

diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index cb916f9..0049e05 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -14,7 +14,7 @@ export default function OnboardingPage() {
 
   const [role, setRole] = useState<"admin" | "employee">("employee");
   const [orgName, setOrgName] = useState("");
-  const [orgId, setOrgId] = useState("");
+  const [orgInvite, setOrgInvite] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
@@ -41,7 +41,10 @@ export default function OnboardingPage() {
           method: "POST",
           credentials: "include",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ organisationId: orgId }),
+          body: JSON.stringify({
+            organisationName: orgName,
+            inviteCode: orgInvite,
+          }),
         });
         if (!addemp.ok) {
           const body = await addemp.json().catch(() => ({}));
@@ -49,7 +52,6 @@ export default function OnboardingPage() {
         }
       }
 
-      // 2) Mark onboarding complete
       const done = await fetch("/api/complete-onboarding", {
         method: "POST",
         credentials: "include",
@@ -131,6 +133,22 @@ export default function OnboardingPage() {
       )}
       {role === "employee" && (
         <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label
+              htmlFor="orgName"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Organization Name
+            </label>
+            <input
+              id="orgName"
+              type="text"
+              value={orgName}
+              onChange={(e) => setOrgName(e.target.value)}
+              required
+              className="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-purple-300"
+            />
+          </div>
           <div>
             <label
               htmlFor="orgName"
@@ -141,8 +159,8 @@ export default function OnboardingPage() {
             <input
               id="orgName"
               type="text"
-              value={orgId}
-              onChange={(e) => setOrgId(e.target.value)}
+              value={orgInvite}
+              onChange={(e) => setOrgInvite(e.target.value)}
               required
               className="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-purple-300"
             />
diff --git a/components/organisation/users/UsersList.tsx b/components/organisation/users/UsersList.tsx
index 87794c6..43225d0 100644
--- a/components/organisation/users/UsersList.tsx
+++ b/components/organisation/users/UsersList.tsx
@@ -21,6 +21,9 @@ export default function UsersList() {
   );
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [inviteCode, setInviteCode] = useState<string | null>(null);
+  const [inviteLoading, setInviteLoading] = useState(true);
+  const [inviteError, setInviteError] = useState<string | null>(null);
 
   useEffect(() => {
     async function fetchUsers() {
@@ -40,6 +43,24 @@ export default function UsersList() {
     fetchUsers();
   }, []);
 
+  useEffect(() => {
+    async function loadInvite() {
+      try {
+        const res = await fetch("/api/orgs/get-curent-invitecode", {
+          credentials: "include",
+        });
+        if (!res.ok) throw new Error("Failed to load invite code");
+        const { inviteCode } = await res.json();
+        setInviteCode(inviteCode);
+      } catch (e: any) {
+        setInviteError(e.message);
+      } finally {
+        setInviteLoading(false);
+      }
+    }
+    loadInvite();
+  }, []);
+
   if (loading) {
     return <p className="text-center py-6">Loading users…</p>;
   }
@@ -47,6 +68,23 @@ export default function UsersList() {
     return <p className="text-center py-6 text-red-500">Error: {error}</p>;
   }
 
+  const handleGenerate = async () => {
+    setInviteLoading(true);
+    try {
+      const res = await fetch("/api/orgs/generate-invite-code", {
+        credentials: "include",
+      });
+      if (!res.ok) throw new Error("Failed to generate invite code");
+      const { inviteCode } = await res.json();
+      setInviteCode(inviteCode);
+      setInviteError(null);
+    } catch (e: any) {
+      setInviteError(e.message);
+    } finally {
+      setInviteLoading(false);
+    }
+  };
+
   const handleRemoveUser = async (userId: number) => {
     if (
       !confirm(
@@ -77,6 +115,35 @@ export default function UsersList() {
     <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
       <h1 className="text-2xl font-bold mb-4">Users in Your Organisation</h1>
 
+      <div className="mb-6 p-4 bg-blue-50 rounded">
+        <h2 className="text-lg font-semibold mb-2">Invitation Code</h2>
+        {inviteLoading ? (
+          <p>Loading…</p>
+        ) : inviteError ? (
+          <p className="text-red-500">{inviteError}</p>
+        ) : (
+          <div className="flex items-center space-x-2">
+            <code className="font-mono bg-white px-2 py-1 rounded">
+              {inviteCode || "No invite code generated yet"}
+            </code>
+            <button
+              onClick={handleGenerate}
+              className="px-3 py-1 bg-purple-600 text-white rounded text-sm"
+            >
+              Generate New
+            </button>
+            <button
+              onClick={() =>
+                inviteCode && navigator.clipboard.writeText(inviteCode)
+              }
+              className="px-3 py-1 bg-gray-200 rounded text-sm"
+            >
+              Copy
+            </button>
+          </div>
+        )}
+      </div>
+
       {sortedUsers.length === 0 ? (
         <p className="text-gray-600">No users found.</p>
       ) : (

From ac3ee0b29de118225e2723d3844e4d07cad411c3 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Fri, 30 May 2025 10:28:16 +0800
Subject: [PATCH 35/36] Remove breadcrumb for now

---
 app/courses/[courseId]/layout.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
index 63759e0..5c27e2b 100644
--- a/app/courses/[courseId]/layout.tsx
+++ b/app/courses/[courseId]/layout.tsx
@@ -21,10 +21,10 @@ export default async function CourseLayout({
     <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
       <nav className="text-sm mb-4">
         <Link href="/courses" className="text-purple-600 hover:underline">
-          Courses
+          Go to All Courses
         </Link>
-        <span className="mx-2">/</span>
-        <span className="font-medium">{response.name}</span>
+        {/* <span className="mx-2">/</span>
+        <span className="font-medium">{response.name}</span> */}
       </nav>
 
       {isAdmin && (

From 354e003e74caceb5fa68eb5a6557649dd5d7b824 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sun, 8 Jun 2025 23:54:20 +0200
Subject: [PATCH 36/36] Employee onboards using invite code only

---
 app/onboarding/page.tsx | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index 0049e05..db0a5c9 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -42,7 +42,6 @@ export default function OnboardingPage() {
           credentials: "include",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
-            organisationName: orgName,
             inviteCode: orgInvite,
           }),
         });
@@ -133,22 +132,6 @@ export default function OnboardingPage() {
       )}
       {role === "employee" && (
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label
-              htmlFor="orgName"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Organization Name
-            </label>
-            <input
-              id="orgName"
-              type="text"
-              value={orgName}
-              onChange={(e) => setOrgName(e.target.value)}
-              required
-              className="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-purple-300"
-            />
-          </div>
           <div>
             <label
               htmlFor="orgName"