From 3c45da10e05eb4401b6021f979eb5e7125da5b7a Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 12 Jul 2025 09:42:41 +0800
Subject: [PATCH 01/10] Add basic badges page

---
 app/badges/page.tsx              |  18 +++
 app/organisation/page.tsx        |  14 +-
 components/badges/AdminBadge.tsx | 249 +++++++++++++++++++++++++++++++
 components/badges/UserBadge.tsx  |  10 ++
 4 files changed, 290 insertions(+), 1 deletion(-)
 create mode 100644 app/badges/page.tsx
 create mode 100644 components/badges/AdminBadge.tsx
 create mode 100644 components/badges/UserBadge.tsx

diff --git a/app/badges/page.tsx b/app/badges/page.tsx
new file mode 100644
index 0000000..c81c145
--- /dev/null
+++ b/app/badges/page.tsx
@@ -0,0 +1,18 @@
+import { getAuthUser } from "@/lib/auth";
+import AdminBadgesPage from "@/components/badges/AdminBadge";
+import UserBadgesPage from "@/components/badges/UserBadge";
+
+export default async function BadgesPage() {
+  const user = await getAuthUser();
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+
+  const isAdmin = user?.organisation?.role === "admin";
+
+  if (isAdmin) {
+    return null;
+  }
+
+  return <UserBadgesPage />;
+}
diff --git a/app/organisation/page.tsx b/app/organisation/page.tsx
index b172f42..3eca01c 100644
--- a/app/organisation/page.tsx
+++ b/app/organisation/page.tsx
@@ -7,11 +7,12 @@ 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";
+import AdminBadgesPage from "@/components/badges/AdminBadge";
 
 export default function OrganisationsPage() {
   const { user } = useAuth();
   const [activeTab, setActiveTab] = useState<
-    "skills" | "channels" | "levels" | "onboarding" | "orgSettings"
+    "skills" | "channels" | "levels" | "onboarding" | "orgSettings" | "badges"
   >("skills");
 
   if (!user || !user.hasCompletedOnboarding) {
@@ -79,6 +80,16 @@ export default function OrganisationsPage() {
             >
               Onboarding Form
             </button>
+            <button
+              onClick={() => setActiveTab("badges")}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === "badges"
+                  ? "border-purple-500 text-purple-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              }`}
+            >
+              Manage Badges
+            </button>
             <button
               onClick={() => setActiveTab("orgSettings")}
               className={`py-2 px-1 border-b-2 font-medium text-sm ${
@@ -99,6 +110,7 @@ export default function OrganisationsPage() {
       {activeTab === "levels" && <ManageLevels />}
       {activeTab === "onboarding" && <OnboardingConfig />}
       {activeTab === "orgSettings" && <OrgSettings />}
+      {activeTab === "badges" && <AdminBadgesPage />}
     </div>
   );
 }
diff --git a/components/badges/AdminBadge.tsx b/components/badges/AdminBadge.tsx
new file mode 100644
index 0000000..8392896
--- /dev/null
+++ b/components/badges/AdminBadge.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface FrequentBadge {
+  id: number;
+  name: string;
+  description: string;
+  numCoursesCompleted: number;
+}
+
+interface CourseBadge {
+  id: number;
+  name: string;
+  description: string;
+  courseId: number;
+}
+
+interface CreatedBadges {
+  coursesBadges: FrequentBadge[];
+  courseBadges: CourseBadge[];
+}
+
+export default function AdminBadgesPage() {
+  const [badges, setBadges] = useState<CreatedBadges>({
+    coursesBadges: [],
+    courseBadges: [],
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [freqName, setFreqName] = useState("");
+  const [freqDesc, setFreqDesc] = useState("");
+  const [freqCount, setFreqCount] = useState<number | "">("");
+
+  const [specName, setSpecName] = useState("");
+  const [specDesc, setSpecDesc] = useState("");
+  const [specCourseId, setSpecCourseId] = useState<number | "">("");
+
+  const fetchBadges = () => {
+    setLoading(true);
+    fetch("/api/badges/created-badges", { credentials: "include" })
+      .then((r) => {
+        if (!r.ok) throw new Error("Failed to load badges");
+        return r.json() as Promise<CreatedBadges>;
+      })
+      .then((data) => {
+        setBadges(data);
+        setError(null);
+      })
+      .catch((err) => {
+        console.error(err);
+        setError(err.message);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    fetchBadges();
+  }, []);
+
+  const addFrequentBadge = async () => {
+    if (!freqName.trim() || freqCount === "" || freqCount < 0) {
+      alert("Name and non-negative courses-count are required");
+      return;
+    }
+    const res = await fetch("/api/badges/create-frequent", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        name: freqName.trim(),
+        description: freqDesc.trim(),
+        numCoursesCompleted: +freqCount,
+      }),
+    });
+    if (res.ok) {
+      setFreqName("");
+      setFreqDesc("");
+      setFreqCount("");
+      fetchBadges();
+    } else {
+      alert("Could not create badge");
+    }
+  };
+
+  const addCourseBadge = async () => {
+    if (!specName.trim() || specCourseId === "" || specCourseId <= 0) {
+      alert("Name and course ID are required");
+      return;
+    }
+    const res = await fetch("/api/badges/create-specific-course", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        name: specName.trim(),
+        description: specDesc.trim(),
+        courseId: +specCourseId,
+      }),
+    });
+    if (res.ok) {
+      setSpecName("");
+      setSpecDesc("");
+      setSpecCourseId("");
+      fetchBadges();
+    } else {
+      alert("Could not create badge");
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-8">
+      <h1 className="text-3xl font-bold text-purple-600">Manage Badges</h1>
+      {error && (
+        <div className="text-red-600 bg-red-100 p-3 rounded">{error}</div>
+      )}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="p-4 border rounded-lg bg-white shadow-sm">
+          <h2 className="text-xl font-semibold mb-2">
+            Add “Complete X Courses” Badge
+          </h2>
+          <input
+            type="text"
+            placeholder="Badge Name"
+            value={freqName}
+            onChange={(e) => setFreqName(e.target.value)}
+            className="w-full p-2 border rounded mb-2 focus:outline-none focus:ring"
+          />
+          <textarea
+            placeholder="Description (optional)"
+            value={freqDesc}
+            onChange={(e) => setFreqDesc(e.target.value)}
+            className="w-full p-2 border rounded mb-2 focus:outline-none focus:ring"
+            rows={2}
+          />
+          <input
+            type="number"
+            min={0}
+            placeholder="Number of courses"
+            value={freqCount}
+            onChange={(e) =>
+              setFreqCount(e.target.value === "" ? "" : +e.target.value)
+            }
+            className="w-full p-2 border rounded mb-4 focus:outline-none focus:ring"
+          />
+          <button
+            onClick={addFrequentBadge}
+            className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+          >
+            Create Badge
+          </button>
+        </div>
+
+        <div className="p-4 border rounded-lg bg-white shadow-sm">
+          <h2 className="text-xl font-semibold mb-2">
+            Add “Course-Specific” Badge
+          </h2>
+          <input
+            type="text"
+            placeholder="Badge Name"
+            value={specName}
+            onChange={(e) => setSpecName(e.target.value)}
+            className="w-full p-2 border rounded mb-2 focus:outline-none focus:ring"
+          />
+          <textarea
+            placeholder="Description (optional)"
+            value={specDesc}
+            onChange={(e) => setSpecDesc(e.target.value)}
+            className="w-full p-2 border rounded mb-2 focus:outline-none focus:ring"
+            rows={2}
+          />
+          <input
+            type="number"
+            min={1}
+            placeholder="Course ID"
+            value={specCourseId}
+            onChange={(e) =>
+              setSpecCourseId(e.target.value === "" ? "" : +e.target.value)
+            }
+            className="w-full p-2 border rounded mb-4 focus:outline-none focus:ring"
+          />
+          <button
+            onClick={addCourseBadge}
+            className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+          >
+            Create Badge
+          </button>
+        </div>
+      </div>
+
+      <section>
+        <h2 className="text-2xl font-semibold mb-4">Existing Badges</h2>
+
+        <h3 className="text-lg font-medium mb-2">Complete X Courses</h3>
+        {loading ? (
+          <p>Loading…</p>
+        ) : badges.coursesBadges.length === 0 ? (
+          <p className="text-gray-500">No frequent badges created.</p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {badges.coursesBadges.map((b) => (
+              <div
+                key={b.id}
+                className="p-3 border rounded-lg bg-purple-50 flex flex-col"
+              >
+                <span className="font-semibold">{b.name}</span>
+                <small className="italic text-sm">
+                  when you complete {b.numCoursesCompleted} courses
+                </small>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <h3 className="text-lg font-medium mt-6 mb-2">Course-Specific</h3>
+        {loading ? (
+          <p>Loading…</p>
+        ) : badges.courseBadges.length === 0 ? (
+          <p className="text-gray-500">No course-specific badges created.</p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {badges.courseBadges.map((b) => (
+              <div
+                key={b.id}
+                className="p-3 border rounded-lg bg-purple-50 flex flex-col"
+              >
+                <span className="font-semibold">{b.name}</span>
+                <small className="italic text-sm">
+                  for course #{b.courseId}
+                </small>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/components/badges/UserBadge.tsx b/components/badges/UserBadge.tsx
new file mode 100644
index 0000000..fb49cb1
--- /dev/null
+++ b/components/badges/UserBadge.tsx
@@ -0,0 +1,10 @@
+export default function UserBadgesPage() {
+  return (
+    <div className="p-8">
+      <h1 className="text-3xl font-bold mb-4 text-purple-600">User Badges</h1>
+      <p className="text-gray-700">
+        This page is under construction. Please check back later.
+      </p>
+    </div>
+  );
+}

From 2c8fb6c8d960ee6598815f6109cd0910174cece4 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 12 Jul 2025 09:46:50 +0800
Subject: [PATCH 02/10] Add admin badges page

---
 components/badges/AdminBadge.tsx | 52 +++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/components/badges/AdminBadge.tsx b/components/badges/AdminBadge.tsx
index 8392896..c2347f9 100644
--- a/components/badges/AdminBadge.tsx
+++ b/components/badges/AdminBadge.tsx
@@ -21,11 +21,17 @@ interface CreatedBadges {
   courseBadges: CourseBadge[];
 }
 
+interface Course {
+  id: number;
+  name: string;
+}
+
 export default function AdminBadgesPage() {
   const [badges, setBadges] = useState<CreatedBadges>({
     coursesBadges: [],
     courseBadges: [],
   });
+  const [courses, setCourses] = useState<Course[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -37,6 +43,11 @@ export default function AdminBadgesPage() {
   const [specDesc, setSpecDesc] = useState("");
   const [specCourseId, setSpecCourseId] = useState<number | "">("");
 
+  useEffect(() => {
+    fetchBadges();
+    fetchCourses();
+  }, []);
+
   const fetchBadges = () => {
     setLoading(true);
     fetch("/api/badges/created-badges", { credentials: "include" })
@@ -55,13 +66,20 @@ export default function AdminBadgesPage() {
       .finally(() => setLoading(false));
   };
 
-  useEffect(() => {
-    fetchBadges();
-  }, []);
+  const fetchCourses = async () => {
+    try {
+      const res = await fetch("/api/courses", { credentials: "include" });
+      if (!res.ok) throw new Error("Failed to load courses");
+      const data = (await res.json()) as { courses: Course[] };
+      setCourses(data.courses);
+    } catch (err) {
+      console.error(err);
+    }
+  };
 
   const addFrequentBadge = async () => {
     if (!freqName.trim() || freqCount === "" || freqCount < 0) {
-      alert("Name and non-negative courses-count are required");
+      alert("Name and non-negative course count are required");
       return;
     }
     const res = await fetch("/api/badges/create-frequent", {
@@ -85,8 +103,8 @@ export default function AdminBadgesPage() {
   };
 
   const addCourseBadge = async () => {
-    if (!specName.trim() || specCourseId === "" || specCourseId <= 0) {
-      alert("Name and course ID are required");
+    if (!specName.trim() || specCourseId === "") {
+      alert("Name and course selection are required");
       return;
     }
     const res = await fetch("/api/badges/create-specific-course", {
@@ -96,7 +114,7 @@ export default function AdminBadgesPage() {
       body: JSON.stringify({
         name: specName.trim(),
         description: specDesc.trim(),
-        courseId: +specCourseId,
+        courseId: specCourseId,
       }),
     });
     if (res.ok) {
@@ -112,9 +130,11 @@ export default function AdminBadgesPage() {
   return (
     <div className="p-6 space-y-8">
       <h1 className="text-3xl font-bold text-purple-600">Manage Badges</h1>
+
       {error && (
         <div className="text-red-600 bg-red-100 p-3 rounded">{error}</div>
       )}
+
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div className="p-4 border rounded-lg bg-white shadow-sm">
           <h2 className="text-xl font-semibold mb-2">
@@ -170,16 +190,18 @@ export default function AdminBadgesPage() {
             className="w-full p-2 border rounded mb-2 focus:outline-none focus:ring"
             rows={2}
           />
-          <input
-            type="number"
-            min={1}
-            placeholder="Course ID"
+          <select
             value={specCourseId}
-            onChange={(e) =>
-              setSpecCourseId(e.target.value === "" ? "" : +e.target.value)
-            }
+            onChange={(e) => setSpecCourseId(Number(e.target.value) || "")}
             className="w-full p-2 border rounded mb-4 focus:outline-none focus:ring"
-          />
+          >
+            <option value="">Select a course…</option>
+            {courses.map((c) => (
+              <option key={c.id} value={c.id}>
+                {c.name}
+              </option>
+            ))}
+          </select>
           <button
             onClick={addCourseBadge}
             className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"

From 104ce02687090005ccdefcc7206537e1f8bd8a23 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 12 Jul 2025 09:55:13 +0800
Subject: [PATCH 03/10] Allow deletion of badges

---
 components/badges/AdminBadge.tsx | 70 ++++++++++++++++++++++++++------
 1 file changed, 58 insertions(+), 12 deletions(-)

diff --git a/components/badges/AdminBadge.tsx b/components/badges/AdminBadge.tsx
index c2347f9..c577711 100644
--- a/components/badges/AdminBadge.tsx
+++ b/components/badges/AdminBadge.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useState, useEffect } from "react";
 
 interface FrequentBadge {
@@ -127,10 +128,33 @@ export default function AdminBadgesPage() {
     }
   };
 
+  const deleteFrequentBadge = async (id: number) => {
+    if (!confirm("Delete this badge?")) return;
+    const res = await fetch("/api/badges/frequent-badge", {
+      method: "DELETE",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ badgeId: id }),
+    });
+    if (res.ok) fetchBadges();
+    else alert("Failed to delete");
+  };
+
+  const deleteCourseBadge = async (id: number) => {
+    if (!confirm("Delete this badge?")) return;
+    const res = await fetch("/api/badges/course-specific-badge", {
+      method: "DELETE",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ badgeId: id }),
+    });
+    if (res.ok) fetchBadges();
+    else alert("Failed to delete");
+  };
+
   return (
     <div className="p-6 space-y-8">
       <h1 className="text-3xl font-bold text-purple-600">Manage Badges</h1>
-
       {error && (
         <div className="text-red-600 bg-red-100 p-3 rounded">{error}</div>
       )}
@@ -145,13 +169,13 @@ export default function AdminBadgesPage() {
             placeholder="Badge Name"
             value={freqName}
             onChange={(e) => setFreqName(e.target.value)}
-            className="w-full p-2 border rounded mb-2 focus:outline-none focus:ring"
+            className="w-full p-2 border rounded mb-2"
           />
           <textarea
             placeholder="Description (optional)"
             value={freqDesc}
             onChange={(e) => setFreqDesc(e.target.value)}
-            className="w-full p-2 border rounded mb-2 focus:outline-none focus:ring"
+            className="w-full p-2 border rounded mb-2"
             rows={2}
           />
           <input
@@ -162,11 +186,11 @@ export default function AdminBadgesPage() {
             onChange={(e) =>
               setFreqCount(e.target.value === "" ? "" : +e.target.value)
             }
-            className="w-full p-2 border rounded mb-4 focus:outline-none focus:ring"
+            className="w-full p-2 border rounded mb-4"
           />
           <button
             onClick={addFrequentBadge}
-            className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+            className="px-4 py-2 bg-green-600 text-white rounded"
           >
             Create Badge
           </button>
@@ -181,19 +205,19 @@ export default function AdminBadgesPage() {
             placeholder="Badge Name"
             value={specName}
             onChange={(e) => setSpecName(e.target.value)}
-            className="w-full p-2 border rounded mb-2 focus:outline-none focus:ring"
+            className="w-full p-2 border rounded mb-2"
           />
           <textarea
             placeholder="Description (optional)"
             value={specDesc}
             onChange={(e) => setSpecDesc(e.target.value)}
-            className="w-full p-2 border rounded mb-2 focus:outline-none focus:ring"
+            className="w-full p-2 border rounded mb-2"
             rows={2}
           />
           <select
             value={specCourseId}
             onChange={(e) => setSpecCourseId(Number(e.target.value) || "")}
-            className="w-full p-2 border rounded mb-4 focus:outline-none focus:ring"
+            className="w-full p-2 border rounded mb-4"
           >
             <option value="">Select a course…</option>
             {courses.map((c) => (
@@ -204,7 +228,7 @@ export default function AdminBadgesPage() {
           </select>
           <button
             onClick={addCourseBadge}
-            className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded"
+            className="px-4 py-2 bg-green-600 text-white rounded"
           >
             Create Badge
           </button>
@@ -226,7 +250,15 @@ export default function AdminBadgesPage() {
                 key={b.id}
                 className="p-3 border rounded-lg bg-purple-50 flex flex-col"
               >
-                <span className="font-semibold">{b.name}</span>
+                <div className="flex justify-between items-start">
+                  <span className="font-semibold">{b.name}</span>
+                  <button
+                    onClick={() => deleteFrequentBadge(b.id)}
+                    className="text-red-600"
+                  >
+                    ×
+                  </button>
+                </div>
                 <small className="italic text-sm">
                   when you complete {b.numCoursesCompleted} courses
                 </small>
@@ -252,9 +284,23 @@ export default function AdminBadgesPage() {
                 key={b.id}
                 className="p-3 border rounded-lg bg-purple-50 flex flex-col"
               >
-                <span className="font-semibold">{b.name}</span>
+                <div className="flex justify-between items-start">
+                  <span className="font-semibold">{b.name}</span>
+                  <button
+                    onClick={() => deleteCourseBadge(b.id)}
+                    className="text-red-600"
+                  >
+                    ×
+                  </button>
+                </div>
                 <small className="italic text-sm">
-                  for course #{b.courseId}
+                  on completion of course #
+                  <Link
+                    href={`/courses/${b.courseId}`}
+                    className="text-blue-600 underline hover:text-blue-800"
+                  >
+                    {b.name}
+                  </Link>
                 </small>
                 {b.description && (
                   <p className="text-gray-700 mt-1 line-clamp-2">

From fdd0643091e48494e431e2f4a0749eea6359cd8e Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 12 Jul 2025 10:04:20 +0800
Subject: [PATCH 04/10] Add page to show user badges

---
 components/SideNav.tsx          |  2 +
 components/badges/UserBadge.tsx | 85 +++++++++++++++++++++++++++++++--
 2 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 8bccf94..289ef9d 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -11,6 +11,7 @@ import {
   MapIcon,
   ClockIcon,
   CogIcon,
+  StarIcon,
 } from "@heroicons/react/24/outline";
 import LogoutButton from "./auth/logout/LogoutButton";
 import { useAuth } from "@/context/AuthContext";
@@ -23,6 +24,7 @@ const menuSections = [
       { label: "My Roadmap", href: "/roadmap", icon: MapIcon },
       { label: "Courses", href: "/courses", icon: BookOpenIcon },
       { label: "Reports", href: "/reports", icon: ChartBarIcon },
+      { label: "Badges", href: "/badges", icon: StarIcon },
     ],
   },
   {
diff --git a/components/badges/UserBadge.tsx b/components/badges/UserBadge.tsx
index fb49cb1..149d00e 100644
--- a/components/badges/UserBadge.tsx
+++ b/components/badges/UserBadge.tsx
@@ -1,10 +1,87 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface UserBadge {
+  id: number;
+  name: string;
+  description: string;
+  awardedAt: string;
+}
+
 export default function UserBadgesPage() {
+  const [badges, setBadges] = useState<UserBadge[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchBadges() {
+      try {
+        const res = await fetch("/api/badges/user-badges", {
+          credentials: "include",
+        });
+        if (!res.ok) throw new Error("Failed to load your badges");
+        const data = (await res.json()) as { badges: UserBadge[] };
+        setBadges(data.badges);
+      } catch (err: any) {
+        console.error(err);
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchBadges();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="p-8 text-center">
+        <p>Loading your badges…</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-8">
+        <p className="text-red-600">Error: {error}</p>
+      </div>
+    );
+  }
+
+  if (badges.length === 0) {
+    return (
+      <div className="p-8">
+        <h1 className="text-3xl font-bold mb-4 text-purple-600">Your Badges</h1>
+        <p className="text-gray-500">You haven’t earned any badges yet.</p>
+      </div>
+    );
+  }
+
   return (
     <div className="p-8">
-      <h1 className="text-3xl font-bold mb-4 text-purple-600">User Badges</h1>
-      <p className="text-gray-700">
-        This page is under construction. Please check back later.
-      </p>
+      <h1 className="text-3xl font-bold mb-6 text-purple-600">Your Badges</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {badges.map((b) => (
+          <div
+            key={b.id}
+            className="p-4 border rounded-lg bg-purple-50 flex flex-col"
+          >
+            <h2 className="font-semibold text-lg">{b.name}</h2>
+            {b.description && (
+              <p className="text-gray-700 mt-1 line-clamp-2">{b.description}</p>
+            )}
+            <p className="text-sm text-gray-500 mt-auto">
+              Awarded on{" "}
+              {new Date(b.awardedAt).toLocaleDateString(undefined, {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })}
+            </p>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

From 9cdc09a6ff6cd97c0aa327480a79fd9776ae6475 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 12 Jul 2025 10:09:25 +0800
Subject: [PATCH 05/10] Show message in course page

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

diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index 2b3892c..7cff15a 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -81,6 +81,11 @@ export default function CourseCard({
   };
 
   const markNotCompleted = async () => {
+    const result = confirm(
+      "Are you sure you want to mark this course as not completed? You will lose corresponding badges."
+    );
+
+    if (!result) return;
     try {
       const response = await fetch("/api/courses/uncomplete-course", {
         method: "POST",
@@ -110,6 +115,29 @@ export default function CourseCard({
         body: JSON.stringify({ courseId: course.id }),
       });
       if (!res.ok) throw new Error("Failed to complete course");
+
+      const data = await res.json();
+      const { specificBadges = [], earnedBadges = [] } = data;
+
+      const msgs: string[] = [];
+      if (specificBadges.length) {
+        msgs.push(
+          `Course badge earned: ${specificBadges
+            .map((b: any) => b.name)
+            .join(", ")}`
+        );
+      }
+      if (earnedBadges.length) {
+        msgs.push(
+          `Milestone badge earned: ${earnedBadges
+            .map((b: any) => b.name)
+            .join(", ")}`
+        );
+      }
+      if (msgs.length) {
+        alert(msgs.join("\n"));
+      }
+
       window.location.reload();
     } catch (err) {
       console.error(err);

From 2a3fca9b4abce56e2d837225d7d996278daade5f Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 12 Jul 2025 10:48:58 +0800
Subject: [PATCH 06/10] add badges in report

---
 components/reports/AdminBasicReport.tsx | 76 +++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 4 deletions(-)

diff --git a/components/reports/AdminBasicReport.tsx b/components/reports/AdminBasicReport.tsx
index 85715c1..1d577b3 100644
--- a/components/reports/AdminBasicReport.tsx
+++ b/components/reports/AdminBasicReport.tsx
@@ -53,6 +53,13 @@ interface TagPerf {
   pct: number;
 }
 
+interface UserBadge {
+  id: number;
+  name: string;
+  description: string;
+  awarded_at: string;
+}
+
 interface EmployeeProgress {
   id: number;
   firstname: string;
@@ -63,6 +70,16 @@ interface EmployeeProgress {
   quizResults: QuizResult[];
   strengths: TagPerf[];
   weaknesses: TagPerf[];
+  badges: UserBadge[];
+}
+
+interface OrganisationBadges {
+  id: number;
+  name: string;
+  description: string;
+  course_id: number | null;
+  milestone: number | null;
+  earned_count: number;
 }
 
 interface OverviewData {
@@ -71,6 +88,7 @@ interface OverviewData {
     total: number;
     list: EmployeeProgress[];
   };
+  badges: OrganisationBadges[];
 }
 
 export default function AdminBasicReport() {
@@ -152,6 +170,33 @@ export default function AdminBasicReport() {
         </table>
       </section>
 
+      <section>
+        <h2 className="text-2xl font-semibold mb-4">All Badges</h2>
+        {data.badges.length ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {data.badges.map((b) => (
+              <div
+                key={b.id}
+                className="p-4 border rounded-lg bg-yellow-50 flex flex-col"
+              >
+                <h3 className="font-medium">{b.name}</h3>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+                <p className="text-sm text-gray-500 mt-auto">
+                  Earned by {b.earned_count}{" "}
+                  {b.earned_count === 1 ? "employee" : "employees"}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>No badges defined yet.</p>
+        )}
+      </section>
+
       <section className="space-y-6">
         <h2 className="text-2xl font-semibold">
           Employees Progress ({data.employees.total})
@@ -200,12 +245,10 @@ export default function AdminBasicReport() {
                   <p className="ml-4">None yet</p>
                 )}
               </div>
-
               <div>
                 <h3 className="font-semibold">Modules Completed</h3>
                 <p className="ml-4">{emp.modulesDone}</p>
               </div>
-
               <div>
                 <h3 className="font-semibold">Quiz Results</h3>
                 {emp.quizResults.length ? (
@@ -235,7 +278,6 @@ export default function AdminBasicReport() {
                   <p className="ml-4">No quizzes taken</p>
                 )}
               </div>
-
               <div>
                 <h3 className="font-semibold">Strengths</h3>
                 {emp.strengths.length ? (
@@ -250,7 +292,6 @@ export default function AdminBasicReport() {
                   <p className="ml-4">None identified</p>
                 )}
               </div>
-
               <div>
                 <h3 className="font-semibold">Areas to Improve</h3>
                 {emp.weaknesses.length ? (
@@ -264,6 +305,33 @@ export default function AdminBasicReport() {
                 ) : (
                   <p className="ml-4">None identified</p>
                 )}
+              </div>{" "}
+              <div>
+                <h3 className="font-semibold mb-4">Badges Earned</h3>
+                {emp.badges.length ? (
+                  <div className="ml-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {emp.badges.map((b) => (
+                      <div
+                        key={b.id}
+                        className="p-2 border rounded bg-yellow-50"
+                      >
+                        <p className="font-medium">{b.name}</p>
+                        <p className="text-xs text-gray-500">
+                          {new Date(b.awarded_at).toLocaleDateString(
+                            undefined,
+                            {
+                              year: "numeric",
+                              month: "short",
+                              day: "numeric",
+                            }
+                          )}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="ml-4">None yet</p>
+                )}
               </div>
             </div>
           </details>

From 1bd372718134a217e8eb022721f1be8c94009528 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 12 Jul 2025 10:49:04 +0800
Subject: [PATCH 07/10] add badges for user report

---
 components/reports/BasicReport.tsx | 38 ++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/components/reports/BasicReport.tsx b/components/reports/BasicReport.tsx
index 4a01521..9b80336 100644
--- a/components/reports/BasicReport.tsx
+++ b/components/reports/BasicReport.tsx
@@ -39,12 +39,20 @@ interface TagPerf {
   pct: number;
 }
 
+interface UserBadge {
+  id: number;
+  name: string;
+  description: string;
+  awarded_at: string;
+}
+
 interface ProgressData {
   coursesDone: CourseDone[];
   modulesDone: number;
   quizResults: QuizResult[];
   strengths: TagPerf[];
   weaknesses: TagPerf[];
+  userBadges: UserBadge[];
 }
 
 export default function BasicReport() {
@@ -172,6 +180,36 @@ export default function BasicReport() {
           <p>No weaknesses detected yet.</p>
         )}
       </section>
+      <section>
+        <h2 className="text-2xl font-semibold mb-4">Badges Earned</h2>
+        {data.userBadges.length ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {data.userBadges.map((b) => (
+              <div
+                key={b.id}
+                className="p-4 border rounded-lg bg-yellow-50 flex flex-col"
+              >
+                <h3 className="font-medium">{b.name}</h3>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+                <p className="text-sm text-gray-500 mt-auto">
+                  Awarded{" "}
+                  {new Date(b.awarded_at).toLocaleDateString(undefined, {
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                  })}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>No badges earned yet.</p>
+        )}
+      </section>
     </div>
   );
 }

From 6070cbd50607ed2c437ead3fe6734c517fd9bae1 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 12 Jul 2025 10:57:48 +0800
Subject: [PATCH 08/10] Show pending badges

---
 components/badges/UserBadge.tsx | 116 ++++++++++++++++++++++----------
 1 file changed, 80 insertions(+), 36 deletions(-)

diff --git a/components/badges/UserBadge.tsx b/components/badges/UserBadge.tsx
index 149d00e..f0a5435 100644
--- a/components/badges/UserBadge.tsx
+++ b/components/badges/UserBadge.tsx
@@ -9,20 +9,37 @@ interface UserBadge {
   awardedAt: string;
 }
 
+interface BadgeDefinition {
+  id: number;
+  name: string;
+  description: string;
+}
+
 export default function UserBadgesPage() {
-  const [badges, setBadges] = useState<UserBadge[]>([]);
+  const [earned, setEarned] = useState<UserBadge[]>([]);
+  const [allBadges, setAllBadges] = useState<BadgeDefinition[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    async function fetchBadges() {
+    async function load() {
       try {
-        const res = await fetch("/api/badges/user-badges", {
+        const res1 = await fetch("/api/badges/user-badges", {
           credentials: "include",
         });
-        if (!res.ok) throw new Error("Failed to load your badges");
-        const data = (await res.json()) as { badges: UserBadge[] };
-        setBadges(data.badges);
+        if (!res1.ok) throw new Error("Failed to load your badges");
+        const { badges } = (await res1.json()) as { badges: UserBadge[] };
+        setEarned(badges);
+
+        const res2 = await fetch("/api/badges/created-badges", {
+          credentials: "include",
+        });
+        if (!res2.ok) throw new Error("Failed to load badge catalog");
+        const data = (await res2.json()) as {
+          coursesBadges: BadgeDefinition[];
+          courseBadges: BadgeDefinition[];
+        };
+        setAllBadges([...data.coursesBadges, ...data.courseBadges]);
       } catch (err: any) {
         console.error(err);
         setError(err.message);
@@ -30,7 +47,7 @@ export default function UserBadgesPage() {
         setLoading(false);
       }
     }
-    fetchBadges();
+    load();
   }, []);
 
   if (loading) {
@@ -40,7 +57,6 @@ export default function UserBadgesPage() {
       </div>
     );
   }
-
   if (error) {
     return (
       <div className="p-8">
@@ -49,39 +65,67 @@ export default function UserBadgesPage() {
     );
   }
 
-  if (badges.length === 0) {
-    return (
-      <div className="p-8">
-        <h1 className="text-3xl font-bold mb-4 text-purple-600">Your Badges</h1>
-        <p className="text-gray-500">You haven’t earned any badges yet.</p>
-      </div>
-    );
-  }
+  const earnedIds = new Set(earned.map((b) => b.id));
+  const toEarn = allBadges.filter((b) => !earnedIds.has(b.id));
 
   return (
     <div className="p-8">
       <h1 className="text-3xl font-bold mb-6 text-purple-600">Your Badges</h1>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-        {badges.map((b) => (
-          <div
-            key={b.id}
-            className="p-4 border rounded-lg bg-purple-50 flex flex-col"
-          >
-            <h2 className="font-semibold text-lg">{b.name}</h2>
-            {b.description && (
-              <p className="text-gray-700 mt-1 line-clamp-2">{b.description}</p>
-            )}
-            <p className="text-sm text-gray-500 mt-auto">
-              Awarded on{" "}
-              {new Date(b.awardedAt).toLocaleDateString(undefined, {
-                year: "numeric",
-                month: "short",
-                day: "numeric",
-              })}
-            </p>
+
+      {earned.length > 0 && (
+        <section className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Badges Earned</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+            {earned.map((b) => (
+              <div
+                key={b.id}
+                className="p-4 border rounded-lg bg-purple-50 flex flex-col"
+              >
+                <h2 className="font-semibold text-lg">{b.name}</h2>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+                <p className="text-sm text-gray-500 mt-auto">
+                  Awarded on{" "}
+                  {new Date(b.awardedAt).toLocaleDateString(undefined, {
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                  })}
+                </p>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        </section>
+      )}
+
+      {toEarn.length > 0 && (
+        <section>
+          <h2 className="text-2xl font-semibold mb-4">Badges To Earn</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+            {toEarn.map((b) => (
+              <div
+                key={b.id}
+                className="p-4 border rounded-lg bg-gray-100 flex flex-col opacity-60"
+              >
+                <h2 className="font-semibold text-lg">{b.name}</h2>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+                <p className="text-sm text-gray-500 mt-auto">Locked</p>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {earned.length === 0 && toEarn.length === 0 && (
+        <p className="text-gray-500">No badges available yet.</p>
+      )}
     </div>
   );
 }

From 3350bdd3777e50a74fe2af889ee823d7b06b27d2 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 12 Jul 2025 11:04:51 +0800
Subject: [PATCH 09/10] show organisation name in admin dashboard

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

diff --git a/components/dashboard/AdminDashboard.tsx b/components/dashboard/AdminDashboard.tsx
index 23b9c2a..c7076b9 100644
--- a/components/dashboard/AdminDashboard.tsx
+++ b/components/dashboard/AdminDashboard.tsx
@@ -26,6 +26,7 @@ interface Enrollment {
 
 interface AdminDashboardData {
   welcome: string;
+  organisationName: string;
   employees: Employee[];
   enrollments: Enrollment[];
 }
@@ -83,6 +84,7 @@ export default function AdminDashboard() {
   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>
+      <div className="text-lg text-gray-600 mb-4">{data.organisationName}</div>
 
       <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
         <DashboardStat label="Employees" value={totalEmployees} />

From 1334e0ec1178ec7cbb8130bf382b87b9066981ff Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Sat, 12 Jul 2025 11:05:02 +0800
Subject: [PATCH 10/10] Show org name in user dashboard

---
 components/dashboard/UserDashboard.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/UserDashboard.tsx b/components/dashboard/UserDashboard.tsx
index dbdb95c..4618527 100644
--- a/components/dashboard/UserDashboard.tsx
+++ b/components/dashboard/UserDashboard.tsx
@@ -13,6 +13,7 @@ interface Module {
 }
 interface DashboardData {
   welcome: string;
+  organisationName: string;
   currentCourse: Course | null;
   currentModule: Module | null;
   nextToLearn: Module[];
@@ -60,6 +61,7 @@ export default function UserDashboard() {
 
   const {
     welcome,
+    organisationName,
     currentCourse,
     currentModule,
     nextToLearn,
@@ -77,6 +79,9 @@ export default function UserDashboard() {
               <div className="text-3xl md:text-4xl font-bold text-purple-700 mb-2 tracking-tight">
                 {welcome}
               </div>
+              <div className="text-lg text-gray-600 mb-4">
+                {data.organisationName}
+              </div>
             </div>
 
             <div>
@@ -175,7 +180,6 @@ export default function UserDashboard() {
                 <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"