mediahub-fe/components/landing-page/navbar.tsx

"use client";

import React, { useEffect, useState } from "react";
import ThemeSwitcher from "@/components/partials/header/theme-switcher";
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 Image from "next/image";
import { Icon } from "../ui/icon";
import { getCookiesDecrypt } from "@/lib/utils";
import Cookies from "js-cookie";
import { getInfoProfile } from "@/service/auth";
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 { getUserNotifications, listRole } from "@/service/landing/landing";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { DynamicLogoPolda } from "./dynamic-logo-polda";
import { DynamicLogoSatker } from "./dynamic-logo-satker";
import { ChevronDown, ChevronUp } from "lucide-react";

type Detail = {
  id: number;
  userId: any;
  firstName: string;
  username: string;
  fullname: string;
  memberIdentity: any;
  email: string;
  address: string;
  phoneNumber: any;
  message: string;
};

const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const [inboxOpen, setInboxOpen] = useState(false);
  const router = useRouter();
  const params = useParams();
  const locale = params?.locale;
  const poldaName = params?.polda_name;
  const satkerName = params?.satker_name;
  const [language, setLanguage] = useState<"id" | "en">("id");
  const [isOpen, setIsOpen] = useState(false);
  const fullname = getCookiesDecrypt("ufne");
  const levelName = getCookiesDecrypt("ulnae");
  const roleId = getCookiesDecrypt("urie");
  const [detail, setDetail] = useState<Detail>();
  const t = useTranslations("LandingPage");
  const [search, setSearch] = useState("");
  const [onSearch, setOnSearch] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const pathname = usePathname();
  const [role, setRole] = useState<any>();
  const [menuActive, setMenuActive] = useState<string>();
  const [category, setCategory] = useState<any>();
  const [notifications, setNotifications] = useState([]);
  const [isMessageActive, setIsMessageActive] = useState(true);
  const [notificationsUpdate, setNotificationsUpdate] = useState([]);
  const [selectedTab, setSelectedTab] = useState("image");

  const isHidden = pathname?.includes("polda") || pathname?.includes("satker");

  let prefixPath = poldaName
    ? `/polda/${poldaName}`
    : satkerName
    ? `/satker/${satkerName}`
    : "/";

  let menu = "";

  const onLogout = () => {
    Object.keys(Cookies.get()).forEach((cookieName) => {
      Cookies.remove(cookieName);
    });

    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");

  const handleLanguageChange = (lang: "id" | "en") => {
    setLanguage(lang);
    setIsOpen(false);
  };

  useEffect(() => {
    async function initState() {
      setMenuActive(menu);
      const res = await listRole();
      setRole(res?.data?.data);
    }

    async function getNotif() {
      if (roleId != undefined) {
        const response = await getUserNotifications(0, 2);
        setNotifications(response?.data?.data?.content);
        console.log("respon:", response);
      }
    }

    async function getNotifUpdate() {
      if (roleId != undefined) {
        const response = await getUserNotifications(0, 3);
        setNotificationsUpdate(response?.data?.data?.content);
        console.log("Notiffff:", response);
      }
    }

    initState();
    getNotif();
    getNotifUpdate();
  }, []);

  const test = () => {
    console.log(notifications);
  };

  useEffect(() => {
    async function initState() {
      const response = await getInfoProfile();
      if (!response?.error) {
        const details = response?.data?.data;
        setInboxOpen(details);
        setDetail(details);
        console.log("data", details);
      }
    }

    initState();

    console.log("POldaaa : ", poldaName);
    console.log("Satkkeeer : ", satkerName);
  }, []);

  const handleChange = (e: any) => {
    setSearch(e.target.value);
  };

  // const handleKeypress = (e: any) => {
  //   if (e.which == 13) {
  //     handleSearch();
  //   }
  // };

  useEffect(() => {
    const handler = setTimeout(() => {
      if (onSearch.trim()) {
        setDebouncedSearch(onSearch);
        router.push(`/all/filter?title=${encodeURIComponent(onSearch)}`);
      }
    }, 3000);

    return () => clearTimeout(handler);
  }, [onSearch]);

  const [open, setOpen] = useState(false);

  return (
    <div className="bg-[#f7f7f7] dark:bg-black shadow-md sticky top-0 z-50">
      <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
              priority={true}
              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 */}
          <div className="hidden custom-lg-button:flex items-center gap-5">
            <div className="flex gap-4 items-center">
              {/* Popover Utama */}
              <Popover open={open} onOpenChange={setOpen}>
                <PopoverTrigger asChild>
                  <button className="dark:text-white text-black flex items-center gap-3 cursor-pointer bg-transparent border-none focus:outline-none">
                    <svg
                      className="mx-1"
                      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"
                      />
                    </svg>
                    <span>{t("content", { defaultValue: "Content" })}</span>
                    {open ? (
                      <ChevronUp className="w-4 h-4 transition-all" />
                    ) : (
                      <ChevronDown className="w-4 h-4 transition-all" />
                    )}
                  </button>
                </PopoverTrigger>

                <PopoverContent className="flex flex-col gap-2 w-fit px-6 py-4 rounded-md shadow-md bg-white dark:bg-black">
                  <button
                    onClick={() => router.push(prefixPath + "/image/filter")}
                    className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                  >
                    <FiImage className="mr-2" />
                    {t("image", { defaultValue: "Image" })}
                  </button>
                  <button
                    onClick={() => router.push(prefixPath + "/video/filter")}
                    className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                  >
                    <FiYoutube className="mr-2" />
                    {t("video", { defaultValue: "Video" })}
                  </button>
                  <button
                    onClick={() => router.push(prefixPath + "/document/filter")}
                    className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                  >
                    <FiFile className="mr-2" />
                    {t("text", { defaultValue: "Text" })}
                  </button>
                  <button
                    onClick={() => router.push(prefixPath + "/audio/filter")}
                    className="flex items-center text-slate-600 dark:text-white hover:text-[#bb3523]"
                  >
                    <FiMusic className="mr-2" />
                    {t("audio", { defaultValue: "Audio" })}
                  </button>
                </PopoverContent>
              </Popover>

              {/* Link Schedule */}
              <Link href={prefixPath + "/schedule"} passHref legacyBehavior>
                <a className="group inline-flex h-10 items-center text-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:outline-none">
                  <span>
                    <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"
                      />
                    </svg>
                  </span>
                  {t("schedule", { defaultValue: "Schedule" })}
                </a>
              </Link>

              {/* Link Index */}
              <Link href={prefixPath + "/indeks"} passHref legacyBehavior>
                <a className="group inline-flex h-10 items-center justify-center text-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:outline-none">
                  <span>
                    <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"
                        d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
                        fill="currentColor"
                      />
                    </svg>
                  </span>
                  {t("index", { defaultValue: "Index" })}
                </a>
              </Link>
            </div>
          </div>
        </div>

        {/* Desktop Navigation */}
        <div className="hidden custom-lg-button:flex  lg:flex items-center xl:gap-5">
          {roleId == undefined ? (
            ""
          ) : (
            <div
              className="my-auto items-center cursor-pointer"
              style={
                Number(roleId) == 5 || Number(roleId) == 8
                  ? {
                      display: "none",
                    }
                  : {}
              }
            >
              <Link
                href="https://spit.humas.polri.go.id"
                className=""
                target="_blank"
                style={
                  menuActive == "indeks"
                    ? {
                        color: "#fff",
                      }
                    : {
                        color: "#1F1A17",
                      }
                }
                legacyBehavior
              >
                <div className="flex flex-row items-center gap-1">
                  <Icon icon="gravity-ui:database-fill" fontSize={25} />
                  <p className="text-xs font-semibold">Raw Data</p>
                </div>
              </Link>
            </div>
          )}

          {/* <Link href="#" className="flex items-center space-x-1 text-red-600">
            <span className="w-2 h-2 bg-red-500 rounded-full"></span>
            <span className="font-medium">{t("live", { defaultValue: "Live" })}</span>
          </Link> */}
          <div className="hidden custom-lg-button:flex items-center w-[100px] h-[120px]">
            <a href="https://tvradio.polri.go.id/">
              <Image
                priority={true}
                src="/assets/polriTv.png"
                width={100}
                height={120}
                alt="polritv"
                className="object-contain"
              />
            </a>
          </div>

          {/* Languange */}
          <div
            className={`${
              isHidden ? "hidden" : "custom-lg-button:flex"
            } relative text-left`}
          >
            <LocalSwitcher />
          </div>

          {/* Dark Mode */}
          <div className="hidden custom-lg-button:flex text-left">
            <ThemeSwitcher />
          </div>

          <div className="hidden custom-lg-button:relative text-gray-600 dark:text-white  ">
            {/* <input
              value={onSearch}
              onChange={(e) => setOnSearch(e.target.value)}
              onKeyPress={() => router.push(`/all/filter?title=${onSearch}`)}
              type="text"
              placeholder={t("search", { defaultValue: "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"
              >
                <path
                  fill="currentColor"
                  fill-rule="evenodd"
                  d="M14.385 15.446a6.751 6.751 0 1 1 1.06-1.06l5.156 5.155a.75.75 0 1 1-1.06 1.06zM6.46 13.884a5.25 5.25 0 1 1 7.43-.005l-.005.005l-.005.004a5.25 5.25 0 0 1-7.42-.004"
                  clip-rule="evenodd"
                />
              </svg>
            </span>
          </div>

          {/* <div className="flex items-center space-x-2">
            {fullName ? (
              <>
                <DropdownMenu>
                  <DropdownMenuTrigger className="flex items-center gap-1">
                    <img className="h-12 w-12" src="/assets/avatar-profile.png" alt="avatar-profile" />
                    <a className="gap-2">
                      <p className="text-xs font-semibold">{fullName}</p>
                      <p className="text-xs">{`(${roleName})`}</p>
                    </a>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent>
                    <DropdownMenuItem>
                      <Link href="/profile" className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
                        <Icon icon="iconamoon:profile-circle-fill" />
                        Profile
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Link href="/content-management" className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
                        <Icon icon="stash:save-ribbon-light" />
                        Kelola Konten
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Link href="#" className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
                        <Icon icon="iconamoon:exit-bold" />
                        Keluar
                      </Link>
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </>
            ) : (
              <>
                <Link href="/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-[#bb3523]">
                  Masuk
                </Link>
                <Link href="#" className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white">
                  Daftar
                </Link>{" "}
              </>
            )}
          </div> */}

          {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"
                    />
                  </a>
                </PopoverTrigger>
                <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"
                          }`}
                          id="notif-tab"
                          data-toggle="tab"
                          role="tab"
                          aria-controls="notif"
                          aria-selected="true"
                          onClick={() => setIsMessageActive(true)}
                        >
                          {t("inbox", { defaultValue: "Inbox" })}
                        </a>
                      </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"
                          }`}
                          id="notifupdate-tab"
                          data-toggle="tab"
                          role="tab"
                          aria-controls="notifupdate"
                          aria-selected="false"
                          onClick={() => setIsMessageActive(false)}
                        >
                          {t("update", { defaultValue: "Update" })}(
                          {notificationsUpdate?.length})
                        </a>
                      </TabsTrigger>
                    </TabsList>
                    <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}
                          >
                            <div className="ml-4">
                              <Image
                                priority={true}
                                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>
                              <small>
                                {`${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>
                            </div>
                          </a>
                        ))}
                        <Link href="/inbox" legacyBehavior>
                          <p
                            className="text-[15px] text-center py-2"
                            role="button"
                          >
                            {t("seeAll", { defaultValue: "See All" })}
                          </p>
                        </Link>
                      </div>
                    </TabsContent>
                    <TabsContent value="notifupdate-tab">
                      <div className="">
                        {notificationsUpdate?.map((list: any) => (
                          <a
                            className="flex flex-row"
                            href={list.redirectUrl}
                            key={list.id}
                          >
                            <div className="ml-4">
                              <Image
                                priority={true}
                                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>
                                <small>
                                  {`${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>
                              </div>
                            </div>
                          </a>
                        ))}
                        <Link href="/inbox/update" legacyBehavior>
                          <p
                            className="text-[15px] text-center py-2"
                            role="button"
                          >
                            {t("seeAll", { defaultValue: "See All" })}
                          </p>
                        </Link>
                      </div>
                    </TabsContent>
                  </Tabs>
                </PopoverContent>
              </Popover>
              <DropdownMenu>
                <DropdownMenuTrigger asChild className="cursor-pointer">
                  {detail !== undefined ? (
                    <div className="flex items-center gap-3 text-default-800">
                      <Image
                        priority={true}
                        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>
                      <span className="text-base me-2.5 lg:inline-block hidden">
                        <Icon icon="heroicons-outline:chevron-down"></Icon>
                      </span>
                    </div>
                  ) : (
                    ""
                  )}
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56 p-0" align="end">
                  <DropdownMenuGroup>
                    {[
                      {
                        name: t("profileSetting", {
                          defaultValue: "Profile Setting",
                        }),
                        icon: "heroicons:user",
                        href: "/profile",
                      },
                      {
                        name: t("contentManagement", {
                          defaultValue: "Content Management",
                        }),
                        icon: "stash:save-ribbon-duotone",
                        href: "/content-management/galery",
                      },
                    ].map((item, index) => (
                      <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}
                        </DropdownMenuItem>
                      </Link>
                    ))}
                  </DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <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" />
                          {t("logOut", { defaultValue: "Log Out" })}
                        </button>
                      </Link>
                    </div>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          ) : 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"
                    />
                  </a>
                </PopoverTrigger>
                <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" : ""
                          }`}
                          id="notif-tab"
                          data-toggle="tab"
                          role="tab"
                          aria-controls="notif"
                          aria-selected="true"
                          onClick={() => setIsMessageActive(true)}
                        >
                          {t("inbox", { defaultValue: "Inbox" })}
                        </a>
                      </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"
                          }`}
                          id="notifupdate-tab"
                          data-toggle="tab"
                          role="tab"
                          aria-controls="notifupdate"
                          aria-selected="false"
                          onClick={() => setIsMessageActive(false)}
                        >
                          {t("update", { defaultValue: "Update" })}(
                          {notificationsUpdate?.length})
                        </a>
                      </TabsTrigger>
                    </TabsList>
                  </Tabs>
                  <div
                    className={`flex justify-center my-3 ${
                      isMessageActive ? "active" : ""
                    }`}
                  >
                    {notifications?.map((list: any) => (
                      <a className="" href={list.redirectUrl} key={list.id}>
                        <div className="">
                          <Image
                            priority={true}
                            src="/assets/avatar-profile.png"
                            alt="..."
                            width={5}
                            height={10}
                          />
                        </div>
                        <div className="">
                          <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(
                                list?.createdAt
                              ).getMinutes()}`}{" "}
                            </small>
                          </div>
                        </div>
                      </a>
                    ))}
                    <Link href="/inbox" legacyBehavior>
                      <p className="text-[15px] py-2" role="button">
                        {t("seeAll", { defaultValue: "See All" })}
                      </p>
                    </Link>
                  </div>
                  <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}
                      >
                        <div className="ml-4">
                          <Image
                            priority={true}
                            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>
                            <small>
                              {`${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>
                          </div>
                        </div>
                      </a>
                    ))}
                    <Link href="/inbox" legacyBehavior>
                      <p className="text-[15px] text-center py-2" role="button">
                        {t("seeAll", { defaultValue: "See All" })}
                      </p>
                    </Link>
                  </div>
                </PopoverContent>
              </Popover>

              {/* // Dropdown menu for roleId === 3 */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild className="cursor-pointer">
                  {detail !== undefined ? (
                    <div className="flex items-center gap-3 text-default-800">
                      <Image
                        priority={true}
                        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>
                      <span className="text-base me-2.5 lg:inline-block hidden">
                        <Icon icon="heroicons-outline:chevron-down"></Icon>
                      </span>
                    </div>
                  ) : (
                    ""
                  )}
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56 p-0" align="end">
                  <DropdownMenuGroup>
                    {[
                      {
                        name: "Profile & Settings",
                        icon: "heroicons:user",
                        href: "/profile",
                      },
                      {
                        name: "Dashboard",
                        icon: "material-symbols:dashboard",
                        href: "/dashboard",
                      },
                    ].map((item, index) => (
                      <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}
                        </DropdownMenuItem>
                      </Link>
                    ))}
                  </DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <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" />
                          {t("logOut", { defaultValue: "Log Out" })}
                        </button>
                      </Link>
                    </div>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          ) : (
            // 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-white hover:text-[#bb3523] hover:border hover:border-[#bb3523] text-center"
              >
                {t("logIn", { defaultValue: "Log In" })}
              </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", { defaultValue: "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", { defaultValue: "Category Reg" })}
                    </p>
                    <p className="text-base text-center">
                      {t("selectOne", { defaultValue: "Select One" })}
                    </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}`}>
                          {row.name}
                        </label>
                      </div>
                    ))}
                  </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"
                    >
                      {t("next", { defaultValue: "Next" })}{" "}
                    </Link>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </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)}
        >
          {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>
          ) : (
            <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>
      </div>

      {/* Mobile Menu */}
      {menuOpen && (
        <div className="custom-lg-button:hidden absolute bg-[#f7f7f7] dark:bg-slate-600 px-4 py-3 w-full space-y-3 z-50 ">
          <div className="flex flex-col gap-2">
            <NavigationMenu>
              <NavigationMenuList>
                <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"
                      >
                        <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"
                        />
                      </svg>
                      {t("content", { defaultValue: "Content" })}
                    </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"
                    >
                      <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", { defaultValue: "Image" })}
                      </p>
                    </NavigationMenuLink>
                    <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">
                            <FiYoutube className="mr-2" />
                            {t("video", { defaultValue: "Video" })}
                          </p>
                        </>
                      ) : (
                        <>
                          <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                            <FiYoutube className="mr-2" />
                            {t("video", { defaultValue: "Video" })}
                          </p>
                        </>
                      )}
                    </NavigationMenuLink>
                    <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", { defaultValue: "Text" })}
                      </p>
                    </NavigationMenuLink>
                    <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", { defaultValue: "Audio" })}{" "}
                      </p>
                    </NavigationMenuLink>
                  </NavigationMenuContent>
                </NavigationMenuItem>
                <NavigationMenuItem>
                  <Link href={prefixPath + "/schedule"} legacyBehavior passHref>
                    <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"
                        >
                          <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"
                          />
                        </svg>
                      </span>
                      {t("schedule", { defaultValue: "Schedule" })}
                    </NavigationMenuLink>
                  </Link>
                </NavigationMenuItem>
                <NavigationMenuItem>
                  <Link href={prefixPath + "/indeks"} legacyBehavior passHref>
                    <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"
                        >
                          <path
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
                            fill="currentColor"
                          />
                        </svg>
                      </span>
                      {t("index", { defaultValue: "Index" })}
                    </NavigationMenuLink>
                  </Link>
                </NavigationMenuItem>
              </NavigationMenuList>
            </NavigationMenu>
            <div className="flex flex-row justify-between mx-3">
              {roleId == undefined ? (
                ""
              ) : (
                <div
                  className="my-auto items-center cursor-pointer"
                  style={
                    Number(roleId) == 5 || Number(roleId) == 8
                      ? {
                          display: "none",
                        }
                      : {}
                  }
                >
                  <Link
                    href="https://spit.humas.polri.go.id"
                    className=""
                    target="_blank"
                    style={
                      menuActive == "indeks"
                        ? {
                            color: "#fff",
                          }
                        : {
                            color: "#1F1A17",
                          }
                    }
                    legacyBehavior
                  >
                    <div className="flex flex-row items-center gap-1">
                      <Icon icon="gravity-ui:database-fill" fontSize={25} />
                      <p className="text-xs font-semibold">Raw Data</p>
                    </div>
                  </Link>
                </div>
              )}
              {/* <div className="flex items-center space-x-1 mx-3 text-red-600">
              <span className="w-2 h-2 bg-red-500 rounded-full"></span>
              <span className="font-medium">Live</span>
            </div> */}
              <div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
                <a href="https://tvradio.polri.go.id/">
                  <Image
                    priority={true}
                    src="/assets/polriTv.png"
                    width={100}
                    height={120}
                    alt="polritv"
                    className="object-contain flex items-center"
                  />
                </a>
              </div>

              <div className="relative inline-block mx-3 text-left">
                <ThemeSwitcher />

                {/* Tombol Utama Bahasa
              <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
                <img
                  src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"}
                  alt={language === "id" ? "Ind" : "Eng"}
                  className="w-3 h-3"
                />
                <span>{language === "id" ? "Ind" : "Eng"}</span>
                <span className="text-gray-500">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32">
                    <path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" />
                  </svg>
                </span>
              </button> */}

                {/* Dropdown Menu
              {isOpen && (
                <div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
                  <button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}>
                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" />
                    <span>Ind</span>
                  </button>
                  <button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}>
                    <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" />
                    <span>Eng</span>
                  </button>
                </div>
              )} */}
              </div>
            </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 text-[13px] border rounded-full focus:outline-none dark:text-white w-full "
              />{" "}
            </div>

            <div className="flex justify-center items-center mx-3 gap-5">
              {/* {fullName ? (
              <>
                <DropdownMenu>
                  <DropdownMenuTrigger className="flex items-center gap-1">
                    <img className="h-12 w-12" src="/assets/avatar-profile.png" alt="avatar-profile" />
                    <a className="gap-2">
                      <p className="text-xs font-semibold">{fullName}</p>
                      <p className="text-xs">{`(${roleName})`}</p>
                    </a>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent>
                    <DropdownMenuItem>
                      <Link href="/profile" className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
                        <Icon icon="iconamoon:profile-circle-fill" />
                        {t("profile", { defaultValue: "Profile" })}
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Link href="/content-management/galery" className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
                        <Icon icon="stash:save-ribbon-light" />
                        {t("contentManagement", { defaultValue: "Content Management" })}
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Link href={"/"} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
                        <button type="submit" className="w-full flex items-center gap-2" onClick={onLogout}>
                          <Icon icon="iconamoon:exit-bold" />
                          {t("logOut", { defaultValue: "Log Out" })}
                        </button>
                      </Link>
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </>
            ) : (
              <>
                <Link href="/auth" className="px-4 py-[10px] bg-[#bb3523] text-white  font-semibold rounded-md hover:bg-[#bb3523]">
                  {t("logIn", { defaultValue: "Log In" })}
                </Link>
                <Dialog>
                  <DialogTrigger asChild>
                    <Button 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("register", { defaultValue: "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">Kategori Registrasi</p>
                      <p className="text-base text-center">Silahkan pilih salah satu</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}`}>
                            {row.name}
                          </label>
                        </div>
                      ))}
                    </div>
                    <div className="border-b-2 border-black"></div>
                    <DialogFooter>
                      <Link href={`/auth/registration?category=${category}`} className="bg-red-500 px-4 py-1 rounded-md border border-black text-white" type="submit">
                        Selanjutnya{" "}
                      </Link>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </>
            )} */}
              {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"
                        />
                      </a>
                    </PopoverTrigger>
                    <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"
                              }`}
                              id="notif-tab"
                              data-toggle="tab"
                              role="tab"
                              aria-controls="notif"
                              aria-selected="true"
                              onClick={() => setIsMessageActive(true)}
                            >
                              {t("inbox", { defaultValue: "Inbox" })}
                            </a>
                          </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"
                              }`}
                              id="notifupdate-tab"
                              data-toggle="tab"
                              role="tab"
                              aria-controls="notifupdate"
                              aria-selected="false"
                              onClick={() => setIsMessageActive(false)}
                            >
                              {t("update", { defaultValue: "Update" })}(
                              {notificationsUpdate?.length})
                            </a>
                          </TabsTrigger>
                        </TabsList>
                        <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}
                              >
                                <div className="ml-4">
                                  <Image
                                    priority={true}
                                    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>
                                  <small>
                                    {`${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>
                                </div>
                              </a>
                            ))}
                            <Link href="/inbox" legacyBehavior>
                              <p
                                className="text-[15px] text-center py-2"
                                role="button"
                              >
                                {t("seeAll", { defaultValue: "See All" })}
                              </p>
                            </Link>
                          </div>
                        </TabsContent>
                        <TabsContent value="notifupdate-tab">
                          <div className="">
                            {notificationsUpdate?.map((list: any) => (
                              <a
                                className="flex flex-row"
                                href={list.redirectUrl}
                                key={list.id}
                              >
                                <div className="ml-4">
                                  <Image
                                    priority={true}
                                    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>
                                    <small>
                                      {`${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>
                                  </div>
                                </div>
                              </a>
                            ))}
                            <Link href="/inbox/update" legacyBehavior>
                              <p
                                className="text-[15px] text-center py-2"
                                role="button"
                              >
                                {t("seeAll", { defaultValue: "See All" })}
                              </p>
                            </Link>
                          </div>
                        </TabsContent>
                      </Tabs>
                    </PopoverContent>
                  </Popover>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild className="cursor-pointer">
                      {detail !== undefined ? (
                        <div className="flex items-center gap-3 text-default-800">
                          <Image
                            priority={true}
                            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>
                          <span className="text-base me-2.5 lg:inline-block hidden">
                            <Icon icon="heroicons-outline:chevron-down"></Icon>
                          </span>
                        </div>
                      ) : (
                        ""
                      )}
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className="w-56 p-0" align="end">
                      <DropdownMenuGroup>
                        {[
                          {
                            name: t("profileSetting", {
                              defaultValue: "Profile Setting",
                            }),
                            icon: "heroicons:user",
                            href: "/profile",
                          },
                          {
                            name: t("contentManagement", {
                              defaultValue: "Content Management",
                            }),
                            icon: "stash:save-ribbon-duotone",
                            href: "/content-management/galery",
                          },
                        ].map((item, index) => (
                          <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}
                            </DropdownMenuItem>
                          </Link>
                        ))}
                      </DropdownMenuGroup>
                      <DropdownMenuSeparator />
                      <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"
                              />
                              {t("logOut", { defaultValue: "Log Out" })}
                            </button>
                          </Link>
                        </div>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </>
              ) : 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"
                        />
                      </a>
                    </PopoverTrigger>
                    <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" : ""
                              }`}
                              id="notif-tab"
                              data-toggle="tab"
                              role="tab"
                              aria-controls="notif"
                              aria-selected="true"
                              onClick={() => setIsMessageActive(true)}
                            >
                              {t("inbox", { defaultValue: "Inbox" })}
                            </a>
                          </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"
                              }`}
                              id="notifupdate-tab"
                              data-toggle="tab"
                              role="tab"
                              aria-controls="notifupdate"
                              aria-selected="false"
                              onClick={() => setIsMessageActive(false)}
                            >
                              {t("update", { defaultValue: "Update" })}(
                              {notificationsUpdate?.length})
                            </a>
                          </TabsTrigger>
                        </TabsList>
                      </Tabs>
                      <div
                        className={`flex justify-center my-3 ${
                          isMessageActive ? "active" : ""
                        }`}
                      >
                        {notifications?.map((list: any) => (
                          <a className="" href={list.redirectUrl} key={list.id}>
                            <div className="">
                              <Image
                                priority={true}
                                width={5}
                                height={10}
                                src="/assets/avatar-profile.png"
                                alt="..."
                              />
                            </div>
                            <div className="">
                              <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(
                                    list?.createdAt
                                  ).getMinutes()}`}{" "}
                                </small>
                              </div>
                            </div>
                          </a>
                        ))}
                        <Link href="/inbox" legacyBehavior>
                          <p className="text-[15px] py-2" role="button">
                            {t("seeAll", { defaultValue: "See All" })}
                          </p>
                        </Link>
                      </div>
                      <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}
                          >
                            <div className="ml-4">
                              <Image
                                priority={true}
                                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>
                                <small>
                                  {`${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>
                              </div>
                            </div>
                          </a>
                        ))}
                        <Link href="/inbox" legacyBehavior>
                          <p
                            className="text-[15px] text-center py-2"
                            role="button"
                          >
                            {t("seeAll", { defaultValue: "See All" })}
                          </p>
                        </Link>
                      </div>
                    </PopoverContent>
                  </Popover>

                  {/* // Dropdown menu for roleId === 3 */}
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild className="cursor-pointer">
                      {detail !== undefined ? (
                        <div className="flex items-center gap-3 text-default-800">
                          <Image
                            priority={true}
                            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>
                          <span className="text-base me-2.5 lg:inline-block hidden">
                            <Icon icon="heroicons-outline:chevron-down"></Icon>
                          </span>
                        </div>
                      ) : (
                        ""
                      )}
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className="w-56 p-0" align="end">
                      <DropdownMenuGroup>
                        {[
                          {
                            name: "Profile & Settings",
                            icon: "heroicons:user",
                            href: "/profile",
                          },
                          {
                            name: "Dashboard",
                            icon: "material-symbols:dashboard",
                            href: "/dashboard",
                          },
                        ].map((item, index) => (
                          <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}
                            </DropdownMenuItem>
                          </Link>
                        ))}
                      </DropdownMenuGroup>
                      <DropdownMenuSeparator />
                      <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"
                              />
                              {t("logOut", { defaultValue: "Log Out" })}
                            </button>
                          </Link>
                        </div>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </>
              ) : (
                // 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-[50%] px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-white hover:text-[#bb3523] hover:border hover:border-[#bb352 text-center"
                  >
                    {t("logIn", { defaultValue: "Log In" })}
                  </Link>
                  <Dialog>
                    <DialogTrigger asChild>
                      <Button
                        size="sm"
                        className="w-[50%] px-4 h-8 border bg-white border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white"
                      >
                        {t("register", { defaultValue: "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", { defaultValue: "Category Reg" })}
                        </p>
                        <p className="text-base text-center">
                          {t("selectOne", { defaultValue: "Select One" })}
                        </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}`}
                            >
                              {row.name}
                            </label>
                          </div>
                        ))}
                      </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"
                        >
                          {t("next", { defaultValue: "Next" })}{" "}
                        </Link>
                      </DialogFooter>
                    </DialogContent>
                  </Dialog>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Navbar;