humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: informasi publik

This commit is contained in:
amd123 2024-02-26 10:48:47 +07:00
parent 3b630d6826
commit 37b3e32e41
21 changed files with 833 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@ -37,7 +37,7 @@ export default function RootLayout({
)}
>
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
<main>
<main className="bg-white">
{children}
</main>
</Providers>

8
app/portal-ppid/layanan-informasi/permohonan-informasi/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import Login from '@/components/form/login'
import React from 'react'
export default function PemohononanInformasi() {
return (
<Login />
)
}

8
app/portal-ppid/layanan-informasi/permohonan-keberatan/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import FormObjectionRequest from '@/components/form/form-permohonan-keberatan'
import React from 'react'
export default function PermohonanKeberanatan() {
return (
<FormObjectionRequest />
)
}

8
app/portal-ppid/layanan-informasi/ppid-laporan-tahunan/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import AnnualReport from '@/components/table/laporan-tahunan'
import React from 'react'
export default function ReportTahunan() {
return (
<AnnualReport />
)
}

8
app/portal-ppid/layanan-informasi/registrasi-permohonan/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import FormApplication from '@/components/form/form-permohonan-informasi'
import React from 'react'
export default function RegistrasiPage() {
return (
<FormApplication />
)
}

8
app/portal-ppid/layanan-informasi/statistik-rekapitulasi/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import StatiticAndRecap from '@/components/detail/StatistikRekapitulas'
import React from 'react'
export default function StatisticPage() {
return (
<StatiticAndRecap />
)
}

2
components/detail/DetailPage.tsx
View File

@ -7,7 +7,7 @@ import RelatedNews from '../page/RelatedNews'
export default function DetailPage() {
return (
<>
<div className='text-black md:flex'>
<div className='text-black md:flex bg-white'>
<div className='w-auto md:w-[75%]'>
<DetailNews />
</div>

63
components/detail/StatistikRekapitulas.tsx Normal file
View File

@ -0,0 +1,63 @@
'use client'
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
import React from 'react'
export default function StatiticAndRecap() {
return (
<div className='bg-white text-black p-1 md:p-5 px-0 lg:px-10'>
<div className='flex justify-center items-center'>
<div className='pt-4 hidden md:block'><img src="/al.png" alt="" className='' /></div>
<div className='font-bold text-lg md:text-2xl text-[#DD8306] pl-3'>Statistik / Rekapitulasi</div>
<div className='hidden md:block absolute pb-10 pl-[400px]'><img src="/spark.png" alt="" /></div>
</div>
<div className='p-1 md:p-3 lg:p-5 bg-[#FFF6E9] my-4 flex flex-col items-center'>
<Tabs
aria-label="Options" color='warning'
classNames={{
tabList: " bg-white text-red-500",
}}
>
<Tab key="dashboard" title="Dashboard" className='w-full'>
<div className='flex flex-col items-center border-2 border-red-900 space-y-5'>
<div className='text-xl font-bold text-center pt-3'>Dashboard Statistik / Rekapitulasi PPID Humas Polri</div>
<div>
<img src="/temp/statistik.png" alt="tabel" />
</div>
<div className='flex w-full justify-around'>
<div className='w-1/2 flex items-center justify-center'>
<img src="/temp/panel.png" alt="panel" />
</div>
<div className='w-1/2'>
<div>permohonan,pemberituauan</div>
<div>Pelayanan Informasi Publik</div>
<div>Pelayanan Keberatan</div>
</div>
</div>
<div className='flex w-full justify-evenly'>
<div>
<img src="/temp/panel.png" alt="" />
</div>
<div>
<img src="/temp/panel.png" alt="" />
</div>
</div>
<div className='flex w-full justify-evenly'>
<div>
<img src="/temp/statistik2.png" alt="" />
</div>
<div>
<img src="/temp/panel.png" alt="" />
</div>
</div>
</div>
</Tab>
<Tab key="report" title="Report">
<div className='md:flex'>
</div>
</Tab>
</Tabs>
</div>
</div>
)
}

4
components/form/form-permohonan-informasi.tsx
View File

@ -203,8 +203,8 @@ const FormApplication: React.FC = () => {
}}
isRequired
type="text"
label="Nama"
placeholder="Masukkan username anda!"
label="Pekerjaan"
placeholder="Masukkan informasi pekerjaan Anda!"
variant='underlined'
/>
</div>

475
components/form/form-permohonan-keberatan.tsx Normal file
View File

@ -0,0 +1,475 @@
'use client'
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from '@nextui-org/button';
import { Input } from '@nextui-org/input';
import { Select, SelectItem, SelectSection } from '@nextui-org/react';
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { EyeFilledIcon, EyeSlashFilledIcon } from '../icons';
import Datepicker from "react-tailwindcss-datepicker";
const schema = z.object({
name: z.string().min(3).max(50),
email: z.string().email(),
});
interface FormData {
name: string;
email: string;
}
const FormObjectionRequest: React.FC = () => {
const [isVisible, setIsVisible] = React.useState(false);
const [selectedGender, setSelectedGender] = React.useState('');
const [startDateValue, setStartDateValue] = useState({
startDate: null,
endDate: null,
});
const toggleVisibility = () => setIsVisible(!isVisible);
const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
resolver: zodResolver(schema),
});
const onChangeGender = (selectedItem: any) => {
setSelectedGender(selectedItem);
// Lakukan apa pun yang perlu dilakukan saat pilihan jenis kelamin berubah di sini
console.log("Selected Gender:", selectedItem);
};
const handleValueChange = (newValue: any, num: any) => {
console.log("start:", newValue);
setStartDateValue(newValue);
}
const onSubmit = (data: FormData) => {
console.log(data);
};
return (
// <form onSubmit={handleSubmit(onSubmit)}>
// <div>
// <label htmlFor="name">Name:</label>
// <input {...register('name')} id="name" />
// {errors.name && <p>{errors.name.message}</p>}
// </div>
// <div>
// <label htmlFor="email">Email:</label>
// <input {...register('email')} id="email" />
// {errors.email && <p>{errors.email.message}</p>}
// </div>
// <button type="submit">Submit</button>
// </form>
<div className=' bg-white text-black py-2 md:py-5 lg:py-10 px-2 md:px-5 lg:px-16 space-y-2 md:space-y-5'>
<div className='text-xl font-bold'>Form Register Permohonan Keberatan</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Username"
placeholder="Masukkan username anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
endContent={
<button className="focus:outline-none" type="button" onClick={toggleVisibility}>
{isVisible ? (
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
) : (
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
)}
</button>
}
type={isVisible ? "text" : "password"}
label="Password"
placeholder="Masukkan password anda"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
endContent={
<button className="focus:outline-none" type="button" onClick={toggleVisibility}>
{isVisible ? (
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
) : (
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
)}
</button>
}
type={isVisible ? "text" : "password"}
label="Konfirmasi Password"
placeholder="Masukkan password anda"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Nama Lengkap"
placeholder="Masukkan nama lengkap anda"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Pekerjaan"
placeholder="Masukkan informasi pekerjaan Anda!"
variant='underlined'
/>
</div>
<div>
<Select
label="Jenis Kelamin"
placeholder="Pilih Jenis Kelamin"
className="max-w-sm"
isRequired
variant="underlined"
classNames={{
label: ["!text-black", "font-semibold"],
// mainWrapper: "rounded",
listboxWrapper:
"bg-white w-full !text-indigo-500 text-center font-bold",
popoverContent: "bg-white !text-indigo-500",
trigger:
"hover:!bg-gray-100",
value: "!text-black"
}}
listboxProps={{
itemClasses: {
base: [
"!text-left",
"!text-black",
"!bg-white",
"text-indigo-500 ",
"data-[selectable=true]:!text-indigo-500",
"data-[pressed=true]:text-indigo-500",
"data-[hover=true]:!text-indigo-300",
],
wrapper: ["!bg-white border-none"],
},
}}
onChange={onChangeGender}
>
<SelectSection >
<SelectItem key="male">Laki-laki</SelectItem>
<SelectItem key="female">Perempuan</SelectItem>
</SelectSection>
</Select>
</div>
<div>
<Select
label="Tipe"
placeholder="Pilih tipe permohonan informasi sesuai kebutuhn anda"
className="max-w-sm"
isRequired
variant="underlined"
classNames={{
label: ["!text-black", "font-semibold"],
// mainWrapper: "rounded",
listboxWrapper:
"bg-white w-full !text-indigo-500 text-center font-bold",
popoverContent: "bg-white !text-indigo-500",
trigger:
"hover:!bg-gray-100",
value: "!text-black"
}}
listboxProps={{
itemClasses: {
base: [
"!text-left",
"!text-black",
"!bg-white",
"text-indigo-500 ",
"data-[selectable=true]:!text-indigo-500",
"data-[pressed=true]:text-indigo-500",
"data-[hover=true]:!text-indigo-300",
],
wrapper: ["!bg-white border-none"],
},
}}
onChange={onChangeGender}
>
<SelectSection >
<SelectItem key="male">Laki-laki</SelectItem>
<SelectItem key="female">Perempuan</SelectItem>
</SelectSection>
</Select>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="KTP"
placeholder="Masukkan nomor ktp anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Alamat"
placeholder="Masukkan alamat anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="No Telp"
placeholder="Masukkan nomor telepon anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Email"
placeholder="Masukkan email anda!"
variant='underlined'
/>
</div>
<div>
<Input
className="max-w-sm"
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold", "text-xs", "w-full"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Tanggal Lahir"
isReadOnly
labelPlacement="outside-left"
/>
<Datepicker
useRange={false}
asSingle={true}
value={startDateValue}
displayFormat="DD/MM/YYYY"
onChange={(e: any) => handleValueChange(e, 1)}
inputClassName="w-full bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl "
/>
</div>
<div>
<Select
label="Pendidikan Terakhir"
placeholder="Pilih Pendidikan terakhir anda"
className="max-w-sm"
isRequired
variant="underlined"
classNames={{
label: ["!text-black", "font-semibold"],
// mainWrapper: "rounded",
listboxWrapper:
"bg-white w-full !text-indigo-500 text-center font-bold",
popoverContent: "bg-white !text-indigo-500",
trigger:
"hover:!bg-gray-100",
value: "!text-black"
}}
listboxProps={{
itemClasses: {
base: [
"!text-left",
"!text-black",
"!bg-white",
"text-indigo-500 ",
"data-[selectable=true]:!text-indigo-500",
"data-[pressed=true]:text-indigo-500",
"data-[hover=true]:!text-indigo-300",
],
wrapper: ["!bg-white border-none"],
},
}}
// onChange={onChangeGender}
>
<SelectSection >
<SelectItem key="sd">SD</SelectItem>
<SelectItem key="smp">SMP</SelectItem>
<SelectItem key="sma">SMA</SelectItem>
<SelectItem key="d">D1/D2/D3</SelectItem>
<SelectItem key="s1">S1</SelectItem>
<SelectItem key="s2">S2</SelectItem>
<SelectItem key="femals3">S3</SelectItem>
</SelectSection>
</Select>
</div>
<Button className="w-full bg-[#DD8306] font-semibold">Daftar Sekarang</Button>
</div>
);
};
export default FormObjectionRequest;

122
components/form/login.tsx Normal file
View File

@ -0,0 +1,122 @@
'use client'
import { Input } from '@nextui-org/input'
import React from 'react'
import { EyeFilledIcon, EyeSlashFilledIcon } from '../icons';
import { Button } from '@nextui-org/button';
export default function Login() {
const [isVisible, setIsVisible] = React.useState(false);
const toggleVisibility = () => setIsVisible(!isVisible);
return (
<div className='text-black md:flex px-0 md:px-2 lg:px-5'>
<div className='w-auto md:w-1/2 p-2 md:p-5 lg:p-10 space-y-5'>
<div className='text-xl font-bold'>Selamat Datang di Portal PPID Humas Polri</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Username"
placeholder="Masukkan username anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
endContent={
<button className="focus:outline-none" type="button" onClick={toggleVisibility}>
{isVisible ? (
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
) : (
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
)}
</button>
}
type={isVisible ? "text" : "password"}
label="Password"
placeholder="Masukkan password anda"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
endContent={
<button className="focus:outline-none" type="button" onClick={toggleVisibility}>
{isVisible ? (
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
) : (
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
)}
</button>
}
type={isVisible ? "text" : "password"}
label="Konfirmasi Password"
placeholder="Masukkan password anda"
variant='underlined'
/>
</div>
<div>
<Button size='lg' className="w-full bg-[#DD8306] rounded-md font-semibold">Login</Button>
</div>
<div className='flex justify-center text-xs font-medium py-3'>Don't have account? Register Now</div>
<div>
<Button size='lg' variant='bordered' className="w-full text-[#DD8306] borde-2 border-[#DD8306] rounded-md font-semibold">Register</Button>
</div>
</div>
<div className='hidden sm:flex w-1/2 items-center justify-center p-10'>
<img src="/login.png" alt="logo" />
</div>
</div>
)
}

18
components/icons.tsx
View File

@ -752,4 +752,22 @@ export const WorldIcon = ({
</clipPath>
</defs>
</svg>
);
export const Checklist = ({
size = 24,
width,
height,
...props
}: IconSvgProps) => (
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_681_10672)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.046 5.111C22.3272 5.39229 22.4852 5.77375 22.4852 6.1715C22.4852 6.56924 22.3272 6.95071 22.046 7.232L10.803 18.475C10.6544 18.6236 10.478 18.7415 10.2839 18.8219C10.0898 18.9024 9.88167 18.9438 9.67153 18.9438C9.46138 18.9438 9.25329 18.9024 9.05915 18.8219C8.865 18.7415 8.6886 18.6236 8.54003 18.475L2.95403 12.89C2.81076 12.7516 2.69649 12.5861 2.61787 12.4031C2.53926 12.2201 2.49788 12.0233 2.49615 11.8241C2.49442 11.6249 2.53237 11.4274 2.60779 11.2431C2.68322 11.0587 2.79459 10.8912 2.93543 10.7504C3.07627 10.6096 3.24375 10.4982 3.42809 10.4228C3.61244 10.3473 3.80996 10.3094 4.00913 10.3111C4.2083 10.3129 4.40513 10.3542 4.58813 10.4328C4.77114 10.5115 4.93666 10.6257 5.07503 10.769L9.67103 15.365L19.924 5.111C20.0633 4.97161 20.2287 4.86103 20.4108 4.78559C20.5928 4.71015 20.788 4.67132 20.985 4.67132C21.1821 4.67132 21.3772 4.71015 21.5593 4.78559C21.7413 4.86103 21.9067 4.97161 22.046 5.111Z" fill="#1B59F8" />
</g>
<defs>
<clipPath id="clip0_681_10672">
<rect width="24" height="24" fill="white" transform="translate(0.5)" />
</clipPath>
</defs>
</svg>
);

2
components/navbar/NavbarHumas.tsx
View File

@ -27,7 +27,7 @@ export default function NavbarHumas() {
/>
);
return (
<Navbar shouldHideOnScroll maxWidth='full' isBlurred={true} className='h-28 md:h-36 '>
<Navbar shouldHideOnScroll maxWidth='full' isBlurred={true} className='h-28 md:h-36 dark:bg-[#1F1A17]'>
<div className='w-1/12 min-w-max'>
<img src="/logohumas.png" alt="" />
</div>

12
components/navbar/NavbarPPID.tsx
View File

@ -6,7 +6,7 @@ import { ThemeSwitch } from '../theme-switch'
export default function NavbarPPID() {
return (
<Navbar maxWidth='full' height="8rem">
<Navbar maxWidth='full' height="8rem" className='dark:bg-[#1F1A17]'>
<div className='w-full'>
<div className='hidden md:flex items-end justify-end'>
<div className='flex items-center justify-between gap-1 md:gap-10'>
@ -193,32 +193,32 @@ export default function NavbarPPID() {
<DropdownItem
endContent={<ChevronRightIcon />}
>
<Link href='/portal-ppid/informasi-publik/informasi-serta-merta' color='foreground'>
<Link href='/portal-ppid/layanan-informasi/registrasi-permohonan' color='foreground'>
Registrasi Permohonan
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}
>
<Link href='/portal-ppid/informasi-publik/informasi-berkala' color='foreground'>
<Link href='/portal-ppid/layanan-informasi/permohonan-informasi' color='foreground'>
Permohonan Informasi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/informasi-setiap-saat' color='foreground'>
<Link href='/portal-ppid/layanan-informasi/permohonan-keberatan' color='foreground'>
Permohonan Keberatan
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/informasi-dikecualikan' color='foreground'>
<Link href='/portal-ppid/layanan-informasi/statistik-rekapitulasi' color='foreground'>
Statistik / Rekapitulasi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/penerangan-satuan' color='foreground'>
<Link href='/portal-ppid/layanan-informasi/ppid-laporan-tahunan' color='foreground'>
Laporan Informasi Publik Tahunan
</Link>
</DropdownItem>

6
components/table/informasi-sertamerta.tsx
View File

@ -26,7 +26,7 @@ export default function InformasiSertaMerta() {
/>
)
const animals = [
const filters = [
{ label: "Title", value: "title" },
{ label: "Date", value: "date" },
{ label: "Created At", value: "createdAt" },
@ -72,7 +72,7 @@ export default function InformasiSertaMerta() {
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
{filters.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
@ -102,7 +102,7 @@ export default function InformasiSertaMerta() {
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
{filters.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>

91
components/table/laporan-tahunan.tsx Normal file
View File

@ -0,0 +1,91 @@
'use client'
import { Card, CardBody, Tab, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, getKeyValue } from '@nextui-org/react'
import React from 'react'
import { Checklist, EyeFilledIcon } from '../icons'
export default function AnnualReport() {
const tableData = [
{
key: "1",
tahun: "2024",
download: <Checklist />
},
{
key: "2",
tahun: "2023",
download: <Checklist />
},
{
key: "3",
tahun: "2022",
download: <Checklist />
},
{
key: "4",
tahun: "2021",
download: <Checklist />
},
];
const header = [
{
key: "tahun",
label: "Tahun",
},
{
key: "download",
label: "Download"
}
]
return (
<div className='bg-white text-black p-1 md:p-5'>
<div className='flex justify-center items-center'>
<div className='pt-4 hidden md:block'><img src="/al.png" alt="" className='' /></div>
<div className='font-bold text-lg md:text-2xl text-[#DD8306] pl-3'>Laporan Layanan Informasi Publik Tahunan</div>
<div className='hidden md:block absolute pb-10 pl-[690px]'><img src="/spark.png" alt="" /></div>
</div>
<div className='p-1 md:p-3 lg:p-5 bg-[#FFF6E9] mx-1 md:mx-3 lg:mx-10 my-4 flex flex-col items-center space-y-5'>
<div>
Laporan Tahunan Pejabat Pengelola Informasi dan Dokumentasi (PPID) Humas Polri merupakan kinerja PPID Utama dalam memberikan layanan informasi publik kepada masyarakat.
</div>
<div className='border-2 w-full'>
<Table
color='warning'
selectionMode="single"
defaultSelectedKeys={["1"]}
aria-label="Example static collection table"
classNames={{
wrapper: "bg-white",
base: 'font-bold',
td: "font-medium"
}}
>
{/* <TableHeader className='border-2 border-red-600'>
<TableColumn className=' bg-[#DD8306] text-white text-sm w-full'>Tahun</TableColumn>
<TableColumn className=' bg-[#DD8306] text-white text-sm'>Download</TableColumn>
</TableHeader> */}
<TableHeader columns={header}>
{(column) => <TableColumn className=' bg-[#DD8306] text-white text-sm w-full' key={column.key}>{column.label}</TableColumn>}
</TableHeader>
{/* <TableRow key="1">
<TableCell className=''>2024</TableCell>
<TableCell className='text-center flex justify-center'><Checklist /></TableCell>
</TableRow>
<TableRow key="2">
<TableCell className='flex items-center justify-between'>2023</TableCell>
<TableCell>ceklis</TableCell>
</TableRow> */}
<TableBody items={tableData}>
{(item) => (
<TableRow key={item.key}>
{(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
</TableRow>
)}
</TableBody>
</Table>
</div>
</div>
</div>
)
}

BIN
public/login.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

10
public/temp/checklist.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_681_10672)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.046 5.111C22.3272 5.39229 22.4852 5.77375 22.4852 6.1715C22.4852 6.56924 22.3272 6.95071 22.046 7.232L10.803 18.475C10.6544 18.6236 10.478 18.7415 10.2839 18.8219C10.0898 18.9024 9.88167 18.9438 9.67153 18.9438C9.46138 18.9438 9.25329 18.9024 9.05915 18.8219C8.865 18.7415 8.6886 18.6236 8.54003 18.475L2.95403 12.89C2.81076 12.7516 2.69649 12.5861 2.61787 12.4031C2.53926 12.2201 2.49788 12.0233 2.49615 11.8241C2.49442 11.6249 2.53237 11.4274 2.60779 11.2431C2.68322 11.0587 2.79459 10.8912 2.93543 10.7504C3.07627 10.6096 3.24375 10.4982 3.42809 10.4228C3.61244 10.3473 3.80996 10.3094 4.00913 10.3111C4.2083 10.3129 4.40513 10.3542 4.58813 10.4328C4.77114 10.5115 4.93666 10.6257 5.07503 10.769L9.67103 15.365L19.924 5.111C20.0633 4.97161 20.2287 4.86103 20.4108 4.78559C20.5928 4.71015 20.788 4.67132 20.985 4.67132C21.1821 4.67132 21.3772 4.71015 21.5593 4.78559C21.7413 4.86103 21.9067 4.97161 22.046 5.111Z" fill="#1B59F8"/>
</g>
<defs>
<clipPath id="clip0_681_10672">
<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/temp/panel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
public/temp/statistik.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
public/temp/statistik2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB