diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx
index 5b3f5fb1..6c57b48c 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx
@@ -54,7 +54,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -190,13 +190,9 @@ const FilterPage = (props: { group?: string; type: string }) => {
   }, []);
   const initFetch = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
@@ -205,7 +201,7 @@ const FilterPage = (props: { group?: string; type: string }) => {
     console.log("category", response);
     setCategories(response?.data?.data?.content);
   };
-
+  
   useEffect(() => {
     function initState() {
       if (dateRange[0] != null && dateRange[1] != null) {
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx
index 46b6b609..ed6c0837 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx
@@ -47,7 +47,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -181,13 +181,9 @@ const FilterPage = (props: { group?: string; type: string }) => {
   }, []);
   const initFetch = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
index 0e373d3b..6b20beef 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
@@ -48,7 +48,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -187,13 +187,9 @@ const FilterPage = (props: { group?: string; type: string }) => {
   }, []);
   const initFetch = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
@@ -202,7 +198,6 @@ const FilterPage = (props: { group?: string; type: string }) => {
     console.log("category", response);
     setCategories(response?.data?.data?.content);
   };
-
   useEffect(() => {
     function initState() {
       if (dateRange[0] != null && dateRange[1] != null) {
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx
index 1a6f1c8f..dbbdc146 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx
@@ -49,7 +49,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -181,13 +181,9 @@ const FilterPage = (props: { group?: string; type: string }) => {
   }, []);
   const initFetch = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
@@ -196,7 +192,6 @@ const FilterPage = (props: { group?: string; type: string }) => {
     console.log("category", response);
     setCategories(response?.data?.data?.content);
   };
-
   useEffect(() => {
     function initState() {
       if (dateRange[0] != null && dateRange[1] != null) {
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx
index 172232a4..416a309c 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx
@@ -52,7 +52,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -179,13 +179,9 @@ const FilterPage = (props: { group?: string; type: string }) => {
   }, []);
   const initFetch = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx
index 43c4df04..19e546fa 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx
@@ -46,7 +46,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -172,13 +172,9 @@ const FilterPage = (props: { group?: string; type: string }) => {
   }, []);
   const fetchContent = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
@@ -187,7 +183,6 @@ const FilterPage = (props: { group?: string; type: string }) => {
     console.log("category", response);
     setCategories(response?.data?.data?.content);
   };
-
   useEffect(() => {
     function initState() {
       if (dateRange[0] != null && dateRange[1] != null) {
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx
index b7f0e3a4..7d46d0b7 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx
@@ -45,7 +45,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -170,17 +170,13 @@ const FilterPage = (props: { group?: string; type: string }) => {
   // }
 
   useEffect(() => {
-    initFetch();
+    fetchContent();
   }, []);
-  const initFetch = async () => {
+  const fetchContent = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx
index ce697cda..afa6455c 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx
@@ -46,7 +46,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -170,13 +170,9 @@ const FilterPage = (props: { group?: string; type: string }) => {
   }, []);
   const fetchContent = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
@@ -472,7 +468,7 @@ const FilterPage = (props: { group?: string; type: string }) => {
         <div className="lg:w-[25%] 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
+            Filter 
           </h2>
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
diff --git a/app/[locale]/(public)/audio/filter/page.tsx b/app/[locale]/(public)/audio/filter/page.tsx
index 8b1f1388..fdbda5a4 100644
--- a/app/[locale]/(public)/audio/filter/page.tsx
+++ b/app/[locale]/(public)/audio/filter/page.tsx
@@ -46,7 +46,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -181,13 +181,9 @@ const FilterPage = (props: { group?: string; type: string }) => {
   }, []);
   const initFetch = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx
index 4a0d71e3..983398aa 100644
--- a/app/[locale]/(public)/document/filter/page.tsx
+++ b/app/[locale]/(public)/document/filter/page.tsx
@@ -47,7 +47,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -181,13 +181,9 @@ const FilterPage = (props: { group?: string; type: string }) => {
   }, []);
   const initFetch = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index 803e2a31..de0a9b78 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -48,7 +48,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -184,7 +184,7 @@ const FilterPage = (props: { group?: string; type: string }) => {
     }, []);
     const initFetch = async () => {
       const response = await getPublicCategoryData(
-        props.group == "mabes" ? "" : props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName : props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "",
+        poldaName && String(poldaName)?.length > 1 ? poldaName : satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "",
         "",
         locale == "en" ? true : false
       );
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index 6197aedd..351f31a1 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -49,7 +49,7 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const FilterPage = (props: { group?: string; type: string }) => {
+const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
   const params = useParams();
@@ -176,13 +176,9 @@ const FilterPage = (props: { group?: string; type: string }) => {
   }, []);
   const initFetch = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+      poldaName && String(poldaName)?.length > 1
         ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
+        : satkerName && String(satkerName)?.length > 1
         ? "satker-" + satkerName
         : "",
       "",
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 9c5e335b..93abbe36 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -6,8 +6,23 @@ import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
 import { useParams, usePathname } from "next/navigation";
 import { generateLocalizedPath } from "@/utils/globals";
 import { Link } from "@/i18n/routing";
-import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
 import Image from "next/image";
 import { Icon } from "../ui/icon";
 import { getCookiesDecrypt } from "@/lib/utils";
@@ -17,10 +32,23 @@ import { useTranslations } from "next-intl";
 import { useRouter } from "@/i18n/routing";
 import { Button } from "@/components/ui/button";
 import LocalSwitcher from "../partials/header/locale-switcher";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { getUserNotifications, listRole } from "@/service/landing/landing";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import PoldaLogo from "./polda-logo";
 import { DynamicLogoPolda } from "./dynamic-logo-polda";
 import { DynamicLogoSatker } from "./dynamic-logo-satker";
@@ -65,7 +93,11 @@ const Navbar = () => {
   const [notificationsUpdate, setNotificationsUpdate] = useState([]);
   const [selectedTab, setSelectedTab] = useState("image");
 
-  let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
+  let prefixPath = poldaName
+    ? `/polda/${poldaName}`
+    : satkerName
+    ? `/satker/${satkerName}`
+    : "/";
 
   let menu = "";
 
@@ -77,6 +109,20 @@ const Navbar = () => {
     window.location.href = "/";
   };
 
+//  useEffect(() => {
+//   if (!roleId) {
+//     router.replace("/"); // Kalau roleId-nya belum tersedia, redirect juga (opsional)
+//     return;
+//   }
+
+//   const token = Cookies.get(roleId);
+
+//   if (!token) {
+//     router.replace("/"); // Redirect ke halaman home jika tidak ada token
+//   }
+// }, []);
+
+
   // const profilePicture = Cookies.get("profile_picture");
   const fullName = getCookiesDecrypt("ufne");
   const roleName = getCookiesDecrypt("urne");
@@ -161,7 +207,13 @@ const Navbar = () => {
       <div className="flex items-center justify-between px-4 lg:px-16 py-2 gap-3">
         <div className="flex flex-row gap-2">
           <Link href={prefixPath} className="flex items-center">
-            <Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={2560} height={1440} className=" w-[200px] h-full shrink-0 object-contain" />
+            <Image
+              src="/assets/mediahub-logo.gif"
+              alt="Media Hub Logo"
+              width={2560}
+              height={1440}
+              className=" w-[200px] h-full shrink-0 object-contain"
+            />
           </Link>
           <DynamicLogoPolda /> <DynamicLogoSatker />
           {/* Nav Menu */}
@@ -171,7 +223,14 @@ 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 dark:"
+                        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"
@@ -181,13 +240,19 @@ const Navbar = () => {
                     </a>
                   </NavigationMenuTrigger>
                   <NavigationMenuContent className="flex flex-col place-content-start rounded-md overflow-hidden ">
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1 px-3 py-1 w-36">
+                    <NavigationMenuLink
+                      onClick={() => router.push(prefixPath + "/image/filter")}
+                      className="flex place-items-start gap-1 px-3 py-1 w-36"
+                    >
                       <p className="text-slate-600  dark:text-white hover:text-[#bb3523] flex flex-row items-center py-1 cursor-pointer">
                         <FiImage className="mr-2" />
                         {t("image")}
                       </p>
                     </NavigationMenuLink>
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/video/filter")} className="flex items-start gap-1 py-1 px-3 ">
+                    <NavigationMenuLink
+                      onClick={() => router.push(prefixPath + "/video/filter")}
+                      className="flex items-start gap-1 py-1 px-3 "
+                    >
                       {pathname?.split("/")[1] == "in" ? (
                         <>
                           <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-1 cursor-pointer">
@@ -204,13 +269,21 @@ const Navbar = () => {
                         </>
                       )}
                     </NavigationMenuLink>
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1 py-1 px-3">
+                    <NavigationMenuLink
+                      onClick={() =>
+                        router.push(prefixPath + "/document/filter")
+                      }
+                      className="flex place-items-start gap-1 py-1 px-3"
+                    >
                       <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-1 cursor-pointer">
                         <FiFile className="mr-2" />
                         {t("text")}
                       </p>
                     </NavigationMenuLink>
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1 py-1 px-3 ">
+                    <NavigationMenuLink
+                      onClick={() => router.push(prefixPath + "/audio/filter")}
+                      className="flex place-items-start gap-1 py-1 px-3 "
+                    >
                       <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-1 cursor-pointer">
                         <FiMusic className="mr-2" />
                         {t("audio")}{" "}
@@ -222,7 +295,14 @@ const Navbar = () => {
                   <Link href={prefixPath + "/schedule"} legacyBehavior passHref>
                     <NavigationMenuLink className="group inline-flex h-10 w-max items-center justify-center rounded-md bg-[#f7f7f7] dark:bg-black xl:px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50">
                       <span>
-                        <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          className="mr-2"
+                          width="25"
+                          height="24"
+                          viewBox="0 0 25 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <path
                             d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
                             fill="currentColor"
@@ -237,7 +317,14 @@ const Navbar = () => {
                   <Link href={prefixPath + "/indeks"} legacyBehavior passHref>
                     <NavigationMenuLink className="group inline-flex h-10 w-max items-center justify-center rounded-md bg-[#f7f7f7] dark:bg-black xl:px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50">
                       <span>
-                        <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          className="mr-2"
+                          width="25"
+                          height="24"
+                          viewBox="0 0 25 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <path
                             fill-rule="evenodd"
                             clip-rule="evenodd"
@@ -301,7 +388,13 @@ const Navbar = () => {
           </Link> */}
           <div className="hidden custom-lg-button:flex items-center w-[100px] h-[120px]">
             <a href="https://tvradio.polri.go.id/">
-              <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain" />
+              <Image
+                src="/assets/polriTv.png"
+                width={100}
+                height={120}
+                alt="polritv"
+                className="object-contain"
+              />
             </a>
           </div>
 
@@ -324,9 +417,20 @@ const Navbar = () => {
               placeholder={t("search")}
               className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white"
             /> */}
-            <input value={onSearch} onChange={(e) => setOnSearch(e.target.value)} type="text" placeholder="Search..." className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" />
+            <input
+              value={onSearch}
+              onChange={(e) => setOnSearch(e.target.value)}
+              type="text"
+              placeholder="Search..."
+              className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white"
+            />
             <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
-              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+              >
                 <path
                   fill="currentColor"
                   fill-rule="evenodd"
@@ -382,22 +486,41 @@ const Navbar = () => {
             )}
           </div> */}
 
-          {roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? (
+          {roleId === "5" ||
+          roleId === "6" ||
+          roleId === "7" ||
+          roleId === "8" ? (
             <>
               {/* Inbox */}
               <Popover>
                 <PopoverTrigger asChild>
                   <a className="cursor-pointer" onClick={() => test()}>
                     {" "}
-                    <Icon icon="basil:envelope-outline" color="currentColor" width="30" className="text-black dark:text-white" />
+                    <Icon
+                      icon="basil:envelope-outline"
+                      color="currentColor"
+                      width="30"
+                      className="text-black dark:text-white"
+                    />
                   </a>
                 </PopoverTrigger>
-                <PopoverContent className="w-[320px] p-0 flex flex-col mt-2" align="end">
-                  <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-col">
+                <PopoverContent
+                  className="w-[320px] p-0 flex flex-col mt-2"
+                  align="end"
+                >
+                  <Tabs
+                    value={selectedTab}
+                    onValueChange={setSelectedTab}
+                    className="flex flex-col"
+                  >
                     <TabsList className="grid grid-cols-2 lg:flex lg:flex-row">
                       <TabsTrigger value="notif-tab" className="focus:bg-none">
                         <a
-                          className={`flex items-center justify-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${selectedTab === "notif-tab" ? "bg-[#bb3523] text-white" : "bg-gray-200 text-black"}`}
+                          className={`flex items-center justify-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${
+                            selectedTab === "notif-tab"
+                              ? "bg-[#bb3523] text-white"
+                              : "bg-gray-200 text-black"
+                          }`}
                           id="notif-tab"
                           data-toggle="tab"
                           role="tab"
@@ -410,7 +533,11 @@ const Navbar = () => {
                       </TabsTrigger>
                       <TabsTrigger value="notifupdate-tab">
                         <a
-                          className={`flex items-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${selectedTab === "notifupdate-tab" ? "bg-[#bb3523] text-white" : "bg-gray-200 text-black"}`}
+                          className={`flex items-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${
+                            selectedTab === "notifupdate-tab"
+                              ? "bg-[#bb3523] text-white"
+                              : "bg-gray-200 text-black"
+                          }`}
                           id="notifupdate-tab"
                           data-toggle="tab"
                           role="tab"
@@ -425,14 +552,32 @@ const Navbar = () => {
                     <TabsContent value="notif-tab">
                       <div className="flex flex-col justify-center my-3">
                         {notifications?.map((list: any) => (
-                          <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
+                          <a
+                            className="flex flex-row"
+                            href={list.redirectUrl}
+                            key={list.id}
+                          >
                             <div className="ml-4">
-                              <Image src="/assets/avatar-profile.png" alt="avatar" width={5} height={10} className="items-center mr-3" />
+                              <Image
+                                src="/assets/avatar-profile.png"
+                                alt="avatar"
+                                width={5}
+                                height={10}
+                                className="items-center mr-3"
+                              />
+                            </div>
+                            <div className="text-wrap text-left">
+                              {list?.message}
                             </div>
-                            <div className="text-wrap text-left">{list?.message}</div>
                             <div>
                               <small>
-                                {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
+                                {`${new Date(list?.createdAt).getDate()}/${
+                                  new Date(list?.createdAt).getMonth() + 1
+                                }/${new Date(
+                                  list?.createdAt
+                                ).getFullYear()} ${new Date(
+                                  list?.createdAt
+                                ).getHours()}:${new Date(
                                   list?.createdAt
                                 ).getMinutes()}`}{" "}
                               </small>
@@ -440,7 +585,10 @@ const Navbar = () => {
                           </a>
                         ))}
                         <Link href="/inbox" legacyBehavior>
-                          <p className="text-[15px] text-center py-2" role="button">
+                          <p
+                            className="text-[15px] text-center py-2"
+                            role="button"
+                          >
                             {t("seeAll")}
                           </p>
                         </Link>
@@ -449,15 +597,33 @@ const Navbar = () => {
                     <TabsContent value="notifupdate-tab">
                       <div className="">
                         {notificationsUpdate?.map((list: any) => (
-                          <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
+                          <a
+                            className="flex flex-row"
+                            href={list.redirectUrl}
+                            key={list.id}
+                          >
                             <div className="ml-4">
-                              <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} className="w-8 items-center mr-3" />
+                              <Image
+                                src="/assets/avatar-profile.png"
+                                alt="..."
+                                width={5}
+                                height={10}
+                                className="w-8 items-center mr-3"
+                              />
                             </div>
                             <div className="">
-                              <div className="text-wrap text-left">{list?.message}</div>
+                              <div className="text-wrap text-left">
+                                {list?.message}
+                              </div>
                               <div>
                                 <small>
-                                  {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
+                                  {`${new Date(list?.createdAt).getDate()}/${
+                                    new Date(list?.createdAt).getMonth() + 1
+                                  }/${new Date(
+                                    list?.createdAt
+                                  ).getFullYear()} ${new Date(
+                                    list?.createdAt
+                                  ).getHours()}:${new Date(
                                     list?.createdAt
                                   ).getMinutes()}`}{" "}
                                 </small>
@@ -466,7 +632,10 @@ const Navbar = () => {
                           </a>
                         ))}
                         <Link href="/inbox/update" legacyBehavior>
-                          <p className="text-[15px] text-center py-2" role="button">
+                          <p
+                            className="text-[15px] text-center py-2"
+                            role="button"
+                          >
                             {t("seeAll")}
                           </p>
                         </Link>
@@ -479,10 +648,20 @@ const Navbar = () => {
                 <DropdownMenuTrigger asChild className="cursor-pointer">
                   {detail !== undefined ? (
                     <div className="flex items-center gap-3 text-default-800">
-                      <Image src={"/assets/avatar-profile.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
+                      <Image
+                        src={"/assets/avatar-profile.png"}
+                        alt={"Image"}
+                        width={36}
+                        height={36}
+                        className="rounded-full"
+                      />
                       <div>
-                        <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">{detail?.fullname}</div>
-                        <p className="text-xs whitespace-nowrap overflow-hidden truncate">({detail?.fullname})</p>
+                        <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">
+                          {detail?.fullname}
+                        </div>
+                        <p className="text-xs whitespace-nowrap overflow-hidden truncate">
+                          ({detail?.fullname})
+                        </p>
                       </div>
                       <span className="text-base me-2.5 lg:inline-block hidden">
                         <Icon icon="heroicons-outline:chevron-down"></Icon>
@@ -506,7 +685,11 @@ const Navbar = () => {
                         href: "/content-management/galery",
                       },
                     ].map((item, index) => (
-                      <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
+                      <Link
+                        href={item.href}
+                        key={`info-menu-${index}`}
+                        className="cursor-pointer"
+                      >
                         <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                           <Icon icon={item.icon} className="w-4 h-4" />
                           {item.name}
@@ -518,7 +701,11 @@ const Navbar = () => {
                   <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
                     <div>
                       <Link href={"/"}>
-                        <button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
+                        <button
+                          type="submit"
+                          className="w-full flex items-center gap-2"
+                          onClick={onLogout}
+                        >
                           <Icon icon="heroicons:power" className="w-4 h-4" />
                           {t("logOut")}
                         </button>
@@ -528,22 +715,42 @@ const Navbar = () => {
                 </DropdownMenuContent>
               </DropdownMenu>
             </>
-          ) : roleId === "2" || roleId === "3" || roleId === "4" || roleId === "9" || roleId === "10" || roleId === "11" || roleId === "12" || roleId === "13" ? (
+          ) : roleId === "2" ||
+            roleId === "3" ||
+            roleId === "4" ||
+            roleId === "9" ||
+            roleId === "10" ||
+            roleId === "11" ||
+            roleId === "12" ||
+            roleId === "13" ? (
             <>
               {/* Inbox */}
               <Popover>
                 <PopoverTrigger asChild>
                   <a className="cursor-pointer" onClick={() => test()}>
                     {" "}
-                    <Icon icon="basil:envelope-outline" color="black" width="30" />
+                    <Icon
+                      icon="basil:envelope-outline"
+                      color="black"
+                      width="30"
+                    />
                   </a>
                 </PopoverTrigger>
-                <PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
-                  <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-row">
+                <PopoverContent
+                  className=" p-0 h-32 flex flex-col mt-2"
+                  align="end"
+                >
+                  <Tabs
+                    value={selectedTab}
+                    onValueChange={setSelectedTab}
+                    className="flex flex-row"
+                  >
                     <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
                       <TabsTrigger value="notif-tab">
                         <a
-                          className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${isMessageActive ? "active" : ""}`}
+                          className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${
+                            isMessageActive ? "active" : ""
+                          }`}
                           id="notif-tab"
                           data-toggle="tab"
                           role="tab"
@@ -556,7 +763,9 @@ const Navbar = () => {
                       </TabsTrigger>
                       <TabsTrigger value="notifupdate-tab">
                         <a
-                          className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${isMessageActive ? "" : "active"}`}
+                          className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${
+                            isMessageActive ? "" : "active"
+                          }`}
                           id="notifupdate-tab"
                           data-toggle="tab"
                           role="tab"
@@ -569,17 +778,34 @@ const Navbar = () => {
                       </TabsTrigger>
                     </TabsList>
                   </Tabs>
-                  <div className={`flex justify-center my-3 ${isMessageActive ? "active" : ""}`}>
+                  <div
+                    className={`flex justify-center my-3 ${
+                      isMessageActive ? "active" : ""
+                    }`}
+                  >
                     {notifications?.map((list: any) => (
                       <a className="" href={list.redirectUrl} key={list.id}>
                         <div className="">
-                          <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} />
+                          <Image
+                            src="/assets/avatar-profile.png"
+                            alt="..."
+                            width={5}
+                            height={10}
+                          />
                         </div>
                         <div className="">
-                          <div className="text-wrap text-left">{list?.message}</div>
+                          <div className="text-wrap text-left">
+                            {list?.message}
+                          </div>
                           <div>
                             <small>
-                              {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
+                              {`${new Date(list?.createdAt).getDate()}/${
+                                new Date(list?.createdAt).getMonth() + 1
+                              }/${new Date(
+                                list?.createdAt
+                              ).getFullYear()} ${new Date(
+                                list?.createdAt
+                              ).getHours()}:${new Date(
                                 list?.createdAt
                               ).getMinutes()}`}{" "}
                             </small>
@@ -593,17 +819,39 @@ const Navbar = () => {
                       </p>
                     </Link>
                   </div>
-                  <div className={`flex flex-col justify-center my-3 ${isMessageActive ? "active" : ""}`}>
+                  <div
+                    className={`flex flex-col justify-center my-3 ${
+                      isMessageActive ? "active" : ""
+                    }`}
+                  >
                     {notificationsUpdate?.map((list: any) => (
-                      <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
+                      <a
+                        className="flex flex-row"
+                        href={list.redirectUrl}
+                        key={list.id}
+                      >
                         <div className="ml-4">
-                          <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} className="items-center mr-3" />
+                          <Image
+                            src="/assets/avatar-profile.png"
+                            alt="..."
+                            width={5}
+                            height={10}
+                            className="items-center mr-3"
+                          />
                         </div>
                         <div className="">
-                          <div className="text-wrap text-left">{list?.message}</div>
+                          <div className="text-wrap text-left">
+                            {list?.message}
+                          </div>
                           <div>
                             <small>
-                              {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
+                              {`${new Date(list?.createdAt).getDate()}/${
+                                new Date(list?.createdAt).getMonth() + 1
+                              }/${new Date(
+                                list?.createdAt
+                              ).getFullYear()} ${new Date(
+                                list?.createdAt
+                              ).getHours()}:${new Date(
                                 list?.createdAt
                               ).getMinutes()}`}{" "}
                             </small>
@@ -625,10 +873,20 @@ const Navbar = () => {
                 <DropdownMenuTrigger asChild className="cursor-pointer">
                   {detail !== undefined ? (
                     <div className="flex items-center gap-3 text-default-800">
-                      <Image src={"/assets/avatar-profile.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
+                      <Image
+                        src={"/assets/avatar-profile.png"}
+                        alt={"Image"}
+                        width={36}
+                        height={36}
+                        className="rounded-full"
+                      />
                       <div>
-                        <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">{detail?.fullname}</div>
-                        <p className="text-xs whitespace-nowrap overflow-hidden truncate">({detail?.fullname})</p>
+                        <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">
+                          {detail?.fullname}
+                        </div>
+                        <p className="text-xs whitespace-nowrap overflow-hidden truncate">
+                          ({detail?.fullname})
+                        </p>
                       </div>
                       <span className="text-base me-2.5 lg:inline-block hidden">
                         <Icon icon="heroicons-outline:chevron-down"></Icon>
@@ -652,7 +910,11 @@ const Navbar = () => {
                         href: "/dashboard",
                       },
                     ].map((item, index) => (
-                      <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
+                      <Link
+                        href={item.href}
+                        key={`info-menu-${index}`}
+                        className="cursor-pointer"
+                      >
                         <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                           <Icon icon={item.icon} className="w-4 h-4" />
                           {item.name}
@@ -664,7 +926,11 @@ const Navbar = () => {
                   <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
                     <div>
                       <Link href={"/"}>
-                        <button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
+                        <button
+                          type="submit"
+                          className="w-full flex items-center gap-2"
+                          onClick={onLogout}
+                        >
                           <Icon icon="heroicons:power" className="w-4 h-4" />
                           {t("logOut")}
                         </button>
@@ -677,22 +943,37 @@ const Navbar = () => {
           ) : (
             // Masuk and Daftar buttons for roleId === null
             <div className="hidden custom-lg-button:flex flex-row justify-center items-center gap-5">
-              <Link href="/auth" className="w-full lg:w-max px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center">
+              <Link
+                href="/auth"
+                className="w-full lg:w-max px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
+              >
                 {t("logIn")}
               </Link>
               <Dialog>
                 <DialogTrigger asChild>
-                  <Button className="w-full lg:w-fit px-4 h-8 border bg-white border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white">{t("register")}</Button>
+                  <Button className="w-full lg:w-fit px-4 h-8 border bg-white border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white">
+                    {t("register")}
+                  </Button>
                 </DialogTrigger>
                 <DialogContent size="sm" className="sm:max-w-[425px]">
                   <div className="flex flex-col w-full gap-1">
-                    <p className="text-lg font-semibold text-center">{t("categoryReg")}</p>
+                    <p className="text-lg font-semibold text-center">
+                      {t("categoryReg")}
+                    </p>
                     <p className="text-base text-center">{t("selectOne")}</p>
                   </div>
                   <div>
                     {role?.map((row: any) => (
                       <div key={row.id}>
-                        <input type="radio" id={`category${row.id}`} name="category" className="" value={row.id} checked={category == `${row.id}`} onChange={(event) => setCategory(event.target.value)} />
+                        <input
+                          type="radio"
+                          id={`category${row.id}`}
+                          name="category"
+                          className=""
+                          value={row.id}
+                          checked={category == `${row.id}`}
+                          onChange={(event) => setCategory(event.target.value)}
+                        />
                         <label className="ml-2" htmlFor={`category${row.id}`}>
                           {row.name}
                         </label>
@@ -701,7 +982,11 @@ const Navbar = () => {
                   </div>
                   <div className="border-b-2 border-black"></div>
                   <DialogFooter>
-                    <Link href={`/auth/registration?category=${category}`} className="flex justify-center bg-red-500 px-4 py-1 rounded-md border border-black text-white" type="submit">
+                    <Link
+                      href={`/auth/registration?category=${category}`}
+                      className="flex justify-center bg-red-500 px-4 py-1 rounded-md border border-black text-white"
+                      type="submit"
+                    >
                       {t("next")}{" "}
                     </Link>
                   </DialogFooter>
@@ -710,14 +995,33 @@ const Navbar = () => {
             </div>
           )}
         </div>
-        <button className="text-black dark:text-white right-0 size-20 h-10 w-10 custom-lg-button:hidden flex justify-end" onClick={() => setMenuOpen(!menuOpen)}>
+        <button
+          className="text-black dark:text-white right-0 size-20 h-10 w-10 custom-lg-button:hidden flex justify-end"
+          onClick={() => setMenuOpen(!menuOpen)}
+        >
           {menuOpen ? (
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <path fill="currentColor" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z"
+              />
             </svg>
           ) : (
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z"
+              />
             </svg>
           )}
         </button>
@@ -732,7 +1036,14 @@ 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 dark:"
+                        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"
@@ -742,13 +1053,19 @@ const Navbar = () => {
                     </a>
                   </NavigationMenuTrigger>
                   <NavigationMenuContent className="flex flex-col place-content-start rounded-md overflow-hidden ">
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-36">
+                    <NavigationMenuLink
+                      onClick={() => router.push(prefixPath + "/image/filter")}
+                      className="flex place-items-start gap-1.5 p-2 w-36"
+                    >
                       <p className="text-slate-600  dark:text-white hover:text-[#bb3523] flex flex-row items-center py-2 cursor-pointer">
                         <FiImage className="mr-2" />
                         {t("image")}
                       </p>
                     </NavigationMenuLink>
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/video/filter")} className="flex items-start gap-1.5 p-2 ">
+                    <NavigationMenuLink
+                      onClick={() => router.push(prefixPath + "/video/filter")}
+                      className="flex items-start gap-1.5 p-2 "
+                    >
                       {pathname?.split("/")[1] == "in" ? (
                         <>
                           <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
@@ -765,13 +1082,21 @@ const Navbar = () => {
                         </>
                       )}
                     </NavigationMenuLink>
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1.5 p-2">
+                    <NavigationMenuLink
+                      onClick={() =>
+                        router.push(prefixPath + "/document/filter")
+                      }
+                      className="flex place-items-start gap-1.5 p-2"
+                    >
                       <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                         <FiFile className="mr-2" />
                         {t("text")}
                       </p>
                     </NavigationMenuLink>
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1.5 p-2 ">
+                    <NavigationMenuLink
+                      onClick={() => router.push(prefixPath + "/audio/filter")}
+                      className="flex place-items-start gap-1.5 p-2 "
+                    >
                       <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                         <FiMusic className="mr-2" />
                         {t("audio")}{" "}
@@ -781,9 +1106,18 @@ const Navbar = () => {
                 </NavigationMenuItem>
                 <NavigationMenuItem>
                   <Link href={prefixPath + "/schedule"} legacyBehavior passHref>
-                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                    <NavigationMenuLink
+                      className={navigationMenuTriggerStyle()}
+                    >
                       <span>
-                        <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          className="mr-2"
+                          width="25"
+                          height="24"
+                          viewBox="0 0 25 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <path
                             d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
                             fill="currentColor"
@@ -796,9 +1130,18 @@ const Navbar = () => {
                 </NavigationMenuItem>
                 <NavigationMenuItem>
                   <Link href={prefixPath + "/indeks"} legacyBehavior passHref>
-                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                    <NavigationMenuLink
+                      className={navigationMenuTriggerStyle()}
+                    >
                       <span>
-                        <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          className="mr-2"
+                          width="25"
+                          height="24"
+                          viewBox="0 0 25 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <path
                             fill-rule="evenodd"
                             clip-rule="evenodd"
@@ -855,7 +1198,13 @@ const Navbar = () => {
             </div> */}
               <div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
                 <a href="https://tvradio.polri.go.id/">
-                  <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex items-center" />
+                  <Image
+                    src="/assets/polriTv.png"
+                    width={100}
+                    height={120}
+                    alt="polritv"
+                    className="object-contain flex items-center"
+                  />
                 </a>
               </div>
 
@@ -894,7 +1243,13 @@ const Navbar = () => {
             </div>
 
             <div className=" py-1 flex items-center mx-3">
-              <input value={onSearch} onChange={(e) => setOnSearch(e.target.value)} type="text" placeholder="Search..." className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" />{" "}
+              <input
+                value={onSearch}
+                onChange={(e) => setOnSearch(e.target.value)}
+                type="text"
+                placeholder="Search..."
+                className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white"
+              />{" "}
             </div>
 
             <div className="flex justify-center items-center mx-3 gap-5">
@@ -966,22 +1321,43 @@ const Navbar = () => {
                 </Dialog>
               </>
             )} */}
-              {roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? (
+              {roleId === "5" ||
+              roleId === "6" ||
+              roleId === "7" ||
+              roleId === "8" ? (
                 <>
                   {/* Inbox */}
                   <Popover>
                     <PopoverTrigger asChild>
                       <a className="cursor-pointer" onClick={() => test()}>
                         {" "}
-                        <Icon icon="basil:envelope-outline" color="black" width="30" />
+                        <Icon
+                          icon="basil:envelope-outline"
+                          color="black"
+                          width="30"
+                        />
                       </a>
                     </PopoverTrigger>
-                    <PopoverContent className="w-[320px] p-0 flex flex-col mt-2" align="end">
-                      <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-col">
+                    <PopoverContent
+                      className="w-[320px] p-0 flex flex-col mt-2"
+                      align="end"
+                    >
+                      <Tabs
+                        value={selectedTab}
+                        onValueChange={setSelectedTab}
+                        className="flex flex-col"
+                      >
                         <TabsList className="grid grid-cols-2 lg:flex lg:flex-row">
-                          <TabsTrigger value="notif-tab" className="focus:bg-none">
+                          <TabsTrigger
+                            value="notif-tab"
+                            className="focus:bg-none"
+                          >
                             <a
-                              className={`flex items-center justify-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${selectedTab === "notif-tab" ? "bg-[#bb3523] text-white" : "bg-gray-200 text-black"}`}
+                              className={`flex items-center justify-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${
+                                selectedTab === "notif-tab"
+                                  ? "bg-[#bb3523] text-white"
+                                  : "bg-gray-200 text-black"
+                              }`}
                               id="notif-tab"
                               data-toggle="tab"
                               role="tab"
@@ -994,7 +1370,11 @@ const Navbar = () => {
                           </TabsTrigger>
                           <TabsTrigger value="notifupdate-tab">
                             <a
-                              className={`flex items-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${selectedTab === "notifupdate-tab" ? "bg-[#bb3523] text-white" : "bg-gray-200 text-black"}`}
+                              className={`flex items-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${
+                                selectedTab === "notifupdate-tab"
+                                  ? "bg-[#bb3523] text-white"
+                                  : "bg-gray-200 text-black"
+                              }`}
                               id="notifupdate-tab"
                               data-toggle="tab"
                               role="tab"
@@ -1009,14 +1389,32 @@ const Navbar = () => {
                         <TabsContent value="notif-tab">
                           <div className="flex flex-col justify-center my-3">
                             {notifications?.map((list: any) => (
-                              <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
+                              <a
+                                className="flex flex-row"
+                                href={list.redirectUrl}
+                                key={list.id}
+                              >
                                 <div className="ml-4">
-                                  <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
+                                  <Image
+                                    width={5}
+                                    height={10}
+                                    src="/assets/avatar-profile.png"
+                                    alt="..."
+                                    className="items-center mr-3"
+                                  />
+                                </div>
+                                <div className="text-wrap text-left">
+                                  {list?.message}
                                 </div>
-                                <div className="text-wrap text-left">{list?.message}</div>
                                 <div>
                                   <small>
-                                    {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
+                                    {`${new Date(list?.createdAt).getDate()}/${
+                                      new Date(list?.createdAt).getMonth() + 1
+                                    }/${new Date(
+                                      list?.createdAt
+                                    ).getFullYear()} ${new Date(
+                                      list?.createdAt
+                                    ).getHours()}:${new Date(
                                       list?.createdAt
                                     ).getMinutes()}`}{" "}
                                   </small>
@@ -1024,7 +1422,10 @@ const Navbar = () => {
                               </a>
                             ))}
                             <Link href="/inbox" legacyBehavior>
-                              <p className="text-[15px] text-center py-2" role="button">
+                              <p
+                                className="text-[15px] text-center py-2"
+                                role="button"
+                              >
                                 {t("seeAll")}
                               </p>
                             </Link>
@@ -1033,15 +1434,35 @@ const Navbar = () => {
                         <TabsContent value="notifupdate-tab">
                           <div className="">
                             {notificationsUpdate?.map((list: any) => (
-                              <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
+                              <a
+                                className="flex flex-row"
+                                href={list.redirectUrl}
+                                key={list.id}
+                              >
                                 <div className="ml-4">
-                                  <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
+                                  <Image
+                                    width={5}
+                                    height={10}
+                                    src="/assets/avatar-profile.png"
+                                    alt="..."
+                                    className="items-center mr-3"
+                                  />
                                 </div>
                                 <div className="">
-                                  <div className="text-wrap text-left">{list?.message}</div>
+                                  <div className="text-wrap text-left">
+                                    {list?.message}
+                                  </div>
                                   <div>
                                     <small>
-                                      {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
+                                      {`${new Date(
+                                        list?.createdAt
+                                      ).getDate()}/${
+                                        new Date(list?.createdAt).getMonth() + 1
+                                      }/${new Date(
+                                        list?.createdAt
+                                      ).getFullYear()} ${new Date(
+                                        list?.createdAt
+                                      ).getHours()}:${new Date(
                                         list?.createdAt
                                       ).getMinutes()}`}{" "}
                                     </small>
@@ -1050,7 +1471,10 @@ const Navbar = () => {
                               </a>
                             ))}
                             <Link href="/inbox/update" legacyBehavior>
-                              <p className="text-[15px] text-center py-2" role="button">
+                              <p
+                                className="text-[15px] text-center py-2"
+                                role="button"
+                              >
                                 {t("seeAll")}
                               </p>
                             </Link>
@@ -1063,10 +1487,20 @@ const Navbar = () => {
                     <DropdownMenuTrigger asChild className="cursor-pointer">
                       {detail !== undefined ? (
                         <div className="flex items-center gap-3 text-default-800">
-                          <Image src={"/assets/avatar-profile.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
+                          <Image
+                            src={"/assets/avatar-profile.png"}
+                            alt={"Image"}
+                            width={36}
+                            height={36}
+                            className="rounded-full"
+                          />
                           <div>
-                            <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">{detail?.fullname}</div>
-                            <p className="text-xs whitespace-nowrap overflow-hidden truncate">({detail?.fullname})</p>
+                            <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">
+                              {detail?.fullname}
+                            </div>
+                            <p className="text-xs whitespace-nowrap overflow-hidden truncate">
+                              ({detail?.fullname})
+                            </p>
                           </div>
                           <span className="text-base me-2.5 lg:inline-block hidden">
                             <Icon icon="heroicons-outline:chevron-down"></Icon>
@@ -1090,7 +1524,11 @@ const Navbar = () => {
                             href: "/content-management/galery",
                           },
                         ].map((item, index) => (
-                          <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
+                          <Link
+                            href={item.href}
+                            key={`info-menu-${index}`}
+                            className="cursor-pointer"
+                          >
                             <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                               <Icon icon={item.icon} className="w-4 h-4" />
                               {item.name}
@@ -1102,8 +1540,15 @@ const Navbar = () => {
                       <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
                         <div>
                           <Link href={"/"}>
-                            <button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
-                              <Icon icon="heroicons:power" className="w-4 h-4" />
+                            <button
+                              type="submit"
+                              className="w-full flex items-center gap-2"
+                              onClick={onLogout}
+                            >
+                              <Icon
+                                icon="heroicons:power"
+                                className="w-4 h-4"
+                              />
                               {t("logOut")}
                             </button>
                           </Link>
@@ -1112,22 +1557,42 @@ const Navbar = () => {
                     </DropdownMenuContent>
                   </DropdownMenu>
                 </>
-              ) : roleId === "2" || roleId === "3" || roleId === "4" || roleId === "9" || roleId === "10" || roleId === "11" || roleId === "12" || roleId === "13" ? (
+              ) : roleId === "2" ||
+                roleId === "3" ||
+                roleId === "4" ||
+                roleId === "9" ||
+                roleId === "10" ||
+                roleId === "11" ||
+                roleId === "12" ||
+                roleId === "13" ? (
                 <>
                   {/* Inbox */}
                   <Popover>
                     <PopoverTrigger asChild>
                       <a className="cursor-pointer" onClick={() => test()}>
                         {" "}
-                        <Icon icon="basil:envelope-outline" color="black" width="30" />
+                        <Icon
+                          icon="basil:envelope-outline"
+                          color="black"
+                          width="30"
+                        />
                       </a>
                     </PopoverTrigger>
-                    <PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
-                      <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-row">
+                    <PopoverContent
+                      className=" p-0 h-32 flex flex-col mt-2"
+                      align="end"
+                    >
+                      <Tabs
+                        value={selectedTab}
+                        onValueChange={setSelectedTab}
+                        className="flex flex-row"
+                      >
                         <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
                           <TabsTrigger value="notif-tab">
                             <a
-                              className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${isMessageActive ? "active" : ""}`}
+                              className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${
+                                isMessageActive ? "active" : ""
+                              }`}
                               id="notif-tab"
                               data-toggle="tab"
                               role="tab"
@@ -1140,7 +1605,9 @@ const Navbar = () => {
                           </TabsTrigger>
                           <TabsTrigger value="notifupdate-tab">
                             <a
-                              className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${isMessageActive ? "" : "active"}`}
+                              className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${
+                                isMessageActive ? "" : "active"
+                              }`}
                               id="notifupdate-tab"
                               data-toggle="tab"
                               role="tab"
@@ -1153,17 +1620,34 @@ const Navbar = () => {
                           </TabsTrigger>
                         </TabsList>
                       </Tabs>
-                      <div className={`flex justify-center my-3 ${isMessageActive ? "active" : ""}`}>
+                      <div
+                        className={`flex justify-center my-3 ${
+                          isMessageActive ? "active" : ""
+                        }`}
+                      >
                         {notifications?.map((list: any) => (
                           <a className="" href={list.redirectUrl} key={list.id}>
                             <div className="">
-                              <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." />
+                              <Image
+                                width={5}
+                                height={10}
+                                src="/assets/avatar-profile.png"
+                                alt="..."
+                              />
                             </div>
                             <div className="">
-                              <div className="text-wrap text-left">{list?.message}</div>
+                              <div className="text-wrap text-left">
+                                {list?.message}
+                              </div>
                               <div>
                                 <small>
-                                  {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
+                                  {`${new Date(list?.createdAt).getDate()}/${
+                                    new Date(list?.createdAt).getMonth() + 1
+                                  }/${new Date(
+                                    list?.createdAt
+                                  ).getFullYear()} ${new Date(
+                                    list?.createdAt
+                                  ).getHours()}:${new Date(
                                     list?.createdAt
                                   ).getMinutes()}`}{" "}
                                 </small>
@@ -1177,17 +1661,39 @@ const Navbar = () => {
                           </p>
                         </Link>
                       </div>
-                      <div className={`flex flex-col justify-center my-3 ${isMessageActive ? "active" : ""}`}>
+                      <div
+                        className={`flex flex-col justify-center my-3 ${
+                          isMessageActive ? "active" : ""
+                        }`}
+                      >
                         {notificationsUpdate?.map((list: any) => (
-                          <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
+                          <a
+                            className="flex flex-row"
+                            href={list.redirectUrl}
+                            key={list.id}
+                          >
                             <div className="ml-4">
-                              <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
+                              <Image
+                                width={5}
+                                height={10}
+                                src="/assets/avatar-profile.png"
+                                alt="..."
+                                className="items-center mr-3"
+                              />
                             </div>
                             <div className="">
-                              <div className="text-wrap text-left">{list?.message}</div>
+                              <div className="text-wrap text-left">
+                                {list?.message}
+                              </div>
                               <div>
                                 <small>
-                                  {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
+                                  {`${new Date(list?.createdAt).getDate()}/${
+                                    new Date(list?.createdAt).getMonth() + 1
+                                  }/${new Date(
+                                    list?.createdAt
+                                  ).getFullYear()} ${new Date(
+                                    list?.createdAt
+                                  ).getHours()}:${new Date(
                                     list?.createdAt
                                   ).getMinutes()}`}{" "}
                                 </small>
@@ -1196,7 +1702,10 @@ const Navbar = () => {
                           </a>
                         ))}
                         <Link href="/inbox" legacyBehavior>
-                          <p className="text-[15px] text-center py-2" role="button">
+                          <p
+                            className="text-[15px] text-center py-2"
+                            role="button"
+                          >
                             {t("seeAll")}
                           </p>
                         </Link>
@@ -1209,10 +1718,20 @@ const Navbar = () => {
                     <DropdownMenuTrigger asChild className="cursor-pointer">
                       {detail !== undefined ? (
                         <div className="flex items-center gap-3 text-default-800">
-                          <Image src={"/assets/avatar-profile.png"} alt={"Image"} width={36} height={36} className="rounded-full" />
+                          <Image
+                            src={"/assets/avatar-profile.png"}
+                            alt={"Image"}
+                            width={36}
+                            height={36}
+                            className="rounded-full"
+                          />
                           <div>
-                            <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">{detail?.fullname}</div>
-                            <p className="text-xs whitespace-nowrap overflow-hidden truncate">({detail?.fullname})</p>
+                            <div className="text-sm font-medium capitalize lg:block hidden whitespace-nowrap overflow-hidden truncate">
+                              {detail?.fullname}
+                            </div>
+                            <p className="text-xs whitespace-nowrap overflow-hidden truncate">
+                              ({detail?.fullname})
+                            </p>
                           </div>
                           <span className="text-base me-2.5 lg:inline-block hidden">
                             <Icon icon="heroicons-outline:chevron-down"></Icon>
@@ -1236,7 +1755,11 @@ const Navbar = () => {
                             href: "/dashboard",
                           },
                         ].map((item, index) => (
-                          <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
+                          <Link
+                            href={item.href}
+                            key={`info-menu-${index}`}
+                            className="cursor-pointer"
+                          >
                             <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                               <Icon icon={item.icon} className="w-4 h-4" />
                               {item.name}
@@ -1248,8 +1771,15 @@ const Navbar = () => {
                       <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
                         <div>
                           <Link href={"/"}>
-                            <button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
-                              <Icon icon="heroicons:power" className="w-4 h-4" />
+                            <button
+                              type="submit"
+                              className="w-full flex items-center gap-2"
+                              onClick={onLogout}
+                            >
+                              <Icon
+                                icon="heroicons:power"
+                                className="w-4 h-4"
+                              />
                               {t("logOut")}
                             </button>
                           </Link>
@@ -1261,25 +1791,48 @@ const Navbar = () => {
               ) : (
                 // Masuk and Daftar buttons for roleId === null
                 <div className="flex justify-center items-center mx-3 gap-1 lg:gap-1 xl:gap-5">
-                  <Link href="/auth" className="w-full lg:w-max px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center">
+                  <Link
+                    href="/auth"
+                    className="w-full lg:w-max px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
+                  >
                     {t("logIn")}
                   </Link>
                   <Dialog>
                     <DialogTrigger asChild>
-                      <Button size="sm" className="w-full lg:w-fit px-4 h-8 border bg-white border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white">
+                      <Button
+                        size="sm"
+                        className="w-full lg:w-fit px-4 h-8 border bg-white border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white"
+                      >
                         {t("register")}
                       </Button>
                     </DialogTrigger>
                     <DialogContent size="sm" className="sm:max-w-[425px]">
                       <div className="flex flex-col w-full gap-1">
-                        <p className="text-lg font-semibold text-center">{t("categoryReg")}</p>
-                        <p className="text-base text-center">{t("selectOne")}</p>
+                        <p className="text-lg font-semibold text-center">
+                          {t("categoryReg")}
+                        </p>
+                        <p className="text-base text-center">
+                          {t("selectOne")}
+                        </p>
                       </div>
                       <div>
                         {role?.map((row: any) => (
                           <div key={row.id}>
-                            <input type="radio" id={`category${row.id}`} name="category" className="" value={row.id} checked={category == `${row.id}`} onChange={(event) => setCategory(event.target.value)} />
-                            <label className="ml-2" htmlFor={`category${row.id}`}>
+                            <input
+                              type="radio"
+                              id={`category${row.id}`}
+                              name="category"
+                              className=""
+                              value={row.id}
+                              checked={category == `${row.id}`}
+                              onChange={(event) =>
+                                setCategory(event.target.value)
+                              }
+                            />
+                            <label
+                              className="ml-2"
+                              htmlFor={`category${row.id}`}
+                            >
                               {row.name}
                             </label>
                           </div>
@@ -1287,7 +1840,11 @@ const Navbar = () => {
                       </div>
                       <div className="border-b-2 border-black"></div>
                       <DialogFooter>
-                        <Link href={`/auth/registration?category=${category}`} className="bg-red-500 flex justify-center px-4 py-1 rounded-md border border-black text-white" type="submit">
+                        <Link
+                          href={`/auth/registration?category=${category}`}
+                          className="bg-red-500 flex justify-center px-4 py-1 rounded-md border border-black text-white"
+                          type="submit"
+                        >
                           {t("next")}{" "}
                         </Link>
                       </DialogFooter>
diff --git a/public/logo/polda/polda-kaltara.png b/public/logo/polda/polda-kaltara.png
new file mode 100644
index 00000000..acc0a0ab
Binary files /dev/null and b/public/logo/polda/polda-kaltara.png differ