You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
9.8 KiB
React
195 lines
9.8 KiB
React
3 years ago
|
import React, { useState, useEffect } from 'react'
|
||
|
import DatePicker from 'react-datepicker'
|
||
|
import moment from 'moment'
|
||
3 years ago
|
import qs from 'qs'
|
||
3 years ago
|
import { Head } from '@inertiajs/inertia-react'
|
||
3 years ago
|
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}`)
|
||
|
|
||
3 years ago
|
const params = {
|
||
|
startDate: moment(startDate).format('yyyy-MM-DD'),
|
||
|
endDate: moment(endDate).format('yyyy-MM-DD'),
|
||
|
}
|
||
|
|
||
3 years ago
|
useEffect(() => {
|
||
|
if (preValue) {
|
||
|
Inertia.get(
|
||
|
route(route().current()),
|
||
3 years ago
|
params,
|
||
3 years ago
|
{
|
||
|
replace: true,
|
||
|
preserveState: true,
|
||
|
}
|
||
|
)
|
||
|
}
|
||
|
}, [startDate, endDate])
|
||
3 years ago
|
|
||
3 years ago
|
return (
|
||
|
<Authenticated
|
||
|
auth={props.auth}
|
||
|
errors={props.errors}
|
||
|
header={
|
||
|
<h2 className="font-semibold text-xl text-gray-800 leading-tight">
|
||
|
Gaji
|
||
|
</h2>
|
||
|
}
|
||
|
>
|
||
|
<Head title="Payroll" />
|
||
|
<div className="py-12">
|
||
|
<div className="flex flex-col w-full sm:px-6 lg:px-8 space-y-2">
|
||
|
<div
|
||
|
className="card bg-white w-full"
|
||
|
style={{ minHeight: '400px' }}
|
||
|
>
|
||
|
<div className="card-body">
|
||
|
<div className="flex flex-col md:flex-row space-y-2 md:space-y-0 items-start md:items-stretch w-full mb-4 justify-between">
|
||
|
<div className="btn-group my-auto">
|
||
3 years ago
|
<a
|
||
3 years ago
|
className="btn btn-info btn-outline"
|
||
3 years ago
|
href={`${route(
|
||
|
'report.export'
|
||
|
)}?${qs.stringify(params)}`}
|
||
3 years ago
|
>
|
||
|
Download Excel
|
||
3 years ago
|
</a>
|
||
3 years ago
|
<a
|
||
|
className="btn btn-info btn-outline"
|
||
|
href={`${route(
|
||
|
'report.export-pdf'
|
||
|
)}?${qs.stringify(params)}`}
|
||
|
>
|
||
|
Download PDF
|
||
|
</a>
|
||
3 years ago
|
</div>
|
||
|
<div className="flex flex-row md:space-x-4">
|
||
|
<div>
|
||
|
<label className="label">
|
||
|
<span className="label-text">
|
||
|
Tanggal Awal
|
||
|
</span>
|
||
|
</label>
|
||
|
<div className="relative">
|
||
|
<DatePicker
|
||
|
selected={startDate}
|
||
|
onChange={(date) => {
|
||
|
setStartDate(date)
|
||
|
}}
|
||
|
format="dd/mm/yyyy"
|
||
|
className="input input-bordered"
|
||
|
nextMonthButtonLabel=">"
|
||
|
previousMonthButtonLabel="<"
|
||
|
/>
|
||
|
<div className="absolute right-2.5 rounded-l-none y-0 flex items-center top-2.5">
|
||
|
<svg
|
||
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
className="h-6 w-6"
|
||
|
fill="none"
|
||
|
viewBox="0 0 24 24"
|
||
|
stroke="currentColor"
|
||
|
>
|
||
|
<path
|
||
|
strokeLinecap="round"
|
||
|
strokeLinejoin="round"
|
||
|
strokeWidth={2}
|
||
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||
|
/>
|
||
|
</svg>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div>
|
||
|
<label className="label">
|
||
|
<span className="label-text">
|
||
|
Tanggal Akhir
|
||
|
</span>
|
||
|
</label>
|
||
|
<div className="relative">
|
||
|
<DatePicker
|
||
|
selected={endDate}
|
||
|
onChange={(date) => {
|
||
|
setEndDate(date)
|
||
|
}}
|
||
|
format="dd/mm/yyyy"
|
||
|
className="input input-bordered"
|
||
|
nextMonthButtonLabel=">"
|
||
|
previousMonthButtonLabel="<"
|
||
|
/>
|
||
|
<div className="absolute right-2.5 rounded-l-none y-0 flex items-center top-2.5">
|
||
|
<svg
|
||
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
className="h-6 w-6"
|
||
|
fill="none"
|
||
|
viewBox="0 0 24 24"
|
||
|
stroke="currentColor"
|
||
|
>
|
||
|
<path
|
||
|
strokeLinecap="round"
|
||
|
strokeLinejoin="round"
|
||
|
strokeWidth={2}
|
||
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||
|
/>
|
||
|
</svg>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div className="overflow-x-auto">
|
||
|
<table className="table w-full table-zebra">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th>Tanggal</th>
|
||
|
<th>Nama Karyawan</th>
|
||
|
<th>Kontak</th>
|
||
|
<th>Total</th>
|
||
|
<th>Jumlah Item</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
{payrolls.map((payroll) => (
|
||
|
<tr key={payroll.id}>
|
||
|
<th>
|
||
|
{formatDate(payroll.date)}
|
||
|
</th>
|
||
|
<td>{payroll.employee.name}</td>
|
||
3 years ago
|
<td>
|
||
|
{payroll.employee.whatsapp}
|
||
|
</td>
|
||
3 years ago
|
<td>
|
||
|
{formatIDR(payroll.recived)}
|
||
|
</td>
|
||
|
<td>
|
||
3 years ago
|
{formatIDR(
|
||
|
payroll.item_count
|
||
|
)}
|
||
3 years ago
|
</td>
|
||
|
</tr>
|
||
|
))}
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</div>
|
||
3 years ago
|
<Pagination links={links} params={params} />
|
||
3 years ago
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</Authenticated>
|
||
|
)
|
||
|
}
|