import { Head, Link, router } from '@inertiajs/react'; import type { FormEvent } from 'react'; import { useState } from 'react'; type ProductRow = { id: number; name: string; slug: string; sku: string; condition: string; status: string; price: string; discount_price: string | null; stock_quantity: number; reserved_quantity: number; brand: { name: string } | null; category: { name: string } | null; part_numbers: { type: string; number: string }[]; }; type Pagination = { data: T[]; links: { url: string | null; label: string; active: boolean }[]; }; export default function AdminProductsIndex({ products, filters, }: { products: Pagination; filters: { search: string }; }) { const [search, setSearch] = useState(filters.search ?? ''); function submit(event: FormEvent) { event.preventDefault(); router.get('/admin/products', { search }, { preserveState: true }); } return ( <>

Catalog admin

Products

Add product
setSearch(event.target.value)} placeholder="Search name, SKU, OEM or alternative number" className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-600 focus:ring-cyan-600" />
{products.data.map((product) => ( ))}
Product Brand Category Price Stock Status
{product.name}
{product.sku}
{product.brand?.name ?? '-'} {product.category?.name ?? '-'} {product.discount_price ?? product.price} {product.stock_quantity - product.reserved_quantity} {product.status} Edit
{products.data.map((product) => (

{product.name}

{product.sku}

Edit
Brand
{product.brand?.name ?? '-'}
Available
{product.stock_quantity - product.reserved_quantity}
Price
{product.discount_price ?? product.price}
Status
{product.status}
))}
); }