import { Head, Link } from '@inertiajs/react';
import type { Product, Category } from '@/types';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Trash2, Plus } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import productRoutes from '@/routes/product';
import { useProductIndex } from './hooks/use-product-index';
import { getColumns } from './partials/columns';
import { ImagePreviewDialog } from '../../../../components/modal/image-preview';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
export default function ProductIndex({ products, categories }: { products: Product[], categories: Category[] }) {
const {
selectedImage,
isDeleteDialogOpen,
isBulkDeleteDialogOpen,
productToDelete,
rowsToDelete,
rowSelection,
setRowSelection,
setRowsToDelete,
setIsDeleteDialogOpen,
setIsBulkDeleteDialogOpen,
onDelete,
confirmDelete,
confirmBulkDelete,
onToggleStatus,
onPreviewImage,
closeImagePreview,
} = useProductIndex();
const columns = getColumns({ onDelete, onToggleStatus, onPreviewImage });
return (
({
label: category.name,
value: String(category.id),
})),
},
]}
bulkActions={[
{
label: 'Hapus Terpilih',
onClick: (rows) => {
setRowsToDelete(rows);
setIsBulkDeleteDialogOpen(true);
},
icon: Trash2,
variant: 'destructive'
},
]}
/>
{/* Single Delete Confirmation */}
Tindakan ini tidak dapat dibatalkan. Produk {productToDelete?.name} akan dihapus secara permanen.
}
onDelete={confirmDelete}
/>
{/* Bulk Delete Confirmation */}
Tindakan ini tidak dapat dibatalkan. {rowsToDelete.length} item yang terpilih akan dihapus secara permanen.
}
onDelete={confirmBulkDelete}
/>
);
}
ProductIndex.layout = {
breadcrumbs: [
{
title: 'Master',
},
],
};