import { Head, Link, router } from '@inertiajs/react'; import { DataTablePagination } from '@/components/admin/data-table'; import { PageHeader } from '@/components/admin/page-header'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import AppLayout from '@/layouts/app-layout'; import adminRoutes from '@/routes/admin'; import type { BreadcrumbItem } from '@/types'; import type { AdminOrder, Paginated } from '@/types/admin'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: adminRoutes.dashboard().url }, { title: 'Orders', href: adminRoutes.orders.index().url }, ]; interface Filters extends Record { search?: string; status?: string; payment_status?: string; sync_status?: string; date_from?: string; date_to?: string; per_page?: string; } function statusBadge(status: string) { const map: Record = { pending: 'bg-yellow-100 text-yellow-800 border-yellow-200', processing: 'bg-blue-100 text-blue-800 border-blue-200', shipped: 'bg-indigo-100 text-indigo-800 border-indigo-200', delivered: 'bg-green-100 text-green-800 border-green-200', cancelled: 'bg-red-100 text-red-800 border-red-200', completed: 'bg-green-100 text-green-800 border-green-200', }; return {status}; } function paymentBadge(status: string) { if (status === 'paid') { return Paid; } return {status}; } function syncBadge(status: string) { const map: Record = { synced: 'bg-green-100 text-green-800 border-green-200', pending: 'bg-yellow-100 text-yellow-800 border-yellow-200', syncing: 'bg-blue-100 text-blue-800 border-blue-200', failed: 'bg-red-100 text-red-800 border-red-200', }; return {status}; } export default function OrdersIndex({ orders, filters }: { orders: Paginated; filters: Filters }) { function applyFilter(key: string, value: string) { router.get(adminRoutes.orders.index().url, { ...filters, [key]: value, page: 1 }, { preserveState: true, preserveScroll: true }); } return (

applyFilter('search', e.target.value)} /> applyFilter('date_from', e.target.value)} title="From date" /> applyFilter('date_to', e.target.value)} title="To date" />

Invoice Customer Status Payment Sync Total Items Date {orders.data.length === 0 && ( No orders found )} {orders.data.map((order) => ( {order.invoice_no} {order.user ? ( {order.billing_first_name} {order.billing_last_name} ) : ( {order.billing_first_name} {order.billing_last_name} )} {statusBadge(order.status)} {paymentBadge(order.payment_status)} {syncBadge(order.sync_status)} {order.currency} {parseFloat(order.total).toFixed(2)} {order.items_count ?? 0} {new Date(order.created_at).toLocaleDateString()} ))}

); }