111 lines
3.3 KiB
JavaScript
111 lines
3.3 KiB
JavaScript
|
import { CardFilterLaporan } from '@/components/CardCustom'
|
||
|
|
import { DatatablePrime } from '@/components/Datatables'
|
||
|
|
import { Belakang } from '@/components/Layouts'
|
||
|
|
import { Judul } from '@/components/TextCustom'
|
||
|
|
import { Laporan32 } from '@/services/laporan/laporan-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 { useEffect, useState } from 'react'
|
||
|
|
|
||
|
|
export default function RekapPerUnitKerja() {
|
||
|
|
const [data, setData] = useState([])
|
||
|
|
const [draw, setDraw] = useState(1)
|
||
|
|
const [refresh, setRefresh] = useState(0)
|
||
|
|
const [periodeFrom, setPeriodeFrom] = useState('')
|
||
|
|
const [periodeTo, setPeriodeTo] = useState('')
|
||
|
|
|
||
|
|
const headers = ['Unit', 'Jumlah Dokumen', 'Disetujui Tanpa Catatan', 'Disetujui Dengan Catatan', 'Tidak Disetujui']
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let params = {
|
||
|
|
from: periodeFrom,
|
||
|
|
to: periodeTo,
|
||
|
|
}
|
||
|
|
|
||
|
|
Laporan32(params)
|
||
|
|
.then((res) => {
|
||
|
|
if (res.status === 'error') {
|
||
|
|
setData([])
|
||
|
|
} else {
|
||
|
|
setData(res.data)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => console.log(err))
|
||
|
|
}, [refresh])
|
||
|
|
|
||
|
|
const dynamicColumns = headers.map((col, i) => {
|
||
|
|
return <Column key={i} field={[i]} header={col} />
|
||
|
|
})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Head>
|
||
|
|
<title>Laporan Rekapitulasi per Unit Kerja</title>
|
||
|
|
</Head>
|
||
|
|
<Belakang>
|
||
|
|
<Judul>Laporan Rekapitulasi per Unit Kerja</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)
|
||
|
|
|
||
|
|
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='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>
|
||
|
|
|
||
|
|
<DatatablePrime data={data} draw={draw} setDraw={setDraw} buttonAddCustom={false} showHeader={false}>
|
||
|
|
{dynamicColumns}
|
||
|
|
</DatatablePrime>
|
||
|
|
</Belakang>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|