Updated project with latest changes

frontend/app/admin/courses/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
-import { Edit, Plus, Trash2 } from "lucide-react"
+import { Edit, Plus, Trash2, ListTree } from "lucide-react"
 
 type Course = {
   id: string
@@ -15,6 +15,26 @@ type Course = {
   students: number
 }
 
+type Module = {
+  id: string
+  course_id: string
+  title: string
+  description?: string
+  order: number
+}
+
+type Lesson = {
+  id: string
+  module_id: string
+  course_id: string
+  title: string
+  description?: string
+  video_url?: string
+  order: number
+  duration?: string
+  type?: string
+}
+
 const API_BASE = "http://127.0.0.1:5000"
 
 export default function AdminCoursesPage() {
@@ -24,6 +44,7 @@ export default function AdminCoursesPage() {
   const [loading, setLoading] = useState(true)
   const [showAdd, setShowAdd] = useState(false)
   const [editing, setEditing] = useState<Course | null>(null)
+  const [managing, setManaging] = useState<Course | null>(null)
 
   const getToken = () => localStorage.getItem("admin_token")
   const headers = () => {
@@ -160,12 +181,19 @@ export default function AdminCoursesPage() {
                 courses.map((course) => (
                   <tr key={course.id}>
                     <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{course.title}</td>
-                    <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">{course.subject}</td>
-                    <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">{course.difficulty}</td>
-                    <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">{course.mentor}</td>
+                    <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">{course.subject?.trim() || "—"}</td>
+                    <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">{course.difficulty?.trim() || "—"}</td>
+                    <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">{course.mentor?.trim() || "—"}</td>
                     <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">{Number(course.students || 0).toLocaleString()}</td>
                     <td className="px-4 py-3 text-sm">
                       <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => setManaging(course)}
+                          className="rounded p-1.5 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-950/30"
+                          title="Manage modules & lessons"
+                        >
+                          <ListTree className="h-4 w-4" />
+                        </button>
                         <button
                           onClick={() => setEditing(course)}
                           className="rounded p-1.5 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-950/30"
@@ -201,6 +229,13 @@ export default function AdminCoursesPage() {
           onSubmit={(payload) => saveCourse(payload, editing?.id)}
         />
       )}
+
+      {managing && (
+        <CourseContentModal
+          course={managing}
+          onClose={() => setManaging(null)}
+        />
+      )}
     </div>
   )
 }
@@ -293,3 +328,326 @@ function CourseFormModal({
     </div>
   )
 }
+
+function CourseContentModal({
+  course,
+  onClose,
+}: {
+  course: Course
+  onClose: () => void
+}) {
+  const [modules, setModules] = useState<Module[]>([])
+  const [lessonsByModule, setLessonsByModule] = useState<Record<string, Lesson[]>>({})
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [moduleForm, setModuleForm] = useState({
+    title: "",
+    description: "",
+    order: 1,
+  })
+  const [lessonModuleId, setLessonModuleId] = useState<string | null>(null)
+  const [lessonForm, setLessonForm] = useState({
+    title: "",
+    description: "",
+    video_url: "",
+    order: 1,
+    duration: "",
+    type: "video",
+  })
+
+  const adminHeaders = () => {
+    const token = localStorage.getItem("admin_token")
+    return token
+      ? { "Content-Type": "application/json", Authorization: `Bearer ${token}` }
+      : { "Content-Type": "application/json" }
+  }
+
+  const loadModules = async () => {
+    setLoading(true)
+    try {
+      const resp = await fetch(`${API_BASE}/api/admin/courses/${course.id}/modules`, {
+        headers: adminHeaders(),
+      })
+      if (!resp.ok) {
+        setModules([])
+        setLessonsByModule({})
+        return
+      }
+      const data = await resp.json()
+      const list = Array.isArray(data?.modules) ? data.modules : Array.isArray(data) ? data : []
+      list.sort((a: Module, b: Module) => (a.order || 0) - (b.order || 0))
+      setModules(list)
+
+      const lessonsMap: Record<string, Lesson[]> = {}
+      await Promise.all(
+        list.map(async (module: Module) => {
+          const lessonsResp = await fetch(`${API_BASE}/api/admin/modules/${module.id}/lessons`, {
+            headers: adminHeaders(),
+          })
+          if (!lessonsResp.ok) {
+            lessonsMap[module.id] = []
+            return
+          }
+          const lessonsData = await lessonsResp.json()
+          const lessonsList = Array.isArray(lessonsData?.lessons)
+            ? lessonsData.lessons
+            : Array.isArray(lessonsData)
+              ? lessonsData
+              : []
+          lessonsList.sort((a: Lesson, b: Lesson) => (a.order || 0) - (b.order || 0))
+          lessonsMap[module.id] = lessonsList
+        })
+      )
+      setLessonsByModule(lessonsMap)
+      setModuleForm((prev) => ({ ...prev, order: list.length + 1 }))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const createModule = async () => {
+    if (!moduleForm.title.trim()) return
+    setSaving(true)
+    try {
+      const resp = await fetch(`${API_BASE}/api/admin/courses/${course.id}/modules`, {
+        method: "POST",
+        headers: adminHeaders(),
+        body: JSON.stringify({
+          title: moduleForm.title.trim(),
+          description: moduleForm.description.trim(),
+          order: Number(moduleForm.order) || 1,
+        }),
+      })
+      if (!resp.ok) {
+        alert("Failed to create module")
+        return
+      }
+      setModuleForm({ title: "", description: "", order: moduleForm.order + 1 })
+      await loadModules()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const deleteModule = async (moduleId: string) => {
+    if (!confirm("Delete this module and all its lessons?")) return
+    const resp = await fetch(`${API_BASE}/api/admin/modules/${moduleId}`, {
+      method: "DELETE",
+      headers: adminHeaders(),
+    })
+    if (!resp.ok) {
+      alert("Failed to delete module")
+      return
+    }
+    await loadModules()
+  }
+
+  const createLesson = async (moduleId: string) => {
+    if (!lessonForm.title.trim()) return
+    setSaving(true)
+    try {
+      const resp = await fetch(`${API_BASE}/api/admin/modules/${moduleId}/lessons`, {
+        method: "POST",
+        headers: adminHeaders(),
+        body: JSON.stringify({
+          title: lessonForm.title.trim(),
+          description: lessonForm.description.trim(),
+          video_url: lessonForm.video_url.trim(),
+          order: Number(lessonForm.order) || 1,
+          duration: lessonForm.duration.trim() || undefined,
+          type: lessonForm.type.trim() || "video",
+        }),
+      })
+      if (!resp.ok) {
+        alert("Failed to create lesson")
+        return
+      }
+      setLessonForm({ title: "", description: "", video_url: "", order: lessonForm.order + 1, duration: "", type: "video" })
+      setLessonModuleId(null)
+      await loadModules()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const deleteLesson = async (lessonId: string) => {
+    if (!confirm("Delete this lesson?")) return
+    const resp = await fetch(`${API_BASE}/api/admin/lessons/${lessonId}`, {
+      method: "DELETE",
+      headers: adminHeaders(),
+    })
+    if (!resp.ok) {
+      alert("Failed to delete lesson")
+      return
+    }
+    await loadModules()
+  }
+
+  useEffect(() => {
+    loadModules()
+  }, [course.id])
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/35 p-4">
+      <div className="w-full max-w-5xl rounded-xl border border-gray-200 bg-white p-6 shadow-xl dark:border-gray-800 dark:bg-gray-900">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Manage Modules & Lessons</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">{course.title}</p>
+          </div>
+          <button onClick={onClose} className="rounded-md bg-gray-100 px-3 py-2 text-sm hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700">
+            Close
+          </button>
+        </div>
+
+        <div className="mt-4 grid gap-4 lg:grid-cols-2">
+          <div className="rounded-lg border border-gray-200 p-4 dark:border-gray-700">
+            <h4 className="text-sm font-semibold text-gray-900 dark:text-white">Add Module</h4>
+            <div className="mt-3 grid gap-3">
+              <input
+                placeholder="Module title"
+                value={moduleForm.title}
+                onChange={(e) => setModuleForm({ ...moduleForm, title: e.target.value })}
+                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+              />
+              <textarea
+                placeholder="Module description"
+                value={moduleForm.description}
+                onChange={(e) => setModuleForm({ ...moduleForm, description: e.target.value })}
+                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+                rows={2}
+              />
+              <input
+                placeholder="Order"
+                type="number"
+                min={1}
+                value={moduleForm.order}
+                onChange={(e) => setModuleForm({ ...moduleForm, order: Number(e.target.value) || 1 })}
+                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+              />
+              <button
+                onClick={createModule}
+                disabled={saving}
+                className="self-start rounded-md bg-blue-600 px-3 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-60"
+              >
+                {saving ? "Saving..." : "Add Module"}
+              </button>
+            </div>
+          </div>
+
+          <div className="rounded-lg border border-gray-200 p-4 dark:border-gray-700">
+            <h4 className="text-sm font-semibold text-gray-900 dark:text-white">Modules</h4>
+            {loading ? (
+              <p className="mt-3 text-sm text-gray-600 dark:text-gray-400">Loading modules...</p>
+            ) : modules.length === 0 ? (
+              <p className="mt-3 text-sm text-gray-600 dark:text-gray-400">No modules yet.</p>
+            ) : (
+              <div className="mt-3 space-y-3">
+                {modules.map((module) => (
+                  <div key={module.id} className="rounded-md border border-gray-200 p-3 dark:border-gray-700">
+                    <div className="flex items-start justify-between gap-3">
+                      <div>
+                        <div className="text-sm font-semibold text-gray-900 dark:text-white">{module.title}</div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400">Order {module.order}</div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => setLessonModuleId(module.id)}
+                          className="rounded-md bg-indigo-600 px-2 py-1 text-xs text-white hover:bg-indigo-700"
+                        >
+                          Add Lesson
+                        </button>
+                        <button
+                          onClick={() => deleteModule(module.id)}
+                          className="rounded-md bg-red-600 px-2 py-1 text-xs text-white hover:bg-red-700"
+                        >
+                          Delete
+                        </button>
+                      </div>
+                    </div>
+
+                    <div className="mt-2 space-y-2">
+                      {(lessonsByModule[module.id] || []).map((lesson) => (
+                        <div key={lesson.id} className="flex items-center justify-between rounded-md bg-gray-50 px-2 py-1 text-xs dark:bg-gray-800">
+                          <span className="text-gray-700 dark:text-gray-300">
+                            {lesson.order}. {lesson.title}
+                          </span>
+                          <button
+                            onClick={() => deleteLesson(lesson.id)}
+                            className="text-red-600 hover:text-red-700"
+                          >
+                            Delete
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+
+                    {lessonModuleId === module.id && (
+                      <div className="mt-3 grid gap-2 rounded-md border border-gray-200 p-3 dark:border-gray-700">
+                        <input
+                          placeholder="Lesson title"
+                          value={lessonForm.title}
+                          onChange={(e) => setLessonForm({ ...lessonForm, title: e.target.value })}
+                          className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+                        />
+                        <input
+                          placeholder="Lesson description"
+                          value={lessonForm.description}
+                          onChange={(e) => setLessonForm({ ...lessonForm, description: e.target.value })}
+                          className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+                        />
+                        <input
+                          placeholder="Video URL"
+                          value={lessonForm.video_url}
+                          onChange={(e) => setLessonForm({ ...lessonForm, video_url: e.target.value })}
+                          className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+                        />
+                        <div className="grid grid-cols-1 gap-2 md:grid-cols-3">
+                          <input
+                            placeholder="Order"
+                            type="number"
+                            min={1}
+                            value={lessonForm.order}
+                            onChange={(e) => setLessonForm({ ...lessonForm, order: Number(e.target.value) || 1 })}
+                            className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+                          />
+                          <input
+                            placeholder="Duration"
+                            value={lessonForm.duration}
+                            onChange={(e) => setLessonForm({ ...lessonForm, duration: e.target.value })}
+                            className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+                          />
+                          <input
+                            placeholder="Type"
+                            value={lessonForm.type}
+                            onChange={(e) => setLessonForm({ ...lessonForm, type: e.target.value })}
+                            className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+                          />
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <button
+                            onClick={() => createLesson(module.id)}
+                            disabled={saving}
+                            className="rounded-md bg-blue-600 px-3 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-60"
+                          >
+                            {saving ? "Saving..." : "Save Lesson"}
+                          </button>
+                          <button
+                            onClick={() => setLessonModuleId(null)}
+                            className="rounded-md bg-gray-100 px-3 py-2 text-sm hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                          >
+                            Cancel
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}