324 lines
11 KiB
JavaScript
324 lines
11 KiB
JavaScript
|
import Link from 'next/link'
|
||
|
|
import { useRouter } from 'next/router'
|
||
|
|
import { useEffect, useState } from 'react'
|
||
|
|
|
||
|
|
export const Menu = () => {
|
||
|
|
const router = useRouter()
|
||
|
|
const { pathname } = router
|
||
|
|
const [menus, setMenus] = useState([])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setMenus(JSON.parse(localStorage.getItem('menus')))
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const renderMenu = (target) => {
|
||
|
|
let ready = Object.keys(menus).find((data) => data === target)
|
||
|
|
if (!ready) return false
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='navbar-detail 2xl:px-16 bg-biru2 h-12 flex items-center justify-center shadow'>
|
||
|
|
<div className='menu flex 2xl:gap-x-14 gap-x-10 2xl:text-base text-sm'>
|
||
|
|
<Link href={'/dashboard'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded ${
|
||
|
|
pathname.startsWith('/dashboard') ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('dashboard')}
|
||
|
|
>
|
||
|
|
<i className='pi pi-home mr-1' />
|
||
|
|
Dashboard
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded relative dropdown-toggle ${
|
||
|
|
pathname.startsWith('/referensi') ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('referensi')}
|
||
|
|
>
|
||
|
|
<i className='pi pi-database mr-1' />
|
||
|
|
Referensi
|
||
|
|
<div className='absolute rounded bg-biru2 w-max min-w-full 2xl:top-8 top-7 -left-0 py-3 z-10 flex flex-col gap-y-1 shadow dropdown-menu'>
|
||
|
|
<Link href={'/referensi/jenis-tagihan'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/referensi/jenis-tagihan' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('referensi/jenis-tagihan')}
|
||
|
|
>
|
||
|
|
Jenis Tagihan
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/referensi/jenis-belanja'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/referensi/jenis-belanja' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('referensi/jenis-belanja')}
|
||
|
|
>
|
||
|
|
Jenis Belanja
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/referensi/jenis-kegiatan'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/referensi/jenis-kegiatan' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('referensi/jenis-kegiatan')}
|
||
|
|
>
|
||
|
|
Jenis Kegiatan
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/referensi/akun'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/referensi/akun' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('referensi/akun')}
|
||
|
|
>
|
||
|
|
Jenis Pembayaran Kegiatan (Akun)
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/referensi/unit-kerja'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/referensi/unit-kerja' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('referensi/unit-kerja')}
|
||
|
|
>
|
||
|
|
Unit Kerja
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/referensi/persyaratan'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/referensi/persyaratan' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('referensi/persyaratan')}
|
||
|
|
>
|
||
|
|
Persyaratan
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/referensi/verifikator'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/referensi/verifikator' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('referensi/verifikator')}
|
||
|
|
>
|
||
|
|
Verifikator
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Link href={'/pengajuan-tagihan'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded ${
|
||
|
|
pathname.startsWith('/pengajuan-tagihan') ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('pengajuan-tagihan')}
|
||
|
|
>
|
||
|
|
<i className='pi pi-dollar mr-1' />
|
||
|
|
Pengajuan Tagihan
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded relative dropdown-toggle ${
|
||
|
|
pathname.startsWith('/otorisasi') ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('otorisasi')}
|
||
|
|
>
|
||
|
|
<i className='pi pi-lock mr-1' />
|
||
|
|
Otorisasi
|
||
|
|
<div className='absolute rounded bg-biru2 w-max min-w-full 2xl:top-8 top-7 -left-0 py-3 z-10 flex flex-col gap-y-1 shadow dropdown-menu'>
|
||
|
|
<Link href={'/otorisasi/verifikasi'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/otorisasi/verifikasi' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('otorisasi/verifikasi')}
|
||
|
|
>
|
||
|
|
Verifikasi
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/otorisasi/rekomendasi'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/otorisasi/rekomendasi' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('otorisasi/rekomendasi')}
|
||
|
|
>
|
||
|
|
Rekomendasi
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/otorisasi/persetujuan'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/otorisasi/persetujuan' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('otorisasi/persetujuan')}
|
||
|
|
>
|
||
|
|
Persetujuan
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/otorisasi/pengesahan'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/otorisasi/pengesahan' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('otorisasi/pengesahan')}
|
||
|
|
>
|
||
|
|
Pengesahan
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/otorisasi/spm'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/otorisasi/spm' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('otorisasi/spm')}
|
||
|
|
>
|
||
|
|
SPM
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded relative dropdown-toggle ${
|
||
|
|
pathname.startsWith('/laporan') ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('laporan')}
|
||
|
|
>
|
||
|
|
<i className='pi pi-chart-line mr-1' />
|
||
|
|
Laporan
|
||
|
|
<div className='absolute rounded bg-biru2 w-max min-w-full 2xl:top-8 top-7 -left-0 py-3 z-10 flex flex-col gap-y-1 shadow dropdown-menu'>
|
||
|
|
<Link href={'/laporan/per-user'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/laporan/per-user' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('laporan/per-user')}
|
||
|
|
>
|
||
|
|
Per User (Verifikator, kasub verif)
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/laporan/approval'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/laporan/approval' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('laporan/approval')}
|
||
|
|
>
|
||
|
|
Approval (Kabag verif, bendahara, ppspm)
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/laporan/rekap-bulanan-per-user'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/laporan/rekap-bulanan-per-user' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('laporan/rekap-bulanan-per-user')}
|
||
|
|
>
|
||
|
|
Rekapitulasi bulanan per user
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/laporan/rekap-verif-per-bulan'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/laporan/rekap-verif-per-bulan' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('laporan/rekap-verif-per-bulan')}
|
||
|
|
>
|
||
|
|
Rekapitulasi hasil verifikasi per bulan
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/laporan/rekap-per-unit-kerja'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/laporan/rekap-per-unit-kerja' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('laporan/rekap-per-unit-kerja')}
|
||
|
|
>
|
||
|
|
Rekapitulasi per unit kerja
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/laporan/rekap-per-jenis-belanja'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/laporan/rekap-per-jenis-belanja' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('laporan/rekap-per-jenis-belanja')}
|
||
|
|
>
|
||
|
|
Rekapitulasi per jenis belanja (BAS)
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/laporan/verif-per-bulan'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/laporan/verif-per-bulan' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('laporan/verif-per-bulan')}
|
||
|
|
>
|
||
|
|
Hasil verifikasi per bulan (detail)
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Link href={'/peraturan'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded ${
|
||
|
|
pathname.startsWith('/peraturan') ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('peraturan')}
|
||
|
|
>
|
||
|
|
<i className='pi pi-shield mr-1' />
|
||
|
|
Peraturan
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow cursor-pointer px-3 py-1 rounded relative dropdown-toggle ${
|
||
|
|
pathname.startsWith('/manajemen') ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('manajemen')}
|
||
|
|
>
|
||
|
|
<i className='pi pi-database mr-1' />
|
||
|
|
Manajemen
|
||
|
|
<div className='absolute rounded bg-biru2 w-max min-w-full 2xl:top-8 top-7 -left-0 py-3 z-10 flex flex-col gap-y-1 shadow dropdown-menu'>
|
||
|
|
<Link href={'/manajemen/user'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/manajemen/user' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('manajemen/user')}
|
||
|
|
>
|
||
|
|
User
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/manajemen/role'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/manajemen/role' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('manajemen/role')}
|
||
|
|
>
|
||
|
|
Role
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href={'/manajemen/jam-kerja'}>
|
||
|
|
<div
|
||
|
|
className={`hover:text-hitam hover:bg-yellow px-3 py-1 ${
|
||
|
|
pathname === '/manajemen/jam-kerja' ? 'bg-yellow' : 'text-white'
|
||
|
|
}`}
|
||
|
|
hidden={!renderMenu('manajemen/jam-kerja')}
|
||
|
|
>
|
||
|
|
Jam Kerja
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|