update: navbar and link

app/admin/dashboard/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AdminDasboard = () => {
+    return (
+        <div>AdminDasboard</div>
+    )
+}
+
+export default AdminDasboard

app/admin/page.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 
 export default function AdminHumasPage() {
     return (
-        <div className='bg-white'>
+        <div className=''>
-            <div>1</div>
             <div>1</div>
             <div>1</div>
+
             <div>1</div>
             <div>1</div>
             <div>1</div>

app/news/[polda-name]/layout.tsx

@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function PoldaNewsLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}

app/news/[polda-name]/page.tsx

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

app/portal-ppid/satuan-kerja/[satker-name]/layout.tsx

@@ -8,8 +8,8 @@ export default function DinamicSatkerLayout({
 }: {
     children: React.ReactNode
 }) {
-    const pathname = usePathname();
+    // const pathname = usePathname();
-    console.log(pathname)
+    // console.log(pathname)
 
     return (
         <SatkerLayout>

app/portal-ppid/satuan-kerja/[satker-name]/page.tsx

@@ -4,10 +4,12 @@ import React from 'react'
 
 export default function SatkerPage() {
     const pathname = usePathname();
-    console.log(pathname)
+    // console.log(pathname)
+    const url = pathname.split('satuan-kerja/')[1];
+
     return (
         <div className='text-black'>
-            {pathname}
+            {url}
         </div>
     )
 }

components/Landing Page/Footer.tsx

@@ -13,9 +13,7 @@ export default function Footer() {
             </div>
             <div className="absolute top-0 left-0 w-full grid grid-cols-3 md:grid-cols-5 lg:grid-cols-5 gap-2 md:gap-4 px-1 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
                 <div className='pb-2 md:pb-0'>
-                    <Link href={'/detail'}>
+                    <p>Berita Terkini</p>
-                        <p>Berita Terkini</p>
-                    </Link>
                     <p>Info Komnas Anak</p>
                     <p>Info Komnas Perempuan</p>
                     <p>Kontak</p>

components/Landing Page/RegionalNews.tsx

@@ -1,31 +1,253 @@
+'use client'
 import { Button } from '@nextui-org/button';
-import { Image } from '@nextui-org/react';
+import { Image, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalProps, useDisclosure } from '@nextui-org/react';
 import { ChevronLeftWhite, ChevronRightWhite } from '../icons';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
 
 export default function RegionalNews() {
     const [limitedData, setLimitedData] = useState<any>([]);
+    const { isOpen, onOpen, onOpenChange } = useDisclosure();
+    const [scrollBehavior, setScrollBehavior] = React.useState<ModalProps["scrollBehavior"]>("outside");
+    const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
 
-    const list = [
+    const listPolda = [
         {
+            id: 1,
             img: "/temp/poldametro.svg",
-            title: "Polda Metro Jaya"
+            title: "Polda Metro Jaya",
+            path: '/news/polda-metro-jaya'
         },
         {
+            id: 2,
             img: "/temp/polda-sumut.svg",
-            title: "Polda Sumatra Utara"
+            title: "Polda Sumatra Utara",
+            path: '/news/polda-sumatra-utara'
         },
         {
+            id: 3,
             img: "/temp/polda-banten.svg",
-            title: "Polda Banten"
+            title: "Polda Banten",
+            path: '/news/polda-banten'
         },
         {
+            id: 4,
             img: "/temp/polda-jateng.svg",
-            title: "Polda Jawa Tengah"
+            title: "Polda Jawa Tengah",
+            path: '/news/polda-jateng'
         },
         {
+            id: 5,
             img: "/temp/polda-jatim.svg",
-            title: "Polda Jawa Timur"
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+    ];
+
+    const listPoldaAll = [
+        {
+            id: 1,
+            img: "/temp/poldametro.svg",
+            title: "Polda Metro Jaya",
+            path: '/news/polda-metro-jaya'
+        },
+        {
+            id: 2,
+            img: "/temp/polda-sumut.svg",
+            title: "Polda Sumatra Utara",
+            path: '/news/polda-sumatra-utara'
+        },
+        {
+            id: 3,
+            img: "/temp/polda-banten.svg",
+            title: "Polda Banten",
+            path: '/news/polda-banten'
+        },
+        {
+            id: 4,
+            img: "/temp/polda-jateng.svg",
+            title: "Polda Jawa Tengah",
+            path: '/news/polda-jateng'
+        },
+        {
+            id: 5,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 6,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 7,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 8,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 9,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 10,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 11,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 12,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 13,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 14,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 15,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 16,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 17,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 18,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 19,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 20,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 21,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 22,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 23,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 24,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 25,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 26,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 27,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 28,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 29,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 30,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 31,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 32,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 33,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
+        },
+        {
+            id: 34,
+            img: "/temp/polda-jatim.svg",
+            title: "Polda Jawa Timur",
+            path: 'news/polda-jatim'
         },
     ];
 
@@ -48,31 +270,72 @@ export default function RegionalNews() {
     // }, [list]);
 
     return (
-        <div className='text-center border-3 border-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] py-4  flex flex-col justify-center'>
+        <div className='text-center border-3 border-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] py-4  flex flex-col justify-around'>
             <div className='font-bold text-2xl underline underline-offset-4 decoration-red-600 text-[#DD8306]'>Berita Wilayah</div>
             <div className='flex items-center justify-around'>
                 <div><ChevronLeftWhite color='orange' /></div>
                 <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
-                    {list.map((item: any, index: any) => (
+                    {listPolda.map((item: any, index: any) => (
-                        <div className='w-[157px] h-[141px] flex flex-col items-center justify-evenly'>
+                        <Link href={item.path}>
-                            <Image
+                            <div key={item.id} className='w-[157px] h-[141px] flex flex-col items-center justify-evenly'>
-                                radius="lg"
+                                <Image
-                                className="h-[59px]"
+                                    radius="lg"
-                                src={item.img}
+                                    className="h-[59px]"
-                            />
+                                    src={item.img}
-                            <p className='text-xs font-bold text-[#DD8306]'>{item.title}</p>
+                                />
-                        </div>
+                                <p className='text-xs font-bold text-[#DD8306]'>{item.title}</p>
+                            </div>
+                        </Link>
                     ))}
                 </div>
                 <div><ChevronRightWhite color='orange' /></div>
             </div>
             <div>
                 <Button
+                    onPress={onOpen}
                     className='bg-[#DD8306] text-white font-bold'
                     size='sm'
                 >
                     Lihat Lebih Banyak
                 </Button>
+                <Modal isOpen={isOpen} onOpenChange={onOpenChange}
+                    size='full'
+                    scrollBehavior={scrollBehavior}
+                    placement={modalPlacement}
+                    classNames={{
+                        wrapper: "h-full bg-white",
+                        base: "bg-white min-h-full",
+                        // body: "w-full bg-white",
+                        // footer: "bg-white"
+                    }}
+                >
+                    <ModalContent>
+                        {(onClose) => (
+                            <>
+                                <ModalHeader className="flex flex-col text-[#DD8306] items-center min-h mb- text-3xl font-semibold">Berita Wilayah</ModalHeader>
+                                <ModalBody className='flex flex-row flex-wrap justify-center'>
+                                    {listPoldaAll.map((item: any, index: any) => (
+                                        <Link href={item.path}>
+                                            <div key={index.id} className='w-[140px] h-[115px] flex flex-col items-center justify-evenly border-2 rounded-lg shadow-sm'>
+                                                <Image
+                                                    radius="lg"
+                                                    className="h-[59px]"
+                                                    src={item.img}
+                                                />
+                                                <p className='text-xs font-bold text-[#DD8306]'>{item.title}</p>
+                                            </div>
+                                        </Link>
+                                    ))}
+                                </ModalBody>
+                                <ModalFooter>
+                                    <Button color="danger" variant="light" onPress={onClose}>
+                                        Tutup
+                                    </Button>
+                                </ModalFooter>
+                            </>
+                        )}
+                    </ModalContent>
+                </Modal>
             </div>
         </div>
     )

components/Landing Page/SidebarNav.tsx

@@ -1,6 +1,8 @@
-import { ScrollShadow } from '@nextui-org/react'
+import { LinkIcon, ScrollShadow } from '@nextui-org/react'
 import React from 'react'
 import { EyeIcon } from '../icons'
+import Image from 'next/image'
+import Link from 'next/link'
 
 export default function SidebarNav() {
     return (
@@ -35,21 +37,36 @@ export default function SidebarNav() {
                 </div>
                 <div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'>Publikasi
                     <div className='flex flex-col gap-3 pt-3'>
-                        <img src="/publikasi1.png" alt="publikasi" />
+                        <Image height={200} width={400} src="/publikasi1.png" alt="publikasi" />
-                        <img src="/publikasi2.png" alt="publikasi" />
+                        <Image height={200} width={400} src="/publikasi2.png" alt="publikasi" />
-                        <img src="/publikasi3.png" alt="publikasi" />
+                        <Link href='https://humas.polri.go.id/wp-content/uploads/2023/08/LAPORAN-HASIL-KEUANGAN-SEMESTER-I-DIVISI-HUMAS-POLRI-2.pdf' target='_blank'>
-                        <img src="/publikasi4.png" alt="publikasi" />
+                            <Image height={200} width={400} src="/publikasi3.png" alt="publikasi" />
-                        <img src="/publikasi5.png" alt="publikasi" />
+                        </Link>
-                        <img src="/publikasi6.png" alt="publikasi" />
+                        <Link href='https://lpse.polri.go.id/eproc4' target='_blank'>
-                        <img src="/publikasi7.png" alt="publikasi" />
+                            <Image height={200} width={400} src="/publikasi4.png" alt="publikasi" />
+                        </Link>
+                        <Image height={200} width={400} src="/publikasi5.png" alt="publikasi" />
+                        <Image height={200} width={400} src="/publikasi6.png" alt="publikasi" />
+                        <Link href='https://tribratanews.polri.go.id/' target='_blank'>
+                            <Image height={200} width={400} src="/publikasi7.png" alt="publikasi" />
+                        </Link>
+
                     </div>
                 </div>
                 <div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'>Channel Humas Polri
                     <div className='flex flex-col gap-3  m-10'>
-                        <img src="/humas1.png" alt="humas-polri" />
+                        <Link href='https://mediahub.polri.go.id/' target='_blank'>
-                        <img src="/humas2.png" alt="humas-polri" />
+                            <Image height={100} width={300} src="/humas1.png" alt="humas-polri" />
-                        <img src="/humas3.png" alt="humas-polri" />
+                        </Link>
-                        <img src="/humas4.png" alt="humas-polri" />
+                        <Link href='https://spit.humas.polri.go.id/' target='_blank'>
+                            <Image height={100} width={300} src="/humas2.png" alt="humas-polri" />
+                        </Link>
+                        <Link href='https://tvradio.polri.go.id/' target='_blank'>
+                            <Image height={100} width={300} src="/humas3.png" alt="humas-polri" />
+                        </Link>
+                        <Link href='https://tribratanews.polri.go.id/' target='_blank' className='border-2 rounded-md shadow-md'>
+                            <Image height={100} width={300} src="/humas4.png" alt="humas-polri" />
+                        </Link>
                     </div>
                 </div>
             </div>
@@ -57,33 +74,33 @@ export default function SidebarNav() {
             <div className='flex flex-col items-center space-y-7'>
                 <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal1.png" alt="" className='w-full' />
-                    <p className='leading-tight text-blue-500 pt-3'>Berita BPS</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-3'><Link href='https://www.bps.go.id/id/news' target='_blank'>Berita BPS</Link></p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pusat Statistika Indonesia</p>
-                    <p className='leading-tight text-blue-500 pt-2'>Pengumuman BPS</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.bps.go.id/id/publication' target='_blank'>Pengumuman BPS</Link></p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p>
                 </div>
                 <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal2.png" alt="" className='w-full' />
-                    <p className='leading-tight text-blue-500 pt-5'>Berita KPU</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.kpu.go.id/berita/104/berita-terkini' target='_blank'>Berita KPU</Link></p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Komisi Pemilihan Umum Indonesia</p>
-                    <p className='leading-tight text-blue-500 pt-2'>Pengumuman KPU</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.kpu.go.id/berita/11/pengumumanse' target='_blank'>Pengumuman KPU</Link></p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia</p>
                 </div>
                 <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal3.png" alt="" className='w-full' />
-                    <p className='leading-tight text-blue-500 pt-5'>Berita BAWASLU</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.bawaslu.go.id/' target='_blank'>Berita BAWASLU</Link></p>
                     <p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia</p>
-                    <p className='leading-tight text-blue-500 pt-2'>Pengumuman BAWASLU</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.bawaslu.go.id/id/pengumuman' target='_blank'>Pengumuman BAWASLU</Link></p>
                     <p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p>
                 </div>
                 <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal4.png" alt="" className='w-full' />
-                    <p className='leading-tight text-blue-500 pt-5'>Info KPAI</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.kpai.go.id/' target='_blank'>Info KPAI</Link></p>
                     <p className='text-xs text-gray-500 pt-1'>Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia</p>
                 </div>
                 <div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
                     <img src="/eksternal5.png" alt="" className='w-full' />
-                    <p className='leading-tight text-blue-500 pt-5'>INFO KOMNAS PEREMPUAN</p>
+                    <p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.komnasperempuan.go.id/' target='_blank'>INFO KOMNAS PEREMPUAN</Link></p>
                     <p className='text-xs text-gray-500 pt-1'>Info dan Berita terbaru dari Komnas Perempuan Indonesia</p>
                 </div>
             </div>

components/detail/Contact.tsx

@@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { Calender, CustomerService, EyeFilledIcon, EyeSlashFilledIcon, Hotline, Location, Mail } from '../icons';
 import Datepicker from "react-tailwindcss-datepicker";
+import Image from "next/image";
 
 const schema = z.object({
     name: z.string().min(3).max(50),
@@ -95,8 +96,8 @@ const Contact: React.FC = () => {
                             <div>Hari Senin - Jumat | 08:00 - 15:00 WIB</div>
                         </div>
                     </div>
-                    <div className="flex justify-center">
+                    <div className="flex justify-center border-2 border-red-500 h-[280px] pt-2">
-                        <img src="maps.png" alt="maps" className="" />
+                        {/* <Image height={100} width={100} src="/maps.png" alt="maps" className="" /> */}
                     </div>
                 </div>
                 <div className="w-auto lg:w-2/3 relative p-2 md:p-5 space-y-3 pr-2 md:pr-28">
@@ -201,12 +202,12 @@ const Contact: React.FC = () => {
                             variant='underlined'
                         />
                     </div>
-                    <div className="hidden lg:block absolute -top-28 right-28">
+                    <div className="hidden lg:block absolute -top-36 right-20">
-                        <img src="sparklg.png" alt="" className="" />
+                        <Image height={320} width={320} src="/sparklg.png" alt="" className="" />
                     </div>
                     <div className="flex justify-center md:justify-end">
                         <Button className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg" size="md">Kirim Pesan</Button>
-                        <img src="ar.png" alt="ar" className="absolute right-[28%] -bottom-3 hidden lg:block" />
+                        <Image height={320} width={320} src="/ar.png" alt="ar" className="absolute right-[28%]  hidden lg:block" />
                     </div>
                 </div>
             </div>

components/detail/ListNews.tsx

@@ -2,6 +2,7 @@
 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';
+import Link from "next/link";
 
 
 export default function ListNews() {
@@ -100,20 +101,22 @@ export default function ListNews() {
             </Breadcrumbs>
             <div className="flex-wrap grid  grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-5 place-items-center gap-7">
                 {listNews.map((news) => (
-                    <div className="h-auto w-[300px] text-xs">
+                    <Link href={`/news/detail/${news.id}`}>
-                        <div className="h-[50%]">
+                        <div className="h-auto w-[300px] text-xs">
-                            <img src={news.thumnbnail} alt="" className="w-max" />
+                            <div className="h-[50%]">
-                        </div>
+                                <img src={news.thumnbnail} alt="" className="w-max" />
-                        <div className="px-3 py-3">
+                            </div>
-                            <div className="font-medium text-sm leading-5 ">{news.title}</div>
+                            <div className="px-3 py-3">
-                            <div className="flex pb-1">
+                                <div className="font-medium text-sm leading-5 ">{news.title}</div>
-                                <div className="text-xs">{news.date}</div>
+                                <div className="flex pb-1">
-                                {/* <div>jam</div>
+                                    <div className="text-xs">{news.date}</div>
-                                <div>creator</div> */}
+                                    {/* <div>jam</div>
+                                <div>creator</div> */}
+                                </div>
+                                <div className="text-clip">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis est quas soluta deserunt ullam. Sapiente facilis modi vitae. Aspernatur excepturi quo amet omnis laudantium inventore praesentium illum hic reiciendis error.</div>
                             </div>
-                            <div className="text-clip">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis est quas soluta deserunt ullam. Sapiente facilis modi vitae. Aspernatur excepturi quo amet omnis laudantium inventore praesentium illum hic reiciendis error.</div>
                         </div>
-                    </div>
+                    </Link>
                 ))}
             </div>
         </div>

components/layout/HumasAdminLayout.tsx

@@ -11,12 +11,12 @@ interface Props {
 
 export default function HumasAdminLayout({ children, pageTitle }: Props) {
     return (
-        // <section className="flex text-black dark:text-white dark:bg-[#0b2948] border-2 border-red-500">
+        <section className=" text-black flex dark:text-white bg-slate-100 dark:bg-[#151c2c] h-screen">
-        <section className="flex  ">
             <HumasSidebarWrapper />
             <HumasNavbarWrapper>
                 {children}
             </HumasNavbarWrapper>
         </section>
+
     )
 }

components/navbar/HumasNavbarWrapper.tsx

@@ -1,8 +1,9 @@
 'use client'
-import { Navbar, NavbarContent } from '@nextui-org/navbar';
+import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@nextui-org/navbar';
-import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
+import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, ScrollShadow } from '@nextui-org/react';
 import React from 'react'
 import { ThemeSwitch } from '../theme-switch';
+import Link from 'next/link';
 
 interface Props {
     children: React.ReactNode;
@@ -10,13 +11,19 @@ interface Props {
 }
 export default function HumasNavbarWrapper({ children }: Props) {
     return (
-        <div className='relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden max-h-screen bg-transparent'>
+        <div className='w-full relative overflow-y-auto overflow-x-hidden'>
-            <Navbar className='w-full bg-slate-100 dark:bg-[#16213E]'
+            <Navbar maxWidth='full' className='dark:text-white bg-slate-200 dark:bg-[#182237]'
                 isBordered
                 classNames={{
-                    wrapper: "w-full max-w-full"
+                    wrapper: "p-2"
-                }}>
+                }}
-                <NavbarContent as="div" justify="end">
+            >
+                <NavbarContent>
+                    <NavbarItem>
+                        Judul
+                    </NavbarItem>
+                </NavbarContent>
+                <NavbarContent as="div" justify="end" className='pr-2'>
                     <Dropdown placement="bottom-end">
                         <DropdownTrigger>
                             <Avatar
@@ -35,15 +42,20 @@ export default function HumasNavbarWrapper({ children }: Props) {
                                 <p className="font-semibold">zoey@example.com</p>
                             </DropdownItem>
                             <DropdownItem key="settings">My Settings</DropdownItem>
+                            <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
                             <DropdownItem key="logout" color="danger">
                                 Log Out
                             </DropdownItem>
-                            <DropdownItem key="theme"><ThemeSwitch /> </DropdownItem>
+                            <DropdownItem>
+                                <ThemeSwitch />
+                            </DropdownItem>
                         </DropdownMenu>
                     </Dropdown>
                 </NavbarContent>
             </Navbar>
-            {children}
+            <div className='p-2'>
+                {children}
+            </div>
         </div>
 
     )

components/navbar/HumasSidebarWrapper.tsx

@@ -1,9 +1,101 @@
 import React from 'react'
+import { RxHamburgerMenu } from "react-icons/rx";
+import {
+    MdDashboard,
+    MdSupervisedUserCircle,
+    MdShoppingBag,
+    MdAttachMoney,
+    MdWork,
+    MdAnalytics,
+    MdPeople,
+    MdOutlineSettings,
+    MdHelpCenter
+} from 'react-icons/md'
+import MenuLinks from '../page/MenuLink';
+import Link from 'next/link';
+
+const menuItems = [
+    {
+        title: "Pages",
+        list: [
+            {
+                title: "Dashboard",
+                path: '/admin/dashboard',
+                icon: <MdDashboard />
+            },
+            {
+                title: "Users",
+                path: '/dashboard/users',
+                icon: <MdSupervisedUserCircle />
+            },
+            {
+                title: "Producst",
+                path: '/dashboard/producst',
+                icon: <MdShoppingBag />
+            },
+            {
+                title: "Transactions",
+                path: '/dashboard/transactions',
+                icon: <MdAttachMoney />
+            },
+        ]
+    },
+    {
+        title: "Analytics",
+        list: [
+            {
+                title: "Revenue",
+                path: '/dashboard/revenue',
+                icon: <MdWork />
+            },
+            {
+                title: "Reports",
+                path: '/dashboard/reports',
+                icon: <MdAnalytics />
+            },
+            {
+                title: "Teams",
+                path: '/dashboard/teams',
+                icon: <MdPeople />
+            },
+        ]
+    },
+    {
+        title: "User",
+        list: [
+            {
+                title: "Settings",
+                path: '/dashboard/settings',
+                icon: <MdOutlineSettings />
+            },
+            {
+                title: "Help",
+                path: '/dashboard/help',
+                icon: <MdHelpCenter />
+            },
+        ]
+    },
+]
 
 export default function HumasSidebarWrapper() {
     return (
-        <aside className='w-[250px] h-screen bg-[#070F2B]'>
+        <aside className='w-1/4 dark:text-white bg-slate-200  border-gray-700 dark:bg-[#182237] h-screen overflow-y-auto custom-scrollbar p-3 space-y-7'>
-            Sidebar
+            <div className='flex'>
-        </aside>
+                <div className='w-full flex justify-center'><Link href='/'><img src="/logohumas.png" alt="log" /></Link></div>
+                <div><RxHamburgerMenu size={28} /></div>
+            </div>
+            <div>
+                <ul className='p-2 space-y-3'>
+                    {menuItems.map(category => (
+                        <li className='space-y-1' key={category.title}>
+                            <span>{category.title}</span>
+                            {category.list.map(item => (
+                                <MenuLinks item={item} key={item.title} />
+                            ))}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </aside >
     )
 }

components/navbar/NavbarHumas.tsx

@@ -55,6 +55,38 @@ export default function NavbarHumas() {
                         <Link href={'/'}>
                             <div>Beranda</div>
                         </Link>
+                        <div className=''>
+                            <Dropdown>
+                                <DropdownTrigger>
+                                    <Button
+                                    >
+                                        Open Menu
+                                    </Button>
+                                </DropdownTrigger>
+                                <DropdownMenu aria-label="Static Actions" className='w-full'
+                                    classNames={{
+                                        base: "w-full",
+                                        emptyContent: "w-full",
+                                        list: "w-full"
+                                    }}
+                                    itemClasses={{
+                                        base: "w-full",
+                                        wrapper: "w-full",
+                                        title: "border-2 w-full"
+
+                                    }}
+                                >
+                                    <DropdownItem classNames={{
+                                        base: "w-screen"
+                                    }} key="new">New file</DropdownItem>
+                                    <DropdownItem key="copy">Copy link</DropdownItem>
+                                    <DropdownItem key="edit">Edit file</DropdownItem>
+                                    <DropdownItem key="delete" className="text-danger" color="danger">
+                                        Delete file
+                                    </DropdownItem>
+                                </DropdownMenu>
+                            </Dropdown>
+                        </div>
                         <div>
                             <Dropdown className=' dark:bg-[#1F1A17]'>
                                 <NavbarItem>

components/navbar/NavbarSatker.tsx

@@ -6,18 +6,24 @@ import { ThemeSwitch } from '../theme-switch'
 import { usePathname } from 'next/navigation'
 
 export default function NavbarSatker() {
-    const pathname = usePathname();
+    const pathname = usePathname()
-    console.log(pathname)
+    const newPathname = pathname.split('/')[3]
+
 
     return (
         <Navbar maxWidth='full' height="8rem" className='dark:bg-[#1F1A17]'>
             <div className='w-full h-full flex'>
-                <div className='w-1/3 md:w-2/12 flex'>
+                <div className='w-auto lg:w-2/12 flex'>
-                    <Link href={'/'}>
+                    <Link href={'#'}>
-                        <img src="/assets/satker/EPPID2.png" alt="logo" className='w-auto lg:w-full h-auto lg:h-full p-0 lg:p-2 border-2 border-red-700 flex' />
+                        <div className='h-full flex'>
+                            <img src="/assets/satker/EPPID2.png" alt="logo" className='w-auto lg:w-full h-auto lg:h-full p-0 lg:p-2 flex' />
+                            <div className='absolute top-5 right-[-35px]'>
+                                <img src="/assets/satker/pusdokes.svg" alt="" className='w-36' />
+                            </div>
+                        </div>
                     </Link>
                 </div>
-                <div className='w-10/12  hidden md:flex flex-col justify-cente pt-3 space-y-3'>
+                <div className='w-auto lg:w-10/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>
@@ -30,7 +36,7 @@ export default function NavbarSatker() {
                     </div>
                     <div className='flex flex-wrap items-center justify-around'>
                         <NavbarItem>
-                            <Link href='/portal-ppid' color='foreground'>
+                            <Link href={`/portal-ppid/satuan-kerja/${newPathname}`} color='foreground'>
                                 Beranda
                             </Link>
                         </NavbarItem>
@@ -133,14 +139,14 @@ export default function NavbarSatker() {
                                 <DropdownItem
                                     endContent={<ChevronRightIcon />}
                                 >
-                                    <Link href={`${pathname}/profile/sejarah-ppid-polri`} color='foreground'>
+                                    <Link href={`/portal-ppid/satuan-kerja/${newPathname}/profile/sejarah-ppid-polri`} color='foreground'>
                                         Sejarah PPID Polri
                                     </Link>
                                 </DropdownItem>
                                 <DropdownItem
                                     endContent={<ChevronRightIcon />}
                                 >
-                                    <Link href='/portal-ppid/profile/profile-singkat-ppid' color='foreground'>
+                                    <Link href={`/portal-ppid/satuan-kerja/${newPathname}/profile/profile-singkat-ppid`} color='foreground'>
                                         Profile Singkat PPID
                                     </Link>
                                 </DropdownItem>

components/page/DetailNews.tsx

@@ -20,10 +20,10 @@ export default function DetailNews() {
                     <p className='hidden md:block'>|</p>
                     <p>1000</p>
                     <div className="flex gap-2 md:hidden">
-                        <div><img src="/fb.png" alt="medsos" /></div>
+                        <div><Image height={185} width={185} src="/fb.png" alt="medsos" /></div>
-                        <div><img src="/twitter.png" alt="" /></div>
+                        <div><Image height={185} width={185} src="/twitter.png" alt="medsos" /></div>
-                        <div><img src="/linkedin.png" alt="" /></div>
+                        <div><Image height={185} width={185} src="/linkedin.png" alt="medsos" /></div>
-                        <div><img src="/wa.png" alt="" /></div>
+                        <div><Image height={185} width={185} src="/wa.png" alt="medsos" /></div>
                     </div>
 
                 </div>
@@ -39,10 +39,10 @@ export default function DetailNews() {
                         Berdasarkan hasil perhitungan kerugian keuangan negara yang dilakukan BPK RI adalah sebesar Rp 13.213.174.883.</p>
                 </div>
                 <div className="hidden sm:grid grid-cols-5 px-1 md:px-3 pt-10">
-                    <div><img src="/fb.png" alt="medsos" /></div>
+                    <div><Image height={185} width={185} src="/fb.png" alt="medsos" /></div>
-                    <div><img src="/twitter.png" alt="" /></div>
+                    <div><Image height={185} width={185} src="/twitter.png" alt="medsos" /></div>
-                    <div><img src="/linkedin.png" alt="" /></div>
+                    <div><Image height={185} width={185} src="/linkedin.png" alt="medsos" /></div>
-                    <div><img src="/wa.png" alt="" /></div>
+                    <div><Image height={185} width={185} src="/wa.png" alt="medsos" /></div>
                 </div>
                 {/* <div className='h-auto lg:h-[350px]'>
 

components/page/MenuLink.tsx

@@ -0,0 +1,30 @@
+'use client'
+import React from 'react'
+import styles from './menuLinks.module.css'
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface MenuLinksProps {
+    item: {
+        icon: JSX.Element;
+        title: string;
+        path: any;
+    };
+}
+
+
+const MenuLinks: React.FC<MenuLinksProps> = ({ item }) => {
+
+    const pathname = usePathname()
+
+    console.log(pathname);
+
+    return (
+        <Link href={item.path} className={`flex items-center gap-2  hover:bg-slate-400 dark:hover:bg-[#2e374a] p-2 rounded-md ${pathname === item.path ? 'bg-slate-300 dark:bg-[#2e374a]' : ''}`} >
+            {item.icon}
+            {item.title}
+        </Link >
+    )
+}
+
+export default MenuLinks

package-lock.json

@@ -40,6 +40,7 @@
         "react-datepicker": "^6.1.0",
         "react-dom": "18.2.0",
         "react-hook-form": "^7.50.1",
+        "react-icons": "^5.0.1",
         "react-tailwindcss-datepicker": "^1.6.6",
         "react-tweet": "^3.2.0",
         "swiper": "^11.0.6",
@@ -5853,6 +5854,14 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -41,6 +41,7 @@
     "react-datepicker": "^6.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.50.1",
+    "react-icons": "^5.0.1",
     "react-tailwindcss-datepicker": "^1.6.6",
     "react-tweet": "^3.2.0",
     "swiper": "^11.0.6",

styles/globals.css

@@ -3,55 +3,20 @@
 @tailwind utilities;
 
 
-.swiper {
+/* 
-    width: 100%;
+*{
-    height: 100%;
+  border:1px solid green;
-  }
+}      */
 
-  .swiper-slide {
+.custom-scrollbar::-webkit-scrollbar {
-    text-align: center;
+  width: 12px;
-    font-size: 18px;
+}
-    background: #fff;
 
-    /* Center slide text vertically */
+.custom-scrollbar::-webkit-scrollbar-track {
-    display: flex;
+  background: transparent;
-    justify-content: center;
+}
-    align-items: center;
-  }
 
-  .swiper-slide img {
+.custom-scrollbar::-webkit-scrollbar-thumb {
-    display: block;
+  background: transparent;
-    width: 100%;
+  border-radius: 5px;
-    height: 100%;
+}
-    object-fit: cover;
-  }
-  
-  .autoplay-progress {
-    position: absolute;
-    right: 16px;
-    bottom: 16px;
-    z-index: 10;
-    width: 48px;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: bold;
-    color: var(--swiper-theme-color);
-  }
-  
-  .autoplay-progress svg {
-    --progress: 0;
-    position: absolute;
-    left: 0;
-    top: 0px;
-    z-index: 10;
-    width: 100%;
-    height: 100%;
-    stroke-width: 4px;
-    stroke: var(--swiper-theme-color);
-    fill: none;
-    stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
-    stroke-dasharray: 125.6;
-    transform: rotate(-90deg);
-  }