import { Head, Link } from '@inertiajs/react'; import { Award, BookOpen, CheckCircle2, ChevronLeft, ClipboardList, Clock, FileText, GraduationCap, Play, PlayCircle, } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; import { cn } from '@/lib/utils'; type Lesson = { id: number; title: string; type: string; duration_minutes: number; order: number }; type Quiz = { id: number; title: string; duration_minutes: number; deadline: string | null; order: number }; type Assignment = { id: number; title: string; deadline: string | null; order: number }; type Chapter = { id: number; title: string; order: number; lessons: Lesson[]; quizzes: Quiz[]; assignments: Assignment[] }; type Props = { course: { id: number; title: string; slug: string; thumbnail: string | null; description: string | null; level: string; duration_minutes: number; instructor: { id: number; name: string; bio: string | null }; category: { id: number; name: string } | null; chapters: Chapter[]; }; enrollment: { id: number; status: 'active' | 'completed'; target_completion_date: string | null; enrolled_at: string | null; }; completedLessonIds: number[]; completedQuizIds: number[]; completedAssignmentIds: number[]; progress: { total: number; completed: number; percent: number }; }; const levelLabels: Record = { beginner: 'Pemula', intermediate: 'Menengah', advanced: 'Mahir', }; function formatDuration(minutes: number): string { if (minutes < 60) return `${minutes} menit`; const h = Math.floor(minutes / 60); const m = minutes % 60; return m > 0 ? `${h} jam ${m} menit` : `${h} jam`; } function lessonTypeLabel(type: string): string { if (type === 'video') return 'Video'; if (type === 'pdf') return 'Dokumen PDF'; return 'Materi'; } function LessonIcon({ type, done }: { type: string; done: boolean }) { if (done) return ; if (type === 'video') return ; if (type === 'pdf') return ; return ; } export default function MyCourseShow({ course, enrollment, completedLessonIds, completedQuizIds, completedAssignmentIds, progress, }: Props) { const completedLessonSet = new Set(completedLessonIds); const completedQuizSet = new Set(completedQuizIds); const completedAssignmentSet = new Set(completedAssignmentIds); const isCompleted = enrollment.status === 'completed'; const allLessons = course.chapters.flatMap((ch) => ch.lessons); const nextLesson = allLessons.find((l) => !completedLessonSet.has(l.id)) ?? allLessons[0]; const totalQuizzes = course.chapters.reduce((s, ch) => s + ch.quizzes.length, 0); const totalAssignments = course.chapters.reduce((s, ch) => s + ch.assignments.length, 0); return ( <> {/* Pastel page background */}
{/* Back */} Kelas Saya {/* ── COURSE HEADER ─────────────────────────────────── */}
{/* Thumbnail */} {course.thumbnail ? (
{course.title}
{isCompleted && (
Selesai
)}
) : (
)}
{course.category && ( {course.category.name} )}

{course.title}

oleh {course.instructor.name} · {levelLabels[course.level] ?? course.level} ·{' '} {formatDuration(course.duration_minutes)}

{/* Progress */}
{progress.completed} dari {progress.total} materi selesai {progress.percent}%
{/* Stats row */}
{allLessons.length} materi {totalQuizzes > 0 && ( {totalQuizzes} kuis )} {totalAssignments > 0 && ( {totalAssignments} tugas )} {enrollment.target_completion_date && ( Target:{' '} {new Date(enrollment.target_completion_date).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric', })} )}
{/* CTA */} {nextLesson && (
{progress.completed === 0 ? 'Mulai Belajar' : 'Lanjutkan Belajar'}
)} {!nextLesson && (
Kelas Sudah Selesai!
)}
{/* ── CURRICULUM ──────────────────────────────────────── */}

Daftar Materi

{course.chapters.map((chapter, idx) => { const chapterLessons = chapter.lessons; const chapterCompletedLessons = chapterLessons.filter((l) => completedLessonSet.has(l.id)).length; const chapterCompletedQuizzes = chapter.quizzes.filter((q) => completedQuizSet.has(q.id)).length; const chapterCompletedAssignments = chapter.assignments.filter((a) => completedAssignmentSet.has(a.id)).length; const chapterCompleted = chapterCompletedLessons + chapterCompletedQuizzes + chapterCompletedAssignments; const chapterTotal = chapterLessons.length + chapter.quizzes.length + chapter.assignments.length; const chapterDone = chapterTotal > 0 && chapterLessons.every((l) => completedLessonSet.has(l.id)) && chapter.quizzes.every((q) => completedQuizSet.has(q.id)) && chapter.assignments.every((a) => completedAssignmentSet.has(a.id)); return (
{/* Chapter header */}
{chapterDone ? : idx + 1}

{chapter.title}

{chapterCompleted}/{chapterTotal} selesai
{/* Items */} {chapterTotal > 0 && (
{chapter.lessons.map((lesson) => { const done = completedLessonSet.has(lesson.id); return (

{lesson.title}

{lessonTypeLabel(lesson.type)} {lesson.duration_minutes > 0 && ` · ${lesson.duration_minutes} menit`}

{done ? ( ) : ( )} ); })} {chapter.quizzes.map((quiz) => { const done = completedQuizSet.has(quiz.id); return (
{done ? ( ) : ( )}

{quiz.title}

Kuis · {quiz.duration_minutes} menit {quiz.deadline && ( <> {' · Deadline: '} {new Date(quiz.deadline).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', })} )}

{done ? ( ) : ( )} ); })} {chapter.assignments.map((assignment) => { const done = completedAssignmentSet.has(assignment.id); return (
{done ? ( ) : ( )}

{assignment.title}

Tugas {assignment.deadline && ( <> {' · Deadline: '} {new Date(assignment.deadline).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', })} )}

{done ? ( ) : ( )} ); })}
)}
); })}
); } MyCourseShow.layout = (page: React.ReactNode) => {page};