import React from 'react'; import AppLayout from '@/layouts/app-layout' import hasAnyPermission from '@/utils/has-permissions'; import PagePagination from '@/components/page-pagination'; import { type BreadcrumbItem } from '@/types'; import { Head, useForm, usePage, Link } from '@inertiajs/react'; import { Table, TableBody, TableCard, TableCell, TableEmpty, TableHead, TableHeader, TableRow, TableFilter } from '@/components/ui/table'; import { Button } from '@/components/ui/button'; import { PlusCircle } from 'lucide-react'; import { ActionButton } from '@/components/action-button'; import { ModalDelete } from '@/components/modal-delete'; import { Product, ProductLink } from '@/types/product'; import { Badge } from '@/components/ui/badge'; import Heading from '@/components/heading'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Produk', href: route('apps.products.index'), }, ]; interface IndexProps { products: { data: Product[], links: ProductLink[], }; perPage: number; currentPage: number; [key: string]: unknown; } export default function Index() { const { products, perPage, currentPage } = usePage().props; const [deleteModal, setDeleteModal] = React.useState(false); const { data, setData } = useForm({ id: '', }) const handleModalDelete = (product: Product) => { setDeleteModal(true); setData(prevData => ({ ...prevData, id: product.id, })) } const toBool = (v: unknown) => { if (typeof v === 'boolean') return v; if (typeof v === 'number') return v === 1; if (typeof v === 'string') return v === '1' || v.toLowerCase() === 'true'; return false; }; return (

{hasAnyPermission(['products-create']) && }

No Gambar produk SKU Nama Produk Kategori Jenis Produk Aksi {products.data.length === 0 ? : products.data.map((product, index) => ( {index + 1}

{product.sku} {product.name} {product.category?.name} {toBool(product.has_variant) ? 'Varint' : 'Single'}

{(hasAnyPermission(['products-update']) || hasAnyPermission(['products-delete'])) && handleModalDelete(product)} /> }

)) }

) }