import { Head, Link, router } from '@inertiajs/react'; import { ArrowLeft, Award, BookOpen, Calendar, Camera, Clock, Heart, Mail, Phone, ShieldCheck, User, UserCog } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; import { Button } from '@/components/ui/button'; type LessonProgress = { id: number; enrollment_id: number; lesson_id: number; completed_at: string | null; }; type Lesson = { id: number; chapter_id: number; }; type Chapter = { id: number; lessons: Lesson[]; }; type Enrollment = { id: number; status: string; enrolled_at: string | null; completed_at: string | null; course: { id: number; title: string; slug: string; thumbnail: string | null; chapters: Chapter[]; }; lesson_progress: LessonProgress[]; }; type UserDetail = { id: number; name: string; email: string; role: 'student' | 'instructor' | 'admin'; gender: string | null; birth_date: string | null; points: number; avatar: string | null; bio: string | null; phone: string | null; created_at: string; enrollments_count: number; enrollments: Enrollment[]; }; type Props = { user: UserDetail; }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: '/admin' }, { title: 'Pengguna', href: '/admin/users' }, { title: 'Detail Profil', href: '#' }, ]; const ROLE_CONFIG: Record = { student: { label: 'Siswa', badge: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300', avatarGradient: 'from-blue-100 to-sky-100 text-blue-700 dark:from-blue-950/40 dark:to-sky-950/30 dark:text-blue-300', icon: User }, instructor: { label: 'Instruktur', badge: 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300', avatarGradient: 'from-teal-100 to-cyan-100 text-teal-700 dark:from-teal-950/40 dark:to-cyan-950/30 dark:text-teal-300', icon: UserCog }, admin: { label: 'Admin', badge: 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300', avatarGradient: 'from-rose-100 to-pink-100 text-rose-700 dark:from-rose-950/40 dark:to-pink-950/30 dark:text-rose-300', icon: ShieldCheck }, }; function getInitials(name: string) { return name.split(' ').slice(0, 2).map((n) => n[0]).join('').toUpperCase(); } export default function AdminUserShow({ user }: Props) { const cfg = ROLE_CONFIG[user.role] ?? ROLE_CONFIG.student; const RoleIcon = cfg.icon; // Helper to calculate progress percentage for each course enrollment function getProgressPercentage(enrollment: Enrollment) { const totalLessons = enrollment.course.chapters.reduce((sum, ch) => sum + ch.lessons.length, 0); if (totalLessons === 0) return 0; const completedCount = enrollment.lesson_progress.filter((p) => p.completed_at !== null).length; return Math.min(Math.round((completedCount / totalLessons) * 100), 100); } function handleAvatarUpload(e: React.ChangeEvent) { const file = e.target.files?.[0]; if (!file) return; const formData = new FormData(); formData.append('avatar', file); router.post(`/admin/users/${user.id}/avatar`, formData, { preserveScroll: true, }); } return ( <>
{/* Back Button & Header */}

Profil Pengguna

Detail informasi profil & progres belajar peserta

{/* Profile Grid */}
{/* Left Column - Card Profile */}
{/* Avatar */}
{user.avatar ? ( {user.name} ) : (
{getInitials(user.name)}
)}

{user.name}

{user.email}

{cfg.label}
{user.email}
{user.phone || 'Tidak ada nomor telepon'}
Bergabung: {new Date(user.created_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
{/* Extra Personal Details */}

Informasi Tambahan

Jenis Kelamin {user.gender === 'male' ? 'Laki-laki' : user.gender === 'female' ? 'Perempuan' : 'Tidak ditentukan'}
Tanggal Lahir {user.birth_date ? new Date(user.birth_date).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }) : 'Tidak ditentukan'}
Biografi

{user.bio || 'Belum ada biografi singkat.'}

{/* Right Column - Stats & Enrolled Courses */}
{/* Stats Overview */}

Poin Belajar

{user.points} XP

Kelas Diikuti

{user.enrollments_count} Kelas

{/* Enrolled Courses list */}

Kelas yang Diikuti

{user.enrollments.length === 0 ? (

Belum ada kelas diikuti

) : (
{user.enrollments.map((en) => { const progress = getProgressPercentage(en); return (

{en.course.title}

{en.status === 'active' ? 'Aktif' : en.status === 'completed' ? 'Selesai' : en.status} {en.enrolled_at && ( Terdaftar: {new Date(en.enrolled_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })} )}
Progres Belajar {progress}%
); })}
)}
); } AdminUserShow.layout = (page: React.ReactNode) => {page};