import AdminLayout from '@/Layouts/AdminLayout'; import { Head, Link } from '@inertiajs/react'; import { Search, ChevronLeft, ChevronRight } from 'lucide-react'; import { useState } from 'react'; interface Order { id: string; customer: string; email: string; product: string; amount_usd: string; amount_ngn: string; date: string; status: string; } interface PaginationLink { url: string | null; label: string; active: boolean; } interface Props { orders: { data: Order[]; total: number; links: PaginationLink[]; current_page: number; last_page: number; prev_page_url: string | null; next_page_url: string | null; }; } const statusStyle = (s: string) => { if (s === 'Paid' || s === 'completed') return 'bg-emerald-50 text-emerald-700'; if (s === 'Pending') return 'bg-amber-50 text-amber-700'; return 'bg-red-50 text-red-600'; }; export default function Index({ orders }: Props) { const [activeTab, setActiveTab] = useState('All'); const tabs = ['All', 'Paid', 'Pending', 'Refunded']; const orderList = orders.data || []; const filtered = activeTab === 'All' ? orderList : orderList.filter((o) => o.status === activeTab || (activeTab === 'Paid' && o.status === 'completed')); const totalPaidNGN = orderList .filter((o) => o.status === 'Paid' || o.status === 'completed') .reduce((sum, o) => sum + parseInt(o.amount_ngn.replace('₦', '').replace(',', '')), 0); return ( {/* Header */}

Orders

₦{totalPaidNGN.toLocaleString()} in paid revenue across {orders.total} orders.

{/* Toolbar */}
{/* Tabs */}
{tabs.map((tab) => ( ))}
{/* Search */}
{/* Mobile View: Cards */}
{filtered.map((o) => (
{o.id} {o.status}

{o.customer}

{o.email}

{o.amount_ngn}

{o.date}

{o.product}

))} {filtered.length === 0 && (
No orders found.
)}
{/* Desktop View: Table */}
{['Order', 'Customer', 'Product', 'Date', 'Amount', 'Status'].map((h, i) => ( ))} {filtered.map((o) => ( ))}
= 3 ? 'text-right' : ''}`} > {h}
{o.id}

{o.customer}

{o.email}

 {o.product} {o.date}

{o.amount_usd}

{o.amount_ngn}

 {o.status}
{filtered.length === 0 && (
No orders found.
)}
{/* Pagination */} {orders.last_page > 1 && (

Showing page {orders.current_page} of {orders.last_page}

{orders.links.map((link, i) => { // Only show Prev, Next and numbered links const isPrev = i === 0; const isNext = i === orders.links.length - 1; if (isPrev) { return ( ); } if (isNext) { return ( ); } // Show current, first, last, and pages around current const isCurrent = link.active; const pageNum = parseInt(link.label); const isNear = Math.abs(pageNum - orders.current_page) <= 1; const isEdge = pageNum === 1 || pageNum === orders.last_page; if (isCurrent || isNear || isEdge) { return ( ); } // Show ellipsis for gaps if (pageNum === orders.current_page - 2 || pageNum === orders.current_page + 2) { return ...; } return null; })}
)} ); }