From ff155e57d9e18ec24123e68c63c12abd1478b9d3 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 9 Jul 2025 01:05:36 +0800
Subject: [PATCH 01/21] Create onboarding form configuration for admin

---
 app/organisation/page.tsx                     |  39 ++-
 .../settings/OnboardingConfig.tsx             | 287 ++++++++++++++++++
 2 files changed, 324 insertions(+), 2 deletions(-)
 create mode 100644 components/organisation/settings/OnboardingConfig.tsx

diff --git a/app/organisation/page.tsx b/app/organisation/page.tsx
index 64f169d..4785a44 100644
--- a/app/organisation/page.tsx
+++ b/app/organisation/page.tsx
@@ -1,10 +1,14 @@
 "use client";
 
 import { useAuth } from "@/context/AuthContext";
+import { useState } from "react";
 import ManageTags from "@/components/organisation/settings/ManageTags";
+import OnboardingConfig from "@/components/organisation/settings/OnboardingConfig";
 
 export default function OrganisationsPage() {
   const { user } = useAuth();
+  const [activeTab, setActiveTab] = useState<"tags" | "onboarding">("tags");
+
   if (!user || !user.hasCompletedOnboarding) {
     return null;
   }
@@ -22,10 +26,41 @@ export default function OrganisationsPage() {
 
   return (
     <div>
-      <h1 className="text-3xl font-bold mb-4 text-purple-600">
+      <h1 className="text-3xl font-bold mb-6 text-purple-600">
         My Organisation
       </h1>
-      <ManageTags />
+      
+      {/* Tab Navigation */}
+      <div className="mb-6">
+        <div className="border-b border-gray-200">
+          <nav className="-mb-px flex space-x-8">
+            <button
+              onClick={() => setActiveTab("tags")}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === "tags"
+                  ? "border-purple-500 text-purple-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              }`}
+            >
+              Manage Tags
+            </button>
+            <button
+              onClick={() => setActiveTab("onboarding")}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === "onboarding"
+                  ? "border-purple-500 text-purple-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              }`}
+            >
+              Onboarding Form
+            </button>
+          </nav>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === "tags" && <ManageTags />}
+      {activeTab === "onboarding" && <OnboardingConfig />}
     </div>
   );
 }
diff --git a/components/organisation/settings/OnboardingConfig.tsx b/components/organisation/settings/OnboardingConfig.tsx
new file mode 100644
index 0000000..9a3b709
--- /dev/null
+++ b/components/organisation/settings/OnboardingConfig.tsx
@@ -0,0 +1,287 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface Tag {
+  id: number;
+  name: string;
+}
+
+interface Option {
+  id: number;
+  option_text: string;
+  tag_id: number;
+  tag_name: string;
+}
+
+interface Question {
+  id: number;
+  question_text: string;
+  position: number;
+  options: Option[];
+}
+
+export default function OnboardingConfig() {
+  const [questions, setQuestions] = useState<Question[]>([]);
+  const [tags, setTags] = useState<Tag[]>([]);
+  const [newQuestionText, setNewQuestionText] = useState("");
+  const [editingQuestion, setEditingQuestion] = useState<number | null>(null);
+  const [newOptionText, setNewOptionText] = useState("");
+  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchQuestions = async () => {
+    try {
+      const res = await fetch("/api/onboarding/questions", { credentials: "include" });
+      if (res.ok) {
+        const data = await res.json();
+        setQuestions(data.questions || []);
+      } else {
+        setError("Failed to fetch questions");
+      }
+    } catch (err) {
+      setError("Error fetching questions");
+      console.error(err);
+    }
+  };
+
+  const fetchTags = async () => {
+    try {
+      const res = await fetch("/api/courses/tags", { credentials: "include" });
+      if (res.ok) {
+        const data = await res.json();
+        setTags(data || []);
+      } else {
+        setError("Failed to fetch tags");
+      }
+    } catch (err) {
+      setError("Error fetching tags");
+      console.error(err);
+    }
+  };
+
+  useEffect(() => {
+    fetchQuestions();
+    fetchTags();
+  }, []);
+
+  const addQuestion = async () => {
+    const text = newQuestionText.trim();
+    if (!text) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/onboarding/questions", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          question_text: text,
+          position: questions.length
+        }),
+      });
+
+      if (res.ok) {
+        setNewQuestionText("");
+        await fetchQuestions();
+      } else {
+        setError("Failed to add question");
+      }
+    } catch (err) {
+      setError("Error adding question");
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const deleteQuestion = async (id: number) => {
+    if (!confirm("Delete this question? All associated options will also be deleted.")) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`/api/onboarding/questions/${id}`, {
+        method: "DELETE",
+        credentials: "include",
+      });
+
+      if (res.ok) {
+        await fetchQuestions();
+      } else {
+        setError("Failed to delete question");
+      }
+    } catch (err) {
+      setError("Error deleting question");
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const addOption = async (questionId: number) => {
+    const text = newOptionText.trim();
+    if (!text || !selectedTagId) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`/api/onboarding/questions/${questionId}/options`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          option_text: text,
+          tag_id: selectedTagId
+        }),
+      });
+
+      if (res.ok) {
+        setNewOptionText("");
+        setSelectedTagId(null);
+        setEditingQuestion(null);
+        await fetchQuestions();
+      } else {
+        setError("Failed to add option");
+      }
+    } catch (err) {
+      setError("Error adding option");
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold">Onboarding Form Configuration</h1>
+
+      {error && (
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+          {error}
+        </div>
+      )}
+
+      {/* Add New Question */}
+      <div className="bg-white p-4 rounded-lg shadow border">
+        <h2 className="text-lg font-semibold mb-4">Add New Question</h2>
+        <div className="flex flex-col sm:flex-row gap-2">
+          <input
+            type="text"
+            placeholder="Enter question text"
+            value={newQuestionText}
+            onChange={(e) => setNewQuestionText(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                addQuestion();
+              }
+            }}
+            className="flex-1 p-2 border rounded focus:outline-none focus:ring"
+            disabled={loading}
+          />
+          <button
+            onClick={addQuestion}
+            disabled={loading || !newQuestionText.trim()}
+            className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded disabled:opacity-50"
+          >
+            {loading ? "Adding..." : "Add Question"}
+          </button>
+        </div>
+      </div>
+
+      {/* Questions List */}
+      <div className="space-y-4">
+        {questions.map((question) => (
+          <div key={question.id} className="bg-white p-4 rounded-lg shadow border">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-medium">{question.question_text}</h3>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setEditingQuestion(editingQuestion === question.id ? null : question.id)}
+                  className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm"
+                >
+                  {editingQuestion === question.id ? "Cancel" : "Add Option"}
+                </button>
+                <button
+                  onClick={() => deleteQuestion(question.id)}
+                  className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-sm"
+                  disabled={loading}
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+
+            {/* Options */}
+            {question.options.length > 0 && (
+              <div className="mb-4">
+                <h4 className="font-medium mb-2">Options:</h4>
+                <div className="space-y-2">
+                  {question.options.map((option) => (
+                    <div key={option.id} className="flex items-center justify-between bg-gray-50 p-2 rounded">
+                      <span>{option.option_text}</span>
+                      <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">
+                        {option.tag_name}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Add Option Form */}
+            {editingQuestion === question.id && (
+              <div className="bg-gray-50 p-4 rounded border">
+                <h4 className="font-medium mb-3">Add New Option</h4>
+                <div className="space-y-3">
+                  <input
+                    type="text"
+                    placeholder="Option text"
+                    value={newOptionText}
+                    onChange={(e) => setNewOptionText(e.target.value)}
+                    className="w-full p-2 border rounded focus:outline-none focus:ring"
+                    disabled={loading}
+                  />
+                  <select
+                    value={selectedTagId || ""}
+                    onChange={(e) => setSelectedTagId(e.target.value ? parseInt(e.target.value) : null)}
+                    className="w-full p-2 border rounded focus:outline-none focus:ring"
+                    disabled={loading}
+                  >
+                    <option value="">Select a tag</option>
+                    {tags.map((tag) => (
+                      <option key={tag.id} value={tag.id}>
+                        {tag.name}
+                      </option>
+                    ))}
+                  </select>
+                  <button
+                    onClick={() => addOption(question.id)}
+                    disabled={loading || !newOptionText.trim() || !selectedTagId}
+                    className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded disabled:opacity-50"
+                  >
+                    {loading ? "Adding..." : "Add Option"}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {questions.length === 0 && !loading && (
+        <div className="text-center py-8 text-gray-500">
+          No questions configured yet. Add your first question above.
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file

From 2c1ff577d5b824836db1586cce502e868bbb23b3 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 9 Jul 2025 09:15:48 +0800
Subject: [PATCH 02/21] Add onboarding form for emplpoyee

---
 app/onboarding/page.tsx                       | 277 ++++++++++++------
 .../onboarding/OnboardingQuestionnaire.tsx    | 227 ++++++++++++++
 .../settings/OnboardingConfig.tsx             |  79 +++--
 3 files changed, 466 insertions(+), 117 deletions(-)
 create mode 100644 components/onboarding/OnboardingQuestionnaire.tsx

diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index db0a5c9..e0cb43f 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -1,8 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/context/AuthContext";
+import OnboardingQuestionnaire from "@/components/onboarding/OnboardingQuestionnaire";
+
+type OnboardingStep = "organization" | "questionnaire" | "complete";
 
 export default function OnboardingPage() {
   const router = useRouter();
@@ -12,20 +15,45 @@ export default function OnboardingPage() {
     return null;
   }
 
+  const [step, setStep] = useState<OnboardingStep>("organization");
   const [role, setRole] = useState<"admin" | "employee">("employee");
   const [orgName, setOrgName] = useState("");
   const [orgInvite, setOrgInvite] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    const checkUserOrganization = async () => {
+      try {
+        const response = await fetch("/api/me", { credentials: "include" });
+        if (response.ok) {
+          const userData = await response.json();
+          if (userData.organisation) {
+            if (userData.organisation.role === "admin") {
+              completeOnboarding();
+            } else {
+              setStep("questionnaire");
+            }
+          }
+        }
+      } catch (err) {
+        console.error("Error checking user organization:", err);
+      } finally {
+        setInitializing(false);
+      }
+    };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+    checkUserOrganization();
+  }, []);
+
+  const handleOrganizationSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
     setLoading(true);
 
     try {
       if (role === "admin") {
-        // 1) Create the org + link you as admin
         const create = await fetch("/api/orgs", {
           method: "POST",
           credentials: "include",
@@ -36,6 +64,7 @@ export default function OnboardingPage() {
           const body = await create.json().catch(() => ({}));
           throw new Error(body.message || "Failed to create organization");
         }
+        completeOnboarding();
       } else {
         const addemp = await fetch("/api/orgs/addemployee", {
           method: "POST",
@@ -49,13 +78,47 @@ export default function OnboardingPage() {
           const body = await addemp.json().catch(() => ({}));
           throw new Error(body.message || "Failed to add employee");
         }
+        setStep("questionnaire");
+        setLoading(false);
+      }
+    } catch (err: any) {
+      setError(err.message);
+      setLoading(false);
+    }
+  };
+
+  const handleQuestionnaireComplete = async (responses: number[]) => {
+    setError(null);
+    setLoading(true);
+
+    try {
+      if (responses.length > 0) {
+        const responseSubmit = await fetch("/api/onboarding/responses", {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ option_ids: responses }),
+        });
+        if (!responseSubmit.ok) {
+          const body = await responseSubmit.json().catch(() => ({}));
+          throw new Error(body.message || "Failed to submit responses");
+        }
       }
+      completeOnboarding();
+    } catch (err: any) {
+      setError(err.message);
+      setLoading(false);
+    }
+  };
 
+  const completeOnboarding = async () => {
+    try {
       const done = await fetch("/api/complete-onboarding", {
         method: "POST",
         credentials: "include",
       });
       if (!done.ok) throw new Error("Could not complete onboarding");
+
       const updatedUser = await fetch("/api/me", {
         credentials: "include",
       }).then((r) => r.json());
@@ -66,100 +129,138 @@ export default function OnboardingPage() {
       setLoading(false);
     }
   };
-
-  return (
-    <div className="max-w-md mx-auto p-6">
-      <h1 className="text-2xl font-semibold mb-4">Onboarding</h1>
-      <p className="mb-6 text-gray-600">
-        Welcome, {user.firstname || user.email}! Let’s get you set up.
-      </p>
-
-      {/* Step 1: Choose role */}
-      <div className="flex space-x-4 mb-6">
-        <button
-          type="button"
-          className={`px-4 py-2 rounded ${
-            role === "employee"
-              ? "bg-purple-600 text-white"
-              : "bg-gray-200 text-gray-700"
-          }`}
-          onClick={() => setRole("employee")}
-        >
-          Join Organization
-        </button>
-        <button
-          type="button"
-          className={`px-4 py-2 rounded ${
-            role === "admin"
-              ? "bg-purple-600 text-white"
-              : "bg-gray-200 text-gray-700"
-          }`}
-          onClick={() => setRole("admin")}
-        >
-          Create Organization
-        </button>
+  if (initializing) {
+    return (
+      <div className="max-w-md mx-auto p-6">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div>
+          <p>Loading...</p>
+        </div>
       </div>
+    );
+  }
 
-      {role === "admin" && (
-        <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>
-
-          {error && <p className="text-red-600 text-sm">{error}</p>}
+  if (step === "organization") {
+    return (
+      <div className="max-w-md mx-auto p-6">
+        <h1 className="text-2xl font-semibold mb-4">Onboarding</h1>
+        <p className="mb-6 text-gray-600">
+          Welcome, {user.firstname || user.email}! Let's get you set up.
+        </p>
 
+        <div className="flex space-x-4 mb-6">
           <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 transition-colors"
+            type="button"
+            className={`px-4 py-2 rounded ${
+              role === "employee"
+                ? "bg-purple-600 text-white"
+                : "bg-gray-200 text-gray-700"
+            }`}
+            onClick={() => setRole("employee")}
           >
-            {loading ? "Creating…" : "Create & Continue"}
+            Join Organization
           </button>
-        </form>
-      )}
-      {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 Invite Code
-            </label>
-            <input
-              id="orgName"
-              type="text"
-              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"
-            />
-          </div>
-
-          {error && <p className="text-red-600 text-sm">{error}</p>}
-
           <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 transition-colors"
+            type="button"
+            className={`px-4 py-2 rounded ${
+              role === "admin"
+                ? "bg-purple-600 text-white"
+                : "bg-gray-200 text-gray-700"
+            }`}
+            onClick={() => setRole("admin")}
           >
-            {loading ? "Joining..." : "Join & Continue"}
+            Create Organization
           </button>
-        </form>
-      )}
+        </div>
+
+        {role === "admin" && (
+          <form onSubmit={handleOrganizationSubmit} 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>
+
+            {error && <p className="text-red-600 text-sm">{error}</p>}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 transition-colors"
+            >
+              {loading ? "Creating…" : "Create & Continue"}
+            </button>
+          </form>
+        )}
+        {role === "employee" && (
+          <form onSubmit={handleOrganizationSubmit} className="space-y-4">
+            <div>
+              <label
+                htmlFor="orgInvite"
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Organization Invite Code
+              </label>
+              <input
+                id="orgInvite"
+                type="text"
+                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"
+              />
+            </div>
+
+            {error && <p className="text-red-600 text-sm">{error}</p>}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 transition-colors"
+            >
+              {loading ? "Joining..." : "Join & Continue"}
+            </button>
+          </form>
+        )}
+      </div>
+    );
+  }
+
+  if (step === "questionnaire") {
+    return (
+      <div>
+        {error && (
+          <div className="max-w-2xl mx-auto p-6">
+            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+              {error}
+            </div>
+          </div>
+        )}
+        <OnboardingQuestionnaire
+          onComplete={handleQuestionnaireComplete}
+          loading={loading}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-md mx-auto p-6">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div>
+        <p>Completing onboarding...</p>
+      </div>
     </div>
   );
 }
diff --git a/components/onboarding/OnboardingQuestionnaire.tsx b/components/onboarding/OnboardingQuestionnaire.tsx
new file mode 100644
index 0000000..4911667
--- /dev/null
+++ b/components/onboarding/OnboardingQuestionnaire.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface Tag {
+  id: number;
+  name: string;
+}
+
+interface Option {
+  id: number;
+  option_text: string;
+  tag_id: number | null;
+  tag_name: string | null;
+}
+
+interface Question {
+  id: number;
+  question_text: string;
+  position: number;
+  options: Option[];
+}
+
+interface OnboardingQuestionnaireProps {
+  onComplete: (responses: number[]) => void;
+  loading: boolean;
+}
+
+export default function OnboardingQuestionnaire({
+  onComplete,
+  loading,
+}: OnboardingQuestionnaireProps) {
+  const [questions, setQuestions] = useState<Question[]>([]);
+  const [selectedOptions, setSelectedOptions] = useState<Set<number>>(
+    new Set()
+  );
+  const [error, setError] = useState<string | null>(null);
+  const [fetchLoading, setFetchLoading] = useState(true);
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+
+  useEffect(() => {
+    fetchQuestions();
+  }, []);
+
+  const fetchQuestions = async () => {
+    try {
+      const res = await fetch("/api/onboarding/questions", {
+        credentials: "include",
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setQuestions(data.questions || []);
+      } else {
+        setError("Failed to load questions");
+      }
+    } catch (err) {
+      setError("Error loading questions");
+      console.error(err);
+    } finally {
+      setFetchLoading(false);
+    }
+  };
+
+  const handleOptionSelect = (optionId: number) => {
+    const newSelected = new Set(selectedOptions);
+    if (newSelected.has(optionId)) {
+      newSelected.delete(optionId);
+    } else {
+      newSelected.add(optionId);
+    }
+    setSelectedOptions(newSelected);
+  };
+
+  const handleSubmit = () => {
+    if (selectedOptions.size === 0) {
+      setError("Please select at least one option");
+      return;
+    }
+    onComplete(Array.from(selectedOptions));
+  };
+
+  const goToNext = () => {
+    if (currentQuestion < questions.length - 1) {
+      setCurrentQuestion(currentQuestion + 1);
+    }
+  };
+
+  const goToPrevious = () => {
+    if (currentQuestion > 0) {
+      setCurrentQuestion(currentQuestion - 1);
+    }
+  };
+
+  if (fetchLoading) {
+    return (
+      <div className="max-w-2xl mx-auto p-6">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div>
+          <p>Loading questions...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="max-w-2xl mx-auto p-6">
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  if (questions.length === 0) {
+    return (
+      <div className="max-w-2xl mx-auto p-6">
+        <div className="text-center py-8">
+          <h2 className="text-2xl font-semibold mb-4">
+            No Questions Available
+          </h2>
+          <p className="text-gray-600 mb-6">
+            Your organization hasn't set up any onboarding questions yet.
+          </p>
+          <button
+            onClick={() => onComplete([])}
+            className="px-6 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700"
+          >
+            Complete Onboarding
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const currentQ = questions[currentQuestion];
+  const isLastQuestion = currentQuestion === questions.length - 1;
+  const progress = ((currentQuestion + 1) / questions.length) * 100;
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold mb-2">Skills Assessment</h1>
+        <p className="text-gray-600 mb-4">
+          Help us understand your background and experience level.
+        </p>
+
+        <div className="w-full bg-gray-200 rounded-full h-2 mb-4">
+          <div
+            className="bg-purple-600 h-2 rounded-full transition-all duration-300"
+            style={{ width: `${progress}%` }}
+          ></div>
+        </div>
+
+        <p className="text-sm text-gray-500">
+          Question {currentQuestion + 1} of {questions.length}
+        </p>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        <h2 className="text-xl font-medium mb-6">{currentQ.question_text}</h2>
+
+        <div className="space-y-3">
+          {currentQ.options.map((option) => (
+            <label
+              key={option.id}
+              className="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
+            >
+              <input
+                type="checkbox"
+                checked={selectedOptions.has(option.id)}
+                onChange={() => handleOptionSelect(option.id)}
+                className="mr-3 h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
+              />
+              <div className="flex-1">
+                <span className="text-gray-900">{option.option_text}</span>
+              </div>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex justify-between items-center">
+        <button
+          onClick={goToPrevious}
+          disabled={currentQuestion === 0}
+          className="px-4 py-2 text-gray-600 bg-gray-100 rounded-md hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Previous
+        </button>
+
+        <div className="flex space-x-2">
+          {questions.map((_, index) => (
+            <button
+              key={index}
+              onClick={() => setCurrentQuestion(index)}
+              className={`w-3 h-3 rounded-full ${
+                index === currentQuestion
+                  ? "bg-purple-600"
+                  : index < currentQuestion
+                  ? "bg-purple-300"
+                  : "bg-gray-300"
+              }`}
+            />
+          ))}
+        </div>
+
+        {isLastQuestion ? (
+          <button
+            onClick={handleSubmit}
+            disabled={loading || selectedOptions.size === 0}
+            className="px-6 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? "Submitting..." : "Complete Assessment"}
+          </button>
+        ) : (
+          <button
+            onClick={goToNext}
+            className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700"
+          >
+            Next
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/organisation/settings/OnboardingConfig.tsx b/components/organisation/settings/OnboardingConfig.tsx
index 9a3b709..56b762c 100644
--- a/components/organisation/settings/OnboardingConfig.tsx
+++ b/components/organisation/settings/OnboardingConfig.tsx
@@ -10,8 +10,8 @@ interface Tag {
 interface Option {
   id: number;
   option_text: string;
-  tag_id: number;
-  tag_name: string;
+  tag_id: number | null;
+  tag_name: string | null;
 }
 
 interface Question {
@@ -33,7 +33,9 @@ export default function OnboardingConfig() {
 
   const fetchQuestions = async () => {
     try {
-      const res = await fetch("/api/onboarding/questions", { credentials: "include" });
+      const res = await fetch("/api/onboarding/questions", {
+        credentials: "include",
+      });
       if (res.ok) {
         const data = await res.json();
         setQuestions(data.questions || []);
@@ -80,7 +82,7 @@ export default function OnboardingConfig() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           question_text: text,
-          position: questions.length
+          position: questions.length,
         }),
       });
 
@@ -99,7 +101,11 @@ export default function OnboardingConfig() {
   };
 
   const deleteQuestion = async (id: number) => {
-    if (!confirm("Delete this question? All associated options will also be deleted.")) {
+    if (
+      !confirm(
+        "Delete this question? All associated options will also be deleted."
+      )
+    ) {
       return;
     }
 
@@ -127,21 +133,24 @@ export default function OnboardingConfig() {
 
   const addOption = async (questionId: number) => {
     const text = newOptionText.trim();
-    if (!text || !selectedTagId) return;
+    if (!text) return;
 
     setLoading(true);
     setError(null);
 
     try {
-      const res = await fetch(`/api/onboarding/questions/${questionId}/options`, {
-        method: "POST",
-        credentials: "include",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          option_text: text,
-          tag_id: selectedTagId
-        }),
-      });
+      const res = await fetch(
+        `/api/onboarding/questions/${questionId}/options`,
+        {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            option_text: text,
+            ...(selectedTagId && { tag_id: selectedTagId }),
+          }),
+        }
+      );
 
       if (res.ok) {
         setNewOptionText("");
@@ -169,7 +178,6 @@ export default function OnboardingConfig() {
         </div>
       )}
 
-      {/* Add New Question */}
       <div className="bg-white p-4 rounded-lg shadow border">
         <h2 className="text-lg font-semibold mb-4">Add New Question</h2>
         <div className="flex flex-col sm:flex-row gap-2">
@@ -197,15 +205,21 @@ export default function OnboardingConfig() {
         </div>
       </div>
 
-      {/* Questions List */}
       <div className="space-y-4">
         {questions.map((question) => (
-          <div key={question.id} className="bg-white p-4 rounded-lg shadow border">
+          <div
+            key={question.id}
+            className="bg-white p-4 rounded-lg shadow border"
+          >
             <div className="flex items-center justify-between mb-4">
               <h3 className="text-lg font-medium">{question.question_text}</h3>
               <div className="flex gap-2">
                 <button
-                  onClick={() => setEditingQuestion(editingQuestion === question.id ? null : question.id)}
+                  onClick={() =>
+                    setEditingQuestion(
+                      editingQuestion === question.id ? null : question.id
+                    )
+                  }
                   className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm"
                 >
                   {editingQuestion === question.id ? "Cancel" : "Add Option"}
@@ -220,24 +234,27 @@ export default function OnboardingConfig() {
               </div>
             </div>
 
-            {/* Options */}
             {question.options.length > 0 && (
               <div className="mb-4">
                 <h4 className="font-medium mb-2">Options:</h4>
                 <div className="space-y-2">
                   {question.options.map((option) => (
-                    <div key={option.id} className="flex items-center justify-between bg-gray-50 p-2 rounded">
+                    <div
+                      key={option.id}
+                      className="flex items-center justify-between bg-gray-50 p-2 rounded"
+                    >
                       <span>{option.option_text}</span>
-                      <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">
-                        {option.tag_name}
-                      </span>
+                      {option.tag_name && (
+                        <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">
+                          {option.tag_name}
+                        </span>
+                      )}
                     </div>
                   ))}
                 </div>
               </div>
             )}
 
-            {/* Add Option Form */}
             {editingQuestion === question.id && (
               <div className="bg-gray-50 p-4 rounded border">
                 <h4 className="font-medium mb-3">Add New Option</h4>
@@ -252,11 +269,15 @@ export default function OnboardingConfig() {
                   />
                   <select
                     value={selectedTagId || ""}
-                    onChange={(e) => setSelectedTagId(e.target.value ? parseInt(e.target.value) : null)}
+                    onChange={(e) =>
+                      setSelectedTagId(
+                        e.target.value ? parseInt(e.target.value) : null
+                      )
+                    }
                     className="w-full p-2 border rounded focus:outline-none focus:ring"
                     disabled={loading}
                   >
-                    <option value="">Select a tag</option>
+                    <option value="">No tag (optional)</option>
                     {tags.map((tag) => (
                       <option key={tag.id} value={tag.id}>
                         {tag.name}
@@ -265,7 +286,7 @@ export default function OnboardingConfig() {
                   </select>
                   <button
                     onClick={() => addOption(question.id)}
-                    disabled={loading || !newOptionText.trim() || !selectedTagId}
+                    disabled={loading || !newOptionText.trim()}
                     className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded disabled:opacity-50"
                   >
                     {loading ? "Adding..." : "Add Option"}
@@ -284,4 +305,4 @@ export default function OnboardingConfig() {
       )}
     </div>
   );
-}
\ No newline at end of file
+}

From 092c0572a62f52ca78e2f46d68da8cbf7c9fe724 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 9 Jul 2025 09:49:06 +0800
Subject: [PATCH 03/21] Handle options for onboarding form

---
 .../settings/OnboardingConfig.tsx             | 63 ++++++++++++++++---
 1 file changed, 56 insertions(+), 7 deletions(-)

diff --git a/components/organisation/settings/OnboardingConfig.tsx b/components/organisation/settings/OnboardingConfig.tsx
index 56b762c..840526b 100644
--- a/components/organisation/settings/OnboardingConfig.tsx
+++ b/components/organisation/settings/OnboardingConfig.tsx
@@ -168,6 +168,34 @@ export default function OnboardingConfig() {
     }
   };
 
+  const deleteOption = async (optionId: number, questionId: number) => {
+    if (!confirm("Delete this option?")) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`/api/onboarding/options/${optionId}`, {
+        method: "DELETE",
+        credentials: "include",
+      });
+
+      if (res.ok) {
+        await fetchQuestions();
+      } else {
+        const errorData = await res.json().catch(() => ({}));
+        setError(errorData.message || "Failed to delete option");
+      }
+    } catch (err) {
+      setError("Error deleting option");
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <div className="p-6 space-y-6">
       <h1 className="text-2xl font-bold">Onboarding Form Configuration</h1>
@@ -234,7 +262,7 @@ export default function OnboardingConfig() {
               </div>
             </div>
 
-            {question.options.length > 0 && (
+            {question.options.length > 0 ? (
               <div className="mb-4">
                 <h4 className="font-medium mb-2">Options:</h4>
                 <div className="space-y-2">
@@ -243,16 +271,37 @@ export default function OnboardingConfig() {
                       key={option.id}
                       className="flex items-center justify-between bg-gray-50 p-2 rounded"
                     >
-                      <span>{option.option_text}</span>
-                      {option.tag_name && (
-                        <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">
-                          {option.tag_name}
-                        </span>
-                      )}
+                      <div className="flex items-center flex-1">
+                        <span>{option.option_text}</span>
+                        {option.tag_name && (
+                          <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm ml-2">
+                            {option.tag_name}
+                          </span>
+                        )}
+                      </div>
+                      <button
+                        onClick={() => deleteOption(option.id, question.id)}
+                        disabled={loading || question.options.length <= 1}
+                        className="ml-2 px-2 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-xs disabled:opacity-50 disabled:cursor-not-allowed"
+                        title={
+                          question.options.length <= 1
+                            ? "Cannot delete the last option"
+                            : "Delete option"
+                        }
+                      >
+                        Delete
+                      </button>
                     </div>
                   ))}
                 </div>
               </div>
+            ) : (
+              <div className="mb-4 p-3 bg-yellow-100 border border-yellow-400 text-yellow-700 rounded">
+                <p className="text-sm">
+                  ⚠️ This question has no options yet. Add at least one option
+                  to make it available to employees.
+                </p>
+              </div>
             )}
 
             {editingQuestion === question.id && (

From 5c8f67f8a42836d5e829e804e6b6a57f9d20579f Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 9 Jul 2025 12:19:41 +0800
Subject: [PATCH 04/21] Add basic roadmap

---
 app/roadmap/page.tsx                 | 138 ++++++++++++-
 components/roadmap/RoadmapEditor.tsx | 298 +++++++++++++++++++++++++++
 components/roadmap/RoadmapList.tsx   |  97 +++++++++
 components/roadmap/types.ts          |  30 +++
 4 files changed, 559 insertions(+), 4 deletions(-)
 create mode 100644 components/roadmap/RoadmapEditor.tsx
 create mode 100644 components/roadmap/RoadmapList.tsx
 create mode 100644 components/roadmap/types.ts

diff --git a/app/roadmap/page.tsx b/app/roadmap/page.tsx
index bf5fba0..f175c90 100644
--- a/app/roadmap/page.tsx
+++ b/app/roadmap/page.tsx
@@ -1,8 +1,138 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useAuth } from "@/context/AuthContext";
+import RoadmapList from "@/components/roadmap/RoadmapList";
+import RoadmapEditor from "@/components/roadmap/RoadmapEditor";
+import { Roadmap } from "@/components/roadmap/types";
+
 export default function RoadmapPage() {
+  const { user } = useAuth();
+  const [roadmaps, setRoadmaps] = useState<Roadmap[]>([]);
+  const [selectedRoadmap, setSelectedRoadmap] = useState<Roadmap | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+
+  useEffect(() => {
+    fetchRoadmaps();
+  }, []);
+
+  const fetchRoadmaps = async () => {
+    try {
+      const response = await fetch("/api/roadmaps", {
+        credentials: "include",
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setRoadmaps(data.roadmaps || []);
+      }
+    } catch (error) {
+      console.error("Failed to fetch roadmaps:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const createNewRoadmap = async () => {
+    const name = prompt("Enter roadmap name:");
+    if (!name?.trim()) return;
+
+    try {
+      const response = await fetch("/api/roadmaps", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ name: name.trim() }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setRoadmaps([data.roadmap, ...roadmaps]);
+        setSelectedRoadmap(data.roadmap);
+      }
+    } catch (error) {
+      console.error("Failed to create roadmap:", error);
+    }
+  };
+
+  const autoGenerateRoadmap = async () => {
+    const name = prompt("Enter roadmap name:", "My AI-Generated Roadmap");
+    if (!name?.trim()) return;
+
+    try {
+      const response = await fetch("/api/roadmaps/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ name: name.trim() }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setRoadmaps([data.roadmap, ...roadmaps]);
+        setSelectedRoadmap(data.roadmap);
+        
+        if (data.modulesAdded > 0) {
+          alert(`Generated roadmap with ${data.modulesAdded} recommended modules based on your skills! You've been auto-enrolled in ${data.enrolledCourses} courses.`);
+        } else {
+          alert("Generated empty roadmap - no modules found matching your skills. You can add modules manually.");
+        }
+      }
+    } catch (error) {
+      console.error("Failed to auto-generate roadmap:", error);
+    }
+  };
+
+  const deleteRoadmap = async (roadmapId: number) => {
+    try {
+      const response = await fetch(`/api/roadmaps/${roadmapId}`, {
+        method: "DELETE",
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        setRoadmaps(roadmaps.filter(r => r.id !== roadmapId));
+        if (selectedRoadmap?.id === roadmapId) {
+          setSelectedRoadmap(null);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to delete roadmap:", error);
+    }
+  };
+
+  const updateRoadmap = (updatedRoadmap: Roadmap) => {
+    setRoadmaps(roadmaps.map(r => 
+      r.id === updatedRoadmap.id ? updatedRoadmap : r
+    ));
+    setSelectedRoadmap(updatedRoadmap);
+  };
+
+  if (loading) {
+    return <div className="text-center py-8">Loading your roadmaps...</div>;
+  }
+
+  if (selectedRoadmap) {
+    return (
+      <RoadmapEditor
+        roadmap={selectedRoadmap}
+        onBack={() => setSelectedRoadmap(null)}
+        onUpdate={updateRoadmap}
+      />
+    );
+  }
+
   return (
-    <div>
-      <h1>Roadmap</h1>
-      <p>Roadmap page content goes here.</p>
-    </div>
+    <RoadmapList
+      roadmaps={roadmaps}
+      onSelect={setSelectedRoadmap}
+      onDelete={deleteRoadmap}
+      onCreateNew={createNewRoadmap}
+      onAutoGenerate={autoGenerateRoadmap}
+    />
   );
 }
diff --git a/components/roadmap/RoadmapEditor.tsx b/components/roadmap/RoadmapEditor.tsx
new file mode 100644
index 0000000..cd83ed3
--- /dev/null
+++ b/components/roadmap/RoadmapEditor.tsx
@@ -0,0 +1,298 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Roadmap, RoadmapItem, Module } from "./types";
+
+interface Props {
+  roadmap: Roadmap;
+  onBack: () => void;
+  onUpdate: (roadmap: Roadmap) => void;
+}
+
+export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
+  const [roadmapName, setRoadmapName] = useState(roadmap.name);
+  const [items, setItems] = useState<RoadmapItem[]>([]);
+  const [availableModules, setAvailableModules] = useState<Module[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [showModuleSelector, setShowModuleSelector] = useState(false);
+
+  useEffect(() => {
+    fetchRoadmapItems();
+    fetchAvailableModules();
+  }, [roadmap.id]);
+
+  const fetchRoadmapItems = async () => {
+    try {
+      const response = await fetch(`/api/roadmaps/${roadmap.id}/items`, {
+        credentials: "include",
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setItems(data.items || []);
+      }
+    } catch (error) {
+      console.error("Failed to fetch roadmap items:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchAvailableModules = async () => {
+    try {
+      // Get user-tag-based recommendations first
+      const userTagResponse = await fetch("/api/materials/by-user-tags", {
+        credentials: "include",
+      });
+      
+      let userRecommendedModules = [];
+      if (userTagResponse.ok) {
+        const userData = await userTagResponse.json();
+        userRecommendedModules = userData.materials || [];
+      }
+
+      // Then get all modules
+      const allResponse = await fetch("/api/materials", {
+        credentials: "include",
+      });
+      
+      let allModules = [];
+      if (allResponse.ok) {
+        const allData = await allResponse.json();
+        allModules = allData.materials || [];
+      }
+
+      // Combine with user recommendations first
+      const recommendedIds = new Set(userRecommendedModules.map(m => m.id));
+      const otherModules = allModules.filter(m => !recommendedIds.has(m.id));
+      
+      setAvailableModules([...userRecommendedModules, ...otherModules]);
+    } catch (error) {
+      console.error("Failed to fetch modules:", error);
+      setAvailableModules([]);
+    }
+  };
+
+  const updateRoadmapName = async () => {
+    if (roadmapName.trim() === roadmap.name) return;
+    
+    setSaving(true);
+    try {
+      const response = await fetch(`/api/roadmaps/${roadmap.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ name: roadmapName.trim() }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        onUpdate(data.roadmap);
+      }
+    } catch (error) {
+      console.error("Failed to update roadmap name:", error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const addModule = async (moduleId: number) => {
+    try {
+      const response = await fetch(`/api/roadmaps/${roadmap.id}/items`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ module_id: moduleId }),
+      });
+
+      if (response.ok) {
+        await fetchRoadmapItems();
+        setShowModuleSelector(false);
+      }
+    } catch (error) {
+      console.error("Failed to add module:", error);
+    }
+  };
+
+  const removeModule = async (moduleId: number) => {
+    if (!confirm("Remove this module from your roadmap?")) return;
+
+    try {
+      const response = await fetch(`/api/roadmaps/${roadmap.id}/items/${moduleId}`, {
+        method: "DELETE",
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        setItems(items.filter(item => item.module_id !== moduleId));
+      }
+    } catch (error) {
+      console.error("Failed to remove module:", error);
+    }
+  };
+
+  if (loading) {
+    return <div className="text-center py-8">Loading roadmap...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <button
+          onClick={onBack}
+          className="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded"
+        >
+          ← Back to Roadmaps
+        </button>
+      </div>
+
+      <div className="bg-white border border-gray-200 rounded-lg p-6">
+        <div className="flex items-center space-x-4 mb-6">
+          <input
+            type="text"
+            value={roadmapName}
+            onChange={(e) => setRoadmapName(e.target.value)}
+            className="flex-1 text-2xl font-semibold border-b-2 border-transparent hover:border-gray-300 focus:border-purple-600 focus:outline-none"
+            onBlur={updateRoadmapName}
+            onKeyDown={(e) => e.key === "Enter" && updateRoadmapName()}
+          />
+          {saving && <span className="text-gray-500">Saving...</span>}
+        </div>
+
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-medium">Learning Modules</h3>
+          <button
+            onClick={() => setShowModuleSelector(true)}
+            className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+          >
+            + Add Module
+          </button>
+        </div>
+
+        {items.length === 0 ? (
+          <div className="text-center py-8 text-gray-600">
+            <p>No modules in this roadmap yet.</p>
+            <button
+              onClick={() => setShowModuleSelector(true)}
+              className="mt-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+            >
+              Add Your First Module
+            </button>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {items.map((item, index) => (
+              <div
+                key={item.module_id}
+                className="flex items-center justify-between p-4 bg-gray-50 rounded-lg"
+              >
+                <div className="flex items-center space-x-4">
+                  <span className="text-sm font-medium text-gray-500">
+                    #{index + 1}
+                  </span>
+                  <div className="flex-1">
+                    <h4 className="font-medium">{item.module_title}</h4>
+                    <p className="text-sm text-gray-600">
+                      {item.course_name} • {item.module_type}
+                    </p>
+                    {item.description && (
+                      <p className="text-xs text-gray-500 mt-1">{item.description}</p>
+                    )}
+                    <div className="flex items-center space-x-2 mt-2">
+                      <span className={`px-2 py-1 text-xs rounded-full ${
+                        item.enrollment_status === 'enrolled' 
+                          ? 'bg-green-100 text-green-800' 
+                          : 'bg-yellow-100 text-yellow-800'
+                      }`}>
+                        {item.enrollment_status === 'enrolled' ? 'Enrolled' : 'Not Enrolled'}
+                      </span>
+                      <span className={`px-2 py-1 text-xs rounded-full ${
+                        item.module_status === 'completed' 
+                          ? 'bg-blue-100 text-blue-800'
+                          : item.module_status === 'in_progress'
+                          ? 'bg-orange-100 text-orange-800'
+                          : 'bg-gray-100 text-gray-800'
+                      }`}>
+                        {item.module_status.replace('_', ' ')}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <button
+                  onClick={() => removeModule(item.module_id)}
+                  className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-sm"
+                >
+                  Remove
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showModuleSelector && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-96 overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-medium">Add Module to Roadmap</h3>
+              <button
+                onClick={() => setShowModuleSelector(false)}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                ✕
+              </button>
+            </div>
+            
+            {availableModules.length === 0 ? (
+              <p className="text-gray-600">No modules available to add.</p>
+            ) : (
+              <div className="space-y-2">
+                {availableModules
+                  .filter(module => !items.some(item => item.module_id === module.id))
+                  .map((module, index) => {
+                    const isRecommended = module.matching_tags > 0;
+                    return (
+                      <div
+                        key={module.id}
+                        className={`flex items-center justify-between p-3 border rounded hover:bg-gray-50 ${
+                          isRecommended ? 'border-green-200 bg-green-50' : ''
+                        }`}
+                      >
+                        <div className="flex-1">
+                          <div className="flex items-center space-x-2">
+                            <h4 className="font-medium">{module.module_title}</h4>
+                            {isRecommended && (
+                              <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
+                                ✨ Recommended
+                              </span>
+                            )}
+                          </div>
+                          <p className="text-sm text-gray-600">
+                            {module.course_name} • {module.module_type}
+                          </p>
+                          {module.description && (
+                            <p className="text-xs text-gray-500 mt-1">{module.description}</p>
+                          )}
+                          {module.tags && (
+                            <p className="text-xs text-gray-500 mt-1">
+                              Tags: {module.tags.filter(tag => tag).join(', ') || 'None'}
+                            </p>
+                          )}
+                        </div>
+                        <button
+                          onClick={() => addModule(module.id)}
+                          className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm"
+                        >
+                          Add
+                        </button>
+                      </div>
+                    );
+                  })}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/roadmap/RoadmapList.tsx b/components/roadmap/RoadmapList.tsx
new file mode 100644
index 0000000..56dfd0b
--- /dev/null
+++ b/components/roadmap/RoadmapList.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { Roadmap } from "./types";
+
+interface Props {
+  roadmaps: Roadmap[];
+  onSelect: (roadmap: Roadmap) => void;
+  onDelete: (roadmapId: number) => void;
+  onCreateNew: () => void;
+  onAutoGenerate: () => void;
+}
+
+export default function RoadmapList({ roadmaps, onSelect, onDelete, onCreateNew, onAutoGenerate }: Props) {
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+
+  const handleDelete = async (roadmapId: number) => {
+    if (!confirm("Are you sure you want to delete this roadmap?")) return;
+    
+    setDeletingId(roadmapId);
+    try {
+      await onDelete(roadmapId);
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-semibold text-purple-600">My Learning Roadmaps</h2>
+        <div className="space-x-2">
+          <button
+            onClick={onAutoGenerate}
+            className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+          >
+            ✨ Auto-Generate
+          </button>
+          <button
+            onClick={onCreateNew}
+            className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+          >
+            + Create New
+          </button>
+        </div>
+      </div>
+
+      {roadmaps.length === 0 ? (
+        <div className="text-center py-8">
+          <p className="text-gray-600 mb-4">You don't have any roadmaps yet.</p>
+          <div className="space-x-3">
+            <button
+              onClick={onAutoGenerate}
+              className="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg"
+            >
+              ✨ Auto-Generate Roadmap
+            </button>
+            <button
+              onClick={onCreateNew}
+              className="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg"
+            >
+              Create Empty Roadmap
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {roadmaps.map((roadmap) => (
+            <div
+              key={roadmap.id}
+              className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
+            >
+              <h3 className="text-lg font-medium text-gray-900 mb-2">
+                {roadmap.name}
+              </h3>
+              <div className="flex justify-between items-center mt-4">
+                <button
+                  onClick={() => onSelect(roadmap)}
+                  className="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm"
+                >
+                  View & Edit
+                </button>
+                <button
+                  onClick={() => handleDelete(roadmap.id)}
+                  disabled={deletingId === roadmap.id}
+                  className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded text-sm disabled:opacity-50"
+                >
+                  {deletingId === roadmap.id ? "Deleting..." : "Delete"}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/roadmap/types.ts b/components/roadmap/types.ts
new file mode 100644
index 0000000..fd89802
--- /dev/null
+++ b/components/roadmap/types.ts
@@ -0,0 +1,30 @@
+export interface Roadmap {
+  id: number;
+  name: string;
+  user_id: number;
+}
+
+export interface RoadmapItem {
+  position: number;
+  module_id: number;
+  module_title: string;
+  description: string;
+  module_type: string;
+  file_url: string;
+  course_name: string;
+  course_id: number;
+  enrollment_status: 'enrolled' | 'not_enrolled';
+  module_status: 'not_started' | 'in_progress' | 'completed';
+}
+
+export interface Module {
+  id: number;
+  module_title: string;
+  description: string;
+  module_type: string;
+  file_url: string;
+  course_name: string;
+  course_id: number;
+  tags: string[];
+  matching_tags?: number;
+}
\ No newline at end of file

From 9a606a093239809ef637808992f3c18f4192a353 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 9 Jul 2025 13:03:34 +0800
Subject: [PATCH 05/21] Add roadmap with direct url to the module

---
 components/roadmap/RoadmapEditor.tsx | 256 +++++++++++++++++++--------
 1 file changed, 187 insertions(+), 69 deletions(-)

diff --git a/components/roadmap/RoadmapEditor.tsx b/components/roadmap/RoadmapEditor.tsx
index cd83ed3..d9a059f 100644
--- a/components/roadmap/RoadmapEditor.tsx
+++ b/components/roadmap/RoadmapEditor.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import Link from "next/link";
 import { Roadmap, RoadmapItem, Module } from "./types";
 
 interface Props {
@@ -40,32 +41,33 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
 
   const fetchAvailableModules = async () => {
     try {
-      // Get user-tag-based recommendations first
       const userTagResponse = await fetch("/api/materials/by-user-tags", {
         credentials: "include",
       });
-      
+
       let userRecommendedModules = [];
       if (userTagResponse.ok) {
         const userData = await userTagResponse.json();
         userRecommendedModules = userData.materials || [];
       }
 
-      // Then get all modules
       const allResponse = await fetch("/api/materials", {
         credentials: "include",
       });
-      
+
       let allModules = [];
       if (allResponse.ok) {
         const allData = await allResponse.json();
         allModules = allData.materials || [];
       }
 
-      // Combine with user recommendations first
-      const recommendedIds = new Set(userRecommendedModules.map(m => m.id));
-      const otherModules = allModules.filter(m => !recommendedIds.has(m.id));
-      
+      const recommendedIds = new Set(
+        userRecommendedModules.map((m: Module) => m.id)
+      );
+      const otherModules = allModules.filter(
+        (m: Module) => !recommendedIds.has(m.id)
+      );
+
       setAvailableModules([...userRecommendedModules, ...otherModules]);
     } catch (error) {
       console.error("Failed to fetch modules:", error);
@@ -75,7 +77,7 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
 
   const updateRoadmapName = async () => {
     if (roadmapName.trim() === roadmap.name) return;
-    
+
     setSaving(true);
     try {
       const response = await fetch(`/api/roadmaps/${roadmap.id}`, {
@@ -118,16 +120,49 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
     if (!confirm("Remove this module from your roadmap?")) return;
 
     try {
-      const response = await fetch(`/api/roadmaps/${roadmap.id}/items/${moduleId}`, {
-        method: "DELETE",
+      const response = await fetch(
+        `/api/roadmaps/${roadmap.id}/items/${moduleId}`,
+        {
+          method: "DELETE",
+          credentials: "include",
+        }
+      );
+
+      if (response.ok) {
+        setItems(items.filter((item) => item.module_id !== moduleId));
+      }
+    } catch (error) {
+      console.error("Failed to remove module:", error);
+    }
+  };
+
+  const handleNotEnrolledClick = async (item: RoadmapItem) => {
+    if (
+      !confirm(
+        `You need to enroll in "${item.course_name}" to access this module. Enroll now?`
+      )
+    ) {
+      return;
+    }
+
+    try {
+      const response = await fetch("/api/courses/enroll-course", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         credentials: "include",
+        body: JSON.stringify({ courseId: item.course_id }),
       });
 
       if (response.ok) {
-        setItems(items.filter(item => item.module_id !== moduleId));
+        await fetchRoadmapItems();
+        window.location.href = `/courses/${item.course_id}/modules/${item.module_id}`;
+      } else {
+        const data = await response.json();
+        alert(`Failed to enroll: ${data.message}`);
       }
     } catch (error) {
-      console.error("Failed to remove module:", error);
+      console.error("Failed to enroll in course:", error);
+      alert("Failed to enroll in course. Please try again.");
     }
   };
 
@@ -161,12 +196,21 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
 
         <div className="flex justify-between items-center mb-4">
           <h3 className="text-lg font-medium">Learning Modules</h3>
-          <button
-            onClick={() => setShowModuleSelector(true)}
-            className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
-          >
-            + Add Module
-          </button>
+          <div className="space-x-2">
+            <button
+              onClick={fetchRoadmapItems}
+              className="px-3 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm"
+              title="Refresh enrollment status"
+            >
+              🔄 Refresh
+            </button>
+            <button
+              onClick={() => setShowModuleSelector(true)}
+              className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+            >
+              + Add Module
+            </button>
+          </div>
         </div>
 
         {items.length === 0 ? (
@@ -181,51 +225,115 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
           </div>
         ) : (
           <div className="space-y-3">
-            {items.map((item, index) => (
-              <div
-                key={item.module_id}
-                className="flex items-center justify-between p-4 bg-gray-50 rounded-lg"
-              >
-                <div className="flex items-center space-x-4">
-                  <span className="text-sm font-medium text-gray-500">
-                    #{index + 1}
-                  </span>
-                  <div className="flex-1">
-                    <h4 className="font-medium">{item.module_title}</h4>
-                    <p className="text-sm text-gray-600">
-                      {item.course_name} • {item.module_type}
-                    </p>
-                    {item.description && (
-                      <p className="text-xs text-gray-500 mt-1">{item.description}</p>
-                    )}
-                    <div className="flex items-center space-x-2 mt-2">
-                      <span className={`px-2 py-1 text-xs rounded-full ${
-                        item.enrollment_status === 'enrolled' 
-                          ? 'bg-green-100 text-green-800' 
-                          : 'bg-yellow-100 text-yellow-800'
-                      }`}>
-                        {item.enrollment_status === 'enrolled' ? 'Enrolled' : 'Not Enrolled'}
-                      </span>
-                      <span className={`px-2 py-1 text-xs rounded-full ${
-                        item.module_status === 'completed' 
-                          ? 'bg-blue-100 text-blue-800'
-                          : item.module_status === 'in_progress'
-                          ? 'bg-orange-100 text-orange-800'
-                          : 'bg-gray-100 text-gray-800'
-                      }`}>
-                        {item.module_status.replace('_', ' ')}
-                      </span>
+            {items.map((item, index) => {
+              const moduleUrl = `/courses/${item.course_id}/modules/${item.module_id}`;
+              const isAccessible = item.enrollment_status === "enrolled";
+              const wasManuallyUnenrolled =
+                item.enrollment_status === "not_enrolled" &&
+                (item.module_status === "in_progress" ||
+                  item.module_status === "completed");
+
+              return (
+                <div
+                  key={item.module_id}
+                  className={`flex items-center justify-between p-4 rounded-lg ${
+                    wasManuallyUnenrolled
+                      ? "bg-red-50 border border-red-200"
+                      : "bg-gray-50"
+                  }`}
+                >
+                  <div className="flex items-center space-x-4 flex-1">
+                    <span className="text-sm font-medium text-gray-500">
+                      #{index + 1}
+                    </span>
+                    <div className="flex-1">
+                      <div className="flex items-center space-x-2">
+                        <h4 className="font-medium">{item.module_title}</h4>
+                        {isAccessible ? (
+                          <Link href={moduleUrl}>
+                            <button
+                              className={`px-3 py-1 text-sm rounded text-white ${
+                                item.module_status === "completed"
+                                  ? "bg-blue-600 hover:bg-blue-700"
+                                  : item.module_status === "in_progress"
+                                  ? "bg-orange-600 hover:bg-orange-700"
+                                  : "bg-purple-600 hover:bg-purple-700"
+                              }`}
+                            >
+                              {item.module_status === "completed"
+                                ? "Review"
+                                : item.module_status === "in_progress"
+                                ? "Continue"
+                                : "Start"}
+                            </button>
+                          </Link>
+                        ) : wasManuallyUnenrolled ? (
+                          <button
+                            onClick={() => handleNotEnrolledClick(item)}
+                            className="px-3 py-1 text-sm rounded bg-red-500 hover:bg-red-600 text-white"
+                            title="You were unenrolled from this course. Click to re-enroll and continue."
+                          >
+                            Re-enroll
+                          </button>
+                        ) : (
+                          <button
+                            onClick={() => handleNotEnrolledClick(item)}
+                            className="px-3 py-1 text-sm rounded bg-gray-400 hover:bg-gray-500 text-white"
+                            title="Click to enroll and access this module"
+                          >
+                            Enroll & Start
+                          </button>
+                        )}
+                      </div>
+                      <p className="text-sm text-gray-600">
+                        {item.course_name} • {item.module_type}
+                      </p>
+                      {item.description && (
+                        <p className="text-xs text-gray-500 mt-1">
+                          {item.description}
+                        </p>
+                      )}
+                      {wasManuallyUnenrolled && (
+                        <p className="text-xs text-red-600 mt-1 font-medium">
+                          ⚠️ Access lost: You were manually unenrolled from this
+                          course
+                        </p>
+                      )}
+                      <div className="flex items-center space-x-2 mt-2">
+                        <span
+                          className={`px-2 py-1 text-xs rounded-full ${
+                            item.enrollment_status === "enrolled"
+                              ? "bg-green-100 text-green-800"
+                              : "bg-yellow-100 text-yellow-800"
+                          }`}
+                        >
+                          {item.enrollment_status === "enrolled"
+                            ? "Enrolled"
+                            : "Not Enrolled"}
+                        </span>
+                        <span
+                          className={`px-2 py-1 text-xs rounded-full ${
+                            item.module_status === "completed"
+                              ? "bg-blue-100 text-blue-800"
+                              : item.module_status === "in_progress"
+                              ? "bg-orange-100 text-orange-800"
+                              : "bg-gray-100 text-gray-800"
+                          }`}
+                        >
+                          {item.module_status.replace("_", " ")}
+                        </span>
+                      </div>
                     </div>
                   </div>
+                  <button
+                    onClick={() => removeModule(item.module_id)}
+                    className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-sm ml-2"
+                  >
+                    Remove
+                  </button>
                 </div>
-                <button
-                  onClick={() => removeModule(item.module_id)}
-                  className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-sm"
-                >
-                  Remove
-                </button>
-              </div>
-            ))}
+              );
+            })}
           </div>
         )}
       </div>
@@ -242,25 +350,31 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
                 ✕
               </button>
             </div>
-            
+
             {availableModules.length === 0 ? (
               <p className="text-gray-600">No modules available to add.</p>
             ) : (
               <div className="space-y-2">
                 {availableModules
-                  .filter(module => !items.some(item => item.module_id === module.id))
+                  .filter(
+                    (module) =>
+                      !items.some((item) => item.module_id === module.id)
+                  )
                   .map((module, index) => {
-                    const isRecommended = module.matching_tags > 0;
+                    const isRecommended =
+                      module.matching_tags && module.matching_tags > 0;
                     return (
                       <div
                         key={module.id}
                         className={`flex items-center justify-between p-3 border rounded hover:bg-gray-50 ${
-                          isRecommended ? 'border-green-200 bg-green-50' : ''
+                          isRecommended ? "border-green-200 bg-green-50" : ""
                         }`}
                       >
                         <div className="flex-1">
                           <div className="flex items-center space-x-2">
-                            <h4 className="font-medium">{module.module_title}</h4>
+                            <h4 className="font-medium">
+                              {module.module_title}
+                            </h4>
                             {isRecommended && (
                               <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
                                 ✨ Recommended
@@ -271,11 +385,15 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
                             {module.course_name} • {module.module_type}
                           </p>
                           {module.description && (
-                            <p className="text-xs text-gray-500 mt-1">{module.description}</p>
+                            <p className="text-xs text-gray-500 mt-1">
+                              {module.description}
+                            </p>
                           )}
                           {module.tags && (
                             <p className="text-xs text-gray-500 mt-1">
-                              Tags: {module.tags.filter(tag => tag).join(', ') || 'None'}
+                              Tags:{" "}
+                              {module.tags.filter((tag) => tag).join(", ") ||
+                                "None"}
                             </p>
                           )}
                         </div>
@@ -295,4 +413,4 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
       )}
     </div>
   );
-}
\ No newline at end of file
+}

From c032abdc65a5d9d8d82d0cb004f29418203361c4 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 9 Jul 2025 13:04:27 +0800
Subject: [PATCH 06/21] Update prompt name

---
 app/roadmap/page.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/roadmap/page.tsx b/app/roadmap/page.tsx
index f175c90..235de26 100644
--- a/app/roadmap/page.tsx
+++ b/app/roadmap/page.tsx
@@ -25,7 +25,7 @@ export default function RoadmapPage() {
       const response = await fetch("/api/roadmaps", {
         credentials: "include",
       });
-      
+
       if (response.ok) {
         const data = await response.json();
         setRoadmaps(data.roadmaps || []);
@@ -60,7 +60,7 @@ export default function RoadmapPage() {
   };
 
   const autoGenerateRoadmap = async () => {
-    const name = prompt("Enter roadmap name:", "My AI-Generated Roadmap");
+    const name = prompt("Enter roadmap name:", "My Auto-Generated Roadmap");
     if (!name?.trim()) return;
 
     try {
@@ -75,11 +75,15 @@ export default function RoadmapPage() {
         const data = await response.json();
         setRoadmaps([data.roadmap, ...roadmaps]);
         setSelectedRoadmap(data.roadmap);
-        
+
         if (data.modulesAdded > 0) {
-          alert(`Generated roadmap with ${data.modulesAdded} recommended modules based on your skills! You've been auto-enrolled in ${data.enrolledCourses} courses.`);
+          alert(
+            `Generated roadmap with ${data.modulesAdded} recommended modules based on your skills! You've been auto-enrolled in ${data.enrolledCourses} courses.`
+          );
         } else {
-          alert("Generated empty roadmap - no modules found matching your skills. You can add modules manually.");
+          alert(
+            "Generated empty roadmap - no modules found matching your skills. You can add modules manually."
+          );
         }
       }
     } catch (error) {
@@ -95,7 +99,7 @@ export default function RoadmapPage() {
       });
 
       if (response.ok) {
-        setRoadmaps(roadmaps.filter(r => r.id !== roadmapId));
+        setRoadmaps(roadmaps.filter((r) => r.id !== roadmapId));
         if (selectedRoadmap?.id === roadmapId) {
           setSelectedRoadmap(null);
         }
@@ -106,9 +110,9 @@ export default function RoadmapPage() {
   };
 
   const updateRoadmap = (updatedRoadmap: Roadmap) => {
-    setRoadmaps(roadmaps.map(r => 
-      r.id === updatedRoadmap.id ? updatedRoadmap : r
-    ));
+    setRoadmaps(
+      roadmaps.map((r) => (r.id === updatedRoadmap.id ? updatedRoadmap : r))
+    );
     setSelectedRoadmap(updatedRoadmap);
   };
 

From aff758c20b62ba55f2934d106cb8ee99f85cbcd4 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 9 Jul 2025 13:43:48 +0800
Subject: [PATCH 07/21] Add basic settings

---
 app/settings/page.tsx                         |  30 +-
 .../settings/MemberPasswordSettings.tsx       | 155 ++++++++++
 .../settings/MemberProfileSettings.tsx        | 204 ++++++++++++++
 .../members/settings/MemberSkillsSettings.tsx | 264 ++++++++++++++++++
 4 files changed, 651 insertions(+), 2 deletions(-)
 create mode 100644 components/members/settings/MemberPasswordSettings.tsx
 create mode 100644 components/members/settings/MemberProfileSettings.tsx
 create mode 100644 components/members/settings/MemberSkillsSettings.tsx

diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index a6b1030..14e6222 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,5 +1,8 @@
 import { getAuthUser } from "@/lib/auth";
 import OrgSettings from "@/components/organisation/settings/OrgSettings";
+import MemberProfileSettings from "@/components/members/settings/MemberProfileSettings";
+import MemberPasswordSettings from "@/components/members/settings/MemberPasswordSettings";
+import MemberSkillsSettings from "@/components/members/settings/MemberSkillsSettings";
 
 export default async function SettingsPage() {
   const user = await getAuthUser();
@@ -21,8 +24,31 @@ export default async function SettingsPage() {
 
   if (isMember) {
     return (
-      <div>
-        <h1>Member Settings</h1>
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-gray-900">
+              Member Settings
+            </h1>
+            <p className="mt-2 text-gray-600">
+              Manage your profile and account settings
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div>
+              <MemberProfileSettings />
+            </div>
+
+            <div>
+              <MemberPasswordSettings />
+            </div>
+
+            {/* <div className="lg:col-span-2">
+              <MemberSkillsSettings />
+            </div> */}
+          </div>
+        </div>
       </div>
     );
   }
diff --git a/components/members/settings/MemberPasswordSettings.tsx b/components/members/settings/MemberPasswordSettings.tsx
new file mode 100644
index 0000000..85f7468
--- /dev/null
+++ b/components/members/settings/MemberPasswordSettings.tsx
@@ -0,0 +1,155 @@
+"use client";
+import { useState } from "react";
+
+export default function MemberPasswordSettings() {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setMessage(null);
+    setError(null);
+
+    // Validate password confirmation
+    if (newPassword !== confirmPassword) {
+      setError("New passwords do not match");
+      return;
+    }
+
+    // Validate password strength
+    if (newPassword.length < 8) {
+      setError("New password must be at least 8 characters long");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const res = await fetch("/api/users/password", {
+        method: "PUT",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          currentPassword,
+          newPassword,
+        }),
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to update password");
+      }
+
+      // Clear form on success
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+      setError(null);
+      setMessage("Password updated successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to update password");
+      setMessage(null);
+      console.error("Error updating password:", err);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleReset = () => {
+    setCurrentPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+    setError(null);
+    setMessage(null);
+  };
+
+  return (
+    <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">
+        Change Password
+      </h2>
+      <form onSubmit={handleSubmit} className="space-y-5">
+        {/* Current Password */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            Current Password
+          </label>
+          <input
+            type="password"
+            value={currentPassword}
+            required
+            onChange={(e) => setCurrentPassword(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-purple-200"
+            placeholder="Enter your current password"
+          />
+        </div>
+
+        {/* New Password */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            New Password
+          </label>
+          <input
+            type="password"
+            value={newPassword}
+            required
+            minLength={8}
+            onChange={(e) => setNewPassword(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-purple-200"
+            placeholder="Enter your new password"
+          />
+          <p className="text-xs text-gray-500 mt-1">
+            Password must be at least 8 characters long
+          </p>
+        </div>
+
+        {/* Confirm New Password */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            Confirm New Password
+          </label>
+          <input
+            type="password"
+            value={confirmPassword}
+            required
+            minLength={8}
+            onChange={(e) => setConfirmPassword(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-purple-200"
+            placeholder="Confirm your new password"
+          />
+        </div>
+
+        {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">
+          <button
+            type="button"
+            onClick={handleReset}
+            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"
+          >
+            Reset
+          </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 ? "Updating..." : "Update Password"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/components/members/settings/MemberProfileSettings.tsx b/components/members/settings/MemberProfileSettings.tsx
new file mode 100644
index 0000000..6c1ecd2
--- /dev/null
+++ b/components/members/settings/MemberProfileSettings.tsx
@@ -0,0 +1,204 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useAuth } from "@/context/AuthContext";
+
+interface UserProfileData {
+  id: string | number;
+  firstname: string;
+  lastname: string;
+  email: string;
+}
+
+export default function MemberProfileSettings() {
+  const { user, setUser } = useAuth();
+  const [initialData, setInitialData] = useState<UserProfileData | null>(null);
+  const [firstname, setFirstname] = useState("");
+  const [lastname, setLastname] = useState("");
+  const [email, setEmail] = useState("");
+  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(() => {
+    if (user) {
+      const userData = {
+        id: user.userId || "",
+        firstname: user.firstname || "",
+        lastname: user.lastname || "",
+        email: user.email || "",
+      };
+      setInitialData(userData);
+      if (user.firstname) {
+        setFirstname(user.firstname);
+      }
+      if (user.lastname) {
+        setLastname(user.lastname);
+      }
+      if (user.email) {
+        setEmail(user.email);
+      }
+      setLoading(false);
+    }
+  }, [user]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setMessage(null);
+    setError(null);
+
+    if (
+      initialData &&
+      initialData.firstname === firstname &&
+      initialData.lastname === lastname &&
+      initialData.email === email
+    ) {
+      setMessage("No changes made");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const res = await fetch("/api/users/profile", {
+        method: "PUT",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          firstname,
+          lastname,
+          email,
+        }),
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to update profile");
+      }
+
+      const updatedUser = await res.json();
+
+      // Update the auth context with new user data
+      if (updatedUser.user) {
+        setUser(updatedUser.user);
+      }
+
+      setInitialData({ id: user?.userId || "", firstname, lastname, email });
+      setError(null);
+      setMessage("Profile updated successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to update profile");
+      setMessage(null);
+      console.error("Error updating profile:", err);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleReset = () => {
+    if (initialData) {
+      setFirstname(initialData.firstname);
+      setLastname(initialData.lastname);
+      setEmail(initialData.email);
+      setError(null);
+      setMessage(null);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full max-w-lg bg-white p-8 rounded-2xl shadow-lg">
+        <div className="animate-pulse">
+          <div className="h-8 bg-gray-200 rounded mb-6"></div>
+          <div className="space-y-4">
+            <div className="h-4 bg-gray-200 rounded"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
+            <div className="h-4 bg-gray-200 rounded"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <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">
+        Profile Settings
+      </h2>
+      <form onSubmit={handleSubmit} className="space-y-5">
+        {/* First Name */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            First Name
+          </label>
+          <input
+            type="text"
+            value={firstname}
+            maxLength={100}
+            required
+            onChange={(e) => setFirstname(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-purple-200"
+          />
+        </div>
+
+        {/* Last Name */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            Last Name
+          </label>
+          <input
+            type="text"
+            value={lastname}
+            maxLength={100}
+            required
+            onChange={(e) => setLastname(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-purple-200"
+          />
+        </div>
+
+        {/* Email */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            Email Address
+          </label>
+          <input
+            type="email"
+            value={email}
+            maxLength={255}
+            required
+            onChange={(e) => setEmail(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-purple-200"
+          />
+        </div>
+
+        {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">
+          <button
+            type="button"
+            onClick={handleReset}
+            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"
+          >
+            Reset
+          </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>
+  );
+}
diff --git a/components/members/settings/MemberSkillsSettings.tsx b/components/members/settings/MemberSkillsSettings.tsx
new file mode 100644
index 0000000..39c3e6f
--- /dev/null
+++ b/components/members/settings/MemberSkillsSettings.tsx
@@ -0,0 +1,264 @@
+"use client";
+import { useState, useEffect } from "react";
+
+interface Skill {
+  id: number;
+  name: string;
+}
+
+interface UserSkill {
+  id: number;
+  skill_id: number;
+  skill_name: string;
+  level: 'beginner' | 'intermediate' | 'advanced' | 'expert';
+}
+
+const SKILL_LEVELS = [
+  { value: 'beginner', label: 'Beginner' },
+  { value: 'intermediate', label: 'Intermediate' },
+  { value: 'advanced', label: 'Advanced' },
+  { value: 'expert', label: 'Expert' }
+];
+
+export default function MemberSkillsSettings() {
+  const [userSkills, setUserSkills] = useState<UserSkill[]>([]);
+  const [availableSkills, setAvailableSkills] = useState<Skill[]>([]);
+  const [selectedSkill, setSelectedSkill] = useState<string>("");
+  const [selectedLevel, setSelectedLevel] = useState<string>("beginner");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadUserSkills();
+  }, []);
+
+  const loadUserSkills = async () => {
+    try {
+      const res = await fetch("/api/users/skills", {
+        credentials: "include",
+      });
+      if (!res.ok) throw new Error("Failed to load skills");
+      const data = await res.json();
+      setUserSkills(data.userSkills || []);
+      setAvailableSkills(data.availableSkills || []);
+      setError(null);
+    } catch (err: any) {
+      setError(err.message || "Failed to load skills");
+      console.error("Error loading skills:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddSkill = async () => {
+    if (!selectedSkill) return;
+    
+    setError(null);
+    setMessage(null);
+    
+    try {
+      const res = await fetch("/api/users/skills", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          skill_id: parseInt(selectedSkill),
+          level: selectedLevel,
+        }),
+      });
+      
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to add skill");
+      }
+      
+      await loadUserSkills();
+      setSelectedSkill("");
+      setSelectedLevel("beginner");
+      setMessage("Skill added successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to add skill");
+      console.error("Error adding skill:", err);
+    }
+  };
+
+  const handleUpdateSkill = async (skillId: number, newLevel: string) => {
+    setError(null);
+    setMessage(null);
+    
+    try {
+      const res = await fetch("/api/users/skills", {
+        method: "PUT",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          skill_id: skillId,
+          level: newLevel,
+        }),
+      });
+      
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to update skill");
+      }
+      
+      await loadUserSkills();
+      setMessage("Skill updated successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to update skill");
+      console.error("Error updating skill:", err);
+    }
+  };
+
+  const handleRemoveSkill = async (skillId: number) => {
+    setError(null);
+    setMessage(null);
+    
+    try {
+      const res = await fetch("/api/users/skills", {
+        method: "DELETE",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          skill_id: skillId,
+        }),
+      });
+      
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to remove skill");
+      }
+      
+      await loadUserSkills();
+      setMessage("Skill removed successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to remove skill");
+      console.error("Error removing skill:", err);
+    }
+  };
+
+  const getAvailableSkillsForAdding = () => {
+    const userSkillIds = userSkills.map(us => us.skill_id);
+    return availableSkills.filter(skill => !userSkillIds.includes(skill.id));
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full max-w-2xl bg-white p-8 rounded-2xl shadow-lg">
+        <div className="animate-pulse">
+          <div className="h-8 bg-gray-200 rounded mb-6"></div>
+          <div className="space-y-4">
+            <div className="h-4 bg-gray-200 rounded"></div>
+            <div className="h-20 bg-gray-200 rounded"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-2xl bg-white p-8 rounded-2xl shadow-lg">
+      <h2 className="text-2xl font-semibold mb-6 text-purple-700">
+        Skills Management
+      </h2>
+      
+      {/* Add New Skill */}
+      <div className="mb-8 p-4 bg-gray-50 rounded-lg">
+        <h3 className="text-lg font-medium mb-4 text-gray-700">Add New Skill</h3>
+        <div className="flex space-x-4">
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Skill
+            </label>
+            <select
+              value={selectedSkill}
+              onChange={(e) => setSelectedSkill(e.target.value)}
+              className="w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-purple-200"
+            >
+              <option value="">Select a skill...</option>
+              {getAvailableSkillsForAdding().map(skill => (
+                <option key={skill.id} value={skill.id}>
+                  {skill.name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Level
+            </label>
+            <select
+              value={selectedLevel}
+              onChange={(e) => setSelectedLevel(e.target.value)}
+              className="w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-purple-200"
+            >
+              {SKILL_LEVELS.map(level => (
+                <option key={level.value} value={level.value}>
+                  {level.label}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex items-end">
+            <button
+              onClick={handleAddSkill}
+              disabled={!selectedSkill}
+              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 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Add Skill
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Current Skills */}
+      <div>
+        <h3 className="text-lg font-medium mb-4 text-gray-700">Current Skills</h3>
+        {userSkills.length === 0 ? (
+          <p className="text-gray-500 text-center py-8">No skills added yet. Add some skills above to get started!</p>
+        ) : (
+          <div className="space-y-3">
+            {userSkills.map(userSkill => (
+              <div key={userSkill.id} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
+                <div className="flex-1">
+                  <span className="font-medium text-gray-900">{userSkill.skill_name}</span>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <select
+                    value={userSkill.level}
+                    onChange={(e) => handleUpdateSkill(userSkill.skill_id, e.target.value)}
+                    className="rounded-md border border-gray-300 p-1 text-sm focus:border-purple-700 focus:ring focus:ring-purple-200"
+                  >
+                    {SKILL_LEVELS.map(level => (
+                      <option key={level.value} value={level.value}>
+                        {level.label}
+                      </option>
+                    ))}
+                  </select>
+                  <button
+                    onClick={() => handleRemoveSkill(userSkill.skill_id)}
+                    className="text-red-600 hover:text-red-800 focus:outline-none"
+                  >
+                    <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {error && (
+        <div className="text-red-600 text-sm mt-4 text-center">{error}</div>
+      )}
+      {message && (
+        <div className="text-green-600 text-sm mt-4 text-center">
+          {message}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file

From d75419a2c7b27d207e1d4cc9fd0f269f00db8870 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 9 Jul 2025 13:54:58 +0800
Subject: [PATCH 08/21] Update admin view to have member settings and move
 organisation settings under my organisation

---
 app/organisation/page.tsx                     | 18 +++++++++++++--
 app/settings/page.tsx                         | 22 +++++++++++++++++--
 .../organisation/settings/OrgSettings.tsx     | 18 +++++++--------
 3 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/app/organisation/page.tsx b/app/organisation/page.tsx
index 4785a44..4c421c4 100644
--- a/app/organisation/page.tsx
+++ b/app/organisation/page.tsx
@@ -4,10 +4,13 @@ import { useAuth } from "@/context/AuthContext";
 import { useState } from "react";
 import ManageTags from "@/components/organisation/settings/ManageTags";
 import OnboardingConfig from "@/components/organisation/settings/OnboardingConfig";
+import OrgSettings from "@/components/organisation/settings/OrgSettings";
 
 export default function OrganisationsPage() {
   const { user } = useAuth();
-  const [activeTab, setActiveTab] = useState<"tags" | "onboarding">("tags");
+  const [activeTab, setActiveTab] = useState<
+    "tags" | "onboarding" | "orgSettings"
+  >("tags");
 
   if (!user || !user.hasCompletedOnboarding) {
     return null;
@@ -29,7 +32,7 @@ export default function OrganisationsPage() {
       <h1 className="text-3xl font-bold mb-6 text-purple-600">
         My Organisation
       </h1>
-      
+
       {/* Tab Navigation */}
       <div className="mb-6">
         <div className="border-b border-gray-200">
@@ -54,6 +57,16 @@ export default function OrganisationsPage() {
             >
               Onboarding Form
             </button>
+            <button
+              onClick={() => setActiveTab("orgSettings")}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === "orgSettings"
+                  ? "border-purple-500 text-purple-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              }`}
+            >
+              Organisation Settings
+            </button>
           </nav>
         </div>
       </div>
@@ -61,6 +74,7 @@ export default function OrganisationsPage() {
       {/* Tab Content */}
       {activeTab === "tags" && <ManageTags />}
       {activeTab === "onboarding" && <OnboardingConfig />}
+      {activeTab === "orgSettings" && <OrgSettings />}
     </div>
   );
 }
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 14e6222..ecbf480 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -16,8 +16,26 @@ export default async function SettingsPage() {
 
   if (isAdmin) {
     return (
-      <div>
-        <OrgSettings />
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-purple-600">
+              Member Settings
+            </h1>
+            <p className="mt-2 text-gray-600">
+              Manage your profile and account settings
+            </p>
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div>
+              <MemberProfileSettings />
+            </div>
+
+            <div>
+              <MemberPasswordSettings />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
diff --git a/components/organisation/settings/OrgSettings.tsx b/components/organisation/settings/OrgSettings.tsx
index 9a1a6e6..7127072 100644
--- a/components/organisation/settings/OrgSettings.tsx
+++ b/components/organisation/settings/OrgSettings.tsx
@@ -14,7 +14,7 @@ export default function OrgSettings() {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [aiEnabled, setAiEnabled] = useState(false);
-  const [transferEmail, setTransferEmail] = useState("");
+  // const [transferEmail, setTransferEmail] = useState("");
   const [isSaving, setIsSaving] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -86,12 +86,12 @@ export default function OrgSettings() {
     }
   };
 
-  const handleTransfer = async () => {
-    if (!transferEmail) return;
-    // open confirmation modal...
-    // then call API to transfer ownership
-    alert(`Transfer ownership is not implemented yet.`);
-  };
+  // const handleTransfer = async () => {
+  //   if (!transferEmail) return;
+  //   // open confirmation modal...
+  //   // then call API to transfer ownership
+  //   alert(`Transfer ownership is not implemented yet.`);
+  // };
 
   return (
     <div className="flex justify-center py-10 px-4">
@@ -143,7 +143,7 @@ export default function OrgSettings() {
           </div>
 
           {/* Transfer Ownership */}
-          <div>
+          {/* <div>
             <label className="block text-sm font-medium text-gray-700">
               Transfer Ownership
             </label>
@@ -163,7 +163,7 @@ export default function OrgSettings() {
                 Transfer
               </button>
             </div>
-          </div>
+          </div> */}
 
           {error && (
             <div className="text-red-600 text-sm mb-4 text-center">{error}</div>

From ebfd90b7d879d0b549bc7f0e8a633c87c9a22104 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 9 Jul 2025 18:00:32 +0800
Subject: [PATCH 09/21] bsic roadmap

---
 app/organisation/page.tsx                     |  38 +-
 app/settings/page.tsx                         |   4 +-
 .../members/settings/MemberSkillsSettings.tsx | 461 +++++++++++++++---
 .../organisation/courses/CourseCard.tsx       |  31 +-
 .../organisation/courses/CourseForm.tsx       |  95 +++-
 .../organisation/courses/ModuleCard.tsx       |  15 +-
 .../organisation/courses/ModuleForm.tsx       |  30 +-
 .../organisation/settings/ManageChannels.tsx  | 129 +++++
 .../organisation/settings/ManageLevels.tsx    | 146 ++++++
 .../organisation/settings/ManageSkills.tsx    | 129 +++++
 .../settings/OnboardingConfig.tsx             | 177 +++++--
 components/reports/AdminBasicReport.tsx       |  67 ++-
 components/reports/BasicReport.tsx            |  44 +-
 components/roadmap/RoadmapEditor.tsx          | 183 ++++++-
 components/roadmap/types.ts                   |  27 +-
 15 files changed, 1376 insertions(+), 200 deletions(-)
 create mode 100644 components/organisation/settings/ManageChannels.tsx
 create mode 100644 components/organisation/settings/ManageLevels.tsx
 create mode 100644 components/organisation/settings/ManageSkills.tsx

diff --git a/app/organisation/page.tsx b/app/organisation/page.tsx
index 4c421c4..b172f42 100644
--- a/app/organisation/page.tsx
+++ b/app/organisation/page.tsx
@@ -2,15 +2,17 @@
 
 import { useAuth } from "@/context/AuthContext";
 import { useState } from "react";
-import ManageTags from "@/components/organisation/settings/ManageTags";
+import ManageSkills from "@/components/organisation/settings/ManageSkills";
+import ManageChannels from "@/components/organisation/settings/ManageChannels";
+import ManageLevels from "@/components/organisation/settings/ManageLevels";
 import OnboardingConfig from "@/components/organisation/settings/OnboardingConfig";
 import OrgSettings from "@/components/organisation/settings/OrgSettings";
 
 export default function OrganisationsPage() {
   const { user } = useAuth();
   const [activeTab, setActiveTab] = useState<
-    "tags" | "onboarding" | "orgSettings"
-  >("tags");
+    "skills" | "channels" | "levels" | "onboarding" | "orgSettings"
+  >("skills");
 
   if (!user || !user.hasCompletedOnboarding) {
     return null;
@@ -38,14 +40,34 @@ export default function OrganisationsPage() {
         <div className="border-b border-gray-200">
           <nav className="-mb-px flex space-x-8">
             <button
-              onClick={() => setActiveTab("tags")}
+              onClick={() => setActiveTab("skills")}
               className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                activeTab === "tags"
+                activeTab === "skills"
                   ? "border-purple-500 text-purple-600"
                   : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
               }`}
             >
-              Manage Tags
+              Manage Skills
+            </button>
+            <button
+              onClick={() => setActiveTab("channels")}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === "channels"
+                  ? "border-purple-500 text-purple-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              }`}
+            >
+              Manage Channels
+            </button>
+            <button
+              onClick={() => setActiveTab("levels")}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === "levels"
+                  ? "border-purple-500 text-purple-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              }`}
+            >
+              Manage Levels
             </button>
             <button
               onClick={() => setActiveTab("onboarding")}
@@ -72,7 +94,9 @@ export default function OrganisationsPage() {
       </div>
 
       {/* Tab Content */}
-      {activeTab === "tags" && <ManageTags />}
+      {activeTab === "skills" && <ManageSkills />}
+      {activeTab === "channels" && <ManageChannels />}
+      {activeTab === "levels" && <ManageLevels />}
       {activeTab === "onboarding" && <OnboardingConfig />}
       {activeTab === "orgSettings" && <OrgSettings />}
     </div>
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index ecbf480..e6ce558 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -62,9 +62,9 @@ export default async function SettingsPage() {
               <MemberPasswordSettings />
             </div>
 
-            {/* <div className="lg:col-span-2">
+            <div className="lg:col-span-2">
               <MemberSkillsSettings />
-            </div> */}
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/members/settings/MemberSkillsSettings.tsx b/components/members/settings/MemberSkillsSettings.tsx
index 39c3e6f..5addfd9 100644
--- a/components/members/settings/MemberSkillsSettings.tsx
+++ b/components/members/settings/MemberSkillsSettings.tsx
@@ -13,6 +13,36 @@ interface UserSkill {
   level: 'beginner' | 'intermediate' | 'advanced' | 'expert';
 }
 
+interface Channel {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+interface Level {
+  id: number;
+  name: string;
+  description?: string;
+  sort_order?: number;
+}
+
+interface UserChannel {
+  id: number;
+  channel_id: number;
+  channel_name: string;
+  channel_description?: string;
+  preference_rank: number;
+}
+
+interface UserLevel {
+  id: number;
+  level_id: number;
+  level_name: string;
+  level_description?: string;
+  sort_order?: number;
+  preference_rank: number;
+}
+
 const SKILL_LEVELS = [
   { value: 'beginner', label: 'Beginner' },
   { value: 'intermediate', label: 'Intermediate' },
@@ -25,12 +55,22 @@ export default function MemberSkillsSettings() {
   const [availableSkills, setAvailableSkills] = useState<Skill[]>([]);
   const [selectedSkill, setSelectedSkill] = useState<string>("");
   const [selectedLevel, setSelectedLevel] = useState<string>("beginner");
+  
+  // Channel and Level preferences
+  const [userChannels, setUserChannels] = useState<UserChannel[]>([]);
+  const [userLevels, setUserLevels] = useState<UserLevel[]>([]);
+  const [availableChannels, setAvailableChannels] = useState<Channel[]>([]);
+  const [availableLevels, setAvailableLevels] = useState<Level[]>([]);
+  const [selectedChannel, setSelectedChannel] = useState<string>("");
+  const [selectedPreferenceLevel, setSelectedPreferenceLevel] = useState<string>("");
+  
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [message, setMessage] = useState<string | null>(null);
 
   useEffect(() => {
     loadUserSkills();
+    loadUserPreferences();
   }, []);
 
   const loadUserSkills = async () => {
@@ -46,6 +86,24 @@ export default function MemberSkillsSettings() {
     } catch (err: any) {
       setError(err.message || "Failed to load skills");
       console.error("Error loading skills:", err);
+    }
+  };
+
+  const loadUserPreferences = async () => {
+    try {
+      const res = await fetch("/api/users/preferences", {
+        credentials: "include",
+      });
+      if (!res.ok) throw new Error("Failed to load preferences");
+      const data = await res.json();
+      setUserChannels(data.userChannels || []);
+      setUserLevels(data.userLevels || []);
+      setAvailableChannels(data.availableChannels || []);
+      setAvailableLevels(data.availableLevels || []);
+      setError(null);
+    } catch (err: any) {
+      setError(err.message || "Failed to load preferences");
+      console.error("Error loading preferences:", err);
     } finally {
       setLoading(false);
     }
@@ -138,11 +196,135 @@ export default function MemberSkillsSettings() {
     }
   };
 
+  const handleAddChannel = async () => {
+    if (!selectedChannel) return;
+    
+    setError(null);
+    setMessage(null);
+    
+    try {
+      const res = await fetch("/api/users/preferences/channels", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          channel_id: parseInt(selectedChannel),
+        }),
+      });
+      
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to add channel preference");
+      }
+      
+      await loadUserPreferences();
+      setSelectedChannel("");
+      setMessage("Channel preference added successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to add channel preference");
+      console.error("Error adding channel preference:", err);
+    }
+  };
+
+  const handleAddLevel = async () => {
+    if (!selectedPreferenceLevel) return;
+    
+    setError(null);
+    setMessage(null);
+    
+    try {
+      const res = await fetch("/api/users/preferences/levels", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          level_id: parseInt(selectedPreferenceLevel),
+        }),
+      });
+      
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to add level preference");
+      }
+      
+      await loadUserPreferences();
+      setSelectedPreferenceLevel("");
+      setMessage("Level preference added successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to add level preference");
+      console.error("Error adding level preference:", err);
+    }
+  };
+
+  const handleRemoveChannel = async (channelId: number) => {
+    setError(null);
+    setMessage(null);
+    
+    try {
+      const res = await fetch("/api/users/preferences/channels", {
+        method: "DELETE",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          channel_id: channelId,
+        }),
+      });
+      
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to remove channel preference");
+      }
+      
+      await loadUserPreferences();
+      setMessage("Channel preference removed successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to remove channel preference");
+      console.error("Error removing channel preference:", err);
+    }
+  };
+
+  const handleRemoveLevel = async (levelId: number) => {
+    setError(null);
+    setMessage(null);
+    
+    try {
+      const res = await fetch("/api/users/preferences/levels", {
+        method: "DELETE",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          level_id: levelId,
+        }),
+      });
+      
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to remove level preference");
+      }
+      
+      await loadUserPreferences();
+      setMessage("Level preference removed successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to remove level preference");
+      console.error("Error removing level preference:", err);
+    }
+  };
+
   const getAvailableSkillsForAdding = () => {
     const userSkillIds = userSkills.map(us => us.skill_id);
     return availableSkills.filter(skill => !userSkillIds.includes(skill.id));
   };
 
+  const getAvailableChannelsForAdding = () => {
+    const userChannelIds = userChannels.map(uc => uc.channel_id);
+    return availableChannels.filter(channel => !userChannelIds.includes(channel.id));
+  };
+
+  const getAvailableLevelsForAdding = () => {
+    const userLevelIds = userLevels.map(ul => ul.level_id);
+    return availableLevels.filter(level => !userLevelIds.includes(level.id));
+  };
+
   if (loading) {
     return (
       <div className="w-full max-w-2xl bg-white p-8 rounded-2xl shadow-lg">
@@ -158,104 +340,241 @@ export default function MemberSkillsSettings() {
   }
 
   return (
-    <div className="w-full max-w-2xl bg-white p-8 rounded-2xl shadow-lg">
+    <div className="w-full max-w-4xl bg-white p-8 rounded-2xl shadow-lg">
       <h2 className="text-2xl font-semibold mb-6 text-purple-700">
-        Skills Management
+        Learning Preferences
       </h2>
       
-      {/* Add New Skill */}
-      <div className="mb-8 p-4 bg-gray-50 rounded-lg">
-        <h3 className="text-lg font-medium mb-4 text-gray-700">Add New Skill</h3>
-        <div className="flex space-x-4">
-          <div className="flex-1">
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Skill
-            </label>
-            <select
-              value={selectedSkill}
-              onChange={(e) => setSelectedSkill(e.target.value)}
-              className="w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-purple-200"
-            >
-              <option value="">Select a skill...</option>
-              {getAvailableSkillsForAdding().map(skill => (
-                <option key={skill.id} value={skill.id}>
-                  {skill.name}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="flex-1">
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Level
-            </label>
-            <select
-              value={selectedLevel}
-              onChange={(e) => setSelectedLevel(e.target.value)}
-              className="w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-purple-200"
-            >
-              {SKILL_LEVELS.map(level => (
-                <option key={level.value} value={level.value}>
-                  {level.label}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="flex items-end">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      
+      {/* Skills Section */}
+      <div className="space-y-6">
+        <h3 className="text-xl font-medium text-gray-800 border-b pb-2">Skills</h3>
+        
+        {/* Add New Skill */}
+        <div className="p-4 bg-gray-50 rounded-lg">
+          <h4 className="text-lg font-medium mb-4 text-gray-700">Add New Skill</h4>
+          <div className="space-y-3">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Skill
+              </label>
+              <select
+                value={selectedSkill}
+                onChange={(e) => setSelectedSkill(e.target.value)}
+                className="w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-purple-200"
+              >
+                <option value="">Select a skill...</option>
+                {getAvailableSkillsForAdding().map(skill => (
+                  <option key={skill.id} value={skill.id}>
+                    {skill.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Proficiency Level
+              </label>
+              <select
+                value={selectedLevel}
+                onChange={(e) => setSelectedLevel(e.target.value)}
+                className="w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-purple-200"
+              >
+                {SKILL_LEVELS.map(level => (
+                  <option key={level.value} value={level.value}>
+                    {level.label}
+                  </option>
+                ))}
+              </select>
+            </div>
             <button
               onClick={handleAddSkill}
               disabled={!selectedSkill}
-              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 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-300 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               Add Skill
             </button>
           </div>
         </div>
+
+        {/* Current Skills */}
+        <div>
+          <h4 className="text-lg font-medium mb-3 text-gray-700">Current Skills</h4>
+          {userSkills.length === 0 ? (
+            <p className="text-gray-500 text-center py-4 text-sm">No skills added yet.</p>
+          ) : (
+            <div className="space-y-2">
+              {userSkills.map(userSkill => (
+                <div key={userSkill.id} className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
+                  <div className="flex-1">
+                    <span className="font-medium text-gray-900 text-sm">{userSkill.skill_name}</span>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <select
+                      value={userSkill.level}
+                      onChange={(e) => handleUpdateSkill(userSkill.skill_id, e.target.value)}
+                      className="rounded-md border border-gray-300 p-1 text-xs focus:border-purple-700 focus:ring focus:ring-purple-200"
+                    >
+                      {SKILL_LEVELS.map(level => (
+                        <option key={level.value} value={level.value}>
+                          {level.label}
+                        </option>
+                      ))}
+                    </select>
+                    <button
+                      onClick={() => handleRemoveSkill(userSkill.skill_id)}
+                      className="text-red-600 hover:text-red-800 focus:outline-none"
+                    >
+                      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
 
-      {/* Current Skills */}
-      <div>
-        <h3 className="text-lg font-medium mb-4 text-gray-700">Current Skills</h3>
-        {userSkills.length === 0 ? (
-          <p className="text-gray-500 text-center py-8">No skills added yet. Add some skills above to get started!</p>
-        ) : (
+      {/* Channels Section */}
+      <div className="space-y-6">
+        <h3 className="text-xl font-medium text-gray-800 border-b pb-2">Preferred Channels</h3>
+        
+        {/* Add New Channel */}
+        <div className="p-4 bg-blue-50 rounded-lg">
+          <h4 className="text-lg font-medium mb-4 text-gray-700">Add Channel Preference</h4>
           <div className="space-y-3">
-            {userSkills.map(userSkill => (
-              <div key={userSkill.id} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
-                <div className="flex-1">
-                  <span className="font-medium text-gray-900">{userSkill.skill_name}</span>
-                </div>
-                <div className="flex items-center space-x-3">
-                  <select
-                    value={userSkill.level}
-                    onChange={(e) => handleUpdateSkill(userSkill.skill_id, e.target.value)}
-                    className="rounded-md border border-gray-300 p-1 text-sm focus:border-purple-700 focus:ring focus:ring-purple-200"
-                  >
-                    {SKILL_LEVELS.map(level => (
-                      <option key={level.value} value={level.value}>
-                        {level.label}
-                      </option>
-                    ))}
-                  </select>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Channel
+              </label>
+              <select
+                value={selectedChannel}
+                onChange={(e) => setSelectedChannel(e.target.value)}
+                className="w-full rounded-md border border-gray-300 p-2 focus:border-blue-500 focus:ring focus:ring-blue-200"
+              >
+                <option value="">Select a channel...</option>
+                {getAvailableChannelsForAdding().map(channel => (
+                  <option key={channel.id} value={channel.id}>
+                    {channel.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <button
+              onClick={handleAddChannel}
+              disabled={!selectedChannel}
+              className="w-full rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Add Channel
+            </button>
+          </div>
+        </div>
+
+        {/* Current Channels */}
+        <div>
+          <h4 className="text-lg font-medium mb-3 text-gray-700">Current Preferences</h4>
+          {userChannels.length === 0 ? (
+            <p className="text-gray-500 text-center py-4 text-sm">No channel preferences set.</p>
+          ) : (
+            <div className="space-y-2">
+              {userChannels.map(userChannel => (
+                <div key={userChannel.id} className="flex items-center justify-between p-3 border border-gray-200 rounded-lg bg-blue-50">
+                  <div className="flex-1">
+                    <span className="font-medium text-gray-900 text-sm">{userChannel.channel_name}</span>
+                    {userChannel.channel_description && (
+                      <p className="text-xs text-gray-600 mt-1">{userChannel.channel_description}</p>
+                    )}
+                  </div>
                   <button
-                    onClick={() => handleRemoveSkill(userSkill.skill_id)}
+                    onClick={() => handleRemoveChannel(userChannel.channel_id)}
                     className="text-red-600 hover:text-red-800 focus:outline-none"
                   >
-                    <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                     </svg>
                   </button>
                 </div>
-              </div>
-            ))}
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Levels Section */}
+      <div className="space-y-6">
+        <h3 className="text-xl font-medium text-gray-800 border-b pb-2">Preferred Levels</h3>
+        
+        {/* Add New Level */}
+        <div className="p-4 bg-green-50 rounded-lg">
+          <h4 className="text-lg font-medium mb-4 text-gray-700">Add Level Preference</h4>
+          <div className="space-y-3">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Difficulty Level
+              </label>
+              <select
+                value={selectedPreferenceLevel}
+                onChange={(e) => setSelectedPreferenceLevel(e.target.value)}
+                className="w-full rounded-md border border-gray-300 p-2 focus:border-green-500 focus:ring focus:ring-green-200"
+              >
+                <option value="">Select a level...</option>
+                {getAvailableLevelsForAdding().map(level => (
+                  <option key={level.id} value={level.id}>
+                    {level.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <button
+              onClick={handleAddLevel}
+              disabled={!selectedPreferenceLevel}
+              className="w-full rounded bg-green-600 px-4 py-2 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-300 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Add Level
+            </button>
           </div>
-        )}
+        </div>
+
+        {/* Current Levels */}
+        <div>
+          <h4 className="text-lg font-medium mb-3 text-gray-700">Current Preferences</h4>
+          {userLevels.length === 0 ? (
+            <p className="text-gray-500 text-center py-4 text-sm">No level preferences set.</p>
+          ) : (
+            <div className="space-y-2">
+              {userLevels.map(userLevel => (
+                <div key={userLevel.id} className="flex items-center justify-between p-3 border border-gray-200 rounded-lg bg-green-50">
+                  <div className="flex-1">
+                    <span className="font-medium text-gray-900 text-sm">{userLevel.level_name}</span>
+                    {userLevel.level_description && (
+                      <p className="text-xs text-gray-600 mt-1">{userLevel.level_description}</p>
+                    )}
+                  </div>
+                  <button
+                    onClick={() => handleRemoveLevel(userLevel.level_id)}
+                    className="text-red-600 hover:text-red-800 focus:outline-none"
+                  >
+                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+      
       </div>
 
       {error && (
-        <div className="text-red-600 text-sm mt-4 text-center">{error}</div>
+        <div className="text-red-600 text-sm mt-6 text-center bg-red-50 p-3 rounded">{error}</div>
       )}
       {message && (
-        <div className="text-green-600 text-sm mt-4 text-center">
+        <div className="text-green-600 text-sm mt-6 text-center bg-green-50 p-3 rounded">
           {message}
         </div>
       )}
diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index ba75070..2b3892c 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -2,9 +2,17 @@
 
 import Link from "next/link";
 
-export interface Tag {
+export interface Channel {
   id: number;
   name: string;
+  description?: string;
+}
+
+export interface Level {
+  id: number;
+  name: string;
+  description?: string;
+  sort_order?: number;
 }
 
 export interface Course {
@@ -13,7 +21,8 @@ export interface Course {
   description?: string;
   total_modules?: number;
   completed_modules?: number;
-  tags?: Tag[];
+  channel?: Channel;
+  level?: Level;
 }
 
 interface Props {
@@ -118,16 +127,18 @@ export default function CourseCard({
       <h2 className="text-xl font-semibold text-purple-600">{course.name}</h2>
       <p className="mt-2 text-gray-700">{course.description?.slice(0, 100)}</p>
 
-      {course.tags && course.tags.length > 0 && (
+      {(course.channel || course.level) && (
         <div className="mt-3 flex flex-wrap gap-2">
-          {course.tags.map((t) => (
-            <span
-              key={t.id}
-              className="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full"
-            >
-              {t.name}
+          {course.channel && (
+            <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">
+              {course.channel.name}
+            </span>
+          )}
+          {course.level && (
+            <span className="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">
+              {course.level.name}
             </span>
-          ))}
+          )}
         </div>
       )}
 
diff --git a/components/organisation/courses/CourseForm.tsx b/components/organisation/courses/CourseForm.tsx
index 19a9525..21413b9 100644
--- a/components/organisation/courses/CourseForm.tsx
+++ b/components/organisation/courses/CourseForm.tsx
@@ -9,11 +9,19 @@ export interface Course {
   id: number;
   name: string;
   description?: string;
-  tags?: { id: number; name: string }[];
+  channel?: { id: number; name: string; description?: string };
+  level?: { id: number; name: string; description?: string; sort_order?: number };
 }
-interface Tag {
+interface Channel {
   id: number;
   name: string;
+  description?: string;
+}
+interface Level {
+  id: number;
+  name: string;
+  description?: string;
+  sort_order?: number;
 }
 interface Option {
   value: number;
@@ -28,17 +36,30 @@ interface Props {
 export default function CourseForm({ mode, courseId }: Props) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
-  const [allTags, setAllTags] = useState<Tag[]>([]);
-  const [options, setOptions] = useState<Option[]>([]);
-  const [selected, setSelected] = useState<Option[]>([]);
+  const [allChannels, setAllChannels] = useState<Channel[]>([]);
+  const [allLevels, setAllLevels] = useState<Level[]>([]);
+  const [channelOptions, setChannelOptions] = useState<Option[]>([]);
+  const [levelOptions, setLevelOptions] = useState<Option[]>([]);
+  const [selectedChannel, setSelectedChannel] = useState<Option | null>(null);
+  const [selectedLevel, setSelectedLevel] = useState<Option | null>(null);
   const router = useRouter();
 
   useEffect(() => {
-    fetch("/api/courses/tags", { credentials: "include" })
+    // Fetch channels
+    fetch("/api/courses/channels", { credentials: "include" })
       .then((r) => r.json())
-      .then((tags: Tag[]) => {
-        setAllTags(tags);
-        setOptions(tags.map((t) => ({ value: t.id, label: t.name })));
+      .then((channels: Channel[]) => {
+        setAllChannels(channels);
+        setChannelOptions(channels.map((c) => ({ value: c.id, label: c.name })));
+      })
+      .catch(console.error);
+
+    // Fetch levels
+    fetch("/api/courses/levels", { credentials: "include" })
+      .then((r) => r.json())
+      .then((levels: Level[]) => {
+        setAllLevels(levels);
+        setLevelOptions(levels.map((l) => ({ value: l.id, label: l.name })));
       })
       .catch(console.error);
 
@@ -56,11 +77,18 @@ export default function CourseForm({ mode, courseId }: Props) {
         .then((course: Course) => {
           setName(course.name);
           setDescription(course.description || "");
-          const pre = (course.tags || []).map((t) => ({
-            value: t.id,
-            label: t.name,
-          }));
-          setSelected(pre);
+          if (course.channel) {
+            setSelectedChannel({
+              value: course.channel.id,
+              label: course.channel.name,
+            });
+          }
+          if (course.level) {
+            setSelectedLevel({
+              value: course.level.id,
+              label: course.level.name,
+            });
+          }
         })
         .catch((_) => {
           alert("Failed to load course");
@@ -71,12 +99,18 @@ export default function CourseForm({ mode, courseId }: Props) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const tags = selected.map((o) => o.value);
+    
+    if (!selectedChannel || !selectedLevel) {
+      alert("Please select both channel and level");
+      return;
+    }
+    
     const payload = {
       courseName: name,
       description,
-      tags,
-      updateTags: mode === "edit",
+      channelId: selectedChannel.value,
+      levelId: selectedLevel.value,
+      updateChannelLevel: mode === "edit",
     };
 
     const url = "/api/courses";
@@ -135,14 +169,25 @@ export default function CourseForm({ mode, courseId }: Props) {
         />
       </div>
 
-      <div>
-        <label className="block text-gray-700 mb-1">Tags</label>
-        <Select
-          isMulti
-          options={options}
-          value={selected}
-          onChange={(opts) => setSelected(opts as Option[])}
-        />
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-gray-700 mb-1">Channel</label>
+          <Select
+            options={channelOptions}
+            value={selectedChannel}
+            onChange={(opt) => setSelectedChannel(opt as Option)}
+            placeholder="Select a channel..."
+          />
+        </div>
+        <div>
+          <label className="block text-gray-700 mb-1">Level</label>
+          <Select
+            options={levelOptions}
+            value={selectedLevel}
+            onChange={(opt) => setSelectedLevel(opt as Option)}
+            placeholder="Select a level..."
+          />
+        </div>
       </div>
 
       <div className="space-x-4">
diff --git a/components/organisation/courses/ModuleCard.tsx b/components/organisation/courses/ModuleCard.tsx
index cea2ae1..2c8ac5d 100644
--- a/components/organisation/courses/ModuleCard.tsx
+++ b/components/organisation/courses/ModuleCard.tsx
@@ -5,9 +5,10 @@ import { useParams } from "next/navigation";
 import { useEffect } from "react";
 import { useState } from "react";
 
-export interface Tag {
+export interface Skill {
   id: number;
   name: string;
+  description?: string;
 }
 
 export interface Module {
@@ -15,7 +16,7 @@ export interface Module {
   title: string;
   module_type: string;
   position: number;
-  tags?: Tag[];
+  skills?: Skill[];
 }
 
 interface Props {
@@ -64,14 +65,14 @@ export default function ModuleCard({ module, isEditMode, isEnrolled }: Props) {
           <p className="text-sm text-gray-500 capitalize">
             {module.module_type}
           </p>
-          {!!module.tags?.length && (
+          {!!module.skills?.length && (
             <div className="mt-2 flex flex-wrap gap-1">
-              {module.tags.map((t) => (
+              {module.skills.map((s) => (
                 <span
-                  key={t.id}
-                  className="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full"
+                  key={s.id}
+                  className="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full"
                 >
-                  {t.name}
+                  {s.name}
                 </span>
               ))}
             </div>
diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
index 98185b2..b2c3c6f 100644
--- a/components/organisation/courses/ModuleForm.tsx
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -6,9 +6,10 @@ import { useEffect } from "react";
 import { ModuleDetailData } from "./ModuleDetail";
 import Select from "react-select";
 
-interface Tag {
+interface Skill {
   id: number;
   name: string;
+  description?: string;
 }
 interface Option {
   value: number;
@@ -35,15 +36,15 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
     useState<ModuleDetailData["module_type"]>("pdf");
 
   const [questions, setQuestions] = useState<Question[]>([]);
-  const [allTags, setAllTags] = useState<Tag[]>([]);
+  const [allSkills, setAllSkills] = useState<Skill[]>([]);
   const [options, setOptions] = useState<Option[]>([]);
   const [selected, setSelected] = useState<Option[]>([]);
   useEffect(() => {
-    fetch("/api/courses/tags", { credentials: "include" })
+    fetch("/api/courses/skills", { credentials: "include" })
       .then((r) => r.json())
-      .then((tags: Tag[]) => {
-        setAllTags(tags);
-        setOptions(tags.map((t) => ({ value: t.id, label: t.name })));
+      .then((skills: Skill[]) => {
+        setAllSkills(skills);
+        setOptions(skills.map((s) => ({ value: s.id, label: s.name })));
       })
       .catch(console.error);
     if (mode === "edit" && moduleId) {
@@ -57,12 +58,12 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
           if (!r.ok) throw new Error();
           return r.json();
         })
-        .then((mod: ModuleDetailData & { tags?: Tag[] }) => {
+        .then((mod: ModuleDetailData & { skills?: Skill[] }) => {
           setName(mod.title);
           setDescription(mod.description);
           setModuleType(mod.module_type);
           setSelected(
-            (mod.tags || []).map((t) => ({ value: t.id, label: t.name }))
+            (mod.skills || []).map((s) => ({ value: s.id, label: s.name }))
           );
         })
         .catch(() => {
@@ -124,12 +125,12 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
       } else if (uploadFile) {
         fd.append("file", uploadFile);
       }
-      const tagsPayload = selected.map((opt) => ({
+      const skillsPayload = selected.map((opt) => ({
         id: typeof opt.value === "number" ? opt.value : undefined,
         name: typeof opt.value === "string" ? opt.value : undefined,
         isNew: typeof opt.value === "string",
       }));
-      fd.append("moduleTags", JSON.stringify(tagsPayload));
+      fd.append("moduleSkills", JSON.stringify(skillsPayload));
       try {
         const res = await fetch("/api/courses/add-module", {
           method: "POST",
@@ -193,13 +194,13 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
         fd.append("type", moduleType);
         fd.append("file", uploadFile);
       }
-      const tagsPayload = selected.map((opt) => ({
+      const skillsPayload = selected.map((opt) => ({
         id: typeof opt.value === "number" ? opt.value : undefined,
         name: typeof opt.value === "string" ? opt.value : undefined,
         isNew: typeof opt.value === "string",
       }));
-      fd.append("moduleTags", JSON.stringify(tagsPayload));
-      fd.append("updateTags", "true");
+      fd.append("moduleSkills", JSON.stringify(skillsPayload));
+      fd.append("updateSkills", "true");
       try {
         const res = await fetch("/api/courses/update-module", {
           method: "PUT",
@@ -466,12 +467,13 @@ export default function ModuleForm({ mode, courseId, moduleId }: Props) {
         </div>
       )}
       <div>
-        <label className="block text-gray-700 mb-1">Tags</label>
+        <label className="block text-gray-700 mb-1">Skills</label>
         <Select
           isMulti
           options={options}
           value={selected}
           onChange={(opts) => setSelected(opts as Option[])}
+          placeholder="Select skills..."
         />
       </div>
       <div className="space-x-4">
diff --git a/components/organisation/settings/ManageChannels.tsx b/components/organisation/settings/ManageChannels.tsx
new file mode 100644
index 0000000..f457d40
--- /dev/null
+++ b/components/organisation/settings/ManageChannels.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface Channel {
+  id: number;
+  name: string;
+  description: string;
+}
+
+export default function ManageChannels() {
+  const [channels, setChannels] = useState<Channel[]>([]);
+  const [newName, setNewName] = useState("");
+  const [newDescription, setNewDescription] = useState("");
+
+  const fetchChannels = () =>
+    fetch("/api/courses/channels", { credentials: "include" })
+      .then((r) => r.json())
+      .then(setChannels)
+      .catch(console.error);
+
+  useEffect(() => {
+    fetchChannels();
+  }, []);
+
+  const addChannel = async () => {
+    const name = newName.trim();
+    if (!name) return;
+    const res = await fetch("/api/courses/add-channel", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ 
+        name, 
+        description: newDescription.trim() 
+      }),
+    });
+    if (res.ok) {
+      setNewName("");
+      setNewDescription("");
+      fetchChannels();
+    } else {
+      alert("Failed to add channel");
+    }
+  };
+
+  const deleteChannel = async (id: number) => {
+    if (
+      !confirm(
+        "Delete this channel? All courses using this channel will be affected"
+      )
+    )
+      return;
+    const res = await fetch("/api/courses/delete-channel", {
+      method: "DELETE",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ channelId: id }),
+    });
+    if (res.ok) fetchChannels();
+    else alert("Delete failed");
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold">Manage Channels</h1>
+      <p className="text-gray-600">Channels represent topics or subject areas for courses</p>
+
+      <div className="space-y-4">
+        <div className="flex flex-col gap-2">
+          <input
+            type="text"
+            placeholder="Channel name"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            className="w-full p-2 border rounded focus:outline-none focus:ring"
+          />
+          <textarea
+            placeholder="Channel description (optional)"
+            value={newDescription}
+            onChange={(e) => setNewDescription(e.target.value)}
+            className="w-full p-2 border rounded focus:outline-none focus:ring"
+            rows={3}
+          />
+        </div>
+        <button
+          onClick={addChannel}
+          className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+        >
+          Add Channel
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        {channels.map((channel) => (
+          <div
+            key={channel.id}
+            className="p-3 border rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow flex justify-between items-start"
+          >
+            <div className="flex-1 min-w-0">
+              <h3 className="font-medium text-base truncate">{channel.name}</h3>
+              {channel.description && (
+                <p className="text-gray-600 text-sm mt-1 line-clamp-2">{channel.description}</p>
+              )}
+            </div>
+            <button
+              onClick={() => deleteChannel(channel.id)}
+              className="ml-2 p-1 text-red-600 hover:bg-red-100 rounded flex-shrink-0"
+              title="Delete channel"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9zM4 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 012 0v3a1 1 0 11-2 0V9zm4 0a1 1 0 012 0v3a1 1 0 11-2 0V9z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/organisation/settings/ManageLevels.tsx b/components/organisation/settings/ManageLevels.tsx
new file mode 100644
index 0000000..f8a13d9
--- /dev/null
+++ b/components/organisation/settings/ManageLevels.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface Level {
+  id: number;
+  name: string;
+  description: string;
+  sort_order: number;
+}
+
+export default function ManageLevels() {
+  const [levels, setLevels] = useState<Level[]>([]);
+  const [newName, setNewName] = useState("");
+  const [newDescription, setNewDescription] = useState("");
+  const [newSortOrder, setNewSortOrder] = useState("");
+
+  const fetchLevels = () =>
+    fetch("/api/courses/levels", { credentials: "include" })
+      .then((r) => r.json())
+      .then(setLevels)
+      .catch(console.error);
+
+  useEffect(() => {
+    fetchLevels();
+  }, []);
+
+  const addLevel = async () => {
+    const name = newName.trim();
+    if (!name) return;
+    const res = await fetch("/api/courses/add-level", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ 
+        name, 
+        description: newDescription.trim(),
+        sort_order: newSortOrder ? parseInt(newSortOrder) : 0
+      }),
+    });
+    if (res.ok) {
+      setNewName("");
+      setNewDescription("");
+      setNewSortOrder("");
+      fetchLevels();
+    } else {
+      alert("Failed to add level");
+    }
+  };
+
+  const deleteLevel = async (id: number) => {
+    if (
+      !confirm(
+        "Delete this level? All courses using this level will be affected"
+      )
+    )
+      return;
+    const res = await fetch("/api/courses/delete-level", {
+      method: "DELETE",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ levelId: id }),
+    });
+    if (res.ok) fetchLevels();
+    else alert("Delete failed");
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold">Manage Levels</h1>
+      <p className="text-gray-600">Levels represent difficulty or progression stages for courses</p>
+
+      <div className="space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <input
+            type="text"
+            placeholder="Level name"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            className="p-2 border rounded focus:outline-none focus:ring"
+          />
+          <input
+            type="number"
+            placeholder="Sort order"
+            value={newSortOrder}
+            onChange={(e) => setNewSortOrder(e.target.value)}
+            className="p-2 border rounded focus:outline-none focus:ring"
+          />
+          <div></div>
+        </div>
+        <textarea
+          placeholder="Level description (optional)"
+          value={newDescription}
+          onChange={(e) => setNewDescription(e.target.value)}
+          className="w-full p-2 border rounded focus:outline-none focus:ring"
+          rows={3}
+        />
+        <button
+          onClick={addLevel}
+          className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+        >
+          Add Level
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        {levels.map((level) => (
+          <div
+            key={level.id}
+            className="p-3 border rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow flex justify-between items-start"
+          >
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <h3 className="font-medium text-base truncate">{level.name}</h3>
+                <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                  {level.sort_order}
+                </span>
+              </div>
+              {level.description && (
+                <p className="text-gray-600 text-sm mt-1 line-clamp-2">{level.description}</p>
+              )}
+            </div>
+            <button
+              onClick={() => deleteLevel(level.id)}
+              className="ml-2 p-1 text-red-600 hover:bg-red-100 rounded flex-shrink-0"
+              title="Delete level"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9zM4 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 012 0v3a1 1 0 11-2 0V9zm4 0a1 1 0 012 0v3a1 1 0 11-2 0V9z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/organisation/settings/ManageSkills.tsx b/components/organisation/settings/ManageSkills.tsx
new file mode 100644
index 0000000..b5c96fb
--- /dev/null
+++ b/components/organisation/settings/ManageSkills.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface Skill {
+  id: number;
+  name: string;
+  description: string;
+}
+
+export default function ManageSkills() {
+  const [skills, setSkills] = useState<Skill[]>([]);
+  const [newName, setNewName] = useState("");
+  const [newDescription, setNewDescription] = useState("");
+
+  const fetchSkills = () =>
+    fetch("/api/courses/skills", { credentials: "include" })
+      .then((r) => r.json())
+      .then(setSkills)
+      .catch(console.error);
+
+  useEffect(() => {
+    fetchSkills();
+  }, []);
+
+  const addSkill = async () => {
+    const name = newName.trim();
+    if (!name) return;
+    const res = await fetch("/api/courses/add-skill", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ 
+        name, 
+        description: newDescription.trim() 
+      }),
+    });
+    if (res.ok) {
+      setNewName("");
+      setNewDescription("");
+      fetchSkills();
+    } else {
+      alert("Failed to add skill");
+    }
+  };
+
+  const deleteSkill = async (id: number) => {
+    if (
+      !confirm(
+        "Delete this skill? All modules using this skill will be affected"
+      )
+    )
+      return;
+    const res = await fetch("/api/courses/delete-skill", {
+      method: "DELETE",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ skillId: id }),
+    });
+    if (res.ok) fetchSkills();
+    else alert("Delete failed");
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold">Manage Skills</h1>
+      <p className="text-gray-600">Skills are used to categorize modules and track user progress</p>
+
+      <div className="space-y-4">
+        <div className="flex flex-col gap-2">
+          <input
+            type="text"
+            placeholder="Skill name"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            className="w-full p-2 border rounded focus:outline-none focus:ring"
+          />
+          <textarea
+            placeholder="Skill description (optional)"
+            value={newDescription}
+            onChange={(e) => setNewDescription(e.target.value)}
+            className="w-full p-2 border rounded focus:outline-none focus:ring"
+            rows={3}
+          />
+        </div>
+        <button
+          onClick={addSkill}
+          className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+        >
+          Add Skill
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        {skills.map((skill) => (
+          <div
+            key={skill.id}
+            className="p-3 border rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow flex justify-between items-start"
+          >
+            <div className="flex-1 min-w-0">
+              <h3 className="font-medium text-base truncate">{skill.name}</h3>
+              {skill.description && (
+                <p className="text-gray-600 text-sm mt-1 line-clamp-2">{skill.description}</p>
+              )}
+            </div>
+            <button
+              onClick={() => deleteSkill(skill.id)}
+              className="ml-2 p-1 text-red-600 hover:bg-red-100 rounded flex-shrink-0"
+              title="Delete skill"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9zM4 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 012 0v3a1 1 0 11-2 0V9zm4 0a1 1 0 012 0v3a1 1 0 11-2 0V9z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/organisation/settings/OnboardingConfig.tsx b/components/organisation/settings/OnboardingConfig.tsx
index 840526b..5993b63 100644
--- a/components/organisation/settings/OnboardingConfig.tsx
+++ b/components/organisation/settings/OnboardingConfig.tsx
@@ -2,16 +2,35 @@
 
 import { useState, useEffect } from "react";
 
-interface Tag {
+interface Skill {
   id: number;
   name: string;
+  description?: string;
+}
+
+interface Channel {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+interface Level {
+  id: number;
+  name: string;
+  description?: string;
+  sort_order: number;
 }
 
 interface Option {
   id: number;
   option_text: string;
-  tag_id: number | null;
-  tag_name: string | null;
+  skill_id: number | null;
+  skill_name: string | null;
+  skill_description: string | null;
+  channel_id: number | null;
+  channel_name: string | null;
+  level_id: number | null;
+  level_name: string | null;
 }
 
 interface Question {
@@ -23,11 +42,15 @@ interface Question {
 
 export default function OnboardingConfig() {
   const [questions, setQuestions] = useState<Question[]>([]);
-  const [tags, setTags] = useState<Tag[]>([]);
+  const [skills, setSkills] = useState<Skill[]>([]);
+  const [channels, setChannels] = useState<Channel[]>([]);
+  const [levels, setLevels] = useState<Level[]>([]);
   const [newQuestionText, setNewQuestionText] = useState("");
   const [editingQuestion, setEditingQuestion] = useState<number | null>(null);
   const [newOptionText, setNewOptionText] = useState("");
-  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
+  const [selectedSkillId, setSelectedSkillId] = useState<number | null>(null);
+  const [selectedChannelId, setSelectedChannelId] = useState<number | null>(null);
+  const [selectedLevelId, setSelectedLevelId] = useState<number | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -48,24 +71,56 @@ export default function OnboardingConfig() {
     }
   };
 
-  const fetchTags = async () => {
+  const fetchSkills = async () => {
+    try {
+      const res = await fetch("/api/courses/skills", { credentials: "include" });
+      if (res.ok) {
+        const data = await res.json();
+        setSkills(data || []);
+      } else {
+        setError("Failed to fetch skills");
+      }
+    } catch (err) {
+      setError("Error fetching skills");
+      console.error(err);
+    }
+  };
+
+  const fetchChannels = async () => {
     try {
-      const res = await fetch("/api/courses/tags", { credentials: "include" });
+      const res = await fetch("/api/courses/channels", { credentials: "include" });
       if (res.ok) {
         const data = await res.json();
-        setTags(data || []);
+        setChannels(data || []);
       } else {
-        setError("Failed to fetch tags");
+        setError("Failed to fetch channels");
       }
     } catch (err) {
-      setError("Error fetching tags");
+      setError("Error fetching channels");
+      console.error(err);
+    }
+  };
+
+  const fetchLevels = async () => {
+    try {
+      const res = await fetch("/api/courses/levels", { credentials: "include" });
+      if (res.ok) {
+        const data = await res.json();
+        setLevels(data || []);
+      } else {
+        setError("Failed to fetch levels");
+      }
+    } catch (err) {
+      setError("Error fetching levels");
       console.error(err);
     }
   };
 
   useEffect(() => {
     fetchQuestions();
-    fetchTags();
+    fetchSkills();
+    fetchChannels();
+    fetchLevels();
   }, []);
 
   const addQuestion = async () => {
@@ -147,14 +202,18 @@ export default function OnboardingConfig() {
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             option_text: text,
-            ...(selectedTagId && { tag_id: selectedTagId }),
+            ...(selectedSkillId && { skill_id: selectedSkillId }),
+            ...(selectedChannelId && { channel_id: selectedChannelId }),
+            ...(selectedLevelId && { level_id: selectedLevelId }),
           }),
         }
       );
 
       if (res.ok) {
         setNewOptionText("");
-        setSelectedTagId(null);
+        setSelectedSkillId(null);
+        setSelectedChannelId(null);
+        setSelectedLevelId(null);
         setEditingQuestion(null);
         await fetchQuestions();
       } else {
@@ -273,11 +332,23 @@ export default function OnboardingConfig() {
                     >
                       <div className="flex items-center flex-1">
                         <span>{option.option_text}</span>
-                        {option.tag_name && (
-                          <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm ml-2">
-                            {option.tag_name}
-                          </span>
-                        )}
+                        <div className="flex gap-1 ml-2">
+                          {option.skill_name && (
+                            <span className="inline-flex items-center bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs">
+                              {option.skill_name}
+                            </span>
+                          )}
+                          {option.channel_name && (
+                            <span className="inline-flex items-center bg-emerald-100 text-emerald-800 px-2 py-1 rounded-full text-xs">
+                              {option.channel_name}
+                            </span>
+                          )}
+                          {option.level_name && (
+                            <span className="inline-flex items-center bg-amber-100 text-amber-800 px-2 py-1 rounded-full text-xs">
+                              {option.level_name}
+                            </span>
+                          )}
+                        </div>
                       </div>
                       <button
                         onClick={() => deleteOption(option.id, question.id)}
@@ -316,23 +387,59 @@ export default function OnboardingConfig() {
                     className="w-full p-2 border rounded focus:outline-none focus:ring"
                     disabled={loading}
                   />
-                  <select
-                    value={selectedTagId || ""}
-                    onChange={(e) =>
-                      setSelectedTagId(
-                        e.target.value ? parseInt(e.target.value) : null
-                      )
-                    }
-                    className="w-full p-2 border rounded focus:outline-none focus:ring"
-                    disabled={loading}
-                  >
-                    <option value="">No tag (optional)</option>
-                    {tags.map((tag) => (
-                      <option key={tag.id} value={tag.id}>
-                        {tag.name}
-                      </option>
-                    ))}
-                  </select>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                    <select
+                      value={selectedSkillId || ""}
+                      onChange={(e) =>
+                        setSelectedSkillId(
+                          e.target.value ? parseInt(e.target.value) : null
+                        )
+                      }
+                      className="p-2 border rounded focus:outline-none focus:ring"
+                      disabled={loading}
+                    >
+                      <option value="">No skill (optional)</option>
+                      {skills.map((skill) => (
+                        <option key={skill.id} value={skill.id}>
+                          {skill.name}
+                        </option>
+                      ))}
+                    </select>
+                    <select
+                      value={selectedChannelId || ""}
+                      onChange={(e) =>
+                        setSelectedChannelId(
+                          e.target.value ? parseInt(e.target.value) : null
+                        )
+                      }
+                      className="p-2 border rounded focus:outline-none focus:ring"
+                      disabled={loading}
+                    >
+                      <option value="">No channel (optional)</option>
+                      {channels.map((channel) => (
+                        <option key={channel.id} value={channel.id}>
+                          {channel.name}
+                        </option>
+                      ))}
+                    </select>
+                    <select
+                      value={selectedLevelId || ""}
+                      onChange={(e) =>
+                        setSelectedLevelId(
+                          e.target.value ? parseInt(e.target.value) : null
+                        )
+                      }
+                      className="p-2 border rounded focus:outline-none focus:ring"
+                      disabled={loading}
+                    >
+                      <option value="">No level (optional)</option>
+                      {levels.map((level) => (
+                        <option key={level.id} value={level.id}>
+                          {level.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
                   <button
                     onClick={() => addOption(question.id)}
                     disabled={loading || !newOptionText.trim()}
diff --git a/components/reports/AdminBasicReport.tsx b/components/reports/AdminBasicReport.tsx
index 2ce977e..7767bf3 100644
--- a/components/reports/AdminBasicReport.tsx
+++ b/components/reports/AdminBasicReport.tsx
@@ -3,6 +3,19 @@
 
 import { useState, useEffect } from "react";
 
+interface Channel {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+interface Level {
+  id: number;
+  name: string;
+  description?: string;
+  sort_order?: number;
+}
+
 interface CourseSummary {
   id: number;
   name: string;
@@ -13,12 +26,16 @@ interface CourseSummary {
   pdfs: number;
   slides: number;
   others: number;
+  channel?: Channel;
+  level?: Level;
 }
 
 interface CourseDone {
   id: number;
   name: string;
   completed_at: string;
+  channel?: Channel;
+  level?: Level;
 }
 
 interface QuizResult {
@@ -90,6 +107,8 @@ export default function AdminBasicReport() {
           <thead>
             <tr>
               <th className="border px-2 py-1 text-left">Course</th>
+              <th className="border px-2 py-1">Channel</th>
+              <th className="border px-2 py-1">Level</th>
               <th className="border px-2 py-1">Enrolled</th>
               <th className="border px-2 py-1">Completed</th>
               <th className="border px-2 py-1">Videos</th>
@@ -103,6 +122,24 @@ export default function AdminBasicReport() {
             {data.courses.map((c) => (
               <tr key={c.id}>
                 <td className="border px-2 py-1">{c.name}</td>
+                <td className="border px-2 py-1">
+                  {c.channel ? (
+                    <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">
+                      {c.channel.name}
+                    </span>
+                  ) : (
+                    <span className="text-gray-400">—</span>
+                  )}
+                </td>
+                <td className="border px-2 py-1">
+                  {c.level ? (
+                    <span className="inline-flex items-center bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">
+                      {c.level.name}
+                    </span>
+                  ) : (
+                    <span className="text-gray-400">—</span>
+                  )}
+                </td>
                 <td className="border px-2 py-1">{c.total_enrolled}</td>
                 <td className="border px-2 py-1">{c.total_completed}</td>
                 <td className="border px-2 py-1">{c.videos}</td>
@@ -134,14 +171,32 @@ export default function AdminBasicReport() {
               <div>
                 <h3 className="font-semibold">Courses Completed</h3>
                 {emp.coursesDone.length ? (
-                  <ul className="list-disc list-inside ml-4">
+                  <div className="ml-4 space-y-2">
                     {emp.coursesDone.map((c) => (
-                      <li key={c.id}>
-                        {c.name} —{" "}
-                        {new Date(c.completed_at).toLocaleDateString()}
-                      </li>
+                      <div key={c.id} className="bg-gray-50 p-2 rounded">
+                        <div className="flex items-center justify-between">
+                          <span className="font-medium">{c.name}</span>
+                          <span className="text-sm text-gray-600">
+                            {new Date(c.completed_at).toLocaleDateString()}
+                          </span>
+                        </div>
+                        {(c.channel || c.level) && (
+                          <div className="mt-1 flex flex-wrap gap-1">
+                            {c.channel && (
+                              <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">
+                                {c.channel.name}
+                              </span>
+                            )}
+                            {c.level && (
+                              <span className="inline-flex items-center bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">
+                                {c.level.name}
+                              </span>
+                            )}
+                          </div>
+                        )}
+                      </div>
                     ))}
-                  </ul>
+                  </div>
                 ) : (
                   <p className="ml-4">None yet</p>
                 )}
diff --git a/components/reports/BasicReport.tsx b/components/reports/BasicReport.tsx
index 4fff1dd..222f7c6 100644
--- a/components/reports/BasicReport.tsx
+++ b/components/reports/BasicReport.tsx
@@ -2,10 +2,25 @@
 
 import { useEffect, useState } from "react";
 
+interface Channel {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+interface Level {
+  id: number;
+  name: string;
+  description?: string;
+  sort_order?: number;
+}
+
 interface CourseDone {
   id: number;
   name: string;
   completed_at: string;
+  channel?: Channel;
+  level?: Level;
 }
 
 interface QuizResult {
@@ -63,13 +78,32 @@ export default function BasicReport() {
       <section>
         <h2 className="text-2xl font-semibold ">Courses Completed</h2>
         {data.coursesDone.length ? (
-          <ul className="list-disc list-inside">
+          <div className="space-y-3">
             {data.coursesDone.map((c) => (
-              <li key={c.id}>
-                {c.name} &mdash; {new Date(c.completed_at).toLocaleDateString()}
-              </li>
+              <div key={c.id} className="bg-gray-50 p-3 rounded-lg">
+                <div className="flex items-center justify-between">
+                  <h3 className="font-medium text-lg">{c.name}</h3>
+                  <span className="text-sm text-gray-600">
+                    {new Date(c.completed_at).toLocaleDateString()}
+                  </span>
+                </div>
+                {(c.channel || c.level) && (
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    {c.channel && (
+                      <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">
+                        {c.channel.name}
+                      </span>
+                    )}
+                    {c.level && (
+                      <span className="inline-flex items-center bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">
+                        {c.level.name}
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
             ))}
-          </ul>
+          </div>
         ) : (
           <p>No courses completed yet.</p>
         )}
diff --git a/components/roadmap/RoadmapEditor.tsx b/components/roadmap/RoadmapEditor.tsx
index d9a059f..86dc052 100644
--- a/components/roadmap/RoadmapEditor.tsx
+++ b/components/roadmap/RoadmapEditor.tsx
@@ -14,13 +14,16 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
   const [roadmapName, setRoadmapName] = useState(roadmap.name);
   const [items, setItems] = useState<RoadmapItem[]>([]);
   const [availableModules, setAvailableModules] = useState<Module[]>([]);
+  const [channelRecommendations, setChannelRecommendations] = useState<{[key: string]: Module[]}>({});
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [showModuleSelector, setShowModuleSelector] = useState(false);
+  const [showChannelRecommendations, setShowChannelRecommendations] = useState(false);
 
   useEffect(() => {
     fetchRoadmapItems();
     fetchAvailableModules();
+    fetchChannelRecommendations();
   }, [roadmap.id]);
 
   const fetchRoadmapItems = async () => {
@@ -41,13 +44,13 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
 
   const fetchAvailableModules = async () => {
     try {
-      const userTagResponse = await fetch("/api/materials/by-user-tags", {
+      const userSkillResponse = await fetch("/api/materials/by-user-skills", {
         credentials: "include",
       });
 
       let userRecommendedModules = [];
-      if (userTagResponse.ok) {
-        const userData = await userTagResponse.json();
+      if (userSkillResponse.ok) {
+        const userData = await userSkillResponse.json();
         userRecommendedModules = userData.materials || [];
       }
 
@@ -75,6 +78,45 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
     }
   };
 
+  const fetchChannelRecommendations = async () => {
+    try {
+      const response = await fetch("/api/materials/by-user-skills", {
+        credentials: "include",
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        const modules = data.materials || [];
+        
+        // Group modules by channel
+        const groupedByChannel: {[key: string]: Module[]} = {};
+        
+        modules.forEach((module: Module) => {
+          if (module.channel) {
+            const channelName = module.channel.name;
+            if (!groupedByChannel[channelName]) {
+              groupedByChannel[channelName] = [];
+            }
+            groupedByChannel[channelName].push(module);
+          }
+        });
+        
+        // Sort channels by number of modules and limit to top 3 modules per channel
+        const sortedChannels: {[key: string]: Module[]} = {};
+        Object.entries(groupedByChannel)
+          .sort(([,a], [,b]) => b.length - a.length)
+          .forEach(([channel, modules]) => {
+            sortedChannels[channel] = modules.slice(0, 3);
+          });
+        
+        setChannelRecommendations(sortedChannels);
+      }
+    } catch (error) {
+      console.error("Failed to fetch channel recommendations:", error);
+      setChannelRecommendations({});
+    }
+  };
+
   const updateRoadmapName = async () => {
     if (roadmapName.trim() === roadmap.name) return;
 
@@ -197,6 +239,13 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
         <div className="flex justify-between items-center mb-4">
           <h3 className="text-lg font-medium">Learning Modules</h3>
           <div className="space-x-2">
+            <button
+              onClick={() => setShowChannelRecommendations(true)}
+              className="px-3 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded text-sm"
+              title="View channel-based recommendations"
+            >
+              📚 Channel Recommendations
+            </button>
             <button
               onClick={fetchRoadmapItems}
               className="px-3 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm"
@@ -285,9 +334,23 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
                           </button>
                         )}
                       </div>
-                      <p className="text-sm text-gray-600">
-                        {item.course_name} • {item.module_type}
-                      </p>
+                      <div className="flex items-center space-x-2 text-sm text-gray-600">
+                        <span>{item.course_name} • {item.module_type}</span>
+                        {(item.channel || item.level) && (
+                          <div className="flex gap-1">
+                            {item.channel && (
+                              <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">
+                                {item.channel.name}
+                              </span>
+                            )}
+                            {item.level && (
+                              <span className="inline-flex items-center bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">
+                                {item.level.name}
+                              </span>
+                            )}
+                          </div>
+                        )}
+                      </div>
                       {item.description && (
                         <p className="text-xs text-gray-500 mt-1">
                           {item.description}
@@ -362,7 +425,7 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
                   )
                   .map((module, index) => {
                     const isRecommended =
-                      module.matching_tags && module.matching_tags > 0;
+                      module.matching_skills && module.matching_skills > 0;
                     return (
                       <div
                         key={module.id}
@@ -381,18 +444,32 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
                               </span>
                             )}
                           </div>
-                          <p className="text-sm text-gray-600">
-                            {module.course_name} • {module.module_type}
-                          </p>
+                          <div className="flex items-center space-x-2 text-sm text-gray-600">
+                            <span>{module.course_name} • {module.module_type}</span>
+                            {(module.channel || module.level) && (
+                              <div className="flex gap-1">
+                                {module.channel && (
+                                  <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">
+                                    {module.channel.name}
+                                  </span>
+                                )}
+                                {module.level && (
+                                  <span className="inline-flex items-center bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">
+                                    {module.level.name}
+                                  </span>
+                                )}
+                              </div>
+                            )}
+                          </div>
                           {module.description && (
                             <p className="text-xs text-gray-500 mt-1">
                               {module.description}
                             </p>
                           )}
-                          {module.tags && (
+                          {module.skills && (
                             <p className="text-xs text-gray-500 mt-1">
-                              Tags:{" "}
-                              {module.tags.filter((tag) => tag).join(", ") ||
+                              Skills:{" "}
+                              {module.skills.filter((skill) => skill).join(", ") ||
                                 "None"}
                             </p>
                           )}
@@ -411,6 +488,86 @@ export default function RoadmapEditor({ roadmap, onBack, onUpdate }: Props) {
           </div>
         </div>
       )}
+
+      {showChannelRecommendations && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-4xl w-full max-h-96 overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-medium">Channel-Based Recommendations</h3>
+              <button
+                onClick={() => setShowChannelRecommendations(false)}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                ✕
+              </button>
+            </div>
+
+            {Object.keys(channelRecommendations).length === 0 ? (
+              <p className="text-gray-600">No channel-based recommendations available.</p>
+            ) : (
+              <div className="space-y-6">
+                {Object.entries(channelRecommendations).map(([channelName, modules]) => (
+                  <div key={channelName} className="border rounded-lg p-4">
+                    <h4 className="font-medium mb-3 flex items-center">
+                      <span className="inline-flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm font-medium mr-2">
+                        {channelName}
+                      </span>
+                      <span className="text-sm text-gray-600">({modules.length} modules)</span>
+                    </h4>
+                    <div className="space-y-2">
+                      {modules
+                        .filter(module => !items.some(item => item.module_id === module.id))
+                        .map(module => (
+                          <div
+                            key={module.id}
+                            className="flex items-center justify-between p-3 bg-gray-50 rounded hover:bg-gray-100"
+                          >
+                            <div className="flex-1">
+                              <div className="flex items-center space-x-2">
+                                <h5 className="font-medium">{module.module_title}</h5>
+                                {module.level && (
+                                  <span className="inline-flex items-center bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">
+                                    {module.level.name}
+                                  </span>
+                                )}
+                                {module.matching_skills && module.matching_skills > 0 && (
+                                  <span className="inline-flex items-center bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium">
+                                    {module.matching_skills} skills match
+                                  </span>
+                                )}
+                              </div>
+                              <p className="text-sm text-gray-600 mt-1">
+                                {module.course_name} • {module.module_type}
+                              </p>
+                              {module.description && (
+                                <p className="text-xs text-gray-500 mt-1">
+                                  {module.description}
+                                </p>
+                              )}
+                            </div>
+                            <button
+                              onClick={() => {
+                                addModule(module.id);
+                                setShowChannelRecommendations(false);
+                              }}
+                              className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm ml-2"
+                            >
+                              Add to Roadmap
+                            </button>
+                          </div>
+                        ))
+                      }
+                      {modules.filter(module => !items.some(item => item.module_id === module.id)).length === 0 && (
+                        <p className="text-sm text-gray-500 italic">All modules from this channel are already in your roadmap.</p>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/components/roadmap/types.ts b/components/roadmap/types.ts
index fd89802..ac6026a 100644
--- a/components/roadmap/types.ts
+++ b/components/roadmap/types.ts
@@ -1,3 +1,16 @@
+export interface Channel {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+export interface Level {
+  id: number;
+  name: string;
+  description?: string;
+  sort_order?: number;
+}
+
 export interface Roadmap {
   id: number;
   name: string;
@@ -13,8 +26,10 @@ export interface RoadmapItem {
   file_url: string;
   course_name: string;
   course_id: number;
-  enrollment_status: 'enrolled' | 'not_enrolled';
-  module_status: 'not_started' | 'in_progress' | 'completed';
+  enrollment_status: "enrolled" | "not_enrolled";
+  module_status: "not_started" | "in_progress" | "completed";
+  channel?: Channel;
+  level?: Level;
 }
 
 export interface Module {
@@ -25,6 +40,8 @@ export interface Module {
   file_url: string;
   course_name: string;
   course_id: number;
-  tags: string[];
-  matching_tags?: number;
-}
\ No newline at end of file
+  skills: string[];
+  matching_skills?: number;
+  channel?: Channel;
+  level?: Level;
+}

From 09455112535099d950c68a2fc722641b79126d23 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 9 Jul 2025 18:05:06 +0800
Subject: [PATCH 10/21] Clean up code

---
 app/courses/[courseId]/layout.tsx             |   2 +-
 .../[courseId]/modules/[moduleId]/page.tsx    |   1 -
 app/courses/layout.tsx                        |   1 -
 app/courses/new/page.tsx                      |   1 -
 components/SideNav.tsx                        |   1 -
 .../settings/MemberPasswordSettings.tsx       |   7 -
 .../settings/MemberProfileSettings.tsx        |   4 -
 .../members/settings/MemberSkillsSettings.tsx | 563 ++++++++++--------
 .../organisation/courses/CourseForm.tsx       |  16 +-
 .../organisation/settings/OrgSettings.tsx     |   4 -
 components/reports/AdminBasicReport.tsx       |   1 -
 components/reports/BasicReport.tsx            |   5 -
 context/AuthContext.tsx                       |   3 +-
 lib/auth.ts                                   |   1 -
 14 files changed, 333 insertions(+), 277 deletions(-)

diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
index 5c27e2b..c1d7f8a 100644
--- a/app/courses/[courseId]/layout.tsx
+++ b/app/courses/[courseId]/layout.tsx
@@ -15,7 +15,7 @@ export default async function CourseLayout({
 
   const response = {
     id: courseId,
-    name: "Sample Course", // Replace with actual API call to fetch course details
+    name: "Sample Course",
   };
   return (
     <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
diff --git a/app/courses/[courseId]/modules/[moduleId]/page.tsx b/app/courses/[courseId]/modules/[moduleId]/page.tsx
index f948bb9..c4844b4 100644
--- a/app/courses/[courseId]/modules/[moduleId]/page.tsx
+++ b/app/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -1,4 +1,3 @@
-// app/courses/[courseId]/modules/[moduleId]/page.tsx
 import ModuleDetail from "@/components/organisation/courses/ModuleDetail";
 import { getAuthUser } from "@/lib/auth";
 
diff --git a/app/courses/layout.tsx b/app/courses/layout.tsx
index 675d669..ea2f2a1 100644
--- a/app/courses/layout.tsx
+++ b/app/courses/layout.tsx
@@ -1,4 +1,3 @@
-// app/courses/layout.tsx
 import { ReactNode } from "react";
 
 export default function CoursesLayout({ children }: { children: ReactNode }) {
diff --git a/app/courses/new/page.tsx b/app/courses/new/page.tsx
index f47e241..3ec8774 100644
--- a/app/courses/new/page.tsx
+++ b/app/courses/new/page.tsx
@@ -1,4 +1,3 @@
-// app/courses/new/page.tsx
 import { redirect } from "next/navigation";
 import { getAuthUser } from "@/lib/auth";
 import CourseForm from "@/components/organisation/courses/CourseForm";
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 6d38d41..5aeb36c 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -30,7 +30,6 @@ const menuSections = [
     heading: "Management",
     items: [
       { label: "History", href: "/history", icon: ClockIcon },
-      //   { label: "Organisations", href: "/organisations", icon: UsersIcon },
       { label: "Settings", href: "/settings", icon: CogIcon },
     ],
   },
diff --git a/components/members/settings/MemberPasswordSettings.tsx b/components/members/settings/MemberPasswordSettings.tsx
index 85f7468..7437379 100644
--- a/components/members/settings/MemberPasswordSettings.tsx
+++ b/components/members/settings/MemberPasswordSettings.tsx
@@ -14,13 +14,11 @@ export default function MemberPasswordSettings() {
     setMessage(null);
     setError(null);
 
-    // Validate password confirmation
     if (newPassword !== confirmPassword) {
       setError("New passwords do not match");
       return;
     }
 
-    // Validate password strength
     if (newPassword.length < 8) {
       setError("New password must be at least 8 characters long");
       return;
@@ -43,7 +41,6 @@ export default function MemberPasswordSettings() {
         throw new Error(errorData.message || "Failed to update password");
       }
 
-      // Clear form on success
       setCurrentPassword("");
       setNewPassword("");
       setConfirmPassword("");
@@ -72,7 +69,6 @@ export default function MemberPasswordSettings() {
         Change Password
       </h2>
       <form onSubmit={handleSubmit} className="space-y-5">
-        {/* Current Password */}
         <div>
           <label className="block text-sm font-medium text-gray-700">
             Current Password
@@ -87,7 +83,6 @@ export default function MemberPasswordSettings() {
           />
         </div>
 
-        {/* New Password */}
         <div>
           <label className="block text-sm font-medium text-gray-700">
             New Password
@@ -106,7 +101,6 @@ export default function MemberPasswordSettings() {
           </p>
         </div>
 
-        {/* Confirm New Password */}
         <div>
           <label className="block text-sm font-medium text-gray-700">
             Confirm New Password
@@ -131,7 +125,6 @@ export default function MemberPasswordSettings() {
           </div>
         )}
 
-        {/* Save / Cancel */}
         <div className="flex justify-end space-x-3 pt-6 border-t">
           <button
             type="button"
diff --git a/components/members/settings/MemberProfileSettings.tsx b/components/members/settings/MemberProfileSettings.tsx
index 6c1ecd2..c33ec13 100644
--- a/components/members/settings/MemberProfileSettings.tsx
+++ b/components/members/settings/MemberProfileSettings.tsx
@@ -126,7 +126,6 @@ export default function MemberProfileSettings() {
         Profile Settings
       </h2>
       <form onSubmit={handleSubmit} className="space-y-5">
-        {/* First Name */}
         <div>
           <label className="block text-sm font-medium text-gray-700">
             First Name
@@ -141,7 +140,6 @@ export default function MemberProfileSettings() {
           />
         </div>
 
-        {/* Last Name */}
         <div>
           <label className="block text-sm font-medium text-gray-700">
             Last Name
@@ -156,7 +154,6 @@ export default function MemberProfileSettings() {
           />
         </div>
 
-        {/* Email */}
         <div>
           <label className="block text-sm font-medium text-gray-700">
             Email Address
@@ -180,7 +177,6 @@ export default function MemberProfileSettings() {
           </div>
         )}
 
-        {/* Save / Cancel */}
         <div className="flex justify-end space-x-3 pt-6 border-t">
           <button
             type="button"
diff --git a/components/members/settings/MemberSkillsSettings.tsx b/components/members/settings/MemberSkillsSettings.tsx
index 5addfd9..f65bf25 100644
--- a/components/members/settings/MemberSkillsSettings.tsx
+++ b/components/members/settings/MemberSkillsSettings.tsx
@@ -10,7 +10,7 @@ interface UserSkill {
   id: number;
   skill_id: number;
   skill_name: string;
-  level: 'beginner' | 'intermediate' | 'advanced' | 'expert';
+  level: "beginner" | "intermediate" | "advanced" | "expert";
 }
 
 interface Channel {
@@ -44,10 +44,10 @@ interface UserLevel {
 }
 
 const SKILL_LEVELS = [
-  { value: 'beginner', label: 'Beginner' },
-  { value: 'intermediate', label: 'Intermediate' },
-  { value: 'advanced', label: 'Advanced' },
-  { value: 'expert', label: 'Expert' }
+  { value: "beginner", label: "Beginner" },
+  { value: "intermediate", label: "Intermediate" },
+  { value: "advanced", label: "Advanced" },
+  { value: "expert", label: "Expert" },
 ];
 
 export default function MemberSkillsSettings() {
@@ -55,15 +55,16 @@ export default function MemberSkillsSettings() {
   const [availableSkills, setAvailableSkills] = useState<Skill[]>([]);
   const [selectedSkill, setSelectedSkill] = useState<string>("");
   const [selectedLevel, setSelectedLevel] = useState<string>("beginner");
-  
+
   // Channel and Level preferences
   const [userChannels, setUserChannels] = useState<UserChannel[]>([]);
   const [userLevels, setUserLevels] = useState<UserLevel[]>([]);
   const [availableChannels, setAvailableChannels] = useState<Channel[]>([]);
   const [availableLevels, setAvailableLevels] = useState<Level[]>([]);
   const [selectedChannel, setSelectedChannel] = useState<string>("");
-  const [selectedPreferenceLevel, setSelectedPreferenceLevel] = useState<string>("");
-  
+  const [selectedPreferenceLevel, setSelectedPreferenceLevel] =
+    useState<string>("");
+
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [message, setMessage] = useState<string | null>(null);
@@ -111,10 +112,10 @@ export default function MemberSkillsSettings() {
 
   const handleAddSkill = async () => {
     if (!selectedSkill) return;
-    
+
     setError(null);
     setMessage(null);
-    
+
     try {
       const res = await fetch("/api/users/skills", {
         method: "POST",
@@ -125,12 +126,12 @@ export default function MemberSkillsSettings() {
           level: selectedLevel,
         }),
       });
-      
+
       if (!res.ok) {
         const errorData = await res.json();
         throw new Error(errorData.message || "Failed to add skill");
       }
-      
+
       await loadUserSkills();
       setSelectedSkill("");
       setSelectedLevel("beginner");
@@ -144,7 +145,7 @@ export default function MemberSkillsSettings() {
   const handleUpdateSkill = async (skillId: number, newLevel: string) => {
     setError(null);
     setMessage(null);
-    
+
     try {
       const res = await fetch("/api/users/skills", {
         method: "PUT",
@@ -155,12 +156,12 @@ export default function MemberSkillsSettings() {
           level: newLevel,
         }),
       });
-      
+
       if (!res.ok) {
         const errorData = await res.json();
         throw new Error(errorData.message || "Failed to update skill");
       }
-      
+
       await loadUserSkills();
       setMessage("Skill updated successfully");
     } catch (err: any) {
@@ -172,7 +173,7 @@ export default function MemberSkillsSettings() {
   const handleRemoveSkill = async (skillId: number) => {
     setError(null);
     setMessage(null);
-    
+
     try {
       const res = await fetch("/api/users/skills", {
         method: "DELETE",
@@ -182,12 +183,12 @@ export default function MemberSkillsSettings() {
           skill_id: skillId,
         }),
       });
-      
+
       if (!res.ok) {
         const errorData = await res.json();
         throw new Error(errorData.message || "Failed to remove skill");
       }
-      
+
       await loadUserSkills();
       setMessage("Skill removed successfully");
     } catch (err: any) {
@@ -198,10 +199,10 @@ export default function MemberSkillsSettings() {
 
   const handleAddChannel = async () => {
     if (!selectedChannel) return;
-    
+
     setError(null);
     setMessage(null);
-    
+
     try {
       const res = await fetch("/api/users/preferences/channels", {
         method: "POST",
@@ -211,12 +212,14 @@ export default function MemberSkillsSettings() {
           channel_id: parseInt(selectedChannel),
         }),
       });
-      
+
       if (!res.ok) {
         const errorData = await res.json();
-        throw new Error(errorData.message || "Failed to add channel preference");
+        throw new Error(
+          errorData.message || "Failed to add channel preference"
+        );
       }
-      
+
       await loadUserPreferences();
       setSelectedChannel("");
       setMessage("Channel preference added successfully");
@@ -228,10 +231,10 @@ export default function MemberSkillsSettings() {
 
   const handleAddLevel = async () => {
     if (!selectedPreferenceLevel) return;
-    
+
     setError(null);
     setMessage(null);
-    
+
     try {
       const res = await fetch("/api/users/preferences/levels", {
         method: "POST",
@@ -241,12 +244,12 @@ export default function MemberSkillsSettings() {
           level_id: parseInt(selectedPreferenceLevel),
         }),
       });
-      
+
       if (!res.ok) {
         const errorData = await res.json();
         throw new Error(errorData.message || "Failed to add level preference");
       }
-      
+
       await loadUserPreferences();
       setSelectedPreferenceLevel("");
       setMessage("Level preference added successfully");
@@ -259,7 +262,7 @@ export default function MemberSkillsSettings() {
   const handleRemoveChannel = async (channelId: number) => {
     setError(null);
     setMessage(null);
-    
+
     try {
       const res = await fetch("/api/users/preferences/channels", {
         method: "DELETE",
@@ -269,12 +272,14 @@ export default function MemberSkillsSettings() {
           channel_id: channelId,
         }),
       });
-      
+
       if (!res.ok) {
         const errorData = await res.json();
-        throw new Error(errorData.message || "Failed to remove channel preference");
+        throw new Error(
+          errorData.message || "Failed to remove channel preference"
+        );
       }
-      
+
       await loadUserPreferences();
       setMessage("Channel preference removed successfully");
     } catch (err: any) {
@@ -286,7 +291,7 @@ export default function MemberSkillsSettings() {
   const handleRemoveLevel = async (levelId: number) => {
     setError(null);
     setMessage(null);
-    
+
     try {
       const res = await fetch("/api/users/preferences/levels", {
         method: "DELETE",
@@ -296,12 +301,14 @@ export default function MemberSkillsSettings() {
           level_id: levelId,
         }),
       });
-      
+
       if (!res.ok) {
         const errorData = await res.json();
-        throw new Error(errorData.message || "Failed to remove level preference");
+        throw new Error(
+          errorData.message || "Failed to remove level preference"
+        );
       }
-      
+
       await loadUserPreferences();
       setMessage("Level preference removed successfully");
     } catch (err: any) {
@@ -311,18 +318,20 @@ export default function MemberSkillsSettings() {
   };
 
   const getAvailableSkillsForAdding = () => {
-    const userSkillIds = userSkills.map(us => us.skill_id);
-    return availableSkills.filter(skill => !userSkillIds.includes(skill.id));
+    const userSkillIds = userSkills.map((us) => us.skill_id);
+    return availableSkills.filter((skill) => !userSkillIds.includes(skill.id));
   };
 
   const getAvailableChannelsForAdding = () => {
-    const userChannelIds = userChannels.map(uc => uc.channel_id);
-    return availableChannels.filter(channel => !userChannelIds.includes(channel.id));
+    const userChannelIds = userChannels.map((uc) => uc.channel_id);
+    return availableChannels.filter(
+      (channel) => !userChannelIds.includes(channel.id)
+    );
   };
 
   const getAvailableLevelsForAdding = () => {
-    const userLevelIds = userLevels.map(ul => ul.level_id);
-    return availableLevels.filter(level => !userLevelIds.includes(level.id));
+    const userLevelIds = userLevels.map((ul) => ul.level_id);
+    return availableLevels.filter((level) => !userLevelIds.includes(level.id));
   };
 
   if (loading) {
@@ -344,234 +353,302 @@ export default function MemberSkillsSettings() {
       <h2 className="text-2xl font-semibold mb-6 text-purple-700">
         Learning Preferences
       </h2>
-      
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-      
-      {/* Skills Section */}
-      <div className="space-y-6">
-        <h3 className="text-xl font-medium text-gray-800 border-b pb-2">Skills</h3>
-        
-        {/* Add New Skill */}
-        <div className="p-4 bg-gray-50 rounded-lg">
-          <h4 className="text-lg font-medium mb-4 text-gray-700">Add New Skill</h4>
-          <div className="space-y-3">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Skill
-              </label>
-              <select
-                value={selectedSkill}
-                onChange={(e) => setSelectedSkill(e.target.value)}
-                className="w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-purple-200"
+        <div className="space-y-6">
+          <h3 className="text-xl font-medium text-gray-800 border-b pb-2">
+            Skills
+          </h3>
+
+          <div className="p-4 bg-gray-50 rounded-lg">
+            <h4 className="text-lg font-medium mb-4 text-gray-700">
+              Add New Skill
+            </h4>
+            <div className="space-y-3">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Skill
+                </label>
+                <select
+                  value={selectedSkill}
+                  onChange={(e) => setSelectedSkill(e.target.value)}
+                  className="w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-purple-200"
+                >
+                  <option value="">Select a skill...</option>
+                  {getAvailableSkillsForAdding().map((skill) => (
+                    <option key={skill.id} value={skill.id}>
+                      {skill.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Proficiency Level
+                </label>
+                <select
+                  value={selectedLevel}
+                  onChange={(e) => setSelectedLevel(e.target.value)}
+                  className="w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-purple-200"
+                >
+                  {SKILL_LEVELS.map((level) => (
+                    <option key={level.value} value={level.value}>
+                      {level.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <button
+                onClick={handleAddSkill}
+                disabled={!selectedSkill}
+                className="w-full rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-300 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                <option value="">Select a skill...</option>
-                {getAvailableSkillsForAdding().map(skill => (
-                  <option key={skill.id} value={skill.id}>
-                    {skill.name}
-                  </option>
-                ))}
-              </select>
+                Add Skill
+              </button>
             </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Proficiency Level
-              </label>
-              <select
-                value={selectedLevel}
-                onChange={(e) => setSelectedLevel(e.target.value)}
-                className="w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-purple-200"
-              >
-                {SKILL_LEVELS.map(level => (
-                  <option key={level.value} value={level.value}>
-                    {level.label}
-                  </option>
+          </div>
+
+          <div>
+            <h4 className="text-lg font-medium mb-3 text-gray-700">
+              Current Skills
+            </h4>
+            {userSkills.length === 0 ? (
+              <p className="text-gray-500 text-center py-4 text-sm">
+                No skills added yet.
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {userSkills.map((userSkill) => (
+                  <div
+                    key={userSkill.id}
+                    className="flex items-center justify-between p-3 border border-gray-200 rounded-lg"
+                  >
+                    <div className="flex-1">
+                      <span className="font-medium text-gray-900 text-sm">
+                        {userSkill.skill_name}
+                      </span>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <select
+                        value={userSkill.level}
+                        onChange={(e) =>
+                          handleUpdateSkill(userSkill.skill_id, e.target.value)
+                        }
+                        className="rounded-md border border-gray-300 p-1 text-xs focus:border-purple-700 focus:ring focus:ring-purple-200"
+                      >
+                        {SKILL_LEVELS.map((level) => (
+                          <option key={level.value} value={level.value}>
+                            {level.label}
+                          </option>
+                        ))}
+                      </select>
+                      <button
+                        onClick={() => handleRemoveSkill(userSkill.skill_id)}
+                        className="text-red-600 hover:text-red-800 focus:outline-none"
+                      >
+                        <svg
+                          className="h-4 w-4"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
                 ))}
-              </select>
-            </div>
-            <button
-              onClick={handleAddSkill}
-              disabled={!selectedSkill}
-              className="w-full rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-300 disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              Add Skill
-            </button>
+              </div>
+            )}
           </div>
         </div>
 
-        {/* Current Skills */}
-        <div>
-          <h4 className="text-lg font-medium mb-3 text-gray-700">Current Skills</h4>
-          {userSkills.length === 0 ? (
-            <p className="text-gray-500 text-center py-4 text-sm">No skills added yet.</p>
-          ) : (
-            <div className="space-y-2">
-              {userSkills.map(userSkill => (
-                <div key={userSkill.id} className="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
-                  <div className="flex-1">
-                    <span className="font-medium text-gray-900 text-sm">{userSkill.skill_name}</span>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <select
-                      value={userSkill.level}
-                      onChange={(e) => handleUpdateSkill(userSkill.skill_id, e.target.value)}
-                      className="rounded-md border border-gray-300 p-1 text-xs focus:border-purple-700 focus:ring focus:ring-purple-200"
-                    >
-                      {SKILL_LEVELS.map(level => (
-                        <option key={level.value} value={level.value}>
-                          {level.label}
-                        </option>
-                      ))}
-                    </select>
+        <div className="space-y-6">
+          <h3 className="text-xl font-medium text-gray-800 border-b pb-2">
+            Preferred Channels
+          </h3>
+
+          <div className="p-4 bg-blue-50 rounded-lg">
+            <h4 className="text-lg font-medium mb-4 text-gray-700">
+              Add Channel Preference
+            </h4>
+            <div className="space-y-3">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Channel
+                </label>
+                <select
+                  value={selectedChannel}
+                  onChange={(e) => setSelectedChannel(e.target.value)}
+                  className="w-full rounded-md border border-gray-300 p-2 focus:border-blue-500 focus:ring focus:ring-blue-200"
+                >
+                  <option value="">Select a channel...</option>
+                  {getAvailableChannelsForAdding().map((channel) => (
+                    <option key={channel.id} value={channel.id}>
+                      {channel.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <button
+                onClick={handleAddChannel}
+                disabled={!selectedChannel}
+                className="w-full rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Add Channel
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <h4 className="text-lg font-medium mb-3 text-gray-700">
+              Current Preferences
+            </h4>
+            {userChannels.length === 0 ? (
+              <p className="text-gray-500 text-center py-4 text-sm">
+                No channel preferences set.
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {userChannels.map((userChannel) => (
+                  <div
+                    key={userChannel.id}
+                    className="flex items-center justify-between p-3 border border-gray-200 rounded-lg bg-blue-50"
+                  >
+                    <div className="flex-1">
+                      <span className="font-medium text-gray-900 text-sm">
+                        {userChannel.channel_name}
+                      </span>
+                      {userChannel.channel_description && (
+                        <p className="text-xs text-gray-600 mt-1">
+                          {userChannel.channel_description}
+                        </p>
+                      )}
+                    </div>
                     <button
-                      onClick={() => handleRemoveSkill(userSkill.skill_id)}
+                      onClick={() =>
+                        handleRemoveChannel(userChannel.channel_id)
+                      }
                       className="text-red-600 hover:text-red-800 focus:outline-none"
                     >
-                      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      <svg
+                        className="h-4 w-4"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                        />
                       </svg>
                     </button>
                   </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Channels Section */}
-      <div className="space-y-6">
-        <h3 className="text-xl font-medium text-gray-800 border-b pb-2">Preferred Channels</h3>
-        
-        {/* Add New Channel */}
-        <div className="p-4 bg-blue-50 rounded-lg">
-          <h4 className="text-lg font-medium mb-4 text-gray-700">Add Channel Preference</h4>
-          <div className="space-y-3">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Channel
-              </label>
-              <select
-                value={selectedChannel}
-                onChange={(e) => setSelectedChannel(e.target.value)}
-                className="w-full rounded-md border border-gray-300 p-2 focus:border-blue-500 focus:ring focus:ring-blue-200"
-              >
-                <option value="">Select a channel...</option>
-                {getAvailableChannelsForAdding().map(channel => (
-                  <option key={channel.id} value={channel.id}>
-                    {channel.name}
-                  </option>
                 ))}
-              </select>
-            </div>
-            <button
-              onClick={handleAddChannel}
-              disabled={!selectedChannel}
-              className="w-full rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              Add Channel
-            </button>
+              </div>
+            )}
           </div>
         </div>
 
-        {/* Current Channels */}
-        <div>
-          <h4 className="text-lg font-medium mb-3 text-gray-700">Current Preferences</h4>
-          {userChannels.length === 0 ? (
-            <p className="text-gray-500 text-center py-4 text-sm">No channel preferences set.</p>
-          ) : (
-            <div className="space-y-2">
-              {userChannels.map(userChannel => (
-                <div key={userChannel.id} className="flex items-center justify-between p-3 border border-gray-200 rounded-lg bg-blue-50">
-                  <div className="flex-1">
-                    <span className="font-medium text-gray-900 text-sm">{userChannel.channel_name}</span>
-                    {userChannel.channel_description && (
-                      <p className="text-xs text-gray-600 mt-1">{userChannel.channel_description}</p>
-                    )}
-                  </div>
-                  <button
-                    onClick={() => handleRemoveChannel(userChannel.channel_id)}
-                    className="text-red-600 hover:text-red-800 focus:outline-none"
-                  >
-                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                    </svg>
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
+        <div className="space-y-6">
+          <h3 className="text-xl font-medium text-gray-800 border-b pb-2">
+            Preferred Levels
+          </h3>
 
-      {/* Levels Section */}
-      <div className="space-y-6">
-        <h3 className="text-xl font-medium text-gray-800 border-b pb-2">Preferred Levels</h3>
-        
-        {/* Add New Level */}
-        <div className="p-4 bg-green-50 rounded-lg">
-          <h4 className="text-lg font-medium mb-4 text-gray-700">Add Level Preference</h4>
-          <div className="space-y-3">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Difficulty Level
-              </label>
-              <select
-                value={selectedPreferenceLevel}
-                onChange={(e) => setSelectedPreferenceLevel(e.target.value)}
-                className="w-full rounded-md border border-gray-300 p-2 focus:border-green-500 focus:ring focus:ring-green-200"
+          <div className="p-4 bg-green-50 rounded-lg">
+            <h4 className="text-lg font-medium mb-4 text-gray-700">
+              Add Level Preference
+            </h4>
+            <div className="space-y-3">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Difficulty Level
+                </label>
+                <select
+                  value={selectedPreferenceLevel}
+                  onChange={(e) => setSelectedPreferenceLevel(e.target.value)}
+                  className="w-full rounded-md border border-gray-300 p-2 focus:border-green-500 focus:ring focus:ring-green-200"
+                >
+                  <option value="">Select a level...</option>
+                  {getAvailableLevelsForAdding().map((level) => (
+                    <option key={level.id} value={level.id}>
+                      {level.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <button
+                onClick={handleAddLevel}
+                disabled={!selectedPreferenceLevel}
+                className="w-full rounded bg-green-600 px-4 py-2 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-300 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                <option value="">Select a level...</option>
-                {getAvailableLevelsForAdding().map(level => (
-                  <option key={level.id} value={level.id}>
-                    {level.name}
-                  </option>
-                ))}
-              </select>
+                Add Level
+              </button>
             </div>
-            <button
-              onClick={handleAddLevel}
-              disabled={!selectedPreferenceLevel}
-              className="w-full rounded bg-green-600 px-4 py-2 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-300 disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              Add Level
-            </button>
           </div>
-        </div>
 
-        {/* Current Levels */}
-        <div>
-          <h4 className="text-lg font-medium mb-3 text-gray-700">Current Preferences</h4>
-          {userLevels.length === 0 ? (
-            <p className="text-gray-500 text-center py-4 text-sm">No level preferences set.</p>
-          ) : (
-            <div className="space-y-2">
-              {userLevels.map(userLevel => (
-                <div key={userLevel.id} className="flex items-center justify-between p-3 border border-gray-200 rounded-lg bg-green-50">
-                  <div className="flex-1">
-                    <span className="font-medium text-gray-900 text-sm">{userLevel.level_name}</span>
-                    {userLevel.level_description && (
-                      <p className="text-xs text-gray-600 mt-1">{userLevel.level_description}</p>
-                    )}
-                  </div>
-                  <button
-                    onClick={() => handleRemoveLevel(userLevel.level_id)}
-                    className="text-red-600 hover:text-red-800 focus:outline-none"
+          <div>
+            <h4 className="text-lg font-medium mb-3 text-gray-700">
+              Current Preferences
+            </h4>
+            {userLevels.length === 0 ? (
+              <p className="text-gray-500 text-center py-4 text-sm">
+                No level preferences set.
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {userLevels.map((userLevel) => (
+                  <div
+                    key={userLevel.id}
+                    className="flex items-center justify-between p-3 border border-gray-200 rounded-lg bg-green-50"
                   >
-                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                    </svg>
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
+                    <div className="flex-1">
+                      <span className="font-medium text-gray-900 text-sm">
+                        {userLevel.level_name}
+                      </span>
+                      {userLevel.level_description && (
+                        <p className="text-xs text-gray-600 mt-1">
+                          {userLevel.level_description}
+                        </p>
+                      )}
+                    </div>
+                    <button
+                      onClick={() => handleRemoveLevel(userLevel.level_id)}
+                      className="text-red-600 hover:text-red-800 focus:outline-none"
+                    >
+                      <svg
+                        className="h-4 w-4"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
       </div>
-      
-      </div>
 
       {error && (
-        <div className="text-red-600 text-sm mt-6 text-center bg-red-50 p-3 rounded">{error}</div>
+        <div className="text-red-600 text-sm mt-6 text-center bg-red-50 p-3 rounded">
+          {error}
+        </div>
       )}
       {message && (
         <div className="text-green-600 text-sm mt-6 text-center bg-green-50 p-3 rounded">
@@ -580,4 +657,4 @@ export default function MemberSkillsSettings() {
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/organisation/courses/CourseForm.tsx b/components/organisation/courses/CourseForm.tsx
index 21413b9..42ebfdb 100644
--- a/components/organisation/courses/CourseForm.tsx
+++ b/components/organisation/courses/CourseForm.tsx
@@ -1,4 +1,3 @@
-// components/organisation/courses/CourseForm.tsx
 "use client";
 
 import { useState, useEffect } from "react";
@@ -10,7 +9,12 @@ export interface Course {
   name: string;
   description?: string;
   channel?: { id: number; name: string; description?: string };
-  level?: { id: number; name: string; description?: string; sort_order?: number };
+  level?: {
+    id: number;
+    name: string;
+    description?: string;
+    sort_order?: number;
+  };
 }
 interface Channel {
   id: number;
@@ -50,7 +54,9 @@ export default function CourseForm({ mode, courseId }: Props) {
       .then((r) => r.json())
       .then((channels: Channel[]) => {
         setAllChannels(channels);
-        setChannelOptions(channels.map((c) => ({ value: c.id, label: c.name })));
+        setChannelOptions(
+          channels.map((c) => ({ value: c.id, label: c.name }))
+        );
       })
       .catch(console.error);
 
@@ -99,12 +105,12 @@ export default function CourseForm({ mode, courseId }: Props) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!selectedChannel || !selectedLevel) {
       alert("Please select both channel and level");
       return;
     }
-    
+
     const payload = {
       courseName: name,
       description,
diff --git a/components/organisation/settings/OrgSettings.tsx b/components/organisation/settings/OrgSettings.tsx
index 7127072..6079f43 100644
--- a/components/organisation/settings/OrgSettings.tsx
+++ b/components/organisation/settings/OrgSettings.tsx
@@ -100,7 +100,6 @@ export default function OrgSettings() {
           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
@@ -115,7 +114,6 @@ export default function OrgSettings() {
             />
           </div>
 
-          {/* Description */}
           <div>
             <label className="block text-sm font-medium text-gray-700">
               Description
@@ -128,7 +126,6 @@ export default function OrgSettings() {
             />
           </div>
 
-          {/* AI Toggle */}
           <div className="flex items-center">
             <input
               id="aiEnabled"
@@ -174,7 +171,6 @@ export default function OrgSettings() {
             </div>
           )}
 
-          {/* Save / Cancel */}
           <div className="flex justify-end space-x-3 pt-6 border-t">
             <button
               type="button"
diff --git a/components/reports/AdminBasicReport.tsx b/components/reports/AdminBasicReport.tsx
index 7767bf3..85715c1 100644
--- a/components/reports/AdminBasicReport.tsx
+++ b/components/reports/AdminBasicReport.tsx
@@ -1,4 +1,3 @@
-// components/reports/AdminBasicReport.tsx
 "use client";
 
 import { useState, useEffect } from "react";
diff --git a/components/reports/BasicReport.tsx b/components/reports/BasicReport.tsx
index 222f7c6..4a01521 100644
--- a/components/reports/BasicReport.tsx
+++ b/components/reports/BasicReport.tsx
@@ -74,7 +74,6 @@ export default function BasicReport() {
 
   return (
     <div className="space-y-8">
-      {/* Courses Done */}
       <section>
         <h2 className="text-2xl font-semibold ">Courses Completed</h2>
         {data.coursesDone.length ? (
@@ -109,13 +108,11 @@ export default function BasicReport() {
         )}
       </section>
 
-      {/* Modules Done */}
       <section>
         <h2 className="text-2xl font-semibold">Modules Completed</h2>
         <p className="text-lg">{data.modulesDone}</p>
       </section>
 
-      {/* Quiz Results */}
       <section>
         <h2 className="text-2xl font-semibold">Quiz Results</h2>
         {data.quizResults.length ? (
@@ -146,7 +143,6 @@ export default function BasicReport() {
         )}
       </section>
 
-      {/* Strengths */}
       <section>
         <h2 className="text-2xl font-semibold">Strengths</h2>
         {data.strengths.length ? (
@@ -162,7 +158,6 @@ export default function BasicReport() {
         )}
       </section>
 
-      {/* Weaknesses */}
       <section>
         <h2 className="text-2xl font-semibold">Areas to Improve</h2>
         {data.weaknesses.length ? (
diff --git a/context/AuthContext.tsx b/context/AuthContext.tsx
index 963ef66..3efe6a7 100644
--- a/context/AuthContext.tsx
+++ b/context/AuthContext.tsx
@@ -1,4 +1,3 @@
-// context/AuthContext.tsx
 "use client";
 
 import {
@@ -93,5 +92,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; // now includes { user, setUser, logout, loading }
+  return ctx;
 }
diff --git a/lib/auth.ts b/lib/auth.ts
index d71c69c..cadcde0 100644
--- a/lib/auth.ts
+++ b/lib/auth.ts
@@ -1,4 +1,3 @@
-// lib/auth.ts
 import { cookies } from "next/headers";
 
 export async function getAuthUser() {

From 2328bdc71641bce3450bc8e631da387b74c595c2 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 13:23:38 +0800
Subject: [PATCH 11/21] add frontend interface for history

---
 app/history/page.tsx                    | 16 ++++---
 components/history/HistoryComponent.tsx | 60 +++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 components/history/HistoryComponent.tsx

diff --git a/app/history/page.tsx b/app/history/page.tsx
index 093fd4e..420c6e5 100644
--- a/app/history/page.tsx
+++ b/app/history/page.tsx
@@ -1,8 +1,12 @@
+"use client";
+
+import { useAuth } from "@/context/AuthContext";
+import HistoryComponent from "@/components/history/HistoryComponent";
 export default function HistoryPage() {
-  return (
-    <div>
-      <h1>History</h1>
-      <p>History page content goes here.</p>
-    </div>
-  );
+  const { user } = useAuth();
+
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+  return <HistoryComponent />;
 }
diff --git a/components/history/HistoryComponent.tsx b/components/history/HistoryComponent.tsx
new file mode 100644
index 0000000..52e84b4
--- /dev/null
+++ b/components/history/HistoryComponent.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface ActivityLog {
+  id: number;
+  action: string;
+  metadata: Record<string, any>;
+  created_at: string;
+}
+
+export default function HistoryComponent() {
+  const [logs, setLogs] = useState<ActivityLog[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/activity", { credentials: "include" })
+      .then((res) => {
+        if (!res.ok) throw new Error(`Status ${res.status}`);
+        return res.json();
+      })
+      .then((json: { logs: ActivityLog[] }) => {
+        setLogs(json.logs);
+      })
+      .catch((err) => {
+        console.error(err);
+        setError("Failed to load history.");
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return <p>Loading history…</p>;
+  if (error) return <p className="text-red-600">{error}</p>;
+  if (!logs.length) return <p>No history available yet.</p>;
+
+  return (
+    <div className="space-y-4">
+      {logs.map((log) => (
+        <div key={log.id} className="p-4 bg-white rounded-lg shadow-sm border">
+          <div className="flex justify-between items-start">
+            <div>
+              <h3 className="font-medium text-lg text-purple-700">
+                {log.action.replace(/_/g, " ")}
+              </h3>
+              {Object.keys(log.metadata).length > 0 && (
+                <pre className="mt-1 text-sm text-gray-600 whitespace-pre-wrap">
+                  {JSON.stringify(log.metadata, null, 2)}
+                </pre>
+              )}
+            </div>
+            <span className="text-xs text-gray-500">
+              {new Date(log.created_at).toLocaleString()}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

From 4500eb8b4d0954462b5919ff017b97b5673c6aa6 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 13:25:12 +0800
Subject: [PATCH 12/21] Add history for admins as well

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

diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 5aeb36c..9ede2c1 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -8,7 +8,6 @@ import {
   HomeIcon,
   BookOpenIcon,
   ChartBarIcon,
-  UsersIcon,
   MapIcon,
   ClockIcon,
   CogIcon,
diff --git a/components/organisation/OrgNav.tsx b/components/organisation/OrgNav.tsx
index bc14a2a..7ae3ae6 100644
--- a/components/organisation/OrgNav.tsx
+++ b/components/organisation/OrgNav.tsx
@@ -8,6 +8,7 @@ import {
   HomeIcon,
   BookOpenIcon,
   ChartBarIcon,
+  ClockIcon,
   UsersIcon,
   CogIcon,
 } from "@heroicons/react/24/outline";
@@ -28,6 +29,7 @@ const menuSections = [
     items: [
       { label: "My Organisation", href: "/organisation", icon: UsersIcon },
       { label: "Users", href: "/users", icon: UsersIcon },
+      { label: "History", href: "/history", icon: ClockIcon },
       { label: "Settings", href: "/settings", icon: CogIcon },
     ],
   },

From f463343760504d39254bbdfce191ceba88f849ce Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 13:38:58 +0800
Subject: [PATCH 13/21] Update history timeline ui

---
 components/history/HistoryComponent.tsx | 63 +++++++++++++++----------
 1 file changed, 38 insertions(+), 25 deletions(-)

diff --git a/components/history/HistoryComponent.tsx b/components/history/HistoryComponent.tsx
index 52e84b4..0f7846c 100644
--- a/components/history/HistoryComponent.tsx
+++ b/components/history/HistoryComponent.tsx
@@ -15,14 +15,12 @@ export default function HistoryComponent() {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    fetch("/api/activity", { credentials: "include" })
+    fetch("/api/history", { credentials: "include" })
       .then((res) => {
         if (!res.ok) throw new Error(`Status ${res.status}`);
         return res.json();
       })
-      .then((json: { logs: ActivityLog[] }) => {
-        setLogs(json.logs);
-      })
+      .then(({ logs }: { logs: ActivityLog[] }) => setLogs(logs))
       .catch((err) => {
         console.error(err);
         setError("Failed to load history.");
@@ -30,31 +28,46 @@ export default function HistoryComponent() {
       .finally(() => setLoading(false));
   }, []);
 
-  if (loading) return <p>Loading history…</p>;
-  if (error) return <p className="text-red-600">{error}</p>;
-  if (!logs.length) return <p>No history available yet.</p>;
+  if (loading) return <p className="text-center py-8">Loading history…</p>;
+  if (error) return <p className="text-center text-red-600 py-8">{error}</p>;
+  if (!logs.length) return <p className="text-center py-8">No history yet.</p>;
+
+  // sort newest first
+  const sorted = [...logs].sort(
+    (a, b) =>
+      new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+  );
 
   return (
-    <div className="space-y-4">
-      {logs.map((log) => (
-        <div key={log.id} className="p-4 bg-white rounded-lg shadow-sm border">
-          <div className="flex justify-between items-start">
-            <div>
-              <h3 className="font-medium text-lg text-purple-700">
-                {log.action.replace(/_/g, " ")}
+    <ul className="relative border-l-2 border-gray-200 dark:border-gray-700">
+      {sorted.map((log) => {
+        const title = log.action.replace(/_/g, " ");
+        const time = new Date(log.created_at).toLocaleString();
+
+        return (
+          <li key={log.id} className="mb-8 ml-6">
+            <span className="absolute flex items-center justify-center w-4 h-4 bg-purple-600 rounded-full -left-2 ring-4 ring-white dark:ring-gray-900"></span>
+
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-medium text-purple-700 capitalize">
+                {title}
               </h3>
-              {Object.keys(log.metadata).length > 0 && (
-                <pre className="mt-1 text-sm text-gray-600 whitespace-pre-wrap">
+              <time className="text-xs text-gray-400">{time}</time>
+            </div>
+
+            {Object.keys(log.metadata).length > 0 && (
+              <details className="mt-1 text-sm text-gray-600">
+                <summary className="cursor-pointer hover:text-purple-600">
+                  View details
+                </summary>
+                <pre className="mt-1 bg-gray-50 p-2 rounded text-xs overflow-auto">
                   {JSON.stringify(log.metadata, null, 2)}
                 </pre>
-              )}
-            </div>
-            <span className="text-xs text-gray-500">
-              {new Date(log.created_at).toLocaleString()}
-            </span>
-          </div>
-        </div>
-      ))}
-    </div>
+              </details>
+            )}
+          </li>
+        );
+      })}
+    </ul>
   );
 }

From bc113e4de87c80c50d7f10f9cf08e6454520ba99 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 13:50:32 +0800
Subject: [PATCH 14/21] Fix endpoint

---
 components/history/HistoryComponent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/history/HistoryComponent.tsx b/components/history/HistoryComponent.tsx
index 0f7846c..72b399f 100644
--- a/components/history/HistoryComponent.tsx
+++ b/components/history/HistoryComponent.tsx
@@ -15,7 +15,7 @@ export default function HistoryComponent() {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    fetch("/api/history", { credentials: "include" })
+    fetch("/api/activity", { credentials: "include" })
       .then((res) => {
         if (!res.ok) throw new Error(`Status ${res.status}`);
         return res.json();

From acd41d25f25fe67e655131d842b584eb3b56db2a Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 13:52:18 +0800
Subject: [PATCH 15/21] Update history timeline ui

---
 components/history/HistoryComponent.tsx | 33 ++++++++++++++++---------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/components/history/HistoryComponent.tsx b/components/history/HistoryComponent.tsx
index 72b399f..fae2ccd 100644
--- a/components/history/HistoryComponent.tsx
+++ b/components/history/HistoryComponent.tsx
@@ -38,20 +38,24 @@ export default function HistoryComponent() {
       new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
   );
 
+  const formatKey = (key: string) =>
+    key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+
   return (
-    <ul className="relative border-l-2 border-gray-200 dark:border-gray-700">
-      {sorted.map((log) => {
-        const title = log.action.replace(/_/g, " ");
+    <ol className="relative border-l-2 border-gray-200 dark:border-gray-700">
+      {sorted.map((log, idx) => {
+        const title = log.action
+          .replace(/_/g, " ")
+          .replace(/\b\w/g, (c) => c.toUpperCase());
         const time = new Date(log.created_at).toLocaleString();
 
         return (
           <li key={log.id} className="mb-8 ml-6">
-            <span className="absolute flex items-center justify-center w-4 h-4 bg-purple-600 rounded-full -left-2 ring-4 ring-white dark:ring-gray-900"></span>
+            <span className="absolute flex items-center justify-center w-4 h-4 bg-purple-600 rounded-full -left-2 ring-4 ring-white dark:ring-gray-900" />
 
-            <div className="flex items-center justify-between">
-              <h3 className="text-lg font-medium text-purple-700 capitalize">
-                {title}
-              </h3>
+            <div className="flex items-baseline space-x-2">
+              <span className="font-bold">{idx + 1}.</span>
+              <h3 className="text-lg font-medium text-purple-700">{title}</h3>
               <time className="text-xs text-gray-400">{time}</time>
             </div>
 
@@ -60,14 +64,19 @@ export default function HistoryComponent() {
                 <summary className="cursor-pointer hover:text-purple-600">
                   View details
                 </summary>
-                <pre className="mt-1 bg-gray-50 p-2 rounded text-xs overflow-auto">
-                  {JSON.stringify(log.metadata, null, 2)}
-                </pre>
+                <ul className="mt-1 list-disc list-inside">
+                  {Object.entries(log.metadata).map(([key, val]) => (
+                    <li key={key}>
+                      <span className="font-medium">{formatKey(key)}:</span>{" "}
+                      {String(val)}
+                    </li>
+                  ))}
+                </ul>
               </details>
             )}
           </li>
         );
       })}
-    </ul>
+    </ol>
   );
 }

From 7b73fe9a31dd4cddc7cb5533397636f15c68562f Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 14:12:28 +0800
Subject: [PATCH 16/21] Add title and description for history page

---
 app/history/page.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/history/page.tsx b/app/history/page.tsx
index 420c6e5..b9e7649 100644
--- a/app/history/page.tsx
+++ b/app/history/page.tsx
@@ -8,5 +8,15 @@ export default function HistoryPage() {
   if (!user || !user.hasCompletedOnboarding) {
     return null;
   }
-  return <HistoryComponent />;
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-6 text-purple-600">
+        Activity History
+      </h1>
+      <p className="mb-4 text-gray-600">
+        View your recent activity and changes made in the system.
+      </p>
+      <HistoryComponent />
+    </div>
+  );
 }

From 2379f4e4ae239e9a59aa7eedf8285fea3484273b Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 17:21:01 +0800
Subject: [PATCH 17/21] Create admin dashboard

---
 app/dashboard/page.tsx                  |  19 +-
 components/dashboard/AdminDashboard.tsx | 156 ++++++++++
 package-lock.json                       | 389 +++++++++++++++++++++++-
 package.json                            |   3 +-
 4 files changed, 560 insertions(+), 7 deletions(-)
 create mode 100644 components/dashboard/AdminDashboard.tsx

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index da6092a..f47d987 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,4 +1,6 @@
 import { getAuthUser } from "@/lib/auth";
+import UserDashboard from "@/components/dashboard/UserDashboard";
+import AdminDashboard from "@/components/dashboard/AdminDashboard";
 
 export default async function DashboardPage() {
   const user = await getAuthUser();
@@ -6,12 +8,19 @@ export default async function DashboardPage() {
     return null;
   }
 
+  const isAdmin = user?.organisation?.role === "admin";
+  if (isAdmin) {
+    return (
+      <div className="p-8">
+        <h1 className="text-3xl font-bold mb-4 text-purple-600">Dashboard</h1>
+        <AdminDashboard />
+      </div>
+    );
+  }
   return (
-    <div>
-      <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 className="p-8">
+      <h1 className="text-3xl font-bold mb-4 text-purple-600">Dashboard</h1>
+      <UserDashboard />
     </div>
   );
 }
diff --git a/components/dashboard/AdminDashboard.tsx b/components/dashboard/AdminDashboard.tsx
new file mode 100644
index 0000000..35a8bbe
--- /dev/null
+++ b/components/dashboard/AdminDashboard.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+interface Employee {
+  id: number;
+  firstname: string;
+  lastname: string;
+  totalCourses: number;
+  completedCourses: number;
+}
+
+interface Enrollment {
+  courseName: string;
+  enrolledCount: number;
+}
+
+interface AdminDashboardData {
+  welcome: string;
+  employees: Employee[];
+  enrollments: Enrollment[];
+}
+
+export default function AdminDashboard() {
+  const [data, setData] = useState<AdminDashboardData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/dashboard/admin-dashboard", { credentials: "include" })
+      .then(async (res) => {
+        if (!res.ok) throw new Error("Failed to load dashboard");
+        const json = await res.json();
+        const enrollments = (json.enrollments || []).map((e: any) => ({
+          courseName: e.coursename, // map to camelCase
+          enrolledCount: Number(e.enrolledcount), // make sure it's a number
+        }));
+        const employees = (json.employees || []).map((emp: any) => ({
+          id: emp.id,
+          firstname: emp.firstname,
+          lastname: emp.lastname,
+          totalCourses: Number(emp.totalCourses),
+          completedCourses: Number(emp.completedCourses),
+        }));
+        setData({ ...json, employees, enrollments });
+      })
+      .catch((err) => setError(err.message || "Unknown error"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600" />
+      </div>
+    );
+  }
+  if (error || !data) {
+    return <div className="text-red-600 text-center py-10">{error}</div>;
+  }
+
+  // Calculate quick stats
+  const totalEmployees = data.employees.length;
+  const totalCourses = data.enrollments.length;
+  const totalEnrollments = data.enrollments.reduce(
+    (a, e) => a + e.enrolledCount,
+    0
+  );
+  const totalCompleted = data.employees.reduce(
+    (a, e) => a + e.completedCourses,
+    0
+  );
+
+  return (
+    <div className="max-w-5xl mx-auto p-6 space-y-10">
+      <h1 className="text-3xl font-bold text-gray-800 mb-6">{data.welcome}</h1>
+
+      {/* Quick Stat Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+        <DashboardStat label="Employees" value={totalEmployees} />
+        <DashboardStat label="Courses" value={totalCourses} />
+        <DashboardStat label="Enrollments" value={totalEnrollments} />
+        <DashboardStat label="Courses Completed" value={totalCompleted} />
+      </div>
+
+      {/* Enrollment Chart Card */}
+      <div className="bg-white rounded-xl shadow-lg p-6">
+        <h2 className="text-xl font-semibold mb-4">Course Enrollments</h2>
+        <div style={{ width: "100%", height: 350 }}>
+          <ResponsiveContainer>
+            <BarChart
+              data={data.enrollments}
+              margin={{ top: 10, right: 30, left: 0, bottom: 10 }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="courseName" />
+              <YAxis allowDecimals={false} />
+              <Tooltip />
+              <Bar
+                dataKey="enrolledCount"
+                fill="#a21caf"
+                radius={[6, 6, 0, 0]}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Employee Table Card */}
+      <div className="bg-white rounded-xl shadow-lg p-6">
+        <h2 className="text-xl font-semibold mb-4">Employee Course Progress</h2>
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-left">
+            <thead>
+              <tr className="border-b">
+                <th className="py-2 font-medium">Name</th>
+                <th className="py-2 font-medium">Enrolled</th>
+                <th className="py-2 font-medium">Completed</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.employees.map((emp) => (
+                <tr key={emp.id} className="border-b hover:bg-gray-50">
+                  <td className="py-2">
+                    {emp.firstname} {emp.lastname}
+                  </td>
+                  <td className="py-2">{emp.totalCourses}</td>
+                  <td className="py-2">{emp.completedCourses}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Quick Stat Card component
+function DashboardStat({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="bg-purple-50 rounded-xl p-5 text-center shadow border">
+      <div className="text-2xl font-bold text-purple-700">{value}</div>
+      <div className="text-sm text-gray-600">{label}</div>
+    </div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 1770fc3..cb53b12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "next": "15.3.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-select": "^5.10.1"
+        "react-select": "^5.10.1",
+        "recharts": "^3.1.0"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -1224,6 +1225,32 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
+      "integrity": "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1238,6 +1265,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -1540,6 +1579,69 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -1605,6 +1707,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.32.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.32.1.tgz",
@@ -2545,6 +2653,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -2649,6 +2766,127 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -2727,6 +2965,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3028,6 +3272,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.39.7",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.7.tgz",
+      "integrity": "sha512-ek/wWryKouBrZIjkwW2BFf91CWOIMvoy2AE5YYgUrfWsJQM2Su1LoLtrw8uusEpN9RfqLlV/0FVNjT0WMv8Bxw==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3466,6 +3720,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3905,6 +4165,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3946,6 +4216,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -5426,6 +5705,29 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-select": {
       "version": "5.10.1",
       "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.10.1.tgz",
@@ -5463,6 +5765,48 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.1.0.tgz",
+      "integrity": "sha512-NqAqQcGBmLrfDs2mHX/bz8jJCQtG2FeXfE0GqpZmIuXIjkpIwj8sd9ad0WyvKiBKPd8ZgNG0hL85c8sFDwascw==",
+      "license": "MIT",
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5507,6 +5851,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -6112,6 +6462,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
@@ -6390,6 +6746,37 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index ade92c3..6be5bb1 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "next": "15.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-select": "^5.10.1"
+    "react-select": "^5.10.1",
+    "recharts": "^3.1.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

From 5ebfa20a88265d6500351cc00fb98db643655a03 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 17:21:41 +0800
Subject: [PATCH 18/21] Clean code

---
 components/dashboard/AdminDashboard.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/dashboard/AdminDashboard.tsx b/components/dashboard/AdminDashboard.tsx
index 35a8bbe..23b9c2a 100644
--- a/components/dashboard/AdminDashboard.tsx
+++ b/components/dashboard/AdminDashboard.tsx
@@ -41,8 +41,8 @@ export default function AdminDashboard() {
         if (!res.ok) throw new Error("Failed to load dashboard");
         const json = await res.json();
         const enrollments = (json.enrollments || []).map((e: any) => ({
-          courseName: e.coursename, // map to camelCase
-          enrolledCount: Number(e.enrolledcount), // make sure it's a number
+          courseName: e.coursename,
+          enrolledCount: Number(e.enrolledcount),
         }));
         const employees = (json.employees || []).map((emp: any) => ({
           id: emp.id,
@@ -84,7 +84,6 @@ export default function AdminDashboard() {
     <div className="max-w-5xl mx-auto p-6 space-y-10">
       <h1 className="text-3xl font-bold text-gray-800 mb-6">{data.welcome}</h1>
 
-      {/* Quick Stat Cards */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
         <DashboardStat label="Employees" value={totalEmployees} />
         <DashboardStat label="Courses" value={totalCourses} />
@@ -92,7 +91,6 @@ export default function AdminDashboard() {
         <DashboardStat label="Courses Completed" value={totalCompleted} />
       </div>
 
-      {/* Enrollment Chart Card */}
       <div className="bg-white rounded-xl shadow-lg p-6">
         <h2 className="text-xl font-semibold mb-4">Course Enrollments</h2>
         <div style={{ width: "100%", height: 350 }}>
@@ -115,7 +113,6 @@ export default function AdminDashboard() {
         </div>
       </div>
 
-      {/* Employee Table Card */}
       <div className="bg-white rounded-xl shadow-lg p-6">
         <h2 className="text-xl font-semibold mb-4">Employee Course Progress</h2>
         <div className="overflow-x-auto">
@@ -145,7 +142,6 @@ export default function AdminDashboard() {
   );
 }
 
-// Quick Stat Card component
 function DashboardStat({ label, value }: { label: string; value: number }) {
   return (
     <div className="bg-purple-50 rounded-xl p-5 text-center shadow border">

From ce8b89a2c026a051cb609eaa9933830733cce3ba Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 17:41:02 +0800
Subject: [PATCH 19/21] Basic user dashboard

---
 components/dashboard/UserDashboard.tsx | 153 +++++++++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 components/dashboard/UserDashboard.tsx

diff --git a/components/dashboard/UserDashboard.tsx b/components/dashboard/UserDashboard.tsx
new file mode 100644
index 0000000..0c337cd
--- /dev/null
+++ b/components/dashboard/UserDashboard.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+
+interface Course {
+  id: number;
+  name: string;
+}
+
+interface Module {
+  id: number;
+  title: string;
+}
+
+interface DashboardData {
+  welcome: string;
+  currentCourse: Course | null;
+  currentModule: Module | null;
+  nextToLearn: Module[];
+  toRevise: Module[];
+  summaryStats: {
+    completed: number;
+    total: number;
+  };
+}
+
+export default function UserDashboard() {
+  const [data, setData] = useState<DashboardData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/dashboard/user-dashboard", { credentials: "include" })
+      .then(async (res) => {
+        if (!res.ok) throw new Error("Failed to load dashboard");
+        const json = await res.json();
+        setData(json);
+      })
+      .catch((err) => setError(err.message || "Unknown error"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600" />
+      </div>
+    );
+  }
+  if (error || !data) {
+    return (
+      <div className="text-red-600 text-center py-10">
+        {error || "No data."}
+      </div>
+    );
+  }
+
+  const {
+    welcome,
+    currentCourse,
+    currentModule,
+    nextToLearn,
+    toRevise,
+    summaryStats,
+  } = data;
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div className="space-y-8">
+        <h1 className="text-3xl font-semibold text-purple-700">{welcome}</h1>
+        <div>
+          <h2 className="text-2xl font-bold mb-2">
+            Continue where you left off
+          </h2>
+          {currentCourse && currentModule ? (
+            <div className="bg-purple-200 p-6 rounded-xl shadow">
+              <div className="font-bold text-lg mb-1">{currentCourse.name}</div>
+              <div className="text-gray-700 mb-4">
+                Module: {currentModule.title}
+              </div>
+              <Link
+                href={`/courses/${currentCourse.id}/modules/${currentModule.id}`}
+                className="inline-block bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition"
+              >
+                Resume
+              </Link>
+            </div>
+          ) : (
+            <div className="text-gray-500">No course in progress.</div>
+          )}
+        </div>
+        <div>
+          <h2 className="text-2xl font-bold mb-2">Next Steps For You</h2>
+          <div className="mb-2">
+            <div className="font-medium">Learn</div>
+            {nextToLearn && nextToLearn.length > 0 ? (
+              nextToLearn.map((mod) => (
+                <Link
+                  key={mod.id}
+                  href={`/courses/${currentCourse?.id}/modules/${mod.id}`}
+                  className="block bg-purple-200 py-2 px-4 rounded mb-2 hover:bg-purple-300 transition"
+                >
+                  {mod.title}
+                </Link>
+              ))
+            ) : (
+              <div className="text-gray-500">All caught up!</div>
+            )}
+          </div>
+          <div>
+            <div className="font-medium">Revise</div>
+            {toRevise && toRevise.length > 0 ? (
+              toRevise.map((mod) => (
+                <Link
+                  key={mod.id}
+                  href={`/courses/${currentCourse?.id}/modules/${mod.id}`}
+                  className="block bg-purple-100 py-2 px-4 rounded mb-2 hover:bg-purple-200 transition"
+                >
+                  {mod.title}
+                </Link>
+              ))
+            ) : (
+              <div className="text-gray-500">Nothing to revise.</div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="space-y-8">
+        <div className="bg-gray-100 p-8 rounded-xl shadow flex flex-col items-center">
+          <h2 className="text-xl font-semibold mb-2">At a glance</h2>
+          <div className="text-lg font-medium mb-1">Modules Completed</div>
+          <div className="text-3xl font-bold text-purple-700 mb-2">
+            {summaryStats.completed}{" "}
+            <span className="text-gray-500">/ {summaryStats.total}</span>
+          </div>
+          <div className="w-full bg-purple-100 h-3 rounded-full">
+            <div
+              className="bg-purple-600 h-3 rounded-full transition-all duration-500"
+              style={{
+                width: `${
+                  summaryStats.total > 0
+                    ? (summaryStats.completed / summaryStats.total) * 100
+                    : 0
+                }%`,
+              }}
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

From 11691744415c1e4671aa0d47533eea30759c10c6 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 17:47:20 +0800
Subject: [PATCH 20/21] Add better user dashboard

---
 components/dashboard/UserDashboard.tsx | 202 +++++++++++++++----------
 1 file changed, 122 insertions(+), 80 deletions(-)

diff --git a/components/dashboard/UserDashboard.tsx b/components/dashboard/UserDashboard.tsx
index 0c337cd..62b3074 100644
--- a/components/dashboard/UserDashboard.tsx
+++ b/components/dashboard/UserDashboard.tsx
@@ -7,12 +7,10 @@ interface Course {
   id: number;
   name: string;
 }
-
 interface Module {
   id: number;
   title: string;
 }
-
 interface DashboardData {
   welcome: string;
   currentCourse: Course | null;
@@ -20,8 +18,8 @@ interface DashboardData {
   nextToLearn: Module[];
   toRevise: Module[];
   summaryStats: {
-    completed: number;
-    total: number;
+    completedModules: number;
+    totalModules: number;
   };
 }
 
@@ -66,85 +64,129 @@ export default function UserDashboard() {
   } = data;
 
   return (
-    <div className="max-w-4xl mx-auto p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
-      <div className="space-y-8">
-        <h1 className="text-3xl font-semibold text-purple-700">{welcome}</h1>
-        <div>
-          <h2 className="text-2xl font-bold mb-2">
-            Continue where you left off
-          </h2>
-          {currentCourse && currentModule ? (
-            <div className="bg-purple-200 p-6 rounded-xl shadow">
-              <div className="font-bold text-lg mb-1">{currentCourse.name}</div>
-              <div className="text-gray-700 mb-4">
-                Module: {currentModule.title}
+    <div className="bg-[#fafbff] min-h-screen py-8 px-2">
+      <div className="max-w-6xl mx-auto">
+        {/* GRID */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* LEFT COLUMN */}
+          <div className="md:col-span-2 space-y-7">
+            {/* WELCOME */}
+            <div>
+              <div className="text-3xl md:text-4xl font-bold text-purple-700 mb-2 tracking-tight">
+                {welcome}
+              </div>
+            </div>
+
+            {/* CONTINUE SECTION */}
+            <div>
+              <div className="text-xl font-semibold mb-3 text-gray-900">
+                Continue where you left off
+              </div>
+              <div className="rounded-2xl bg-white shadow p-6 flex flex-col sm:flex-row items-center sm:items-start gap-4">
+                {currentCourse && currentModule ? (
+                  <>
+                    <div className="flex-1">
+                      <div className="text-lg font-bold text-gray-800">
+                        {currentCourse.name}
+                      </div>
+                      <div className="text-gray-500 text-base mb-3">
+                        Module: {currentModule.title}
+                      </div>
+                      <Link
+                        href={`/courses/${currentCourse.id}/modules/${currentModule.id}`}
+                        className="inline-block bg-purple-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-purple-700 transition shadow"
+                      >
+                        Resume
+                      </Link>
+                    </div>
+                  </>
+                ) : (
+                  <div className="text-gray-500 font-medium">
+                    No course in progress.
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* NEXT STEPS */}
+            <div>
+              <div className="text-xl font-semibold mb-3 text-gray-900">
+                Next Steps For You
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {/* LEARN */}
+                <div className="rounded-2xl bg-purple-50 p-4 shadow">
+                  <div className="font-bold text-purple-700 mb-1">Learn</div>
+                  {nextToLearn && nextToLearn.length > 0 ? (
+                    nextToLearn.map((mod) => (
+                      <Link
+                        key={mod.id}
+                        href={`/courses/${currentCourse?.id}/modules/${mod.id}`}
+                        className="block bg-white px-4 py-2 rounded-lg mb-2 shadow hover:bg-purple-100 font-medium"
+                      >
+                        {mod.title}
+                      </Link>
+                    ))
+                  ) : (
+                    <div className="text-gray-400">All caught up!</div>
+                  )}
+                </div>
+                {/* REVISE */}
+                <div className="rounded-2xl bg-purple-50 p-4 shadow">
+                  <div className="font-bold text-purple-700 mb-1">Revise</div>
+                  {toRevise && toRevise.length > 0 ? (
+                    toRevise.map((mod) => (
+                      <Link
+                        key={mod.id}
+                        href={`/courses/${currentCourse?.id}/modules/${mod.id}`}
+                        className="block bg-white px-4 py-2 rounded-lg mb-2 shadow hover:bg-purple-100 font-medium"
+                      >
+                        {mod.title}
+                      </Link>
+                    ))
+                  ) : (
+                    <div className="text-gray-400">Nothing to revise.</div>
+                  )}
+                </div>
               </div>
-              <Link
-                href={`/courses/${currentCourse.id}/modules/${currentModule.id}`}
-                className="inline-block bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition"
-              >
-                Resume
-              </Link>
             </div>
-          ) : (
-            <div className="text-gray-500">No course in progress.</div>
-          )}
-        </div>
-        <div>
-          <h2 className="text-2xl font-bold mb-2">Next Steps For You</h2>
-          <div className="mb-2">
-            <div className="font-medium">Learn</div>
-            {nextToLearn && nextToLearn.length > 0 ? (
-              nextToLearn.map((mod) => (
-                <Link
-                  key={mod.id}
-                  href={`/courses/${currentCourse?.id}/modules/${mod.id}`}
-                  className="block bg-purple-200 py-2 px-4 rounded mb-2 hover:bg-purple-300 transition"
-                >
-                  {mod.title}
-                </Link>
-              ))
-            ) : (
-              <div className="text-gray-500">All caught up!</div>
-            )}
-          </div>
-          <div>
-            <div className="font-medium">Revise</div>
-            {toRevise && toRevise.length > 0 ? (
-              toRevise.map((mod) => (
-                <Link
-                  key={mod.id}
-                  href={`/courses/${currentCourse?.id}/modules/${mod.id}`}
-                  className="block bg-purple-100 py-2 px-4 rounded mb-2 hover:bg-purple-200 transition"
-                >
-                  {mod.title}
-                </Link>
-              ))
-            ) : (
-              <div className="text-gray-500">Nothing to revise.</div>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="space-y-8">
-        <div className="bg-gray-100 p-8 rounded-xl shadow flex flex-col items-center">
-          <h2 className="text-xl font-semibold mb-2">At a glance</h2>
-          <div className="text-lg font-medium mb-1">Modules Completed</div>
-          <div className="text-3xl font-bold text-purple-700 mb-2">
-            {summaryStats.completed}{" "}
-            <span className="text-gray-500">/ {summaryStats.total}</span>
           </div>
-          <div className="w-full bg-purple-100 h-3 rounded-full">
-            <div
-              className="bg-purple-600 h-3 rounded-full transition-all duration-500"
-              style={{
-                width: `${
-                  summaryStats.total > 0
-                    ? (summaryStats.completed / summaryStats.total) * 100
-                    : 0
-                }%`,
-              }}
-            ></div>
+
+          {/* RIGHT COLUMN */}
+          <div className="space-y-6">
+            {/* AT A GLANCE */}
+            <div className="rounded-2xl bg-gray-100 shadow-md p-7 flex flex-col items-center justify-center h-full min-h-[200px]">
+              <div className="text-lg font-bold mb-2 text-gray-900">
+                At a glance
+              </div>
+              <div className="text-base font-medium text-gray-800 mb-2">
+                Modules Completed
+              </div>
+              <div className="flex items-end gap-1 mb-3">
+                <span className="text-4xl font-bold text-purple-600">
+                  {summaryStats.completedModules}
+                </span>
+                <span className="text-2xl text-gray-400 font-bold">/</span>
+                <span className="text-2xl font-bold text-purple-400">
+                  {summaryStats.totalModules}
+                </span>
+              </div>
+              {/* Progress bar */}
+              <div className="w-full bg-purple-100 h-3 rounded-full">
+                <div
+                  className="bg-purple-600 h-3 rounded-full transition-all duration-500"
+                  style={{
+                    width: `${
+                      summaryStats.totalModules > 0
+                        ? (summaryStats.completedModules /
+                            summaryStats.totalModules) *
+                          100
+                        : 0
+                    }%`,
+                  }}
+                ></div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

From e2aa9f2a07e632c61c4c3c146d0f9f55e320bae4 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 10 Jul 2025 17:58:47 +0800
Subject: [PATCH 21/21] Update user dashboard ui

---
 components/dashboard/UserDashboard.tsx | 114 ++++++++++++++++---------
 1 file changed, 76 insertions(+), 38 deletions(-)

diff --git a/components/dashboard/UserDashboard.tsx b/components/dashboard/UserDashboard.tsx
index 62b3074..dbdb95c 100644
--- a/components/dashboard/UserDashboard.tsx
+++ b/components/dashboard/UserDashboard.tsx
@@ -21,6 +21,10 @@ interface DashboardData {
     completedModules: number;
     totalModules: number;
   };
+  globalStats: {
+    completedModules: number;
+    totalModules: number;
+  };
 }
 
 export default function UserDashboard() {
@@ -61,23 +65,20 @@ export default function UserDashboard() {
     nextToLearn,
     toRevise,
     summaryStats,
+    globalStats,
   } = data;
 
   return (
-    <div className="bg-[#fafbff] min-h-screen py-8 px-2">
+    <div className="bg-[#fcfcfc] min-h-screen py-8 px-2">
       <div className="max-w-6xl mx-auto">
-        {/* GRID */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {/* LEFT COLUMN */}
           <div className="md:col-span-2 space-y-7">
-            {/* WELCOME */}
             <div>
               <div className="text-3xl md:text-4xl font-bold text-purple-700 mb-2 tracking-tight">
                 {welcome}
               </div>
             </div>
 
-            {/* CONTINUE SECTION */}
             <div>
               <div className="text-xl font-semibold mb-3 text-gray-900">
                 Continue where you left off
@@ -102,19 +103,17 @@ export default function UserDashboard() {
                   </>
                 ) : (
                   <div className="text-gray-500 font-medium">
-                    No course in progress.
+                    No module in progress.
                   </div>
                 )}
               </div>
             </div>
 
-            {/* NEXT STEPS */}
             <div>
               <div className="text-xl font-semibold mb-3 text-gray-900">
                 Next Steps For You
               </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                {/* LEARN */}
                 <div className="rounded-2xl bg-purple-50 p-4 shadow">
                   <div className="font-bold text-purple-700 mb-1">Learn</div>
                   {nextToLearn && nextToLearn.length > 0 ? (
@@ -131,7 +130,6 @@ export default function UserDashboard() {
                     <div className="text-gray-400">All caught up!</div>
                   )}
                 </div>
-                {/* REVISE */}
                 <div className="rounded-2xl bg-purple-50 p-4 shadow">
                   <div className="font-bold text-purple-700 mb-1">Revise</div>
                   {toRevise && toRevise.length > 0 ? (
@@ -152,39 +150,79 @@ export default function UserDashboard() {
             </div>
           </div>
 
-          {/* RIGHT COLUMN */}
           <div className="space-y-6">
-            {/* AT A GLANCE */}
-            <div className="rounded-2xl bg-gray-100 shadow-md p-7 flex flex-col items-center justify-center h-full min-h-[200px]">
-              <div className="text-lg font-bold mb-2 text-gray-900">
+            <div className="rounded-2xl bg-gray-100 shadow-md p-7 flex flex-col items-center justify-center h-full min-h-[260px]">
+              <div className="text-lg font-bold mb-4 text-gray-900">
                 At a glance
               </div>
-              <div className="text-base font-medium text-gray-800 mb-2">
-                Modules Completed
-              </div>
-              <div className="flex items-end gap-1 mb-3">
-                <span className="text-4xl font-bold text-purple-600">
-                  {summaryStats.completedModules}
-                </span>
-                <span className="text-2xl text-gray-400 font-bold">/</span>
-                <span className="text-2xl font-bold text-purple-400">
-                  {summaryStats.totalModules}
-                </span>
+
+              <div className="w-full mb-5">
+                <div className="text-base font-medium text-gray-800 mb-1">
+                  Modules Completed{" "}
+                  <span className="text-xs text-gray-500">
+                    (Current Course)
+                  </span>
+                </div>
+                <div className="flex items-end gap-1 mb-2">
+                  <span className="text-3xl font-bold text-purple-600">
+                    {summaryStats.completedModules}
+                  </span>
+                  <span className="text-xl text-gray-400 font-bold">/</span>
+                  <span className="text-xl font-bold text-purple-400">
+                    {summaryStats.totalModules}
+                  </span>
+                </div>
+                <div className="text-xs text-gray-500 mb-1">
+                  {currentCourse?.name}
+                </div>
+                {/* Progress bar */}
+                <div className="w-full bg-purple-100 h-2 rounded-full">
+                  <div
+                    className="bg-purple-600 h-2 rounded-full transition-all duration-500"
+                    style={{
+                      width: `${
+                        summaryStats.totalModules > 0
+                          ? (summaryStats.completedModules /
+                              summaryStats.totalModules) *
+                            100
+                          : 0
+                      }%`,
+                    }}
+                  ></div>
+                </div>
               </div>
-              {/* Progress bar */}
-              <div className="w-full bg-purple-100 h-3 rounded-full">
-                <div
-                  className="bg-purple-600 h-3 rounded-full transition-all duration-500"
-                  style={{
-                    width: `${
-                      summaryStats.totalModules > 0
-                        ? (summaryStats.completedModules /
-                            summaryStats.totalModules) *
-                          100
-                        : 0
-                    }%`,
-                  }}
-                ></div>
+
+              <div className="w-full">
+                <div className="text-base font-medium text-gray-800 mb-1">
+                  Modules Completed{" "}
+                  <span className="text-xs text-gray-500">(All Courses)</span>
+                </div>
+                <div className="flex items-end gap-1 mb-2">
+                  <span className="text-3xl font-bold text-purple-600">
+                    {globalStats.completedModules}
+                  </span>
+                  <span className="text-xl text-gray-400 font-bold">/</span>
+                  <span className="text-xl font-bold text-purple-400">
+                    {globalStats.totalModules}
+                  </span>
+                </div>
+                <div className="text-xs text-gray-500 mb-1">
+                  across all courses
+                </div>
+                <div className="w-full bg-purple-100 h-2 rounded-full">
+                  <div
+                    className="bg-purple-400 h-2 rounded-full transition-all duration-500"
+                    style={{
+                      width: `${
+                        globalStats.totalModules > 0
+                          ? (globalStats.completedModules /
+                              globalStats.totalModules) *
+                            100
+                          : 0
+                      }%`,
+                    }}
+                  ></div>
+                </div>
               </div>
             </div>
           </div>