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 NumberFormat from 'react-number-format';
import { formatIDR } from '@/utils';
export default function Transaction(props) {
const { categories, transactions } = props
const [transaction, setTransaction] = useState(null)
const [showForm, setShowForm] = useState(false)
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 toggleForm = (transaction = null) => {
setShowForm(!showForm)
if(transaction !== null) {
handleEdit(transaction)
}else{
handleReset()
}
}
const toggleCashType = () => {
setData('income_type', data.income_type === 0 ? 1 : 0)
}
const toggleIncome = () => {
setData({
...data,
category_id: '',
description: '',
is_income: data.is_income === 0 ? 1 : 0,
income_type: 1,
})
}
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([
toggleForm(),
handleReset(),
toast.success('The Data has been changed')
])})
return
}
post(route('transactions.store'), {
onSuccess: () => Promise.all([
toggleForm(),
handleReset(),
toast.success('Data has been saved')
])
})
}
return (
Date | Type | Category Name | 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)} |
toggleForm(transaction)}>Edit
handleDelete(transaction)}>Delete
|