import { Head, router, useForm } from '@inertiajs/react'; import type { FormEvent } from 'react'; type Category = { id: number; name: string }; type Field = { id: number; specification_group_id: number; name: string; slug: string; type: string; unit: string | null; is_required: boolean; is_searchable: boolean; is_filterable: boolean; sort_order: number }; type Group = { id: number; category_id: number | null; name: string; sort_order: number; is_active: boolean; category: Category | null; fields: Field[] }; export default function SpecificationsIndex({ groups, categories }: { groups: Group[]; categories: Category[] }) { const groupForm = useForm({ category_id: '', name: '', sort_order: 0, is_active: true }); const fieldForm = useForm({ specification_group_id: groups[0]?.id ?? '', name: '', slug: '', type: 'text', unit: '', options: '', is_required: false, is_searchable: false, is_filterable: false, sort_order: 0 }); function createGroup(event: FormEvent) { event.preventDefault(); groupForm.transform((data) => ({ ...data, category_id: data.category_id || null })); groupForm.post('/admin/specifications/groups', { preserveScroll: true }); } function createField(event: FormEvent) { event.preventDefault(); fieldForm.transform((data) => ({ ...data, unit: data.unit || null, options: String(data.options).split(',').map((item) => item.trim()).filter(Boolean) })); fieldForm.post('/admin/specifications/fields', { preserveScroll: true }); } return ( <>

Admin

Specifications

Add group

groupForm.setData('name', event.target.value)} /> groupForm.setData('sort_order', Number(event.target.value))} />

Add field

fieldForm.setData('name', event.target.value)} /> fieldForm.setData('slug', event.target.value)} /> fieldForm.setData('unit', event.target.value)} /> fieldForm.setData('options', event.target.value)} placeholder="Comma separated" />
{groups.map((group) => (

{group.name}

{group.category?.name ?? 'All categories'} ยท {group.is_active ? 'active' : 'inactive'}

{group.fields.map((field) => (

{field.name} ({field.slug}, {field.type}{field.unit ? `, ${field.unit}` : ''})

))}
))}
); } function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) { return ; }