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 { Select, SelectItem, SelectTrigger, SelectContent, SelectValue } from '@/components/ui/select' import { toast } from 'sonner'; import { ExpenseCategory } from '@/types/expense-category'; import { ExpenseSubcategory, ExpenseSubcategoryLink } from '@/types/expense-subcategory'; import Heading from '@/components/heading'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Subkategori Pengeluaran', href: route('apps.expense-subcategories.index'), }, ]; interface IndexProps { expenseSubcategories: { data: ExpenseSubcategory[], links: ExpenseSubcategoryLink[], }; expenseCategories: ExpenseCategory[] perPage: number; currentPage: number; [key: string]: unknown; } export default function Index() { const { expenseCategories, expenseSubcategories, perPage, currentPage } = usePage().props; const { data, setData, post, processing, errors, transform } = useForm({ id: '', expense_category_id: '', name: '', open: false as boolean, isUpdate: false as boolean }); const [deleteModal, setDeleteModal] = React.useState(false); transform((data) => ({ ...data, _method: data.isUpdate ? 'put' : 'post', })) const handleModalUpdate = (expenseSubcategory: ExpenseSubcategory) => { setData(prevData => ({ ...prevData, id: expenseSubcategory.id, expense_category_id: expenseSubcategory.expense_category_id.toString(), name: expenseSubcategory.name, open: true, isUpdate: true })) } const handleModalDelete = (expenseSubcategory: ExpenseSubcategory) => { setDeleteModal(true); setData(prevData => ({ ...prevData, id: expenseSubcategory.id, })) } const storeData = async (e: React.FormEvent) => { e.preventDefault(); if (data.isUpdate) post(route('apps.expense-subcategories.update', data.id), { onSuccess: () => { toast('Data berhasil disimpan.') setData({ id: '', expense_category_id: '', name: '', open: !data.open, isUpdate: false, }) }, }); else post(route('apps.expense-subcategories.store'), { onSuccess: () => { toast('Data berhasil disimpan.') setData({ id: '', expense_category_id: '', name: '', open: !data.open, isUpdate: false, }) }, }); } return (

No Kategori Nama Subkategori Aksi {expenseSubcategories.data.length === 0 ? : expenseSubcategories.data.map((subcategory, index) => ( {index + 1} {subcategory.expense_category.name} {subcategory.name}

{(hasAnyPermission(['expense-subcategories-update']) || hasAnyPermission(['expense-subcategories-delete'])) && handleModalUpdate(subcategory)} actionDelete={() => handleModalDelete(subcategory)} /> }

)) }

) }