import { Head, Link } from '@inertiajs/react'; import { CheckCircle2, Clock, GraduationCap, Receipt, XCircle, ChevronRight, Calendar } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; type OrderItem = { id: number; price: number; course: { id: number; title: string; slug: string; thumbnail: string | null }; }; type Order = { id: number; total_amount: number; status: 'pending' | 'approved' | 'rejected'; admin_notes: string | null; created_at: string; approved_at: string | null; items: OrderItem[]; }; type Props = { orders: Order[] }; const BRAND = '#118AB2'; function formatPrice(price: number) { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(price); } const STATUS_CONFIG = { pending: { label: 'Menunggu Verifikasi', icon: Clock, color: '#D97706', bg: '#FEF3C7', accent: '#F59E0B' }, approved: { label: 'Pembayaran Disetujui', icon: CheckCircle2, color: '#059669', bg: '#D1FAE5', accent: '#10B981' }, rejected: { label: 'Pembayaran Ditolak', icon: XCircle, color: '#DC2626', bg: '#FEE2E2', accent: '#EF4444' }, }; export default function OrdersIndex({ orders }: Props) { return ( <>
{/* Header */}

Riwayat Pembelian

Pantau status pembayaran dan akses kelas Anda di sini. Anda memiliki total {orders.length} pesanan.

{orders.length === 0 ? ( /* Borderless Empty State */

Belum ada pesanan

Sepertinya Anda belum pernah melakukan pembelian kelas. Mulai cari kelas impian Anda sekarang!

Jelajahi Kelas
) : ( /* Borderless Order List */
{orders.map((order) => { const cfg = STATUS_CONFIG[order.status]; const StatusIcon = cfg.icon; return (
{/* Left: Order Info & Date */}
{order.items.slice(0, 3).map((item) => item.course.thumbnail ? ( {item.course.title} ) : (
), )} {order.items.length > 3 && (
+{order.items.length - 3}
)}
ID Pesanan

#{order.id}

{/* Right: Status Badge */} {cfg.label}
{/* Middle Section: Items Summary */}

{order.items.length === 1 ? order.items[0].course.title : `${order.items.length} kelas terdaftar`}

{order.items.length > 1 && (

{order.items.map((i) => i.course.title).join(', ')}

)}
{/* Bottom Info: Price & Date */}
{order.created_at}
Total Pembayaran {order.total_amount > 0 ? formatPrice(order.total_amount) : 'Gratis'}
{/* Rejection Alert */} {order.status === 'rejected' && order.admin_notes && (
Alasan Penolakan: {order.admin_notes}
)}
); })}
)}
); } OrdersIndex.layout = (page: React.ReactNode) => {page};