Initial commit, repo migration
This commit is contained in:
unknown
@@ -0,0 +1,211 @@
|
||||
import { DatatablePrimeV2 } from '@/components/Datatables-v2'
|
||||
import { Belakang } from '@/components/Layouts'
|
||||
import { Judul } from '@/components/TextCustom'
|
||||
import { DashboardAll, DashboardP2k } from '@/services/dashboard-service'
|
||||
import { JenisTagihanList } from '@/services/referensi/jenisTagihan-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 { Card } from 'primereact/card'
|
||||
import { Column } from 'primereact/column'
|
||||
import { Dropdown } from 'primereact/dropdown'
|
||||
import { InputText } from 'primereact/inputtext'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
export default function Dashboard() {
|
||||
const [data, setData] = useState([])
|
||||
const [displayDialog, setDisplayDialog] = useState(false)
|
||||
const [dataDialog, setDataDialog] = useState([])
|
||||
const [search, setSearch] = useState({})
|
||||
const [ddJenisTagihan, setDdJenisTagihan] = useState([])
|
||||
|
||||
// DATATABLE
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [totalRecords, setTotalRecords] = useState(0)
|
||||
const [first, setFirst] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [length, setLength] = useState(10)
|
||||
const [orderCol, setOrderCol] = useState(2)
|
||||
const [sort, setSort] = useState([])
|
||||
const [orderDir, setOrderDir] = useState('desc')
|
||||
|
||||
useEffect(() => {
|
||||
JenisTagihanList().then((res) => setDdJenisTagihan(res.data))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const { role } = JSON.parse(localStorage.getItem('user'))
|
||||
setLoading(true)
|
||||
|
||||
let params = {
|
||||
draw: page,
|
||||
start: first,
|
||||
length: length,
|
||||
order_col: orderCol,
|
||||
order_dir: orderDir,
|
||||
}
|
||||
|
||||
const { no_spp, jenis_tagihan, tanggal_input } = search
|
||||
params.no_spp = no_spp ? no_spp : ''
|
||||
params.jenis_tagihan = jenis_tagihan ? jenis_tagihan : ''
|
||||
params.tanggal_input = tanggal_input ? moment(tanggal_input).format('YYYY-MM-DD') : ''
|
||||
|
||||
if (role === 'PPK' || role === 'Verifikator') {
|
||||
DashboardP2k(params).then((res) => {
|
||||
setLoading(false)
|
||||
setData(res.data)
|
||||
setTotalRecords(res.recordsFiltered - 1)
|
||||
})
|
||||
} else {
|
||||
DashboardAll(params).then((res) => {
|
||||
setLoading(false)
|
||||
setData(res.data)
|
||||
setTotalRecords(res.recordsFiltered - 1)
|
||||
})
|
||||
}
|
||||
}, [page, first, length, orderCol, orderDir, search])
|
||||
|
||||
const bodyDetail = (rowData) => {
|
||||
return (
|
||||
<div className='flex gap-x-2'>
|
||||
<Button
|
||||
label='Detail'
|
||||
className='p-button-sm'
|
||||
onClick={() => {
|
||||
setDisplayDialog(true), setDataDialog(rowData)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Pencarian = (
|
||||
<React.Fragment>
|
||||
<Formik
|
||||
initialValues={{ no_spp: '', jenis_tagihan: '', 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'>Jenis Tagihan</label>
|
||||
<Dropdown
|
||||
name='jenis_tagihan'
|
||||
value={values.jenis_tagihan}
|
||||
optionValue='jenis_id'
|
||||
optionLabel='nama'
|
||||
options={ddJenisTagihan}
|
||||
onChange={handleChange}
|
||||
placeholder='Select Jenis Tagihan'
|
||||
showClear={values.jenis_tagihan ? true : false}
|
||||
className='w-52'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<label htmlFor='no_spp'>Tanggal Input</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=''> </label>
|
||||
<Button type='submit' label='Cari' className='p-button-sm p-button-success' icon='pi pi-search' />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}}
|
||||
</Formik>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Head>
|
||||
<title>Dashboard</title>
|
||||
</Head>
|
||||
<Belakang>
|
||||
<Judul>Data Transaction</Judul>
|
||||
<Card className='card-search my-3'>{Pencarian}</Card>
|
||||
<DatatablePrimeV2
|
||||
data={data}
|
||||
first={first}
|
||||
loading={loading}
|
||||
setFirst={setFirst}
|
||||
setLength={setLength}
|
||||
setPage={setPage}
|
||||
sort={sort}
|
||||
totalRecords={totalRecords}
|
||||
length={length}
|
||||
onSort={(e) => {
|
||||
setSort(e.multiSortMeta)
|
||||
console.log('sorting', e)
|
||||
if (e.multiSortMeta.length > 0) {
|
||||
switch (e.multiSortMeta[0].field) {
|
||||
case 'no_spp':
|
||||
setOrderCol(0)
|
||||
break
|
||||
|
||||
case 'nama_unit':
|
||||
setOrderCol(1)
|
||||
break
|
||||
|
||||
case 'tanggal':
|
||||
setOrderCol(2)
|
||||
break
|
||||
}
|
||||
|
||||
switch (e.multiSortMeta[0].order) {
|
||||
case -1:
|
||||
setOrderDir('desc')
|
||||
break
|
||||
|
||||
case 1:
|
||||
setOrderDir('asc')
|
||||
break
|
||||
}
|
||||
}
|
||||
}}
|
||||
dataDialog={dataDialog}
|
||||
displayDialog={displayDialog}
|
||||
setDisplayDialog={setDisplayDialog}
|
||||
>
|
||||
<Column field='no_spp' header='Nomor SPP' sortable></Column>
|
||||
<Column field='nama_unit' header='Unit PPK' sortable></Column>
|
||||
<Column field='tanggal_kirim' header='Tanggal Pengajuan' sortable></Column>
|
||||
<Column field='status_tagihan' header='Status'></Column>
|
||||
<Column field='no_spm' header='No SPM'></Column>
|
||||
<Column field='no_sp2d' header='No SP2D'></Column>
|
||||
<Column field='tgl_spm' header='Tanggal SPM'></Column>
|
||||
<Column field='tgl_sp2d' header='Tanggal SP2D'></Column>
|
||||
<Column header='Detail' body={bodyDetail}></Column>
|
||||
</DatatablePrimeV2>
|
||||
</Belakang>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user