import { Head, Link } from '@inertiajs/react'; import HeadingSmall from '@/components/heading-small'; import AppLayout from '@/layouts/app-layout'; import { index as supplierProductsIndex, show as supplierProductsShow } from '@/routes/admin/supplier-products'; type SupplierProduct = { id: number; external_id: string; status: string; payload: Record | null; updated_at: string; supplier: { id: number; name: string; slug: string } | null; utility: { id: number; name: string } | null; state: { id: number; code: string; name: string } | null; }; type Props = { supplierProduct: SupplierProduct; }; function StatusBadge({ status }: { status: string }) { const colors: Record = { active: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300', inactive: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400', archived: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300', }; return ( {status} ); } export default function SupplierProductShow({ supplierProduct }: Props) { const supplierName = supplierProduct.supplier?.name ?? 'Unknown'; const title = `${supplierName} / ${supplierProduct.external_id}`; const breadcrumbs = [ { title: 'Supplier Products', href: supplierProductsIndex.url({ query: { supplier_id: supplierProduct.supplier?.id ?? '' }, }), }, { title: supplierProduct.external_id, href: supplierProductsShow.url(supplierProduct.id) }, ]; return (

Raw payload

{supplierProduct.payload !== null ? (

                                {JSON.stringify(supplierProduct.payload, null, 2)}

) : (

No payload stored for this product.

)}

); }