import { Head, Link, useForm } from '@inertiajs/react'; import type { FormEvent } from 'react'; type Order = { id: number; order_number: string; status: string; payment_status: string; customer_name: string; customer_email: string; customer_phone: string | null; billing_address: Record; shipping_address: Record; shipping_method: string | null; shipping_provider: string | null; shipping_price: string; payment_method: string; tracking_number: string | null; customer_notes: string | null; internal_notes: string | null; subtotal: string; discount_total: string; total: string; items: { id: number; product_name: string; sku: string; quantity: number; unit_price: string; total: string; part_numbers_snapshot: { type: string; number: string }[] | null }[]; payments: { id: number; method: string; status: string; amount: string; transaction_id: string | null }[]; }; export default function AdminOrderShow({ order }: { order: Order }) { const { data, setData, put, processing, errors } = useForm({ status: order.status, payment_status: order.payment_status, tracking_number: order.tracking_number ?? '', internal_notes: order.internal_notes ?? '', }); function submit(event: FormEvent) { event.preventDefault(); put(`/admin/orders/${order.id}`); } return ( <>
Back to orders

{order.order_number}

{order.customer_name} · {order.customer_email} · {order.customer_phone ?? 'No phone'}

Items

{order.items.map((item) => (

{item.product_name}

SKU {item.sku} x {item.quantity}

{item.total}

{item.part_numbers_snapshot?.length ?

{item.part_numbers_snapshot.map((number) => `${number.type}: ${number.number}`).join(' · ')}

: null}
))}