harini

frontend/app/courses/[courseId]/lesson/[lessonId]/page.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import { CourseSidebar } from "@/components/course-sidebar"
+import { LessonViewer } from "@/components/lesson-viewer"
+import { Loader2 } from "lucide-react"
+import { useAuth } from "@/context/auth-context"
+import { useRouter } from "next/navigation"
+import { toast } from "react-hot-toast"
+import { useState, useEffect } from "react"
+import type { Course } from "@/lib/types"
+import api from "@/lib/api" // Corrected import: default import
+
+interface CourseDetailPageProps {
+  params: {
+    courseId: string
+    lessonId: string
+  }
+}
+
+export default function CourseDetailPage({ params }: CourseDetailPageProps) {
+  const { courseId, lessonId } = params
+  const { user, firebaseUser, isLoadingAuth } = useAuth() // Allow firebaseUser
+  const router = useRouter()
+  const [course, setCourse] = useState<Course | null>(null)
+  const [isLoadingCourse, setIsLoadingCourse] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!isLoadingAuth && !user && !firebaseUser) {
+      // Allow either MetaMask or Firebase user
+      toast.error("Please login to view courses.")
+      router.push("/")
+      return
+    }
+
+    const fetchCourse = async () => {
+      setIsLoadingCourse(true)
+      setError(null)
+      try {
+        // --- ORIGINAL API CALL (UNCOMMENT WHEN BACKEND IS READY) ---
+        const response = await api.get<Course>(`/api/courses/${courseId}`)
+        setCourse(response.data)
+      } catch (err: any) {
+        console.error("Failed to fetch course details:", err)
+        setError(err.response?.data?.message || "Failed to load course details.")
+        toast.error(err.response?.data?.message || "Failed to load course details.")
+      } finally {
+        setIsLoadingCourse(false)
+      }
+    }
+
+    if (user || firebaseUser) {
+      // Only fetch if either user type is logged in
+      fetchCourse()
+    }
+  }, [user, firebaseUser, isLoadingAuth, router, courseId])
+
+  if (isLoadingAuth || isLoadingCourse) {
+    return (
+      <div className="flex justify-center items-center min-h-[calc(100vh-64px)]">
+        <Loader2 className="h-8 w-8 animate-spin text-primary-purple" />
+        <span className="ml-2 text-lg">Loading course...</span>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center min-h-[calc(100vh-64px)] text-red-500">
+        <p>{error}</p>
+      </div>
+    )
+  }
+
+  if (!course) {
+    return (
+      <div className="flex justify-center items-center min-h-[calc(100vh-64px)] text-gray-600 dark:text-gray-300">
+        <p className="text-xl">Course not found.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col md:flex-row min-h-[calc(100vh-64px)]">
+      <CourseSidebar courseId={course.id} modules={course.modules} activeLessonId={lessonId} />
+      <div className="flex-1 p-4 md:p-8 overflow-y-auto">
+        <LessonViewer courseId={course.id} lessonId={lessonId} />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,105 @@
+"use client"
+
+import { CourseSidebar } from "@/components/course-sidebar"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Loader2 } from "lucide-react"
+import { useAuth } from "@/context/auth-context"
+import { useRouter } from "next/navigation"
+import { toast } from "react-hot-toast"
+import { useState, useEffect } from "react"
+import type { Course } from "@/lib/types"
+import api from "@/lib/api" // Corrected import: default import
+
+interface CourseOverviewPageProps {
+  params: {
+    courseId: string
+  }
+}
+
+export default function CourseOverviewPage({ params }: CourseOverviewPageProps) {
+  const { courseId } = params
+  const { user, firebaseUser, isLoadingAuth } = useAuth() // Allow firebaseUser
+  const router = useRouter()
+  const [course, setCourse] = useState<Course | null>(null)
+  const [isLoadingCourse, setIsLoadingCourse] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!isLoadingAuth && !user && !firebaseUser) {
+      // Allow either MetaMask or Firebase user
+      toast.error("Please login to view courses.")
+      router.push("/")
+      return
+    }
+
+    const fetchCourse = async () => {
+      setIsLoadingCourse(true)
+      setError(null)
+      try {
+        // --- ORIGINAL API CALL (UNCOMMENT WHEN BACKEND IS READY) ---
+        const response = await api.get<Course>(`/api/courses/${courseId}`)
+        setCourse(response.data)
+      } catch (err: any) {
+        console.error("Failed to fetch course details:", err)
+        setError(err.response?.data?.message || "Failed to load course details.")
+        toast.error(err.response?.data?.message || "Failed to load course details.")
+      } finally {
+        setIsLoadingCourse(false)
+      }
+    }
+
+    if (user || firebaseUser) {
+      // Only fetch if either user type is logged in
+      fetchCourse()
+    }
+  }, [user, firebaseUser, isLoadingAuth, router, courseId])
+
+  useEffect(() => {
+    if (course && course.modules.length > 0 && course.modules[0].lessons.length > 0) {
+      // Redirect to the first lesson of the course
+      router.replace(`/courses/${courseId}/lesson/${course.modules[0].lessons[0].id}`)
+    }
+  }, [course, courseId, router])
+
+  if (isLoadingAuth || isLoadingCourse) {
+    return (
+      <div className="flex justify-center items-center min-h-[calc(100vh-64px)]">
+        <Loader2 className="h-8 w-8 animate-spin text-primary-purple" />
+        <span className="ml-2 text-lg">Loading course...</span>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center items-center min-h-[calc(100vh-64px)] text-red-500">
+        <p>{error}</p>
+      </div>
+    )
+  }
+
+  if (!course) {
+    return (
+      <div className="flex justify-center items-center min-h-[calc(100vh-64px)] text-gray-600 dark:text-gray-300">
+        <p className="text-xl">Course not found.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col md:flex-row min-h-[calc(100vh-64px)]">
+      <CourseSidebar courseId={course.id} modules={course.modules} activeLessonId="" />
+      <div className="flex-1 p-4 md:p-8 overflow-y-auto">
+        <Card className="bg-white shadow-md rounded-lg p-6 dark:bg-gray-800 dark:text-gray-100">
+          <CardHeader>
+            <CardTitle className="text-2xl font-bold text-primary-purple">{course.title} Overview</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-lg text-gray-700 dark:text-gray-200">{course.description}</p>
+            <p className="text-gray-600 dark:text-gray-300">Select a lesson from the sidebar to begin.</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

frontend/app/courses/page.tsx

@@ -0,0 +1,5 @@
+import { CourseList } from "@/components/course-list"
+
+export default function CoursesPage() {
+  return <CourseList />
+}