import React, { useState, useEffect } from 'react' import DatePicker from 'react-datepicker' import moment from 'moment' import qs from 'qs' import { Head } from '@inertiajs/inertia-react' import { Inertia } from '@inertiajs/inertia' import { usePrevious } from 'react-use' import Authenticated from '@/Layouts/Authenticated' import Pagination from '@/Components/Pagination' import { formatIDR, formatDate } from '@/utils' export default function Reports(props) { const { data: payrolls, links } = props.payrolls const { _startDate, _endDate } = props const [startDate, setStartDate] = useState( _startDate ? new Date(_startDate) : new Date() ) const [endDate, setEndDate] = useState( _endDate ? new Date(_endDate) : new Date() ) const preValue = usePrevious(`${startDate}-${endDate}`) const params = { startDate: moment(startDate).format('yyyy-MM-DD'), endDate: moment(endDate).format('yyyy-MM-DD'), } useEffect(() => { if (preValue) { Inertia.get( route(route().current()), params, { replace: true, preserveState: true, } ) } }, [startDate, endDate]) return ( Gaji } >
{ setStartDate(date) }} format="dd/mm/yyyy" className="input input-bordered" nextMonthButtonLabel=">" previousMonthButtonLabel="<" />
{ setEndDate(date) }} format="dd/mm/yyyy" className="input input-bordered" nextMonthButtonLabel=">" previousMonthButtonLabel="<" />
{payrolls.map((payroll) => ( ))}
Tanggal Nama Karyawan Kontak Total Jumlah Item
{formatDate(payroll.date)} {payroll.employee.name} {payroll.employee.whatsapp} {formatIDR(payroll.recived)} {formatIDR(payroll.item_count)}
) }