import React, { useState, useEffect, useRef } from 'react'; import ReactToPrint from 'react-to-print'; import { Inertia } from '@inertiajs/inertia'; import { Head, usePage, useForm } from '@inertiajs/inertia-react'; import { usePrevious } from 'react-use'; import { toast } from 'react-toastify'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import Pagination from '@/Components/Pagination'; import Print from './Print'; import ModalConfirm from '@/Components/ModalConfirm'; import { DatePickerRangeInput } from '@/Components/DatePickerInput'; import { useModalState } from '@/Hook'; import { formatDate, formatIDR } from '@/Utils'; export default function Dashboard(props) { const { auth, expenses: { data, links, total, last_page }, _startDate, _endDate, _limit } = props const [items, setItems] = useState(data.map(item => { return { ...item, isChecked: false } })) const [startDate] = useState(_startDate) const [endDate] = useState(_endDate) const [filterDate, setFilterDate] = useState([_startDate, _endDate]) const [search, setSearch] = useState(""); const [limit, setLimit] = useState(_limit) const preValue = usePrevious(`${search}-${filterDate[0]}-${filterDate[1]}-${limit}`); const componentToPrint = useRef(); const printBtn = useRef(); const [name, setName] = useState('') const handleBeforePrint = () => { const tmpname = window.prompt('Masukan Nama:') if(tmpname !== null) { new Promise((resolve, _) => { setName(tmpname) resolve(null) }) .then(() => { handlePrint() }) } } const handlePrint = () => { printBtn.current.click() } const handleCheckAllItem = (e) => { setItems(items.map(item => { return { ...item, isChecked: e.target.checked, } })) } // TODO: // add -> operator hanya expense, kasir expense/income // edit -> menyesuaikan // detail // export // const handleCheckItem = (e) => { setItems(items.map(item => { if (item.id === +e.target.value) { return { ...item, isChecked: e.target.checked, } } return item })) } const confirmModal = useModalState(false); const handleDelete = (expense) => { confirmModal.setData(expense); confirmModal.toggle(); }; const onDelete = () => { const expense = confirmModal.data; if (expense != null) { Inertia.delete( route("expenses.destroy", expense), { onSuccess: () => toast.success("item deleted"), } ); } }; const params = { q: search, startDate: filterDate[0], endDate: filterDate[1], limit, }; useEffect(() => { if (preValue) { Inertia.get( route(route().current()), { q: search, startDate: filterDate[0], endDate: filterDate[1], limit }, { replace: true, preserveState: true, } ) } }, [search, filterDate, limit]) return (
Tambah
{+auth.user.role === 1 ? (
Export Excel
) : (
Print
)}
Jumlah Record : {total}
Jumlah Halaman : {last_page}
setSearch(e.target.value)} />
{items.map((expense, index) => { return ( ) })}
handleCheckAllItem(e)} className="checkbox checkbox-xs" type="checkbox" />
No Tanggal Name Job Number Description Amount Status Opsi
handleCheckItem(e)} />
{index + 1} {formatDate(expense.date_expense).format('DD-MM-yyyy')} {expense.name} {expense.job_number} {expense.description} {+expense.isIncome === 0 ? '-' : '+'} {formatIDR(expense.amount)} {+expense.is_paid === 0 ? 'Unpaid' : 'Paid'}
( )} content={() => componentToPrint.current } />
); }