From 7eedd7c85f6b603f848e8a383589fa786b585eae Mon Sep 17 00:00:00 2001
From: sabdayagra <msabdayagra@gmail.com>
Date: Tue, 24 Dec 2024 23:16:20 +0700
Subject: [PATCH 1/3] feat: add and adjust ui and api

---
 .../(public)/audio/detail/[slug]/page.tsx     | 35 +++++-----
 .../(public)/document/detail/[slug]/page.tsx  | 16 ++---
 .../(public)/image/detail/[slug]/page.tsx     | 18 ++---
 .../(public)/indeks/detail/[slug]/page.tsx    | 66 ++++++++++++-------
 app/[locale]/(public)/schedule/page.tsx       | 41 +++++++++---
 .../(public)/video/detail/[slug]/page.tsx     | 16 ++---
 components/landing-page/navbar.tsx            |  9 +--
 components/landing-page/new-content.tsx       |  8 +--
 components/landing-page/search-section.tsx    |  4 +-
 service/landing/landing.ts                    |  4 +-
 10 files changed, 130 insertions(+), 87 deletions(-)

diff --git a/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/audio/detail/[slug]/page.tsx
index 8901aa89..8cb993dd 100644
--- a/app/[locale]/(public)/audio/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/audio/detail/[slug]/page.tsx
@@ -49,10 +49,25 @@ const DetailAudio = () => {
               <BarWave color="#ffc831" width="60px" height="25px" duration="2s" />
               <div className="absolute top-4 left-4"></div>
             </div>
+            {/* Footer Informasi */}
+            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <p className="flex flex-row items-center">
+                oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
+                <Icon icon="formkit:eye" width="15" height="15" />
+                &nbsp;
+                {detailDataAudio?.clickCount}
+              </p>
+              <p>Kreator: {detailDataAudio?.creatorName}</p>
+            </div>
+            {/* Keterangan */}
+            <div className="md:w-3/4">
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
+              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
+            </div>
           </div>
 
           {/* Bagian Kanan */}
-          <div className="md:w-1/4 p-4 bg-gray-300 rounded-lg mx-4">
+          <div className="md:w-1/4 p-4 h-fit bg-gray-300 rounded-lg mx-4">
             <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
               <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
                 <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@@ -106,24 +121,8 @@ const DetailAudio = () => {
             </button>
           </div>
         </div>
-
-        {/* Footer Informasi */}
-        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <p className="flex flex-row items-center">
-            oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
-            <Icon icon="formkit:eye" width="15" height="15" />
-            &nbsp;
-            {detailDataAudio?.clickCount}
-          </p>
-          <p>Kreator: {detailDataAudio?.creatorName}</p>
-        </div>
-
-        {/* Keterangan */}
-        <div className="md:w-3/4">
-          <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
-        </div>
       </div>
+
       <div className="w-full mb-8">
         {/* Comment */}
         <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
diff --git a/app/[locale]/(public)/document/detail/[slug]/page.tsx b/app/[locale]/(public)/document/detail/[slug]/page.tsx
index 039b88cd..801cd83c 100644
--- a/app/[locale]/(public)/document/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/document/detail/[slug]/page.tsx
@@ -4,11 +4,9 @@ import { useParams, usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { getDetail } from "@/service/landing/landing";
-import VideoPlayer from "@/utils/video-player";
 import NewContent from "@/components/landing-page/new-content";
 import { Link } from "@/i18n/routing";
 import { Textarea } from "@/components/ui/textarea";
-import { BarWave } from "react-cssfx-loading";
 
 const DetailDocument = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -49,19 +47,19 @@ const DetailDocument = () => {
               <div className="absolute top-4 left-4"></div>
             </div>
             {/* Footer Informasi */}
-            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-              <p className="flex flex-row items-center">
+            <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <p className="flex flex-row items-center mt-3">
                 oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp;
                 {detailDataDocument?.clickCount}
               </p>
-              <p>Kreator: {detailDataDocument?.creatorName}</p>
+              <p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p>
             </div>
 
             {/* Keterangan */}
             <div className="md:w-3/4">
-              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataDocument?.title}</h1>
+              <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataDocument?.title}</h1>
               <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
             </div>
           </div>
@@ -123,15 +121,15 @@ const DetailDocument = () => {
       <div className="w-full mb-8">
         {/* Comment */}
         <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
-          <div className="gap-5 flex flex-col px-4 lg:px-20">
+          <div className="gap-5 flex flex-col px-4 lg:px-16">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] rounded-lg text-white w-fit px-4 py-1">Kirim</button>
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="px-4">
+        <div className="">
           <NewContent type={"similar"} />
         </div>
       </div>
diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx
index a76d06a4..019a0af6 100644
--- a/app/[locale]/(public)/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx
@@ -49,17 +49,17 @@ const DetailInfo = () => {
             </div>
 
             {/* Gambar bawah Kecil */}
-            <div className="p-4 grid grid-cols-4 gap-2">
+            <div className="py-4 flex flex-row gap-3">
               {detailDataImage?.files?.map((file: any, index: number) => (
                 <a onClick={() => setSelectedImage(index)} key={file?.id}>
-                  <img src={file?.url} className="w-full h-fit object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
+                  <img src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
                 </a>
               ))}
             </div>
 
             {/* Footer Informasi */}
-            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-              <div className="flex flex-row items-center">
+            <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <div className="flex flex-row items-center mt-3 justify-between">
                 oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp; {detailDataImage?.clickCount} &nbsp;
@@ -69,8 +69,8 @@ const DetailInfo = () => {
 
             {/* Keterangan */}
             <div className="w-full">
-              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataImage?.title}</h1>
-              <div dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
+              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
             </div>
           </div>
 
@@ -134,15 +134,15 @@ const DetailInfo = () => {
       <div className="w-full mb-8">
         {/* Comment */}
         <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
-          <div className="gap-5 flex flex-col px-4 lg:px-16">
+          <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">Kirim</button>
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="px-4">
+        <div className="">
           <NewContent type={"similar"} />
         </div>
       </div>
diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
index 3dcafa08..b76f2d03 100644
--- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
@@ -2,69 +2,91 @@
 import { Textarea } from "@/components/ui/textarea";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import NewContent from "@/components/landing-page/new-content";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { Link } from "@/i18n/routing";
-import { getDetailIndeks } from "@/service/landing/landing";
+import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing";
 import { formatDateToIndonesian } from "@/utils/globals";
+import { Icon } from "@iconify/react/dist/iconify.js";
 
 const IndeksDetail = () => {
   const [indeksData, setIndeksData] = useState<any>();
   const params = useParams();
   const slug = params?.slug;
+  const [relatedPost, setRelatedPost] = useState<any>();
 
   useEffect(() => {
     initFetch();
+    detailFetch();
   }, []);
   const initFetch = async () => {
     const response = await getDetailIndeks();
     console.log(response);
-    setIndeksData(response?.data?.data?.content);
+    setRelatedPost(response?.data?.data?.content);
+  };
+  const detailFetch = async () => {
+    const response = await publicDetailBlog(slug);
+    console.log(response);
+    setIndeksData(response?.data?.data);
   };
 
   return (
     <>
       <div className="p-4 lg:px-60 lg:p-12">
         {/* Judul */}
-        <div className="flex justify-center mb-5">
+        <div className="flex flex-col mb-5">
+          <h1 className="text-lg mb-2">Indeks / Detail</h1>
           <h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1>
         </div>
         {/* Gambar Utama */}
         <div className="flex items-center justify-center">
-          <img src={indeksData?.thumbnailLink} alt="Main" className="h-[500px] w-full rounded-lg" />
+          <img src={indeksData?.thumbnailLink} alt="Main" className="h-[550px] w-full rounded-lg" />
         </div>
         {/* Footer Informasi */}
-        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <p className="items-end">
-            {formatDateToIndonesian(new Date(indeksData?.createdAt))} {indeksData?.timezone ? indeksData?.timezone : "WIB"}|{" "}
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-              <path
-                fill="currentColor"
-                d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-              />
-            </svg>{" "}
-            {indeksData?.clickCount}
-          </p>
+        <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+          <div className="flex flex-row items-center mt-3 justify-between">
+            oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
+          </div>
         </div>
 
         {/* Keterangan */}
         <div className="w-auto">
-          <p dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
+          <p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
         </div>
       </div>
 
+      {/* Comment */}
       <div className="w-full">
-        {/* Comment */}
-        <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
+        <div className="flex flex-col py-5 p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-16">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="space-x-5 flex flex-col p-4">
-          <NewContent type={"similar"} />
+        <div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
+          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1>
+          <Carousel>
+            <CarouselContent className="w-full max-w-7xl">
+              {relatedPost?.map((relate: any) => (
+                <CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
+                  <Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
+                    <img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                    <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
+                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
+                      <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
+                      <p className="flex flex-row items-center text-[10px] gap-2">
+                        {formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
+                      </p>
+                    </div>
+                  </Link>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
         </div>
       </div>
     </>
diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx
index df2bdc31..e22a56e9 100644
--- a/app/[locale]/(public)/schedule/page.tsx
+++ b/app/[locale]/(public)/schedule/page.tsx
@@ -9,11 +9,11 @@ import { format } from "date-fns";
 import { cn } from "@/lib/utils";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/service/schedule/schedule";
+import { detailSchedule, listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/service/schedule/schedule";
 import { useRouter } from "@/i18n/routing";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { close, loading } from "@/config/swal";
 
 const timeList = [
   {
@@ -114,7 +114,7 @@ const timeList = [
   },
 ];
 
-const Schedule = () => {
+const Schedule = (props: any) => {
   const router = useRouter();
   const [startDate, setStartDate] = useState<Date | undefined>(new Date());
   const [dateAWeek, setDateAWeek] = useState<string[]>([]);
@@ -125,6 +125,19 @@ const Schedule = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [schedules, setSchedules] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
+  const [detail, setDetail] = useState<any>();
+  const [content, setContent] = useState();
+  const { id } = props;
+
+  useEffect(() => {
+    async function getDataSchedule() {
+      const response = await detailSchedule(id);
+      setDetail(response.data?.data);
+      setContent(response.data?.data?.files);
+    }
+
+    getDataSchedule();
+  }, [id]);
 
   useEffect(() => {
     async function initState() {
@@ -256,7 +269,13 @@ const Schedule = () => {
     }
   };
 
-  const getItem = (itemFound: any) => {
+  const getItem = async (itemFound: any) => {
+    loading();
+    const response = await detailSchedule(itemFound?.id);
+    setDetail(response.data?.data);
+    setContent(response.data?.data?.files);
+    console.log("item Found", itemFound);
+    close();
     setOpenDialog(true);
   };
 
@@ -687,29 +706,31 @@ const Schedule = () => {
       <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Test Event</AlertDialogTitle>
+            <AlertDialogTitle>
+              <h1 className="my-4 font-light">JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}</h1>
+              <p className="font-bold">{detail?.title}</p>
+            </AlertDialogTitle>
             <AlertDialogDescription>
               <p className="flex flex-row items-center gap-2">
                 <Icon icon="iconamoon:clock-thin" />
-                08.00 - 12.00 WIB
+                {detail?.date} {detail?.startTime} - {detail?.endTime} {detail?.timezone ? detail.timezone : "WIB"}
               </p>
             </AlertDialogDescription>
             <AlertDialogDescription>
               <p className="flex flex-row items-start gap-2 ">
                 <Icon icon="bxs:map" width={30} />
-                Jl. Trunojoyo No.3 2, RT.2/RW.1, Selong, Kec. Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia.
+                {detail?.address}
               </p>
             </AlertDialogDescription>
             <AlertDialogDescription>
               <p className="flex flex-row items-center gap-2">
                 <Icon icon="ic:round-person" />
-                Hanif Salafi
+                {detail?.speakerTitle || ""} {detail?.speakerName || ""}{" "}
               </p>
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Continue</AlertDialogAction>
+            <AlertDialogAction>Close</AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx
index 32b952a4..f4c323d7 100644
--- a/app/[locale]/(public)/video/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx
@@ -49,20 +49,20 @@ const DetailVideo = () => {
             </div>
 
             {/* Footer Informasi */}
-            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-              <p className="flex flex-row items-center">
+            <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <p className="flex flex-row items-center mt-3">
                 oleh&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp;
                 {detailDataVideo?.clickCount}
               </p>
-              <p>Kreator: {detailDataVideo?.creatorName}</p>
+              <p className="mt-3">Kreator: {detailDataVideo?.creatorName}</p>
             </div>
 
             {/* Keterangan */}
             <div className="w-full">
-              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataVideo?.title}</h1>
-              <div dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataVideo?.title}</h1>
+              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} />
             </div>
           </div>
 
@@ -125,15 +125,15 @@ const DetailVideo = () => {
       <div className="w-full mb-8">
         {/* Comment */}
         <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
-          <div className="gap-5 flex flex-col px-4 lg:px-16">
+          <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="px-4">
+        <div className="">
           <NewContent type={"similar"} />
         </div>
       </div>
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 25f15b21..0f6cb699 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -193,7 +193,7 @@ const Navbar = () => {
               <NavigationMenuItem>
                 <NavigationMenuTrigger>
                   <a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer">
-                    <svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
                         fill="currentColor"
@@ -308,11 +308,12 @@ const Navbar = () => {
           <div className=" py-1 flex items-center mx-3">
             <input type="text" placeholder="Pencarian" className="border rounded-full w-full text-sm text-center text-gray-600" />
           </div>
-          <div className="flex flex-row justify-between items-center space-y-2 mx-3">
-            <Link href="/auth" className="w-fit px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">
+
+          <div className="flex flex-row justify-between items-center my-2 mx-3 gap-2">
+            <Link href="/auth" className="w-full px-4 py-1  bg-[#bb3523] text-white text-center font-semibold rounded-md hover:bg-red-700 md:flex">
               Masuk
             </Link>
-            <Link href="#" className="w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
+            <Link href="#" className="w-full px-4 py-1 border border-[#bb3523] text-center text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
               Daftar
             </Link>
           </div>
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index da266abe..c8b71d5f 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -33,11 +33,11 @@ const NewContent = (props: { type: string }) => {
   };
 
   return (
-    <div className="px-4 lg:px-16">
+    <div className="px-4 lg:px-16 py-4">
       <Reveal>
         <div className="flex flex-col p-4">
           <div className="mx-auto w-full max-w-7xl justify-start flex px-5 flex-col lg:flex-row gap-5 mb-4">
-            <h2 className="flex items-center text-sm lg:text-xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
+            <h2 className="flex items-center text-xl lg:text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
               <span className="text-black ">Konten&nbsp;</span>
               {props.type == "popular" ? "Populer" : props.type == "latest" ? "Terbaru" : "Serupa"}
             </h2>
@@ -73,7 +73,7 @@ const NewContent = (props: { type: string }) => {
               </TabsList>
             </Tabs>
           </div>
-          <div className="px-10">
+          <div className="px-0 lg:px-10">
             {selectedTab == "video" ? (
               newContent?.length > 0 ? (
                 <Carousel className="w-full max-w-7xl mx-auto">
@@ -81,7 +81,7 @@ const NewContent = (props: { type: string }) => {
                     {newContent?.map((video: any) => (
                       <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
                         <Link href={`/video/detail/${video?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                          <img src={video?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                          <img src={video?.thumbnailLink} className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
                           <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
                             <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</h1>
                             <p className="flex flex-row items-center text-[10px] gap-2">
diff --git a/components/landing-page/search-section.tsx b/components/landing-page/search-section.tsx
index 9282833e..198400dc 100644
--- a/components/landing-page/search-section.tsx
+++ b/components/landing-page/search-section.tsx
@@ -11,7 +11,7 @@ const SearchSection = () => {
         <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
           <span className="text-[#bb3523] dark:text-white">Eksplorasi</span> dan <span className="text-[#bb3523] dark:text-white">Download</span> Liputan Resmi Kami
         </h1>
-        <div className="w-auto h-1 bg-[#bb3523] mx-auto mt-2"></div>
+        <div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
         <p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">Liputan resmi yang bersumber dari kegiatan Polri di Mabes dan Polda seluruh Indonesia</p>
 
         {/* Search Form */}
@@ -76,7 +76,7 @@ const SearchSection = () => {
           {/* Search Input */}
 
           {/* Button */}
-          <button className="px-6 lg:w-[20%] py-2 bg-[#bb3523] flex justify-center items-center gap-2 text-white rounded-lg hover:bg-red-700">
+          <button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
             Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
           </button>
         </div>
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index 1d45a4d5..f1baf249 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -42,4 +42,6 @@ export async function listCategory(type = "") {
   return await httpGetInterceptor(`media/categories/list/enable?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=${type}`);
 }
 
-
+export async function publicDetailBlog(slug: any) {
+  return await httpGetInterceptor(`blog/public/read/${slug}`);
+}

From 5d05674701fd0c115038e6523db7e3cd2337e8c8 Mon Sep 17 00:00:00 2001
From: sabdayagra <msabdayagra@gmail.com>
Date: Thu, 26 Dec 2024 22:03:45 +0700
Subject: [PATCH 2/3] add api in filter page

---
 app/[locale]/(public)/image/filter/page.tsx | 274 ++++++++++++--
 app/[locale]/(public)/video/filter/page.tsx |   2 +-
 components/landing-page/new-content.tsx     |   2 +-
 package-lock.json                           | 375 ++++++++------------
 package.json                                |   3 +-
 service/landing/landing.ts                  |  14 +-
 utils/globals.tsx                           |   6 +
 7 files changed, 412 insertions(+), 264 deletions(-)

diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index 1d4aecc4..77f95ffb 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -3,14 +3,24 @@ import React, { useEffect, useState } from "react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian } from "@/utils/globals";
-import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
-import { getListContent, listCategory } from "@/service/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { getListContent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
+import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
 import { Reveal } from "@/components/landing-page/Reveal";
-import { Link } from "@/i18n/routing";
+import { Link, useRouter } from "@/i18n/routing";
 import { Input } from "@/components/ui/input";
+import ReactDatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { close, loading } from "@/config/swal";
+
+interface FilterData {
+  searchTitle: string;
+  selectedYearMonth: string;
+  selectedDate: string;
+  selectedCategories: string[];
+}
 
 const columns: ColumnDef<any>[] = [
   {
@@ -58,12 +68,31 @@ const FilterPage = () => {
   });
   const [page, setPage] = useState(1);
   const [totalContent, setTotalContent] = useState();
+  const [change, setChange] = useState(false);
+  const sortBy = searchParams?.get("sortBy");
+  const title = searchParams?.get("title");
+  const category = searchParams?.get("category");
+  const group = searchParams?.get("group");
   const [contentImage, setContentImage] = useState([]);
   const [, setGetTotalPage] = useState();
-  const [categories, setCategories] = useState<any>([]);
   let typingTimer: any;
   const doneTypingInterval = 1500;
   const [search, setSearch] = useState();
+  const [categoryFilter, setCategoryFilter] = useState([]);
+  const [monthYearFilter, setMonthYearFilter] = useState<any>();
+  const [searchTitle, setSearchTitle] = useState<string>("");
+  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const isRegional = asPath?.includes("regional");
+  const isSatker = asPath?.includes("satker");
+  const [formatFilter, setFormatFilter] = useState([]);
+  const pages = page ? page - 1 : 0;
+  const [startDateString, setStartDateString] = useState<any>();
+  const [endDateString, setEndDateString] = useState<any>();
+  const [dateRange, setDateRange] = useState<any>([null, null]);
+  const [calenderState, setCalenderState] = useState(false);
+  const [handleClose, setHandleClose] = useState(false);
+
+  // const [startDate, endDate] = dateRange;
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
@@ -72,20 +101,141 @@ const FilterPage = () => {
     }
   }, [searchParams]);
 
+  // useEffect(() => {
+  //   fetchData();
+  // }, [page, sortBy, sortByOpt, title]);
+
   useEffect(() => {
-    fetchData();
-  }, [page]);
+    async function initState() {
+      if (isRegional) {
+        getDataRegional();
+      } else {
+        getDataAll();
+      }
+    }
+    console.log(monthYearFilter, "monthFilter");
+    initState();
+  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString]);
 
-  const fetchData = async () => {
-    const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "1" });
-    console.log(response);
+  useEffect(() => {
+    function initState() {
+      if (dateRange[0] != null && dateRange[1] != null) {
+        setStartDateString(getOnlyDate(dateRange[0]));
+        setEndDateString(getOnlyDate(dateRange[1]));
+        setHandleClose(true);
+        console.log("date range", dateRange, getOnlyDate(dateRange[0]));
+      }
+    }
+    initState();
+  }, [calenderState]);
 
-    const data = response.data?.data;
-    const contentData = data?.content;
-    setImageData(contentData);
-    setTotalData(data?.totalElements);
-    setTotalPage(data?.totalPages);
-  };
+  // const fetchData = async () => {
+  //   const response = await getListContent({ page: page - 1, size: 6, sortBy: sortByOpt, contentTypeId: "1", title: title ? title : "" });
+  //   console.log(response);
+
+  //   const data = response.data?.data;
+  //   const contentData = data?.content;
+  //   setImageData(contentData);
+  //   setTotalData(data?.totalElements);
+  //   setTotalPage(data?.totalPages);
+  //   setTotalContent(response.data?.data?.totalElements);
+  // };
+
+  async function getDataAll() {
+    if (asPath?.includes("/polda/") == true) {
+      if (asPath?.split("/")[2] !== "[polda_name]") {
+        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+
+        const name = title == undefined ? "" : title;
+        const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+        loading();
+        const response = await listData(
+          "1",
+          name,
+          filter,
+          12,
+          pages,
+          sortByOpt,
+          format,
+          "",
+          filterGroup,
+          startDateString,
+          endDateString,
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
+        );
+        close();
+        // setGetTotalPage(response.data?.data?.totalPages);
+        // setContentImage(response.data?.data?.content);
+        // setTotalContent(response.data?.data?.totalElements);
+        const data = response.data?.data;
+        const contentData = data?.content;
+        setImageData(contentData);
+        setTotalData(data?.totalElements);
+        setTotalPage(data?.totalPages);
+        setTotalContent(response.data?.data?.totalElements);
+      }
+    } else {
+      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+
+      const name = title == undefined ? "" : title;
+      const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+      loading();
+      const response = await listData(
+        "1",
+        name,
+        filter,
+        12,
+        pages,
+        sortByOpt,
+        format,
+        "",
+        "",
+        startDateString,
+        endDateString,
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
+      );
+      close();
+      // setGetTotalPage(response.data?.data?.totalPages);
+      // setContentImage(response.data?.data?.content);
+      // setTotalContent(response.data?.data?.totalElements);
+      const data = response.data?.data;
+      const contentData = data?.content;
+      setImageData(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      setTotalContent(response.data?.data?.totalElements);
+    }
+  }
+
+  async function getDataRegional() {
+    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+
+    const name = title == undefined ? "" : title;
+    const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+    loading();
+    const response = await listDataRegional(
+      "1",
+      name,
+      filter,
+      format,
+      "",
+      startDateString,
+      endDateString,
+      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
+      12,
+      pages,
+      sortByOpt
+    );
+    close();
+
+    setGetTotalPage(response.data?.data?.totalPages);
+    setContentImage(response.data?.data?.content);
+    setTotalContent(response.data?.data?.totalElements);
+  }
 
   const table = useReactTable({
     data: imageData,
@@ -108,6 +258,24 @@ const FilterPage = () => {
     },
   });
 
+  const handleDeleteDate = () => {
+    setDateRange([null, null]);
+    setStartDateString("");
+    setEndDateString("");
+    setHandleClose(false);
+  };
+
+  const handleSorting = (e: any) => {
+    console.log(e.target.value);
+    if (e.target.value == "terbaru") {
+      setSortByOpt("createdAt");
+    } else {
+      setSortByOpt("clickCount");
+    }
+
+    setChange(!change);
+  };
+
   // async function getCategories() {
   //   const category = await listCategory("1");
   //   const resCategory = category?.data?.data?.content;
@@ -128,16 +296,29 @@ const FilterPage = () => {
   //   }
   // }
 
+  // function getSelectedCategory() {
+  //   const filter = [];
+
+  //   if (category) {
+  //     const categoryArr = category.split(",");
+
+  //     for (const element of categoryArr) {
+  //       filter.push(Number(element));
+  //     }
+
+  //     setCategoryFilter();
+  //   }
+  // }
   const handleKeyUp = () => {
     clearTimeout(typingTimer);
     typingTimer = setTimeout(doneTyping, doneTypingInterval);
   };
 
   async function doneTyping() {
-    if (search == "" || search == undefined) {
-      router.push("");
+    if (searchTitle == "" || searchTitle == undefined) {
+      router.push("?title=");
     } else {
-      router.push(`?title=${search}`);
+      router.push(`?title=${searchTitle}`);
     }
   }
 
@@ -155,12 +336,12 @@ const FilterPage = () => {
           Foto {">"} <span className="font-bold">Semua Foto</span>
         </p>
         <p className="font-bold">|</p>
-        <p>Terdapat 324911 artikel berisi Foto yang dapat diunduh </p>
+        <p>{`Terdapat ${totalContent} artikel berisi Foto yang dapat diunduh`}</p>
       </div>
 
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+        <div className="lg:w-[40%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
           <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
             <Icon icon="stash:filter-light" fontSize={30} />
             Filter
@@ -171,21 +352,48 @@ const FilterPage = () => {
               <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pencarian
               </label>
-              <Input onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+              <Input
+                value={searchTitle}
+                onChange={(e) => setSearchTitle(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                type="text"
+                id="search"
+                placeholder="Cari judul..."
+                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              />
             </div>
 
             <div>
-              <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
-                Tahun & Bulan
-              </label>
-              <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label>
+              {/* <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" /> */}
+              <ReactDatePicker
+                selected={monthYearFilter}
+                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                onChange={(date) => setMonthYearFilter(date)}
+                dateFormat="MM | yyyy"
+                placeholderText="Pilih Tahun dan Bulan"
+                showMonthYearPicker
+              />
             </div>
 
             <div>
-              <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
-                Tanggal
-              </label>
-              <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
+              {/* <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" /> */}
+              <div className="flex flex-row justify justify-between gap-2">
+                <ReactDatePicker
+                  selectsRange
+                  className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                  startDate={dateRange[0]}
+                  endDate={dateRange[1]}
+                  onChange={(update) => {
+                    setDateRange(update);
+                  }}
+                  placeholderText="Pilih Tanggal"
+                  onCalendarClose={() => setCalenderState(!calenderState)}
+                />
+                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+              </div>
             </div>
 
             <div>
@@ -231,9 +439,9 @@ const FilterPage = () => {
           <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
-              <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
                 <option value="terbaru">Terbaru</option>
-                <option value="terlama">Terlama</option>
+                <option value="terpopuler">Terpopuler</option>
               </select>
             </div>
 
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index 3e173a11..b51174a2 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -163,7 +163,7 @@ const FilterPage = () => {
               <div className="border-t border-black dark:border-white my-4"></div>
               {/* Garis */}
               <div>
-                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Video</h3>
                 <ul className="mt-2 space-y-2">
                   {formatPicture.map((format) => (
                     <li key={format?.id}>
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index c8b71d5f..280c3f4c 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -200,7 +200,7 @@ const NewContent = (props: { type: string }) => {
           </div>
         </div>
         <div className="flex items-center flex-row justify-center">
-          <Link href="/video/filter" className="border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
+          <Link href={`/${selectedTab}/filter?sortBy=${props.type}`} className="border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
             LIHAT SEMUA
           </Link>
         </div>
diff --git a/package-lock.json b/package-lock.json
index 2eab3fbf..f7e4bcf6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
         "@types/cleave.js": "^1.4.12",
         "@types/crypto-js": "^4.2.2",
         "@types/js-cookie": "^3.0.6",
+        "@types/next": "^9.0.0",
         "@types/qs": "^6.9.17",
         "@types/react-google-recaptcha": "^2.1.9",
         "@types/react-html-parser": "^2.0.6",
@@ -88,7 +89,7 @@
         "leaflet": "^1.9.4",
         "lucide-react": "^0.390.0",
         "moment": "^2.30.1",
-        "next": "14.2.3",
+        "next": "^14.2.3",
         "next-intl": "^3.19.1",
         "next-themes": "^0.3.0",
         "nextra": "^2.13.4",
@@ -132,14 +133,18 @@
         "zod": "^3.23.8"
       },
       "devDependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
         "@faker-js/faker": "^8.4.1",
         "@next/bundle-analyzer": "^15.0.3",
+        "@types/d3-shape": "^3.1.6",
+        "@types/geojson": "^7946.0.15",
         "@types/jquery": "^3.5.32",
         "@types/leaflet": "^1.9.12",
         "@types/node": "^20",
         "@types/react": "^18.3.13",
         "@types/react-geocode": "^0.2.4",
         "@types/rtl-detect": "^1.0.3",
+        "d3-shape": "^3.2.0",
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
         "postcss": "^8",
@@ -151,7 +156,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -837,7 +841,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -854,7 +857,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -866,7 +868,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -1063,6 +1064,126 @@
         "glob": "10.3.10"
       }
     },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
+      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
+      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
+      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
+      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
+      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
+      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
+      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
+      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@next/swc-win32-x64-msvc": {
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
@@ -1082,7 +1203,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -1095,7 +1215,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1104,7 +1223,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -1126,7 +1244,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
@@ -2995,6 +3112,15 @@
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
+    "node_modules/@types/next": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@types/next/-/next-9.0.0.tgz",
+      "integrity": "sha512-gnBXM8rP1mnCgT1uE2z8SnpFTKRWReJlhbZLZkOLq/CH1ifvTNwjIVtXvsywTy1dwVklf+y/MB0Eh6FOa94yrg==",
+      "deprecated": "This is a stub types definition. next provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "next": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.17.9",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.9.tgz",
@@ -3316,7 +3442,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3330,7 +3455,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -3344,14 +3468,12 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -3396,8 +3518,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -3688,14 +3809,12 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -3717,7 +3836,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -3777,7 +3895,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -3877,7 +3994,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -3901,7 +4017,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -4086,7 +4201,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -4110,7 +4224,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -4786,8 +4899,7 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/diff": {
       "version": "5.2.0",
@@ -4812,8 +4924,7 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -4914,8 +5025,7 @@
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/elkjs": {
       "version": "0.9.3",
@@ -4963,8 +5073,7 @@
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
     "node_modules/enhanced-resolve": {
       "version": "5.17.1",
@@ -5804,7 +5913,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -5820,7 +5928,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -5844,7 +5951,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -5888,7 +5994,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -5979,7 +6084,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
       "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
-      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -6190,7 +6294,6 @@
       "version": "10.3.10",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
       "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-      "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.5",
@@ -6212,7 +6315,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -6224,7 +6326,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -6233,7 +6334,6 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -7201,7 +7301,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -7333,7 +7432,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7357,7 +7455,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7381,7 +7478,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -7426,7 +7522,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -7675,7 +7770,6 @@
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
       "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
-      "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -7693,7 +7787,6 @@
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -7949,7 +8042,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
       "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -8058,8 +8150,7 @@
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
     },
     "node_modules/lucide-react": {
       "version": "0.390.0",
@@ -8773,7 +8864,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -9561,7 +9651,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -9622,7 +9711,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -9671,7 +9759,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -9948,7 +10035,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9995,7 +10081,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -10294,7 +10379,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -10308,7 +10392,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -10347,7 +10430,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -10359,7 +10441,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10368,7 +10449,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -10386,7 +10466,6 @@
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
       "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10414,7 +10493,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -10431,7 +10509,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -10450,7 +10527,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10485,7 +10561,6 @@
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz",
       "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==",
-      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -10497,7 +10572,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10522,7 +10596,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -10534,8 +10607,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/preact": {
       "version": "10.12.1",
@@ -10629,7 +10701,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -11180,7 +11251,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -11189,7 +11259,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -11612,7 +11681,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -11685,7 +11753,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -11877,7 +11944,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -11889,7 +11955,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -11926,7 +11991,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -12056,7 +12120,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -12074,7 +12137,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -12087,14 +12149,12 @@
     "node_modules/string-width-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/string-width/node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -12106,7 +12166,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -12242,7 +12301,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -12255,7 +12313,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -12360,7 +12417,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -12382,7 +12438,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -12556,7 +12611,6 @@
       "version": "3.4.16",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",
       "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -12616,7 +12670,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -12625,7 +12678,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -12738,7 +12790,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -12801,8 +12852,7 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -13280,8 +13330,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/uuid": {
       "version": "9.0.1",
@@ -13520,7 +13569,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -13627,7 +13675,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -13645,7 +13692,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -13661,14 +13707,12 @@
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -13682,7 +13726,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -13694,7 +13737,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -13706,7 +13748,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -13849,126 +13890,6 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
-      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
-      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
-      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
-      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
-      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
-      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
-      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
-      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index 5d5d2610..dcd2327e 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@types/cleave.js": "^1.4.12",
     "@types/crypto-js": "^4.2.2",
     "@types/js-cookie": "^3.0.6",
+    "@types/next": "^9.0.0",
     "@types/qs": "^6.9.17",
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-html-parser": "^2.0.6",
@@ -89,7 +90,7 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.390.0",
     "moment": "^2.30.1",
-    "next": "14.2.3",
+    "next": "^14.2.3",
     "next-intl": "^3.19.1",
     "next-themes": "^0.3.0",
     "nextra": "^2.13.4",
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index f1baf249..21c14d65 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -10,7 +10,7 @@ export async function getCategoryData() {
 
 export async function getListContent(props: any) {
   return await httpGetInterceptor(
-    `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
+    `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${props.title}&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
   );
 }
 
@@ -45,3 +45,15 @@ export async function listCategory(type = "") {
 export async function publicDetailBlog(slug: any) {
   return await httpGetInterceptor(`blog/public/read/${slug}`);
 }
+
+export async function listData(type: string, search: string, category: string, size = 10, page = 0, sortBy = "createdAt", format = "", tag = "", group = "", startDate = "", endDate = "", month = "", year = "") {
+  return await httpGetInterceptor(
+    `media/public/list?enablePage=1&sort=desc&sortBy=${sortBy}&size=${size}&page=${page}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&group=${group}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}`
+  );
+}
+
+export async function listDataRegional(type: string, search: string, category: string, format = "", tag = "", startDate = "", endDate = "", month = "", year = "", size = 10, page = 0, sortBy = "createdAt") {
+  return await httpGetInterceptor(
+    `media/public/regional-list?enablePage=1&size=${size}&page=${page}&sort=desc&sortBy=${sortBy}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}`
+  );
+}
diff --git a/utils/globals.tsx b/utils/globals.tsx
index 452b64b8..4a62535e 100644
--- a/utils/globals.tsx
+++ b/utils/globals.tsx
@@ -63,3 +63,9 @@ export function getOnlyDate(date: Date) {
 
   return `${year}-${month}-${day}`;
 }
+
+export function getOnlyMonthAndYear(d: Date) {
+  const pad = (n: any, s = 2) => `${new Array(s).fill(0)}${n}`.slice(-s);
+  return `${pad(d.getMonth() + 1)}/${pad(d.getFullYear(), 4)}`;
+}
+

From b748d94c415535ea74dde8892db15bef0a12370b Mon Sep 17 00:00:00 2001
From: sabdayagra <msabdayagra@gmail.com>
Date: Sat, 28 Dec 2024 18:42:10 +0700
Subject: [PATCH 3/3] add filter section

---
 .../(public)/document/filter/page.tsx         | 465 +++++++++++++---
 app/[locale]/(public)/image/filter/page.tsx   | 209 ++++---
 app/[locale]/(public)/video/filter/page.tsx   | 513 ++++++++++++++----
 components/landing-page/new-content.tsx       |   5 +-
 service/landing/landing.ts                    |   8 +-
 5 files changed, 926 insertions(+), 274 deletions(-)

diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx
index 8cd92fad..b39e4df4 100644
--- a/app/[locale]/(public)/document/filter/page.tsx
+++ b/app/[locale]/(public)/document/filter/page.tsx
@@ -1,15 +1,19 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
+import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { getListContent } from "@/service/landing/landing";
-import { formatDateToIndonesian } from "@/utils/globals";
-import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { getListContent, getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
+import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
 import { Reveal } from "@/components/landing-page/Reveal";
-import { Link } from "@/i18n/routing";
+import { Link, useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import ReactDatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { close, loading } from "@/config/swal";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -19,35 +23,13 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const categories = [
-  { id: 1, title: "HUT HUMAS KE - 73" },
-  { id: 2, title: "OPERASI ZEBRA 2024" },
-  { id: 3, title: "PON XXI" },
-  { id: 4, title: "OPS LILIN NATARU 2024" },
-  { id: 5, title: "HUT HUMAS KE - 72" },
-  { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" },
-  { id: 6, title: "OPS KETUPAT 2024" },
-  { id: 6, title: "OPS PATUH 2024" },
-  { id: 6, title: "HARI JUANG POLRI" },
-  { id: 6, title: "HUT RI KE-79" },
-  { id: 6, title: "HARI BHAYANGKARA KE-78" },
-];
-
-const formatAudio = [
-  { id: 1, title: "DOC" },
-  { id: 2, title: "DOCX" },
-  { id: 3, title: "PDF" },
-  { id: 4, title: "PPT" },
-  { id: 5, title: "PPTX" },
-];
-
-const DocumentPage = () => {
+const FilterPage = () => {
   const router = useRouter();
-  const pathname = usePathname();
+  const asPath = usePathname();
   const params = useParams();
   const searchParams = useSearchParams();
   const locale = params?.locale;
-  const [imageData, setImageData] = useState<any>();
+  const [documentData, setDocumentData] = useState<any>();
   const [totalData, setTotalData] = React.useState<number>(1);
   const [totalPage, setTotalPage] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -56,9 +38,36 @@ const DocumentPage = () => {
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
-    pageSize: 6,
+    pageSize: 10,
   });
   const [page, setPage] = useState(1);
+  const [totalContent, setTotalContent] = useState();
+  const [change, setChange] = useState(false);
+  const sortBy = searchParams?.get("sortBy");
+  const title = searchParams?.get("title");
+  const categorie = searchParams?.get("category");
+  const group = searchParams?.get("group");
+  const [, setGetTotalPage] = useState();
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+  const [contentDocument, setContentDocument] = useState([]);
+  const [categoryFilter, setCategoryFilter] = useState<any>([]);
+  const [monthYearFilter, setMonthYearFilter] = useState<any>();
+  const [searchTitle, setSearchTitle] = useState<string>("");
+  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const isRegional = asPath?.includes("regional");
+  const isSatker = asPath?.includes("satker");
+  const [formatFilter, setFormatFilter] = useState<any>([]);
+  const pages = page ? page - 1 : 0;
+  const [startDateString, setStartDateString] = useState<any>();
+  const [endDateString, setEndDateString] = useState<any>();
+  const [dateRange, setDateRange] = useState<any>([null, null]);
+  const [calenderState, setCalenderState] = useState(false);
+  const [handleClose, setHandleClose] = useState(false);
+  const [categories, setCategories] = useState([]);
+  const [userLevels, setUserLevels] = useState([]);
+
+  // const [startDate, endDate] = dateRange;
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
@@ -67,8 +76,191 @@ const DocumentPage = () => {
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+      // getSelectedCategory();
+      if (isSatker) {
+        getUserLevels();
+      }
+    }
+
+    initState();
+  }, []);
+
+  useEffect(() => {
+    if (categorie) {
+      setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+    }
+  }, [categorie]);
+
+  // useEffect(() => {
+  //   fetchData();
+  // }, [page, sortBy, sortByOpt, title]);
+
+  useEffect(() => {
+    async function initState() {
+      if (isRegional) {
+        getDataRegional();
+      } else {
+        getDataAll();
+      }
+    }
+    console.log(monthYearFilter, "monthFilter");
+    initState();
+  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+
+  async function getCategories() {
+    const category = await listCategory("3");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  useEffect(() => {
+    function initState() {
+      if (dateRange[0] != null && dateRange[1] != null) {
+        setStartDateString(getOnlyDate(dateRange[0]));
+        setEndDateString(getOnlyDate(dateRange[1]));
+        setHandleClose(true);
+        console.log("date range", dateRange, getOnlyDate(dateRange[0]));
+      }
+    }
+    initState();
+  }, [calenderState]);
+
+  async function getDataAll() {
+    if (asPath?.includes("/polda/") == true) {
+      if (asPath?.split("/")[2] !== "[polda_name]") {
+        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+
+        const name = title == undefined ? "" : title;
+        const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+        loading();
+        const response = await listData(
+          "3",
+          name,
+          filter,
+          12,
+          pages,
+          sortByOpt,
+          format,
+          "",
+          filterGroup,
+          startDateString,
+          endDateString,
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
+        );
+        close();
+        // setGetTotalPage(response.data?.data?.totalPages);
+        // setContentImage(response.data?.data?.content);
+        // setTotalContent(response.data?.data?.totalElements);
+        const data = response.data?.data;
+        const contentData = data?.content;
+        setDocumentData(contentData);
+        setTotalData(data?.totalElements);
+        setTotalPage(data?.totalPages);
+        setTotalContent(response.data?.data?.totalElements);
+      }
+    } else {
+      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+
+      const name = title == undefined ? "" : title;
+      const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+      loading();
+      const response = await listData(
+        "3",
+        name,
+        filter,
+        12,
+        pages,
+        sortByOpt,
+        format,
+        "",
+        "",
+        startDateString,
+        endDateString,
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
+      );
+      close();
+      // setGetTotalPage(response.data?.data?.totalPages);
+      // setContentImage(response.data?.data?.content);
+      // setTotalContent(response.data?.data?.totalElements);
+      const data = response.data?.data;
+      const contentData = data?.content;
+      setDocumentData(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      setTotalContent(response.data?.data?.totalElements);
+    }
+  }
+
+  const handleCategoryFilter = (e: boolean, id: string) => {
+    let filter = [...categoryFilter];
+
+    if (e) {
+      filter = [...categoryFilter, String(id)];
+    } else {
+      filter.splice(categoryFilter.indexOf(id), 1);
+    }
+    console.log("checkbox filter", filter);
+    setCategoryFilter(filter);
+    router.push(`?category=${filter.join("&")}`);
+  };
+
+  const handleFormatFilter = (e: boolean, id: string) => {
+    let filter = [...formatFilter];
+
+    if (e) {
+      filter = [...formatFilter, id];
+    } else {
+      filter.splice(formatFilter.indexOf(id), 1);
+    }
+    console.log("Format filter", filter);
+    setFormatFilter(filter);
+  };
+
+  const cleanCheckbox = () => {
+    setCategoryFilter([]);
+    setFormatFilter([]);
+    router.push(`?category=&title=`);
+    setDateRange([null, null]);
+    setMonthYearFilter(null);
+    setChange(!change);
+  };
+
+  async function getDataRegional() {
+    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+
+    const name = title == undefined ? "" : title;
+    const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+    loading();
+    const response = await listDataRegional(
+      "3",
+      name,
+      filter,
+      format,
+      "",
+      startDateString,
+      endDateString,
+      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
+      12,
+      pages,
+      sortByOpt
+    );
+    close();
+
+    setGetTotalPage(response.data?.data?.totalPages);
+    setContentDocument(response.data?.data?.content);
+    setTotalContent(response.data?.data?.totalElements);
+  }
+
   const table = useReactTable({
-    data: imageData,
+    data: documentData,
     columns: columns,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
@@ -88,10 +280,9 @@ const DocumentPage = () => {
     },
   });
 
-  const [documentData, setDocumentData] = useState<any>();
   useEffect(() => {
     initFetch();
-  }, []);
+  }, [page]);
   const initFetch = async () => {
     const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3" });
     console.log(response);
@@ -102,81 +293,199 @@ const DocumentPage = () => {
     setTotalData(data?.totalElements);
     setTotalPage(data?.totalPages);
   };
+
+  function getSelectedCategory() {
+    const filter = [];
+
+    if (categorie) {
+      const categoryArr = categorie.split(",");
+
+      for (const element of categoryArr) {
+        filter.push(Number(element));
+      }
+
+      setCategoryFilter(filter);
+    }
+  }
+
+  const handleDeleteDate = () => {
+    setDateRange([null, null]);
+    setStartDateString("");
+    setEndDateString("");
+    setHandleClose(false);
+  };
+
+  const handleSorting = (e: any) => {
+    console.log(e.target.value);
+    if (e.target.value == "terbaru") {
+      setSortByOpt("createdAt");
+    } else {
+      setSortByOpt("clickCount");
+    }
+
+    setChange(!change);
+  };
+
+  async function getUserLevels() {
+    const res = await getUserLevelListByParent(761);
+    const userLevelList = res?.data?.data;
+
+    if (userLevelList !== null) {
+      let optionArr: any = [];
+
+      userLevelList?.map((option: any) => {
+        let optionData = {
+          id: option.id,
+          label: option.name,
+          value: option.id,
+        };
+
+        optionArr.push(optionData);
+      });
+
+      setUserLevels(optionArr);
+    }
+  }
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  async function doneTyping() {
+    if (searchTitle == "" || searchTitle == undefined) {
+      router.push("?title=");
+    } else {
+      router.push(`?title=${searchTitle}`);
+    }
+  }
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
   return (
     <div className="flex flex-col">
       {/* Header */}
+
       <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Teks {">"} <span className="font-bold">Semua Teks</span>
         </p>
         <p className="font-bold">|</p>
-        <p>Terdapat 32499 artikel berisi Teks yang dapat diunduh </p>
+        <p>{`Terdapat ${totalContent} artikel berisi Teks yang dapat diunduh`}</p>
       </div>
+
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        {/* Sidebar Kiri */}
-        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
-          <h2 className="text-xl font-semibold mb-4 flex items-center gap-1">
+        <div className="lg:w-[40%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+          <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
             <Icon icon="stash:filter-light" fontSize={30} />
             Filter
           </h2>
-          <div className="border-t border-black dark:border-white my-4"></div>
+          <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
-            {/* Pencarian */}
             <div>
               <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pencarian
               </label>
-              <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+              <Input
+                value={searchTitle}
+                onChange={(e) => setSearchTitle(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                type="text"
+                id="search"
+                placeholder="Cari judul..."
+                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              />
             </div>
-            {/* Tahun & Bulan */}
+
             <div>
-              <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
-                Pilih Tahun & Bulan
-              </label>
-              <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label>
+              <ReactDatePicker
+                selected={monthYearFilter}
+                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                onChange={(date) => setMonthYearFilter(date)}
+                dateFormat="MM | yyyy"
+                placeholderText="Pilih Tahun dan Bulan"
+                showMonthYearPicker
+              />
             </div>
-            {/* Tanggal */}
+
             <div>
-              <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
-                Pilih Tanggal
-              </label>
-              <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
+              <div className="flex flex-row justify justify-between gap-2">
+                <ReactDatePicker
+                  selectsRange
+                  className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                  startDate={dateRange[0]}
+                  endDate={dateRange[1]}
+                  onChange={(update) => {
+                    setDateRange(update);
+                  }}
+                  placeholderText="Pilih Tanggal"
+                  onCalendarClose={() => setCalenderState(!calenderState)}
+                />
+                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+              </div>
             </div>
-            {/* Kategori */}
+
             <div>
               <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
               <ul className="mt-2 space-y-2">
-                {categories.map((category) => (
+                {categories.map((category: any) => (
                   <li key={category?.id}>
-                    <label className="inline-flex items-center">
-                      <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
+                    <label className="inline-flex items-center" htmlFor={`${category.id}`}>
+                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
             {/* Garis */}
-            <div className="border-t border-black dark:border-white my-4"></div>
+            <div className="border-t border-black my-4 dark:border-white"></div>
             {/* Garis */}
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Teks</h3>
               <ul className="mt-2 space-y-2">
-                {formatAudio.map((format) => (
-                  <li key={format?.id}>
-                    <label className="inline-flex items-center">
-                      <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
-                    </label>
-                  </li>
-                ))}
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="doc" value="doc" checked={formatFilter.includes("doc")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "doc")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">DOC</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="docx" value="docx" checked={formatFilter.includes("docx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "docx")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">DOCX</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="pdf" value="pdf" checked={formatFilter.includes("pdf")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pdf")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">PDF</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="ppt" value="ppt" checked={formatFilter.includes("ppt")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "ppt")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">PPT</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="pptx" value="pptx" checked={formatFilter.includes("pptx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pptx")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">PPTX</span>
+                  </label>
+                </li>
               </ul>
             </div>
             <div className="border-t border-black dark:border-white my-4"></div>
             <div className="text-center">
-              <a href="#" className="text-[#bb3523]">
+              <a onClick={cleanCheckbox} className="text-[#bb3523] cursor-pointer">
                 <b>Reset Filter</b>
               </a>
             </div>
@@ -184,20 +493,16 @@ const DocumentPage = () => {
         </div>
 
         {/* Konten Kanan */}
-
-        <div className="flex-1">
-          <Reveal>
+        <Reveal>
+          <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
-              <h2 className="text-lg font-semibold tetx-red-300">Urutkan berdasarkan</h2>
-              <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
+              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
                 <option value="terbaru">Terbaru</option>
-                <option value="terlama">Terpopuler</option>
+                <option value="terpopuler">Terpopuler</option>
               </select>
             </div>
-          </Reveal>
 
-          {/* Card */}
-          <Reveal>
             <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
               {documentData?.map((document: any) => (
                 <Link href={`/document/detail/${document?.slug}`} key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
@@ -226,11 +531,11 @@ const DocumentPage = () => {
               ))}
             </div>
             <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
-          </Reveal>
-        </div>
+          </div>
+        </Reveal>
       </div>
     </div>
   );
 };
 
-export default DocumentPage;
+export default FilterPage;
diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index 77f95ffb..eca5cb0d 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -5,7 +5,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getListContent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
+import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
 import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
 import { Reveal } from "@/components/landing-page/Reveal";
@@ -15,13 +15,6 @@ import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { close, loading } from "@/config/swal";
 
-interface FilterData {
-  searchTitle: string;
-  selectedYearMonth: string;
-  selectedDate: string;
-  selectedCategories: string[];
-}
-
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -30,25 +23,6 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const categories = [
-  { id: 1, title: "HUT HUMAS KE - 73" },
-  { id: 2, title: "OPERASI ZEBRA 2024" },
-  { id: 3, title: "PON XXI" },
-  { id: 4, title: "OPS LILIN NATARU 2024" },
-  { id: 5, title: "HUT HUMAS KE - 72" },
-  { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" },
-  { id: 7, title: "OPS KETUPAT 2024" },
-  { id: 8, title: "OPS PATUH 2024" },
-  { id: 9, title: "HARI JUANG POLRI" },
-  { id: 10, title: "HUT RI KE-79" },
-  { id: 11, title: "HARI BHAYANGKARA KE-78" },
-];
-const formatPicture = [
-  { id: 1, title: "PNG" },
-  { id: 2, title: "JPEG" },
-  { id: 3, title: "JPG" },
-];
-
 const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
@@ -71,26 +45,28 @@ const FilterPage = () => {
   const [change, setChange] = useState(false);
   const sortBy = searchParams?.get("sortBy");
   const title = searchParams?.get("title");
-  const category = searchParams?.get("category");
+  const categorie = searchParams?.get("category");
   const group = searchParams?.get("group");
   const [contentImage, setContentImage] = useState([]);
   const [, setGetTotalPage] = useState();
   let typingTimer: any;
   const doneTypingInterval = 1500;
   const [search, setSearch] = useState();
-  const [categoryFilter, setCategoryFilter] = useState([]);
+  const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
   const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
-  const [formatFilter, setFormatFilter] = useState([]);
+  const [formatFilter, setFormatFilter] = useState<any>([]);
   const pages = page ? page - 1 : 0;
   const [startDateString, setStartDateString] = useState<any>();
   const [endDateString, setEndDateString] = useState<any>();
   const [dateRange, setDateRange] = useState<any>([null, null]);
   const [calenderState, setCalenderState] = useState(false);
   const [handleClose, setHandleClose] = useState(false);
+  const [categories, setCategories] = useState([]);
+  const [userLevels, setUserLevels] = useState([]);
 
   // const [startDate, endDate] = dateRange;
 
@@ -101,6 +77,25 @@ const FilterPage = () => {
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+      // getSelectedCategory();
+      if (isSatker) {
+        getUserLevels();
+      }
+    }
+
+    initState();
+  }, []);
+
+  useEffect(() => {
+    if (categorie) {
+      setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+    }
+  }, [categorie]);
+
   // useEffect(() => {
   //   fetchData();
   // }, [page, sortBy, sortByOpt, title]);
@@ -115,7 +110,13 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString]);
+  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+
+  async function getCategories() {
+    const category = await listCategory("1");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
 
   useEffect(() => {
     function initState() {
@@ -129,22 +130,10 @@ const FilterPage = () => {
     initState();
   }, [calenderState]);
 
-  // const fetchData = async () => {
-  //   const response = await getListContent({ page: page - 1, size: 6, sortBy: sortByOpt, contentTypeId: "1", title: title ? title : "" });
-  //   console.log(response);
-
-  //   const data = response.data?.data;
-  //   const contentData = data?.content;
-  //   setImageData(contentData);
-  //   setTotalData(data?.totalElements);
-  //   setTotalPage(data?.totalPages);
-  //   setTotalContent(response.data?.data?.totalElements);
-  // };
-
   async function getDataAll() {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
-        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -177,7 +166,7 @@ const FilterPage = () => {
         setTotalContent(response.data?.data?.totalElements);
       }
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -210,8 +199,42 @@ const FilterPage = () => {
     }
   }
 
+  const handleCategoryFilter = (e: boolean, id: string) => {
+    let filter = [...categoryFilter];
+
+    if (e) {
+      filter = [...categoryFilter, String(id)];
+    } else {
+      filter.splice(categoryFilter.indexOf(id), 1);
+    }
+    console.log("checkbox filter", filter);
+    setCategoryFilter(filter);
+    router.push(`?category=${filter.join("&")}`);
+  };
+
+  const handleFormatFilter = (e: boolean, id: string) => {
+    let filter = [...formatFilter];
+
+    if (e) {
+      filter = [...formatFilter, id];
+    } else {
+      filter.splice(formatFilter.indexOf(id), 1);
+    }
+    console.log("Format filter", filter);
+    setFormatFilter(filter);
+  };
+
+  const cleanCheckbox = () => {
+    setCategoryFilter([]);
+    setFormatFilter([]);
+    router.push(`?category=&title=`);
+    setDateRange([null, null]);
+    setMonthYearFilter(null);
+    setChange(!change);
+  };
+
   async function getDataRegional() {
-    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -258,6 +281,20 @@ const FilterPage = () => {
     },
   });
 
+  function getSelectedCategory() {
+    const filter = [];
+
+    if (categorie) {
+      const categoryArr = categorie.split(",");
+
+      for (const element of categoryArr) {
+        filter.push(Number(element));
+      }
+
+      setCategoryFilter(filter);
+    }
+  }
+
   const handleDeleteDate = () => {
     setDateRange([null, null]);
     setStartDateString("");
@@ -276,39 +313,27 @@ const FilterPage = () => {
     setChange(!change);
   };
 
-  // async function getCategories() {
-  //   const category = await listCategory("1");
-  //   const resCategory = category?.data?.data?.content;
-  //   setCategories(resCategory);
-  // }
+  async function getUserLevels() {
+    const res = await getUserLevelListByParent(761);
+    const userLevelList = res?.data?.data;
 
-  // function getSelectedCategory() {
-  //   const filter = [];
+    if (userLevelList !== null) {
+      let optionArr: any = [];
 
-  //   if (category) {
-  //     const categoryArr = category.split(",");
+      userLevelList?.map((option: any) => {
+        let optionData = {
+          id: option.id,
+          label: option.name,
+          value: option.id,
+        };
 
-  //     for (const element of categoryArr) {
-  //       filter.push(Number(element));
-  //     }
+        optionArr.push(optionData);
+      });
 
-  //     setCategoryFilter(filter);
-  //   }
-  // }
+      setUserLevels(optionArr);
+    }
+  }
 
-  // function getSelectedCategory() {
-  //   const filter = [];
-
-  //   if (category) {
-  //     const categoryArr = category.split(",");
-
-  //     for (const element of categoryArr) {
-  //       filter.push(Number(element));
-  //     }
-
-  //     setCategoryFilter();
-  //   }
-  // }
   const handleKeyUp = () => {
     clearTimeout(typingTimer);
     typingTimer = setTimeout(doneTyping, doneTypingInterval);
@@ -366,7 +391,6 @@ const FilterPage = () => {
 
             <div>
               <label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label>
-              {/* <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" /> */}
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -379,7 +403,6 @@ const FilterPage = () => {
 
             <div>
               <label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
-              {/* <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" /> */}
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -401,9 +424,9 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
-                    <label className="inline-flex items-center">
-                      <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700 dark:text-white">{category?.title}</span>
+                    <label className="inline-flex items-center" htmlFor={`${category.id}`}>
+                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
                 ))}
@@ -415,19 +438,29 @@ const FilterPage = () => {
             <div>
               <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
               <ul className="mt-2 space-y-2">
-                {formatPicture.map((format) => (
-                  <li key={format?.id}>
-                    <label className="inline-flex items-center">
-                      <Checkbox id="terms" />
-                      <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
-                    </label>
-                  </li>
-                ))}
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="png" value="png" checked={formatFilter.includes("png")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "png")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">PNG</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="jpeg" value="jpeg" checked={formatFilter.includes("jpeg")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpeg")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">JPEG</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="jpg" value="jpg" checked={formatFilter.includes("jpg")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpg")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">JPG</span>
+                  </label>
+                </li>
               </ul>
             </div>
             <div className="border-t border-black dark:border-white my-4"></div>
             <div className="text-center">
-              <a href="#" className="text-[#bb3523]">
+              <a onClick={cleanCheckbox} className="text-[#bb3523] cursor-pointer">
                 <b>Reset Filter</b>
               </a>
             </div>
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index b51174a2..de017d24 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -3,13 +3,17 @@ import React, { useEffect, useState } from "react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { getListContent } from "@/service/landing/landing";
-import { formatDateToIndonesian } from "@/utils/globals";
-import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { getListContent, getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
+import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
 import { Reveal } from "@/components/landing-page/Reveal";
-import { Link } from "@/i18n/routing";
+import { Link, useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import ReactDatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { close, loading } from "@/config/swal";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -19,34 +23,13 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const categories = [
-  { id: 1, title: "HUT HUMAS KE - 73" },
-  { id: 2, title: "OPERASI ZEBRA 2024" },
-  { id: 3, title: "PON XXI" },
-  { id: 4, title: "OPS LILIN NATARU 2024" },
-  { id: 5, title: "HUT HUMAS KE - 72" },
-  { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" },
-  { id: 6, title: "OPS KETUPAT 2024" },
-  { id: 6, title: "OPS PATUH 2024" },
-  { id: 6, title: "HARI JUANG POLRI" },
-  { id: 6, title: "HUT RI KE-79" },
-  { id: 6, title: "HARI BHAYANGKARA KE-78" },
-];
-const formatPicture = [
-  { id: 1, title: "MK4" },
-  { id: 2, title: "MOV" },
-  { id: 3, title: "MP4" },
-  { id: 3, title: "AVI" },
-  { id: 3, title: "WMV" },
-];
-
 const FilterPage = () => {
   const router = useRouter();
-  const pathname = usePathname();
+  const asPath = usePathname();
   const params = useParams();
   const searchParams = useSearchParams();
   const locale = params?.locale;
-  const [imageData, setImageData] = useState<any>();
+  const [videoData, setVideoData] = useState<any>();
   const [totalData, setTotalData] = React.useState<number>(1);
   const [totalPage, setTotalPage] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -55,9 +38,36 @@ const FilterPage = () => {
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
-    pageSize: 6,
+    pageSize: 10,
   });
   const [page, setPage] = useState(1);
+  const [totalContent, setTotalContent] = useState();
+  const [change, setChange] = useState(false);
+  const sortBy = searchParams?.get("sortBy");
+  const title = searchParams?.get("title");
+  const categorie = searchParams?.get("category");
+  const group = searchParams?.get("group");
+  const [, setGetTotalPage] = useState();
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+  const [contentVideo, setContentVideo] = useState([]);
+  const [categoryFilter, setCategoryFilter] = useState<any>([]);
+  const [monthYearFilter, setMonthYearFilter] = useState<any>();
+  const [searchTitle, setSearchTitle] = useState<string>("");
+  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const isRegional = asPath?.includes("regional");
+  const isSatker = asPath?.includes("satker");
+  const [formatFilter, setFormatFilter] = useState<any>([]);
+  const pages = page ? page - 1 : 0;
+  const [startDateString, setStartDateString] = useState<any>();
+  const [endDateString, setEndDateString] = useState<any>();
+  const [dateRange, setDateRange] = useState<any>([null, null]);
+  const [calenderState, setCalenderState] = useState(false);
+  const [handleClose, setHandleClose] = useState(false);
+  const [categories, setCategories] = useState([]);
+  const [userLevels, setUserLevels] = useState([]);
+
+  // const [startDate, endDate] = dateRange;
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
@@ -66,8 +76,191 @@ const FilterPage = () => {
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+      // getSelectedCategory();
+      if (isSatker) {
+        getUserLevels();
+      }
+    }
+
+    initState();
+  }, []);
+
+  useEffect(() => {
+    if (categorie) {
+      setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+    }
+  }, [categorie]);
+
+  // useEffect(() => {
+  //   fetchData();
+  // }, [page, sortBy, sortByOpt, title]);
+
+  useEffect(() => {
+    async function initState() {
+      if (isRegional) {
+        getDataRegional();
+      } else {
+        getDataAll();
+      }
+    }
+    console.log(monthYearFilter, "monthFilter");
+    initState();
+  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+
+  async function getCategories() {
+    const category = await listCategory("2");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  useEffect(() => {
+    function initState() {
+      if (dateRange[0] != null && dateRange[1] != null) {
+        setStartDateString(getOnlyDate(dateRange[0]));
+        setEndDateString(getOnlyDate(dateRange[1]));
+        setHandleClose(true);
+        console.log("date range", dateRange, getOnlyDate(dateRange[0]));
+      }
+    }
+    initState();
+  }, [calenderState]);
+
+  async function getDataAll() {
+    if (asPath?.includes("/polda/") == true) {
+      if (asPath?.split("/")[2] !== "[polda_name]") {
+        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+
+        const name = title == undefined ? "" : title;
+        const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+        loading();
+        const response = await listData(
+          "2",
+          name,
+          filter,
+          12,
+          pages,
+          sortByOpt,
+          format,
+          "",
+          filterGroup,
+          startDateString,
+          endDateString,
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
+        );
+        close();
+        // setGetTotalPage(response.data?.data?.totalPages);
+        // setContentImage(response.data?.data?.content);
+        // setTotalContent(response.data?.data?.totalElements);
+        const data = response.data?.data;
+        const contentData = data?.content;
+        setVideoData(contentData);
+        setTotalData(data?.totalElements);
+        setTotalPage(data?.totalPages);
+        setTotalContent(response.data?.data?.totalElements);
+      }
+    } else {
+      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+
+      const name = title == undefined ? "" : title;
+      const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+      loading();
+      const response = await listData(
+        "2",
+        name,
+        filter,
+        12,
+        pages,
+        sortByOpt,
+        format,
+        "",
+        "",
+        startDateString,
+        endDateString,
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
+      );
+      close();
+      // setGetTotalPage(response.data?.data?.totalPages);
+      // setContentImage(response.data?.data?.content);
+      // setTotalContent(response.data?.data?.totalElements);
+      const data = response.data?.data;
+      const contentData = data?.content;
+      setVideoData(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      setTotalContent(response.data?.data?.totalElements);
+    }
+  }
+
+  const handleCategoryFilter = (e: boolean, id: string) => {
+    let filter = [...categoryFilter];
+
+    if (e) {
+      filter = [...categoryFilter, String(id)];
+    } else {
+      filter.splice(categoryFilter.indexOf(id), 1);
+    }
+    console.log("checkbox filter", filter);
+    setCategoryFilter(filter);
+    router.push(`?category=${filter.join("&")}`);
+  };
+
+  const handleFormatFilter = (e: boolean, id: string) => {
+    let filter = [...formatFilter];
+
+    if (e) {
+      filter = [...formatFilter, id];
+    } else {
+      filter.splice(formatFilter.indexOf(id), 1);
+    }
+    console.log("Format filter", filter);
+    setFormatFilter(filter);
+  };
+
+  const cleanCheckbox = () => {
+    setCategoryFilter([]);
+    setFormatFilter([]);
+    router.push(`?category=&title=`);
+    setDateRange([null, null]);
+    setMonthYearFilter(null);
+    setChange(!change);
+  };
+
+  async function getDataRegional() {
+    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+
+    const name = title == undefined ? "" : title;
+    const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+    loading();
+    const response = await listDataRegional(
+      "2",
+      name,
+      filter,
+      format,
+      "",
+      startDateString,
+      endDateString,
+      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
+      12,
+      pages,
+      sortByOpt
+    );
+    close();
+
+    setGetTotalPage(response.data?.data?.totalPages);
+    setContentVideo(response.data?.data?.content);
+    setTotalContent(response.data?.data?.totalElements);
+  }
+
   const table = useReactTable({
-    data: imageData,
+    data: videoData,
     columns: columns,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
@@ -87,7 +280,6 @@ const FilterPage = () => {
     },
   });
 
-  const [videoData, setVideoData] = useState<any>();
   useEffect(() => {
     initFetch();
   }, [page]);
@@ -102,97 +294,212 @@ const FilterPage = () => {
     setTotalPage(data?.totalPages);
   };
 
-  
+  function getSelectedCategory() {
+    const filter = [];
+
+    if (categorie) {
+      const categoryArr = categorie.split(",");
+
+      for (const element of categoryArr) {
+        filter.push(Number(element));
+      }
+
+      setCategoryFilter(filter);
+    }
+  }
+
+  const handleDeleteDate = () => {
+    setDateRange([null, null]);
+    setStartDateString("");
+    setEndDateString("");
+    setHandleClose(false);
+  };
+
+  const handleSorting = (e: any) => {
+    console.log(e.target.value);
+    if (e.target.value == "terbaru") {
+      setSortByOpt("createdAt");
+    } else {
+      setSortByOpt("clickCount");
+    }
+
+    setChange(!change);
+  };
+
+  async function getUserLevels() {
+    const res = await getUserLevelListByParent(761);
+    const userLevelList = res?.data?.data;
+
+    if (userLevelList !== null) {
+      let optionArr: any = [];
+
+      userLevelList?.map((option: any) => {
+        let optionData = {
+          id: option.id,
+          label: option.name,
+          value: option.id,
+        };
+
+        optionArr.push(optionData);
+      });
+
+      setUserLevels(optionArr);
+    }
+  }
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  async function doneTyping() {
+    if (searchTitle == "" || searchTitle == undefined) {
+      router.push("?title=");
+    } else {
+      router.push(`?title=${searchTitle}`);
+    }
+  }
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
 
   return (
     <div className="flex flex-col">
       {/* Header */}
+
       <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Audio Visual {">"} <span className="font-bold">Semua Audio Visual</span>
         </p>
         <p className="font-bold">|</p>
-        <p>Terdapat 324911 artikel berisi Audio Visual yang dapat diunduh </p>
+        <p>{`Terdapat ${totalContent} artikel berisi Audio Visual yang dapat diunduh`}</p>
       </div>
+
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
-          <Reveal>
-            <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
-              <Icon icon="stash:filter-light" fontSize={30} />
-              Filter
-            </h2>
-            <div className="border-t border-black dark:border-white my-4"></div>
-            <div className="space-y-6">
-              <div>
-                <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
-                  Pencarian
-                </label>
-                <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
-              </div>
+        <div className="lg:w-[40%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+          <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
+            <Icon icon="stash:filter-light" fontSize={30} />
+            Filter
+          </h2>
+          <div className="border-t border-black my-4 dark:border-white"></div>
+          <div className="space-y-6">
+            <div>
+              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+                Pencarian
+              </label>
+              <Input
+                value={searchTitle}
+                onChange={(e) => setSearchTitle(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                type="text"
+                id="search"
+                placeholder="Cari judul..."
+                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              />
+            </div>
 
-              <div>
-                <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
-                  Tahun & Bulan
-                </label>
-                <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
-              </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label>
+              <ReactDatePicker
+                selected={monthYearFilter}
+                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                onChange={(date) => setMonthYearFilter(date)}
+                dateFormat="MM | yyyy"
+                placeholderText="Pilih Tahun dan Bulan"
+                showMonthYearPicker
+              />
+            </div>
 
-              <div>
-                <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
-                  Tanggal
-                </label>
-                <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
-              </div>
-
-              <div>
-                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
-                <ul className="mt-2 space-y-2">
-                  {categories.map((category) => (
-                    <li key={category?.id}>
-                      <label className="inline-flex items-center">
-                        <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
-                      </label>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              {/* Garis */}
-              <div className="border-t border-black dark:border-white my-4"></div>
-              {/* Garis */}
-              <div>
-                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Video</h3>
-                <ul className="mt-2 space-y-2">
-                  {formatPicture.map((format) => (
-                    <li key={format?.id}>
-                      <label className="inline-flex items-center">
-                        <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
-                      </label>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              <div className="border-t border-black dark:border-white my-4"></div>
-              <div className="text-center">
-                <a href="#" className="text-[#bb3523]">
-                  <b>Reset Filter</b>
-                </a>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
+              <div className="flex flex-row justify justify-between gap-2">
+                <ReactDatePicker
+                  selectsRange
+                  className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                  startDate={dateRange[0]}
+                  endDate={dateRange[1]}
+                  onChange={(update) => {
+                    setDateRange(update);
+                  }}
+                  placeholderText="Pilih Tanggal"
+                  onCalendarClose={() => setCalenderState(!calenderState)}
+                />
+                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
               </div>
             </div>
-          </Reveal>
+
+            <div>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
+              <ul className="mt-2 space-y-2">
+                {categories.map((category: any) => (
+                  <li key={category?.id}>
+                    <label className="inline-flex items-center" htmlFor={`${category.id}`}>
+                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
+                    </label>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            {/* Garis */}
+            <div className="border-t border-black my-4 dark:border-white"></div>
+            {/* Garis */}
+            <div>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
+              <ul className="mt-2 space-y-2">
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="mk4" value="mk4" checked={formatFilter.includes("mk4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mk4")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">MK4</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="mov" value="mov" checked={formatFilter.includes("mov")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mov")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">MOV</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="mp4" value="mp4" checked={formatFilter.includes("mp4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp4")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">MP4</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="avi" value="avi" checked={formatFilter.includes("avi")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "avi")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">AVI</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="wmv" value="wmv" checked={formatFilter.includes("wmv")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wmv")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">WMV</span>
+                  </label>
+                </li>
+              </ul>
+            </div>
+            <div className="border-t border-black dark:border-white my-4"></div>
+            <div className="text-center">
+              <a onClick={cleanCheckbox} className="text-[#bb3523] cursor-pointer">
+                <b>Reset Filter</b>
+              </a>
+            </div>
+          </div>
         </div>
 
         {/* Konten Kanan */}
-        <div className="flex-1">
-          <Reveal>
+        <Reveal>
+          <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
-              <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
                 <option value="terbaru">Terbaru</option>
-                <option value="terlama">Terlama</option>
+                <option value="terpopuler">Terpopuler</option>
               </select>
             </div>
 
@@ -201,7 +508,7 @@ const FilterPage = () => {
                 <Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
                   <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                     <Link href={`/video/detail/${video?.slug}`}>
-                      <img src={video?.thumbnailLink} className=" h-60 object-cover items-center w-full justify-center rounded-lg" />
+                      <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
                       <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                         {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
                         {video?.clickCount}{" "}
@@ -212,15 +519,15 @@ const FilterPage = () => {
                           />
                         </svg>{" "}
                       </div>
-                      <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate text-base hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
+                      <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
                     </Link>
                   </CardContent>
                 </Card>
               ))}
             </div>
             <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
-          </Reveal>
-        </div>
+          </div>
+        </Reveal>
       </div>
     </div>
   );
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index 280c3f4c..88cdbf64 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -1,10 +1,11 @@
+"use-client";
+
 import React, { useEffect, useState } from "react";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
-import { generateLocalizedPath } from "@/utils/globals";
+import { formatDateToIndonesian } from "@/utils/globals";
 import { getListContent } from "@/service/landing/landing";
 import { Link } from "@/i18n/routing";
 import { Reveal } from "./Reveal";
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index 21c14d65..9bb95d37 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -10,7 +10,9 @@ export async function getCategoryData() {
 
 export async function getListContent(props: any) {
   return await httpGetInterceptor(
-    `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${props.title}&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
+    `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${
+      props.title ? props.title : ""
+    }&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
   );
 }
 
@@ -57,3 +59,7 @@ export async function listDataRegional(type: string, search: string, category: s
     `media/public/regional-list?enablePage=1&size=${size}&page=${page}&sort=desc&sortBy=${sortBy}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}`
   );
 }
+
+export async function getUserLevelListByParent(id: any) {
+  return await httpGetInterceptor(`users/user-levels/list?userLevelId=${id}`);
+}