From 3f1ffdd15ad747fe3b310fca698017a0b74a18ec Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Wed, 1 Jan 2025 23:27:38 +0800
Subject: [PATCH] feat:add content rewrite, add create AI

---
 components/form/content/image-form.tsx        |  22 +-
 components/form/content/spit-convert-form.tsx | 219 +++++++--
 components/landing-page/navbar.tsx            | 420 +++++++++++++++---
 components/partials/header/profile-info.tsx   |  91 +---
 4 files changed, 556 insertions(+), 196 deletions(-)

diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx
index 61d426ed..3d7c3574 100644
--- a/components/form/content/image-form.tsx
+++ b/components/form/content/image-form.tsx
@@ -321,9 +321,10 @@ export default function FormImage() {
   };
 
   const save = async (data: ImageSchema) => {
+    const finalTitle = isSwitchOn ? title : data.title;
     const requestData = {
       ...data,
-      title: data.title,
+      title: finalTitle,
       description: data.description,
       htmlDescription: data.description,
       fileTypeId,
@@ -614,31 +615,30 @@ export default function FormImage() {
                   </div>
                   <div>
                     <div className="my-5">
-                      <Button
+                      <p
                         // variant={"outline"}
                         color="primary"
                         onClick={handleGenerateArtikel}
+                        className="bg-blue-500 text-white px-3 py-2 rounded-md"
                       >
                         Generate Article
-                      </Button>
+                      </p>
                     </div>
 
                     {isGeneratedArticle && (
-                      <div className="mt-3 pb-0">
+                      <div className="mt-3 pb-0 flex flex-row ">
                         {articleIds.map((id: string, index: number) => (
-                          <Button
+                          <p
                             key={index}
-                            className={`btn m-1 ${
+                            className={`btn mr-3 ${
                               selectedArticleId === id
-                                ? "btn-warning"
-                                : "btn-success"
+                                ? "bg-green-500 text-white px-3 py-2 rounded-md"
+                                : "border-2 border-green-500 text-green-500 px-3 py-2 rounded-md"
                             }`}
                             onClick={() => handleArticleIdClick(id)}
-                            variant={"outline"}
-                            color="success"
                           >
                             {id}
-                          </Button>
+                          </p>
                         ))}
                       </div>
                     )}
diff --git a/components/form/content/spit-convert-form.tsx b/components/form/content/spit-convert-form.tsx
index 7a0210d9..12d81890 100644
--- a/components/form/content/spit-convert-form.tsx
+++ b/components/form/content/spit-convert-form.tsx
@@ -45,6 +45,8 @@ import "swiper/css";
 import "swiper/css/navigation";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
 import { request } from "http";
+import { generateDataArticle, getDetailArticle } from "@/service/content/ai";
+import { getCookiesDecrypt } from "@/lib/utils";
 
 const imageSchema = z.object({
   contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
@@ -53,6 +55,9 @@ const imageSchema = z.object({
     .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   contentCreator: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
+  contentRewriteDescription: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
 });
 
 type Category = {
@@ -99,6 +104,17 @@ export default function FormConvertSPIT() {
   const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
   const [detailThumb, setDetailThumb] = useState<any>([]);
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
+  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
+  const roleId = getCookiesDecrypt("urie");
+  const [articleIds, setArticleIds] = useState<string[]>([]);
+  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
+  const [articleBody, setArticleBody] = useState<string>("");
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
+    null
+  );
+  const [detailData, setDetailData] = useState<any>(null);
+  const [selectedFileType, setSelectedFileType] = useState("original");
 
   const [selectedTarget, setSelectedTarget] = useState("");
   const [unitSelection, setUnitSelection] = useState({
@@ -232,11 +248,15 @@ export default function FormConvertSPIT() {
   };
 
   const save = async (data: any) => {
+    const description =
+      selectedFileType === "original"
+        ? data.contentDescription
+        : data.contentRewriteDescription;
     const requestData = {
       spitId: id,
       title: data.contentTitle,
-      description: data.contentDescription,
-      htmlDescription: data.contentDescription,
+      description,
+      htmlDescription: description,
       tags: "siap",
       categoryId: selectedCategoryId,
       publishedFor: "6",
@@ -274,6 +294,72 @@ export default function FormConvertSPIT() {
     });
   };
 
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
+
+  // const handleRewriteClick = () => {
+  //   setShowRewriteEditor(true);
+  // };
+
+  const handleRewriteClick = async () => {
+    const request = {
+      advConfig: selectedAdvConfig,
+      style: "friendly",
+      website: "None",
+      connectToWeb: true,
+      lang: "id",
+      pointOfView: "None",
+      title: detail?.contentTitle,
+      imageSource: "Web",
+      mainKeyword: detail?.contentTitle,
+      additionalKeywords: detail?.contentTitle,
+      targetCountry: null,
+      articleSize: "news",
+      projectId: 2,
+      createdBy: roleId,
+      clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
+    };
+
+    const res = await generateDataArticle(request);
+    close();
+
+    if (res.error) {
+      console.error(res.message);
+      return false;
+    }
+
+    const newArticleId = res?.data?.data?.id;
+    setIsGeneratedArticle(true);
+
+    setArticleIds((prevIds: string[]) => {
+      if (prevIds.length < 5) {
+        return [...prevIds, newArticleId];
+      } else {
+        const updatedIds = [...prevIds];
+        updatedIds[4] = newArticleId;
+        return updatedIds;
+      }
+    });
+
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+    setShowRewriteEditor(true);
+  };
+
+  const handleArticleIdClick = async (id: string) => {
+    const res = await getDetailArticle(id);
+    const articleData = res?.data?.data;
+
+    const cleanArticleBody = articleData?.articleBody?.replace(
+      /<img[^>]*>/g,
+      ""
+    );
+    const articleImagesData = articleData?.imagesUrl?.split(",");
+
+    setArticleBody(cleanArticleBody || "");
+    setDetailData(articleData);
+    setSelectedArticleId(id);
+    // setArticleImages(articleImagesData || []);
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       {detail !== undefined ? (
@@ -330,34 +416,109 @@ export default function FormConvertSPIT() {
                     </Select>
                   </div>
                 </div>
-
-                <div className="py-3">
-                  <Label>Deskripsi</Label>
-                  <Controller
-                    control={control}
-                    name="contentDescription"
-                    render={({ field: { onChange, value } }) => (
-                      <JoditEditor
-                        ref={editor}
-                        value={detail?.contentDescription}
-                        onChange={onChange}
-                        className="dark:text-black"
-                      />
-                    )}
-                  />
-                  {errors.contentDescription?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.contentDescription.message}
-                    </p>
-                  )}
-                </div>
-                <div className="my-5">
-                  <Button
-                    // variant={"outline"}
-                    color="primary"
+                <div>
+                  <RadioGroup
+                    onValueChange={(value) => setSelectedFileType(value)}
+                    value={selectedFileType}
                   >
-                    Content Rewrite
-                  </Button>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="original" id="original-file" />
+                      <Label htmlFor="original-file">
+                        Select Original File
+                      </Label>
+                    </div>
+
+                    <div>
+                      <div className="py-3">
+                        <Label>Deskripsi</Label>
+                        <Controller
+                          control={control}
+                          name="contentDescription"
+                          render={({ field: { onChange, value } }) => (
+                            <JoditEditor
+                              ref={editor}
+                              value={detail?.contentDescription}
+                              onChange={onChange}
+                              className="dark:text-black"
+                            />
+                          )}
+                        />
+                        {errors.contentDescription?.message && (
+                          <p className="text-red-400 text-sm">
+                            {errors.contentDescription.message}
+                          </p>
+                        )}
+                      </div>
+                      <div className="my-2">
+                        <p
+                          onClick={handleRewriteClick}
+                          className="bg-blue-500 text-white py-2 px-4 rounded w-[200px]"
+                        >
+                          Content Rewrite
+                        </p>
+                      </div>
+                      {showRewriteEditor && (
+                        <div>
+                          {isGeneratedArticle && (
+                            <div className="mt-3 pb-0 flex flex-row ">
+                              {articleIds.map((id: string, index: number) => (
+                                // <Button
+                                //   key={index}
+                                //   className={`btn mr-2 ${
+                                //     selectedArticleId === id
+                                //       ? "btn-warning"
+                                //       : "btn-success"
+                                //   }`}
+                                //   onClick={() => handleArticleIdClick(id)}
+                                //   variant={"outline"}
+                                //   color="success"
+                                // >
+                                //   {id}
+                                // </Button>
+                                <p
+                                  key={index}
+                                  className={`btn mr-3 ${
+                                    selectedArticleId === id
+                                      ? "bg-green-500 text-white px-3 py-2 rounded-md"
+                                      : "border-2 border-green-500 text-green-500 px-3 py-2 rounded-md"
+                                  }`}
+                                  onClick={() => handleArticleIdClick(id)}
+                                >
+                                  {id}
+                                </p>
+                              ))}
+                            </div>
+                          )}
+                          <div className="flex items-center space-x-2 mt-3">
+                            <RadioGroupItem value="rewrite" id="rewrite-file" />
+                            <Label htmlFor="rewrite-file">
+                              Select File Hasil Rewrite
+                            </Label>
+                          </div>
+                          <div className="py-3">
+                            <Label>File hasil Rewrite</Label>
+                            <Controller
+                              control={control}
+                              name="contentRewriteDescription"
+                              render={({ field: { onChange, value } }) => (
+                                <JoditEditor
+                                  ref={editor}
+                                  value={articleBody || value}
+                                  onChange={onChange}
+                                  className="dark:text-black"
+                                />
+                              )}
+                            />
+                            {errors.contentRewriteDescription?.message && (
+                              <p className="text-red-400 text-sm">
+                                {errors.contentRewriteDescription.message}
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </RadioGroup>
                 </div>
                 <div>
                   <Label className="text-xl text-black">File Media</Label>
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 39029e31..5ccec592 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, useRouter } 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";
@@ -56,7 +71,7 @@ const Navbar = () => {
     setLanguage(lang);
     setIsOpen(false);
   };
-  
+
   useEffect(() => {
     async function initState() {
       const response = await getInfoProfile();
@@ -68,25 +83,47 @@ const Navbar = () => {
 
     initState();
   }, []);
-    
 
   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-20 py-4 gap-3">
         {/* Logo */}
         <Link href="/" className="flex items-center">
-          <img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-fit h-20 md:h-24" />
+          <img
+            src="/assets/mediahub-logo.gif"
+            alt="Media Hub Logo"
+            className="w-fit h-20 md:h-24"
+          />
         </Link>
 
         {/* Mobile Menu Toggle */}
-        <button className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
+        <button
+          className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden"
+          onClick={() => setMenuOpen(!menuOpen)}
+        >
           {menuOpen ? (
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <path fill="#000" 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="#000"
+                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="#000" 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="#000"
+                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>
@@ -99,7 +136,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"
@@ -109,25 +153,56 @@ const Navbar = () => {
                   </a>
                 </NavigationMenuTrigger>
                 <NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full">
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 ">
+                  <NavigationMenuLink
+                    onClick={() =>
+                      router.push(
+                        generateLocalizedPath("/video/filter", String(locale))
+                      )
+                    }
+                    className="flex items-start gap-1.5 p-2 "
+                  >
                     <p className="text-slate-600 dark:text-white hover:text-[#bb3523]  flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiYoutube className="mr-2" />
                       Video
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 ">
+                  <NavigationMenuLink
+                    onClick={() =>
+                      router.push(
+                        generateLocalizedPath("/audio/filter", String(locale))
+                      )
+                    }
+                    className="flex place-items-start gap-1.5 p-2 "
+                  >
                     <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiMusic className="mr-2" />
                       Audio
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2">
+                  <NavigationMenuLink
+                    onClick={() =>
+                      router.push(
+                        generateLocalizedPath("/image/filter", String(locale))
+                      )
+                    }
+                    className="flex place-items-start gap-1.5 p-2"
+                  >
                     <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiImage className="mr-2" />
                       Foto
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2">
+                  <NavigationMenuLink
+                    onClick={() =>
+                      router.push(
+                        generateLocalizedPath(
+                          "/document/filter",
+                          String(locale)
+                        )
+                      )
+                    }
+                    className="flex place-items-start gap-1.5 p-2"
+                  >
                     <p className="text-slate-600 dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiFile className="mr-2" />
                       Teks
@@ -139,7 +214,14 @@ const Navbar = () => {
                 <Link href="/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">
+                      <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"
@@ -154,7 +236,14 @@ const Navbar = () => {
                 <Link href="/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">
+                      <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"
@@ -176,22 +265,40 @@ const Navbar = () => {
           </Link>
           <div className="flex items-center space-x-1  ">
             <a href="https://tvradio.polri.go.id/">
-              <img src="/assets/polriTv.png" className="w-auto lg:max-w-screen-lg h-10 flex-auto " />
+              <img
+                src="/assets/polriTv.png"
+                className="w-auto lg:max-w-screen-lg h-10 flex-auto "
+              />
             </a>
           </div>
 
           <div className="relative inline-block text-left">
             {/* Tombol Utama */}
-            <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
+            <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"}
+                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
+                  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>
@@ -199,12 +306,30 @@ const Navbar = () => {
             {/* 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" />
+                <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" />
+                <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>
@@ -212,9 +337,18 @@ const Navbar = () => {
           </div>
           <ThemeSwitcher />
           <div className="relative text-gray-600 dark:text-white">
-            <input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white" />
+            <input
+              type="text"
+              placeholder="Pencarian"
+              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"
@@ -224,7 +358,7 @@ const Navbar = () => {
               </svg>
             </span>
           </div>
-          <div className="flex items-center space-x-2">
+          {/* <div className="flex items-center space-x-2">
             {fullName ? (
               <>
                 <DropdownMenu>
@@ -267,16 +401,27 @@ const Navbar = () => {
                 </Link>{" "}
               </>
             )}
-          </div>
+          </div> */}
 
-          {/* {roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? (
+          {roleId === "5" ||
+          roleId === "6" ||
+          roleId === "7" ||
+          roleId === "8" ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="cursor-pointer">
                 {detail !== undefined ? (
                   <div className="flex items-center gap-3 text-default-800">
-                    <Image src={"https://netidhub.com/assets/img/user-avatar.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">{detail?.fullname}</div>
+                      <div className="text-sm font-medium capitalize lg:block hidden">
+                        {detail?.fullname}
+                      </div>
                       <p className="text-xs">({detail?.fullname})</p>
                     </div>
                     <span className="text-base me-2.5 lg:inline-block hidden">
@@ -297,11 +442,15 @@ const Navbar = () => {
                     },
                     {
                       name: "Kelola Konten",
-                      icon: "heroicons:megaphone",
-                      href: "/dashboard",
+                      icon: "stash:save-ribbon-duotone",
+                      href: "/content-management",
                     },
                   ].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}
@@ -313,7 +462,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" />
                         Log out
                       </button>
@@ -322,15 +475,30 @@ const Navbar = () => {
                 </DropdownMenuItem>
               </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" ? (
             // Dropdown menu for roleId === 3
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="cursor-pointer">
                 {detail !== undefined ? (
                   <div className="flex items-center gap-3 text-default-800">
-                    <Image src={"https://netidhub.com/assets/img/user-avatar.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">{detail?.fullname}</div>
+                      <div className="text-sm font-medium capitalize lg:block hidden">
+                        {detail?.fullname}
+                      </div>
                       <p className="text-xs">({detail?.fullname})</p>
                     </div>
                     <span className="text-base me-2.5 lg:inline-block hidden">
@@ -351,11 +519,15 @@ const Navbar = () => {
                     },
                     {
                       name: "Dashboard",
-                      icon: "heroicons:megaphone",
+                      icon: "material-symbols:dashboard",
                       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}
@@ -367,7 +539,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" />
                         Log out
                       </button>
@@ -379,14 +555,20 @@ const Navbar = () => {
           ) : (
             // Masuk and Daftar buttons for roleId === null
             <div className="flex justify-center items-center mx-3 gap-5">
-              <Link href="/auth" className="w-full lg:w-fit 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-fit px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
+              >
                 Masuk
               </Link>
-              <Link href="#" className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white">
+              <Link
+                href="#"
+                className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white"
+              >
                 Daftar
               </Link>
             </div>
-          )} */}
+          )}
         </div>
       </div>
 
@@ -398,7 +580,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" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg
+                      className="mx-2"
+                      width="25"
+                      height="24"
+                      viewBox="0 0 25 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
                       <path
                         d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
                         fill="currentColor"
@@ -408,25 +597,56 @@ const Navbar = () => {
                   </a>
                 </NavigationMenuTrigger>
                 <NavigationMenuContent className="p-0 rounded-md overflow-hidden w-full">
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white">
+                  <NavigationMenuLink
+                    onClick={() =>
+                      router.push(
+                        generateLocalizedPath("/video/filter", String(locale))
+                      )
+                    }
+                    className="flex items-start gap-1.5 p-2 hover:bg-white"
+                  >
                     <p className="text-slate-600 hover:text-[#bb3523]  flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiYoutube className="mr-2" />
                       Video
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
+                  <NavigationMenuLink
+                    onClick={() =>
+                      router.push(
+                        generateLocalizedPath("/audio/filter", String(locale))
+                      )
+                    }
+                    className="flex place-items-start gap-1.5 p-2 hover:bg-white"
+                  >
                     <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiMusic className="mr-2" />
                       Audio
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
+                  <NavigationMenuLink
+                    onClick={() =>
+                      router.push(
+                        generateLocalizedPath("/image/filter", String(locale))
+                      )
+                    }
+                    className="flex place-items-start gap-1.5 p-2 hover:bg-white"
+                  >
                     <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiImage className="mr-2" />
                       Foto
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
+                  <NavigationMenuLink
+                    onClick={() =>
+                      router.push(
+                        generateLocalizedPath(
+                          "/document/filter",
+                          String(locale)
+                        )
+                      )
+                    }
+                    className="flex place-items-start gap-1.5 p-2 hover:bg-white"
+                  >
                     <p className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2 cursor-pointer">
                       <FiFile className="mr-2" />
                       Teks
@@ -438,7 +658,14 @@ const Navbar = () => {
                 <Link href="/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">
+                      <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"
@@ -453,7 +680,14 @@ const Navbar = () => {
                 <Link href="/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">
+                      <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"
@@ -475,21 +709,39 @@ 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/">
-                <img src="/assets/polriTv.png" className="w-21 h-11 flex items-center" />
+                <img
+                  src="/assets/polriTv.png"
+                  className="w-21 h-11 flex items-center"
+                />
               </a>
             </div>
             <div className="relative inline-block mx-3 text-left">
               {/* Tombol Utama Bahasa */}
-              <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
+              <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"}
+                  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
+                    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>
@@ -497,12 +749,30 @@ const Navbar = () => {
               {/* 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" />
+                  <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" />
+                  <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>
@@ -511,25 +781,41 @@ const Navbar = () => {
           </div>
 
           <div className=" py-1 flex items-center mx-3">
-            <input type="text" placeholder="Pencarian" className="border rounded-full w-full text-sm text-center text-gray-600" />
+            <input
+              type="text"
+              placeholder="Pencarian"
+              className="border rounded-full w-full text-sm text-center text-gray-600"
+            />
           </div>
           <div className="flex justify-center items-center mx-3 gap-5">
             {fullName ? (
               <p>{fullName}</p>
             ) : (
               <>
-                <Link href="/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-[#bb3523]">
+                <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">
+                <Link
+                  href="#"
+                  className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white"
+                >
                   Daftar
                 </Link>{" "}
               </>
             )}
-            <Link href="/auth" className="w-full lg:w-fit 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-fit px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
+            >
               Masuk
             </Link>
-            <Link href="#" className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white">
+            <Link
+              href="#"
+              className="w-full lg:w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] text-center hover:text-white"
+            >
               Daftar
             </Link>
           </div>
diff --git a/components/partials/header/profile-info.tsx b/components/partials/header/profile-info.tsx
index 3c505c78..39e0b666 100644
--- a/components/partials/header/profile-info.tsx
+++ b/components/partials/header/profile-info.tsx
@@ -71,7 +71,7 @@ const ProfileInfo = () => {
           {detail !== undefined ? (
             <div className="flex items-center gap-3 text-default-800">
               <Image
-                src={"https://netidhub.com/assets/img/user-avatar.png"}
+                src={"/assets/avatar-profile.png"}
                 alt={"Image"}
                 width={36}
                 height={36}
@@ -120,21 +120,6 @@ const ProfileInfo = () => {
                 icon: "heroicons:user",
                 href: "/profile",
               },
-              // {
-              //   name: "Billing",
-              //   icon: "heroicons:megaphone",
-              //   href: "/dashboard",
-              // },
-              // {
-              //   name: "Settings",
-              //   icon: "heroicons:paper-airplane",
-              //   href: "/dashboard",
-              // },
-              // {
-              //   name: "Keyboard shortcuts",
-              //   icon: "heroicons:language",
-              //   href: "/dashboard",
-              // },
             ].map((item, index) => (
               <Link
                 href={item.href}
@@ -149,79 +134,7 @@ const ProfileInfo = () => {
             ))}
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
-          <DropdownMenuGroup>
-            {/* <Link href="/dashboard" 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="heroicons:user-group" className="w-4 h-4" />
-                team
-              </DropdownMenuItem>
-            </Link>
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 ">
-                <Icon icon="heroicons:user-plus" className="w-4 h-4" />
-                Invite user
-              </DropdownMenuSubTrigger>
-              <DropdownMenuPortal>
-                <DropdownMenuSubContent>
-                  {[
-                    {
-                      name: "email",
-                    },
-                    {
-                      name: "message",
-                    },
-                    {
-                      name: "facebook",
-                    },
-                  ].map((item, index) => (
-                    <Link
-                      href="/dashboard"
-                      key={`message-sub-${index}`}
-                      className="cursor-pointer"
-                    >
-                      <DropdownMenuItem className="text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
-                        {item.name}
-                      </DropdownMenuItem>
-                    </Link>
-                  ))}
-                </DropdownMenuSubContent>
-              </DropdownMenuPortal>
-            </DropdownMenuSub>
-            <Link href="/dashboard">
-              <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
-                <Icon icon="heroicons:variable" className="w-4 h-4" />
-                Github
-              </DropdownMenuItem>
-            </Link>
-
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
-                <Icon icon="heroicons:phone" className="w-4 h-4" />
-                Support
-              </DropdownMenuSubTrigger>
-              <DropdownMenuPortal>
-                <DropdownMenuSubContent>
-                  {[
-                    {
-                      name: "portal",
-                    },
-                    {
-                      name: "slack",
-                    },
-                    {
-                      name: "whatsapp",
-                    },
-                  ].map((item, index) => (
-                    <Link href="/dashboard" key={`message-sub-${index}`}>
-                      <DropdownMenuItem className="text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
-                        {item.name}
-                      </DropdownMenuItem>
-                    </Link>
-                  ))}
-                </DropdownMenuSubContent>
-              </DropdownMenuPortal>
-            </DropdownMenuSub> */}
-          </DropdownMenuGroup>
+          <DropdownMenuGroup></DropdownMenuGroup>
           <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize my-1 px-3 cursor-pointer">
             <div>
               <Link href={"/auth"}>