import { Head, Link, router, useForm } from '@inertiajs/react'; import { Plus, Search } from 'lucide-react'; import { FormEventHandler } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import AdminLayout from '@/layouts/admin-layout'; import { type Category, type PaginatedData, type Product } from '@/types'; export default function AdminProductsIndex({ products, categories, filters, }: { products: PaginatedData; categories: Category[]; filters: Record; }) { const { data, setData, get } = useForm({ search: filters.search ?? '' }); const applyFilters: FormEventHandler = (e) => { e.preventDefault(); get(route('admin.products.index'), { preserveState: true }); }; const toggleStatus = (product: Product) => { router.post(route('admin.products.toggleStatus', product.id), {}, { preserveState: true }); }; return (
setData('search', e.target.value)} className="pl-9" />
{products.data.map((product) => { const primaryImg = product.images?.find((i) => i.is_primary) ?? product.images?.[0]; return ( ); })} {products.data.length === 0 && ( )}
# Product SKU Category Price Stock Status
{primaryImg ? ( ) : (
)}
{product.name}
{product.brand &&
{product.brand.name}
} 		{product.sku} {product.category?.name} {product.compare_price && Number(product.compare_price) > Number(product.price) ? (
৳{Number(product.price).toLocaleString()} ৳{Number(product.compare_price).toLocaleString()} -{Math.round(((Number(product.compare_price) - Number(product.price)) / Number(product.compare_price)) * 100)}%
) : ( ৳{Number(product.price).toLocaleString()} )} 		{product.stock_qty}
Edit View
No products found
{products.last_page > 1 && (
Showing {products.from}–{products.to} of {products.total}
{products.links.map((link, i) => (
)} ); }