import { Head, Link, router } from '@inertiajs/react'; import { Droplets, Edit, Plus, Search, Trash2 } from 'lucide-react'; import { useState } 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 Brand, type PaginatedData, type Product } from '@/types'; export default function AdminFragrancesIndex({ products, filters, brands, }: { products: PaginatedData; filters: { search?: string; status?: string; brand_id?: string }; brands: Brand[]; }) { const [search, setSearch] = useState(filters.search ?? ''); const applyFilter = (overrides: Record) => { router.get(route('admin.fragrances.index'), { search, ...overrides }, { preserveState: true }); }; return (

Fragrance Products

{products.total} products in collection

{/* Search / Filter bar */}

setSearch(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && applyFilter({})} placeholder="Search fragrances…" className="h-8 border-none shadow-none focus-visible:ring-0" />

{/* Table */}

{products.data.length === 0 ? ( ) : ( products.data.map((product) => ( )) )}

Product	SKU	Price	Stock	Status	Actions
No fragrance products found. Add your first fragrance →
{product.images?.[0] ? ( ) : ( )} {product.name} {product.brand && {product.brand.name} }	{product.sku}	৳{Number(product.price).toLocaleString()}	0 ? 'text-green-600' : 'text-red-500'}> {product.stock_qty}

{/* Pagination */} {products.last_page > 1 && (

Showing {products.from}–{products.to} of {products.total}

{products.links.map((link, i) => (

)} ); }