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 (
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
|