import UserLayout from '@/Layouts/UserLayout'; import { Head, Link } from '@inertiajs/react'; import { BookOpen, Clock, ChevronRight, PlayCircle, Trophy } from 'lucide-react'; interface Lesson { id: number; } interface Module { id: number; lessons: Lesson[]; } interface Product { id: number; name: string; slug: string; image_path: string | null; media?: { url: string }; modules: Module[]; } interface Enrollment { id: number; product: Product; status: string; completed_at: string | null; } interface Props { enrollments: Enrollment[]; userProgress: { course_lesson_id: number }[]; } export default function Dashboard({ enrollments, userProgress }: Props) { return (

My Learning

Welcome back! Pick up where you left off and continue your journey.

{enrollments.map((enrollment) => { const course = enrollment.product; const totalLessons = course.modules.reduce((acc, m) => acc + m.lessons.length, 0); const courseLessonIds = course.modules.flatMap(m => m.lessons.map(l => l.id)); const completedInCourse = userProgress.filter(p => courseLessonIds.includes(p.course_lesson_id)).length; const percentage = totalLessons > 0 ? Math.round((completedInCourse / totalLessons) * 100) : 0; return ( {course.name}
Course {totalLessons} Lessons

{course.name}

{percentage}% completed
); })} {enrollments.length === 0 && (

No courses yet

You haven't enrolled in any courses yet. Explore our store to get started.

Browse Courses
)}
); }