import { Head, Link } from '@inertiajs/react'; import { ArrowUpRight, BookOpen, CheckCircle2, Clock, GraduationCap, Sparkles, Users, } from 'lucide-react'; import { useState } from 'react'; import AppLayout from '@/layouts/app-layout'; import { cn } from '@/lib/utils'; type Category = { id: number; name: string; slug?: string } | null; type EnrolledCourse = { id: number; status: 'active' | 'completed'; course: { id: number; title: string; slug: string; thumbnail: string | null; duration_minutes: number; category: Category; }; progress_percent: number; completed_lessons: number; total_lessons: number; }; type SuggestedCourse = { id: number; title: string; slug: string; thumbnail: string | null; level: string; price_type: 'free' | 'paid'; price: number; duration_minutes: number; enrollments_count: number; lessons_count: number; instructor: { id: number; name: string }; category: Category; }; type Props = { enrollments: EnrolledCourse[]; suggestedCourses: SuggestedCourse[]; }; type FilterTab = 'all' | 'active' | 'completed'; const LEVEL_LABELS: Record = { beginner: 'Pemula', intermediate: 'Menengah', advanced: 'Mahir', }; const LEVEL_COLORS: Record = { beginner: 'bg-teal-100 text-teal-600', intermediate: 'bg-amber-100 text-amber-600', advanced: 'bg-rose-100 text-rose-500', }; function formatDuration(minutes: number): string { if (!minutes) return ''; if (minutes < 60) return `${minutes} mnt`; const h = Math.floor(minutes / 60); const m = minutes % 60; return m > 0 ? `${h}j ${m}mnt` : `${h} jam`; } function formatPrice(price: number): string { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0, }).format(price); } export default function MyCoursesIndex({ enrollments, suggestedCourses }: Props) { const [activeTab, setActiveTab] = useState('all'); const tabs: { key: FilterTab; label: string; count: number }[] = [ { key: 'all', label: 'Semua', count: enrollments.length }, { key: 'active', label: 'Aktif', count: enrollments.filter((e) => e.status === 'active').length }, { key: 'completed', label: 'Selesai', count: enrollments.filter((e) => e.status === 'completed').length }, ]; const filtered = enrollments.filter((e) => { if (activeTab === 'active') return e.status === 'active'; if (activeTab === 'completed') return e.status === 'completed'; return true; }); const hasEnrollments = enrollments.length > 0; return ( <>
{/* ── My enrolled courses ─────────────────────────── */}
{/* Header */}

Kelas Saya

{hasEnrollments ? `${enrollments.length} kelas yang kamu ikuti` : 'Belum ada kelas yang diikuti'}

{hasEnrollments ? ( <> {/* Tabs */}
{tabs.map((tab) => ( ))}
{/* Enrolled cards grid */} {filtered.length === 0 ? (

{activeTab === 'completed' ? 'Belum ada kelas selesai' : 'Tidak ada kelas aktif'}

) : (
{filtered.map((item) => { const isCompleted = item.status === 'completed'; return ( {/* Thumbnail */}
{item.course.thumbnail ? ( {item.course.title} ) : (
)} {/* Status badge */}
{isCompleted && } {isCompleted ? 'Selesai' : 'Aktif'}
{/* Progress bar overlay */}
{/* Body */}
{item.course.category && ( {item.course.category.name} )}

{item.course.title}

{/* Progress info */}
{item.completed_lessons}/{item.total_lessons} pelajaran {item.progress_percent}%
{/* CTA */}
{isCompleted ? 'Lihat Kembali' : 'Lanjutkan Belajar'}
); })}
)} ) : ( /* Empty hero — pastel */

Mulai Belajar Sekarang!

Pilih kelas di bawah dan tingkatkan skillmu bersama ribuan pelajar lainnya.

)}
{/* ── Divider ─────────────────────────────────────── */} {suggestedCourses.length > 0 && (
{hasEnrollments ? 'Kelas Lainnya' : 'Pilih Kelasmu'}
)} {/* ── Suggested courses ─────────────────────────── */} {suggestedCourses.length > 0 && (

{hasEnrollments ? 'Kelas yang Mungkin Kamu Suka' : 'Semua Kelas Tersedia'}

Lihat semua →
{suggestedCourses.map((course) => ( {/* Thumbnail */}
{course.thumbnail ? ( {course.title} ) : (
)}
{/* Body */}
{/* Category + Level */}
{course.category && ( {course.category.name} )} {LEVEL_LABELS[course.level] ?? course.level}
{/* Title */}

{course.title}

{/* Instructor */}

{course.instructor.name}

{/* Price */}
{course.price_type === 'free' ? 'Gratis' : formatPrice(course.price)}
{/* Stats */}
{course.lessons_count} lesson {course.duration_minutes > 0 && ( {formatDuration(course.duration_minutes)} )} {course.enrollments_count.toLocaleString('id-ID')}
{/* CTA */}
Lihat Detail
))}
)}
); } MyCoursesIndex.layout = (page: React.ReactNode) => {page};