import { Head, Link, router, useForm } from '@inertiajs/react'; import { Eye, Package, Search, SlidersHorizontal } from 'lucide-react'; import { FormEventHandler } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import AdminLayout from '@/layouts/admin-layout'; import { type Order, type PaginatedData } from '@/types'; const STATUS_CONFIG: Record = { new: { label: 'New', bg: 'bg-blue-50 text-blue-700 ring-blue-200', dot: 'bg-blue-500' }, pending: { label: 'Pending', bg: 'bg-yellow-50 text-yellow-700 ring-yellow-200', dot: 'bg-yellow-500' }, confirmed: { label: 'Confirmed', bg: 'bg-indigo-50 text-indigo-700 ring-indigo-200', dot: 'bg-indigo-500' }, packed: { label: 'Packed', bg: 'bg-purple-50 text-purple-700 ring-purple-200', dot: 'bg-purple-500' }, shipped: { label: 'Shipped', bg: 'bg-orange-50 text-orange-700 ring-orange-200', dot: 'bg-orange-500' }, delivered: { label: 'Delivered', bg: 'bg-green-50 text-green-700 ring-green-200', dot: 'bg-green-500' }, cancelled: { label: 'Cancelled', bg: 'bg-red-50 text-red-700 ring-red-200', dot: 'bg-red-500' }, returned: { label: 'Returned', bg: 'bg-slate-100 text-slate-600 ring-slate-200', dot: 'bg-slate-400' }, }; const PAYMENT_CONFIG: Record = { paid: { label: 'Paid', bg: 'bg-green-50 text-green-700 ring-green-200' }, unpaid: { label: 'Unpaid', bg: 'bg-red-50 text-red-700 ring-red-200' }, partial: { label: 'Partial', bg: 'bg-yellow-50 text-yellow-700 ring-yellow-200' }, refunded: { label: 'Refunded', bg: 'bg-slate-100 text-slate-600 ring-slate-200' }, }; function StatusBadge({ status }: { status: string }) { const cfg = STATUS_CONFIG[status] ?? { label: status, bg: 'bg-slate-100 text-slate-600 ring-slate-200', dot: 'bg-slate-400' }; return ( {cfg.label} ); } function PaymentBadge({ status }: { status: string }) { const cfg = PAYMENT_CONFIG[status] ?? { label: status, bg: 'bg-slate-100 text-slate-600 ring-slate-200' }; return ( {cfg.label} ); } interface Filters { status?: string; search?: string } export default function AdminOrdersIndex({ orders, filters }: { orders: PaginatedData; filters: Filters }) { const { data, setData, get } = useForm({ search: filters.search ?? '', status: filters.status ?? '' }); const applyFilters: FormEventHandler = (e) => { e.preventDefault(); get(route('admin.orders.index'), { preserveState: true }); }; const clearFilters = () => { router.visit(route('admin.orders.index')); }; const hasFilters = !!(filters.search || filters.status); return ( {/* Header */}

All Orders

{orders.total.toLocaleString()}

{/* Filters */}

setData('search', e.target.value)} className="pl-8 h-9 dark:border-slate-600 dark:bg-slate-700" />

{hasFilters && ( )}

{/* Table */}

{orders.data.map((order) => ( ))} {orders.data.length === 0 && ( )}

Invoice	Customer	Phone	Amount	Payment	Status	Date
{order.invoice_no}	{order.customer_name}	{order.customer_phone}	৳{Number(order.total_amount).toLocaleString()}			{new Date(order.created_at).toLocaleDateString('en-BD', { day: '2-digit', month: 'short', year: 'numeric' })}	View
No orders found {hasFilters && ( )}

{/* Pagination */} {orders.last_page > 1 && (

Showing {orders.from}–{orders.to} of {orders.total} orders

{orders.links.map((link, i) => (

)} ); }