advance

app/(public)/courses/page.tsx

@@ -1,115 +1,93 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
 import CourseCard from "@/components/CourseCard";
-import Tabs from "@/components/Tabs";
-import { getAllCourses } from "@/lib/data/courseCatalog";
-import {
-  getCourseProgressPercent,
-  progressUpdatedEventName,
-} from "@/lib/progress/localProgress";
-import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
-import { supabaseBrowser } from "@/lib/supabase/browser";
-import type { Course, CourseLevel } from "@/types/course";
+import { db } from "@/lib/prisma";
 
-const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
-
-export default function CoursesPage() {
-  const [activeLevel, setActiveLevel] = useState<CourseLevel>("Beginner");
-  const [userId, setUserId] = useState("guest");
-  const [progressBySlug, setProgressBySlug] = useState<Record<string, number>>({});
-  const [courses, setCourses] = useState<Course[]>(() => getAllCourses());
-
-  const counts = useMemo(
-    () =>
-      levels.reduce(
-        (acc, level) => {
-          acc[level] = courses.filter((course) => course.level === level).length;
-          return acc;
+export default async function CoursesPage() {
+  const courses = await db.course.findMany({
+    where: {
+      status: "PUBLISHED",
+    },
+    include: {
+      author: {
+        select: {
+          fullName: true,
         },
-        {} as Record<CourseLevel, number>,
-      ),
-    [courses],
-  );
+      },
+      modules: {
+        select: {
+          _count: {
+            select: {
+              lessons: true,
+            },
+          },
+        },
+      },
+      _count: {
+        select: {
+          enrollments: true,
+        },
+      },
+    },
+    orderBy: {
+      updatedAt: "desc",
+    },
+  });
 
-  useEffect(() => {
-    const loadCourses = () => {
-      setCourses(getAllCourses());
-    };
-
-    loadCourses();
-    window.addEventListener(teacherCoursesUpdatedEventName, loadCourses);
-    return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourses);
-  }, []);
-
-  useEffect(() => {
-    const client = supabaseBrowser();
-    if (!client) return;
-
-    client.auth.getUser().then(({ data }) => {
-      setUserId(data.user?.id ?? "guest");
-    });
-
-    const { data } = client.auth.onAuthStateChange((_event, session) => {
-      setUserId(session?.user?.id ?? "guest");
-    });
-
-    return () => data.subscription.unsubscribe();
-  }, []);
-
-  useEffect(() => {
-    const load = () => {
-      const nextProgress: Record<string, number> = {};
-      for (const course of courses) {
-        nextProgress[course.slug] = getCourseProgressPercent(userId, course.slug, course.lessons.length);
-      }
-      setProgressBySlug(nextProgress);
-    };
-
-    load();
-    window.addEventListener(progressUpdatedEventName, load);
-    window.addEventListener(teacherCoursesUpdatedEventName, load);
-    return () => {
-      window.removeEventListener(progressUpdatedEventName, load);
-      window.removeEventListener(teacherCoursesUpdatedEventName, load);
-    };
-  }, [courses, userId]);
-
-  const filteredCourses = useMemo(
-    () => courses.filter((course) => course.level === activeLevel),
-    [activeLevel, courses],
+  const totalLessons = courses.reduce(
+    (total, course) => total + course.modules.reduce((courseTotal, module) => courseTotal + module._count.lessons, 0),
+    0,
   );
 
   return (
-    <div className="space-y-8">
-      <section className="acve-panel p-5">
-        <div className="flex flex-wrap items-center gap-4">
-          <Tabs active={activeLevel} onChange={setActiveLevel} options={levels} />
-          <span className="text-base font-semibold text-slate-600">{counts[activeLevel]} courses in this level</span>
-        </div>
-      </section>
-
-      <section className="acve-panel px-6 py-8">
-        <div className="flex items-start gap-4">
-          <div className="mt-1 flex h-12 w-12 items-center justify-center rounded-xl bg-accent text-2xl font-semibold text-white">C</div>
-          <div>
-            <h1 className="text-3xl text-[#202a39] md:text-5xl">{activeLevel} Level Courses</h1>
-            <p className="mt-2 text-base text-slate-600 md:text-2xl">
-              {activeLevel === "Beginner"
-                ? "Perfect for those new to English law. Build a strong foundation with fundamental concepts and terminology."
-                : activeLevel === "Intermediate"
-                  ? "Deepen practical analysis skills with real-world drafting, contract review, and legal communication."
-                  : "Master complex legal reasoning and advanced writing for high-impact legal practice."}
+    <div className="acve-page">
+      <section className="acve-panel overflow-hidden p-0">
+        <div className="grid gap-0 lg:grid-cols-[1.45fr_0.95fr]">
+          <div className="acve-section-base">
+            <p className="acve-pill mb-4 w-fit">Course Catalog</p>
+            <h1 className="text-3xl font-semibold leading-tight text-[#202a39] md:text-4xl">Build your legal English learning path</h1>
+            <p className="mt-3 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
+              Discover our published legal English courses and start with the path that matches your level.
             </p>
+            <div className="mt-5 grid gap-3 sm:grid-cols-3">
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Total Courses</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">{courses.length}</p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Published Lessons</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">{totalLessons}</p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructors</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">
+                  {new Set(courses.map((course) => course.author.fullName || "ACVE Team")).size}
+                </p>
+              </div>
+            </div>
           </div>
+
+          <aside className="border-t border-slate-200 bg-slate-50/80 p-5 lg:border-l lg:border-t-0">
+            <h2 className="text-base font-semibold text-slate-800">Open Access</h2>
+            <p className="mt-2 text-sm text-slate-600">
+              This catalog is public. Open any course card to visit the landing page and enroll.
+            </p>
+          </aside>
         </div>
       </section>
 
-      <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
-        {filteredCourses.map((course) => (
-          <CourseCard key={course.slug} course={course} progress={progressBySlug[course.slug] ?? 0} />
-        ))}
-      </div>
+      {courses.length === 0 ? (
+        <section className="acve-panel acve-section-base">
+          <div className="rounded-xl border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center">
+            <h2 className="text-2xl font-semibold text-slate-900">Coming Soon</h2>
+            <p className="mt-2 text-slate-600">We are preparing new courses. Please check back shortly.</p>
+          </div>
+        </section>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {courses.map((course) => (
+            <CourseCard key={course.slug} course={course} />
+          ))}
+        </div>
+      )}
     </div>
   );
 }