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, usePage, useForm } from '@inertiajs/react'; import { Table, TableBody, TableCard, TableCell, TableEmpty, TableHead, TableHeader, TableRow, TableFilter } from '@/components/ui/table'; import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog' import { PlusCircle, LoaderCircle, Save, X } from 'lucide-react'; import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { ActionButton } from '@/components/action-button'; import { ModalDelete } from '@/components/modal-delete'; import { toast } from 'sonner'; import { Category, CategoryLink } from '@/types/category'; import Heading from '@/components/heading'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Kategori', href: route('apps.categories.index'), }, ]; interface IndexProps { categories: { data: Category[], links: CategoryLink[], }; perPage: number; currentPage: number; [key: string]: unknown; } export default function Index() { const { categories, perPage, currentPage } = usePage().props; const { data, setData, post, processing, errors, reset, transform } = useForm({ id: '', name: '', image: null as File | null, open: false as boolean, isUpdate: false as boolean }); const [deleteModal, setDeleteModal] = React.useState(false); transform((data) => ({ ...data, _method: data.isUpdate ? 'put' : 'post', })) const handleModalUpdate = (category: Category) => { setData(prevData => ({ ...prevData, id: category.id, name: category.name, open: true, isUpdate: true })) } const handleModalDelete = (category: Category) => { setDeleteModal(true); setData(prevData => ({ ...prevData, id: category.id, })) } const storeData = async (e: React.FormEvent) => { e.preventDefault(); if (data.isUpdate) post(route('apps.categories.update', data.id), { onSuccess: () => { toast('Data has been saved.') setData({ id: '', name: '', image: null, open: false, isUpdate: false }) }, }); else post(route('apps.categories.store'), { onSuccess: () => { toast('Data has been saved.'); setData({ id: '', name: '', image: null, open: false, isUpdate: false }) }, }); } return (

No Gambar Kategori Nama Kategori Aksi {categories.data.length === 0 ? : categories.data.map((category, index) => ( {index + 1}

{category.name}

{(hasAnyPermission(['categories-update']) || hasAnyPermission(['categories-delete'])) && handleModalUpdate(category)} actionDelete={() => handleModalDelete(category)} /> }

)) }

) }