import React, { useState } from 'react'; import Pagination from '@/Components/Pagination' import Authenticated from '@/Layouts/Authenticated'; import { toast } from 'react-toastify'; import { Head, useForm } from '@inertiajs/inertia-react'; import NumberFormat from 'react-number-format'; import { formatIDR } from '@/utils'; export default function Category(props) { const [category, setCategory] = useState(null) const { data: categories , links } = props.categories const { data, setData, errors, post, put, processing, delete: destroy } = useForm({ name: '', description: '', amount: 0 }) const handleChange = (e) => { const key = e.target.id; const value = e.target.value setData(key, value) } const handleReset = () => { setCategory(null) setData({ name: '', description: '', amount: '' }) } const handleEdit = (category) => { setCategory(category) setData({ name: category.name, description: category.description, amount: category.default_budget }) } const handleDelete = (category) => { destroy(route('categories.destroy', category), { onBefore: () => confirm('Are you sure you want to delete this record?'), onSuccess: () => Promise.all([ handleReset(), toast.success('data has been deleted') ]) }) } const handleSubmit = (e) => { e.preventDefault() if(category !== null) { put(route('categories.update', category), { onSuccess: () => Promise.all([ handleReset(), toast.success('The Data has been changed') ]) }) return } post(route('categories.store'), { onSuccess: () => Promise.all([ handleReset(), toast.success('Data has been saved') ]) }) } return ( Category} >

Category Name {errors.name}

Description {errors.description}

Amount setData('amount', value)} /> {errors.amount}

{categories?.map(category => ( ))}

	Category Name	Description	Amount
{category.id}	{category.name}	{category.description}	{formatIDR(category.default_budget)}	handleEdit(category)}>Edit handleDelete(category)}>Delete

); }