import React, { useState, useEffect } from 'react' import DatePicker from 'react-datepicker' import moment from 'moment' import { Head, Link } from '@inertiajs/inertia-react' import { Inertia } from '@inertiajs/inertia' import { usePrevious } from 'react-use' import { toast } from 'react-toastify' import { useModalState } from '@/Hooks' import Authenticated from '@/Layouts/Authenticated' import Pagination from '@/Components/Pagination' import ModalConfirm from '@/Components/ModalConfirm' import { formatIDR, formatDate } from '@/utils' export default function Payrolls(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 confirmModal = useModalState(false) const handleDelete = (payroll) => { confirmModal.setData(payroll) confirmModal.toggle() } const onDelete = () => { const payroll = confirmModal.data if (payroll != null) { Inertia.delete(route('payrolls.destroy', payroll), { onSuccess: () => toast.success('The Data has been deleted'), }) } } 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 } >
Tambah
{ 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 Potongan Bonus Total
{formatDate(payroll.date)} {payroll.employee.name} {formatIDR(payroll.cuts)} {formatIDR(payroll.bonus)} {formatIDR(payroll.recived)} Edit
handleDelete( payroll ) } > Delete
) }