import React, { useState, useEffect } from 'react' import NumberFormat from 'react-number-format' import moment from 'moment' import { Head, useForm } from '@inertiajs/inertia-react' import { Inertia } from '@inertiajs/inertia' import { toast } from 'react-toastify' import { formatIDR } from '@/utils' import { usePrevious } from 'react-use' import Pagination from '@/Components/Pagination' import Authenticated from '@/Layouts/Authenticated' import SelectInput from '@/Components/CategorySelectInput' export default function Transaction(props) { const { transactions, _search, _startDate, _endDate } = props const [startDate, setStartDate] = useState( _startDate ? _startDate : moment().startOf('month').format('YYYY-MM-DD') ) const [endDate, setEndDate] = useState( _endDate ? _endDate : moment().endOf('month').format('YYYY-MM-DD') ) const [search, setSearch] = useState(_search ? _search : '') const prevValues = usePrevious({search, startDate, endDate}) const [transaction, setTransaction] = useState(null) const [showForm, setShowForm] = useState(false) const { data, setData, errors, post, put, processing, delete: destroy, } = useForm({ category_name: '', 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 = (category) => { setData({ ...data, description: category.description, category_id: category.id, category_name: category.name, }) } const handleChange = (e) => { const key = e.target.id const value = e.target.value setData(key, value) } const handleReset = () => { setTransaction(null) setSearch('') setStartDate(moment().startOf('month').format('YYYY-MM-DD')) setEndDate(moment().endOf('month').format('YYYY-MM-DD')) 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_name: transaction.category?.name, 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'), ]), }) } useEffect(() => { if(prevValues) { Inertia.get(route(route().current()), { q: search, startDate, endDate }, { replace: true, preserveState: true }) } }, [search, startDate, endDate]) return ( Transaction } >
toggleForm()} > Add
setStartDate(e.target.value) } />
setEndDate(e.target.value) } />
setSearch(e.target.value) } placeholder="Search" />
{transactions?.data?.map( (transaction) => ( ) )}
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
setData('amount', value) } />
) }