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 { Unit, UnitLink } from '@/types/unit'; import { Textarea } from '@/components/ui/textarea'; import Heading from '@/components/heading'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Satuan', href: route('apps.units.index'), }, ]; interface IndexProps { units: { data: Unit[], links: UnitLink[], current_page: number, per_page: number }; perPage: number; currentPage: number; [key: string]: unknown; } export default function Index() { const { units, perPage, currentPage } = usePage().props; const { data, setData, post, processing, errors, reset, transform } = useForm({ id: '', name: '', description: '', open: false as boolean, isUpdate: false as boolean }); const [deleteModal, setDeleteModal] = React.useState(false); transform((data) => ({ ...data, _method: data.isUpdate ? 'put' : 'post', })) const handleModalUpdate = (unit: Unit) => { setData(prevData => ({ ...prevData, id: unit.id, name: unit.name, description: unit.description, open: true, isUpdate: true })) } const handleModalDelete = (unit: Unit) => { setDeleteModal(true); setData(prevData => ({ ...prevData, id: unit.id, })) } const storeData = async (e: React.FormEvent) => { e.preventDefault(); if (data.isUpdate) post(route('apps.units.update', data.id), { onSuccess: () => { toast('Data has been saved.') reset() }, }); else post(route('apps.units.store'), { onSuccess: () => { toast('Data has been saved.') reset() }, }); } return (
setData({ ...data, open: open, name: '', id: '', isUpdate: false })} > {hasAnyPermission(['units-create']) && Tambah Satuan } {data.isUpdate ? 'Ubah' : 'Tambah'} Satuan {data.isUpdate ? 'Form ini digunakan untuk mengubah data satuan' : 'Form ini digunakan untuk menambah data satuan'}
setData('name', e.target.value)} placeholder="Masukan nama satuan" />

{errors.name}