import { Head, Link } from '@inertiajs/react'; import { BookOpen, CheckCircle2, ChevronRight, Clock, Lock, Map } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type Course = { id: number; title: string; slug: string; thumbnail: string | null; level: string; price_type: string; price: number; duration_minutes: number; order: number; enrollment_status: 'active' | 'completed' | null; progress_percent: number; }; type Path = { id: number; title: string; slug: string; description: string | null; thumbnail: string | null }; type Stats = { total: number; completed: number; progress_percent: number }; type Props = { path: Path; courses: Course[]; stats: Stats }; function levelLabel(level: string) { const map: Record = { beginner: 'Pemula', intermediate: 'Menengah', advanced: 'Lanjutan' }; return map[level] ?? level; } export default function LearningPathShow({ path, courses, stats }: Props) { return ( <>
{/* Premium Pastel Blue Header Card */}
{/* Decorative glowing background bubbles */}
{path.thumbnail ? (
{path.title}
) : (
)}
Paket Belajar

{path.title}

{path.description && (

{path.description}

)}
{stats.total} kelas {stats.completed} selesai
{/* Progress bar */} {stats.total > 0 && (
Progress Keseluruhan {stats.progress_percent}% selesai
)} {/* Course list */}
{courses.map((course, index) => { const isCompleted = course.enrollment_status === 'completed'; const isActive = course.enrollment_status === 'active'; const isNotEnrolled = !course.enrollment_status; return (
{/* Timeline line */} {index < courses.length - 1 && (
)} {/* Step icon */}
{isCompleted ? ( ) : isActive ? ( ) : ( {index + 1} )}
{/* Premium Card */}
{course.thumbnail ? ( {course.title} ) : (
)}

{course.title}

{levelLabel(course.level)} {course.duration_minutes > 0 && ( <> • {course.duration_minutes} mnt )} {isNotEnrolled && ( <> • {course.price_type === 'free' ? ( ✦ Gratis ) : ( {course.price ? `Rp ${course.price.toLocaleString('id-ID')}` : 'Berbayar'} )} )}
{isActive && (
Progress belajar {course.progress_percent}%
)} {isCompleted && (
Selesai dipelajari
)}
); })}
); } LearningPathShow.layout = (page: React.ReactNode) => { const props = (page as React.ReactElement)?.props as Props | undefined; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Paket Belajar', href: '/learning-paths' }, { title: props?.path?.title || 'Detail', href: props?.path?.slug ? `/learning-paths/${props.path.slug}` : '#' }, ]; return {page}; };