507 lines
16 KiB
JavaScript
507 lines
16 KiB
JavaScript
/* eslint-disable no-mixed-spaces-and-tabs */
|
|
import { LandingPageLayout } from '@/components/Layouts'
|
|
import { CekTagihan } from '@/services/cek-tagihan-service'
|
|
import { HomepageGet } from '@/services/homepage-service'
|
|
import Head from 'next/head'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { Button } from 'primereact/button'
|
|
import { Column } from 'primereact/column'
|
|
import { ColumnGroup } from 'primereact/columngroup'
|
|
import { DataTable } from 'primereact/datatable'
|
|
import { InputText } from 'primereact/inputtext'
|
|
import { Panel } from 'primereact/panel'
|
|
import { Row } from 'primereact/row'
|
|
import { Steps } from 'primereact/steps'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { FaFileArrowUp, FaFileCircleCheck, FaFileLines, FaFileSignature } from 'react-icons/fa6'
|
|
|
|
export default function LandingPage({ token }) {
|
|
const [cekTagihan, setCekTagihan] = useState('')
|
|
const [dataCekTagihan, setDataCekTagihan] = useState([])
|
|
const [data, setData] = useState([
|
|
{
|
|
status_tagihan_daily: {
|
|
'Ditolak/dikembalikan': { total: 0, percentage: 0 },
|
|
'Disetujui dengan catatan': { total: 0, percentage: 0 },
|
|
'Disetujui tanpa catatan': { total: 0, percentage: 0 },
|
|
},
|
|
status_tagihan_ytd: {
|
|
'Ditolak/dikembalikan': { total: 0, percentage: 0 },
|
|
'Disetujui dengan catatan': { total: 0, percentage: 0 },
|
|
'Disetujui tanpa catatan': { total: 0, percentage: 0 },
|
|
},
|
|
jenis_tagihan_daily: {
|
|
GUP: {
|
|
percentage: 0,
|
|
total: 0,
|
|
},
|
|
LS: {
|
|
percentage: 0,
|
|
total: 0,
|
|
},
|
|
PTUP: {
|
|
percentage: 0,
|
|
total: 0,
|
|
},
|
|
},
|
|
jenis_tagihan_yearly: {
|
|
GUP: {
|
|
percentage: 0,
|
|
total: 0,
|
|
},
|
|
LS: {
|
|
percentage: 0,
|
|
total: 0,
|
|
},
|
|
PTUP: {
|
|
percentage: 0,
|
|
total: 0,
|
|
},
|
|
},
|
|
},
|
|
])
|
|
const [dataKetetapan, setDataKetetapan] = useState([])
|
|
const [dataPrgoress, setDataPrgoress] = useState([])
|
|
|
|
useEffect(() => {
|
|
HomepageGet()
|
|
.then((res) => {
|
|
setData([res.data])
|
|
setDataKetetapan(res.data.monitoring_ketepatan)
|
|
setDataPrgoress(res.data.monitoring_progress)
|
|
})
|
|
.catch((err) => {
|
|
setData(err)
|
|
console.log('err homepage get', err)
|
|
})
|
|
}, [])
|
|
const handleCari = () => {
|
|
CekTagihan(cekTagihan)
|
|
.then((res) => setDataCekTagihan(res.data))
|
|
.catch((err) => console.log(err))
|
|
}
|
|
|
|
const items = [
|
|
{ label: 'Pengajuan tagihan' },
|
|
{ label: 'Berkas telah diverifikasi' },
|
|
{ label: 'Berkas telah divalidasi' },
|
|
{ label: 'Berkas telah diapprove' },
|
|
{ label: 'Berkas disetujui bendahara' },
|
|
{ label: 'Berkas disetujui PPSPM' },
|
|
{ label: 'SPM dikirim', className: 'last-dor' },
|
|
]
|
|
|
|
const headerGroup = (
|
|
<ColumnGroup>
|
|
<Row>
|
|
<Column header='No SPP' rowSpan={2} />
|
|
<Column header='Unit Kerja' rowSpan={2} />
|
|
<Column header='Progress' colSpan={6} />
|
|
</Row>
|
|
<Row>
|
|
<Column header='PPK' />
|
|
<Column header='Verifikasi' />
|
|
<Column header='Rekomendasi' />
|
|
<Column header='Persetujuan' />
|
|
<Column header='PPSPM' />
|
|
</Row>
|
|
</ColumnGroup>
|
|
)
|
|
|
|
return (
|
|
<div className='landing-page'>
|
|
<Head>
|
|
<title>E-Verifikasi</title>
|
|
</Head>
|
|
<div className='flex items-center 2xl:px-60 md:px-20 py-3 justify-between border-b-2 mx-3'>
|
|
<div className='pl-3'>
|
|
<Image alt='logo' src={'/img/e-verif-title.png'} width={511 / 6} height={540 / 6} />
|
|
</div>
|
|
<div className='title font-bebas 2xl:text-3xl py-2 md:text-xl text-hitam text-lg text-center'>
|
|
<p className='tracking-wide text-3xl'>SISTEM APLIKASI</p>
|
|
<p className='tracking-wide text-3xl'>Penyelesaian Tagihan dan Pertanggungjawaban Keuangan</p>
|
|
</div>
|
|
<div className='hidden md:block'>
|
|
{token ? (
|
|
<Link href={'/dashboard'}>
|
|
<Button label='Dashboard' className='h-8' />
|
|
</Link>
|
|
) : (
|
|
<Link href={'/login'}>
|
|
<Button label='Login' className='h-8' />
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<LandingPageLayout>
|
|
<Panel
|
|
headerTemplate={() => {
|
|
return (
|
|
<div className='bg-gradient-to-r from-orange3 to-yellow rounded-t p-2'>
|
|
<p>Cek Tagihan</p>
|
|
</div>
|
|
)
|
|
}}
|
|
toggleable
|
|
className='md:hidden mb-1'
|
|
>
|
|
<div className='mb-5 p-2'>
|
|
<InputText
|
|
value={cekTagihan}
|
|
onChange={(e) => setCekTagihan(e.target.value)}
|
|
placeholder='Masukkan nomor SPP'
|
|
style={{ marginBottom: '10px', width: '100%' }}
|
|
/>
|
|
<Button
|
|
label='Cari tagihan'
|
|
icon='pi pi-search'
|
|
className='p-button-sm'
|
|
style={{ width: '100%' }}
|
|
onClick={() => handleCari()}
|
|
/>
|
|
</div>
|
|
{Object.keys(dataCekTagihan).length > 0 && (
|
|
<React.Fragment>
|
|
<div className='tracking-doc p-2'>
|
|
<div className='rounded-t border-b-2 border-orange pl-1 mb-3 font-semibold text-xl pb-1'>
|
|
Tracking Dokumen
|
|
</div>
|
|
<Steps model={items} className='custom-step' activeIndex={parseInt(dataCekTagihan.detail.tahapan)} />
|
|
</div>
|
|
<div className='detail-doc p-2'>
|
|
<div className='rounded-t border-b-2 border-orange pl-1 mb-3 font-semibold text-xl pb-1'>
|
|
Detail Dokumen
|
|
</div>
|
|
<div className='text-sm'>
|
|
<p>
|
|
No SPP: <span className='font-semibold'>{dataCekTagihan.detail.no_spp}</span>
|
|
</p>
|
|
<p>
|
|
Nama tagihan: <span className='font-semibold'>{dataCekTagihan.detail.nama_tagihan}</span>
|
|
</p>
|
|
<p>
|
|
Nama unit: <span className='font-semibold'>{dataCekTagihan.detail.nama_unit}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</React.Fragment>
|
|
)}
|
|
</Panel>
|
|
{/* YTD DOKUMEN */}
|
|
<Panel
|
|
headerTemplate={() => {
|
|
return (
|
|
<div className='bg-gray-200 rounded-t p-1'>
|
|
<p>Year to Date</p>
|
|
</div>
|
|
)
|
|
}}
|
|
toggleable
|
|
>
|
|
<div className='grid grid-cols-4 gap-3 p-5'>
|
|
<div className='satu bg-logo-orange1 flex items-center justify-around p-1 rounded'>
|
|
<div className='kiri'>
|
|
<p className='text-sm'>Jumlah Dokumen</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>
|
|
{data.length > 0 && Object.keys(data[0].status_tagihan_ytd).length > 0
|
|
? data[0].status_tagihan_ytd['Ditolak/dikembalikan'].total +
|
|
data[0].status_tagihan_ytd['Disetujui dengan catatan'].total +
|
|
data[0].status_tagihan_ytd['Disetujui tanpa catatan'].total
|
|
: 0}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='kanan'>
|
|
<FaFileLines color='#D85610' className='text-4xl opacity-50' />
|
|
</div>
|
|
</div>
|
|
<div className='dua bg-logo-pink1 flex items-center justify-around p-1 rounded'>
|
|
<div className='kiri'>
|
|
<p className='text-sm'>Dikembalikan</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>
|
|
{data.length > 0 && data[0].status_tagihan_ytd['Ditolak/dikembalikan'].total}
|
|
</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data.length > 0 && data[0].status_tagihan_ytd['Ditolak/dikembalikan'].percentage}%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='kanan'>
|
|
<FaFileArrowUp color='#D81432' className='text-4xl opacity-50' />
|
|
</div>
|
|
</div>
|
|
<div className='tiga bg-logo-kuning1 flex items-center justify-around p-1 rounded'>
|
|
<div className='kiri'>
|
|
<p className='text-sm'>Dengan Catatan</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>
|
|
{data.length > 0 && data[0].status_tagihan_ytd['Disetujui dengan catatan'].total}
|
|
</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data.length > 0 && data[0].status_tagihan_ytd['Disetujui dengan catatan'].percentage}%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='kanan'>
|
|
<FaFileSignature color='#DC980C' className='text-4xl opacity-50' />
|
|
</div>
|
|
</div>
|
|
<div className='empat bg-logo-biru1 flex items-center justify-around p-1 rounded'>
|
|
<div className='kiri'>
|
|
<p className='text-sm'>Disetujui</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>
|
|
{data.length > 0 && data[0].status_tagihan_ytd['Disetujui tanpa catatan'].total}
|
|
</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data.length > 0 && data[0].status_tagihan_ytd['Disetujui tanpa catatan'].percentage}%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='kanan'>
|
|
<FaFileCircleCheck color='#3666A0' className='text-4xl opacity-50' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
{/* TODAY DOKUMEN */}
|
|
<Panel
|
|
headerTemplate={() => {
|
|
return (
|
|
<div className='bg-gray-200 rounded-t p-1 text-sm'>
|
|
<p>Today</p>
|
|
</div>
|
|
)
|
|
}}
|
|
toggleable
|
|
>
|
|
<div className='grid grid-cols-4 gap-3 p-5'>
|
|
<div className='satu bg-logo-orange1 flex items-center justify-around p-1 rounded'>
|
|
<div className='kiri'>
|
|
<p className='text-sm'>Jumlah Dokumen</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>
|
|
{data[0].status_tagihan_daily['Ditolak/dikembalikan'].total +
|
|
data[0].status_tagihan_daily['Disetujui dengan catatan'].total +
|
|
data[0].status_tagihan_daily['Disetujui tanpa catatan'].total}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='kanan'>
|
|
<FaFileLines color='#D85610' className='text-4xl opacity-50' />
|
|
</div>
|
|
</div>
|
|
<div className='dua bg-logo-pink1 flex items-center justify-around p-1 rounded'>
|
|
<div className='kiri'>
|
|
<p className='text-sm'>Dikembalikan</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>{data[0].status_tagihan_daily['Ditolak/dikembalikan'].total}</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data[0].status_tagihan_daily['Ditolak/dikembalikan'].percentage}
|
|
%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='kanan'>
|
|
<FaFileArrowUp color='#D81432' className='text-4xl opacity-50' />
|
|
</div>
|
|
</div>
|
|
<div className='tiga bg-logo-kuning1 flex items-center justify-around p-1 rounded'>
|
|
<div className='kiri'>
|
|
<p className='text-sm'>Dengan Catatan</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>
|
|
{data[0].status_tagihan_daily['Disetujui dengan catatan'].total}
|
|
</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data[0].status_tagihan_daily['Disetujui dengan catatan'].percentage}
|
|
%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='kanan'>
|
|
<FaFileSignature color='#DC980C' className='text-4xl opacity-50' />
|
|
</div>
|
|
</div>
|
|
<div className='empat bg-logo-biru1 flex items-center justify-around p-1 rounded'>
|
|
<div className='kiri'>
|
|
<p className='text-sm'>Disetujui</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>
|
|
{data[0].status_tagihan_daily['Disetujui tanpa catatan'].total}
|
|
</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data[0].status_tagihan_daily['Disetujui tanpa catatan'].percentage}
|
|
%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='kanan'>
|
|
<FaFileCircleCheck color='#3666A0' className='text-4xl opacity-50' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
{/* YTD ALL TAGIHAN */}
|
|
<Panel
|
|
headerTemplate={() => {
|
|
return (
|
|
<div className='bg-gray-200 rounded-t p-1 text-sm'>
|
|
<p>Year to Date</p>
|
|
</div>
|
|
)
|
|
}}
|
|
toggleable
|
|
>
|
|
<div className='grid grid-cols-3 gap-3 p-5'>
|
|
<div className='satu bg-logo-orange1 flex items-center justify-around p-1 rounded flex-col'>
|
|
<p className='text-sm'>Tagihan LS</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>{data[0].jenis_tagihan_yearly.LS.total}</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data[0].jenis_tagihan_yearly.LS.percentage}
|
|
%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='dua bg-logo-pink1 flex items-center justify-around p-1 rounded flex-col'>
|
|
<p className='text-sm'>Tagihan GU</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>{data[0].jenis_tagihan_yearly.GUP.total}</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data[0].jenis_tagihan_yearly.GUP.percentage}
|
|
%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='tiga bg-logo-kuning1 flex items-center justify-around p-1 rounded flex-col'>
|
|
<p className='text-sm'>Tagihan TUP</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>{data[0].jenis_tagihan_yearly.PTUP.total}</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data[0].jenis_tagihan_yearly.PTUP.percentage}
|
|
%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
{/* TODAY ALL TAGIHAN */}
|
|
<Panel
|
|
headerTemplate={() => {
|
|
return (
|
|
<div className='bg-gray-200 rounded-t p-1 text-sm'>
|
|
<p>Today</p>
|
|
</div>
|
|
)
|
|
}}
|
|
toggleable
|
|
>
|
|
<div className='grid grid-cols-3 gap-3 p-3'>
|
|
<div className='satu bg-logo-orange1 flex items-center justify-around p-1 rounded flex-col'>
|
|
<p className='text-sm'>Tagihan LS</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>{data[0].jenis_tagihan_daily.LS.total}</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data[0].jenis_tagihan_daily.LS.percentage}
|
|
%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='dua bg-logo-pink1 flex items-center justify-around p-1 rounded flex-col'>
|
|
<p className='text-sm'>Tagihan GU</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>{data[0].jenis_tagihan_daily.GUP.total}</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data[0].jenis_tagihan_daily.GUP.percentage}
|
|
%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='tiga bg-logo-kuning1 flex items-center justify-around p-1 rounded flex-col'>
|
|
<p className='text-sm'>Tagihan TUP</p>
|
|
<div className='flex gap-3'>
|
|
<p className='text-lg font-semibold'>{data[0].jenis_tagihan_daily.PTUP.total}</p>
|
|
<p className='text-lg font-semibold'>
|
|
({data[0].jenis_tagihan_daily.PTUP.percentage}
|
|
%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
|
|
{/* MONITORING PROGRESS PENYELESAIAN DOKUMEN */}
|
|
<Panel
|
|
headerTemplate={() => {
|
|
return (
|
|
<div className='bg-logo-biru1 rounded-t p-1 text-sm text-white'>
|
|
<p>Monitoring Progress Penyelesaian Dokumen</p>
|
|
</div>
|
|
)
|
|
}}
|
|
toggleable
|
|
>
|
|
<DataTable
|
|
value={dataPrgoress}
|
|
headerColumnGroup={headerGroup}
|
|
tableStyle={{ minWidth: '100%' }}
|
|
size='small'
|
|
stripedRows={true}
|
|
className='p-5'
|
|
>
|
|
<Column field='no_spp' />
|
|
<Column field='unit' />
|
|
<Column field='ppk' />
|
|
<Column field='verifikasi' />
|
|
<Column field='rekomendasi' />
|
|
<Column field='persetujuan' />
|
|
<Column field='ppspm' />
|
|
</DataTable>
|
|
</Panel>
|
|
|
|
{/* MONITORING KETEPATAN PENGAJUAN DOKUMEN */}
|
|
<Panel
|
|
headerTemplate={() => {
|
|
return (
|
|
<div className='bg-logo-biru1 rounded-t p-1 text-sm text-white'>
|
|
<p>Monitoring Ketepatan Pengajuan Dokumen</p>
|
|
</div>
|
|
)
|
|
}}
|
|
toggleable
|
|
>
|
|
<DataTable
|
|
value={dataKetetapan}
|
|
tableStyle={{ minWidth: '100%' }}
|
|
size='small'
|
|
stripedRows={true}
|
|
className='p-5'
|
|
>
|
|
<Column header='No SPP' field='no_spp' />
|
|
<Column header='No Tagihan' field='no_tagihan' />
|
|
<Column header='Jenis Tagihan' field='jenis_tagihan' />
|
|
<Column header='Unit Kerja' field='unit_kerja' />
|
|
<Column header='Tanggal Selesai Kegiatan' field='tangga_selesai_kegiatan' />
|
|
<Column header='Tanggal Dokumen Masuk' field='tanggal_dokumen_masuk' />
|
|
<Column header='Keterangan' field='keterangan' />
|
|
</DataTable>
|
|
</Panel>
|
|
</LandingPageLayout>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const getServerSideProps = async (ctx) => {
|
|
const token = ctx.req.cookies.token || null
|
|
|
|
return {
|
|
props: {
|
|
token,
|
|
},
|
|
}
|
|
}
|