Initial commit, repo migration

2024-05-14 22:19:14 +07:00
commit b51b940ac4
137 changed files with 19393 additions and 0 deletions
@@ -0,0 +1,164 @@
+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>
+		</>
+	)
+}