import { Head, Link } from '@inertiajs/react'; import { BookOpen, CreditCard, Users, TrendingUp, Clock, CheckCircle2, ArrowRight, GraduationCap } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type Stats = { totalUsers: number; totalInstructors: number; totalCourses: number; activeCourses: number; totalEnrollments: number; activeEnrollments: number; pendingPayments: number; totalRevenue: number; }; type EnrollmentItem = { id: number; user: { name: string; email: string }; course: { title: string }; created_at: string; }; type PaymentItem = { id: number; user: { name: string; email: string }; course: { title: string }; created_at: string; }; type Props = { stats: Stats; recentEnrollments: EnrollmentItem[]; pendingPayments: PaymentItem[]; }; const breadcrumbs: BreadcrumbItem[] = [{ title: 'Admin Dashboard', href: '/admin' }]; function getInitials(name: string) { return name .split(' ') .slice(0, 2) .map((n) => n[0]) .join('') .toUpperCase(); } type StatCardProps = { label: string; value: number | string; sub?: string; icon: React.ElementType; bgClass: string; textClass: string; iconBgClass: string; href: string; }; function StatCard({ label, value, sub, icon: Icon, bgClass, textClass, iconBgClass, href }: StatCardProps) { return (

{label}

{typeof value === 'number' ? value.toLocaleString() : value}

{sub &&

{sub}

}
Lihat detail
); } export default function AdminDashboard({ stats, recentEnrollments, pendingPayments }: Props) { return ( <>
{/* Hero header */}

Dashboard Admin

Pantau dan kelola seluruh aktivitas platform

{stats.totalInstructors}

Instruktur

{stats.activeCourses}

Kelas Aktif

{stats.activeEnrollments}

Siswa Aktif

{/* Stat cards */}
{/* Activity panels */}
{/* Recent enrollments */}

Pendaftaran Terbaru

Lihat semua
{recentEnrollments.length === 0 ? (

Belum ada pendaftaran

) : (
    {recentEnrollments.map((e) => (
  • {getInitials(e.user.name)}

    {e.user.name}

    {e.course.title}

    • ))}
)}
{/* Pending payments */}

Pembayaran Perlu Diverifikasi

Lihat semua
{pendingPayments.length === 0 ? (

Tidak ada pembayaran pending

) : (
    {pendingPayments.map((p) => (
  • {getInitials(p.user.name)}

    {p.user.name}

    {p.course.title}

    Verifikasi
    • ))}
)}
); } AdminDashboard.layout = (page: React.ReactNode) => {page};