import { Head, Link, useForm } from '@inertiajs/react'; type Product = { id: number; name: string; sku: string; condition: string; status: string; price: string; discount_price: string | null; stock_quantity: number; reserved_quantity: number; description: string | null; brand: { name: string } | null; category: { name: string } | null; images: { path: string; alt_text: string | null; is_main: boolean }[]; part_numbers: { type: string; number: string }[]; tags: { name: string }[]; specification_values: { id: number; value: string; field: { name: string; unit: string | null; group: { name: string } | null; }; }[]; compatibilities: { id: number; make: { name: string } | null; model: { name: string } | null; generation: { name: string; code: string | null } | null; year_from: number | null; year_to: number | null; engine_code: string | null; transmission_type: string | null; drive_type: string | null; chassis_code: string | null; }[]; }; export default function ProductShow({ product }: { product: Product }) { const mainImage = product.images.find((image) => image.is_main); const { data, setData, post, processing } = useForm({ quantity: 1 }); const specifications = Object.entries( product.specification_values.reduce( (groups, item) => { const group = item.field.group?.name ?? 'Specifications'; groups[group] = [...(groups[group] ?? []), item]; return groups; }, {} as Record, ), ); return ( <>
Back to parts
{mainImage ? ( {mainImage.alt_text ) : ( No image )}

Description

{product.description ?? 'No description yet.'}

Part numbers

{product.part_numbers.map((partNumber) => (
{partNumber.type.replace('_', ' ')}
{partNumber.number}
))}

Technical specifications

{specifications.map(([group, values]) => (

{group}

{values.map((item) => (
{item.field.name}
{item.value} {item.field.unit ? ` ${item.field.unit}` : ''}
))}
))} {specifications.length === 0 ? (

No technical specifications are available yet.

) : null}

Vehicle compatibility

{product.compatibilities.map((compatibility) => (

Vehicle

{compatibility.make?.name ?? '-'}{' '} {compatibility.model?.name ?? ''}

Generation

{compatibility.generation?.code ?? compatibility.generation ?.name ?? '-'}

Years

{compatibility.year_from ?? '-'} -{' '} {compatibility.year_to ?? '-'}

Engine

{compatibility.engine_code ?? '-'}

Transmission

{compatibility.transmission_type ?? 'Any'}

))} {product.compatibilities.length === 0 ? (

No vehicle compatibility data is available yet.

) : null}
); }