import React, { useState, useEffect, useRef } from 'react'; import ReactToPrint from 'react-to-print'; import qs from 'qs' import { Inertia } from '@inertiajs/inertia'; import { Link } from '@inertiajs/inertia-react'; import { Head } 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 FormModal from './FormModal'; import DetailModal from './DetailModal'; 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, _q } = props const [items, setItems] = useState([]) const [startDate] = useState(_startDate) const [endDate] = useState(_endDate) const [filterDate, setFilterDate] = useState([_startDate, _endDate]) const [search, setSearch] = useState(_q); 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, } })) } const formModal = useModalState() const toggle = (expense = null) => { formModal.setData(expense) formModal.toggle() } const detailModal = useModalState() const handleDetail = (expense) => { detailModal.setData(expense) detailModal.toggle() } const handleCheckItem = (e) => { setItems(items.map(item => { if (item.id === +e.target.value) { return { ...item, isChecked: e.target.checked, } } return item })) } const handleExport = () => { const params = items .map((item) => { if (item.isChecked) { return item.id; } }) .filter((isChecked) => { return isChecked !== undefined; }); fetch(route('expenses.export') +'?'+ qs.stringify({ids: params, start_date: filterDate[0], end_date: filterDate[1]}, { encodeValuesOnly:true })) .then( res => res.blob() ) .then( blob => { var file = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.href = file; a.download = "expenses.xlsx"; document.body.appendChild(a); a.click(); a.remove(); }); }; 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]) useEffect(() => { setItems(data.map(item => { return { ...item, isChecked: false } })) }, [data]) return (
toggle()} > 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} {formatIDR(expense.amount)} {expense.status} {+auth.user.role === 3 ? ( <> Approve Reject ) : ( <> )}
( )} content={() => componentToPrint.current } />
); }