import { Head, Link, router } from '@inertiajs/react'; import { CheckCircle, ClipboardList, Clock, GraduationCap, XCircle } from 'lucide-react'; import { useState } from 'react'; import { Button } from '@/components/ui/button'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type OrderItem = { id: number; course: { id: number; title: string }; }; type Order = { id: number; total_amount: number; status: 'pending' | 'approved' | 'rejected'; proof_path: string | null; admin_notes: string | null; created_at: string; user: { id: number; name: string; email: string }; items: OrderItem[]; }; type Paginator = { data: T[]; current_page: number; last_page: number; total: number; links: { url: string | null; label: string; active: boolean }[]; }; type Props = { orders: Paginator }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: '/admin' }, { title: 'Pesanan', href: '/admin/orders' }, ]; function formatPrice(price: number) { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(price); } const STATUS_CONFIG = { pending: { label: 'Menunggu', badge: 'bg-amber-100 text-amber-700', stripe: 'bg-amber-400', icon: Clock }, approved: { label: 'Disetujui', badge: 'bg-emerald-100 text-emerald-700', stripe: 'bg-emerald-500', icon: CheckCircle }, rejected: { label: 'Ditolak', badge: 'bg-red-100 text-red-700', stripe: 'bg-red-500', icon: XCircle }, }; function getInitials(name: string) { return name.split(' ').slice(0, 2).map((n) => n[0]).join('').toUpperCase(); } export default function AdminOrdersIndex({ orders }: Props) { const [rejectNotes, setRejectNotes] = useState>({}); function approve(id: number) { router.post(`/admin/orders/${id}/approve`); } function reject(id: number) { router.post(`/admin/orders/${id}/reject`, { notes: rejectNotes[id] ?? '' }); } return ( <>

Pesanan

{orders.total} total pesanan

{orders.data.length === 0 && (

Tidak ada pesanan

)} {orders.data.map((order) => { const cfg = STATUS_CONFIG[order.status]; const StatusIcon = cfg.icon; return (
{getInitials(order.user.name)}

{order.user.name}

{order.user.email}

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

{formatPrice(order.total_amount)} {cfg.label}
{order.created_at} Lihat detail → {order.proof_path && ( Bukti transfer ↗ )}
{order.status === 'pending' && (
setRejectNotes((prev) => ({ ...prev, [order.id]: e.target.value }))} className="w-full rounded-xl border border-input bg-transparent px-3 py-2 text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100" />
)}
); })}
{orders.last_page > 1 && (
{orders.links.map((link, i) => link.url ? ( ) : ( ), )}
)}
); } AdminOrdersIndex.layout = (page: React.ReactNode) => {page};