404 lines
15 KiB
JavaScript
404 lines
15 KiB
JavaScript
/* eslint-disable no-mixed-spaces-and-tabs */
|
|
import { CardCustom } from '@/components/CardCustom'
|
|
import { Belakang } from '@/components/Layouts'
|
|
import { Judul, SubJudul } from '@/components/TextCustom'
|
|
import { ddRekomendasi } from '@/constant/globalData'
|
|
import { TagihanGet, VerifikasiSave } from '@/services/otorisasi/verifikasi-service'
|
|
import { Formik } from 'formik'
|
|
import 'moment/locale/id'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import { Accordion, AccordionTab } from 'primereact/accordion'
|
|
import { BreadCrumb } from 'primereact/breadcrumb'
|
|
import { Button } from 'primereact/button'
|
|
import { Card } from 'primereact/card'
|
|
import { Dropdown } from 'primereact/dropdown'
|
|
import { InputText } from 'primereact/inputtext'
|
|
import { InputTextarea } from 'primereact/inputtextarea'
|
|
import { RadioButton } from 'primereact/radiobutton'
|
|
import { TabPanel, TabView } from 'primereact/tabview'
|
|
import { Toast } from 'primereact/toast'
|
|
import React, { useEffect, useRef, useState } from 'react'
|
|
import Swal from 'sweetalert2'
|
|
|
|
export default function FormPersetujuan() {
|
|
const router = useRouter()
|
|
const { tagihan_id } = router.query
|
|
const [dataTagihan, setDataTagihan] = useState([])
|
|
const [dataDetail, setDataDetail] = useState([])
|
|
|
|
useEffect(() => {
|
|
tagihan_id &&
|
|
TagihanGet({ ref_id: tagihan_id })
|
|
.then((res) => {
|
|
setDataTagihan(res.data[0])
|
|
setDataDetail(res.data[1])
|
|
})
|
|
.catch((err) => console.log(err))
|
|
}, [tagihan_id])
|
|
|
|
const toast = useRef(null)
|
|
const [activeIndex, setActiveIndex] = useState(0)
|
|
|
|
/**
|
|
* *Breadcrumb
|
|
*/
|
|
const items = [{ label: 'Persetujuan', url: '/otorisasi/persetujuan' }, { label: 'Form' }]
|
|
const home = { icon: 'pi pi-home', url: '/dashboard' }
|
|
|
|
const formikInitialValues = () => {
|
|
const detail =
|
|
dataDetail.length > 0 &&
|
|
dataDetail.map((value) => {
|
|
let cekTMS = []
|
|
value.syarat.map((valueTMS) => {
|
|
cekTMS.push(valueTMS.ms)
|
|
})
|
|
let cekTMSH = cekTMS.find((isi_tms) => isi_tms === 'tms')
|
|
return {
|
|
detail_id: value.detail_id,
|
|
jenis_belanja: value.jenis_belanja,
|
|
jenis_kegiatan: value.jenis_kegiatan,
|
|
akun: value.akun_id,
|
|
keperluan_untuk: value.keperluan,
|
|
rekom_kabag: cekTMSH === 'tms' ? 'Ditolak/dikembalikan' : '',
|
|
syarat: value.syarat.map((valueSyarat) => {
|
|
return {
|
|
syarat_id: valueSyarat.syarat_id,
|
|
nama_persyaratan: valueSyarat.syarat_dokumen,
|
|
catatans: {
|
|
verif: valueSyarat.verif_note,
|
|
bendahara: valueSyarat.bendahara_note,
|
|
spm: valueSyarat.spm_note,
|
|
},
|
|
ms: valueSyarat.ms,
|
|
}
|
|
}),
|
|
}
|
|
})
|
|
return { details: detail, persetujuan: false, tagihan_id: tagihan_id }
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Toast ref={toast} />
|
|
<Head>
|
|
<title>Form Persetujuan</title>
|
|
</Head>
|
|
<Belakang>
|
|
<BreadCrumb model={items} home={home} />
|
|
<div className='mb-5'></div>
|
|
<Judul>Form Persetujuan</Judul>
|
|
<Card>
|
|
<div className='grid grid-cols-2 gap-3'>
|
|
<CardCustom header={'No SPP'} content={dataTagihan && dataTagihan.no_spp} />
|
|
<CardCustom header={'Unit PPK'} content={dataTagihan && dataTagihan.unit} />
|
|
<CardCustom header={'Jenis Tagihan'} content={dataTagihan && dataTagihan.tagihan} />
|
|
</div>
|
|
</Card>
|
|
{dataDetail.length > 0 && (
|
|
<Formik
|
|
initialValues={formikInitialValues()}
|
|
onSubmit={async (values, { setSubmitting }) => {
|
|
VerifikasiSave(values)
|
|
.then((res) => {
|
|
if (res.status == 'ok') {
|
|
Swal.fire({
|
|
title: 'Success',
|
|
text: 'Verifikasi berhasil',
|
|
icon: 'success',
|
|
timer: 2000,
|
|
timerProgressBar: true,
|
|
}).then(() => {
|
|
router.push('/otorisasi/persetujuan')
|
|
})
|
|
}
|
|
setSubmitting(false)
|
|
})
|
|
.catch((err) => {
|
|
setSubmitting(false)
|
|
console.log(err)
|
|
})
|
|
}}
|
|
validate={(data) => {
|
|
let errors = {}
|
|
data.details.map((values, indexTagihan) => {
|
|
const indexTagihanx = indexTagihan + 1
|
|
if (!values.rekom_kabag) {
|
|
errors.rekom = 'required'
|
|
toast.current.show({
|
|
severity: 'error',
|
|
summary: 'Error Message',
|
|
detail: 'Rekomendasi Tagihan ' + indexTagihanx + ' Tidak Boleh Kosong',
|
|
})
|
|
}
|
|
values.syarat.map((valuesSyarats, indexSyarat) => {
|
|
const indexSyaratx = indexSyarat + 1
|
|
if (!valuesSyarats.ms) {
|
|
errors.ms = 'required'
|
|
toast.current.show({
|
|
severity: 'error',
|
|
summary: 'Error Message',
|
|
detail: 'Tagihan ' + indexTagihanx + ' Syarat ke ' + indexSyaratx + ' MS/TMS Tidak Boleh Kosong',
|
|
})
|
|
} else if (valuesSyarats.ms === 'tms') {
|
|
if (!valuesSyarats.catatans.verif) {
|
|
errors.keterangan = 'required'
|
|
toast.current.show({
|
|
severity: 'error',
|
|
summary: 'Error Message',
|
|
detail:
|
|
'Tagihan ' + indexTagihanx + ' Syarat ke ' + indexSyaratx + ' Catatan Tidak Boleh Kosong',
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
return errors
|
|
}}
|
|
validateOnChange={false}
|
|
>
|
|
{({ values, handleChange, handleSubmit, setFieldValue, isSubmitting }) => {
|
|
const handleKirim = () => {
|
|
setFieldValue('persetujuan', true)
|
|
handleSubmit()
|
|
}
|
|
|
|
const handleTolak = () => {
|
|
setFieldValue('persetujuan', false)
|
|
handleSubmit()
|
|
}
|
|
let cekTMSTolak = []
|
|
values.details.map((valRekomKabag) => {
|
|
cekTMSTolak.push(valRekomKabag.rekom_kabag)
|
|
})
|
|
let cekTMSTolakH = cekTMSTolak.find((isi_tms) => isi_tms === 'Ditolak/dikembalikan')
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Accordion
|
|
activeIndex={activeIndex}
|
|
onTabChange={(e) => setActiveIndex(e.index)}
|
|
className='mt-3 shadow'
|
|
>
|
|
{dataDetail.map((dataTagihan, indexTagihan) => {
|
|
let cekTMS = []
|
|
values.details[indexTagihan].syarat.map((valueTMS) => {
|
|
cekTMS.push(valueTMS.ms)
|
|
})
|
|
let cekTMSH = cekTMS.find((isi_tms) => isi_tms === 'tms')
|
|
|
|
return (
|
|
<AccordionTab header={`Tagihan ${indexTagihan + 1}`} key={indexTagihan}>
|
|
<div className='grid grid-cols-2 gap-3'>
|
|
<CardCustom header={'Jenis Belanja'} content={dataTagihan.jenis_belanja} type='cream' />
|
|
<CardCustom header={'Jenis Kegiatan'} content={dataTagihan.jenis_kegiatan} type='cream' />
|
|
<CardCustom header={'Akun'} content={dataTagihan.akun_id} type='cream' />
|
|
<CardCustom header={'Keperluan Untuk'} content={dataTagihan.keperluan} type='cream' />
|
|
<div className='border text-center'>
|
|
<p className='font-semibold py-1 bg-green-100'>File</p>
|
|
<div className='flex items-center justify-center h-[40px]'>
|
|
<Link href={process.env.NEXT_PUBLIC_API_FILE + dataTagihan.filepath}>
|
|
<a target={'_blank'} className='flex items-center justify-center gap-x-1'>
|
|
<i className='pi pi-file-pdf' style={{ fontSize: '2em' }} />
|
|
<p className='text-sm hover:underline'>Klik disini untuk lihat file</p>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='my-3'>
|
|
<SubJudul className='text-lg mb-1'>Syarat</SubJudul>
|
|
<div className='flex border rounded py-1 px-3 text-xs gap-5 w-fit mb-1'>
|
|
<div className='flex gap-3 items-center'>
|
|
<span className='bg-logo-pink1 w-10 h-3 rounded'></span>
|
|
<p>Syarat dengan status TMS (Tidak memenuhi syarat)</p>
|
|
</div>
|
|
<div className='flex gap-3 items-center'>
|
|
<span className='bg-logo-kuning1 w-10 h-3 rounded'></span>
|
|
<p>Syarat dengan catatan</p>
|
|
</div>
|
|
</div>
|
|
<Accordion className='accordion-syarat'>
|
|
{dataTagihan.syarat.map((valueSyarat, indexSyarat) => {
|
|
return (
|
|
<AccordionTab
|
|
header={valueSyarat.syarat_dokumen}
|
|
key={indexSyarat}
|
|
headerClassName={`${
|
|
values.details[indexTagihan].syarat[indexSyarat].ms === 'tms'
|
|
? 'p-accordion-syarat-tms'
|
|
: values.details[indexTagihan].syarat[indexSyarat].catatans.verif
|
|
? 'p-accordion-syarat-catatan'
|
|
: ''
|
|
}`}
|
|
>
|
|
<div className='mx-32'>
|
|
<table className='custom-table'>
|
|
<thead>
|
|
<tr>
|
|
<th>MS</th>
|
|
<th>TMS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td width={'10%'}>
|
|
<div className='flex flex-col justify-center items-center'>
|
|
<RadioButton
|
|
name={`details.${indexTagihan}.syarat.${indexSyarat}.ms`}
|
|
value='ms'
|
|
onChange={(e) => {
|
|
handleChange(e)
|
|
setFieldValue(`details.${indexTagihan}.rekom_kabag`, null)
|
|
}}
|
|
checked={values.details[indexTagihan].syarat[indexSyarat].ms === 'ms'}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<td className='text-center' width={'10%'}>
|
|
<RadioButton
|
|
name={`details.${indexTagihan}.syarat.${indexSyarat}.ms`}
|
|
value='tms'
|
|
onChange={(e) => {
|
|
handleChange(e)
|
|
setFieldValue(
|
|
`details.${indexTagihan}.rekom_kabag`,
|
|
'Ditolak/dikembalikan'
|
|
)
|
|
}}
|
|
checked={values.details[indexTagihan].syarat[indexSyarat].ms === 'tms'}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr className=''>
|
|
<td colSpan={4}>
|
|
<p className='text-xl font-semibold mb-1'>Catatan</p>
|
|
<TabView key={indexSyarat} activeIndex={0}>
|
|
<TabPanel header='Catatan Verifikator'>
|
|
<InputTextarea
|
|
name={`details.${indexTagihan}.syarat.${indexSyarat}.catatans.verif`}
|
|
rows={5}
|
|
cols={30}
|
|
value={
|
|
values.details[indexTagihan].syarat[indexSyarat].catatans.verif
|
|
}
|
|
onChange={handleChange}
|
|
className='w-full'
|
|
placeholder='Masukkan catatan Verifikator'
|
|
/>
|
|
</TabPanel>
|
|
|
|
<TabPanel header='Catatan Bendahara'>
|
|
<InputTextarea
|
|
name={`details.${indexTagihan}.syarat.${indexSyarat}.catatans.bendahara`}
|
|
rows={5}
|
|
cols={30}
|
|
value={
|
|
values.details[indexTagihan].syarat[indexSyarat].catatans
|
|
.bendahara
|
|
}
|
|
onChange={handleChange}
|
|
className='w-full'
|
|
placeholder='Masukkan catatan Bendahara'
|
|
readOnly
|
|
/>
|
|
</TabPanel>
|
|
<TabPanel header='Catatan SPM'>
|
|
<InputTextarea
|
|
name={`details.${indexTagihan}.syarat.${indexSyarat}.catatans.spm`}
|
|
rows={5}
|
|
cols={30}
|
|
value={
|
|
values.details[indexTagihan].syarat[indexSyarat].catatans.spm
|
|
}
|
|
onChange={handleChange}
|
|
className='w-full'
|
|
placeholder='Masukkan catatan SPM'
|
|
readOnly
|
|
/>
|
|
</TabPanel>
|
|
</TabView>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</AccordionTab>
|
|
)
|
|
})}
|
|
</Accordion>
|
|
</div>
|
|
<SubJudul className='text-lg mb-1'>Rekomendasi Verif</SubJudul>
|
|
<InputText
|
|
value={dataTagihan.rekomendasi_verifikator}
|
|
className='w-72'
|
|
readOnly
|
|
style={{ marginBottom: '12px' }}
|
|
/>
|
|
<SubJudul className='text-lg mb-1'>Rekomendasi Kasub</SubJudul>
|
|
<InputText
|
|
value={dataTagihan.rekomendasi_kasub}
|
|
className='w-72'
|
|
readOnly
|
|
style={{ marginBottom: '12px' }}
|
|
/>
|
|
<SubJudul className='text-lg mb-1'>Rekomendasi Kabag</SubJudul>
|
|
<Dropdown
|
|
name={`details.${indexTagihan}.rekom_kabag`}
|
|
optionLabel='name'
|
|
optionValue='name'
|
|
value={
|
|
cekTMSH === 'tms' ? 'Ditolak/dikembalikan' : values.details[indexTagihan].rekom_kabag
|
|
}
|
|
options={
|
|
cekTMSH === 'tms'
|
|
? ddRekomendasi.filter((val) => val.name === 'Ditolak/dikembalikan')
|
|
: ddRekomendasi.filter((val) => val.name !== 'Ditolak/dikembalikan')
|
|
}
|
|
onChange={handleChange}
|
|
placeholder='Pilih rekomendasi'
|
|
className='w-80'
|
|
showClear={
|
|
values.details[indexTagihan].rekom_kabag
|
|
? values.details[indexTagihan].rekom_kabag === 'Ditolak/dikembalikan'
|
|
? false
|
|
: true
|
|
: false
|
|
}
|
|
readOnly={cekTMSH === 'tms' ? true : false}
|
|
/>
|
|
</AccordionTab>
|
|
)
|
|
})}
|
|
</Accordion>
|
|
<div className='mt-3 flex justify-center gap-x-3'>
|
|
<Button
|
|
type='button'
|
|
label='Tolak'
|
|
onClick={() => handleTolak()}
|
|
className='p-button-sm p-button-danger'
|
|
disabled={cekTMSTolakH === 'Ditolak/dikembalikan' ? false : true}
|
|
loading={isSubmitting}
|
|
/>
|
|
<Button
|
|
type='button'
|
|
label='Kirim'
|
|
onClick={() => handleKirim()}
|
|
className='p-button-sm'
|
|
disabled={cekTMSTolakH === 'Ditolak/dikembalikan' ? true : false}
|
|
loading={isSubmitting}
|
|
/>
|
|
</div>
|
|
</React.Fragment>
|
|
)
|
|
}}
|
|
</Formik>
|
|
)}
|
|
</Belakang>
|
|
</>
|
|
)
|
|
}
|