import React, { useState } from 'react'; import Pagination from '@/Components/Pagination'; import Authenticated from '@/Layouts/Authenticated'; import { Head, useForm } from '@inertiajs/inertia-react'; import { toast } from 'react-toastify'; import moment from 'moment'; import { formatIDR } from '@/utils'; export default function Transaction(props) { const { categories, transactions } = props const [transaction, setTransaction] = useState(null) const { data, setData, errors, post, put, processing, delete: destroy } = useForm({ category_id: '', description: '', amount: 0, date: moment().format('yyyy-MM-DD'), is_income: 0, income_type: 0 }) const toggleCashType = () => { setData('income_type', data.income_type === 0 ? 1 : 0) } const toggleIncome = () => { setData({ ...data, category_id: '', is_income: data.is_income === 0 ? 1 : 0 }) } const handleSelectedcategory = (e) => { const category = categories.find(cat => +cat.id === +e.target.value) setData({ ...data, description: category.description, category_id: e.target.value }) } const handleChange = (e) => { const key = e.target.id; const value = e.target.value setData(key, value) } const handleReset = () => { setTransaction(null) setData({ category_id: '', description: '', amount: 0, date: moment().format('yyyy-MM-DD'), is_income: 0, income_type: 0 }) } const handleDelete = (transaction) => { destroy(route('transactions.destroy', transaction), { onBefore: () => confirm('Are you sure you want to delete this record?'), onSuccess: () => Promise.all([ handleReset(), toast.success('data has been deleted') ]) }) } const handleEdit = (transaction) => { setTransaction(transaction) setData({ category_id: transaction.category_id === null ? '' : transaction.category_id, description: transaction.description, amount: transaction.amount, date: moment(transaction.date).format('yyyy-MM-DD'), is_income: +transaction.is_income, income_type: +transaction.income_type }) } const handleSubmit = (e) => { e.preventDefault() if(transaction !== null) { put(route('transactions.update', transaction), { onSuccess: () => Promise.all([ handleReset(), toast.success('The Data has been changed') ])}) return } post(route('transactions.store'), { onSuccess: () => Promise.all([ handleReset(), toast.success('Data has been saved') ]) }) } return ( Transaction} >
{transactions?.data?.map(transaction => ( ))}
Date Income Category Cash In/Out Description Amount
{moment(transaction.date).format('DD/MM/yyyy')} {+transaction.is_income === 0 ? (
Expense
) : (
Income
)} 		{transaction?.category?.name} {+transaction.income_type === 0 ? (
Cash Out
) : (
Cash In
)} 		{transaction.description} {formatIDR(transaction.amount)}
handleEdit(transaction)}>Edit
handleDelete(transaction)}>Delete
); }