import { Head, Link, router } from '@inertiajs/react'; import { useState } from 'react'; import { SystemRecordActions } from '@/components/admin/system-record-actions'; import { ConfigurableTable } from '@/components/ui/configurable-table'; import { PaginationLinks } from '@/components/ui/pagination-links'; import { AdminLayout } from '@/layouts/admin-layout'; import type { PaginatedData } from '@/types'; type VehicleModelRow = { id: number; name: string; slug: string; make: string | null; generation: string | null; is_active: boolean; is_system: boolean; sort_order: number; variants_count: number; updated_at: string | null; }; type VehicleModelIndexProps = { models: PaginatedData; filters: { search: string; }; }; export default function VehicleModelIndex({ models, filters, }: VehicleModelIndexProps) { const [search, setSearch] = useState(filters.search || ''); const submitSearch = (event: React.FormEvent) => { event.preventDefault(); router.get('/admin/vehicle-models', search ? { search } : {}, { preserveState: true, replace: true, preserveScroll: true, }); }; const deleteModel = (id: number) => { if (!window.confirm('Delete this model?')) { return; } router.delete(`/admin/vehicle-models/${id}`); }; return (

Vehicle Models

Manage models inside vehicle generations.

Add Model
setSearch(event.target.value)} placeholder="Search by name, slug" className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" />
{models.data.map((model) => ( ))}
Model Generation Stats Actions

{model.name}

{model.slug}

{model.make || '-'} /{' '} {model.generation || '-'} {model.variants_count} vehicles
Edit
{models.data.map((model) => (

{model.name}

{model.make || '-'} / {model.generation || '-'}{' '} • {model.slug}

{model.variants_count} vehicles

Edit
))}

Showing {models.from || 0} to {models.to || 0} of{' '} {models.total} models

); }