import { Head, Link, router } from '@inertiajs/react'; import { Star } from 'lucide-react'; import { DataTablePagination } from '@/components/admin/data-table'; import { PageHeader } from '@/components/admin/page-header'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import AppLayout from '@/layouts/app-layout'; import adminRoutes from '@/routes/admin'; import type { BreadcrumbItem } from '@/types'; import type { AdminProduct, Paginated } from '@/types/admin'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: adminRoutes.dashboard().url }, { title: 'Products', href: adminRoutes.products.index().url }, ]; interface Filters extends Record { search?: string; category_id?: string; brand_id?: string; type?: string; in_stock?: string; is_active?: string; is_featured?: string; best_seller?: string; per_page?: string; } function typeBadge(type: string) { const map: Record = { simple: 'bg-blue-100 text-blue-800 border-blue-200', variable: 'bg-purple-100 text-purple-800 border-purple-200', grouped: 'bg-orange-100 text-orange-800 border-orange-200', digital: 'bg-teal-100 text-teal-800 border-teal-200', }; return {type}; } export default function ProductsIndex({ products, categories, brands, filters, }: { products: Paginated; categories: { id: number; name: string }[]; brands: { id: number; name: string }[]; filters: Filters; }) { function applyFilter(key: string, value: string) { router.get( adminRoutes.products.index().url, { ...filters, [key]: value, page: 1 }, { preserveState: true, preserveScroll: true }, ); } return (
applyFilter('search', e.target.value)} />
Image Name SKU Category Brand Type Price Stock Status {products.data.length === 0 && ( No products found )} {products.data.map((product) => ( {product.primary_image?.public_url ? ( {product.name} ) : (
)} {product.is_featured && ( )} {product.best_seller_rank !== null && ( #{product.best_seller_rank} )} {product.name} {product.sku} {product.category?.name ?? '—'} {product.brand?.name ?? '—'} {typeBadge(product.type)} {product.sale_price && parseFloat(product.sale_price) < parseFloat( product.regular_price ?? '0', ) ? ( {product.regular_price} {product.sale_price} ) : ( (product.regular_price ?? '—') )} {product.in_stock ? ( In Stock ) : ( Out )} {product.is_active ? ( Active ) : ( Inactive )} ))}
); }