165 lines
5.1 KiB
JavaScript
165 lines
5.1 KiB
JavaScript
import { CardFilterLaporan } from '@/components/CardCustom'
|
|
import { DatatablePrime } from '@/components/Datatables'
|
|
import { Belakang } from '@/components/Layouts'
|
|
import { Judul } from '@/components/TextCustom'
|
|
import { DDUserVerifKasub, Laporan21 } from '@/services/laporan/laporan-service'
|
|
import { UserGetOne } from '@/services/manajemen/user-service'
|
|
import { Formik } from 'formik'
|
|
import moment from 'moment'
|
|
import Head from 'next/head'
|
|
import { Button } from 'primereact/button'
|
|
import { Calendar } from 'primereact/calendar'
|
|
import { Column } from 'primereact/column'
|
|
import { Dropdown } from 'primereact/dropdown'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export default function RekapBulananPerUser() {
|
|
const [data, setData] = useState([])
|
|
const [headers, setHeaders] = useState([])
|
|
const [draw, setDraw] = useState(1)
|
|
const [optionVerifKasub, setOptionVerifKasub] = useState([])
|
|
const [userID, setUserID] = useState('')
|
|
const [refresh, setRefresh] = useState(0)
|
|
const [periodeFrom, setPeriodeFrom] = useState('')
|
|
const [periodeTo, setPeriodeTo] = useState('')
|
|
const [namaUser, setNamaUser] = useState('')
|
|
|
|
useEffect(() => {
|
|
let params = {
|
|
from: periodeFrom,
|
|
to: periodeTo,
|
|
user_id: userID,
|
|
}
|
|
|
|
Laporan21(params)
|
|
.then((res) => {
|
|
if (res.status === 'error') {
|
|
setData([])
|
|
} else {
|
|
// console.log(res.data)
|
|
setData(res.data.rows)
|
|
setHeaders(res.data.headers)
|
|
}
|
|
})
|
|
.catch((err) => console.log(err))
|
|
}, [refresh])
|
|
|
|
useEffect(() => {
|
|
DDUserVerifKasub()
|
|
.then((res) => setOptionVerifKasub(res.data))
|
|
.catch((err) => console.log(err))
|
|
}, [])
|
|
|
|
const dynamicColumns = headers.map((col, i) => {
|
|
return <Column key={i} field={[i]} header={col} />
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Laporan Rekapitulasi Bulanan per User</title>
|
|
</Head>
|
|
<Belakang>
|
|
<Judul>Laporan Rekapitulasi Bulanan per User</Judul>
|
|
<CardFilterLaporan header={'Filter'}>
|
|
<Formik
|
|
initialValues={{ user_id: '', from: undefined, to: undefined }}
|
|
onSubmit={(values, { setSubmitting }) => {
|
|
let periodeFromBefore = values.from
|
|
let periodeToBefore = values.to
|
|
Object.assign(values, { from: moment(values.from).format('YYYY-MM') })
|
|
Object.assign(values, { to: moment(values.to).format('YYYY-MM') })
|
|
setPeriodeFrom(values.from)
|
|
setPeriodeTo(values.to)
|
|
setUserID(values.user_id)
|
|
UserGetOne({ user_id: values.user_id }).then((res) => {
|
|
setNamaUser(res.data.nama)
|
|
})
|
|
|
|
values.from = periodeFromBefore
|
|
values.to = periodeToBefore
|
|
setRefresh(Math.random())
|
|
setSubmitting(false)
|
|
}}
|
|
validateOnChange={false}
|
|
>
|
|
{({ values, handleChange, handleSubmit, isSubmitting }) => {
|
|
return (
|
|
<form onSubmit={handleSubmit} className='flex gap-x-5 items-center'>
|
|
<div className='flex flex-col'>
|
|
<label htmlFor='user_id'>Username</label>
|
|
<Dropdown
|
|
name='user_id'
|
|
optionLabel='nama_user'
|
|
optionValue='user_id'
|
|
value={values.user_id}
|
|
options={optionVerifKasub}
|
|
onChange={handleChange}
|
|
placeholder='Select a Username'
|
|
className='w-52'
|
|
filter
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col'>
|
|
<label htmlFor='from'>Periode From</label>
|
|
<Calendar
|
|
name='from'
|
|
value={values.from}
|
|
onChange={handleChange}
|
|
view='month'
|
|
dateFormat='MM yy'
|
|
placeholder='Select a Periode From'
|
|
/>
|
|
</div>
|
|
<p>S/D</p>
|
|
<div className='flex flex-col'>
|
|
<label htmlFor='periode'>Periode To</label>
|
|
<Calendar
|
|
name='to'
|
|
value={values.to}
|
|
onChange={handleChange}
|
|
view='month'
|
|
dateFormat='MM yy'
|
|
placeholder='Select a Periode To'
|
|
/>
|
|
</div>
|
|
<div className='flex items-end mb-1'>
|
|
<Button type='submit' label='Tampilkan' className='p-button-sm' loading={isSubmitting} />
|
|
</div>
|
|
</form>
|
|
)
|
|
}}
|
|
</Formik>
|
|
</CardFilterLaporan>
|
|
<div className='border rounded p-3 mb-5 shadow'>
|
|
<table cellPadding={3} width={'100%'}>
|
|
<tbody>
|
|
<tr style={{ borderBottom: '1px solid', borderColor: '#e5e7eb' }}>
|
|
<td className='font-semibold' width={'10%'}>
|
|
Nama
|
|
</td>
|
|
<td width={'1%'}>:</td>
|
|
<td width={'89%'}>{namaUser}</td>
|
|
</tr>
|
|
<tr style={{ borderBottom: '1px solid', borderColor: '#e5e7eb' }}>
|
|
<td className='font-semibold'>Unit</td>
|
|
<td>:</td>
|
|
<td>Biro Keuangan</td>
|
|
</tr>
|
|
<tr style={{ borderBottom: '1px solid', borderColor: '#e5e7eb' }}>
|
|
<td className='font-semibold'>Bulan</td>
|
|
<td>:</td>
|
|
<td>{periodeFrom && moment(periodeFrom).format('MMMM YYYY')}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<DatatablePrime data={data} draw={draw} setDraw={setDraw} buttonAddCustom={false} showHeader={false}>
|
|
{dynamicColumns}
|
|
</DatatablePrime>
|
|
</Belakang>
|
|
</>
|
|
)
|
|
}
|