import { Head, Link, router, usePage } from '@inertiajs/react'; import { ImageIcon, Pencil, Plus, Trash2 } from 'lucide-react'; import { PaginationControls, type PaginatedData, SortableHeader, type TableFilters, } from '@/components/data-table-controls'; import Heading from '@/components/heading'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import type { Auth } from '@/types'; type Option = { id: number; name: string; }; type Product = { id: number; name: string; slug: string; sku: string | null; price: string; stock: number; feature_image_url: string | null; is_active: boolean; variations_count: number; store: Option; category: Option; brand: Option; }; type PageProps = { auth: Auth; products: PaginatedData; filters: TableFilters; }; export default function ProductsIndex({ products, filters }: PageProps) { const { auth } = usePage().props; const can = (permission: string) => auth.permissions.includes(permission); const destroy = (product: Product) => { if (!window.confirm(`Delete ${product.name}?`)) { return; } router.delete(`/products/${product.id}`, { preserveScroll: true }); }; return ( <>
{can('products.create') && ( )}
Product Price Stock Status {products.data.map((product) => ( ))}
Image Store Category Brand Variations Actions
{product.feature_image_url ? ( {product.name} ) : (
)}
{product.name}
{product.sku ?? product.slug}
{product.store.name} {product.category.name} {product.brand.name} {product.price} {product.stock} {product.variations_count} {product.is_active ? 'Active' : 'Inactive'}
{can('products.update') && ( )} {can('products.delete') && ( )}
); } ProductsIndex.layout = { breadcrumbs: [ { title: 'Products', href: '/products', }, ], };