pull main

app/[locale]/(protected)/admin/settings/iklan/component/column.tsx

@@ -45,18 +45,20 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Judul",
-    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+    cell: ({ row }) => <div className="w-[150px]">{row.getValue("title")}</div>,
   },
   {
-    accessorKey: "categoryName",
+    accessorKey: "contentFileName",
-    header: "Kategori",
+    header: "Judul Gambar",
-    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
-  },
-  {
-    accessorKey: "createdAt",
-    header: "Tanggal Unggah",
     cell: ({ row }) => (
-      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
+      <div className="w-[450px]">{row.getValue("contentFileName")}</div>
+    ),
+  },
+  {
+    accessorKey: "placements",
+    header: "Posisi",
+    cell: ({ row }) => (
+      <div className="w-[150px]">{row.getValue("placements")}</div>
     ),
   },
 

app/[locale]/(protected)/admin/settings/iklan/component/table.tsx

@@ -36,6 +36,7 @@ import {
   Trash2,
   TrendingDown,
   TrendingUp,
+  UploadIcon,
   UserIcon,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -61,14 +62,17 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { listDataMedia } from "@/service/broadcast/broadcast";
+import {
+  listDataAdvertisements,
+  listDataMedia,
+} from "@/service/broadcast/broadcast";
 import { listEnableCategory } from "@/service/content/content";
 import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
 import { Link } from "@/i18n/routing";
 import { TambahIklanModal } from "@/components/form/setting/form-add-iklan";
 
-const IklanList = () => {
+const AdvertisementsList = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [showData, setShowData] = React.useState("10");
@@ -146,7 +150,7 @@ const IklanList = () => {
   async function fetchData() {
     try {
       loading();
-      const res = await listDataMedia(
+      const res = await listDataAdvertisements(
         page - 1,
         showData,
         "",
@@ -205,7 +209,15 @@ const IklanList = () => {
   return (
     <>
       <div>
-        <TambahIklanModal />
+        <div className="flex-none">
+          <Link href={"/admin/settings/iklan/create"}>
+            <Button color="primary" className="text-white" size="md">
+              <UploadIcon size={18} className="mr-2" />
+              Tambah Iklan
+            </Button>
+          </Link>
+        </div>
+        {/* <TambahIklanModal /> */}
       </div>
       <div className="flex justify-between ">
         <Input
@@ -395,4 +407,4 @@ const IklanList = () => {
   );
 };
 
-export default IklanList;
+export default AdvertisementsList;

app/[locale]/(protected)/admin/settings/iklan/create/page.tsx

@@ -0,0 +1,19 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormPressConference from "@/components/form/schedule/press-conference-form";
+import { CalendarPolriAdd } from "@/components/form/schedule/form-calendar-polri";
+import { TambahIklanModal } from "@/components/form/setting/form-add-iklan";
+
+const AdvertisementsCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <TambahIklanModal />
+      </div>
+    </div>
+  );
+};
+
+export default AdvertisementsCreatePage;

app/[locale]/(protected)/admin/settings/iklan/page.tsx

@@ -1,20 +1,16 @@
 "use client";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
+import AdvertisementsList from "./component/table";
-import PopUpList from "../popup/component/table";
-import PopUpListTable from "../popup/component/popup-table";
-import IklanList from "./component/table";
-import IklanListTable from "./component/popup-table";
 
-export default function AdminIklan() {
+export default function AdminAdvertisements() {
   const [selectedTab, setSelectedTab] = useState("content");
 
   return (
     <div>
       <SiteBreadcrumb />
       <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
-        <IklanList />
+        <AdvertisementsList />
       </div>
     </div>
   );

app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx

@@ -110,7 +110,7 @@ interface ListItemProps {
 interface APIResponse {
   error: boolean;
   message: any;
-  data: AgendaSettingsAPIResponse[] | null; // `data` bisa berupa array atau null
+  data: AgendaSettingsAPIResponse[] | null;
 }
 
 const CalendarView = ({ categories }: CalendarViewProps) => {
@@ -218,15 +218,21 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
     setSelectedCategory(categories?.map((c) => c.value));
   }, [categories]);
 
-  const filteredEvents = calendarEvents?.filter((event) =>
+  const filteredEvents = calendarEvents?.filter((event) => {
-    selectedCategory?.includes(event.extendedProps.calendar)
+    const eventCategories = event.extendedProps.calendar
-  );
+      ?.split(",")
+      .map((val: string) => val.trim()); // agar "1, 2" tetap dianggap benar
+
+    return eventCategories?.some((cat: string) =>
+      selectedCategory?.includes(cat)
+    );
+  });
 
   const displayedEvents =
     filteredEvents?.length > 1 ? filteredEvents : apiEvents;
 
   useEffect(() => {
-    setSelectedCategory(categories?.map((c) => c.value));
+    setSelectedCategory(categories?.map((c: any) => c.value));
   }, [categories]);
 
   useEffect(() => {
@@ -369,15 +375,15 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   };
 
   const handleClassName = (arg: EventContentArg) => {
-    if (arg.event.extendedProps.calendar === "mabes") {
+    if (arg.event.extendedProps.calendar === "1") {
       return "bg-yellow-500 border-none";
-    } else if (arg.event.extendedProps.calendar === "polda") {
+    } else if (arg.event.extendedProps.calendar === "2") {
       return "bg-blue-400 border-none";
-    } else if (arg.event.extendedProps.calendar === "polres") {
+    } else if (arg.event.extendedProps.calendar === "3") {
       return "bg-slate-400 border-none";
-    } else if (arg.event.extendedProps.calendar === "satker") {
+    } else if (arg.event.extendedProps.calendar === "4") {
       return "bg-orange-500 border-none";
-    } else if (arg.event.extendedProps.calendar === "international") {
+    } else if (arg.event.extendedProps.calendar === "5") {
       return "bg-green-400 border-none";
     } else {
       return "primary";
@@ -415,11 +421,11 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
 
   const getEventColor = (type: Event["type"]): string => {
     const colors: Record<Event["type"], string> = {
-      mabes: "bg-yellow-500",
+      1: "bg-yellow-500",
-      polda: "bg-blue-400",
+      2: "bg-blue-400",
-      polres: "bg-slate-400",
+      3: "bg-slate-400",
-      satker: "bg-orange-500",
+      4: "bg-orange-500",
-      international: "bg-green-400",
+      5: "bg-green-400",
     };
     return colors[type];
   };

app/[locale]/(protected)/contributor/agenda-setting/data.ts

@@ -22,7 +22,7 @@ export const calendarEvents = [
     allDay: false,
     //className: "warning",
     extendedProps: {
-      calendar: "polda",
+      calendar: "2",
     },
   },
   {
@@ -33,7 +33,7 @@ export const calendarEvents = [
     allDay: true,
     //className: "success",
     extendedProps: {
-      calendar: "national",
+      calendar: "1",
     },
   },
   {
@@ -44,7 +44,7 @@ export const calendarEvents = [
     end: new Date(date.getFullYear(), date.getMonth() + 1, -7),
     // className: "info",
     extendedProps: {
-      calendar: "polres",
+      calendar: "3",
     },
   },
   {
@@ -55,7 +55,7 @@ export const calendarEvents = [
     allDay: true,
     //className: "primary",
     extendedProps: {
-      calendar: "polres",
+      calendar: "3",
     },
   },
   {
@@ -66,7 +66,7 @@ export const calendarEvents = [
     allDay: true,
     // className: "danger",
     extendedProps: {
-      calendar: "polda",
+      calendar: "2",
     },
   },
   {
@@ -77,7 +77,7 @@ export const calendarEvents = [
     allDay: true,
     //className: "primary",
     extendedProps: {
-      calendar: "international",
+      calendar: "5",
     },
   },
 ];
@@ -85,31 +85,31 @@ export const calendarEvents = [
 export const calendarCategories = [
   {
     label: "Nasional",
-    value: "mabes",
+    value: "1",
     activeClass: "ring-primary-500 bg-primary-500",
     className: "group-hover:border-blue-500",
   },
   {
     label: "Polda",
-    value: "polda",
+    value: "2",
     activeClass: "ring-success-500 bg-success-500",
     className: " group-hover:border-green-500",
   },
   {
     label: "Polres",
-    value: "polres",
+    value: "3",
     activeClass: "ring-danger-500 bg-danger-500",
     className: " group-hover:border-red-500",
   },
   {
     label: "Satker",
-    value: "satker",
+    value: "4",
     activeClass: "ring-yellow-500 bg-yellow-500",
     className: " group-hover:border-red-500",
   },
   {
     label: "Internasional",
-    value: "international",
+    value: "5",
     activeClass: "ring-info-500 bg-info-500",
     className: " group-hover:border-cyan-500",
   },
@@ -118,31 +118,31 @@ export const calendarCategories = [
 export const categories = [
   {
     label: "Nasional",
-    value: "mabes",
+    value: "1",
     className:
       "data-[state=checked]:bg-yellow-500 data-[state=checked]:ring-yellow-500",
   },
   {
     label: "Polda",
-    value: "polda",
+    value: "2",
     className:
       "data-[state=checked]:bg-blue-400 data-[state=checked]:ring-blue-400",
   },
   {
     label: "Polres",
-    value: "polres",
+    value: "3",
     className:
       "data-[state=checked]:bg-slate-400  data-[state=checked]:ring-slate-400 ",
   },
   {
     label: "Satker",
-    value: "satker",
+    value: "4",
     className:
       "data-[state=checked]:bg-warning  data-[state=checked]:ring-warning ",
   },
   {
     label: "Internasional",
-    value: "international",
+    value: "5",
     className:
       "data-[state=checked]:bg-green-500 data-[state=checked]:ring-green-500 ",
   },

app/[locale]/(protected)/contributor/agenda-setting/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { getEvents, getCategories } from "./utils";
 import { calendarEvents, Category } from "./data";
@@ -8,7 +8,6 @@ import { useEffect, useState } from "react";
 import { CalendarCategory } from "./data";
 
 const CalenderPage = () => {
-  
   const [categories, setCategories] = useState<CalendarCategory[]>([]);
   const userLevelNumber = Number(getCookiesDecrypt("ulne")) || 0;
   const userLevelId = Number(getCookiesDecrypt("ulie")) || 0;
@@ -20,32 +19,32 @@ const CalenderPage = () => {
     async function initData() {
       const events = await getEvents();
       const categories = await getCategories();
-      let valueShowed : string[] = [];
+      let valueShowed: string[] = [];
       if (userLevelNumber == 1) {
-        valueShowed = ['mabes', 'polda', 'polres', 'satker', 'international'];
+        valueShowed = ["1", "2", "3", "4", "5"];
       } else if (userLevelNumber == 2 && userLevelId != 761) {
-        valueShowed = ['polda', 'polres'];
+        valueShowed = ["2", "3"];
-      } else if ((userLevelNumber == 2 && userLevelId == 761) || (userLevelNumber == 3 && userParentLevelId == 761)) {
+      } else if (
-        valueShowed = ['satker'];
+        (userLevelNumber == 2 && userLevelId == 761) ||
+        (userLevelNumber == 3 && userParentLevelId == 761)
+      ) {
+        valueShowed = ["4"];
       } else if (userLevelNumber == 3 && userParentLevelId != 761) {
-        valueShowed = ['polres'];
+        valueShowed = ["3"];
       }
-      
+
-      const formattedCategories = categories.filter((category: Category) => valueShowed.includes(category.value))
+      const formattedCategories = categories
-      .map((category: Category) => ({
+        .filter((category: Category) => valueShowed.includes(category.value))
-        ...category,
+        .map((category: Category) => ({
-        activeClass: "",
+          ...category,
-      }));
+          activeClass: "",
+        }));
       console.log(formattedCategories);
       setCategories(formattedCategories);
     }
   }, []);
 
-  return (
+  return <div>{categories && <CalendarView categories={categories} />}</div>;
-    <div>
-      {categories && <CalendarView categories={categories} />}
-    </div>
-  );
 };
 
 export default CalenderPage;

app/[locale]/(protected)/contributor/schedule/calendar-polri/component/calendar-polri-table.tsx

@@ -43,7 +43,10 @@ import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
-import { paginationSchedule } from "@/service/schedule/schedule";
+import {
+  paginationCalendar,
+  paginationSchedule,
+} from "@/service/schedule/schedule";
 import { CardHeader, CardTitle } from "@/components/ui/card";
 import { Link } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
@@ -117,7 +120,7 @@ const CalendarPolriTable = () => {
 
   async function fetchData() {
     try {
-      const res = await paginationSchedule(
+      const res = await paginationCalendar(
         showData,
         page - 1,
         1,
@@ -162,7 +165,12 @@ const CalendarPolriTable = () => {
               {t("calendar-polri")} {t("schedule")}
             </div>
             <div className="flex-none">
-              <CalendarPolriAdd />
+              <Link href={"/contributor/schedule/calendar-polri/create"}>
+                <Button color="primary" className="text-white" size="md">
+                  <UploadIcon size={18} className="mr-2" />
+                  Buat Kalender Polri
+                </Button>
+              </Link>
             </div>
           </div>
         </CardTitle>

app/[locale]/(protected)/contributor/schedule/calendar-polri/component/columns.tsx

@@ -13,6 +13,10 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Link } from "@/components/navigation";
 import { useTranslations } from "next-intl";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { error } from "@/lib/swal";
+import { deleteCalendar } from "@/service/schedule/schedule";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -58,76 +62,33 @@ const useTableColumns = () => {
         <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
       ),
     },
+
     {
-      accessorKey: "time",
+      accessorKey: "isActive",
-      header: t("time"),
-      cell: ({ row }: { row: { original: any } }) => {
-        console.log("Row Original Data:", row.original);
-        const { startTime, endTime } = row.original;
-        return (
-          <span className="whitespace-nowrap">
-            {startTime || "N/A"} - {endTime || "N/A"}
-          </span>
-        );
-      },
-    },
-    {
-      accessorKey: "address",
-      header: t("address"),
-      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
-        const address: string = row.getValue("address");
-        return (
-          <span className="whitespace-nowrap">
-            {address.length > 50 ? `${address.slice(0, 40)}...` : address}
-          </span>
-        );
-      },
-    },
-    {
-      accessorKey: "statusName",
       header: "Status",
       cell: ({ row }) => {
-        const statusColors: Record<string, string> = {
+        const isActive = row.getValue("isActive") as boolean;
-          diterima: "bg-green-100 text-green-600",
-          "menunggu review": "bg-orange-100 text-orange-600",
-        };
 
-        // Mengambil `statusName` dari data API
+        const status = isActive ? "Aktif" : "Tidak Aktif";
-        const status = row.getValue("statusName") as string;
+        const statusStyles = isActive
-        const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
+          ? "bg-green-100 text-green-600"
-
+          : "bg-gray-100 text-gray-600";
-        // Gunakan `statusName` untuk pencocokan
-        const statusStyles =
-          statusColors[statusName] || "bg-gray-100 text-gray-600";
 
         return (
           <Badge
             className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
           >
-            {status} {/* Tetap tampilkan nilai asli */}
+            {status}
           </Badge>
         );
       },
     },
     {
-      accessorKey: "speaker",
+      accessorKey: "createdByName",
-      header: t("speaker"),
-      cell: ({ row }: { row: { original: any } }) => {
-        console.log("Row Original Data:", row.original);
-        const { speakerTitle, speakerName } = row.original;
-        return (
-          <span className="whitespace-nowrap">
-            {speakerTitle || ""} {speakerName || ""}
-          </span>
-        );
-      },
-    },
-    {
-      accessorKey: "uploaderName",
       header: t("source"),
       cell: ({ row }) => (
         <span className="whitespace-nowrap">
-          {row.getValue("uploaderName")}
+          {row.getValue("createdByName")}
         </span>
       ),
     },
@@ -138,6 +99,51 @@ const useTableColumns = () => {
       header: t("action"),
       enableHiding: false,
       cell: ({ row }) => {
+        const MySwal = withReactContent(Swal);
+
+        async function doDelete(id: any) {
+          // loading();
+          const data = {
+            id,
+          };
+
+          const response = await deleteCalendar(id);
+
+          if (response?.error) {
+            error(response.message);
+            return false;
+          }
+          success();
+        }
+
+        function success() {
+          MySwal.fire({
+            title: "Sukses",
+            icon: "success",
+            confirmButtonColor: "#3085d6",
+            confirmButtonText: "OK",
+          }).then((result) => {
+            if (result.isConfirmed) {
+              window.location.reload();
+            }
+          });
+        }
+
+        const handleDeleteCalendars = (id: any) => {
+          MySwal.fire({
+            title: "Hapus Data",
+            text: "",
+            icon: "warning",
+            showCancelButton: true,
+            cancelButtonColor: "#3085d6",
+            confirmButtonColor: "#d33",
+            confirmButtonText: "Hapus",
+          }).then((result) => {
+            if (result.isConfirmed) {
+              doDelete(id);
+            }
+          });
+        };
         return (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -151,7 +157,7 @@ const useTableColumns = () => {
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
               <Link
-                href={`/contributor/schedule/press-conference/detail/${row.original.id}`}
+                href={`/contributor/schedule/calendar-polri/detail/${row.original.id}`}
               >
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
@@ -159,14 +165,17 @@ const useTableColumns = () => {
                 </DropdownMenuItem>
               </Link>
               <Link
-                href={`/contributor/schedule/press-conference/update/${row.original.id}`}
+                href={`/contributor/schedule/calendar-polri/update/${row.original.id}`}
               >
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <SquarePen className="w-4 h-4 me-1.5" />
                   Edit
                 </DropdownMenuItem>
               </Link>
-              <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
+              <DropdownMenuItem
+                onClick={() => handleDeleteCalendars(row.original.id)}
+                className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
+              >
                 <Trash2 className="w-4 h-4 me-1.5" />
                 Delete
               </DropdownMenuItem>

app/[locale]/(protected)/contributor/schedule/calendar-polri/create/page.tsx

@@ -2,13 +2,14 @@ import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 import FormTask from "@/components/form/task/task-form";
 import FormPressConference from "@/components/form/schedule/press-conference-form";
+import { CalendarPolriAdd } from "@/components/form/schedule/form-calendar-polri";
 
 const CalendarPolriCreatePage = () => {
   return (
     <div>
       <SiteBreadcrumb />
       <div className="space-y-4">
-        <FormPressConference />
+        <CalendarPolriAdd />
       </div>
     </div>
   );

app/[locale]/(protected)/contributor/schedule/calendar-polri/detail/[id]/page.tsx

@@ -6,13 +6,14 @@ import FormPressConference from "@/components/form/schedule/press-conference-for
 import FormDetailPressConference from "@/components/form/schedule/press-conference-detail-form";
 import { useParams } from "next/navigation";
 import { id } from "date-fns/locale";
+import { CalendarPolriAddDetail } from "@/components/form/schedule/form-calendar-polri-detail";
 
 const CalendarPolriDetailPage = () => {
   return (
     <div>
       <SiteBreadcrumb />
       <div className="space-y-4">
-        <FormDetailPressConference />
+        <CalendarPolriAddDetail />
       </div>
     </div>
   );

app/[locale]/(protected)/contributor/schedule/calendar-polri/update/[id]/page.tsx

@@ -7,13 +7,14 @@ import FormDetailPressConference from "@/components/form/schedule/press-conferen
 import { useParams } from "next/navigation";
 import { id } from "date-fns/locale";
 import FormUpdatePressConference from "@/components/form/schedule/press-conference-update-form";
+import { CalendarPolriAddUpdate } from "@/components/form/schedule/form-calendar-polri-update";
 
 const CalendarPolriUpdatePage = () => {
   return (
     <div>
       <SiteBreadcrumb />
       <div className="space-y-4">
-        <FormUpdatePressConference />
+        <CalendarPolriAddUpdate />
       </div>
     </div>
   );

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) {
+  async function sendSuggestionChild(parentId: any) {
-      const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
+    const inputElement = document.querySelector(
-  
+      `#input-comment-${parentId}`
-      if (inputElement && inputElement.value.length > 3) {
+    ) as HTMLInputElement;
-        loading();
+
-        const data = {
+    if (inputElement && inputElement.value.length > 3) {
-          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) {
       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]);
+      const responseGet: any = await getPublicSuggestionList(
-      console.log(responseGet.data?.data);
+        slug?.split("-")?.[0]
-      setListSuggestion(responseGet.data?.data);
+      );
+      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);
+    const checkMessage = checkMaliciousText(message);
-      if (checkMessage == "") {
+    if (checkMessage == "") {
-        if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      if (Number(userRoleId) < 1 || userRoleId == undefined) {
-          router.push("/auth");
+        router.push("/auth");
-        } else {
-          sendSuggestionChild(id);
-        }
       } 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>
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">
-              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
+                {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">
+                  <div
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                    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">
+            <button
-              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+              onClick={handleDownload}
-                <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" />
+              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} />
+            <Textarea
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+              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 ">
+                  <div
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                    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>{" "}
+                              <b>
-                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                                {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]">
+                          <div
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                            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}`)}>
+                              <a
-                                <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>
+                                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>{" "}
+                                      <b>
-                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                        {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]">
+                                  <div
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                    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)}>
+                                      <a
-                                        <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>
+                                        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}`)}>
+                                      <a
-                                        <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>
+                                        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>

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]);
+      const responseGet: any = await getPublicSuggestionList(
-      console.log(responseGet.data?.data);
+        slug?.split("-")?.[0]
-      setListSuggestion(responseGet.data?.data);
+      );
+      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);
+    console.log(responseGet?.data?.data);
-    setListSuggestion(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>
+              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify space-y-4">
-              <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
+                {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">
+                  <div
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                    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">
+            <button
-              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+              onClick={handleDownload}
-                <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" />
+              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}`)}>
+              <a
-                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+                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}`)}>
+              <a
-                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+                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}`)}>
+              <a
-                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+                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>
+                <PopoverTrigger
-                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                  className="flex justify-end gap-1 cursor-pointer"
-                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  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>
+                      <p className="text-base font-semibold mb-1">
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                        {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} />
+            <Textarea
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+              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 ">
+                  <div
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                    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>{" "}
+                              <b>
-                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                                {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]">
+                          <div
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                            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}`)}>
+                              <a
-                                <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>
+                                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>{" "}
+                                      <b>
-                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                        {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]">
+                                  <div
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder={t("enterReply")} />
+                                    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)}>
+                                      <a
-                                        <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>
+                                        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}`)}>
+                                      <a
-                                        <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>
+                                        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>

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]);
+      const responseGet: any = await getPublicSuggestionList(
-      console.log(responseGet.data?.data);
+        slug?.split("-")?.[0]
-      setListSuggestion(responseGet.data?.data);
+      );
+      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);
+    console.log(responseGet?.data?.data);
-    setListSuggestion(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>
+              <h1 className="flex flex-row font-bold text-2xl my-8">
-              <div className="font-light text-justify mb-4" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+                {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">
+                  <div
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                    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">
+            <button
-              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+              onClick={handleDownload}
-                <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" />
+              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} />
+            <Textarea
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+              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 ">
+                  <div
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                    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>{" "}
+                              <b>
-                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                                {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]">
+                          <div
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                            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}`)}>
+                              <a
-                                <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>
+                                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>{" "}
+                                      <b>
-                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                        {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]">
+                                  <div
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                    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)}>
+                                      <a
-                                        <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>
+                                        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}`)}>
+                                      <a
-                                        <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>
+                                        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>

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]);
+      const responseGet: any = await getPublicSuggestionList(
-      console.log(responseGet.data?.data);
+        slug?.split("-")?.[0]
-      setListSuggestion(responseGet.data?.data);
+      );
+      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);
+    console.log(responseGet?.data?.data);
-    setListSuggestion(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>
+              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">
-              <div className="font-light text-justify mb-5 space-y-4 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+                {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">
+                  <div
-                    <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" />
+                    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">
+            <button
-              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+              onClick={handleDownload}
-                <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" />
+              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}`)}>
+              <a
-                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+                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}`)}>
+              <a
-                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+                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}`)}>
+              <a
-                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+                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>
+                <PopoverTrigger
-                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                  className="flex justify-end gap-1 cursor-pointer"
-                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  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>
+                      <p className="text-base font-semibold mb-1">
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                        {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} />
+            <Textarea
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+              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 ">
+                  <div
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                    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>{" "}
+                              <b>
-                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                                {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]">
+                          <div
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                            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}`)}>
+                              <a
-                                <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>
+                                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>{" "}
+                                      <b>
-                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                        {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]">
+                                  <div
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                    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)}>
+                                      <a
-                                        <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>
+                                        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}`)}>
+                                      <a
-                                        <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>
+                                        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>

app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx

@@ -8,12 +8,24 @@ import { useParams, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import CustomEditor from "@/components/editor/custom-editor";
-import { generateDataArticle, getDetailArticle } from "@/service/content/ai";
+import {
+  generateDataArticle,
+  generateDataRewrite,
+  getDetailArticle,
+} from "@/service/content/ai";
 import { Button } from "@/components/ui/button";
 import { close, error, loading } from "@/config/swal";
 import { saveContentRewrite } from "@/service/content/content";
@@ -29,8 +41,13 @@ import { useTranslations } from "next-intl";
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   mainKeyword: z.string().min(1, { message: "Keyword diperlukan" }),
-  seo: z.string().min(1, { message: "Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter" }),
+  seo: z.string().min(1, {
-  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+    message:
+      "Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter",
+  }),
+  description: z
+    .string()
+    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -73,8 +90,12 @@ const page = (props: any) => {
   const validationSchema = Yup.object().shape({
     title: Yup.string().required("Judul tidak boleh kosong"),
     mainKeyword: Yup.string().required("Keyword tidak boleh kosong"),
-    seo: Yup.string().required("Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"),
+    seo: Yup.string().required(
-    description: Yup.string().required("Narasi Penugasan harus lebih dari 2 karakter."),
+      "Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"
+    ),
+    description: Yup.string().required(
+      "Narasi Penugasan harus lebih dari 2 karakter."
+    ),
   });
 
   let componentMounted = true;
@@ -152,7 +173,10 @@ const page = (props: any) => {
   useEffect(() => {
     async function initState() {
       setLoadingState(true);
-      const response = await getDetail(id, states == "polda" ? "polda" : "mabes");
+      const response = await getDetail(
+        id,
+        states == "polda" ? "polda" : "mabes"
+      );
       console.log("Detail dataaaa ::", response);
       if (response?.data?.data?.isActive == false) {
         window.location.replace("/");
@@ -174,7 +198,10 @@ const page = (props: any) => {
         setMain({
           id: response?.data?.data?.files[0]?.id,
           type: response?.data?.data?.fileType.name,
-          url: Number(response?.data?.data?.fileType?.id) == 4 ? response?.data?.data?.files[0]?.secondaryUrl : response?.data?.data?.files[0]?.url,
+          url:
+            Number(response?.data?.data?.fileType?.id) == 4
+              ? response?.data?.data?.files[0]?.secondaryUrl
+              : response?.data?.data?.files[0]?.url,
           thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
           names: response?.data?.data?.files[0]?.fileName,
           format: response?.data?.data?.files[0]?.format,
@@ -208,25 +235,17 @@ const page = (props: any) => {
   const handleGenerateArtikel = async () => {
     loading();
     const request = {
-      advConfig: "",
+      style: "friendly",
-      style: selectedWritingStyle,
+      lang: "id",
-      website: "None",
+      contextType: "text",
-      connectToWeb: true,
+      urlContext: null,
-      lang: selectedLanguage,
+      context: content?.description,
-      pointOfView: "None",
-      title: getValues("title"),
-      imageSource: "Web",
-      mainKeyword: getValues("mainKeyword"),
-      additionalKeywords: getValues("seo"),
-      targetCountry: null,
-      articleSize: selectedSize,
-      projectId: 2,
       createdBy: roleId,
-      // clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
+      sentiment: "Humorous",
-      clientId: "mediahubClientId",
+      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
     };
     console.log("Request", request);
-    const res = await generateDataArticle(request);
+    const res = await generateDataRewrite(request);
     close();
 
     if (res.error) {
@@ -272,7 +291,10 @@ const page = (props: any) => {
         throw new Error("Timeout: Artikel belum selesai diproses.");
       };
       const articleData = await waitForStatusUpdate();
-      const cleanArticleBody = articleData?.articleBody?.replace(/<img[^>]*>/g, "");
+      const cleanArticleBody = articleData?.articleBody?.replace(
+        /<img[^>]*>/g,
+        ""
+      );
       console.log("lalalala", cleanArticleBody);
       const articleImagesData = articleData?.imagesUrl?.split(",");
       setValue("description", cleanArticleBody || "");
@@ -302,7 +324,10 @@ const page = (props: any) => {
                     <div className="flex flex-col lg:flex-row gap-2">
                       <div className="gap-1 flex flex-col mb-3">
                         <p className="font-semibold">{t("language")}</p>
-                        <Select value={selectedLanguage} onValueChange={setSelectedLanguage}>
+                        <Select
+                          value={selectedLanguage}
+                          onValueChange={setSelectedLanguage}
+                        >
                           <SelectTrigger className="w-full lg:w-[180px]">
                             <SelectValue placeholder={t("selectLanguage")} />
                           </SelectTrigger>
@@ -317,7 +342,10 @@ const page = (props: any) => {
                       </div>
                       <div className="gap-1 flex flex-col mb-3">
                         <p className="font-semibold">{t("contextType")}</p>
-                        <Select value={selectedContextType} onValueChange={setSelectedContextType}>
+                        <Select
+                          value={selectedContextType}
+                          onValueChange={setSelectedContextType}
+                        >
                           <SelectTrigger className="w-full lg:w-[180px]">
                             <SelectValue placeholder={t("selectContext")} />
                           </SelectTrigger>
@@ -325,8 +353,12 @@ const page = (props: any) => {
                             <SelectGroup>
                               <SelectLabel>{t("selectContext")}</SelectLabel>
                               <SelectItem value="text">{t("text")}</SelectItem>
-                              <SelectItem value="article">{t("article")}</SelectItem>
+                              <SelectItem value="article">
-                              <SelectItem value="transcript">{t("transcript")}</SelectItem>
+                                {t("article")}
+                              </SelectItem>
+                              <SelectItem value="transcript">
+                                {t("transcript")}
+                              </SelectItem>
                               <SelectItem value="url">URL</SelectItem>
                             </SelectGroup>
                           </SelectContent>
@@ -334,7 +366,10 @@ const page = (props: any) => {
                       </div>
                       <div className="gap-1 flex flex-col mb-3">
                         <p className="font-semibold">{t("writingStyle")}</p>
-                        <Select value={selectedWritingStyle} onValueChange={setSelectedWritingStyle}>
+                        <Select
+                          value={selectedWritingStyle}
+                          onValueChange={setSelectedWritingStyle}
+                        >
                           <SelectTrigger className="w-full lg:w-[180px]">
                             <SelectValue placeholder={t("selectWriting")} />
                           </SelectTrigger>
@@ -342,8 +377,12 @@ const page = (props: any) => {
                             <SelectGroup>
                               <SelectLabel>{t("selectWriting")}</SelectLabel>
                               <SelectItem value="firendly">Friendly</SelectItem>
-                              <SelectItem value="profesional">Profesional</SelectItem>
+                              <SelectItem value="profesional">
-                              <SelectItem value="informational">Informational</SelectItem>
+                                Profesional
+                              </SelectItem>
+                              <SelectItem value="informational">
+                                Informational
+                              </SelectItem>
                               <SelectItem value="neutral">Neutral</SelectItem>
                               <SelectItem value="witty">Witty</SelectItem>
                             </SelectGroup>
@@ -352,16 +391,25 @@ const page = (props: any) => {
                       </div>
                       <div className="gap-1 flex flex-col mb-3">
                         <p className="font-semibold">{t("articleSize")}</p>
-                        <Select value={selectedSize} onValueChange={setSelectedSize}>
+                        <Select
+                          value={selectedSize}
+                          onValueChange={setSelectedSize}
+                        >
                           <SelectTrigger className="w-full lg:w-[180px]">
                             <SelectValue placeholder={t("selectSize")} />
                           </SelectTrigger>
                           <SelectContent>
                             <SelectGroup>
                               <SelectLabel>{t("selectSize")}</SelectLabel>
-                              <SelectItem value="news">News (300 - 900 words)</SelectItem>
+                              <SelectItem value="news">
-                              <SelectItem value="info">Info (900 - 2000 words)</SelectItem>
+                                News (300 - 900 words)
-                              <SelectItem value="detail">Detail (2000 - 5000 words)</SelectItem>
+                              </SelectItem>
+                              <SelectItem value="info">
+                                Info (900 - 2000 words)
+                              </SelectItem>
+                              <SelectItem value="detail">
+                                Detail (2000 - 5000 words)
+                              </SelectItem>
                             </SelectGroup>
                           </SelectContent>
                         </Select>
@@ -372,7 +420,18 @@ const page = (props: any) => {
                       <Controller
                         control={control}
                         name="title"
-                        render={({ field: { onChange, value } }) => <Input type="text" className={`w-full border py-3 rounded-lg ${errors.title ? "is-invalid" : ""}`} {...register("title")} id="title" value={value} onChange={onChange} />}
+                        render={({ field: { onChange, value } }) => (
+                          <Input
+                            type="text"
+                            className={`w-full border py-3 rounded-lg ${
+                              errors.title ? "is-invalid" : ""
+                            }`}
+                            {...register("title")}
+                            id="title"
+                            value={value}
+                            onChange={onChange}
+                          />
+                        )}
                       />
                     </div>
                     <div className="mb-3">
@@ -381,7 +440,16 @@ const page = (props: any) => {
                         control={control}
                         name="mainKeyword"
                         render={({ field: { onChange, value } }) => (
-                          <Input type="text" className={`w-full border py-3 rounded-lg ${errors.mainKeyword ? "is-invalid" : ""}`} {...register("mainKeyword")} id="mainKeyword" value={value} onChange={onChange} />
+                          <Input
+                            type="text"
+                            className={`w-full border py-3 rounded-lg ${
+                              errors.mainKeyword ? "is-invalid" : ""
+                            }`}
+                            {...register("mainKeyword")}
+                            id="mainKeyword"
+                            value={value}
+                            onChange={onChange}
+                          />
                         )}
                       />
                     </div>
@@ -391,12 +459,22 @@ const page = (props: any) => {
                         control={control}
                         name="seo"
                         render={({ field: { onChange, value } }) => (
-                          <Textarea className="py-20" id="seo" placeholder="Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter" {...register("seo")} onChange={onChange} value={value} />
+                          <Textarea
+                            className="py-20"
+                            id="seo"
+                            placeholder="Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"
+                            {...register("seo")}
+                            onChange={onChange}
+                            value={value}
+                          />
                         )}
                       />
                     </div>
                     <div className="mb-4">
-                      <a onClick={handleGenerateArtikel} className="text-blue-500 cursor-pointer hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2 text-sm lg:text-base">
+                      <a
+                        onClick={handleGenerateArtikel}
+                        className="text-blue-500 cursor-pointer hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2 text-sm lg:text-base"
+                      >
                         Generate Artikel
                       </a>
                       {isGeneratedArticle && (
@@ -426,14 +504,25 @@ const page = (props: any) => {
                         render={({ field: { onChange, value } }) =>
                           isLoadingData ? (
                             <div className="flex justify-center items-center h-40">
-                              <p className="text-gray-500">Loading Proses Data...</p>
+                              <p className="text-gray-500">
+                                Loading Proses Data...
+                              </p>
                             </div>
                           ) : (
-                            <CustomEditor onChange={onChange} initialData={articleBody || value} />
+                            <CustomEditor
+                              onChange={onChange}
+                              initialData={articleBody || value}
+                            />
                           )
                         }
                       />
-                      {articleBody === null || articleBody === "" ? <p className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</p> : ""}
+                      {articleBody === null || articleBody === "" ? (
+                        <p className="text-red-400 px-0 text-sm">
+                          Deskripsi tidak boleh kosong*
+                        </p>
+                      ) : (
+                        ""
+                      )}
                     </div>
                     <div className="flex flex-row gap-3">
                       <Button
@@ -445,7 +534,10 @@ const page = (props: any) => {
                       >
                         {t("back")}
                       </Button>
-                      <Button type="submit" className="border border-blue-500 bg-blue-500 text-sm lg:text-base text-white">
+                      <Button
+                        type="submit"
+                        className="border border-blue-500 bg-blue-500 text-sm lg:text-base text-white"
+                      >
                         {t("save")}
                       </Button>
                     </div>

app/[locale]/(public)/content-management/rewrite/page.tsx

@@ -283,7 +283,7 @@ const page = () => {
                                       </p>
                                     </div>
                                     <Link
-                                      href={`/content-management/rewrite/create/${image?.id}`}
+                                      href={`/content-management/rewrite/create/${image?.mediaUploadId}`}
                                       className="flex flex-row hover:text-red-800 gap-2"
                                     >
                                       <Icon icon="jam:write" fontSize={25} />

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

components/form/content/image-form.tsx

@@ -633,7 +633,7 @@ export default function FormImage() {
       setIsStartUpload(false);
       // hideProgress();
       Cookies.remove("idCreate");
-      successSubmit("in/contributor/content/image/");
+      successSubmit("/in/contributor/content/image");
     }
   }
 

components/form/content/spit-convert-form.tsx

@@ -169,6 +169,8 @@ export default function FormConvertSPIT() {
   const [filePlacements, setFilePlacements] = useState<string[][]>([]);
   const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
   const [files, setFiles] = useState<FileType[]>([]);
+  const [selectedWritingStyle, setSelectedWritingStyle] =
+    useState("profesional");
 
   const options: Option[] = [
     { id: "all", label: "SEMUA" },
@@ -494,7 +496,7 @@ export default function FormConvertSPIT() {
 
   const handleRewriteClick = async () => {
     const request = {
-      style: "friendly",
+      style: selectedWritingStyle,
       lang: "id",
       contextType: "text",
       urlContext: null,
@@ -702,6 +704,28 @@ export default function FormConvertSPIT() {
                         </p>
                       )}
                     </div>
+                    <div className="space-y-2 py-3 w-4/12">
+                      <Label>{t("writing-style")}</Label>
+                      <Select
+                        value={selectedWritingStyle}
+                        onValueChange={setSelectedWritingStyle}
+                      >
+                        <SelectTrigger size="md">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="friendly">Friendly</SelectItem>
+                          <SelectItem value="profesional">
+                            Profesional
+                          </SelectItem>
+                          <SelectItem value="informational">
+                            Informational
+                          </SelectItem>
+                          <SelectItem value="neutral">Neutral</SelectItem>
+                          <SelectItem value="witty">Witty</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
                     <div className="my-2">
                       <Button
                         size="sm"

components/form/schedule/form-calendar-polri-detail.tsx

@@ -0,0 +1,517 @@
+// components/TambahIklanModal.tsx
+"use client";
+
+import * as React from "react";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { CalendarIcon, ChevronDown, ChevronUp, Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
+import DatePicker from "react-datepicker";
+import { id } from "date-fns/locale";
+import "react-datepicker/dist/react-datepicker.css";
+import { zodResolver } from "@hookform/resolvers/zod";
+import router from "next/router";
+import { Controller, useForm } from "react-hook-form";
+import { date, z } from "zod";
+import { error } from "@/lib/swal";
+import { detailCalendar, postCalendar } from "@/service/schedule/schedule";
+import { DateRange } from "react-day-picker";
+import Cookies from "js-cookie";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { format, parseISO } from "date-fns";
+import { cn } from "@/lib/utils";
+import { getUserLevelForAssignments } from "@/service/task";
+import { Card } from "@/components/ui/card";
+import { useParams } from "next/navigation";
+import { Link } from "@/i18n/routing";
+
+const calendarSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface Detail {
+  id: number;
+  title: string;
+  description: string;
+}
+
+export function CalendarPolriAddDetail() {
+  const MySwal = withReactContent(Swal);
+  const { id } = useParams() as { id: string };
+  const [open, setOpen] = React.useState(false);
+  const t = useTranslations("Schedule");
+  type CalendarSchema = z.infer<typeof calendarSchema>;
+  const [eventDate, setEventDate] = React.useState<Date | null>(new Date());
+  const [listDest, setListDest] = React.useState([]);
+  const [checkedLevels, setCheckedLevels] = React.useState(new Set());
+  const [expandedPolda, setExpandedPolda] = React.useState([{}]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [detail, setDetail] = React.useState<Detail>();
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 0, 1),
+  });
+  const [refresh, setRefresh] = React.useState(false);
+
+  const [unitSelection, setUnitSelection] = React.useState({
+    semua: false,
+    mabes: false,
+    polda: false,
+    satker: false,
+    internasional: false,
+  });
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<CalendarSchema>({
+    resolver: zodResolver(calendarSchema),
+    defaultValues: {
+      description: "",
+    },
+  });
+
+  React.useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailCalendar(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+        if (details) {
+          setDate({
+            from: parseISO(details.startDate),
+            to: parseISO(details.endDate),
+          });
+        }
+
+        if (details?.assignedTo) {
+          const assignedToArray = details.assignedTo.split(",");
+          const newUnitSelection = { ...unitSelection };
+          assignedToArray.forEach((val: any) => {
+            switch (val) {
+              case "0":
+                newUnitSelection.semua = true;
+                break;
+              case "1":
+                newUnitSelection.mabes = true;
+                break;
+              case "2":
+                newUnitSelection.polda = true;
+                break;
+              case "3":
+                newUnitSelection.satker = true;
+                break;
+              case "4":
+                newUnitSelection.internasional = true;
+                break;
+              default:
+                break;
+            }
+          });
+          setUnitSelection(newUnitSelection);
+        }
+
+        // 2. Set checkbox wilayah
+        if (details?.assignedToLevel) {
+          const levelIds = details.assignedToLevel
+            .split(",")
+            .map((id: string) => parseInt(id));
+          setCheckedLevels(new Set(levelIds));
+        }
+      }
+    }
+    initState();
+  }, [refresh, setValue]);
+
+  React.useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response?.data?.data.list);
+        console.log("polda", response?.data?.data?.list);
+        const initialExpandedState = response?.data?.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
+  const handleUnitChange = (
+    key: keyof typeof unitSelection,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        mabes: value,
+        polda: value,
+        satker: value,
+        internasional: value,
+      };
+      setUnitSelection(newState);
+    } else {
+      const updatedSelection = {
+        ...unitSelection,
+        [key]: value,
+      };
+
+      const allChecked = ["mabes", "polda", "satker", "internasional"].every(
+        (k) => updatedSelection[k as keyof typeof unitSelection]
+      );
+
+      updatedSelection.semua = allChecked;
+
+      setUnitSelection(updatedSelection);
+    }
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
+  const save = async (data: CalendarSchema) => {
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      satker: "4",
+      internasional: "5",
+    };
+    const assignmentToString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+    const requestData = {
+      title: data.title,
+      startDate: date?.from ? format(date.from, "yyyy-MM-dd") : null,
+      endDate: date?.to ? format(date.to, "yyyy-MM-dd") : null,
+      description: data.description,
+      assignedTo: assignmentToString,
+      assignedToLevel: handlePoldaPolresChange(),
+    };
+
+    console.log("Form Data Submitted:", requestData);
+
+    const response = await postCalendar(requestData);
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
+
+    Cookies.set("scheduleId", response?.data?.data.id, {
+      expires: 1,
+    });
+
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.reload();
+    });
+  };
+
+  const onSubmit = (data: CalendarSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  return (
+    <div>
+      <Card className="px-3 py-3">
+        {detail !== undefined ? (
+          <div className="space-y-4">
+            <div>
+              <p className="font-medium mb-1">Tanggal Acara</p>
+              <div className="flex flex-col space-y-2">
+                <Popover>
+                  <PopoverTrigger asChild className="px-0">
+                    <Button
+                      size="md"
+                      id="date"
+                      variant={"outline"}
+                      className={cn(
+                        "w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
+                        !date && "text-muted-foreground"
+                      )}
+                    >
+                      <CalendarIcon size={15} className="mr-3" />
+                      {date?.from ? (
+                        date.to ? (
+                          <>
+                            {format(date.from, "LLL dd, y")} -{" "}
+                            {format(date.to, "LLL dd, y")}
+                          </>
+                        ) : (
+                          format(date.from, "LLL dd, y")
+                        )
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      initialFocus
+                      mode="range"
+                      defaultMonth={date?.from}
+                      selected={date}
+                      onSelect={setDate}
+                      numberOfMonths={1}
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+            <div>
+              <p className="font-medium">Publish Area</p>
+              <div className="flex flex-row">
+                <div className="flex flex-wrap gap-3 lg:ml-3 ">
+                  {Object.keys(unitSelection).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={
+                          unitSelection[key as keyof typeof unitSelection]
+                        }
+                        onCheckedChange={(value) =>
+                          handleUnitChange(
+                            key as keyof typeof unitSelection,
+                            value as boolean
+                          )
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+                <div className=" lg:pl-3">
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="soft" size="sm" color="primary">
+                        [{t("custom")}]
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                      <DialogHeader>
+                        <DialogTitle>
+                          Daftar Wilayah Polda dan Polres
+                        </DialogTitle>
+                      </DialogHeader>
+                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                        {listDest.map((polda: any) => (
+                          <div key={polda.id} className="border p-2">
+                            <Label className="flex items-center">
+                              <Checkbox
+                                checked={checkedLevels.has(polda.id)}
+                                onCheckedChange={() =>
+                                  handleCheckboxChange(polda.id)
+                                }
+                                className="mr-3"
+                              />
+                              {polda.name}
+                              <button
+                                onClick={() => toggleExpand(polda.id)}
+                                className="ml-2 focus:outline-none"
+                              >
+                                {expandedPolda[polda.id] ? (
+                                  <ChevronUp size={16} />
+                                ) : (
+                                  <ChevronDown size={16} />
+                                )}
+                              </button>
+                            </Label>
+                            {expandedPolda[polda.id] && (
+                              <div className="ml-6 mt-2">
+                                <Label className="block">
+                                  <Checkbox
+                                    checked={polda?.subDestination?.every(
+                                      (polres: any) =>
+                                        checkedLevels.has(polres.id)
+                                    )}
+                                    onCheckedChange={(isChecked) => {
+                                      const updatedLevels = new Set(
+                                        checkedLevels
+                                      );
+                                      polda?.subDestination?.forEach(
+                                        (polres: any) => {
+                                          if (isChecked) {
+                                            updatedLevels.add(polres.id);
+                                          } else {
+                                            updatedLevels.delete(polres.id);
+                                          }
+                                        }
+                                      );
+                                      setCheckedLevels(updatedLevels);
+                                    }}
+                                    className="mr-2"
+                                  />
+                                  Pilih Semua Polres
+                                </Label>
+                                {polda?.subDestination?.map((polres: any) => (
+                                  <Label key={polres.id} className="block mt-1">
+                                    <Checkbox
+                                      checked={checkedLevels.has(polres.id)}
+                                      onCheckedChange={() =>
+                                        handleCheckboxChange(polres.id)
+                                      }
+                                      className="mr-2"
+                                    />
+                                    {polres.name}
+                                  </Label>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <p className="font-medium">Nama Acara</p>
+              <Controller
+                control={control}
+                name="title"
+                render={({ field }) => (
+                  <Input
+                    size={"md"}
+                    type="text"
+                    value={detail?.title}
+                    onChange={field.onChange}
+                    placeholder="Masukan Judul"
+                  />
+                )}
+              />
+              {errors.title?.message && (
+                <p className="text-red-400 text-sm">{errors.title.message}</p>
+              )}
+            </div>
+
+            <div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
+              <svg
+                className="w-6 h-6 mb-2 text-blue-500"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
+                />
+              </svg>
+              <div>
+                Drag your file(s) or{" "}
+                <span className="text-blue-500 underline cursor-pointer">
+                  browse
+                </span>
+              </div>
+              <div className="text-xs mt-1">Max 10 MB files are allowed</div>
+            </div>
+
+            <div>
+              <p className="font-medium">Deskripsi</p>
+              <Controller
+                control={control}
+                name="description"
+                render={({ field }) => (
+                  <Textarea
+                    rows={3}
+                    value={detail?.description}
+                    onChange={field.onChange}
+                    placeholder="Masukan lokasi"
+                  />
+                )}
+              />
+              {errors.description?.message && (
+                <p className="text-red-400 text-sm">
+                  {errors.description?.message}
+                </p>
+              )}
+            </div>
+          </div>
+        ) : (
+          ""
+        )}
+        <div className="text-right">
+          <Link href={"contributor/schedule/calendar-polri"}>
+            <Button type="button" variant={"outline"} color="primary">
+              Kembali
+            </Button>
+          </Link>
+        </div>
+      </Card>
+    </div>
+  );
+}

components/form/schedule/form-calendar-polri-update.tsx

@@ -0,0 +1,684 @@
+// components/TambahIklanModal.tsx
+"use client";
+
+import * as React from "react";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  CalendarIcon,
+  ChevronDown,
+  ChevronUp,
+  CloudUpload,
+  Plus,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+import DatePicker from "react-datepicker";
+import { id } from "date-fns/locale";
+import "react-datepicker/dist/react-datepicker.css";
+import { zodResolver } from "@hookform/resolvers/zod";
+import router from "next/router";
+import { Controller, useForm } from "react-hook-form";
+import { date, z } from "zod";
+import { error, loading } from "@/lib/swal";
+import { detailCalendar, postCalendar } from "@/service/schedule/schedule";
+import { DateRange } from "react-day-picker";
+import Cookies from "js-cookie";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { format, parseISO } from "date-fns";
+import { cn } from "@/lib/utils";
+import { getUserLevelForAssignments } from "@/service/task";
+import { Card } from "@/components/ui/card";
+import { useDropzone } from "react-dropzone";
+import { Icon } from "@/components/ui/icon";
+import Image from "next/image";
+import FileUploader from "../shared/file-uploader";
+import { getCsrfToken } from "@/service/auth";
+import { Upload } from "tus-js-client";
+import { useParams } from "next/navigation";
+
+const calendarSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+interface FileUploaded {
+  id: number;
+  url: string;
+}
+
+interface Detail {
+  id: number;
+  title: string;
+  description: string;
+}
+
+export function CalendarPolriAddUpdate() {
+  const MySwal = withReactContent(Swal);
+  const { id } = useParams() as { id: string };
+  const [open, setOpen] = React.useState(false);
+  const t = useTranslations("Schedule");
+  type CalendarSchema = z.infer<typeof calendarSchema>;
+  const [eventDate, setEventDate] = React.useState<Date | null>(new Date());
+  const [listDest, setListDest] = React.useState([]);
+  const [checkedLevels, setCheckedLevels] = React.useState(new Set());
+  const [expandedPolda, setExpandedPolda] = React.useState([{}]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isImageUploadFinish, setIsImageUploadFinish] = React.useState(false);
+  const [files, setFiles] = React.useState<FileWithPreview[]>([]);
+  const [imageUploadedFiles, setImageUploadedFiles] = React.useState<
+    FileUploaded[]
+  >([]);
+  const [detail, setDetail] = React.useState<Detail>();
+  const [imageFiles, setImageFiles] = React.useState<FileWithPreview[]>([]);
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 0, 1),
+  });
+  const [refresh, setRefresh] = React.useState(false);
+
+  const [unitSelection, setUnitSelection] = React.useState({
+    semua: false,
+    mabes: false,
+    polda: false,
+    satker: false,
+    internasional: false,
+  });
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<CalendarSchema>({
+    resolver: zodResolver(calendarSchema),
+    defaultValues: {
+      description: "",
+    },
+  });
+
+  React.useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await detailCalendar(id);
+        const details = response?.data?.data;
+
+        setDetail(details);
+
+        if (details) {
+          setDate({
+            from: parseISO(details.startDate),
+            to: parseISO(details.endDate),
+          });
+
+          // 1. Set unit selection
+          if (details?.assignedTo) {
+            const assignedToArray = details.assignedTo.split(",");
+            const newUnitSelection = { ...unitSelection };
+            assignedToArray.forEach((val: any) => {
+              switch (val) {
+                case "0":
+                  newUnitSelection.semua = true;
+                  break;
+                case "1":
+                  newUnitSelection.mabes = true;
+                  break;
+                case "2":
+                  newUnitSelection.polda = true;
+                  break;
+                case "3":
+                  newUnitSelection.satker = true;
+                  break;
+                case "4":
+                  newUnitSelection.internasional = true;
+                  break;
+                default:
+                  break;
+              }
+            });
+            setUnitSelection(newUnitSelection);
+          }
+
+          // 2. Set checkbox wilayah
+          if (details?.assignedToLevel) {
+            const levelIds = details.assignedToLevel
+              .split(",")
+              .map((id: string) => parseInt(id));
+            setCheckedLevels(new Set(levelIds));
+          }
+        }
+      }
+    }
+
+    initState();
+  }, [refresh, setValue]);
+
+  React.useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response?.data?.data.list);
+        console.log("polda", response?.data?.data?.list);
+        const initialExpandedState = response?.data?.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
+  const handleUnitChange = (
+    key: keyof typeof unitSelection,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        mabes: value,
+        polda: value,
+        satker: value,
+        internasional: value,
+      };
+      setUnitSelection(newState);
+    } else {
+      const updatedSelection = {
+        ...unitSelection,
+        [key]: value,
+      };
+
+      const allChecked = ["mabes", "polda", "satker", "internasional"].every(
+        (k) => updatedSelection[k as keyof typeof unitSelection]
+      );
+
+      updatedSelection.semua = allChecked;
+
+      setUnitSelection(updatedSelection);
+    }
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
+  const save = async (data: CalendarSchema) => {
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      satker: "4",
+      internasional: "5",
+    };
+    const assignmentToString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+    const requestData = {
+      id: detail?.id,
+      title: data.title,
+      startDate: date?.from ? format(date.from, "yyyy-MM-dd") : null,
+      endDate: date?.to ? format(date.to, "yyyy-MM-dd") : null,
+      description: data.description,
+      assignedTo: assignmentToString,
+      assignedToLevel: handlePoldaPolresChange(),
+    };
+
+    console.log("Form Data Submitted:", requestData);
+
+    const response = await postCalendar(requestData);
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
+
+    Cookies.set("scheduleId", response?.data?.data.id, {
+      expires: 1,
+    });
+
+    loading();
+    if (imageFiles?.length === 0) {
+      setIsImageUploadFinish(true);
+    }
+    imageFiles?.map(async (item: any, index: number) => {
+      await uploadResumableFile(index, String(id), item, "1", "0");
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    fileTypeId: string,
+    duration: string
+  ) {
+    console.log(idx, id, file, fileTypeId, duration);
+
+    const resCsrf = await getCsrfToken();
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken,
+    };
+
+    const upload = new Upload(file, {
+      endpoint: `${process.env.NEXT_PUBLIC_API}/agenda-settings/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        calendarId: id,
+        filename: file.name,
+        contentType: file.type,
+        fileTypeId: fileTypeId,
+        duration,
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        // progressInfo[idx].percentage = uploadPersen;
+        // counterUpdateProgress++;
+        // console.log(counterUpdateProgress);
+        // setProgressList(progressInfo);
+        // setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        // uploadPersen = 100;
+        // progressInfo[idx].percentage = 100;
+        // counterUpdateProgress++;
+        // setCounterProgress(counterUpdateProgress);
+        successTodo();
+        if (fileTypeId == "1") {
+          setIsImageUploadFinish(true);
+        }
+      },
+    });
+
+    upload.start();
+  }
+
+  React.useEffect(() => {
+    successTodo();
+  }, [isImageUploadFinish]);
+
+  function successTodo() {
+    if (isImageUploadFinish) {
+      successSubmit("/in/contributor/agenda-setting");
+    }
+  }
+
+  const successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  const onSubmit = (data: CalendarSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const renderFilePreview = (url: string) => {
+    return (
+      <Image
+        width={48}
+        height={48}
+        alt={"file preview"}
+        src={url}
+        className=" rounded border p-0.5"
+      />
+    );
+  };
+
+  const handleRemoveFile = (id: number) => {};
+
+  return (
+    <div>
+      <Card className="px-3 py-3">
+        {detail !== undefined ? (
+          <div>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <div className="space-y-4">
+                <div>
+                  <p className="font-medium mb-1">Tanggal Acara</p>
+                  <div className="flex flex-col space-y-2">
+                    <Popover>
+                      <PopoverTrigger asChild className="px-0">
+                        <Button
+                          size="md"
+                          id="date"
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
+                            !date && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon size={15} className="mr-3" />
+                          {date?.from ? (
+                            date.to ? (
+                              <>
+                                {format(date.from, "LLL dd, y")} -{" "}
+                                {format(date.to, "LLL dd, y")}
+                              </>
+                            ) : (
+                              format(date.from, "LLL dd, y")
+                            )
+                          ) : (
+                            <span>Pick a date</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0" align="start">
+                        <Calendar
+                          initialFocus
+                          mode="range"
+                          defaultMonth={date?.from}
+                          selected={date}
+                          onSelect={setDate}
+                          numberOfMonths={1}
+                        />
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                </div>
+                <div>
+                  <p className="font-medium">Publish Area</p>
+                  <div className="flex flex-row">
+                    <div className="flex flex-wrap gap-3 lg:ml-3 ">
+                      {Object.keys(unitSelection).map((key) => (
+                        <div className="flex items-center gap-2" key={key}>
+                          <Checkbox
+                            id={key}
+                            checked={
+                              unitSelection[key as keyof typeof unitSelection]
+                            }
+                            onCheckedChange={(value) =>
+                              handleUnitChange(
+                                key as keyof typeof unitSelection,
+                                value as boolean
+                              )
+                            }
+                          />
+                          <Label htmlFor={key}>
+                            {key.charAt(0).toUpperCase() + key.slice(1)}
+                          </Label>
+                        </div>
+                      ))}
+                    </div>
+                    <div className=" lg:pl-3">
+                      <Dialog>
+                        <DialogTrigger asChild>
+                          <Button variant="soft" size="sm" color="primary">
+                            [{t("custom")}]
+                          </Button>
+                        </DialogTrigger>
+                        <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                          <DialogHeader>
+                            <DialogTitle>
+                              Daftar Wilayah Polda dan Polres
+                            </DialogTitle>
+                          </DialogHeader>
+                          <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                            {listDest.map((polda: any) => (
+                              <div key={polda.id} className="border p-2">
+                                <Label className="flex items-center">
+                                  <Checkbox
+                                    checked={checkedLevels.has(polda.id)}
+                                    onCheckedChange={() =>
+                                      handleCheckboxChange(polda.id)
+                                    }
+                                    className="mr-3"
+                                  />
+                                  {polda.name}
+                                  <button
+                                    onClick={() => toggleExpand(polda.id)}
+                                    className="ml-2 focus:outline-none"
+                                  >
+                                    {expandedPolda[polda.id] ? (
+                                      <ChevronUp size={16} />
+                                    ) : (
+                                      <ChevronDown size={16} />
+                                    )}
+                                  </button>
+                                </Label>
+                                {expandedPolda[polda.id] && (
+                                  <div className="ml-6 mt-2">
+                                    <Label className="block">
+                                      <Checkbox
+                                        checked={polda?.subDestination?.every(
+                                          (polres: any) =>
+                                            checkedLevels.has(polres.id)
+                                        )}
+                                        onCheckedChange={(isChecked) => {
+                                          const updatedLevels = new Set(
+                                            checkedLevels
+                                          );
+                                          polda?.subDestination?.forEach(
+                                            (polres: any) => {
+                                              if (isChecked) {
+                                                updatedLevels.add(polres.id);
+                                              } else {
+                                                updatedLevels.delete(polres.id);
+                                              }
+                                            }
+                                          );
+                                          setCheckedLevels(updatedLevels);
+                                        }}
+                                        className="mr-2"
+                                      />
+                                      Pilih Semua Polres
+                                    </Label>
+                                    {polda?.subDestination?.map(
+                                      (polres: any) => (
+                                        <Label
+                                          key={polres.id}
+                                          className="block mt-1"
+                                        >
+                                          <Checkbox
+                                            checked={checkedLevels.has(
+                                              polres.id
+                                            )}
+                                            onCheckedChange={() =>
+                                              handleCheckboxChange(polres.id)
+                                            }
+                                            className="mr-2"
+                                          />
+                                          {polres.name}
+                                        </Label>
+                                      )
+                                    )}
+                                  </div>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        </DialogContent>
+                      </Dialog>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <p className="font-medium">Nama Acara</p>
+                  <Controller
+                    control={control}
+                    name="title"
+                    render={({ field }) => (
+                      <Input
+                        size={"md"}
+                        type="text"
+                        defaultValue={detail?.title}
+                        onChange={field.onChange}
+                        placeholder="Masukan Judul"
+                      />
+                    )}
+                  />
+                  {errors.title?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.title.message}
+                    </p>
+                  )}
+                </div>
+
+                <div>
+                  <Label>Foto</Label>
+                  <FileUploader
+                    accept={{
+                      "image/*": [],
+                    }}
+                    maxSize={100}
+                    label="Upload file dengan format .png, .jpg, atau .jpeg."
+                    onDrop={(files) => setImageFiles(files)}
+                  />
+                  {imageUploadedFiles?.map((file: any, index: number) => (
+                    <div>
+                      <Card className="mt-2">
+                        <img
+                          src={file.url}
+                          alt="Thumbnail Gambar Utama"
+                          className="w-full h-auto rounded-md"
+                        />
+                      </Card>
+                      <div
+                        key={index}
+                        className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+                      >
+                        <div className="flex gap-3 items-center">
+                          <div className="file-preview">
+                            {renderFilePreview(file.url)}
+                          </div>
+                          <div>
+                            <div className=" text-sm  text-card-foreground">
+                              {file.fileName}
+                            </div>
+                          </div>
+                        </div>
+
+                        <Button
+                          size="icon"
+                          color="destructive"
+                          variant="outline"
+                          className=" border-none rounded-full"
+                          onClick={() => handleRemoveFile(file)}
+                        >
+                          <Icon icon="tabler:x" className=" h-5 w-5" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                <div>
+                  <p className="font-medium">Deskripsi</p>
+                  <Controller
+                    control={control}
+                    name="description"
+                    render={({ field }) => (
+                      <Textarea
+                        rows={3}
+                        defaultValue={detail?.description}
+                        onChange={field.onChange}
+                        placeholder="Masukan lokasi"
+                      />
+                    )}
+                  />
+                  {errors.description?.message && (
+                    <p className="text-red-400 text-sm">
+                      {errors.description?.message}
+                    </p>
+                  )}
+                </div>
+
+                <div className="text-right">
+                  <Button
+                    type="submit"
+                    className="bg-blue-600 text-white hover:bg-blue-700"
+                  >
+                    Submit
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        ) : (
+          ""
+        )}
+      </Card>
+    </div>
+  );
+}

components/form/schedule/form-calendar-polri.tsx

@@ -13,100 +13,590 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { CalendarIcon, Plus } from "lucide-react";
+import {
+  CalendarIcon,
+  ChevronDown,
+  ChevronUp,
+  CloudUpload,
+  Plus,
+} from "lucide-react";
 import { useTranslations } from "next-intl";
 import DatePicker from "react-datepicker";
 import { id } from "date-fns/locale";
 import "react-datepicker/dist/react-datepicker.css";
+import { zodResolver } from "@hookform/resolvers/zod";
+import router from "next/router";
+import { Controller, useForm } from "react-hook-form";
+import { date, z } from "zod";
+import { error, loading } from "@/lib/swal";
+import { postCalendar } from "@/service/schedule/schedule";
+import { DateRange } from "react-day-picker";
+import Cookies from "js-cookie";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { format } from "date-fns";
+import { cn } from "@/lib/utils";
+import { getUserLevelForAssignments } from "@/service/task";
+import { Card } from "@/components/ui/card";
+import { useDropzone } from "react-dropzone";
+import { Icon } from "@/components/ui/icon";
+import Image from "next/image";
+import FileUploader from "../shared/file-uploader";
+import { getCsrfToken } from "@/service/auth";
+import { Upload } from "tus-js-client";
+
+const calendarSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+interface FileUploaded {
+  id: number;
+  url: string;
+}
 
 export function CalendarPolriAdd() {
+  const MySwal = withReactContent(Swal);
   const [open, setOpen] = React.useState(false);
   const t = useTranslations("Schedule");
+  type CalendarSchema = z.infer<typeof calendarSchema>;
   const [eventDate, setEventDate] = React.useState<Date | null>(new Date());
-  return (
+  const [listDest, setListDest] = React.useState([]);
-    <Dialog open={open} onOpenChange={setOpen}>
+  const [checkedLevels, setCheckedLevels] = React.useState(new Set());
-      <DialogTrigger asChild>
+  const [expandedPolda, setExpandedPolda] = React.useState([{}]);
-        <Button onClick={() => setOpen(true)} color="primary" size="md">
+  const [isLoading, setIsLoading] = React.useState(false);
-          <Plus className="mr-2 h-4 w-4" /> {t("calendar-polri")}{" "}
+  const [isImageUploadFinish, setIsImageUploadFinish] = React.useState(false);
-          {t("schedule")}
+  const [files, setFiles] = React.useState<FileWithPreview[]>([]);
-        </Button>
+  const [imageUploadedFiles, setImageUploadedFiles] = React.useState<
-      </DialogTrigger>
+    FileUploaded[]
-      <DialogContent size="md">
+  >([]);
-        <DialogHeader>
+  const [imageFiles, setImageFiles] = React.useState<FileWithPreview[]>([]);
-          <DialogTitle>Buat Jadwal Kalender Polri</DialogTitle>
+  const [date, setDate] = React.useState<DateRange | undefined>({
-        </DialogHeader>
+    from: new Date(2025, 0, 1),
+  });
 
-        <div className="space-y-4">
+  const [unitSelection, setUnitSelection] = React.useState({
-          <div>
+    semua: false,
-            <p className="font-medium mb-1">Tanggal Acara</p>
+    mabes: false,
-            <div className="relative">
+    polda: false,
-              <DatePicker
+    satker: false,
-                selected={eventDate}
+    internasional: false,
-                onChange={(date) => setEventDate(date)}
+  });
-                dateFormat="dd MMMM yyyy"
+
-                locale={id}
+  const {
-                className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+    control,
-              />
+    handleSubmit,
-              <CalendarIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 pointer-events-none" />
+    setValue,
+    formState: { errors },
+  } = useForm<CalendarSchema>({
+    resolver: zodResolver(calendarSchema),
+    defaultValues: {
+      description: "",
+    },
+  });
+
+  React.useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response?.data?.data.list);
+        console.log("polda", response?.data?.data?.list);
+        const initialExpandedState = response?.data?.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
+  const handleUnitChange = (
+    key: keyof typeof unitSelection,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        mabes: value,
+        polda: value,
+        satker: value,
+        internasional: value,
+      };
+      setUnitSelection(newState);
+    } else {
+      const updatedSelection = {
+        ...unitSelection,
+        [key]: value,
+      };
+
+      const allChecked = ["mabes", "polda", "satker", "internasional"].every(
+        (k) => updatedSelection[k as keyof typeof unitSelection]
+      );
+
+      updatedSelection.semua = allChecked;
+
+      setUnitSelection(updatedSelection);
+    }
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
+  const save = async (data: CalendarSchema) => {
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      satker: "4",
+      internasional: "5",
+    };
+    const assignmentToString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+    const requestData = {
+      title: data.title,
+      startDate: date?.from ? format(date.from, "yyyy-MM-dd") : null,
+      endDate: date?.to ? format(date.to, "yyyy-MM-dd") : null,
+      description: data.description,
+      assignedTo: assignmentToString,
+      assignedToLevel: handlePoldaPolresChange(),
+    };
+
+    console.log("Form Data Submitted:", requestData);
+
+    const response = await postCalendar(requestData);
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
+
+    Cookies.set("scheduleId", response?.data?.data.id, {
+      expires: 1,
+    });
+
+    loading();
+    if (imageFiles?.length === 0) {
+      setIsImageUploadFinish(true);
+    }
+    imageFiles?.map(async (item: any, index: number) => {
+      await uploadResumableFile(index, String(id), item, "1", "0");
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    fileTypeId: string,
+    duration: string
+  ) {
+    console.log(idx, id, file, fileTypeId, duration);
+
+    const resCsrf = await getCsrfToken();
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken,
+    };
+
+    const upload = new Upload(file, {
+      endpoint: `${process.env.NEXT_PUBLIC_API}/agenda-settings/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        calendarId: id,
+        filename: file.name,
+        contentType: file.type,
+        fileTypeId: fileTypeId,
+        duration,
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        // progressInfo[idx].percentage = uploadPersen;
+        // counterUpdateProgress++;
+        // console.log(counterUpdateProgress);
+        // setProgressList(progressInfo);
+        // setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        // uploadPersen = 100;
+        // progressInfo[idx].percentage = 100;
+        // counterUpdateProgress++;
+        // setCounterProgress(counterUpdateProgress);
+        successTodo();
+        if (fileTypeId == "1") {
+          setIsImageUploadFinish(true);
+        }
+      },
+    });
+
+    upload.start();
+  }
+
+  React.useEffect(() => {
+    successTodo();
+  }, [isImageUploadFinish]);
+
+  function successTodo() {
+    if (isImageUploadFinish) {
+      successSubmit("/in/contributor/schedule/calendar-polri");
+    }
+  }
+
+  const successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  const onSubmit = (data: CalendarSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const renderFilePreview = (url: string) => {
+    return (
+      <Image
+        width={48}
+        height={48}
+        alt={"file preview"}
+        src={url}
+        className=" rounded border p-0.5"
+      />
+    );
+  };
+
+  const handleRemoveFile = (id: number) => {};
+
+  return (
+    <div>
+      <Card className="px-3 py-3">
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="space-y-4">
+            <div>
+              <p className="font-medium mb-1">Tanggal Acara</p>
+              <div className="flex flex-col space-y-2">
+                <Popover>
+                  <PopoverTrigger asChild className="px-0">
+                    <Button
+                      size="md"
+                      id="date"
+                      variant={"outline"}
+                      className={cn(
+                        "w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
+                        !date && "text-muted-foreground"
+                      )}
+                    >
+                      <CalendarIcon size={15} className="mr-3" />
+                      {date?.from ? (
+                        date.to ? (
+                          <>
+                            {format(date.from, "LLL dd, y")} -{" "}
+                            {format(date.to, "LLL dd, y")}
+                          </>
+                        ) : (
+                          format(date.from, "LLL dd, y")
+                        )
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      initialFocus
+                      mode="range"
+                      defaultMonth={date?.from}
+                      selected={date}
+                      onSelect={setDate}
+                      numberOfMonths={1}
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
             </div>
-          </div>
+            <div>
-          <div>
+              <p className="font-medium">Publish Area</p>
-            <p className="font-medium">Publish Area</p>
+              <div className="flex flex-row">
-            <div className="flex flex-wrap gap-4 mt-2">
+                <div className="flex flex-wrap gap-3 lg:ml-3 ">
-              {["Semua", "Nasional", "Polda", "Satker", "International"].map(
+                  {Object.keys(unitSelection).map((key) => (
-                (label) => (
+                    <div className="flex items-center gap-2" key={key}>
-                  <label key={label} className="flex items-center gap-2">
+                      <Checkbox
-                    <Checkbox id={label} />
+                        id={key}
-                    <span>{label}</span>
+                        checked={
-                  </label>
+                          unitSelection[key as keyof typeof unitSelection]
-                )
+                        }
+                        onCheckedChange={(value) =>
+                          handleUnitChange(
+                            key as keyof typeof unitSelection,
+                            value as boolean
+                          )
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+                <div className=" lg:pl-3">
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="soft" size="sm" color="primary">
+                        [{t("custom")}]
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                      <DialogHeader>
+                        <DialogTitle>
+                          Daftar Wilayah Polda dan Polres
+                        </DialogTitle>
+                      </DialogHeader>
+                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                        {listDest.map((polda: any) => (
+                          <div key={polda.id} className="border p-2">
+                            <Label className="flex items-center">
+                              <Checkbox
+                                checked={checkedLevels.has(polda.id)}
+                                onCheckedChange={() =>
+                                  handleCheckboxChange(polda.id)
+                                }
+                                className="mr-3"
+                              />
+                              {polda.name}
+                              <button
+                                onClick={() => toggleExpand(polda.id)}
+                                className="ml-2 focus:outline-none"
+                              >
+                                {expandedPolda[polda.id] ? (
+                                  <ChevronUp size={16} />
+                                ) : (
+                                  <ChevronDown size={16} />
+                                )}
+                              </button>
+                            </Label>
+                            {expandedPolda[polda.id] && (
+                              <div className="ml-6 mt-2">
+                                <Label className="block">
+                                  <Checkbox
+                                    checked={polda?.subDestination?.every(
+                                      (polres: any) =>
+                                        checkedLevels.has(polres.id)
+                                    )}
+                                    onCheckedChange={(isChecked) => {
+                                      const updatedLevels = new Set(
+                                        checkedLevels
+                                      );
+                                      polda?.subDestination?.forEach(
+                                        (polres: any) => {
+                                          if (isChecked) {
+                                            updatedLevels.add(polres.id);
+                                          } else {
+                                            updatedLevels.delete(polres.id);
+                                          }
+                                        }
+                                      );
+                                      setCheckedLevels(updatedLevels);
+                                    }}
+                                    className="mr-2"
+                                  />
+                                  Pilih Semua Polres
+                                </Label>
+                                {polda?.subDestination?.map((polres: any) => (
+                                  <Label key={polres.id} className="block mt-1">
+                                    <Checkbox
+                                      checked={checkedLevels.has(polres.id)}
+                                      onCheckedChange={() =>
+                                        handleCheckboxChange(polres.id)
+                                      }
+                                      className="mr-2"
+                                    />
+                                    {polres.name}
+                                  </Label>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <p className="font-medium">Nama Acara</p>
+              <Controller
+                control={control}
+                name="title"
+                render={({ field }) => (
+                  <Input
+                    size={"md"}
+                    type="text"
+                    value={field.value}
+                    onChange={field.onChange}
+                    placeholder="Masukan Judul"
+                  />
+                )}
+              />
+              {errors.title?.message && (
+                <p className="text-red-400 text-sm">{errors.title.message}</p>
               )}
             </div>
-          </div>
 
-          <div>
-            <p className="font-medium">Nama Acara</p>
-            <Input placeholder="Masukkan nama acara" />
-          </div>
-
-          <div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
-            <svg
-              className="w-6 h-6 mb-2 text-blue-500"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
-              />
-            </svg>
             <div>
-              Drag your file(s) or{" "}
+              <Label>Foto</Label>
-              <span className="text-blue-500 underline cursor-pointer">
+              <FileUploader
-                browse
+                accept={{
-              </span>
+                  "image/*": [],
+                }}
+                maxSize={100}
+                label="Upload file dengan format .png, .jpg, atau .jpeg."
+                onDrop={(files) => setImageFiles(files)}
+              />
+              {imageUploadedFiles?.map((file: any, index: number) => (
+                <div>
+                  <Card className="mt-2">
+                    <img
+                      src={file.url}
+                      alt="Thumbnail Gambar Utama"
+                      className="w-full h-auto rounded-md"
+                    />
+                  </Card>
+                  <div
+                    key={index}
+                    className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+                  >
+                    <div className="flex gap-3 items-center">
+                      <div className="file-preview">
+                        {renderFilePreview(file.url)}
+                      </div>
+                      <div>
+                        <div className=" text-sm  text-card-foreground">
+                          {file.fileName}
+                        </div>
+                      </div>
+                    </div>
+
+                    <Button
+                      size="icon"
+                      color="destructive"
+                      variant="outline"
+                      className=" border-none rounded-full"
+                      onClick={() => handleRemoveFile(file)}
+                    >
+                      <Icon icon="tabler:x" className=" h-5 w-5" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
             </div>
-            <div className="text-xs mt-1">Max 10 MB files are allowed</div>
-          </div>
 
-          <div>
+            <div>
-            <p className="font-medium">Deskripsi</p>
+              <p className="font-medium">Deskripsi</p>
-            <Textarea placeholder="Masukkan deskripsi acara" rows={4} />
+              <Controller
-          </div>
+                control={control}
+                name="description"
+                render={({ field }) => (
+                  <Textarea
+                    rows={3}
+                    value={field.value}
+                    onChange={field.onChange}
+                    placeholder="Masukan Description"
+                  />
+                )}
+              />
+              {errors.description?.message && (
+                <p className="text-red-400 text-sm">
+                  {errors.description?.message}
+                </p>
+              )}
+            </div>
 
-          <div className="text-right">
+            <div className="text-right">
-            <Button
+              <Button
-              type="submit"
+                type="submit"
-              className="bg-blue-600 text-white hover:bg-blue-700"
+                className="bg-blue-600 text-white hover:bg-blue-700"
-            >
+              >
-              Submit
+                Submit
-            </Button>
+              </Button>
+            </div>
           </div>
-        </div>
+        </form>
-      </DialogContent>
+      </Card>
-    </Dialog>
+    </div>
   );
 }

components/form/setting/form-add-iklan-detail.tsx

@@ -0,0 +1,108 @@
+// components/TambahIklanModal.tsx
+"use client";
+
+import * as React from "react";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Plus } from "lucide-react";
+
+export function TambahIklanModalDetail() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)} color="primary" size="md">
+          <Plus className="mr-2 h-4 w-4" />
+          Tambah Iklan
+        </Button>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>Tambah Iklan</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div>
+            <p className="font-medium">Target Area</p>
+            <div className="flex flex-wrap gap-4 mt-2">
+              {["Kiri - 1", "Kiri - 2", "Kanan - 1", "Kanan - 2"].map(
+                (label) => (
+                  <label key={label} className="flex items-center gap-2">
+                    <Checkbox id={label} />
+                    <span>{label}</span>
+                  </label>
+                )
+              )}
+            </div>
+          </div>
+
+          <div>
+            <p className="font-medium">Publish Area</p>
+            <div className="flex flex-wrap gap-4 mt-2">
+              {["Semua", "Nasional", "Polda", "Satker", "International"].map(
+                (label) => (
+                  <label key={label} className="flex items-center gap-2">
+                    <Checkbox id={label} />
+                    <span>{label}</span>
+                  </label>
+                )
+              )}
+            </div>
+          </div>
+
+          <div>
+            <p className="font-medium">Nama Iklan</p>
+            <Input placeholder="Masukkan nama iklan" />
+          </div>
+
+          <div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
+            <svg
+              className="w-6 h-6 mb-2 text-blue-500"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
+              />
+            </svg>
+            <div>
+              Drag your file(s) or{" "}
+              <span className="text-blue-500 underline cursor-pointer">
+                browse
+              </span>
+            </div>
+            <div className="text-xs mt-1">Max 10 MB files are allowed</div>
+          </div>
+
+          <div>
+            <p className="font-medium">Deskripsi</p>
+            <Textarea placeholder="Masukkan deskripsi iklan" rows={4} />
+          </div>
+
+          <div className="text-right">
+            <Button
+              type="submit"
+              className="bg-blue-600 text-white hover:bg-blue-700"
+            >
+              Tambah Iklan
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/form/setting/form-add-iklan-update.tsx

@@ -0,0 +1,108 @@
+// components/TambahIklanModal.tsx
+"use client";
+
+import * as React from "react";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Plus } from "lucide-react";
+
+export function TambahIklanModalUpdate() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)} color="primary" size="md">
+          <Plus className="mr-2 h-4 w-4" />
+          Tambah Iklan
+        </Button>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>Tambah Iklan</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div>
+            <p className="font-medium">Target Area</p>
+            <div className="flex flex-wrap gap-4 mt-2">
+              {["Kiri - 1", "Kiri - 2", "Kanan - 1", "Kanan - 2"].map(
+                (label) => (
+                  <label key={label} className="flex items-center gap-2">
+                    <Checkbox id={label} />
+                    <span>{label}</span>
+                  </label>
+                )
+              )}
+            </div>
+          </div>
+
+          <div>
+            <p className="font-medium">Publish Area</p>
+            <div className="flex flex-wrap gap-4 mt-2">
+              {["Semua", "Nasional", "Polda", "Satker", "International"].map(
+                (label) => (
+                  <label key={label} className="flex items-center gap-2">
+                    <Checkbox id={label} />
+                    <span>{label}</span>
+                  </label>
+                )
+              )}
+            </div>
+          </div>
+
+          <div>
+            <p className="font-medium">Nama Iklan</p>
+            <Input placeholder="Masukkan nama iklan" />
+          </div>
+
+          <div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
+            <svg
+              className="w-6 h-6 mb-2 text-blue-500"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
+              />
+            </svg>
+            <div>
+              Drag your file(s) or{" "}
+              <span className="text-blue-500 underline cursor-pointer">
+                browse
+              </span>
+            </div>
+            <div className="text-xs mt-1">Max 10 MB files are allowed</div>
+          </div>
+
+          <div>
+            <p className="font-medium">Deskripsi</p>
+            <Textarea placeholder="Masukkan deskripsi iklan" rows={4} />
+          </div>
+
+          <div className="text-right">
+            <Button
+              type="submit"
+              className="bg-blue-600 text-white hover:bg-blue-700"
+            >
+              Tambah Iklan
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/form/setting/form-add-iklan.tsx

@@ -13,96 +13,558 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { Plus } from "lucide-react";
+import { ChevronDown, ChevronUp, Plus } from "lucide-react";
+import { Card } from "@/components/ui/card";
+import Image from "next/image";
+import { Upload } from "tus-js-client";
+import { getCsrfToken } from "@/service/auth";
+import { error, loading } from "@/lib/swal";
+import { format } from "date-fns";
+import { getUserLevelForAssignments } from "@/service/task";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+import withReactContent from "sweetalert2-react-content";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import { z } from "zod";
+import { DateRange } from "react-day-picker";
+import { postCalendar } from "@/service/schedule/schedule";
+import { id } from "date-fns/locale";
+import router from "next/router";
+import { postAdvertisements } from "@/service/settings/settings";
+import Cookies from "js-cookie";
+import { Label } from "@/components/ui/label";
+import FileUploader from "../shared/file-uploader";
+import { Icon } from "@/components/ui/icon";
+
+const calendarSchema = z.object({
+  title: z.string().min(1, { message: "Judul diperlukan" }),
+  description: z.string().min(1, { message: "Judul diperlukan" }),
+});
+
+interface FileWithPreview extends File {
+  preview: string;
+}
+
+interface FileUploaded {
+  id: number;
+  url: string;
+}
 
 export function TambahIklanModal() {
   const [open, setOpen] = React.useState(false);
+  const MySwal = withReactContent(Swal);
+  const t = useTranslations("Schedule");
+  type CalendarSchema = z.infer<typeof calendarSchema>;
+  const [eventDate, setEventDate] = React.useState<Date | null>(new Date());
+  const [listDest, setListDest] = React.useState([]);
+  const [checkedLevels, setCheckedLevels] = React.useState(new Set());
+  const [expandedPolda, setExpandedPolda] = React.useState([{}]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isImageUploadFinish, setIsImageUploadFinish] = React.useState(false);
+  const [files, setFiles] = React.useState<FileWithPreview[]>([]);
+  const [selectedPlacement, setSelectedPlacement] = React.useState<string>("");
+  const [imageUploadedFiles, setImageUploadedFiles] = React.useState<
+    FileUploaded[]
+  >([]);
+  const [imageFiles, setImageFiles] = React.useState<FileWithPreview[]>([]);
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 0, 1),
+  });
 
+  const [unitSelection, setUnitSelection] = React.useState({
+    semua: false,
+    mabes: false,
+    polda: false,
+    satker: false,
+    internasional: false,
+  });
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<CalendarSchema>({
+    resolver: zodResolver(calendarSchema),
+    defaultValues: {
+      description: "",
+    },
+  });
+
+  const handlePlacementSelect = (value: string) => {
+    setSelectedPlacement(value);
+  };
+
+  React.useEffect(() => {
+    async function fetchPoldaPolres() {
+      setIsLoading(true);
+      try {
+        const response = await getUserLevelForAssignments();
+        setListDest(response?.data?.data.list);
+        console.log("polda", response?.data?.data?.list);
+        const initialExpandedState = response?.data?.data.list.reduce(
+          (acc: any, polda: any) => {
+            acc[polda.id] = false;
+            return acc;
+          },
+          {}
+        );
+        setExpandedPolda(initialExpandedState);
+        console.log("polres", initialExpandedState);
+      } catch (error) {
+        console.error("Error fetching Polda/Polres data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPoldaPolres();
+  }, []);
+
+  const handleCheckboxChange = (levelId: number) => {
+    setCheckedLevels((prev) => {
+      const updatedLevels = new Set(prev);
+      if (updatedLevels.has(levelId)) {
+        updatedLevels.delete(levelId);
+      } else {
+        updatedLevels.add(levelId);
+      }
+      return updatedLevels;
+    });
+  };
+
+  const handlePoldaPolresChange = () => {
+    return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
+  };
+
+  const handleUnitChange = (
+    key: keyof typeof unitSelection,
+    value: boolean
+  ) => {
+    if (key === "semua") {
+      const newState = {
+        semua: value,
+        mabes: value,
+        polda: value,
+        satker: value,
+        internasional: value,
+      };
+      setUnitSelection(newState);
+    } else {
+      const updatedSelection = {
+        ...unitSelection,
+        [key]: value,
+      };
+
+      const allChecked = ["mabes", "polda", "satker", "internasional"].every(
+        (k) => updatedSelection[k as keyof typeof unitSelection]
+      );
+
+      updatedSelection.semua = allChecked;
+
+      setUnitSelection(updatedSelection);
+    }
+  };
+
+  const toggleExpand = (poldaId: any) => {
+    setExpandedPolda((prev: any) => ({
+      ...prev,
+      [poldaId]: !prev[poldaId],
+    }));
+  };
+
+  const save = async (data: CalendarSchema) => {
+    const unitMapping = {
+      allUnit: "0",
+      mabes: "1",
+      polda: "2",
+      satker: "4",
+      internasional: "5",
+    };
+    const assignmentToString = Object.keys(unitSelection)
+      .filter((key) => unitSelection[key as keyof typeof unitSelection])
+      .map((key) => unitMapping[key as keyof typeof unitMapping])
+      .join(",");
+    const requestData = {
+      title: data.title,
+      placements: selectedPlacement,
+      description: data.description,
+      redirectLink: "https://new.netidhub.com",
+      createdBy: assignmentToString,
+      assignedToLevel: handlePoldaPolresChange(),
+    };
+
+    console.log("Form Data Submitted:", requestData);
+
+    const response = await postAdvertisements(requestData);
+    if (response?.error) {
+      error(response?.message);
+      return false;
+    }
+
+    Cookies.set("scheduleId", response?.data?.data.id, {
+      expires: 1,
+    });
+
+    loading();
+    if (imageFiles?.length === 0) {
+      setIsImageUploadFinish(true);
+    }
+    imageFiles?.map(async (item: any, index: number) => {
+      await uploadResumableFile(index, String(id), item, "1", "0");
+    });
+  };
+
+  async function uploadResumableFile(
+    idx: number,
+    id: string,
+    file: any,
+    fileTypeId: string,
+    duration: string
+  ) {
+    console.log(idx, id, file, fileTypeId, duration);
+
+    const resCsrf = await getCsrfToken();
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken,
+    };
+
+    const upload = new Upload(file, {
+      endpoint: `${process.env.NEXT_PUBLIC_API}/advertisment/file/upload`,
+      headers: headers,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        advertisementsId: id,
+        filename: file.name,
+        contentType: file.type,
+        fileTypeId: fileTypeId,
+        duration,
+      },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject();
+        xhr.withCredentials = true;
+      },
+      onError: async (e: any) => {
+        console.log("Error upload :", e);
+        error(e);
+      },
+      onChunkComplete: (
+        chunkSize: any,
+        bytesAccepted: any,
+        bytesTotal: any
+      ) => {
+        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        // progressInfo[idx].percentage = uploadPersen;
+        // counterUpdateProgress++;
+        // console.log(counterUpdateProgress);
+        // setProgressList(progressInfo);
+        // setCounterProgress(counterUpdateProgress);
+      },
+      onSuccess: async () => {
+        // uploadPersen = 100;
+        // progressInfo[idx].percentage = 100;
+        // counterUpdateProgress++;
+        // setCounterProgress(counterUpdateProgress);
+        successTodo();
+        if (fileTypeId == "1") {
+          setIsImageUploadFinish(true);
+        }
+      },
+    });
+
+    upload.start();
+  }
+
+  React.useEffect(() => {
+    successTodo();
+  }, [isImageUploadFinish]);
+
+  function successTodo() {
+    if (isImageUploadFinish) {
+      successSubmit("/in/admin/settings/iklan");
+    }
+  }
+
+  const successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  };
+
+  const onSubmit = (data: CalendarSchema) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const renderFilePreview = (url: string) => {
+    return (
+      <Image
+        width={48}
+        height={48}
+        alt={"file preview"}
+        src={url}
+        className=" rounded border p-0.5"
+      />
+    );
+  };
+
+  const handleRemoveFile = (id: number) => {};
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <div>
-      <DialogTrigger asChild>
+      <Card className="px-3 py-3">
-        <Button onClick={() => setOpen(true)} color="primary" size="md">
+        <form onSubmit={handleSubmit(onSubmit)}>
-          <Plus className="mr-2 h-4 w-4" />
+          <div className="space-y-4">
-          Tambah Iklan
-        </Button>
-      </DialogTrigger>
-      <DialogContent size="md">
-        <DialogHeader>
-          <DialogTitle>Tambah Iklan</DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div>
-            <p className="font-medium">Target Area</p>
-            <div className="flex flex-wrap gap-4 mt-2">
-              {["Kiri - 1", "Kiri - 2", "Kanan - 1", "Kanan - 2"].map(
-                (label) => (
-                  <label key={label} className="flex items-center gap-2">
-                    <Checkbox id={label} />
-                    <span>{label}</span>
-                  </label>
-                )
-              )}
-            </div>
-          </div>
-
-          <div>
-            <p className="font-medium">Publish Area</p>
-            <div className="flex flex-wrap gap-4 mt-2">
-              {["Semua", "Nasional", "Polda", "Satker", "International"].map(
-                (label) => (
-                  <label key={label} className="flex items-center gap-2">
-                    <Checkbox id={label} />
-                    <span>{label}</span>
-                  </label>
-                )
-              )}
-            </div>
-          </div>
-
-          <div>
-            <p className="font-medium">Nama Iklan</p>
-            <Input placeholder="Masukkan nama iklan" />
-          </div>
-
-          <div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
-            <svg
-              className="w-6 h-6 mb-2 text-blue-500"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
-              />
-            </svg>
             <div>
-              Drag your file(s) or{" "}
+              <p className="font-medium">Target Area</p>
-              <span className="text-blue-500 underline cursor-pointer">
+              <div className="flex flex-wrap gap-4 mt-2">
-                browse
+                {[
-              </span>
+                  { label: "Kiri - 1", value: "left-top" },
+                  { label: "Kiri - 2", value: "left-bottom" },
+                  { label: "Kanan - 1", value: "right-top" },
+                  { label: "Kanan - 2", value: "right-bottom" },
+                ].map(({ label, value }) => (
+                  <label key={value} className="flex items-center gap-2">
+                    <Checkbox
+                      id={value}
+                      checked={selectedPlacement === value}
+                      onCheckedChange={() => handlePlacementSelect(value)}
+                    />
+                    <span>{label}</span>
+                  </label>
+                ))}
+              </div>
             </div>
-            <div className="text-xs mt-1">Max 10 MB files are allowed</div>
-          </div>
 
-          <div>
+            <div>
-            <p className="font-medium">Deskripsi</p>
+              <p className="font-medium">Publish Area</p>
-            <Textarea placeholder="Masukkan deskripsi iklan" rows={4} />
+              <div className="flex flex-row">
-          </div>
+                <div className="flex flex-wrap gap-3 lg:ml-3 ">
+                  {Object.keys(unitSelection).map((key) => (
+                    <div className="flex items-center gap-2" key={key}>
+                      <Checkbox
+                        id={key}
+                        checked={
+                          unitSelection[key as keyof typeof unitSelection]
+                        }
+                        onCheckedChange={(value) =>
+                          handleUnitChange(
+                            key as keyof typeof unitSelection,
+                            value as boolean
+                          )
+                        }
+                      />
+                      <Label htmlFor={key}>
+                        {key.charAt(0).toUpperCase() + key.slice(1)}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+                <div className=" lg:pl-3">
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="soft" size="sm" color="primary">
+                        [{t("custom")}]
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
+                      <DialogHeader>
+                        <DialogTitle>
+                          Daftar Wilayah Polda dan Polres
+                        </DialogTitle>
+                      </DialogHeader>
+                      <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
+                        {listDest.map((polda: any) => (
+                          <div key={polda.id} className="border p-2">
+                            <Label className="flex items-center">
+                              <Checkbox
+                                checked={checkedLevels.has(polda.id)}
+                                onCheckedChange={() =>
+                                  handleCheckboxChange(polda.id)
+                                }
+                                className="mr-3"
+                              />
+                              {polda.name}
+                              <button
+                                onClick={() => toggleExpand(polda.id)}
+                                className="ml-2 focus:outline-none"
+                              >
+                                {expandedPolda[polda.id] ? (
+                                  <ChevronUp size={16} />
+                                ) : (
+                                  <ChevronDown size={16} />
+                                )}
+                              </button>
+                            </Label>
+                            {expandedPolda[polda.id] && (
+                              <div className="ml-6 mt-2">
+                                <Label className="block">
+                                  <Checkbox
+                                    checked={polda?.subDestination?.every(
+                                      (polres: any) =>
+                                        checkedLevels.has(polres.id)
+                                    )}
+                                    onCheckedChange={(isChecked) => {
+                                      const updatedLevels = new Set(
+                                        checkedLevels
+                                      );
+                                      polda?.subDestination?.forEach(
+                                        (polres: any) => {
+                                          if (isChecked) {
+                                            updatedLevels.add(polres.id);
+                                          } else {
+                                            updatedLevels.delete(polres.id);
+                                          }
+                                        }
+                                      );
+                                      setCheckedLevels(updatedLevels);
+                                    }}
+                                    className="mr-2"
+                                  />
+                                  Pilih Semua Polres
+                                </Label>
+                                {polda?.subDestination?.map((polres: any) => (
+                                  <Label key={polres.id} className="block mt-1">
+                                    <Checkbox
+                                      checked={checkedLevels.has(polres.id)}
+                                      onCheckedChange={() =>
+                                        handleCheckboxChange(polres.id)
+                                      }
+                                      className="mr-2"
+                                    />
+                                    {polres.name}
+                                  </Label>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                </div>
+              </div>
+            </div>
 
-          <div className="text-right">
+            <div>
-            <Button
+              <p className="font-medium">Nama Iklan</p>
-              type="submit"
+              <Controller
-              className="bg-blue-600 text-white hover:bg-blue-700"
+                control={control}
-            >
+                name="title"
-              Tambah Iklan
+                render={({ field }) => (
-            </Button>
+                  <Input
+                    size={"md"}
+                    type="text"
+                    value={field.value}
+                    onChange={field.onChange}
+                    placeholder="Masukan Nama Iklan"
+                  />
+                )}
+              />
+              {errors.title?.message && (
+                <p className="text-red-400 text-sm">{errors.title.message}</p>
+              )}
+            </div>
+
+            <div>
+              <Label>Foto</Label>
+              <FileUploader
+                accept={{
+                  "image/*": [],
+                }}
+                maxSize={100}
+                label="Upload file dengan format .png, .jpg, atau .jpeg."
+                onDrop={(files) => setImageFiles(files)}
+              />
+              {imageUploadedFiles?.map((file: any, index: number) => (
+                <div>
+                  <Card className="mt-2">
+                    <img
+                      src={file.url}
+                      alt="Thumbnail Gambar Utama"
+                      className="w-full h-auto rounded-md"
+                    />
+                  </Card>
+                  <div
+                    key={index}
+                    className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+                  >
+                    <div className="flex gap-3 items-center">
+                      <div className="file-preview">
+                        {renderFilePreview(file.url)}
+                      </div>
+                      <div>
+                        <div className=" text-sm  text-card-foreground">
+                          {file.fileName}
+                        </div>
+                      </div>
+                    </div>
+
+                    <Button
+                      size="icon"
+                      color="destructive"
+                      variant="outline"
+                      className=" border-none rounded-full"
+                      onClick={() => handleRemoveFile(file)}
+                    >
+                      <Icon icon="tabler:x" className=" h-5 w-5" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div>
+              <p className="font-medium">Deskripsi</p>
+              <Controller
+                control={control}
+                name="description"
+                render={({ field }) => (
+                  <Textarea
+                    rows={3}
+                    value={field.value}
+                    onChange={field.onChange}
+                    placeholder="Masukan Description"
+                  />
+                )}
+              />
+              {errors.description?.message && (
+                <p className="text-red-400 text-sm">
+                  {errors.description?.message}
+                </p>
+              )}
+            </div>
+
+            <div className="text-right">
+              <Button
+                type="submit"
+                className="bg-blue-600 text-white hover:bg-blue-700"
+              >
+                Tambah Iklan
+              </Button>
+            </div>
           </div>
-        </div>
+        </form>
-      </DialogContent>
+      </Card>
-    </Dialog>
+    </div>
   );
 }

components/landing-page/hero-new.tsx

@@ -357,47 +357,41 @@ const HeroNew = (props: { group?: string }) => {
         </div>
       ) : (
         <div className="relative w-full h-full">
-          <Carousel className="lg:w-full lg:h-full">
+          <Carousel className="relative w-full">
             <CarouselContent>
               {content?.map((list: any) => (
                 <CarouselItem key={list?.id}>
-                  <div className="relative h-[310px] lg:h-[700px] mt-1">
+                  <div className="relative h-[310px] lg:h-[700px]">
+                    {/* Gambar */}
                     <Image
                       src={list?.thumbnailLink}
-                      alt="gambar-utama"
+                      alt="gambar"
-                      width={1920}
+                      fill
-                      height={1080}
+                      className="object-cover w-full h-full"
-                      placeholder={`data:image/svg+xml;base64,${toBase64(
-                        shimmer(700, 475)
-                      )}`}
-                      className="w-full h-[320px] lg:h-[700px] object-cover"
                     />
-                    <div className="absolute inset-0 bg-black bg-opacity-40" />
 
-                    <Link
+                    {/* Overlay hitam transparan */}
-                      href={
+                    <div className="absolute inset-0 bg-black/40 z-10" />
-                        Number(list?.fileTypeId) == 1
+
-                          ? `${locale}/image/detail/${list?.slug}`
+                    {/* Konten judul, dll */}
-                          : Number(list?.fileTypeId) == 2
+                    <div className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%]">
-                          ? `${locale}/video/detail/${list?.slug}`
+                      <span className="text-red-600 text-lg font-bold uppercase">
-                          : Number(list?.fileTypeId) == 3
+                        {list?.categoryName}
-                          ? `${locale}/document/detail/${list?.slug}`
+                      </span>
-                          : `${locale}/audio/detail/${list?.slug}`
+                      <h2 className="text-xl font-bold">{list?.title}</h2>
-                      }
+                      <p className="text-sm mt-2">
-                    >
+                        {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
-                      <div className="absolute bottom-20 left-32 w-[60%] lg:w-[45%] text-white px-4 pt-10 pb-4">
+                        {list?.timezone || "WIB"} | 👁 {list?.clickCount}
-                        <span className="absolute top-0 left-3 text-red-600 text-lg font-bold uppercase px-1 py-2 rounded">
+                      </p>
-                          {list?.categoryName || "Liputan Kegiatan"}
+                    </div>
-                        </span>
+
-                        <h2 className="text-xl font-bold leading-tight">
+                    {/* Tombol navigasi di atas gambar */}
-                          {list?.title}
+                    <CarouselPrevious className="absolute left-6 top-[45%] z-30 -translate-y-1/2  hover:bg-black/70 text-white p-2 rounded-full">
-                        </h2>
+                      <ChevronLeft className="w-5 h-5" />
-                        <p className="text-base flex items-center gap-1 mt-2 opacity-80">
+                    </CarouselPrevious>
-                          {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
+                    <CarouselNext className="absolute right-6 top-[45%] z-30 -translate-y-1/2  hover:bg-black/70 text-white p-2 rounded-full">
-                          {list?.timezone || "WIB"} | 👁 {list?.clickCount}
+                      <ChevronRight className="w-5 h-5" />
-                        </p>
+                    </CarouselNext>
-                      </div>
-                    </Link>
                   </div>
                 </CarouselItem>
               ))}

components/landing-page/search-section.tsx

@@ -1,5 +1,12 @@
 import search from "@/app/[locale]/(protected)/app/chat/components/search";
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from "@radix-ui/react-select";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@radix-ui/react-select";
 import { Icon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
@@ -14,16 +21,16 @@ import UserSurveyBox from "./survey-box";
 import ScrollableContentPolda from "./scrollable-content-polda";
 
 const LeftBanner = () => (
-  <div className="sticky top-0 space-y-4">
+  <div className="sticky top-0 space-y-4 ml-14">
-    <img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" />
+    <img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" width={180} />
-    <img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" />
+    <img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" width={180} />
   </div>
 );
 
 const RightBanner = () => (
   <div className="sticky top-0 space-y-4">
-    <img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" />
+    <img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" width={180} />
-    <img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" />
+    <img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" width={180} />
   </div>
 );
 
@@ -33,8 +40,11 @@ const SearchSection = () => {
   const router = useRouter();
   const t = useTranslations("LandingPage");
   return (
-    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
+    <div
-      <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
+      className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat"
+      style={{ backgroundImage: "url('/assets/background.png')" }}
+    >
+      <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[130px] space-y-4 self-start">
         <LeftBanner />
       </div>
 
@@ -48,7 +58,7 @@ const SearchSection = () => {
         <UserSurveyBox />
       </div>
 
-      <div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
+      <div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[130px] space-y-4 self-start">
         <RightBanner />
       </div>
     </div>

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);
+      console.log(responseGet?.data?.data);
-      setListSuggestion(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);
+    console.log(responseGet?.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
   const deleteData = (dataId: any) => {

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);
+      console.log(responseGet?.data?.data);
-      setListSuggestion(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);
+    console.log(responseGet?.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
   const deleteData = (dataId: any) => {

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);
+      console.log(responseGet?.data?.data);
-      setListSuggestion(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);
+    console.log(responseGet?.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
 

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);
+      console.log(responseGet?.data?.data);
-      setListSuggestion(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);
+    console.log(responseGet?.data?.data);
-    setListSuggestion(responseGet.data?.data);
+    setListSuggestion(responseGet?.data?.data);
     close();
   }
   const deleteData = (dataId: any) => {

messages/en.json

@@ -602,7 +602,8 @@
     "create-schedule": "Create Schedule",
     "event": "event",
     "live-report": "Live Report",
-    "calendar-polri": "Calendar Polri"
+    "calendar-polri": "Calendar Polri",
+    "custom": "Costum"
   },
   "Blog": {
     "table": "Table",

messages/in.json

@@ -603,7 +603,8 @@
     "create-schedule": "Buat Jadwal",
     "event": "event",
     "live-report": "Live Report",
-    "calendar-polri": "Kalender Polri"
+    "calendar-polri": "Kalender Polri",
+    "custom": "Kostum"
   },
   "Blog": {
     "table": "Tabel",

service/broadcast/broadcast.ts

@@ -16,6 +16,18 @@ export async function listDataMedia(
   return httpGetInterceptor(url);
 }
 
+export async function listDataAdvertisements(
+  page: number,
+  limit: string,
+  search: string,
+  categoryFilter: string,
+  statusFilter: string
+) {
+  const name = search || "";
+  const url = `advertisements/pagination?title=${name}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&categoryId=${categoryFilter}&statusId=${statusFilter}`;
+  return httpGetInterceptor(url);
+}
+
 export async function listDataMediaBroadCast(
   page: number,
   limit: string,

service/detail/detail.ts

@@ -1,6 +1,10 @@
-import { httpDeleteInterceptor, httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
+import {
+  httpDeleteInterceptor,
+  httpGetInterceptor,
+  httpPostInterceptor,
+} from "../http-config/http-interceptor-service";
 
-export async function getDetail(id: any, state: any) {
+export async function getDetail(slug: any, state: any) {
-  const url = `media/public?slug=${id}&state=${state}`;
+  const url = `media/public?slug=${slug}&state=${state}`;
   return httpGetInterceptor(url);
 }

service/landing/landing.ts

@@ -228,10 +228,10 @@ export async function saveWishlist(data: { mediaUploadId: string }) {
 
 export async function getPublicSuggestionList(slug: any) {
   const url = `media/public/suggestion?mediaId=${slug}`;
-  const headers = {
+  // const headers = {
-    "content-Type": "application/json",
+  //   "content-Type": "application/json",
-  };
+  // };
-  return httpGet(url, headers);
+  return httpGetInterceptor(url);
 }
 
 export async function getUserNotifications(page = 0, typeId: any) {

service/schedule/schedule.ts

@@ -1,4 +1,5 @@
 import {
+  httpDeleteInterceptor,
   httpGetInterceptor,
   httpPostInterceptor,
 } from "../http-config/http-interceptor-service";
@@ -19,6 +20,20 @@ export async function paginationSchedule(
   );
 }
 
+export async function paginationCalendar(
+  size: any,
+  page: number,
+  type: any,
+  title: string = "",
+  statusFilter: number[] = []
+) {
+  const statusQuery =
+    statusFilter.length > 0 ? `&statusId=${statusFilter.join(",")}` : "";
+  return await httpGetInterceptor(
+    `calendars/pagination?enablePage=1&scheduleTypeId=${type}&page=${page}&size=${size}&title=${title}${statusQuery}`
+  );
+}
+
 export async function postSchedule(data: any) {
   const url = "schedule";
   return httpPostInterceptor(url, data);
@@ -68,3 +83,18 @@ export async function listScheduleNext() {
   const url = "schedule/next-activity";
   return httpGetInterceptor(url);
 }
+
+export async function postCalendar(data: any) {
+  const url = "calendars";
+  return httpPostInterceptor(url, data);
+}
+
+export async function detailCalendar(id: any) {
+  const url = `calendars?id=${id}`;
+  return httpGetInterceptor(url);
+}
+
+export async function deleteCalendar(id: any) {
+  const url = `calendars?id=${id}`;
+  return httpDeleteInterceptor(url);
+}

service/settings/settings.ts

@@ -129,3 +129,8 @@ export async function getTagsByParentId(parentId: string | number) {
   const url = `media/tags/list?categoryId=${parentId}`;
   return httpGetInterceptor(url);
 }
+
+export async function postAdvertisements(data: any) {
+  const url = "advertisements";
+  return httpPostInterceptor(url, data);
+}