Workingbranch

app/AuthClientProvider.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function AuthClientProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { user, loading } = useAuth();
+
+  useEffect(() => {
+    if (loading) return;
+    if (pathname === "/" || pathname === "/auth") return;
+    if (!user.isLoggedIn) {
+      router.replace("/auth");
+      return;
+    }
+    if (!user.hasCompletedOnboarding && pathname !== "/onboarding") {
+      router.replace("/onboarding");
+    }
+  }, [loading, pathname, user, router]);
+
+  return <>{children}</>;
+}

app/AuthClientServer.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import AuthClientProvider from "./AuthClientProvider";
+
+export default function AuthServerProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <AuthClientProvider>{children}</AuthClientProvider>;
+}

app/auth/page.tsx

@@ -1,4 +1,3 @@
-// app/auth/page.tsx
 import { redirect } from "next/navigation";
 import { getAuthUser } from "@/lib/auth";
 import AuthClient from "./AuthClient";

app/courses/[courseId]/edit/page.tsx

@@ -0,0 +1,24 @@
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import CourseForm from "@/components/organisation/courses/CourseForm";
+
+export default async function EditCoursePage({
+  params,
+}: {
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const { courseId } = await params;
+  if (user?.organisation?.role !== "admin") {
+    redirect(`/courses/${courseId}`);
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Edit Course
+      </h2>
+      <CourseForm mode="edit" courseId={courseId} />
+    </div>
+  );
+}

app/courses/[courseId]/layout.tsx

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+import Link from "next/link";
+import { getAuthUser } from "@/lib/auth";
+
+export default async function CourseLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const isAdmin = user?.organisation?.role === "admin";
+  const { courseId } = await params;
+
+  const response = {
+    id: courseId,
+    name: "Sample Course", // Replace with actual API call to fetch course details
+  };
+  return (
+    <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
+      <nav className="text-sm mb-4">
+        <Link href="/courses" className="text-purple-600 hover:underline">
+          Go to All Courses
+        </Link>
+        {/* <span className="mx-2">/</span>
+        <span className="font-medium">{response.name}</span> */}
+      </nav>
+
+      {isAdmin && (
+        <div className="text-right mb-6 space-x-2">
+          <Link
+            href={`/courses/${response.id}/edit`}
+            className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+          >
+            Edit Course Details
+          </Link>
+          <Link
+            href={`/courses/${response.id}/modules/new`}
+            className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+          >
+            Add new module
+          </Link>
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}

app/courses/[courseId]/modules/[moduleId]/edit/page.tsx

@@ -0,0 +1,27 @@
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import ModuleForm from "@/components/organisation/courses/ModuleForm";
+
+export default async function EditModulePage({
+  params,
+}: {
+  params: { courseId: string; moduleId: string };
+}) {
+  const user = await getAuthUser();
+  const { courseId, moduleId } = await params;
+  if (!courseId || !moduleId) {
+    redirect("/courses");
+  }
+  if (user?.organisation?.role !== "admin") {
+    redirect(`/${courseId}/modules`);
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Edit Module
+      </h2>
+      <ModuleForm mode="edit" courseId={courseId} moduleId={moduleId} />
+    </div>
+  );
+}

app/courses/[courseId]/modules/[moduleId]/page.tsx

@@ -0,0 +1,18 @@
+// app/courses/[courseId]/modules/[moduleId]/page.tsx
+import ModuleDetail, {
+  ModuleDetailData,
+} from "@/components/organisation/courses/ModuleDetail";
+
+export default async function ModulePage({
+  params,
+}: {
+  params: { courseId: string; moduleId: string };
+}) {
+  const { moduleId } = await params;
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <ModuleDetail moduleId={moduleId} />
+    </div>
+  );
+}

app/courses/[courseId]/modules/new/page.tsx

@@ -0,0 +1,27 @@
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import ModuleForm from "@/components/organisation/courses/ModuleForm";
+
+export default async function NewModulePage({
+  params,
+}: {
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const { courseId } = await params;
+  if (!courseId) {
+    redirect("/courses");
+  }
+  if (user?.organisation?.role !== "admin") {
+    redirect(`/${courseId}/modules`);
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Create New Module
+      </h2>
+      <ModuleForm mode="create" courseId={courseId} />
+    </div>
+  );
+}

app/courses/[courseId]/page.tsx

@@ -0,0 +1,14 @@
+import ModuleList from "@/components/organisation/courses/ModuleList";
+import { getAuthUser } from "@/lib/auth";
+
+export default async function CoursePage({
+  params,
+}: {
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const isAdmin = user?.organisation?.role === "admin";
+  const { courseId } = await params;
+
+  return <ModuleList courseId={courseId} isEditMode={isAdmin} />;
+}

app/courses/layout.tsx

@@ -0,0 +1,11 @@
+// app/courses/layout.tsx
+import { ReactNode } from "react";
+
+export default function CoursesLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-white p-6">
+      <h1 className="text-4xl font-bold text-purple-600 mb-8">Courses</h1>
+      {children}
+    </div>
+  );
+}

app/courses/new/page.tsx

@@ -0,0 +1,20 @@
+// app/courses/new/page.tsx
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import CourseForm from "@/components/organisation/courses/CourseForm";
+
+export default async function NewCoursePage() {
+  const user = await getAuthUser();
+  if (user?.organisation?.role !== "admin") {
+    redirect("/courses");
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Create New Course
+      </h2>
+      <CourseForm mode="create" />
+    </div>
+  );
+}

app/courses/page.tsx

@@ -1,8 +1,38 @@
+"use client";
+
+import CourseList from "@/components/organisation/courses/CourseList";
+import { Course } from "@/components/organisation/courses/CourseCard";
+import { useAuth } from "@/context/AuthContext";
+import { useState, useEffect } from "react";
+
 export default function CoursesPage() {
-  return (
-    <div>
-      <h1>Courses</h1>
-      <p>List of courses will be displayed here.</p>
-    </div>
-  );
+  const { user } = useAuth();
+  const [courses, setCourses] = useState<Course[]>([]);
+
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+
+  const isAdmin = user?.organisation?.role === "admin";
+
+  useEffect(() => {
+    // Fetch courses from API or database
+    async function fetchCourses() {
+      // Replace with actual API call
+      const fetchedCourses = await fetch("/api/courses", {
+        credentials: "include",
+      })
+        .then((response) => response.json())
+        .then((data) => data["courses"] || [])
+        .catch((error) => {
+          console.error("Failed to fetch courses:", error);
+          return [];
+        });
+      setCourses(fetchedCourses);
+    }
+    fetchCourses();
+  }, []);
+
+  // 3) Render the client component that will show/hide admin buttons
+  return <CourseList courses={courses} isAdmin={isAdmin} />;
 }

app/dashboard/page.tsx

@@ -1,9 +1,8 @@
-import { redirect } from "next/navigation";
 import { getAuthUser } from "@/lib/auth";
 
 export default async function DashboardPage() {
   const user = await getAuthUser();
-  if (!user) {
+  if (!user || !user.hasCompletedOnboarding) {
     return null;
   }
 
@@ -12,6 +11,7 @@ export default async function DashboardPage() {
       <h1>Welcome, {user.firstname || user.email}</h1>
       <p>Organisation: {user.organisation?.organisationname}</p>
       <p>Role: {user.organisation.role}</p>
+      <p>Dashboard is currently in progress.</p>
     </div>
   );
 }

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { AuthProvider } from "@/context/AuthContext";
 import LayoutClient from "./layoutClient";
+import AuthServerProvider from "./AuthClientServer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,7 +21,9 @@ export default async function RootLayout({
     <html lang="en">
       <body className={`${inter.className} bg-white`}>
         <AuthProvider>
-          <LayoutClient>{children}</LayoutClient>
+          <AuthServerProvider>
+            <LayoutClient>{children}</LayoutClient>
+          </AuthServerProvider>
         </AuthProvider>
       </body>
     </html>

app/layoutClient.tsx

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