[QUDO-140,QUDO-139] feat:fix image iklan, add carousel prev,next banner

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";
@@ -208,7 +209,15 @@ const AdvertisementsList = () => {
   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

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)/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;
@@ -22,16 +21,20 @@ const CalenderPage = () => {
       const categories = await getCategories();
       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
+        .filter((category: Category) => valueShowed.includes(category.value))
         .map((category: Category) => ({
           ...category,
           activeClass: "",
@@ -41,11 +44,7 @@ const CalenderPage = () => {
     }
   }, []);
 
-  return (
+  return <div>{categories && <CalendarView categories={categories} />}</div>;
-    <div>
-      {categories && <CalendarView categories={categories} />}
-    </div>
-  );
 };
 
 export default CalenderPage;

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/schedule/form-calendar-polri-detail.tsx

@@ -103,6 +103,41 @@ export function CalendarPolriAddDetail() {
             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();

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

@@ -13,7 +13,13 @@ 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 {
+  CalendarIcon,
+  ChevronDown,
+  ChevronUp,
+  CloudUpload,
+  Plus,
+} from "lucide-react";
 import { useTranslations } from "next-intl";
 import DatePicker from "react-datepicker";
 import { id } from "date-fns/locale";
@@ -22,8 +28,8 @@ 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 { error, loading } from "@/lib/swal";
-import { postCalendar } from "@/service/schedule/schedule";
+import { detailCalendar, postCalendar } from "@/service/schedule/schedule";
 import { DateRange } from "react-day-picker";
 import Cookies from "js-cookie";
 import withReactContent from "sweetalert2-react-content";
@@ -35,18 +41,41 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Calendar } from "@/components/ui/calendar";
-import { format } from "date-fns";
+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>;
@@ -55,9 +84,17 @@ export function CalendarPolriAddUpdate() {
   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,
@@ -79,6 +116,62 @@ export function CalendarPolriAddUpdate() {
     },
   });
 
+  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);
@@ -169,6 +262,7 @@ export function CalendarPolriAddUpdate() {
       .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,
@@ -189,6 +283,89 @@ export function CalendarPolriAddUpdate() {
       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.",
@@ -196,7 +373,7 @@ export function CalendarPolriAddUpdate() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.reload();
+      router.push(redirect);
     });
   };
 
@@ -216,9 +393,25 @@ export function CalendarPolriAddUpdate() {
     });
   };
 
+  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>
@@ -350,10 +543,16 @@ export function CalendarPolriAddUpdate() {
                                       />
                                       Pilih Semua Polres
                                     </Label>
-                                {polda?.subDestination?.map((polres: any) => (
+                                    {polda?.subDestination?.map(
-                                  <Label key={polres.id} className="block mt-1">
+                                      (polres: any) => (
+                                        <Label
+                                          key={polres.id}
+                                          className="block mt-1"
+                                        >
                                           <Checkbox
-                                      checked={checkedLevels.has(polres.id)}
+                                            checked={checkedLevels.has(
+                                              polres.id
+                                            )}
                                             onCheckedChange={() =>
                                               handleCheckboxChange(polres.id)
                                             }
@@ -361,7 +560,8 @@ export function CalendarPolriAddUpdate() {
                                           />
                                           {polres.name}
                                         </Label>
-                                ))}
+                                      )
+                                    )}
                                   </div>
                                 )}
                               </div>
@@ -382,38 +582,65 @@ export function CalendarPolriAddUpdate() {
                       <Input
                         size={"md"}
                         type="text"
-                    value={field.value}
+                        defaultValue={detail?.title}
                         onChange={field.onChange}
                         placeholder="Masukan Judul"
                       />
                     )}
                   />
                   {errors.title?.message && (
-                <p className="text-red-400 text-sm">{errors.title.message}</p>
+                    <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{" "}
+                  <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 className="text-xs mt-1">Max 10 MB files are allowed</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>
@@ -424,7 +651,7 @@ export function CalendarPolriAddUpdate() {
                     render={({ field }) => (
                       <Textarea
                         rows={3}
-                    value={field.value}
+                        defaultValue={detail?.description}
                         onChange={field.onChange}
                         placeholder="Masukan lokasi"
                       />
@@ -447,6 +674,10 @@ export function CalendarPolriAddUpdate() {
                 </div>
               </div>
             </form>
+          </div>
+        ) : (
+          ""
+        )}
       </Card>
     </div>
   );

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

@@ -13,7 +13,13 @@ 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 {
+  CalendarIcon,
+  ChevronDown,
+  ChevronUp,
+  CloudUpload,
+  Plus,
+} from "lucide-react";
 import { useTranslations } from "next-intl";
 import DatePicker from "react-datepicker";
 import { id } from "date-fns/locale";
@@ -22,7 +28,7 @@ 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 { error, loading } from "@/lib/swal";
 import { postCalendar } from "@/service/schedule/schedule";
 import { DateRange } from "react-day-picker";
 import Cookies from "js-cookie";
@@ -39,12 +45,27 @@ 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);
@@ -55,6 +76,12 @@ export function CalendarPolriAdd() {
   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 [imageFiles, setImageFiles] = React.useState<FileWithPreview[]>([]);
   const [date, setDate] = React.useState<DateRange | undefined>({
     from: new Date(2025, 0, 1),
   });
@@ -189,6 +216,89 @@ export function CalendarPolriAdd() {
       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.",
@@ -196,7 +306,7 @@ export function CalendarPolriAdd() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.reload();
+      router.push(redirect);
     });
   };
 
@@ -216,6 +326,20 @@ export function CalendarPolriAdd() {
     });
   };
 
+  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">
@@ -393,27 +517,52 @@ export function CalendarPolriAdd() {
               )}
             </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 className="text-xs mt-1">Max 10 MB files are allowed</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>
@@ -426,7 +575,7 @@ export function CalendarPolriAdd() {
                     rows={3}
                     value={field.value}
                     onChange={field.onChange}
-                    placeholder="Masukan lokasi"
+                    placeholder="Masukan Description"
                   />
                 )}
               />

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,84 +13,545 @@ 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 (
-    <Dialog open={open} onOpenChange={setOpen}>
+      <Image
-      <DialogTrigger asChild>
+        width={48}
-        <Button onClick={() => setOpen(true)} color="primary" size="md">
+        height={48}
-          <Plus className="mr-2 h-4 w-4" />
+        alt={"file preview"}
-          Tambah Iklan
+        src={url}
-        </Button>
+        className=" rounded border p-0.5"
-      </DialogTrigger>
+      />
-      <DialogContent size="md">
+    );
-        <DialogHeader>
+  };
-          <DialogTitle>Tambah Iklan</DialogTitle>
-        </DialogHeader>
 
+  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">Target Area</p>
               <div className="flex flex-wrap gap-4 mt-2">
-              {["Kiri - 1", "Kiri - 2", "Kanan - 1", "Kanan - 2"].map(
+                {[
-                (label) => (
+                  { label: "Kiri - 1", value: "left-top" },
-                  <label key={label} className="flex items-center gap-2">
+                  { label: "Kiri - 2", value: "left-bottom" },
-                    <Checkbox id={label} />
+                  { 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>
               <p className="font-medium">Publish Area</p>
-            <div className="flex flex-wrap gap-4 mt-2">
+              <div className="flex flex-row">
-              {["Semua", "Nasional", "Polda", "Satker", "International"].map(
+                <div className="flex flex-wrap gap-3 lg:ml-3 ">
-                (label) => (
+                  {Object.keys(unitSelection).map((key) => (
-                  <label key={label} className="flex items-center gap-2">
+                    <div className="flex items-center gap-2" key={key}>
-                    <Checkbox id={label} />
+                      <Checkbox
-                    <span>{label}</span>
+                        id={key}
-                  </label>
+                        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 Iklan</p>
-            <Input placeholder="Masukkan nama iklan" />
+              <Controller
+                control={control}
+                name="title"
+                render={({ field }) => (
+                  <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 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 className="text-xs mt-1">Max 10 MB files are allowed</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>
-            <Textarea placeholder="Masukkan deskripsi iklan" rows={4} />
+              <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">
@@ -102,7 +563,8 @@ export function TambahIklanModal() {
               </Button>
             </div>
           </div>
-      </DialogContent>
+        </form>
-    </Dialog>
+      </Card>
+    </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}`
-                          : `${locale}/audio/detail/${list?.slug}`
-                      }
-                    >
-                      <div className="absolute bottom-20 left-32 w-[60%] lg:w-[45%] text-white px-4 pt-10 pb-4">
-                        <span className="absolute top-0 left-3 text-red-600 text-lg font-bold uppercase px-1 py-2 rounded">
-                          {list?.categoryName || "Liputan Kegiatan"}
                       </span>
-                        <h2 className="text-xl font-bold leading-tight">
+                      <h2 className="text-xl font-bold">{list?.title}</h2>
-                          {list?.title}
+                      <p className="text-sm mt-2">
-                        </h2>
-                        <p className="text-base flex items-center gap-1 mt-2 opacity-80">
                         {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
                         {list?.timezone || "WIB"} | 👁 {list?.clickCount}
                       </p>
                     </div>
-                    </Link>
+
+                    {/* Tombol navigasi di atas gambar */}
+                    <CarouselPrevious className="absolute left-6 top-[45%] z-30 -translate-y-1/2  hover:bg-black/70 text-white p-2 rounded-full">
+                      <ChevronLeft className="w-5 h-5" />
+                    </CarouselPrevious>
+                    <CarouselNext className="absolute right-6 top-[45%] z-30 -translate-y-1/2  hover:bg-black/70 text-white p-2 rounded-full">
+                      <ChevronRight className="w-5 h-5" />
+                    </CarouselNext>
                   </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>

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);
+}