From 3f876b324c15465a50ad8b1718967937713fdfd9 Mon Sep 17 00:00:00 2001
From: amd123 <iam.ahmadsholeh@gmail.com>
Date: Fri, 15 Mar 2024 14:46:40 +0700
Subject: [PATCH] feat: ppid polda

---
 app/portal-ppid/e-ppid-polda/layout.tsx       |  19 ++
 app/portal-ppid/e-ppid-polda/page.tsx         |   7 +
 app/portal-ppid/polda/[polda-name]/layout.tsx |  19 ++
 app/portal-ppid/polda/[polda-name]/page.tsx   |  15 +
 components/Portal PPID/PPIDPolda.tsx          | 289 ++++++++++++++++++
 components/Portal PPID/PPIDSidebar.tsx        |   6 +-
 components/navbar/NavbarHumas.tsx             |  20 +-
 7 files changed, 369 insertions(+), 6 deletions(-)
 create mode 100644 app/portal-ppid/e-ppid-polda/layout.tsx
 create mode 100644 app/portal-ppid/e-ppid-polda/page.tsx
 create mode 100644 app/portal-ppid/polda/[polda-name]/layout.tsx
 create mode 100644 app/portal-ppid/polda/[polda-name]/page.tsx
 create mode 100644 components/Portal PPID/PPIDPolda.tsx

diff --git a/app/portal-ppid/e-ppid-polda/layout.tsx b/app/portal-ppid/e-ppid-polda/layout.tsx
new file mode 100644
index 0000000..f329cb8
--- /dev/null
+++ b/app/portal-ppid/e-ppid-polda/layout.tsx
@@ -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 EPPIDPoldaLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const pathname = usePathname();
+    console.log(pathname)
+
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
+}
diff --git a/app/portal-ppid/e-ppid-polda/page.tsx b/app/portal-ppid/e-ppid-polda/page.tsx
new file mode 100644
index 0000000..c5400a9
--- /dev/null
+++ b/app/portal-ppid/e-ppid-polda/page.tsx
@@ -0,0 +1,7 @@
+import PPIDPolda from '@/components/Portal PPID/PPIDPolda'
+
+export default function PPIDSakterPage() {
+    return (
+        <PPIDPolda />
+    )
+}
diff --git a/app/portal-ppid/polda/[polda-name]/layout.tsx b/app/portal-ppid/polda/[polda-name]/layout.tsx
new file mode 100644
index 0000000..753c684
--- /dev/null
+++ b/app/portal-ppid/polda/[polda-name]/layout.tsx
@@ -0,0 +1,19 @@
+'use client'
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+export default function DinamicPoldaLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    // const pathname = usePathname();
+    // console.log(pathname)
+
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
+}
diff --git a/app/portal-ppid/polda/[polda-name]/page.tsx b/app/portal-ppid/polda/[polda-name]/page.tsx
new file mode 100644
index 0000000..f51bf1e
--- /dev/null
+++ b/app/portal-ppid/polda/[polda-name]/page.tsx
@@ -0,0 +1,15 @@
+'use client'
+import { usePathname } from 'next/navigation';
+import React from 'react'
+
+export default function PoldaPage() {
+    const pathname = usePathname();
+    // console.log(pathname)
+    const url = pathname.split('/polda/')[1];
+
+    return (
+        <div className='text-black'>
+            {url}
+        </div>
+    )
+}
diff --git a/components/Portal PPID/PPIDPolda.tsx b/components/Portal PPID/PPIDPolda.tsx
new file mode 100644
index 0000000..70f031d
--- /dev/null
+++ b/components/Portal PPID/PPIDPolda.tsx	
@@ -0,0 +1,289 @@
+'use client'
+import { BreadcrumbItem, Breadcrumbs, Button, Image, 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';
+import Link from "next/link";
+
+
+export default function PPIDPolda() {
+
+    const listPoldaAll = [
+        {
+            id: 1,
+            img: "/assets/polda/polda-metro.svg",
+            title: "Polda Metro Jaya",
+            path: 'polda/polda-metro-jaya'
+        },
+        {
+            id: 2,
+            img: "/assets/polda/polda-jabar.svg",
+            title: "Polda Jawa Barat",
+            path: 'polda/polda-jawa-barat'
+        },
+        {
+            id: 3,
+            img: "/assets/polda/polda-banten.svg",
+            title: "Polda Banten",
+            path: 'polda/polda-banten'
+        },
+        {
+            id: 4,
+            img: "/assets/polda/polda-jateng.svg",
+            title: "Polda Jawa Tengah",
+            path: 'polda/polda-jateng'
+        },
+        {
+            id: 5,
+            img: "/assets/polda/polda-diy.svg",
+            title: "Polda D.I Yogyakarta",
+            path: 'polda/polda-daerah-istimewa-yogyakarta'
+        },
+        {
+            id: 6,
+            img: "/assets/polda/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'polda/polda-jawa-timur'
+        },
+        {
+            id: 7,
+            img: "/assets/polda/polda-aceh.svg",
+            title: "Polda Aceh",
+            path: 'polda/polda-aceh'
+        },
+        {
+            id: 8,
+            img: "/assets/polda/polda-sumut.svg",
+            title: "Polda Sumatra Utara",
+            path: 'polda/polda-sumatra-utara'
+        },
+        {
+            id: 9,
+            img: "/assets/polda/polda-sumbar.svg",
+            title: "Polda Sumatra Barat",
+            path: 'polda/polda-sumatra-barat'
+        },
+        {
+            id: 10,
+            img: "/assets/polda/polda-riau.svg",
+            title: "Polda Riau",
+            path: 'polda/polda-riau'
+        },
+        {
+            id: 11,
+            img: "/assets/polda/polda-kepri.svg",
+            title: "Polda Kep.Riau",
+            path: 'polda/polda-kepulauan-riau'
+        },
+        {
+            id: 12,
+            img: "/assets/polda/polda-jambi.svg",
+            title: "Polda Jambi",
+            path: 'polda/polda-jambi'
+        },
+        {
+            id: 13,
+            img: "/assets/polda/polda-jambi.svg",
+            title: "Polda Jambi",
+            path: 'polda/polda-jambi'
+        },
+        {
+            id: 14,
+            img: "/assets/polda/polda-sumsel.svg",
+            title: "Polda Sumatra Selatan",
+            path: 'polda/polda-sumatra-selatan'
+        },
+        {
+            id: 15,
+            img: "/assets/polda/polda-sumsel.svg",
+            title: "Polda Kep.Bangka Belitung",
+            path: 'polda/polda-bangka-belitung'
+        },
+        {
+            id: 16,
+            img: "/assets/polda/polda-bengkulu.svg",
+            title: "Polda Bengkulu",
+            path: 'polda/polda-bengkulu'
+        },
+        {
+            id: 17,
+            img: "/assets/polda/polda-lampung.svg",
+            title: "Polda Lampung",
+            path: 'polda/polda-lampung'
+        },
+        {
+            id: 18,
+            img: "/assets/polda/polda-ntb.svg",
+            title: "Polda Nusa Tenggara Barat",
+            path: 'polda/polda-ntb'
+        },
+        {
+            id: 19,
+            img: "/assets/polda/polda-ntb.svg",
+            title: "Polda Nusa Tenggara Barat",
+            path: 'polda/polda-ntb'
+        },
+        {
+            id: 20,
+            img: "/assets/polda/polda-ntt.svg",
+            title: "Polda Nusa Tenggara Timur",
+            path: 'polda/polda-ntt'
+        },
+        {
+            id: 21,
+            img: "/assets/polda/polda-bali.svg",
+            title: "Polda Bali",
+            path: 'polda/polda-bali'
+        },
+        {
+            id: 22,
+            img: "/assets/polda/polda-kalbar.svg",
+            title: "Polda Kalimantan Barat",
+            path: 'polda/polda-kalimantan-barat'
+        },
+        {
+            id: 23,
+            img: "/assets/polda/polda-kalteng.svg",
+            title: "Polda Kalimantan Tengah",
+            path: 'polda/polda-kalimantan-tengah'
+        },
+        {
+            id: 24,
+            img: "/assets/polda/polda-kalsel.svg",
+            title: "Polda Kalimantan Selatan",
+            path: 'polda/polda-kalimantan-selatan'
+        },
+        {
+            id: 25,
+            img: "/assets/polda/polda-kaltim.svg",
+            title: "Polda Kalimantan Timur",
+            path: 'polda/polda-kalimantan-timur'
+        },
+        {
+            id: 26,
+            img: "/assets/polda/polda-kalut.svg",
+            title: "Polda Kalimantan Utara",
+            path: 'polda/polda-kalimantan-utara'
+        },
+        {
+            id: 27,
+            img: "/assets/polda/polda-sulteng.svg",
+            title: "Polda Sulawesi Tengah",
+            path: 'polda/polda-sulawesi-tengah'
+        },
+        {
+            id: 28,
+            img: "/assets/polda/polda-sulut.svg",
+            title: "Polda Sulawesi Utara",
+            path: 'polda/polda-sulawesi-utara'
+        },
+        {
+            id: 29,
+            img: "/assets/polda/polda-gorontalo.svg",
+            title: "Polda Gorontalo",
+            path: 'polda/polda-gorontalo'
+        },
+        {
+            id: 30,
+            img: "/assets/polda/polda-sulbar.svg",
+            title: "Polda Sulawesi Barat",
+            path: 'polda/polda-sulawesi-barat'
+        },
+        {
+            id: 31,
+            img: "/assets/polda/polda-sulsel.svg",
+            title: "Polda Sulawesi Selatan",
+            path: 'polda/polda-sulawesi-selatan'
+        },
+        {
+            id: 32,
+            img: "/assets/polda/polda-sultenggara.svg",
+            title: "Polda Sulawesi Tenggara",
+            path: 'polda/polda-sulawesi-tenggara'
+        },
+        {
+            id: 33,
+            img: "/assets/polda/polda-malut.svg",
+            title: "Polda Maluku Utara",
+            path: 'polda/polda-maluku-utara'
+        },
+        {
+            id: 34,
+            img: "/assets/polda/polda-maluku.svg",
+            title: "Polda Maluku",
+            path: 'polda/polda-maluku'
+        },
+        {
+            id: 35,
+            img: "/assets/polda/polda-papuabarat.svg",
+            title: "Polda Papua Barat",
+            path: 'polda/polda-papua-barat'
+        },
+        {
+            id: 36,
+            img: "/assets/polda/polda-papua.svg",
+            title: "Polda Papua",
+            path: 'polda/polda-papua'
+        },
+
+    ];
+    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 filters = [
+        { 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-2/3 lg:w-[75%] px-2  text-black'>
+                <div className='p-1 md:p-5 lg:p-8'>
+                    <div className='font-bold text-xl'>E-PPID POLDA</div>
+                    <div className="pt-2 pb-7">
+                        <Breadcrumbs color='primary'>
+                            <BreadcrumbItem><Link href='/portal-ppid'>Beranda</Link></BreadcrumbItem>
+                            <BreadcrumbItem>E-PPID Polda</BreadcrumbItem>
+                        </Breadcrumbs>
+                    </div>
+                    <div className='pt-4 space-y- border border-[#DD8306] rounded-lg bg-[#FFFFFF]'>
+                        <div className="text-center text-xl font-semibold underline underline-offset-8 decoration-red-600">E-PPID POLDA</div>
+                        <div className="flex flex-wrap items-center justify-center pt-8  gap-4">
+                            {listPoldaAll.map((polda) => (
+                                <div className="flex justify-center text-center w-[140px] h-[125px]  items-center pt-2 ">
+                                    <Link href={polda.path} className="flex flex-col items-center text-sm font-medium gap-1">
+                                        <Image height={59} src={polda.img} alt="logo" />
+                                        <p>{polda.title}</p>
+                                    </Link>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+                <div>
+
+                </div>
+            </div>
+            <div className='w-auto md:w-1/3 lg:w-[25%]'>
+                <PPIDSidebar />
+            </div>
+        </div>
+    )
+}
diff --git a/components/Portal PPID/PPIDSidebar.tsx b/components/Portal PPID/PPIDSidebar.tsx
index 2030a94..c88452b 100644
--- a/components/Portal PPID/PPIDSidebar.tsx	
+++ b/components/Portal PPID/PPIDSidebar.tsx	
@@ -13,7 +13,11 @@ export default function PPIDSidebar() {
                     <img src="/e-ppid-satker.png" alt="satker" className='' />
                 </Link>
             </div>
-            <div className='flex justify-center'><img src="/e-ppid-polda.png" alt="satker" className='' /></div>
+            <div className='flex justify-center'>
+                <Link href='/portal-ppid/e-ppid-polda'>
+                    <img src="/e-ppid-polda.png" alt="satker" className='' />
+                </Link>
+            </div>
             <div className='flex justify-center'>
                 <Link href='portal-ppid/layanan-informasi/registrasi-permohonan'>
                     <img src="/e-ppid-permohonan-informasi.png" alt="permohonan" />
diff --git a/components/navbar/NavbarHumas.tsx b/components/navbar/NavbarHumas.tsx
index b7d7c67..ccc8988 100644
--- a/components/navbar/NavbarHumas.tsx
+++ b/components/navbar/NavbarHumas.tsx
@@ -43,11 +43,21 @@ export default function NavbarHumas() {
                 <div className='w-auto md:w-11/12  hidden md:flex flex-col justify-cente pt-3 space-y-3'>
                     <div className='flex items-center justify-end gap-1 md:gap-5'>
                         <div className="flex gap-1 lg:gap-3 items-center">
-                            <div><FbIcon /></div>
-                            <div><IgIcon /></div>
-                            <div><YtIcon /></div>
-                            <div><TwIcon /></div>
-                            <div><TtIcon /></div>
+                            <Link href='https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr' target='_blank'>
+                                <FbIcon />
+                            </Link>
+                            <Link href='https://www.instagram.com/divisihumaspolri/' target='_blank'>
+                                <IgIcon />
+                            </Link>
+                            <Link href='https://www.youtube.com/user/pidhumaspolri' target='_blank'>
+                                <YtIcon />
+                            </Link>
+                            <Link href='https://twitter.com/DivHumas_Polri' target='_blank'>
+                                <TwIcon />
+                            </Link>
+                            <Link href='https://www.tiktok.com/@divhumas_polri' target='_blank'>
+                                <TtIcon />
+                            </Link>
                         </div>
                         <div ><IdnIcon /></div>
                     </div>