import { Head, Link } from '@inertiajs/react'; import { CheckCircle2, ChevronLeft, Clock, GraduationCap, XCircle, Calendar, PlayCircle } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; type OrderItem = { id: number; price: number; enrollment_id: number | null; course: { id: number; title: string; slug: string; thumbnail: string | null; instructor: { id: number; name: string }; }; }; 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 = { order: 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' }, approved: { label: 'Pembayaran Disetujui', icon: CheckCircle2, color: '#059669', bg: '#D1FAE5' }, rejected: { label: 'Pembayaran Ditolak', icon: XCircle, color: '#DC2626', bg: '#FEE2E2' }, }; export default function OrderShow({ order }: Props) { const cfg = STATUS_CONFIG[order.status]; const StatusIcon = cfg.icon; return ( <>
{/* Back Navigation */} Kembali ke Riwayat Pembelian
{/* Left Column: Order Status and Details */}
{/* Status Card - Borderless */}

{cfg.label}

Pesanan #{order.id} · Terdaftar pada {order.created_at}

{/* Dynamic Alert Banner based on status */} {order.status === 'pending' && (

Sedang Diproses

Bukti transfer Anda sedang diverifikasi oleh tim admin kami. Proses verifikasi biasanya selesai dalam waktu kurang dari 1 jam. Akses kelas akan segera terbuka begitu disetujui.

)} {order.status === 'approved' && (

Pembayaran Berhasil

Pembayaran Anda telah diverifikasi secara resmi pada {order.approved_at}. Semua kelas di bawah ini kini aktif dan siap untuk dipelajari. Selamat belajar!

)} {order.status === 'rejected' && order.admin_notes && (

Pembayaran Ditolak

Alasan Penolakan: {order.admin_notes}

)}
{/* Order Items Details - Borderless */}

Rincian Kelas

{order.items.map((item) => (
{item.course.thumbnail ? ( {item.course.title} ) : (
)}

{item.course.title}

Oleh {item.course.instructor.name}

{order.status === 'approved' && item.course.slug && ( Mulai Belajar Sekarang )}
{item.price > 0 ? formatPrice(item.price) : 'Gratis'}
))}
{/* Right Column: Invoice/Payment Summary Card - Borderless */}

Ringkasan Pembayaran

{order.items.map((item) => (
{item.course.title} {item.price > 0 ? formatPrice(item.price) : 'Gratis'}
))}
Total Transaksi {formatPrice(order.total_amount)}
{/* Order Metadata */}
Nomor Invoice #{order.id}
Tanggal Transaksi {order.created_at}
{order.approved_at && (
Tanggal Verifikasi {order.approved_at}
)}
{order.status === 'approved' && ( Ke Kelas Saya )}
); } OrderShow.layout = (page: React.ReactNode) => {page};