Update changes from working branch to main branch

app/organisation/page.tsx

@@ -1,8 +1,31 @@
+"use client";
+
+import { useAuth } from "@/context/AuthContext";
+import ManageTags from "@/components/organisation/settings/ManageTags";
+
 export default function OrganisationsPage() {
+  const { user } = useAuth();
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+
+  const isAdmin = user?.organisation?.role === "admin";
+
+  if (!isAdmin) {
+    return (
+      <div>
+        <h1>My Organisation</h1>
+        <p>You do not have permission to access this page.</p>
+      </div>
+    );
+  }
+
   return (
     <div>
-      <h1>Organisations</h1>
-      <p>List of organisations will be displayed here.</p>
+      <h1 className="text-3xl font-bold mb-4 text-purple-600">
+        My Organisation
+      </h1>
+      <ManageTags />
     </div>
   );
 }

app/reports/page.tsx

@@ -1,8 +1,30 @@
+"use client";
+
+import BasicReport from "@/components/reports/BasicReport";
+import { useAuth } from "@/context/AuthContext";
+import AdminBasicReport from "@/components/reports/AdminBasicReport";
+
 export default function ReportsPage() {
+  const { user } = useAuth();
+  if (!user || !user.hasCompletedOnboarding) {
+    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 ">Reports</h1>
+        <AdminBasicReport />
+      </div>
+    );
+  }
+
   return (
-    <div>
-      <h1>Reports</h1>
-      <p>List of reports will be displayed here.</p>
+    <div className="p-8">
+      <h1 className="text-3xl font-bold mb-4 text-purple-600 ">Reports</h1>
+      <BasicReport />
     </div>
   );
 }

components/organisation/courses/CourseCard.tsx

@@ -2,12 +2,18 @@
 
 import Link from "next/link";
 
+export interface Tag {
+  id: number;
+  name: string;
+}
+
 export interface Course {
   id: number;
   name: string;
   description?: string;
   total_modules?: number;
   completed_modules?: number;
+  tags?: Tag[];
 }
 
 interface Props {
@@ -112,6 +118,19 @@ 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 && (
+        <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}
+            </span>
+          ))}
+        </div>
+      )}
+
       {!isAdmin && isEnrolled && (
         <p className="mt-3 text-sm text-gray-600">
           Progress:{" "}

components/organisation/courses/CourseForm.tsx

@@ -1,14 +1,23 @@
 // components/organisation/courses/CourseForm.tsx
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import Select from "react-select";
 
 export interface Course {
   id: number;
   name: string;
   description?: string;
+  tags?: { id: number; name: string }[];
+}
+interface Tag {
+  id: number;
+  name: string;
+}
+interface Option {
+  value: number;
+  label: string;
 }
 
 interface Props {
@@ -19,121 +28,88 @@ 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 router = useRouter();
 
   useEffect(() => {
-    async function fetchCourse() {
-      const response = await fetch(
-        `http://localhost:4000/api/courses/get-course`,
-        {
-          credentials: "include",
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ courseId }),
-        }
-      ).then((res) => {
-        if (!res.ok) {
-          throw new Error("Failed to fetch course");
-        }
-        return res.json();
-      });
-      setName(response.name);
-      setDescription(response.description || "");
-    }
+    fetch("/api/courses/tags", { credentials: "include" })
+      .then((r) => r.json())
+      .then((tags: Tag[]) => {
+        setAllTags(tags);
+        setOptions(tags.map((t) => ({ value: t.id, label: t.name })));
+      })
+      .catch(console.error);
+
     if (mode === "edit" && courseId) {
-      // Fetch course details if in edit mode
-      fetchCourse().catch((error) => {
-        console.error("Error fetching course:", error);
-        alert("Failed to load course data. Please try again.");
-        router.push("/courses");
-      });
+      fetch("/api/courses/get-course", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ courseId }),
+      })
+        .then((r) => {
+          if (!r.ok) throw new Error();
+          return r.json();
+        })
+        .then((course: Course) => {
+          setName(course.name);
+          setDescription(course.description || "");
+          const pre = (course.tags || []).map((t) => ({
+            value: t.id,
+            label: t.name,
+          }));
+          setSelected(pre);
+        })
+        .catch((_) => {
+          alert("Failed to load course");
+          router.push("/courses");
+        });
     }
-  }, []);
+  }, [mode, courseId, router]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const payload = { courseName: name, description };
-
-    if (mode === "create") {
-      try {
-        const res = await fetch("/api/courses", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          credentials: "include",
-          body: JSON.stringify(payload),
-        });
-        if (!res.ok) {
-          throw new Error("Failed to create course");
-        }
-        const data = await res.json();
-        console.log("Course created:", data);
-        router.push("/courses");
-      } catch (error) {
-        console.error("Error creating course:", error);
-        alert("Failed to create course. Please try again.");
-        return;
-      }
-    } else {
-      try {
-        const res = await fetch("/api/courses", {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          credentials: "include",
-          body: JSON.stringify({ courseId: courseId, ...payload }),
-        });
-        if (!res.ok) {
-          throw new Error("Failed to update course");
-        }
-        const data = await res.json();
-        console.log("Course updated:", data);
-        router.push("/courses");
-      } catch (error) {
-        console.error("Error creating course:", error);
-        alert("Failed to update course. Please try again.");
-        return;
-      }
-    }
-  };
+    const tags = selected.map((o) => o.value);
+    const payload = {
+      courseName: name,
+      description,
+      tags,
+      updateTags: mode === "edit",
+    };
 
-  const handleDelete = async (e: React.FormEvent) => {
-    e.preventDefault();
+    const url = "/api/courses";
+    const method = mode === "create" ? "POST" : "PUT";
+    const body = mode === "create" ? payload : { courseId, ...payload };
 
-    const confirmed = window.confirm(
-      "Are you sure you want to delete this course? This action cannot be undone."
-    );
-    if (!confirmed) {
-      return;
-    }
-    if (!courseId) {
-      alert("Please provide a course name to delete.");
+    const res = await fetch(url, {
+      method,
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      alert(`${mode === "create" ? "Create" : "Update"} failed`);
       return;
     }
-    try {
-      const res = await fetch(`/api/courses`, {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        credentials: "include",
-        body: JSON.stringify({ courseId: courseId }),
-      });
-      if (!res.ok) {
-        throw new Error("Failed to delete course");
-      }
-      const data = await res.json();
-      console.log("Course deleted:", data);
-      router.push("/courses");
-    } catch (error) {
-      console.error("Error deleting course:", error);
-      alert("Failed to delete course. Please try again.");
+    router.push("/courses");
+  };
+
+  const handleDelete = async () => {
+    if (!confirm("Are you sure?")) return;
+    if (!courseId) return;
+    const res = await fetch("/api/courses", {
+      method: "DELETE",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ courseId }),
+    });
+    if (!res.ok) {
+      alert("Delete failed");
       return;
     }
+    router.push("/courses");
   };
 
   return (
@@ -154,10 +130,21 @@ export default function CourseForm({ mode, courseId }: Props) {
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
-          className="w-full mt-1 p-2 border rounded"
           rows={4}
+          className="w-full mt-1 p-2 border rounded"
+        />
+      </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>
+
       <div className="space-x-4">
         <button
           type="submit"
@@ -167,8 +154,9 @@ export default function CourseForm({ mode, courseId }: Props) {
         </button>
         {mode === "edit" && (
           <button
+            type="button"
             className="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded"
-            onClick={(e) => handleDelete(e)}
+            onClick={handleDelete}
           >
             Delete Course
           </button>

components/organisation/courses/ModuleCard.tsx

@@ -5,11 +5,17 @@ import { useParams } from "next/navigation";
 import { useEffect } from "react";
 import { useState } from "react";
 
+export interface Tag {
+  id: number;
+  name: string;
+}
+
 export interface Module {
   id: number;
   title: string;
   module_type: string;
   position: number;
+  tags?: Tag[];
 }
 
 interface Props {
@@ -58,6 +64,18 @@ export default function ModuleCard({ module, isEditMode, isEnrolled }: Props) {
           <p className="text-sm text-gray-500 capitalize">
             {module.module_type}
           </p>
+          {!!module.tags?.length && (
+            <div className="mt-2 flex flex-wrap gap-1">
+              {module.tags.map((t) => (
+                <span
+                  key={t.id}
+                  className="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full"
+                >
+                  {t.name}
+                </span>
+              ))}
+            </div>
+          )}
         </div>
         <div className="flex items-center space-x-2">
           {(isEnrolled || isEditMode) && (