import { Head, Link, router } from '@inertiajs/react'; import { CheckCircle, ChevronLeft, Clock, ExternalLink, GraduationCap, Package, Tag, User, XCircle } from 'lucide-react'; import { useState } from 'react'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type OrderItem = { id: number; price: number; course: { id: number; title: string; slug: string; thumbnail: string | null }; }; type Order = { id: number; total_amount: number; discount_amount: number; status: 'pending' | 'approved' | 'rejected'; proof_path: string | null; admin_notes: string | null; created_at: string; approved_at: string | null; user: { id: number; name: string; email: string }; items: OrderItem[]; }; type Props = { order: Order }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: '/admin' }, { title: 'Pembayaran', href: '/admin/payments' }, { title: 'Detail Pesanan', href: '#' }, ]; 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, badge: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400', headerBg: 'from-amber-50 via-white to-orange-50 border-amber-100 dark:from-amber-950/30 dark:via-card dark:to-orange-950/20 dark:border-amber-800/30', iconBg: 'bg-amber-100 dark:bg-amber-800/60', iconColor: 'text-amber-600 dark:text-amber-300', }, approved: { label: 'Disetujui', icon: CheckCircle, badge: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400', headerBg: 'from-emerald-50 via-white to-teal-50 border-emerald-100 dark:from-emerald-950/30 dark:via-card dark:to-teal-950/20 dark:border-emerald-800/30', iconBg: 'bg-emerald-100 dark:bg-emerald-800/60', iconColor: 'text-emerald-600 dark:text-emerald-300', }, rejected: { label: 'Ditolak', icon: XCircle, badge: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400', headerBg: 'from-red-50 via-white to-rose-50 border-red-100 dark:from-red-950/30 dark:via-card dark:to-rose-950/20 dark:border-red-800/30', iconBg: 'bg-red-100 dark:bg-red-800/60', iconColor: 'text-red-600 dark:text-red-300', }, }; function getInitials(name: string) { return name.split(' ').slice(0, 2).map((n) => n[0]).join('').toUpperCase(); } export default function AdminOrderShow({ order }: Props) { const [rejectNote, setRejectNote] = useState(''); const cfg = STATUS_CONFIG[order.status]; const StatusIcon = cfg.icon; const subtotal = order.total_amount + (order.discount_amount ?? 0); function approve() { router.post(`/admin/orders/${order.id}/approve`); } function reject() { router.post(`/admin/orders/${order.id}/reject`, { notes: rejectNote }); } return ( <>
{/* Header card */}

Pesanan #{order.id}

{cfg.label}

{order.created_at}

Total Pembayaran

{formatPrice(order.total_amount)}

{/* Left */}
{/* Pemesan */}

Informasi Pemesan

{getInitials(order.user.name)}

{order.user.name}

{order.user.email}

{/* Kelas dipesan */}

Kelas Dipesan

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

{item.course.title}

Lihat kelas
{formatPrice(item.price)}
))}
{/* Bukti transfer */} {order.proof_path && ( )} {/* Tindakan — hanya saat pending */} {order.status === 'pending' && (

Verifikasi Pembayaran