import { Head, Link } from '@inertiajs/react'; import { PageHeader } from '@/components/admin/page-header'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Separator } from '@/components/ui/separator'; 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 } from '@/types/admin'; 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 OrderShow({ order }: { order: AdminOrder }) { const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: adminRoutes.dashboard().url }, { title: 'Orders', href: adminRoutes.orders.index().url }, { title: order.invoice_no, href: adminRoutes.orders.show(order.id).url }, ]; const subtotal = parseFloat(order.line_total); const discount = parseFloat(order.discount_total); const shipping = parseFloat(order.shipping_total); const tax = parseFloat(order.total_tax); const total = parseFloat(order.total); return (
{statusBadge(order.status)} {paymentBadge(order.payment_status)} {syncBadge(order.sync_status)}
} />
{/* Customer */} Customer {order.user && ( )} {order.billing_email && } {order.billing_phone && } {order.user?.email && order.user.email !== order.billing_email && ( )} {order.customer_note && (

Note

{order.customer_note}

)} {/* Addresses */}
Billing Address

{order.billing_first_name} {order.billing_last_name}

{order.billing_company &&

{order.billing_company}

}

{order.billing_address_1}

{order.billing_address_2 &&

{order.billing_address_2}

}

{order.billing_city}{order.billing_state ? `, ${order.billing_state}` : ''} {order.billing_postcode}

{order.billing_country}

{order.billing_phone &&

{order.billing_phone}

} {order.billing_email &&

{order.billing_email}

} Shipping Address

{order.shipping_first_name} {order.shipping_last_name}

{order.shipping_company &&

{order.shipping_company}

}

{order.shipping_address_1}

{order.shipping_address_2 &&

{order.shipping_address_2}

}

{order.shipping_city}{order.shipping_state ? `, ${order.shipping_state}` : ''} {order.shipping_postcode}

{order.shipping_country}

{order.shipping_phone &&

{order.shipping_phone}

}
{/* Order Items */} Order Items Product SKU Unit Price Tax Qty Line Total {order.items?.map((item) => ( {item.product ? ( {item.name} ) : ( {item.name} )} {item.sku} {order.currency} {parseFloat(item.unit_price).toFixed(2)} {parseFloat(item.unit_tax).toFixed(2)} {item.quantity} {order.currency} {parseFloat(item.total).toFixed(2)} ))}
{/* Totals */}
{discount > 0 && }
{/* Order Info */} Order Info {/* ERP Sync */} ERP Sync
Status {syncBadge(order.sync_status)}
{order.sync_error && (

Error

{order.sync_error}

)} {/* Meta */} {(order.customer_ip_address) && ( Technical {order.customer_ip_address && } )}
); } function Row({ label, value }: { label: string; value: string }) { return (
{label} {value}
); } function TotalRow({ label, value, bold, className }: { label: string; value: string; bold?: boolean; className?: string }) { return (
{label} {value}
); }