e-verify/pages/otorisasi/verifikasi/index.js

import { DatatablePrimeV2 } from '@/components/Datatables-v2'
import { Label } from '@/components/Label'
import { Belakang } from '@/components/Layouts'
import { Judul } from '@/components/TextCustom'
import { VerifikasiList } from '@/services/otorisasi/verifikasi-service'
import { Formik } from 'formik'
import moment from 'moment'
import Head from 'next/head'
import Link from 'next/link'
import { Button } from 'primereact/button'
import { Calendar } from 'primereact/calendar'
import { Card } from 'primereact/card'
import { Column } from 'primereact/column'
import { InputText } from 'primereact/inputtext'
import { Toast } from 'primereact/toast'
import React, { useEffect, useRef, useState } from 'react'

export default function Verifikasi() {
	const toast = useRef(null)
	const [data, setData] = useState([])
	const [search, setSearch] = useState('')
	const [loading, setLoading] = useState(false)

	// DATATABLE
	const [first, setFirst] = useState(0)
	const [page, setPage] = useState(0)
	const [length, setLength] = useState(10)
	const [totalRecords, setTotalRecords] = useState(0)
	const [sort, setSort] = useState([])
	const [orderDir, setOrderDir] = useState('desc')
	const [orderCol, setOrderCol] = useState(2)

	useEffect(() => {
		setLoading(true)
		let params = {
			draw: page,
			start: first,
			length: length,
			order_col: orderCol,
			order_dir: orderDir,
		}

		const { no_spp, tanggal_input } = search
		params.no_spp = no_spp ? no_spp : ''
		params.tanggal_input = tanggal_input ? moment(tanggal_input).format('YYYY-MM-DD') : ''

		VerifikasiList(params).then((res) => {
			setData(res.data)
			setLoading(false)
			setTotalRecords(
				res.recordsFiltered === 1 ? 1 : res.recordsFiltered < 1 ? res.recordsFiltered : res.recordsFiltered
			)
		})
	}, [page, first, length, orderCol, orderDir, search])

	const actionBodyTemplate = (rowData) => {
		return (
			<div className='flex gap-x-2'>
				<Link href={`/otorisasi/verifikasi/form?tagihan_id=${rowData.tagihan_id}`}>
					<Button icon='pi pi-play' label='Proses' className='p-button-sm p-button-rounded' />
				</Link>
			</div>
		)
	}

	const bodyTanggal = (rowData) => {
		return rowData.tanggal_kirim === '-' ? rowData.tanggal_kirim : moment(rowData.tanggal_kirim).format('DD MMMM YYYY')
	}

	const Pencarian = (
		<React.Fragment>
			<Formik
				initialValues={{ no_spp: '', tanggal_input: '' }}
				onSubmit={(values) => {
					const tempTanggalInput = values.tanggal_input
					values.tanggal_input &&
						Object.assign(values, { tanggal_input: moment(values.tanggal_input).format('YYYY-MM-D') })
					setSearch(values)
					values.tanggal_input = tempTanggalInput
				}}
			>
				{({ values, handleChange, handleSubmit }) => {
					return (
						<form onSubmit={handleSubmit}>
							<div className='flex gap-x-5 items-center justify-center'>
								<div className='flex flex-col'>
									<label htmlFor='no_spp'>No SPP</label>
									<InputText
										id='no_spp'
										name='no_spp'
										value={values.no_spp}
										onChange={handleChange}
										placeholder='Masukkan Nomor SPP'
									/>
								</div>
								<div className='flex flex-col'>
									<label htmlFor='no_spp'>Tanggal Kirim</label>
									<Calendar
										name='tanggal_input'
										value={values.tanggal_input}
										onChange={handleChange}
										placeholder='e.g. 17 Agustus 1945'
										dateFormat='dd MM yy'
										showButtonBar
									></Calendar>
								</div>
								<div className='flex flex-col'>
									<label htmlFor=''>&nbsp;</label>
									<Button type='submit' label='Cari' className='p-button-sm p-button-success' icon='pi pi-search' />
								</div>
							</div>
						</form>
					)
				}}
			</Formik>
		</React.Fragment>
	)

	const bodyUrgensi = (rowData) => {
		let color
		switch (rowData.urgensi.toLowerCase()) {
			case 'low':
				color = 'success'
				break

			case 'medium':
				color = 'warning'
				break

			case 'high':
				color = 'danger'
				break
		}
		return <Label type={color}>{rowData.urgensi}</Label>
	}

	return (
		<>
			<Toast ref={toast} />
			<Head>
				<title>Verifikasi</title>
			</Head>
			<Belakang>
				<Judul>Verifikasi</Judul>
				<Card className='card-search my-3'>{Pencarian}</Card>
				<DatatablePrimeV2
					data={data}
					first={first}
					length={length}
					page={page}
					setFirst={setFirst}
					setLength={setLength}
					setPage={setPage}
					onSort={(e) => {
						setSort(e.multiSortMeta)
						if (e.multiSortMeta.length > 0) {
							switch (e.multiSortMeta[0].field) {
								case 'no_spp':
									setOrderCol(0)
									break

								case 'tanggal':
									setOrderCol(2)
									break
							}

							switch (e.multiSortMeta[0].order) {
								case -1:
									setOrderDir('desc')
									break

								case 1:
									setOrderDir('asc')
									break
							}
						}
					}}
					totalRecords={totalRecords}
					sort={sort}
					loading={loading}
				>
					<Column field='no_spp' header='Nomor SPP' sortable></Column>
					<Column field='unit' header='Unit'></Column>
					<Column field='tanggal' header='Tanggal Kirim' body={bodyTanggal} sortable></Column>
					<Column header='Urgensi' body={bodyUrgensi}></Column>
					<Column header='Action' body={actionBodyTemplate} exportable={false}></Column>
				</DatatablePrimeV2>
			</Belakang>
		</>
	)
}