diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx
index 46e77a78..85118303 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx
@@ -8,7 +8,15 @@ import { Link, useRouter } from "@/i18n/routing";
 import { Textarea } from "@/components/ui/textarea";
 import { BarWave } from "react-cssfx-loading";
 import { useToast } from "@/components/ui/use-toast";
-import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
+import {
+  checkWishlistStatus,
+  createPublicSuggestion,
+  deletePublicSuggestion,
+  deleteWishlist,
+  getDetail,
+  getPublicSuggestionList,
+  saveWishlist,
+} from "@/service/landing/landing";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { close, error, loading, warning } from "@/config/swal";
 import { useTranslations } from "next-intl";
@@ -18,7 +26,6 @@ import Swal from "sweetalert2";
 import parse from "html-react-parser";
 import { postActivityLog } from "@/service/content/content";
 
-
 const DetailAudio = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
   const [selectedTab, setSelectedTab] = useState("video");
@@ -196,7 +203,8 @@ const DetailAudio = () => {
 
     xhr.addEventListener("readystatechange", () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
-        const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream";
+        const contentType =
+          xhr.getResponseHeader("content-type") || "application/octet-stream";
         const extension = contentType.split("/")[1];
         const filename = `${name}.${extension}`;
 
@@ -228,7 +236,7 @@ const DetailAudio = () => {
     { label: "S", value: "1066 x 599 px" },
     { label: "XS", value: "800 x 450 px" },
   ];
- async function sendSuggestionParent() {
+  async function sendSuggestionParent() {
     if (message?.length > 3) {
       loading();
       const data = {
@@ -280,41 +288,45 @@ const DetailAudio = () => {
     document.querySelector(`#${e}`)?.classList.toggle("none");
     setVisibleInput(visibleInput === e ? null : e);
   };
-   async function sendSuggestionChild(parentId: any) {
-      const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
-  
-      if (inputElement && inputElement.value.length > 3) {
-        loading();
-        const data = {
-          mediaUploadId: slug?.split("-")?.[0],
-          message: inputElement.value,
-          parentId,
-        };
-  
-        console.log(data);
-        const response = await createPublicSuggestion(data);
-        console.log(response);
-        const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
-        console.log(responseGet.data?.data);
-        setListSuggestion(responseGet.data?.data);
-  
-        // Reset input field
-        inputElement.value = "";
-  
-        // document.querySelector("#comment-id-" + parentId)?.style.display = "none";
-  
-        close();
-      }
-    }
-   async function deleteDataSuggestion(dataId: any) {
+  async function sendSuggestionChild(parentId: any) {
+    const inputElement = document.querySelector(
+      `#input-comment-${parentId}`
+    ) as HTMLInputElement;
+
+    if (inputElement && inputElement.value.length > 3) {
       loading();
-      const response = await deletePublicSuggestion(dataId);
+      const data = {
+        mediaUploadId: slug?.split("-")?.[0],
+        message: inputElement.value,
+        parentId,
+      };
+
+      console.log(data);
+      const response = await createPublicSuggestion(data);
       console.log(response);
-      const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
-      console.log(responseGet.data?.data);
-      setListSuggestion(responseGet.data?.data);
+      const responseGet: any = await getPublicSuggestionList(
+        slug?.split("-")?.[0]
+      );
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
+
+      // Reset input field
+      inputElement.value = "";
+
+      // document.querySelector("#comment-id-" + parentId)?.style.display = "none";
+
       close();
     }
+  }
+  async function deleteDataSuggestion(dataId: any) {
+    loading();
+    const response = await deletePublicSuggestion(dataId);
+    console.log(response);
+    const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
+    console.log(responseGet?.data?.data);
+    setListSuggestion(responseGet?.data?.data);
+    close();
+  }
   const deleteData = (dataId: any) => {
     MySwal.fire({
       title: "Delete Comment",
@@ -331,17 +343,17 @@ const DetailAudio = () => {
     });
   };
   const postDataChild = (id: any) => {
-      const checkMessage = checkMaliciousText(message);
-      if (checkMessage == "") {
-        if (Number(userRoleId) < 1 || userRoleId == undefined) {
-          router.push("/auth");
-        } else {
-          sendSuggestionChild(id);
-        }
+    const checkMessage = checkMaliciousText(message);
+    if (checkMessage == "") {
+      if (Number(userRoleId) < 1 || userRoleId == undefined) {
+        router.push("/auth");
       } else {
-        warning(checkMessage);
+        sendSuggestionChild(id);
       }
-    };
+    } else {
+      warning(checkMessage);
+    }
+  };
   return (
     <>
       <div className="min-h-screen px-4 md:px-24 py-4">
@@ -351,13 +363,23 @@ const DetailAudio = () => {
           <div className="md:w-3/4">
             <div className="relative flex justify-center">
               <img src="/assets/audio-btn.png" />
-              <BarWave color="#ffc831" width="60px" height="25px" duration="2s" />
+              <BarWave
+                color="#ffc831"
+                width="60px"
+                height="25px"
+                duration="2s"
+              />
               <div className="absolute top-4 left-4"></div>
             </div>
             {/* Footer Informasi */}
             <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
               <p className="flex flex-row items-center">
-                oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
+                oleh&nbsp;
+                <span className="font-semibold text-black">
+                  {detailDataAudio?.uploadedBy?.userLevel?.name}
+                </span>
+                &nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt}{" "}
+                WIB&nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp;
                 {detailDataAudio?.clickCount}
@@ -366,20 +388,33 @@ const DetailAudio = () => {
             </div>
             {/* Keterangan */}
             <div className="md:w-3/4">
-              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
-              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">
+                {detailDataAudio?.title}
+              </h1>
+              <div
+                className="font-light text-justify"
+                dangerouslySetInnerHTML={{
+                  __html: detailDataAudio?.htmlDescription,
+                }}
+              />
             </div>
           </div>
 
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 h-fit bg-gray-300 rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">Hapus</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">Simpan</p>
               </a>
@@ -388,13 +423,20 @@ const DetailAudio = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataAudio?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataAudio?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataAudio?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataAudio?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -403,15 +445,27 @@ const DetailAudio = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Audio</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              Opsi Ukuran Audio
+            </h4>
 
             <div className="border-t border-black my-4"></div>
 
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -424,15 +478,30 @@ const DetailAudio = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>Download Semua File?</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
-              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               Download
             </button>
@@ -450,8 +519,15 @@ const DetailAudio = () => {
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">{t("comment")}</p>
-            <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+            <Textarea
+              placeholder="Type your comments here."
+              className="flex w-full pb-12"
+              onChange={getInputValue}
+            />
+            <button
+              onClick={() => postData()}
+              className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
+            >
               {t("send")}
             </button>
           </div>
@@ -462,13 +538,24 @@ const DetailAudio = () => {
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
-                  <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                  <img
+                    src={data?.suggestionFrom?.profilePictureUrl}
+                    className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
+                    onError={addDefaultProfile}
+                    alt=""
+                  />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
-                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {Number(data.suggestionFrom?.roleId) == 2 ||
+                      Number(data.suggestionFrom?.roleId) == 3 ||
+                      Number(data.suggestionFrom?.roleId) == 4
+                        ? "HUMAS POLRI"
+                        : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
-                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                      {data?.message}
+                    </p>
                     <div>
                       <a
                         style={
@@ -481,11 +568,16 @@ const DetailAudio = () => {
                         onClick={() => showInput(`comment-id-${data.id}`)}
                         className="mr-2"
                       >
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("reply")}
+                        </small>
                       </a>
-                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                      {Number(data.suggestionFrom?.id) == Number(userId) ||
+                      Number(userRoleId) == 2 ? (
                         <a onClick={() => deleteData(data.id)}>
-                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                            {t("delete")}
+                          </small>
                         </a>
                       ) : (
                         ""
@@ -494,14 +586,25 @@ const DetailAudio = () => {
                   </div>
                 </div>
                 {visibleInput === `comment-id-${data.id}` && (
-                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                  <div
+                    id={`comment-id-${data.id}`}
+                    className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
+                  >
+                    <Textarea
+                      id={`input-comment-${data.id}`}
+                      className="p-4 focus:outline-none focus:border-sky-500"
+                      placeholder={t("enterReply")}
+                    />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
+                          {t("send")}
+                        </small>
                       </a>
                       <a onClick={() => showInput(`comment-id-${data.id}`)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("cancel")}
+                        </small>
                       </a>
                     </div>
                   </div>
@@ -511,30 +614,51 @@ const DetailAudio = () => {
                   ? data.children?.map((child1: any) => (
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
-                          <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
+                          <img
+                            src={child1.suggestionFrom?.profilePictureUrl}
+                            onError={addDefaultProfile}
+                            alt=""
+                            className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
+                          />
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
-                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
-                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                              <b>
+                                {Number(child1.suggestionFrom?.roleId) == 2 ||
+                                Number(child1.suggestionFrom?.roleId) == 3 ||
+                                Number(child1.suggestionFrom?.roleId) == 4
+                                  ? "HUMAS POLRI"
+                                  : child1.suggestionFrom?.fullname}
+                              </b>{" "}
+                              {getPublicLocaleTimestamp(
+                                new Date(child1.createdAt)
+                              )}
+                            </p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                              {parse(String(child1?.message))}
                             </p>
-                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
                             <div>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                  Number(child1.suggestionFrom?.id) ==
+                                  Number(userId)
                                     ? {
                                         display: "none",
                                       }
                                     : {}
                                 }
-                                onClick={() => showInput(`comment-id-${child1.id}`)}
+                                onClick={() =>
+                                  showInput(`comment-id-${child1.id}`)
+                                }
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("reply")}
+                                </small>
                               </a>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                  Number(child1.suggestionFrom?.id) ==
+                                  Number(userId)
                                     ? {}
                                     : {
                                         display: "none",
@@ -542,21 +666,39 @@ const DetailAudio = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("delete")}
+                                </small>
                               </a>
                             </div>
                           </div>
                         </div>
 
                         {visibleInput === `comment-id-${child1.id}` && (
-                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                          <div
+                            id={`comment-id-${child1.id}`}
+                            className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
+                          >
+                            <Textarea
+                              name=""
+                              className="mt-2 "
+                              id={`input-comment-${child1.id}`}
+                              placeholder={t("enterReply")}
+                            />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("send")}
+                                </small>
                               </a>
-                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                              <a
+                                onClick={() =>
+                                  showInput(`comment-id-${child1.id}`)
+                                }
+                              >
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("cancel")}
+                                </small>
                               </a>
                             </div>
                           </div>
@@ -566,30 +708,57 @@ const DetailAudio = () => {
                           ? child1.children?.map((child2: any) => (
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
-                                  <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                                  <img
+                                    src={
+                                      child2.suggestionFrom?.profilePictureUrl
+                                    }
+                                    className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
+                                    onError={addDefaultProfile}
+                                    alt=""
+                                  />
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
-                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
-                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                      <b>
+                                        {Number(
+                                          child2.suggestionFrom?.roleId
+                                        ) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) ==
+                                          3 ||
+                                        Number(child2.suggestionFrom?.roleId) ==
+                                          4
+                                          ? "HUMAS POLRI"
+                                          : child2.suggestionFrom?.fullname}
+                                      </b>{" "}
+                                      {getPublicLocaleTimestamp(
+                                        new Date(child2.createdAt)
+                                      )}
+                                    </p>
+                                    <p className="text-slate-500 text-sm mb-4">
+                                      {parse(String(child2?.message))}
                                     </p>
-                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
                                     <div>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                          Number(child2.suggestionFrom?.id) ==
+                                          Number(userId)
                                             ? {
                                                 display: "none",
                                               }
                                             : {}
                                         }
-                                        onClick={() => showInput(`comment-id-${child2.id}`)}
+                                        onClick={() =>
+                                          showInput(`comment-id-${child2.id}`)
+                                        }
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("reply")}
+                                        </small>
                                       </a>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                          Number(child2.suggestionFrom?.id) ==
+                                          Number(userId)
                                             ? {}
                                             : {
                                                 display: "none",
@@ -597,20 +766,40 @@ const DetailAudio = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("delete")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 {visibleInput === `comment-id-${child2.id}` && (
-                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                  <div
+                                    id={`comment-id-${child2.id}`}
+                                    className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
+                                  >
+                                    <Textarea
+                                      name=""
+                                      id={`input-comment-${child2.id}`}
+                                      className="my-2"
+                                      placeholder="Masukkan balasan anda"
+                                    />
                                     <div className="flex flex-row gap-3">
-                                      <a onClick={() => postDataChild(child2.id)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                      <a
+                                        onClick={() => postDataChild(child2.id)}
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("send")}
+                                        </small>
                                       </a>
-                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                      <a
+                                        onClick={() =>
+                                          showInput(`comment-id-${child2.id}`)
+                                        }
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("cancel")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/document/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/document/detail/[slug]/page.tsx
index c3f4d657..49fb09bc 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/document/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/document/detail/[slug]/page.tsx
@@ -6,15 +6,31 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import NewContent from "@/components/landing-page/new-content";
 import { Textarea } from "@/components/ui/textarea";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
+import {
+  checkWishlistStatus,
+  createPublicSuggestion,
+  deletePublicSuggestion,
+  deleteWishlist,
+  getDetail,
+  getPublicSuggestionList,
+  saveWishlist,
+} from "@/service/landing/landing";
 import { close, error, loading, successCallback, warning } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
 import { Link, useRouter } from "@/i18n/routing";
-import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
+import {
+  checkMaliciousText,
+  formatDateToIndonesian,
+  getPublicLocaleTimestamp,
+} from "@/utils/globals";
 import { useTranslations } from "next-intl";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { useSearchParams } from "next/navigation";
@@ -216,7 +232,8 @@ const DetailDocument = () => {
 
     xhr.addEventListener("readystatechange", () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
-        const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream";
+        const contentType =
+          xhr.getResponseHeader("content-type") || "application/octet-stream";
         const extension = contentType.split("/")[1];
         const filename = `${name}.${extension}`;
 
@@ -293,7 +310,9 @@ const DetailDocument = () => {
     setVisibleInput(visibleInput === e ? null : e);
   };
   async function sendSuggestionChild(parentId: any) {
-    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
+    const inputElement = document.querySelector(
+      `#input-comment-${parentId}`
+    ) as HTMLInputElement;
 
     if (inputElement && inputElement.value.length > 3) {
       loading();
@@ -306,9 +325,11 @@ const DetailDocument = () => {
       console.log(data);
       const response = await createPublicSuggestion(data);
       console.log(response);
-      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
-      console.log(responseGet.data?.data);
-      setListSuggestion(responseGet.data?.data);
+      const responseGet: any = await getPublicSuggestionList(
+        slug?.split("-")?.[0]
+      );
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
 
       // Reset input field
       inputElement.value = "";
@@ -323,8 +344,8 @@ const DetailDocument = () => {
     const response = await deletePublicSuggestion(dataId);
     console.log(response);
     const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
-    console.log(responseGet.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    console.log(responseGet?.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
   const deleteData = (dataId: any) => {
@@ -363,7 +384,11 @@ const DetailDocument = () => {
       if (type == "wa" && width <= 768) {
         window.open(`whatsapp://send?${url}`, "_blank");
       } else if (type == "wa" && width > 768) {
-        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+        window.open(
+          `https://web.whatsapp.com/send?${url}`,
+          "_blank",
+          "noreferrer"
+        );
       } else {
         window.open(url);
       }
@@ -522,7 +547,11 @@ const DetailDocument = () => {
           {/* Bagian Kiri */}
           <div className="md:w-3/4">
             <div className="relative">
-              <img src={detailDataDocument?.files[selectedDocument]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
+              <img
+                src={detailDataDocument?.files[selectedDocument]?.url}
+                alt="Main"
+                className="rounded-lg w-auto h-fit"
+              />
               <div className="absolute top-4 left-4"></div>
             </div>
             {/* Footer Informasi */}
@@ -536,14 +565,20 @@ const DetailDocument = () => {
               <p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> */}
               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
                 <p className="text-xs lg:text-sm">
-                  {t("by")}&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
+                  {t("by")}&nbsp;
+                  <span className="font-semibold text-black">
+                    {detailDataDocument?.uploadedBy?.userLevel?.name}
+                  </span>
                 </p>
                 {/* <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp; {t("updatedOn")} {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;
                 </p> */}
                 <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
-                  {formatDateToIndonesian(new Date(detailDataDocument?.updatedAt))} {"WIB"}
+                  {formatDateToIndonesian(
+                    new Date(detailDataDocument?.updatedAt)
+                  )}{" "}
+                  {"WIB"}
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   &nbsp;| &nbsp;
@@ -561,20 +596,32 @@ const DetailDocument = () => {
 
             {/* Keterangan */}
             <div className="">
-              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify space-y-4">{detailDataDocument?.title}</h1>
-              <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify space-y-4">
+                {detailDataDocument?.title}
+              </h1>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: detailDataDocument?.htmlDescription,
+                }}
+              />
             </div>
           </div>
 
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">{t("delete")}</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">{t("save")}</p>
               </a>
@@ -583,13 +630,20 @@ const DetailDocument = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataDocument?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataDocument?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataDocument?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataDocument?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -598,13 +652,25 @@ const DetailDocument = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("docSize")}</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              {t("docSize")}
+            </h4>
             <div className="border-t border-black my-4"></div>
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -617,15 +683,30 @@ const DetailDocument = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>{t("downloadAll")}</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
-              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               {t("download")}
             </button>
@@ -633,29 +714,90 @@ const DetailDocument = () => {
             {/* Tombol Bagikan */}
             <div className="flex flex-row py-3">
               <p className="text-base font-semibold">{t("share")}</p>
-              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
-                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              <a
+                className="ml-8 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "fb",
+                    `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
+                  )
+                }
+              >
+                <Icon
+                  icon="brandico:facebook"
+                  height="20"
+                  className="px-auto text-red-600 text-center"
+                />
               </a>
-              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
-                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              <a
+                className="ml-5 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "tw",
+                    `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
+                  )
+                }
+              >
+                <Icon
+                  icon="mdi:twitter"
+                  width="23"
+                  className="text-red-600 text-center"
+                />
               </a>
-              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
-                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              <a
+                className="ml-5 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "wa",
+                    `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`
+                  )
+                }
+              >
+                <Icon
+                  icon="ri:whatsapp-fill"
+                  width="23"
+                  className="text-red-600 text-center"
+                />
               </a>
               <Popover>
-                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
-                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
-                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                <PopoverTrigger
+                  className="flex justify-end gap-1 cursor-pointer"
+                  asChild
+                >
+                  <a
+                    className="ml-5 cursor-pointer"
+                    data-toggle="dropdown"
+                    href="#"
+                    aria-expanded="false"
+                  >
+                    <Icon
+                      icon="material-symbols-light:mail"
+                      width="23"
+                      className="text-red-600 text-center"
+                    />
                   </a>
                 </PopoverTrigger>
                 <PopoverContent>
                   <div className="flex flex-col">
                     <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
-                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                      <p className="text-base font-semibold mb-1">
+                        {t("destinationEmail")}
+                      </p>
+                      <Input
+                        value={emailShareInput}
+                        onChange={(event) =>
+                          setEmailShareInput(event.target.value)
+                        }
+                        onKeyPress={handleEmailList}
+                        type="email"
+                        placeholder={t("pressEnter")}
+                      />
                     </div>
-                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                    <Button
+                      className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                      onClick={() => shareToEmail()}
+                    >
                       {t("send")}
                     </Button>
                   </div>
@@ -671,8 +813,15 @@ const DetailDocument = () => {
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">{t("comment")}</p>
-            <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+            <Textarea
+              placeholder="Type your comments here."
+              className="flex w-full pb-12"
+              onChange={getInputValue}
+            />
+            <button
+              onClick={() => postData()}
+              className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
+            >
               {t("send")}
             </button>
           </div>
@@ -683,13 +832,24 @@ const DetailDocument = () => {
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
-                  <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                  <img
+                    src={data?.suggestionFrom?.profilePictureUrl}
+                    className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
+                    onError={addDefaultProfile}
+                    alt=""
+                  />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
-                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {Number(data.suggestionFrom?.roleId) == 2 ||
+                      Number(data.suggestionFrom?.roleId) == 3 ||
+                      Number(data.suggestionFrom?.roleId) == 4
+                        ? "HUMAS POLRI"
+                        : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
-                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                      {data?.message}
+                    </p>
                     <div>
                       <a
                         style={
@@ -702,11 +862,16 @@ const DetailDocument = () => {
                         onClick={() => showInput(`comment-id-${data.id}`)}
                         className="mr-2"
                       >
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("reply")}
+                        </small>
                       </a>
-                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                      {Number(data.suggestionFrom?.id) == Number(userId) ||
+                      Number(userRoleId) == 2 ? (
                         <a onClick={() => deleteData(data.id)}>
-                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                            {t("delete")}
+                          </small>
                         </a>
                       ) : (
                         ""
@@ -715,14 +880,25 @@ const DetailDocument = () => {
                   </div>
                 </div>
                 {visibleInput === `comment-id-${data.id}` && (
-                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                  <div
+                    id={`comment-id-${data.id}`}
+                    className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
+                  >
+                    <Textarea
+                      id={`input-comment-${data.id}`}
+                      className="p-4 focus:outline-none focus:border-sky-500"
+                      placeholder={t("enterReply")}
+                    />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
+                          {t("send")}
+                        </small>
                       </a>
                       <a onClick={() => showInput(`comment-id-${data.id}`)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("cancel")}
+                        </small>
                       </a>
                     </div>
                   </div>
@@ -732,30 +908,51 @@ const DetailDocument = () => {
                   ? data.children?.map((child1: any) => (
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
-                          <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
+                          <img
+                            src={child1.suggestionFrom?.profilePictureUrl}
+                            onError={addDefaultProfile}
+                            alt=""
+                            className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
+                          />
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
-                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
-                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                              <b>
+                                {Number(child1.suggestionFrom?.roleId) == 2 ||
+                                Number(child1.suggestionFrom?.roleId) == 3 ||
+                                Number(child1.suggestionFrom?.roleId) == 4
+                                  ? "HUMAS POLRI"
+                                  : child1.suggestionFrom?.fullname}
+                              </b>{" "}
+                              {getPublicLocaleTimestamp(
+                                new Date(child1.createdAt)
+                              )}
+                            </p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                              {parse(String(child1?.message))}
                             </p>
-                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
                             <div>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                  Number(child1.suggestionFrom?.id) ==
+                                  Number(userId)
                                     ? {
                                         display: "none",
                                       }
                                     : {}
                                 }
-                                onClick={() => showInput(`comment-id-${child1.id}`)}
+                                onClick={() =>
+                                  showInput(`comment-id-${child1.id}`)
+                                }
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("reply")}
+                                </small>
                               </a>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                  Number(child1.suggestionFrom?.id) ==
+                                  Number(userId)
                                     ? {}
                                     : {
                                         display: "none",
@@ -763,21 +960,39 @@ const DetailDocument = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("delete")}
+                                </small>
                               </a>
                             </div>
                           </div>
                         </div>
 
                         {visibleInput === `comment-id-${child1.id}` && (
-                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                          <div
+                            id={`comment-id-${child1.id}`}
+                            className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
+                          >
+                            <Textarea
+                              name=""
+                              className="mt-2 "
+                              id={`input-comment-${child1.id}`}
+                              placeholder={t("enterReply")}
+                            />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("send")}
+                                </small>
                               </a>
-                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                              <a
+                                onClick={() =>
+                                  showInput(`comment-id-${child1.id}`)
+                                }
+                              >
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("cancel")}
+                                </small>
                               </a>
                             </div>
                           </div>
@@ -787,30 +1002,57 @@ const DetailDocument = () => {
                           ? child1.children?.map((child2: any) => (
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
-                                  <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                                  <img
+                                    src={
+                                      child2.suggestionFrom?.profilePictureUrl
+                                    }
+                                    className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
+                                    onError={addDefaultProfile}
+                                    alt=""
+                                  />
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
-                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
-                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                      <b>
+                                        {Number(
+                                          child2.suggestionFrom?.roleId
+                                        ) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) ==
+                                          3 ||
+                                        Number(child2.suggestionFrom?.roleId) ==
+                                          4
+                                          ? "HUMAS POLRI"
+                                          : child2.suggestionFrom?.fullname}
+                                      </b>{" "}
+                                      {getPublicLocaleTimestamp(
+                                        new Date(child2.createdAt)
+                                      )}
+                                    </p>
+                                    <p className="text-slate-500 text-sm mb-4">
+                                      {parse(String(child2?.message))}
                                     </p>
-                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
                                     <div>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                          Number(child2.suggestionFrom?.id) ==
+                                          Number(userId)
                                             ? {
                                                 display: "none",
                                               }
                                             : {}
                                         }
-                                        onClick={() => showInput(`comment-id-${child2.id}`)}
+                                        onClick={() =>
+                                          showInput(`comment-id-${child2.id}`)
+                                        }
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("reply")}
+                                        </small>
                                       </a>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                          Number(child2.suggestionFrom?.id) ==
+                                          Number(userId)
                                             ? {}
                                             : {
                                                 display: "none",
@@ -818,20 +1060,40 @@ const DetailDocument = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("delete")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 {visibleInput === `comment-id-${child2.id}` && (
-                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder={t("enterReply")} />
+                                  <div
+                                    id={`comment-id-${child2.id}`}
+                                    className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
+                                  >
+                                    <Textarea
+                                      name=""
+                                      id={`input-comment-${child2.id}`}
+                                      className="my-2"
+                                      placeholder={t("enterReply")}
+                                    />
                                     <div className="flex flex-row gap-3">
-                                      <a onClick={() => postDataChild(child2.id)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                      <a
+                                        onClick={() => postDataChild(child2.id)}
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("send")}
+                                        </small>
                                       </a>
-                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                      <a
+                                        onClick={() =>
+                                          showInput(`comment-id-${child2.id}`)
+                                        }
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("cancel")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
index 1fcb2322..656efe08 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
@@ -8,11 +8,23 @@ import NewContent from "@/components/landing-page/new-content";
 import { useToast } from "@/components/ui/use-toast";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { close, error, loading, warning } from "@/config/swal";
-import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
+import {
+  checkWishlistStatus,
+  createPublicSuggestion,
+  deletePublicSuggestion,
+  deleteWishlist,
+  getDetail,
+  getPublicSuggestionList,
+  saveWishlist,
+} from "@/service/landing/landing";
 import { Link, useRouter } from "@/i18n/routing";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
-import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
+import {
+  checkMaliciousText,
+  formatDateToIndonesian,
+  getPublicLocaleTimestamp,
+} from "@/utils/globals";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import { useSearchParams } from "next/navigation";
@@ -227,7 +239,8 @@ const DetailInfo = () => {
 
     xhr.addEventListener("readystatechange", () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
-        const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream";
+        const contentType =
+          xhr.getResponseHeader("content-type") || "application/octet-stream";
         const extension = contentType.split("/")[1];
         const filename = `${name}.${extension}`;
 
@@ -287,7 +300,9 @@ const DetailInfo = () => {
   }
 
   async function sendSuggestionChild(parentId: any) {
-    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
+    const inputElement = document.querySelector(
+      `#input-comment-${parentId}`
+    ) as HTMLInputElement;
 
     if (inputElement && inputElement.value.length > 3) {
       loading();
@@ -300,9 +315,11 @@ const DetailInfo = () => {
       console.log(data);
       const response = await createPublicSuggestion(data);
       console.log(response);
-      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
-      console.log(responseGet.data?.data);
-      setListSuggestion(responseGet.data?.data);
+      const responseGet: any = await getPublicSuggestionList(
+        slug?.split("-")?.[0]
+      );
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
 
       // Reset input field
       inputElement.value = "";
@@ -344,8 +361,8 @@ const DetailInfo = () => {
     const response = await deletePublicSuggestion(dataId);
     console.log(response);
     const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
-    console.log(responseGet.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    console.log(responseGet?.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
 
@@ -379,7 +396,10 @@ const DetailInfo = () => {
     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
   </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined"
+      ? Buffer.from(str).toString("base64")
+      : window.btoa(str);
 
   return (
     <>
@@ -389,7 +409,17 @@ const DetailInfo = () => {
           <div className="md:w-3/4">
             {/* Gambar Besar */}
             <div className="relative">
-              <Image width={1920} height={1080} src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink} alt="Main" className="rounded-lg w-auto h-fit" />
+              <Image
+                width={1920}
+                height={1080}
+                src={
+                  detailDataImage?.files?.length > 0
+                    ? detailDataImage.files[selectedImage]?.url
+                    : detailDataImage?.thumbnailLink
+                }
+                alt="Main"
+                className="rounded-lg w-auto h-fit"
+              />
               <div className="absolute top-4 left-4"></div>
             </div>
 
@@ -397,7 +427,13 @@ const DetailInfo = () => {
             <div className="py-4 flex flex-row gap-3">
               {detailDataImage?.files?.map((file: any, index: number) => (
                 <a onClick={() => setSelectedImage(index)} key={file?.id}>
-                  <Image alt="imgae-small" width={1920} height={1080} src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
+                  <Image
+                    alt="imgae-small"
+                    width={1920}
+                    height={1080}
+                    src={file?.url}
+                    className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
+                  />
                 </a>
               ))}
             </div>
@@ -406,7 +442,10 @@ const DetailInfo = () => {
             <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
                 <p className="text-xs lg:text-sm">
-                  {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
+                  {t("by")}&nbsp;
+                  <span className="font-semibold text-black dark:text-white">
+                    {detailDataImage?.uploadedBy?.userLevel?.name}
+                  </span>
                 </p>
                 {/* <p className="text-xs lg:text-sm">
                              &nbsp;|&nbsp;{t("updatedOn")}
@@ -414,7 +453,10 @@ const DetailInfo = () => {
                            </p> */}
                 <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
-                  {formatDateToIndonesian(new Date(detailDataImage?.updatedAt))} {"WIB"}
+                  {formatDateToIndonesian(
+                    new Date(detailDataImage?.updatedAt)
+                  )}{" "}
+                  {"WIB"}
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   &nbsp;|&nbsp;
@@ -432,20 +474,33 @@ const DetailInfo = () => {
 
             {/* Keterangan */}
             <div className="w-full">
-              <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
-              <div className="font-light text-justify mb-4" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-2xl my-8">
+                {detailDataImage?.title}
+              </h1>
+              <div
+                className="font-light text-justify mb-4"
+                dangerouslySetInnerHTML={{
+                  __html: detailDataImage?.htmlDescription,
+                }}
+              />
             </div>
           </div>
 
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">Hapus</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">Simpan</p>
               </a>
@@ -454,13 +509,20 @@ const DetailInfo = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataImage?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataImage?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -469,14 +531,26 @@ const DetailInfo = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              Opsi Ukuran Foto
+            </h4>
             <div className="border-t border-black my-4"></div>
 
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -489,15 +563,30 @@ const DetailInfo = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>Download Semua File?</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
-              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               Download
             </button>
@@ -510,8 +599,15 @@ const DetailInfo = () => {
         <div className="flex flex-col mt-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">{t("comment")}</p>
-            <Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+            <Textarea
+              placeholder={t("leaveComment")}
+              className="flex w-full pb-12"
+              onChange={getInputValue}
+            />
+            <button
+              onClick={() => postData()}
+              className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
+            >
               {t("send")}
             </button>
             <div className="border-b-2  border-slate-300 mt-4 w-full self-center"></div>
@@ -522,7 +618,9 @@ const DetailInfo = () => {
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
                   <Image
-                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                      shimmer(700, 475)
+                    )}`}
                     width={1080}
                     height={1080}
                     src={data?.suggestionFrom?.profilePictureUrl}
@@ -532,10 +630,16 @@ const DetailInfo = () => {
                   />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
-                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {Number(data.suggestionFrom?.roleId) == 2 ||
+                      Number(data.suggestionFrom?.roleId) == 3 ||
+                      Number(data.suggestionFrom?.roleId) == 4
+                        ? "HUMAS POLRI"
+                        : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
-                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                      {data?.message}
+                    </p>
                     <div>
                       <a
                         style={
@@ -548,11 +652,16 @@ const DetailInfo = () => {
                         onClick={() => showInput(`comment-id-${data.id}`)}
                         className="mr-2"
                       >
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("reply")}
+                        </small>
                       </a>
-                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                      {Number(data.suggestionFrom?.id) == Number(userId) ||
+                      Number(userRoleId) == 2 ? (
                         <a onClick={() => deleteData(data.id)}>
-                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                            {t("delete")}
+                          </small>
                         </a>
                       ) : (
                         ""
@@ -561,14 +670,25 @@ const DetailInfo = () => {
                   </div>
                 </div>
                 {visibleInput === `comment-id-${data.id}` && (
-                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                  <div
+                    id={`comment-id-${data.id}`}
+                    className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
+                  >
+                    <Textarea
+                      id={`input-comment-${data.id}`}
+                      className="p-4 focus:outline-none focus:border-sky-500"
+                      placeholder={t("enterReply")}
+                    />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
+                          {t("send")}
+                        </small>
                       </a>
                       <a onClick={() => showInput(`comment-id-${data.id}`)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("cancel")}
+                        </small>
                       </a>
                     </div>
                   </div>
@@ -579,7 +699,9 @@ const DetailInfo = () => {
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
                           <Image
-                            placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                            placeholder={`data:image/svg+xml;base64,${toBase64(
+                              shimmer(700, 475)
+                            )}`}
                             width={1080}
                             height={1080}
                             src={child1.suggestionFrom?.profilePictureUrl}
@@ -590,26 +712,42 @@ const DetailInfo = () => {
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
-                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
-                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                              <b>
+                                {Number(child1.suggestionFrom?.roleId) == 2 ||
+                                Number(child1.suggestionFrom?.roleId) == 3 ||
+                                Number(child1.suggestionFrom?.roleId) == 4
+                                  ? "HUMAS POLRI"
+                                  : child1.suggestionFrom?.fullname}
+                              </b>{" "}
+                              {getPublicLocaleTimestamp(
+                                new Date(child1.createdAt)
+                              )}
+                            </p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                              {parse(String(child1?.message))}
                             </p>
-                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
                             <div>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                  Number(child1.suggestionFrom?.id) ==
+                                  Number(userId)
                                     ? {
                                         display: "none",
                                       }
                                     : {}
                                 }
-                                onClick={() => showInput(`comment-id-${child1.id}`)}
+                                onClick={() =>
+                                  showInput(`comment-id-${child1.id}`)
+                                }
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("reply")}
+                                </small>
                               </a>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                  Number(child1.suggestionFrom?.id) ==
+                                  Number(userId)
                                     ? {}
                                     : {
                                         display: "none",
@@ -617,21 +755,39 @@ const DetailInfo = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("delete")}
+                                </small>
                               </a>
                             </div>
                           </div>
                         </div>
 
                         {visibleInput === `comment-id-${child1.id}` && (
-                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                          <div
+                            id={`comment-id-${child1.id}`}
+                            className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
+                          >
+                            <Textarea
+                              name=""
+                              className="mt-2 "
+                              id={`input-comment-${child1.id}`}
+                              placeholder={t("enterReply")}
+                            />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("send")}
+                                </small>
                               </a>
-                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                              <a
+                                onClick={() =>
+                                  showInput(`comment-id-${child1.id}`)
+                                }
+                              >
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("cancel")}
+                                </small>
                               </a>
                             </div>
                           </div>
@@ -642,10 +798,14 @@ const DetailInfo = () => {
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
                                   <Image
-                                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                                      shimmer(700, 475)
+                                    )}`}
                                     width={1080}
                                     height={1080}
-                                    src={child2.suggestionFrom?.profilePictureUrl}
+                                    src={
+                                      child2.suggestionFrom?.profilePictureUrl
+                                    }
                                     className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
                                     onError={addDefaultProfile}
                                     alt=""
@@ -653,26 +813,46 @@ const DetailInfo = () => {
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
-                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
-                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                      <b>
+                                        {Number(
+                                          child2.suggestionFrom?.roleId
+                                        ) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) ==
+                                          3 ||
+                                        Number(child2.suggestionFrom?.roleId) ==
+                                          4
+                                          ? "HUMAS POLRI"
+                                          : child2.suggestionFrom?.fullname}
+                                      </b>{" "}
+                                      {getPublicLocaleTimestamp(
+                                        new Date(child2.createdAt)
+                                      )}
+                                    </p>
+                                    <p className="text-slate-500 text-sm mb-4">
+                                      {parse(String(child2?.message))}
                                     </p>
-                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
                                     <div>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                          Number(child2.suggestionFrom?.id) ==
+                                          Number(userId)
                                             ? {
                                                 display: "none",
                                               }
                                             : {}
                                         }
-                                        onClick={() => showInput(`comment-id-${child2.id}`)}
+                                        onClick={() =>
+                                          showInput(`comment-id-${child2.id}`)
+                                        }
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("reply")}
+                                        </small>
                                       </a>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                          Number(child2.suggestionFrom?.id) ==
+                                          Number(userId)
                                             ? {}
                                             : {
                                                 display: "none",
@@ -680,20 +860,40 @@ const DetailInfo = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("delete")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 {visibleInput === `comment-id-${child2.id}` && (
-                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                  <div
+                                    id={`comment-id-${child2.id}`}
+                                    className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
+                                  >
+                                    <Textarea
+                                      name=""
+                                      id={`input-comment-${child2.id}`}
+                                      className="my-2"
+                                      placeholder="Masukkan balasan anda"
+                                    />
                                     <div className="flex flex-row gap-3">
-                                      <a onClick={() => postDataChild(child2.id)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                      <a
+                                        onClick={() => postDataChild(child2.id)}
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("send")}
+                                        </small>
                                       </a>
-                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                      <a
+                                        onClick={() =>
+                                          showInput(`comment-id-${child2.id}`)
+                                        }
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("cancel")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
index a0a0da29..46ac4191 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
@@ -147,13 +147,29 @@ import NewContent from "@/components/landing-page/new-content";
 import { useToast } from "@/components/ui/use-toast";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { close, error, loading, successCallback, warning } from "@/config/swal";
-import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
+import {
+  checkWishlistStatus,
+  createPublicSuggestion,
+  deletePublicSuggestion,
+  deleteWishlist,
+  getDetail,
+  getPublicSuggestionList,
+  saveWishlist,
+} from "@/service/landing/landing";
 import { Link, useRouter } from "@/i18n/routing";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
-import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
+import {
+  checkMaliciousText,
+  formatDateToIndonesian,
+  getPublicLocaleTimestamp,
+} from "@/utils/globals";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import parse from "html-react-parser";
@@ -203,7 +219,11 @@ const DetailInfo = () => {
   const poldaName = params?.polda_name;
   const satkerName = params?.satker_name;
 
-  let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
+  let prefixPath = poldaName
+    ? `/polda/${poldaName}`
+    : satkerName
+    ? `/satker/${satkerName}`
+    : "/";
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -227,7 +247,7 @@ const DetailInfo = () => {
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
     setWidth(window.innerWidth);
     setContent(response?.data.data);
-    setListSuggestion(responseGet.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -401,7 +421,8 @@ const DetailInfo = () => {
 
     xhr.addEventListener("readystatechange", () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
-        const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream";
+        const contentType =
+          xhr.getResponseHeader("content-type") || "application/octet-stream";
         const extension = contentType.split("/")[1];
         const filename = `${name}.${extension}`;
 
@@ -435,7 +456,11 @@ const DetailInfo = () => {
       if (type == "wa" && width <= 768) {
         window.open(`whatsapp://send?${url}`, "_blank");
       } else if (type == "wa" && width > 768) {
-        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+        window.open(
+          `https://web.whatsapp.com/send?${url}`,
+          "_blank",
+          "noreferrer"
+        );
       } else {
         window.open(url);
       }
@@ -524,7 +549,9 @@ const DetailInfo = () => {
   }
 
   async function sendSuggestionChild(parentId: any) {
-    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
+    const inputElement = document.querySelector(
+      `#input-comment-${parentId}`
+    ) as HTMLInputElement;
 
     if (inputElement && inputElement.value.length > 3) {
       loading();
@@ -537,9 +564,11 @@ const DetailInfo = () => {
       console.log(data);
       const response = await createPublicSuggestion(data);
       console.log(response);
-      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
-      console.log(responseGet.data?.data);
-      setListSuggestion(responseGet.data?.data);
+      const responseGet: any = await getPublicSuggestionList(
+        slug?.split("-")?.[0]
+      );
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
 
       // Reset input field
       inputElement.value = "";
@@ -581,8 +610,8 @@ const DetailInfo = () => {
     const response = await deletePublicSuggestion(dataId);
     console.log(response);
     const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
-    console.log(responseGet.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    console.log(responseGet?.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
 
@@ -616,7 +645,10 @@ const DetailInfo = () => {
     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
   </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined"
+      ? Buffer.from(str).toString("base64")
+      : window.btoa(str);
 
   return (
     <>
@@ -633,10 +665,16 @@ const DetailInfo = () => {
               <div className="relative">
                 {/* <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" /> */}
                 <Image
-                  placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                  placeholder={`data:image/svg+xml;base64,${toBase64(
+                    shimmer(700, 475)
+                  )}`}
                   width={2560}
                   height={1440}
-                  src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink}
+                  src={
+                    detailDataImage?.files?.length > 0
+                      ? detailDataImage.files[selectedImage]?.url
+                      : detailDataImage?.thumbnailLink
+                  }
                   alt="Main"
                   className="rounded-lg w-auto h-fit"
                 />
@@ -657,7 +695,9 @@ const DetailInfo = () => {
                 {detailDataImage?.files?.map((file: any, index: number) => (
                   <a onClick={() => setSelectedImage(index)} key={file?.id}>
                     <Image
-                      placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                      placeholder={`data:image/svg+xml;base64,${toBase64(
+                        shimmer(700, 475)
+                      )}`}
                       width={1920}
                       height={1080}
                       alt="image-small"
@@ -673,7 +713,10 @@ const DetailInfo = () => {
             <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
                 <p className="text-xs lg:text-sm">
-                  {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
+                  {t("by")}&nbsp;
+                  <span className="font-semibold text-black dark:text-white">
+                    {detailDataImage?.uploadedBy?.userLevel?.name}
+                  </span>
                 </p>
                 {/* <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp;{t("updatedOn")}
@@ -681,7 +724,10 @@ const DetailInfo = () => {
                 </p> */}
                 <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
-                  {formatDateToIndonesian(new Date(detailDataImage?.updatedAt))} {"WIB"}
+                  {formatDateToIndonesian(
+                    new Date(detailDataImage?.updatedAt)
+                  )}{" "}
+                  {"WIB"}
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   &nbsp;|&nbsp;
@@ -699,20 +745,33 @@ const DetailInfo = () => {
 
             {/* Keterangan */}
             <div className="w-full">
-              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataImage?.title}</h1>
-              <div className="font-light text-justify mb-5 space-y-4 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">
+                {detailDataImage?.title}
+              </h1>
+              <div
+                className="font-light text-justify mb-5 space-y-4 lg:mb-0"
+                dangerouslySetInnerHTML={{
+                  __html: detailDataImage?.htmlDescription,
+                }}
+              />
             </div>
           </div>
 
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">{t("delete")}</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">{t("save")}</p>
               </a>
@@ -721,13 +780,20 @@ const DetailInfo = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataImage?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataImage?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -736,14 +802,26 @@ const DetailInfo = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("imageSize")}</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              {t("imageSize")}
+            </h4>
             <div className="border-t border-black my-4"></div>
 
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size?.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size?.label} checked={selectedSize === size?.label} onChange={(e) => setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size?.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size?.label}
+                      checked={selectedSize === size?.label}
+                      onChange={(e) => setImageSizeSelected(e.target.value)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size?.label}</div>
                   </div>
                   <div className="text-sm">{size?.value}</div>
@@ -754,15 +832,30 @@ const DetailInfo = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>{t("downloadAll")}</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
-              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               {t("download")}
             </button>
@@ -770,29 +863,90 @@ const DetailInfo = () => {
             {/* Tombol Bagikan */}
             <div className="flex flex-row mt-5 justify-center">
               <p className="text-base font-semibold">{t("share")}</p>
-              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
-                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              <a
+                className="ml-8 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "fb",
+                    `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
+                  )
+                }
+              >
+                <Icon
+                  icon="brandico:facebook"
+                  height="20"
+                  className="px-auto text-red-600 text-center"
+                />
               </a>
-              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
-                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              <a
+                className="ml-5 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "tw",
+                    `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
+                  )
+                }
+              >
+                <Icon
+                  icon="mdi:twitter"
+                  width="23"
+                  className="text-red-600 text-center"
+                />
               </a>
-              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
-                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              <a
+                className="ml-5 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "wa",
+                    `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`
+                  )
+                }
+              >
+                <Icon
+                  icon="ri:whatsapp-fill"
+                  width="23"
+                  className="text-red-600 text-center"
+                />
               </a>
               <Popover>
-                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
-                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
-                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                <PopoverTrigger
+                  className="flex justify-end gap-1 cursor-pointer"
+                  asChild
+                >
+                  <a
+                    className="ml-5 cursor-pointer"
+                    data-toggle="dropdown"
+                    href="#"
+                    aria-expanded="false"
+                  >
+                    <Icon
+                      icon="material-symbols-light:mail"
+                      width="23"
+                      className="text-red-600 text-center"
+                    />
                   </a>
                 </PopoverTrigger>
                 <PopoverContent>
                   <div className="flex flex-col">
                     <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
-                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                      <p className="text-base font-semibold mb-1">
+                        {t("destinationEmail")}
+                      </p>
+                      <Input
+                        value={emailShareInput}
+                        onChange={(event) =>
+                          setEmailShareInput(event.target.value)
+                        }
+                        onKeyPress={handleEmailList}
+                        type="email"
+                        placeholder={t("pressEnter")}
+                      />
                     </div>
-                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                    <Button
+                      className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                      onClick={() => shareToEmail()}
+                    >
                       {t("send")}
                     </Button>
                   </div>
@@ -808,8 +962,15 @@ const DetailInfo = () => {
         <div className="flex flex-col mt-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">{t("comment")}</p>
-            <Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+            <Textarea
+              placeholder={t("leaveComment")}
+              className="flex w-full pb-12"
+              onChange={getInputValue}
+            />
+            <button
+              onClick={() => postData()}
+              className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
+            >
               {t("send")}
             </button>
             <div className="border-b-2  border-slate-300 mt-4 w-full self-center"></div>
@@ -820,7 +981,9 @@ const DetailInfo = () => {
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
                   <Image
-                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                      shimmer(700, 475)
+                    )}`}
                     width={1080}
                     height={1080}
                     src={data?.suggestionFrom?.profilePictureUrl}
@@ -830,10 +993,16 @@ const DetailInfo = () => {
                   />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
-                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {Number(data.suggestionFrom?.roleId) == 2 ||
+                      Number(data.suggestionFrom?.roleId) == 3 ||
+                      Number(data.suggestionFrom?.roleId) == 4
+                        ? "HUMAS POLRI"
+                        : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
-                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                      {data?.message}
+                    </p>
                     <div>
                       <a
                         style={
@@ -846,11 +1015,16 @@ const DetailInfo = () => {
                         onClick={() => showInput(`comment-id-${data.id}`)}
                         className="mr-2"
                       >
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("reply")}
+                        </small>
                       </a>
-                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                      {Number(data.suggestionFrom?.id) == Number(userId) ||
+                      Number(userRoleId) == 2 ? (
                         <a onClick={() => deleteData(data.id)}>
-                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                            {t("delete")}
+                          </small>
                         </a>
                       ) : (
                         ""
@@ -859,14 +1033,25 @@ const DetailInfo = () => {
                   </div>
                 </div>
                 {visibleInput === `comment-id-${data.id}` && (
-                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                  <div
+                    id={`comment-id-${data.id}`}
+                    className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
+                  >
+                    <Textarea
+                      id={`input-comment-${data.id}`}
+                      className="p-4 focus:outline-none focus:border-sky-500"
+                      placeholder={t("enterReply")}
+                    />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
+                          {t("send")}
+                        </small>
                       </a>
                       <a onClick={() => showInput(`comment-id-${data.id}`)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("cancel")}
+                        </small>
                       </a>
                     </div>
                   </div>
@@ -877,7 +1062,9 @@ const DetailInfo = () => {
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
                           <Image
-                            placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                            placeholder={`data:image/svg+xml;base64,${toBase64(
+                              shimmer(700, 475)
+                            )}`}
                             width={1080}
                             height={1080}
                             src={child1.suggestionFrom?.profilePictureUrl}
@@ -888,26 +1075,42 @@ const DetailInfo = () => {
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
-                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
-                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                              <b>
+                                {Number(child1.suggestionFrom?.roleId) == 2 ||
+                                Number(child1.suggestionFrom?.roleId) == 3 ||
+                                Number(child1.suggestionFrom?.roleId) == 4
+                                  ? "HUMAS POLRI"
+                                  : child1.suggestionFrom?.fullname}
+                              </b>{" "}
+                              {getPublicLocaleTimestamp(
+                                new Date(child1.createdAt)
+                              )}
+                            </p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                              {parse(String(child1?.message))}
                             </p>
-                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
                             <div>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                  Number(child1.suggestionFrom?.id) ==
+                                  Number(userId)
                                     ? {
                                         display: "none",
                                       }
                                     : {}
                                 }
-                                onClick={() => showInput(`comment-id-${child1.id}`)}
+                                onClick={() =>
+                                  showInput(`comment-id-${child1.id}`)
+                                }
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("reply")}
+                                </small>
                               </a>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                  Number(child1.suggestionFrom?.id) ==
+                                  Number(userId)
                                     ? {}
                                     : {
                                         display: "none",
@@ -915,21 +1118,39 @@ const DetailInfo = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("delete")}
+                                </small>
                               </a>
                             </div>
                           </div>
                         </div>
 
                         {visibleInput === `comment-id-${child1.id}` && (
-                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                          <div
+                            id={`comment-id-${child1.id}`}
+                            className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
+                          >
+                            <Textarea
+                              name=""
+                              className="mt-2 "
+                              id={`input-comment-${child1.id}`}
+                              placeholder={t("enterReply")}
+                            />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("send")}
+                                </small>
                               </a>
-                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                              <a
+                                onClick={() =>
+                                  showInput(`comment-id-${child1.id}`)
+                                }
+                              >
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("cancel")}
+                                </small>
                               </a>
                             </div>
                           </div>
@@ -940,10 +1161,14 @@ const DetailInfo = () => {
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
                                   <Image
-                                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                                      shimmer(700, 475)
+                                    )}`}
                                     width={1080}
                                     height={1080}
-                                    src={child2.suggestionFrom?.profilePictureUrl}
+                                    src={
+                                      child2.suggestionFrom?.profilePictureUrl
+                                    }
                                     className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
                                     onError={addDefaultProfile}
                                     alt=""
@@ -951,26 +1176,46 @@ const DetailInfo = () => {
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
-                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
-                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                      <b>
+                                        {Number(
+                                          child2.suggestionFrom?.roleId
+                                        ) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) ==
+                                          3 ||
+                                        Number(child2.suggestionFrom?.roleId) ==
+                                          4
+                                          ? "HUMAS POLRI"
+                                          : child2.suggestionFrom?.fullname}
+                                      </b>{" "}
+                                      {getPublicLocaleTimestamp(
+                                        new Date(child2.createdAt)
+                                      )}
+                                    </p>
+                                    <p className="text-slate-500 text-sm mb-4">
+                                      {parse(String(child2?.message))}
                                     </p>
-                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
                                     <div>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                          Number(child2.suggestionFrom?.id) ==
+                                          Number(userId)
                                             ? {
                                                 display: "none",
                                               }
                                             : {}
                                         }
-                                        onClick={() => showInput(`comment-id-${child2.id}`)}
+                                        onClick={() =>
+                                          showInput(`comment-id-${child2.id}`)
+                                        }
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("reply")}
+                                        </small>
                                       </a>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                          Number(child2.suggestionFrom?.id) ==
+                                          Number(userId)
                                             ? {}
                                             : {
                                                 display: "none",
@@ -978,20 +1223,40 @@ const DetailInfo = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("delete")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 {visibleInput === `comment-id-${child2.id}` && (
-                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                  <div
+                                    id={`comment-id-${child2.id}`}
+                                    className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
+                                  >
+                                    <Textarea
+                                      name=""
+                                      id={`input-comment-${child2.id}`}
+                                      className="my-2"
+                                      placeholder="Masukkan balasan anda"
+                                    />
                                     <div className="flex flex-row gap-3">
-                                      <a onClick={() => postDataChild(child2.id)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                      <a
+                                        onClick={() => postDataChild(child2.id)}
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("send")}
+                                        </small>
                                       </a>
-                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                      <a
+                                        onClick={() =>
+                                          showInput(`comment-id-${child2.id}`)
+                                        }
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("cancel")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
index eaede57d..a452ccc3 100644
--- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
@@ -99,7 +99,7 @@ const IndeksDetail = () => {
   //     const response = await postBlogComments(data);
   //     console.log(response);
   //     const responseGet = await getPublicSuggestionList(slug);
-  //     console.log(responseGet.data?.data);
+  //     console.log(responseGet?.data?.data);
   //     setMessageChild("");
   //     // $(":input").val("");
   //     close();
@@ -123,7 +123,7 @@ const IndeksDetail = () => {
       const response = await postBlogComments(data);
       console.log(response);
       const responseGet = await getPublicSuggestionList(slug);
-      console.log(responseGet.data?.data);
+      console.log(responseGet?.data?.data);
       getDataComment();
       inputMsg.value = "";
       close();
diff --git a/components/main/audio-detail.tsx b/components/main/audio-detail.tsx
index e89ff5f6..81a69033 100644
--- a/components/main/audio-detail.tsx
+++ b/components/main/audio-detail.tsx
@@ -102,7 +102,7 @@ const DetailAudio = () => {
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
     setWidth(window.innerWidth);
     setContent(response?.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -477,8 +477,8 @@ const DetailAudio = () => {
       const responseGet: any = await getPublicSuggestionList(
         slug?.split("-")?.[0]
       );
-      console.log(responseGet.data?.data);
-      setListSuggestion(responseGet.data?.data);
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
 
       // Reset input field
       inputElement.value = "";
@@ -493,8 +493,8 @@ const DetailAudio = () => {
     const response = await deletePublicSuggestion(dataId);
     console.log(response);
     const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
-    console.log(responseGet.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    console.log(responseGet?.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
   const deleteData = (dataId: any) => {
diff --git a/components/main/document-detail.tsx b/components/main/document-detail.tsx
index b5501fe4..b4e1c583 100644
--- a/components/main/document-detail.tsx
+++ b/components/main/document-detail.tsx
@@ -86,7 +86,7 @@ const DetailDocument = () => {
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
     setWidth(window.innerWidth);
     setContent(response?.data.data);
-    setListSuggestion(responseGet.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -344,8 +344,8 @@ const DetailDocument = () => {
       const responseGet: any = await getPublicSuggestionList(
         slug?.split("-")?.[0]
       );
-      console.log(responseGet.data?.data);
-      setListSuggestion(responseGet.data?.data);
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
 
       // Reset input field
       inputElement.value = "";
@@ -360,8 +360,8 @@ const DetailDocument = () => {
     const response = await deletePublicSuggestion(dataId);
     console.log(response);
     const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
-    console.log(responseGet.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    console.log(responseGet?.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
   const deleteData = (dataId: any) => {
diff --git a/components/main/image-detail.tsx b/components/main/image-detail.tsx
index 3f49d872..d9ae7532 100644
--- a/components/main/image-detail.tsx
+++ b/components/main/image-detail.tsx
@@ -108,7 +108,7 @@ const DetailImage = (data: any) => {
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
     setWidth(window.innerWidth);
     setContent(response?.data.data);
-    setListSuggestion(responseGet.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -428,8 +428,8 @@ const DetailImage = (data: any) => {
       const responseGet: any = await getPublicSuggestionList(
         slug?.split("-")?.[0]
       );
-      console.log(responseGet.data?.data);
-      setListSuggestion(responseGet.data?.data);
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
 
       // Reset input field
       inputElement.value = "";
@@ -471,8 +471,8 @@ const DetailImage = (data: any) => {
     const response = await deletePublicSuggestion(dataId);
     console.log(response);
     const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
-    console.log(responseGet.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    console.log(responseGet?.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
 
diff --git a/components/main/video-detail.tsx b/components/main/video-detail.tsx
index 68134676..991b863d 100644
--- a/components/main/video-detail.tsx
+++ b/components/main/video-detail.tsx
@@ -90,7 +90,7 @@ const DetailVideo = () => {
     setIsFromSPIT(response?.data?.data?.isFromSPIT);
     setWidth(window.innerWidth);
     setContent(response?.data.data);
-    setListSuggestion(responseGet.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     setMain({
       id: response?.data?.data?.files[0]?.id,
       type: response?.data?.data?.fileType.name,
@@ -342,8 +342,8 @@ const DetailVideo = () => {
       const responseGet: any = await getPublicSuggestionList(
         slug?.split("-")?.[0]
       );
-      console.log(responseGet.data?.data);
-      setListSuggestion(responseGet.data?.data);
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
 
       // Reset input field
       inputElement.value = "";
@@ -358,8 +358,8 @@ const DetailVideo = () => {
     const response = await deletePublicSuggestion(dataId);
     console.log(response);
     const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
-    console.log(responseGet.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    console.log(responseGet?.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
   const deleteData = (dataId: any) => {