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

git push

This commit is contained in:
amd123 2024-02-23 19:34:32 +07:00
parent 5f4b657141
commit 3b630d6826
33 changed files with 1880 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/portal-ppid/informasi-publik/informasi-berkala/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import InformasiBerkala from '@/components/table/informasi-berkala'
export default function InformasiSMPage() {
return (
<InformasiBerkala />
)
}

7
app/portal-ppid/informasi-publik/informasi-dikecualikan/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import InformasiDikecualikan from '@/components/table/informasi-dikecualikan'
export default function InfromationExcluded() {
return (
<InformasiDikecualikan />
)
}

8
app/portal-ppid/informasi-publik/informasi-serta-merta/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import InformasiSertaMerta from '@/components/table/informasi-sertamerta'
import React from 'react'
export default function InformasiSMPage() {
return (
<InformasiSertaMerta />
)
}

8
app/portal-ppid/informasi-publik/informasi-setiap-saat/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import InformasiSetiapSaat from '@/components/table/informasi-setiap-saat'
import React from 'react'
export default function InformasiSSPage() {
return (
<InformasiSetiapSaat />
)
}

8
app/portal-ppid/informasi-publik/penerangan-satuan/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import PeneranganSatuan from '@/components/table/penerangan-satuan'
import React from 'react'
export default function UnitIlumintaion() {
return (
<PeneranganSatuan />
)
}

8
app/portal-ppid/informasi-publik/uu-dan-peraturan/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import UUPeraturan from '@/components/table/uu-peraturan'
import React from 'react'
export default function LawsRegulation() {
return (
<UUPeraturan />
)
}

19
app/portal-ppid/layout.tsx Normal file
View File

@ -0,0 +1,19 @@
'use client'
import { PPIDLayout } from '@/components/layout/PPIDLayout';
import { usePathname } from 'next/navigation';
import React, { Children } from 'react'
export default function PortalPPIDLayout({
children,
}: {
children: React.ReactNode
}) {
const pathname = usePathname();
console.log(pathname)
return (
<PPIDLayout>
{children}
</PPIDLayout>
)
}

9
app/portal-ppid/page.tsx
View File

@ -1,4 +1,6 @@
'use client'
import PPIDbody from '@/components/Portal PPID/PpidMain';
import PPIDBanner from '@/components/Portal PPID/ppid-banner';
import { PPIDLayout } from '@/components/layout/PPIDLayout';
import { usePathname } from 'next/navigation';
import React, { Children } from 'react'
@ -12,8 +14,9 @@ export default function PortalPPID({
console.log(pathname)
return (
<PPIDLayout>
{children}
</PPIDLayout>
<>
<PPIDBanner />
<PPIDbody />
</>
)
}

8
app/portal-ppid/profile/profile-singkat-ppid/page.tsx Normal file
View File

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

8
app/portal-ppid/profile/sejarah-ppid-polri/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import HistoryPPID from '@/components/page/HistoryPPID'
import React from 'react'
export default function PPIDProfilePage() {
return (
<HistoryPPID />
)
}

7
app/portal-ppid/profile/struktur-ppid/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import StrukturOrganisasi from "@/components/detail/StrukturOrganisasi";
export default function StructurePPID() {
return (
<StrukturOrganisasi />
)
}

9
app/portal-ppid/profile/tugas-dan-fungsi-ppid/page.tsx Normal file
View File

@ -0,0 +1,9 @@
import Task from "@/components/detail/TaskDetail";
export default function PPIDTask() {
return (
<Task />
)
}

8
app/portal-ppid/profile/visi-dan-misi-ppid/page.tsx Normal file
View File

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

17
components/Landing Page/MediaSocial.tsx
View File

@ -8,6 +8,7 @@ import YoutubeWidget from '../SocialMedia/Youtube';
import InstagramWidget from '../SocialMedia/Instagram';
import TiktokWidget from '../SocialMedia/Tiktok';
import Facebookwidget from '../SocialMedia/Facebook';
import TwitterWidget from '../SocialMedia/Twitter';
export default function MediaSocial() {
// const [limitedData, setLimitedData] = useState<any>([]);
@ -97,17 +98,10 @@ export default function MediaSocial() {
</div>
<div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
</div>
<div className='md:flex flex-wrap gap-2 justify-center'>
<ScrollShadow hideScrollBar className="w-[330px] h-[420px]" size={0}>
{/* <MyEmbedSocialHashtag /> */}
</ScrollShadow>
<ScrollShadow className="w-[320px] h-[420px]" size={0}>
<Tweet id="1756863073208664575" />
</ScrollShadow>
<ScrollShadow className="w-[320px] h-[420px]" size={0}>
<Tweet id="1756861280445775877" />
</ScrollShadow>
{/* {dummyData.map((data: any) => (
<div>
<TwitterWidget />
</div>
{/* {dummyData.map((data: any) => (
<div
key={data.id}
className='bg-white text-black h-[2] w-auto md:w-[315px] border-2 rounded-md px-5 py-3'
@ -138,7 +132,6 @@ export default function MediaSocial() {
</div>
</div>
))} */}
</div>
</div>
<div>
<div className='flex items-center justify-between pb-3'>

2
components/Portal PPID/PpidMain.tsx
View File

@ -5,7 +5,7 @@ import LatestNews from './LatestNews'
export default function PPIDbody() {
return (
<div className='md:flex px-2 md:px-4 lg:px-6'>
<div className='md:flex '>
<div className='w-auto bg-[#E2E2E2] md:w-[70%]'>
<PublicInformation />
<LatestNews />

38
components/Portal PPID/PublicInformation.tsx
View File

@ -6,7 +6,41 @@ export default function PublicInformation() {
<div className='text-lg font-semibold underline underline-offset-8 decoration-red-600 pb-5'>
Informasi Publik
</div>
<div className='space-y-4 px-2'>
<div className='grid grid-col-2 md:grid-cols-4 gap-4 text-white font-semibold text-md'>
<div className='flex flex-col items-center gap-2 p-3 bg-[#DD8306] rounded-md'>
<div><img src="/infopublik1.png" alt="logo" /></div>
<div>Informasi Serta Merta</div>
</div>
<div className='flex flex-col items-center gap-2 p-3 bg-[#DD8306] rounded-md'>
<div><img src="/infopublik2.png" alt="logo" /></div>
<div>Informasi Berkala</div>
</div>
<div className='flex flex-col items-center gap-2 p-3 bg-[#DD8306] rounded-md'>
<div><img src="/infopublik3.png" alt="logo" /></div>
<div>Informasi Setiap Saat</div>
</div>
<div className='flex flex-col items-center gap-2 p-3 bg-[#DD8306] rounded-md'>
<div><img src="/infopublik4.png" alt="logo" /></div>
<div>Penerangan Dikecualikan</div>
</div>
<div className='flex flex-col items-center gap-2 p-3 bg-[#DD8306] rounded-md'>
<div><img src="/infopublik5.png" alt="logo" /></div>
<div>Penerangan Satuan</div>
</div>
<div className='flex flex-col items-center gap-2 p-3 bg-[#DD8306] rounded-md'>
<div><img src="/infopublik6.png" alt="logo" /></div>
<div>UU & Peraturan</div>
</div>
<div className='flex flex-col items-center gap-2 p-3 bg-[#DD8306] rounded-md'>
<div><img src="/informasipublik7.png" alt="logo" /></div>
<div>Satu Data</div>
</div>
<div className='flex flex-col items-center gap-2 p-3 bg-[#DD8306] rounded-md'>
<div><img src="/infopublik8.png" alt="logo" /></div>
<div>PUSIKNAS</div>
</div>
</div>
{/* <div className='space-y-4 px-2'>
<div className='md:flex items-center text-white bg-[#DD8306] p-4 rounded-md'>
<div className='min-w-max'>
<img src="/infopublik1.png" alt="" />
@ -61,7 +95,7 @@ export default function PublicInformation() {
<p className='text-sm'>Undang-Undang adalah salah satu jenis Peraturan Perundang-undangan yang dibentuk oleh Dewa Perwakilan Rakyat (DPR) dengan persetujuan bersama Presiden. Sedangkan Peraturan disini merupakan Peraturan Kepolisian yang ditetapkan oleh Kapolri dan berlaku untuk seluruh wilayah kerja</p>
</div>
</div>
</div>
</div> */}
</div>
)
}

2
components/Portal PPID/ppid-banner.tsx
View File

@ -10,7 +10,7 @@ export default function PPIDBanner() {
alt="ppid-banner"
className='w-full object-cover relative h-[300px] md:h-min'
/>
<div className="absolute top-0 lg:top-1/3 left-1/2 w-[48%]">
<div className="absolute top-5 lg:top-1/3 left-1/2 w-[48%]">
<p className='text-xs md:text-md lg:text-4xl font-bold leanding-0 md:leading-10'>
SELAMAT DATANG DI PORTAL E-PPID POLRI
</p>

29
components/SocialMedia/Twitter.tsx Normal file
View File

@ -0,0 +1,29 @@
import { useEffect } from 'react';
const TwitterWidget = () => {
useEffect(() => {
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = "https://embedsocial.com/cdn/ht.js";
script.async = true;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}
}, []);
return (
<div className="embedsocial-hashtag rounded-md" data-ref="c4857612a0e86456294a1a38046d17fc1040c003"></div>
);
};
export default TwitterWidget;

8
components/detail/StrukturOrganisasi.tsx
View File

@ -25,7 +25,7 @@ export default function StrukturOrganisasi() {
Unsur pimpinan Mabes Polri adalah Kepala Kepolisian Negara Republik Indonesia (Kapolri). Kapolri adalah Pimpinan Polri yang berada di bawah dan bertanggung jawab kepada Presiden. Kapolri berpangkat Jenderal Polisi.</p>
</div>
<div className='px-14 pt-10'>
<img src="mabes.png" alt="struktur" />
<img src="/mabes.png" alt="struktur" />
</div>
</Tab>
<Tab key="polda" title="Tingkat Polda">
@ -37,7 +37,7 @@ export default function StrukturOrganisasi() {
Polda membawahi Kepolisian Negara Republik Indonesia Resor (Polres). Ada tiga tipe Polda, yakni Tipe A-K, Tipe A dan Tipe B. Polda Tipe A-K atau A+ saat ini hanya terdapat 1 Polda, yaitu Polda Metro Jaya. Polda Tipe A-K dan Tipe A dipimpin seorang perwira tinggi berpangkat Inspektur Jenderal Polisi (Irjen), sedangkan Tipe B dipimpin perwira tinggi berpangkat Brigadir Jenderal Polisi (Brigjen).</p>
</div>
<div className='px-14 pt-10'>
<img src="polda.png" alt="struktur" />
<img src="/polda.png" alt="struktur" />
</div>
</Tab>
<Tab key="polres" title="Tingkat Polres">
@ -48,7 +48,7 @@ export default function StrukturOrganisasi() {
</p>
</div>
<div className='px-14 pt-10'>
<img src="polres.png" alt="struktur" />
<img src="/polres.png" alt="struktur" />
</div>
</Tab>
<Tab key="polsek" title="Tingkat Polsek">
@ -59,7 +59,7 @@ export default function StrukturOrganisasi() {
</p>
</div>
<div className='px-14 pt-10'>
<img src="polsek.png" alt="struktur" />
<img src="/polsek.png" alt="struktur" />
</div>
</Tab>
</Tabs>

4
components/layout/PPIDLayout.tsx
View File

@ -2,7 +2,6 @@
import React from "react";
import FooterPPID from "../Portal PPID/FooterPPID";
import NavbarPPID from "../navbar/NavbarPPID";
import PPIDBanner from "../Portal PPID/ppid-banner";
interface Props {
children: React.ReactNode;
@ -14,7 +13,8 @@ export const PPIDLayout = ({ children, pageTitle }: Props) => {
return (
<section>
<NavbarPPID />
<PPIDBanner />
{children}
{/* <PPIDBanner /> */}
{/* <PPIDbody /> */}
<FooterPPID />
</section>

296
components/navbar/NavbarPPID.tsx
View File

@ -1,8 +1,8 @@
import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle } from '@nextui-org/navbar'
import React from 'react'
import { Link } from '@nextui-org/link'
import { Navbar, NavbarContent, NavbarItem, NavbarMenuToggle } from '@nextui-org/navbar'
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react'
import { ChevronDownIcon, ChevronRightIcon, FbIcon, IdnIcon, IgIcon, TtIcon, TwIcon, YtIcon } from '../icons'
import { ThemeSwitch } from '../theme-switch'
import { FbIcon, IdnIcon, IgIcon, TtIcon, TwIcon, YtIcon } from '../icons'
import { Link, LinkIcon } from '@nextui-org/link'
export default function NavbarPPID() {
return (
@ -27,13 +27,287 @@ export default function NavbarPPID() {
</Link>
</div>
<div className='w-2/3 lg:w-9/12 hidden md:flex flex-wrap items-center justify-evenly '>
<NavbarItem>Beranda</NavbarItem>
<div>Informasi Publik</div>
<div>Profile</div>
<div>Layanan Informasi</div>
<div>Standar Layanan</div>
<div>Regulasi</div>
<div>Kontak</div>
<NavbarItem>
<Link href='/portal-ppid' color='foreground'>
Beranda
</Link>
</NavbarItem>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
Informasi Publik
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="tentang"
title='Tentang'
className="pt-4"
classNames={{
// base: " border-2 border-red-500 bg-white",
// list: "border-2 gap-2 flex flex-row flex-wrap"
// list: "gap-2 flex flex-row flex-wrap"s
}}
itemClasses={{
// base: "border border-red-700 w-[350px]"
base: "w-[350px]"
}}
>
<DropdownItem
endContent={<ChevronRightIcon />}
>
<Link href='/portal-ppid/informasi-publik/informasi-serta-merta' color='foreground'>
Informasi Serta Merta
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}
>
<Link href='/portal-ppid/informasi-publik/informasi-berkala' color='foreground'>
Informasi Berkala
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/informasi-setiap-saat' color='foreground'>
Informasi Setiap Saat
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/informasi-dikecualikan' color='foreground'>
Informasi Dikecualikan
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/penerangan-satuan' color='foreground'>
Penerangan Satuan
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/uu-dan-peraturan' color='foreground'>
UU & Peraturan
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
Profile
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="tentang"
title='Tentang'
className="pt-4"
classNames={{
// base: " border-2 border-red-500 bg-white",
// list: "border-2 gap-2 flex flex-row flex-wrap"
// list: "gap-2 flex flex-row flex-wrap"s
}}
itemClasses={{
// base: "border border-red-700 w-[350px]"
base: "w-[350px]"
}}
>
<DropdownItem
endContent={<ChevronRightIcon />}
>
<Link href='/portal-ppid/profile/sejarah-ppid-polri' color='foreground'>
Sejarah PPID Polri
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}
>
<Link href='/portal-ppid/profile/profile-singkat-ppid' color='foreground'>
Profile Singkat PPID
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/profile/tugas-dan-fungsi-ppid' color='foreground'>
Tugas dan Fungsi PPID
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/profile/struktur-ppid' color='foreground'>
Struktur PPID
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/profile/visi-dan-misi-ppid' color='foreground'>
Visi & Misi PPID
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
Layanan Informasi
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="tentang"
title='Tentang'
className="pt-4"
classNames={{
// base: " border-2 border-red-500 bg-white",
// list: "border-2 gap-2 flex flex-row flex-wrap"
// list: "gap-2 flex flex-row flex-wrap"s
}}
itemClasses={{
// base: "border border-red-700 w-[350px]"
base: "w-[350px]"
}}
>
<DropdownItem
endContent={<ChevronRightIcon />}
>
<Link href='/portal-ppid/informasi-publik/informasi-serta-merta' color='foreground'>
Registrasi Permohonan
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}
>
<Link href='/portal-ppid/informasi-publik/informasi-berkala' color='foreground'>
Permohonan Informasi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/informasi-setiap-saat' color='foreground'>
Permohonan Keberatan
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/informasi-dikecualikan' color='foreground'>
Statistik / Rekapitulasi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/penerangan-satuan' color='foreground'>
Laporan Informasi Publik Tahunan
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
Standar Layanan
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="tentang"
title='Tentang'
className="pt-4"
classNames={{
// base: " border-2 border-red-500 bg-white",
// list: "border-2 gap-2 flex flex-row flex-wrap"
// list: "gap-2 flex flex-row flex-wrap"s
}}
itemClasses={{
// base: "border border-red-700 w-[350px]"
base: "w-[350px]"
}}
>
<DropdownItem
endContent={<ChevronRightIcon />}
>
<Link href='/portal-ppid/informasi-publik/informasi-serta-merta' color='foreground'>
Alur Pelayanan Informasi Publik Polri
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}
>
<Link href='/portal-ppid/informasi-publik/informasi-berkala' color='foreground'>
Tata Cara Permohonan Informasi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/informasi-setiap-saat' color='foreground'>
Mekanisme Keberatan
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/informasi-dikecualikan' color='foreground'>
Mekanisme Permohonan Penyelesinan Sengketa
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/penerangan-satuan' color='foreground'>
Waktu Pelayanan
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/penerangan-satuan' color='foreground'>
Standar Biaya Pelayanan
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightIcon />}>
<Link href='/portal-ppid/informasi-publik/penerangan-satuan' color='foreground'>
Maklumat Pelayanan
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavbarItem>
<Link href='/portal-ppid' color='foreground'>
Regulasi
</Link>
</NavbarItem>
<NavbarItem>
<Link href='/portal-ppid' color='foreground'>
Kontak
</Link>
</NavbarItem>
<div><ThemeSwitch /></div>
</div>
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">

27
components/page/HistoryPPID.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react'
export default function HistoryPPID() {
return (
<div className='bg-white'>
<div className='p-2 lg:p-10 m-1 lg:mx-10 border-red-500 leading-relaxed bg-[#E2E2E2] text-black space-y-3'>
<p className='text-xl font-bold'> Sejarah PPID</p>
<p className='indent-5 '>Pejabat Pengelola Informasi dan Dokumentasi (PPID) Polri dibentuk sejak tahun 2010. Tugas pokok dari PPID Polri adalah menyiapkan sarana dan prasarana, termasuk struktur di dalamnya, karena bagian dari hak masyarakat untuk mendapatkan informasi publik. Setelah Undang- Undang Nomor 14 Tahun 2008 tentang Kebebasan Informasi Publik hadir, Polri langsung berinisiatif untuk membuat telaah staf tentang strukturisasi pejabat pengelola informasi dan dokumentasi, sebagai bagian fungsi kehumasan di Satuan-Satuan Kerja (Satker) Mabes Polri, Polda, Polwiltabes, Polwil dan Polres. Fungsi dibentuknya Satker dalam rangka membuka ruang transparansi informasi publik Polri.</p>
<p>
Dalam telaah staf PPID Polri diatur perihal struktur dan fungsi pejabat pengelola informasi dan dokumentasi Polri. Mulanya PPID Polri berada di bawah Divisi Telematika, yang sekarang menjadi Divisi Informasi dan Teknologi Polri. Namun karena informasi banyak terletak pada Satker Humas, maka PPID saat ini berada pada Divisi Humas dan menjadi salahsatu biro bernama Biro PPID. Begitu juga di tingkat Polda. Namun di tingkat Polres PPID berada di bawah Kabag Operasional dan di tingkat Polsek berada langsung di bawah Kapolsek. Mengingat minimnya sarana dan prasarana penunjang, maka spesifikasi tidak diutamakan.
</p>
<p>
Dalam perkembangannya, ada masukan dari Unit Kerja Kepresidenan Bidang Pengawasan dan Pengendalian Pembangunan (UKP4) terhadap isi Peraturan Kapolri Nomor 16 Tahun 2010 tentang Tata Cara Pelayanan Informasi Publik di Lingkungan Polri untuk direvisi. Salahsatunya seperti: Pengaturan tentang formulir saat masyarakat mengajukan keberatan, pengaturan tentang uji konsekuensi dan pengaturan tentang sidang sengketa. Hal ini dikarenakan Peraturan Kapolri ada terlebih dahulu daripada lahirnya Peraturan Komisi Informasi Publik.
</p>
<p>
Peraturan Kapolri Nomor 16 Tahun 2010 berlaku di seluruh lingkungan kepolisian, mulai dari Mabes Polri, Polda, Polwiltabes, Polres hingga Polsek. Namun amat memungkinkan jika di tingkat Polda, Polwiltabes, Polwil, Polres hingga Polsek untuk membuat peraturan sendiri secara spesifik. Namun tidak boleh bertentangan dengan peraturan yang mendahului dan lebih tinggi posisinya, yakni Peraturan Kapolri tersebut. Namun hingga kini belum ada pengaturan spesifik yang dibuat di tingkat lebih rendah.
</p>
<p>
Sebagai contoh, di PPID Polri informasi yang dikecualikan tetap bisa dibuka, jika memiliki argumentasi yang lebih tinggi. Sampai saat ini daftar informasi yang dikecualikan dan hasil uji konsekuensi salahsatunya adalah daftar tersangka teroris yang dalam pengejaran (penyelidikan) di Polri sendiri.
</p>
<p className='text-sm italic font-light'>
Sumber: wawancara dengan Kombes Pol. Zulkarnain Adinegara (Kabagrenmin Divisi Humas Mabes Polri), Jumat, 8 Juli 2011.
</p>
</div>
</div>
)
}

262
components/table/informasi-berkala.tsx Normal file
View File

@ -0,0 +1,262 @@
'use client'
import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
import { EyeFilledIcon, SearchIcon } from '../icons';
export default function InformasiBerkala() {
const searchInput = (
<Input
aria-label="Search"
className="w-full"
classNames={{
inputWrapper: "bg-white hover:!bg-gray-100",
input: "text-sm",
}}
labelPlacement="outside"
placeholder="Search..."
startContent={
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
}
endContent={
<Button size="sm" className="bg-[#DD8306] font-semibold">Cari</Button>
}
type="search"
/>
)
const animals = [
{ label: "Title", value: "title" },
{ label: "Date", value: "date" },
{ label: "Created At", value: "createdAt" },
];
return (
<div className='md:flex '>
<div className='w-auto bg-[#E2E2E2] md:w-[70%] text-black'>
<div className='p-1 md:p-5 lg:p-8'>
<div className='font-bold text-xl'>Informasi Berkala</div>
<div className="pt-2">
<Breadcrumbs color='primary'>
<BreadcrumbItem>Beranda</BreadcrumbItem>
<BreadcrumbItem>Informasi Publik</BreadcrumbItem>
<BreadcrumbItem>Informasi Berkala</BreadcrumbItem>
</Breadcrumbs>
</div>
<div className='pt-4 space-y-5'>
<div className='font-semibold text-lg border-b-4 border-red-700 leading-loose'>Informasi Publik Tersedia Berkala</div>
<div className="flex items-center gap-3">
{searchInput}
<Select
label="Sort By"
size="sm"
className="w-1/5"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
<Select
label="Tanggal Publikasi"
size="sm"
className="w-1/4"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
</div>
<div>
<div className="flex flex-col gap-3">
<Table
color='warning'
selectionMode="single"
defaultSelectedKeys={["1"]}
aria-label="Example static collection table"
classNames={{
wrapper: "bg-white",
base: 'font-bold',
td: "font-medium"
}}
>
<TableHeader>
<TableColumn className=' bg-[#DD8306] text-white text-sm'>DAFTAR INFORMASI PUBLIK</TableColumn>
</TableHeader>
<TableBody>
<TableRow key="1">
<TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis.</TableCell>
</TableRow>
<TableRow key="2">
<TableCell className='flex items-center justify-between'>
<div>1. Informasi mengenai kedudukan, domisili, beserta alamat lengkap dan kontak.</div>
<div><EyeFilledIcon color="#DD8306" className="min-w-max" /></div>
</TableCell>
</TableRow>
<TableRow key="3">
<TableCell className='flex items-center justify-between'>2. Struktur Organisasi. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="4">
<TableCell className='flex items-center justify-between'>3. Ruang Lingkup Kegiatan. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="5">
<TableCell className='flex items-center justify-between'>4. Maksud dan Tujuan. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="6">
<TableCell className='flex items-center justify-between'>5. Gambaran umum Satker. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="7">
<TableCell className='flex items-center justify-between'>6. Profile singkat pejabat struktural. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="8">
<TableCell className='flex items-center justify-between'>7. Tugas dan Fungsi. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="9">
<TableCell className='flex items-center justify-between'>8. Visi dan Misi. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="10">
<TableCell className='flex items-center justify-between'>9. LHPKN Pejabat Polri yang telah diperiksa, diverifikasi, dan telah dikirimkan ke Komisi Pemberantasan Korupsi. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="11">
<TableCell className='flex items-center justify-between'>B. Ringkasan informasi tentang program dan/atau kegiatan yang sedang dijalankan dalam lingkup badan publik. </TableCell>
</TableRow>
<TableRow key="12">
<TableCell className='flex items-center justify-between'>1. Matrik program, kegiatan dan target Polri(Renja, Renstra, Peta Strategi, RKA, Dipa). <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="13">
<TableCell className='flex items-center justify-between'>2. Agenda penting terkait pelaksanaan tugas BadanPublik (Polri). <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="14">
<TableCell className='flex items-center justify-between'>3. Informasi khusus lainnya yang berkaitan langsungdengan hak-hak masyarakat. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="15">
<TableCell className='flex items-center justify-between'>4. Informasi tentang penerimaan calon peserta didikpada Badan Publik (Polri) yang menyelenggarakan kegiatan pendidikan untuk umum.. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="16">
<TableCell className='flex items-center justify-between'>5. Informasi tentang penerimaan calon pegawai dan/atau pejabat Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="17">
<TableCell className='flex items-center justify-between'>C. Ringkasan informasi tentang kinerja dalam lingkup Badan Publik berupa narasi tentang realisasi kegiatan yang telah maupun sedang dijalankan beserta capaiannya. </TableCell>
</TableRow>
<TableRow key="18">
<TableCell className='flex items-center justify-between'>1. Layanan Kepolisian Negara Republik Indonesia (Polri). <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="19">
<TableCell className='flex items-center justify-between'>2. Laporan Kinerja (Lakip) Polri 5 tahun terkahir. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="20">
<TableCell className='flex items-center justify-between'>3. Laporan Tahunan (5 tahun terkahir). <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="21">
<TableCell className='flex items-center justify-between'>4. Rencana Strategis Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="22">
<TableCell className='flex items-center justify-between'>5. Rencana Kerja Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="23">
<TableCell className='flex items-center justify-between'>D. Ringkasan Laporan Keuangan.</TableCell>
</TableRow>
<TableRow key="24">
<TableCell className='flex items-center justify-between'>1. Laporan Keuangan Polri (5 tahun terkahir). <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="25">
<TableCell className='flex items-center justify-between'>2. Rencana Kerja Tahunan Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="26">
<TableCell className='flex items-center justify-between'>3. Daftar Isian Pelaksanaan Anggaran Kementerian Pertanian (DIPA Induk) Polri (5 tahun terkahir).. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="27">
<TableCell className='flex items-center justify-between'>4. Realisasi Belanja Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="28">
<TableCell className='flex items-center justify-between'>5. Realisasi Pendapatan Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="29">
<TableCell className='flex items-center justify-between'>6. Rencana Umum Pengadaan (RUP) Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="30">
<TableCell className='flex items-center justify-between'>E. Ringkasan laporan akses Informasi Publik. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="31">
<TableCell className='flex items-center justify-between'>F. Informasi tentang peraturan, keputusan, dan/atau kebijakan yang mengikat dan/atau berdampak bagi publik yang dikeluarkan oleh Badan Publik. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="32">
<TableCell className='flex items-center justify-between'>G. Informasi tentang hak dan tata cara memperoleh Informasi Publik, serta tata cara pengajuan keberatan serta proses penyelesaian sengketa Informasi Publik berikut pihak-pihak yang bertanggungjawab yang dapat dihubungi. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="33">
<TableCell className='flex items-center justify-between'>H. Informasi tentang tata cara pengaduan penyalahgunaan wewenang atau pelanggaran yang dilakukan baik oleh pejabat Badan Publik maupun pihak yang mendapatkan izin atau perjanjian kerja dari Badan Publik yang bersangkutan. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="34">
<TableCell className='flex items-center justify-between'>I. Informasi tentang pengumuman pengadaan barangdan jasa.</TableCell>
</TableRow>
<TableRow key="35">
<TableCell className='flex items-center justify-between'>1. LPSE Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="36">
<TableCell className='flex items-center justify-between'>2. SIRUP LKPP - Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="37">
<TableCell className='flex items-center justify-between'>3. IRencana Umum Pengadaan (RUP) Polri. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="38">
<TableCell className='flex items-center justify-between'>J. Informasi tentang prosedur peringatan dini dan prosedur evakuasi keadaan darurat di setiap kantor Badan Publik. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
<TableRow key="39">
<TableCell className='flex items-center justify-between'>K. Daftar rancangan peraturan perundang-undangan Polri yang sedang dalam proses pembahasan. <EyeFilledIcon color="#DD8306" className="min-w-max" /></TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div className='w-auto md:w-[30%]'>
<PPIDSidebar />
</div>
</div>
)
}

238
components/table/informasi-dikecualikan.tsx Normal file
View File

@ -0,0 +1,238 @@
'use client'
import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
import { EyeFilledIcon, SearchIcon } from '../icons';
export default function InformasiDikecualikan() {
const searchInput = (
<Input
aria-label="Search"
className="w-full"
classNames={{
inputWrapper: "bg-white hover:!bg-gray-100",
input: "text-sm",
}}
labelPlacement="outside"
placeholder="Search..."
startContent={
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
}
endContent={
<Button size="sm" className="bg-[#DD8306] font-semibold">Cari</Button>
}
type="search"
/>
)
const animals = [
{ label: "Title", value: "title" },
{ label: "Date", value: "date" },
{ label: "Created At", value: "createdAt" },
];
return (
<div className='md:flex '>
<div className='w-auto bg-[#E2E2E2] md:w-[70%] text-black'>
<div className='p-1 md:p-5 lg:p-8'>
<div className='font-bold text-xl'>Informasi Dikecualikan</div>
<div className="pt-2">
<Breadcrumbs color='primary'>
<BreadcrumbItem>Beranda</BreadcrumbItem>
<BreadcrumbItem>Informasi Publik</BreadcrumbItem>
<BreadcrumbItem>Informasi Dikecualikan</BreadcrumbItem>
</Breadcrumbs>
</div>
<div className='pt-4 space-y-5'>
<div className='font-semibold text-lg border-b-4 border-red-700 leading-loose'>Informasi Publik Tersedia Dikecualikan</div>
<div className="flex items-center gap-3">
{searchInput}
<Select
label="Sort By"
size="sm"
className="w-1/5"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
<Select
label="Tanggal Publikasi"
size="sm"
className="w-1/4"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
</div>
<div>
<div className="flex flex-col gap-3">
<Table
color='warning'
selectionMode="single"
defaultSelectedKeys={["1"]}
aria-label="Example static collection table"
classNames={{
wrapper: "bg-white",
base: 'font-bold',
td: "font-medium"
}}
>
<TableHeader>
<TableColumn className=' bg-[#DD8306] text-white text-sm'>DAFTAR INFORMASI PUBLIK</TableColumn>
</TableHeader>
<TableBody>
<TableRow key="1">
<TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="2">
<TableCell className='flex items-center justify-between'>B. Informasi mengenai keamanan dan ketertiban masyarakat terutama yang berpotensi kerusuhan massa. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="3">
<TableCell className='flex items-center justify-between'>C. Informasi terkait bencana alam yang berdampak luas. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="4">
<TableCell className='flex items-center justify-between'>D. Informasi tentang pristiwa yang meresahkan masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="5">
<TableCell className='flex items-center justify-between'>E. Kecelakaan moda transportasi yang menarik perhatian masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="6">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="7">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="8">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="9">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="10">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="11">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="12">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="13">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="14">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="15">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="16">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="17">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="18">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="19">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="20">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="21">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="22">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="23">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="24">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="25">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="26">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="27">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="28">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="29">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="30">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="31">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="32">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div className='w-auto md:w-[30%]'>
<PPIDSidebar />
</div>
</div>
)
}

161
components/table/informasi-sertamerta.tsx Normal file
View File

@ -0,0 +1,161 @@
'use client'
import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
import { EyeFilledIcon, SearchIcon } from '../icons';
export default function InformasiSertaMerta() {
const searchInput = (
<Input
aria-label="Search"
className="w-full"
classNames={{
inputWrapper: "bg-white hover:!bg-gray-100",
input: "text-sm",
innerWrapper: "text-red-500"
}}
labelPlacement="outside"
placeholder="Search..."
startContent={
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
}
endContent={
<Button size="sm" className="bg-[#DD8306] font-semibold">Cari</Button>
}
type="search"
/>
)
const animals = [
{ label: "Title", value: "title" },
{ label: "Date", value: "date" },
{ label: "Created At", value: "createdAt" },
];
return (
<div className='md:flex '>
<div className='w-auto bg-[#E2E2E2] md:w-[70%] text-black'>
<div className='p-1 md:p-5 lg:p-8'>
<div className='font-bold text-xl'>Informasi Serta Merta</div>
<div className="pt-2">
<Breadcrumbs color='primary'>
<BreadcrumbItem>Beranda</BreadcrumbItem>
<BreadcrumbItem>Informasi Publik</BreadcrumbItem>
<BreadcrumbItem>Informasi Serta Merta</BreadcrumbItem>
</Breadcrumbs>
</div>
<div className='pt-4 space-y-5'>
<div className='font-semibold text-lg border-b-4 border-red-700 leading-loose'>Informasi Publik Tersedia Serta Merta</div>
<div className="flex items-center gap-3">
{searchInput}
<Select
label="Sort By"
size="sm"
className="w-1/5"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
<Select
label="Tanggal Publikasi"
size="sm"
className="w-1/4"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
</div>
<div>
<div className="flex flex-col gap-3">
<Table
color='warning'
selectionMode="single"
defaultSelectedKeys={["1"]}
aria-label="Example static collection table"
classNames={{
wrapper: "bg-white",
base: 'font-bold',
td: "font-medium"
}}
>
<TableHeader>
<TableColumn className=' bg-[#DD8306] text-white text-sm'>DAFTAR INFORMASI PUBLIK</TableColumn>
</TableHeader>
<TableBody>
<TableRow key="1">
<TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="2">
<TableCell className='flex items-center justify-between'>B. Informasi mengenai keamanan dan ketertiban masyarakat terutama yang berpotensi kerusuhan massa. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="3">
<TableCell className='flex items-center justify-between'>C. Informasi terkait bencana alam yang berdampak luas. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="4">
<TableCell className='flex items-center justify-between'>D. Informasi tentang pristiwa yang meresahkan masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="5">
<TableCell className='flex items-center justify-between'>E. Kecelakaan moda transportasi yang menarik perhatian masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="6">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div className='w-auto md:w-[30%]'>
<PPIDSidebar />
</div>
</div>
)
}

238
components/table/informasi-setiap-saat.tsx Normal file
View File

@ -0,0 +1,238 @@
'use client'
import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
import { EyeFilledIcon, SearchIcon } from '../icons';
export default function InformasiSetiapSaat() {
const searchInput = (
<Input
aria-label="Search"
className="w-full"
classNames={{
inputWrapper: "bg-white hover:!bg-gray-100",
input: "text-sm",
}}
labelPlacement="outside"
placeholder="Search..."
startContent={
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
}
endContent={
<Button size="sm" className="bg-[#DD8306] font-semibold">Cari</Button>
}
type="search"
/>
)
const animals = [
{ label: "Title", value: "title" },
{ label: "Date", value: "date" },
{ label: "Created At", value: "createdAt" },
];
return (
<div className='md:flex '>
<div className='w-auto bg-[#E2E2E2] md:w-[70%] text-black'>
<div className='p-1 md:p-5 lg:p-8'>
<div className='font-bold text-xl'>Informasi Setiap Saat</div>
<div className="pt-2">
<Breadcrumbs color='primary'>
<BreadcrumbItem>Beranda</BreadcrumbItem>
<BreadcrumbItem>Informasi Publik</BreadcrumbItem>
<BreadcrumbItem>Informasi Setiap Saat</BreadcrumbItem>
</Breadcrumbs>
</div>
<div className='pt-4 space-y-5'>
<div className='font-semibold text-lg border-b-4 border-red-700 leading-loose'>Informasi Publik Tersedia Setiap Saat</div>
<div className="flex items-center gap-3">
{searchInput}
<Select
label="Sort By"
size="sm"
className="w-1/5"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
<Select
label="Tanggal Publikasi"
size="sm"
className="w-1/4"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
</div>
<div>
<div className="flex flex-col gap-3">
<Table
color='warning'
selectionMode="single"
defaultSelectedKeys={["1"]}
aria-label="Example static collection table"
classNames={{
wrapper: "bg-white",
base: 'font-bold',
td: "font-medium"
}}
>
<TableHeader>
<TableColumn className=' bg-[#DD8306] text-white text-sm'>DAFTAR INFORMASI PUBLIK</TableColumn>
</TableHeader>
<TableBody>
<TableRow key="1">
<TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="2">
<TableCell className='flex items-center justify-between'>B. Informasi mengenai keamanan dan ketertiban masyarakat terutama yang berpotensi kerusuhan massa. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="3">
<TableCell className='flex items-center justify-between'>C. Informasi terkait bencana alam yang berdampak luas. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="4">
<TableCell className='flex items-center justify-between'>D. Informasi tentang pristiwa yang meresahkan masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="5">
<TableCell className='flex items-center justify-between'>E. Kecelakaan moda transportasi yang menarik perhatian masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="6">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="7">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="8">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="9">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="10">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="11">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="12">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="13">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="14">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="15">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="16">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="17">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="18">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="19">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="20">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="21">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="22">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="23">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="24">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="25">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="26">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="27">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="28">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="29">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="30">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="31">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="32">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div className='w-auto md:w-[30%]'>
<PPIDSidebar />
</div>
</div>
)
}

238
components/table/penerangan-satuan.tsx Normal file
View File

@ -0,0 +1,238 @@
'use client'
import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
import { EyeFilledIcon, SearchIcon } from '../icons';
export default function PeneranganSatuan() {
const searchInput = (
<Input
aria-label="Search"
className="w-full"
classNames={{
inputWrapper: "bg-white hover:!bg-gray-100",
input: "text-sm",
}}
labelPlacement="outside"
placeholder="Search..."
startContent={
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
}
endContent={
<Button size="sm" className="bg-[#DD8306] font-semibold">Cari</Button>
}
type="search"
/>
)
const animals = [
{ label: "Title", value: "title" },
{ label: "Date", value: "date" },
{ label: "Created At", value: "createdAt" },
];
return (
<div className='md:flex '>
<div className='w-auto bg-[#E2E2E2] md:w-[70%] text-black'>
<div className='p-1 md:p-5 lg:p-8'>
<div className='font-bold text-xl'>Penerangan Satuan</div>
<div className="pt-2">
<Breadcrumbs color='primary'>
<BreadcrumbItem>Beranda</BreadcrumbItem>
<BreadcrumbItem>Informasi Publik</BreadcrumbItem>
<BreadcrumbItem>Informasi Penerangan Satuan</BreadcrumbItem>
</Breadcrumbs>
</div>
<div className='pt-4 space-y-5'>
<div className='font-semibold text-lg border-b-4 border-red-700 leading-loose'>Informasi Publik Tersedia Penerangan Satuan</div>
<div className="flex items-center gap-3">
{searchInput}
<Select
label="Sort By"
size="sm"
className="w-1/5"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
<Select
label="Tanggal Publikasi"
size="sm"
className="w-1/4"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
</div>
<div>
<div className="flex flex-col gap-3">
<Table
color='warning'
selectionMode="single"
defaultSelectedKeys={["1"]}
aria-label="Example static collection table"
classNames={{
wrapper: "bg-white",
base: 'font-bold',
td: "font-medium"
}}
>
<TableHeader>
<TableColumn className=' bg-[#DD8306] text-white text-sm'>DAFTAR INFORMASI PUBLIK</TableColumn>
</TableHeader>
<TableBody>
<TableRow key="1">
<TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="2">
<TableCell className='flex items-center justify-between'>B. Informasi mengenai keamanan dan ketertiban masyarakat terutama yang berpotensi kerusuhan massa. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="3">
<TableCell className='flex items-center justify-between'>C. Informasi terkait bencana alam yang berdampak luas. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="4">
<TableCell className='flex items-center justify-between'>D. Informasi tentang pristiwa yang meresahkan masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="5">
<TableCell className='flex items-center justify-between'>E. Kecelakaan moda transportasi yang menarik perhatian masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="6">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="7">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="8">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="9">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="10">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="11">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="12">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="13">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="14">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="15">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="16">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="17">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="18">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="19">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="20">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="21">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="22">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="23">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="24">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="25">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="26">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="27">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="28">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="29">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="30">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="31">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="32">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div className='w-auto md:w-[30%]'>
<PPIDSidebar />
</div>
</div>
)
}

238
components/table/uu-peraturan.tsx Normal file
View File

@ -0,0 +1,238 @@
'use client'
import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
import { EyeFilledIcon, SearchIcon } from '../icons';
export default function UUPeraturan() {
const searchInput = (
<Input
aria-label="Search"
className="w-full"
classNames={{
inputWrapper: "bg-white hover:!bg-gray-100",
input: "text-sm",
}}
labelPlacement="outside"
placeholder="Search..."
startContent={
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
}
endContent={
<Button size="sm" className="bg-[#DD8306] font-semibold">Cari</Button>
}
type="search"
/>
)
const animals = [
{ label: "Title", value: "title" },
{ label: "Date", value: "date" },
{ label: "Created At", value: "createdAt" },
];
return (
<div className='md:flex '>
<div className='w-auto bg-[#E2E2E2] md:w-[70%] text-black'>
<div className='p-1 md:p-5 lg:p-8'>
<div className='font-bold text-xl'>UU & Peraturan</div>
<div className="pt-2">
<Breadcrumbs color='primary'>
<BreadcrumbItem>Beranda</BreadcrumbItem>
<BreadcrumbItem>Informasi Publik</BreadcrumbItem>
<BreadcrumbItem>UU & Peraturan</BreadcrumbItem>
</Breadcrumbs>
</div>
<div className='pt-4 space-y-5'>
<div className='font-semibold text-lg border-b-4 border-red-700 leading-loose'>Informasi Publik Tersedia UU & Peraturan</div>
<div className="flex items-center gap-3">
{searchInput}
<Select
label="Sort By"
size="sm"
className="w-1/5"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
<Select
label="Tanggal Publikasi"
size="sm"
className="w-1/4"
classNames={{
// base: "bg-red-500",
// mainWrapper: "border-2 border-red-500",
label: "text-black",
value: "!text-black",
trigger: "bg-white hover:!bg-gray-100",
// innerWrapper: "bg-red-500"
// selectorIcon: "bg-red-500"
// listboxWrapper: "bg-red-500"
// listbox: "bg-red-500"
popoverContent: "bg-white"
}}
listboxProps={{
itemClasses: {
base: "text-black",
wrapper: "!bg-white ",
}
}}
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
</Select>
</div>
<div>
<div className="flex flex-col gap-3">
<Table
color='warning'
selectionMode="single"
defaultSelectedKeys={["1"]}
aria-label="Example static collection table"
classNames={{
wrapper: "bg-white",
base: 'font-bold',
td: "font-medium"
}}
>
<TableHeader>
<TableColumn className=' bg-[#DD8306] text-white text-sm'>DAFTAR INFORMASI PUBLIK</TableColumn>
</TableHeader>
<TableBody>
<TableRow key="1">
<TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="2">
<TableCell className='flex items-center justify-between'>B. Informasi mengenai keamanan dan ketertiban masyarakat terutama yang berpotensi kerusuhan massa. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="3">
<TableCell className='flex items-center justify-between'>C. Informasi terkait bencana alam yang berdampak luas. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="4">
<TableCell className='flex items-center justify-between'>D. Informasi tentang pristiwa yang meresahkan masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="5">
<TableCell className='flex items-center justify-between'>E. Kecelakaan moda transportasi yang menarik perhatian masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="6">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="7">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="8">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="9">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="10">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="11">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="12">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="13">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="14">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="15">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="16">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="17">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="18">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="19">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="20">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="21">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="22">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="23">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="24">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="25">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="26">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="27">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="28">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="29">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="30">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="31">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
<TableRow key="32">
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div className='w-auto md:w-[30%]'>
<PPIDSidebar />
</div>
</div>
)
}

1
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.1",
"dependencies": {
"@hookform/resolvers": "^3.3.4",
"@nextui-org/breadcrumbs": "^2.0.4",
"@nextui-org/button": "2.0.26",
"@nextui-org/code": "2.0.24",
"@nextui-org/input": "2.1.16",

1
package.json
View File

@ -10,6 +10,7 @@
},
"dependencies": {
"@hookform/resolvers": "^3.3.4",
"@nextui-org/breadcrumbs": "^2.0.4",
"@nextui-org/button": "2.0.26",
"@nextui-org/code": "2.0.24",
"@nextui-org/input": "2.1.16",

BIN
public/infopublik8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/informasipublik7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

4
styles/globals.css
View File

@ -2,6 +2,6 @@
@tailwind components;
@tailwind utilities;
*{
/* *{
border: 1px solid green;
}
} */