fix: iklan admin

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

@@ -53,7 +53,7 @@ import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { paginationBlog } from "@/service/blog/blog";
 import { ticketingPagination } from "@/service/ticketing/ticketing";
 import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./column";
 import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
@@ -69,7 +69,7 @@ import {
 import { listEnableCategory } from "@/service/content/content";
 import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/routing";
+import { Link, useRouter } from "@/i18n/routing";
 import { TambahIklanModal } from "@/components/form/setting/form-add-iklan";
 
 const AdvertisementsList = () => {
@@ -150,11 +150,7 @@ const AdvertisementsList = () => {
   async function fetchData() {
     try {
       loading();
-      const res = await listDataAdvertisements(
+      const res = await listDataAdvertisements(page - 1, showData, "");
-        page - 1,
-        showData,
-        "",
-      );
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -208,12 +204,21 @@ const AdvertisementsList = () => {
     <>
       <div>
         <div className="flex-none">
-          <Link href={"/admin/settings/iklan/create"}>
+          <Button
-            <Button color="primary" className="text-white" size="md">
+            disabled={dataTable.length == 4}
-              <UploadIcon size={18} className="mr-2" />
+            onClick={() => router.push("/admin/settings/iklan/create")}
-              Tambah Iklan
+            color="primary"
-            </Button>
+            className="text-white"
-          </Link>
+            size="md"
+          >
+            <UploadIcon size={18} className="mr-2" />
+            Tambah Iklan
+          </Button>
+          {dataTable.length == 4 && (
+            <p className="text-sm text-red-400 pt-1">
+              Jumlah Iklan Sudah Maksimal (4)
+            </p>
+          )}
         </div>
         {/* <TambahIklanModal /> */}
       </div>

app/[locale]/(public)/image/filter/page.tsx

@@ -855,10 +855,25 @@ const FilterPage = () => {
 
                               <div className="p-4 h-full flex flex-col justify-between">
                                 <div className="flex flex-col gap-1 flex-grow">
-                                  <p className="text-[10px] font-bold text-[#bb3523] uppercase">
+                                  <div className="flex flex-row justify-between">
-                                    {image?.categoryName?.toUpperCase() ??
+                                    <p className="text-[9px] font-bold text-[#bb3523]">
-                                      "Giat Pimpinan"}
+                                      {image?.categoryName?.toUpperCase() ??
-                                  </p>
+                                        "Giat Pimpinan"}
+                                    </p>
+                                    <p className="flex flex-row items-center text-[9px] gap-1 text-gray-600">
+                                      {formatDateToIndonesian(
+                                        new Date(image?.createdAt)
+                                      )}{" "}
+                                      {image?.timezone ?? "WIB"} |
+                                      <Icon
+                                        icon="formkit:eye"
+                                        width="15"
+                                        height="15"
+                                      />{" "}
+                                      {image.clickCount}
+                                    </p>
+                                  </div>
+
                                   <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
                                     {image?.title}
                                   </p>

app/[locale]/(public)/video/filter/page.tsx

@@ -871,12 +871,27 @@ const FilterPage = () => {
                               <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
                                 {video?.title}
                               </div> */}
-                               <div className="p-4 h-full flex flex-col justify-between">
+                              <div className="p-4 h-full flex flex-col justify-between">
                                 <div className="flex flex-col gap-1 flex-grow">
-                                  <p className="text-[10px] font-bold text-[#bb3523] uppercase">
+                                  <div className="flex flex-row justify-between">
-                                    {video?.categoryName?.toUpperCase() ??
+                                    <p className="text-[9px] font-bold text-[#bb3523] uppercase">
-                                      "Giat Pimpinan"}
+                                      {video?.categoryName?.toUpperCase() ??
-                                  </p>
+                                        "Giat Pimpinan"}
+                                    </p>
+                                    <p className="flex flex-row items-center text-[9px] gap-1 text-gray-600">
+                                      {formatDateToIndonesian(
+                                        new Date(video?.createdAt)
+                                      )}{" "}
+                                      {video?.timezone ?? "WIB"} |
+                                      <Icon
+                                        icon="formkit:eye"
+                                        width="15"
+                                        height="15"
+                                      />{" "}
+                                      {video?.clickCount}
+                                    </p>
+                                  </div>
+
                                   <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
                                     {video?.title}
                                   </p>

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

@@ -41,6 +41,9 @@ import FileUploader from "../shared/file-uploader";
 import { Icon } from "@/components/ui/icon";
 import { useParams } from "next/navigation";
 import Link from "next/link";
+import { listDataAdvertisements } from "@/service/broadcast/broadcast";
+import { close } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
 
 const calendarSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -64,6 +67,7 @@ interface Detail {
 
 export function TambahIklanUpdate() {
   const [open, setOpen] = React.useState(false);
+  const router = useRouter();
   const MySwal = withReactContent(Swal);
   const t = useTranslations("Schedule");
   const { id } = useParams() as { id: string };
@@ -124,8 +128,11 @@ export function TambahIklanUpdate() {
           setCheckedLevels(new Set(levelIds));
         }
 
+        setValue("title", details.title);
+        setValue("description", details.description);
+
         if (details?.placements) {
-          setSelectedPlacement(details.placements); // "left-bottom", etc.
+          setSelectedPlacement(details.placements);
         }
       }
     }
@@ -209,6 +216,58 @@ export function TambahIklanUpdate() {
     }));
   };
 
+  async function fetchExistingImageAsFile(
+    url: string,
+    filename = "existing-image.jpg"
+  ) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    const contentType = blob.type || "image/jpeg";
+    return new File([blob], filename, { type: contentType });
+  }
+
+  // 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 formMedia = new FormData();
+  //   if (detail?.id) {
+  //     formMedia.append("id", detail.id.toString());
+  //   }
+  //   formMedia.append("title", data.title);
+  //   formMedia.append("placements", selectedPlacement);
+  //   formMedia.append("description", data.description);
+  //   formMedia.append("redirectLink", "https://new.netidhub.com");
+  //   formMedia.append("assignedToLevel", handlePoldaPolresChange());
+  //   if (imageFiles.length > 0) {
+  //     formMedia.append("file", imageFiles[0]);
+  //   }
+
+  //   console.log("Form Data Submitted:", formMedia);
+
+  //   loading();
+  //   const response = await postAdvertisements(formMedia);
+  //   if (response?.error) {
+  //     error(response?.message);
+  //     return false;
+  //   }
+  //   close();
+
+  //   Cookies.set("scheduleId", response?.data?.data.id, {
+  //     expires: 1,
+  //   });
+  // };
+
+  // Ini fungsi save (dalam component TambahIklanUpdate)
   const save = async (data: CalendarSchema) => {
     const unitMapping = {
       allUnit: "0",
@@ -224,28 +283,48 @@ export function TambahIklanUpdate() {
 
     const formMedia = new FormData();
     if (detail?.id) {
-      formMedia.append("id", detail.id.toString()); // Kirim ID untuk update
+      formMedia.append("id", detail.id.toString());
     }
+
     formMedia.append("title", data.title);
     formMedia.append("placements", selectedPlacement);
     formMedia.append("description", data.description);
     formMedia.append("redirectLink", "https://new.netidhub.com");
     formMedia.append("assignedToLevel", handlePoldaPolresChange());
-    formMedia.append("file", imageFiles[0]);
 
-    console.log("Form Data Submitted:", formMedia);
+    if (imageFiles.length > 0) {
+      formMedia.append("file", imageFiles[0]);
+    } else if (detail?.id) {
+      const existingFile = await fetchExistingImageAsFile(
+        `https://netidhub.com/api/advertisements/viewer/${detail.id}`,
+        "existing-image.jpg"
+      );
+      formMedia.append("file", existingFile);
+    }
 
     loading();
     const response = await postAdvertisements(formMedia);
+
     if (response?.error) {
       error(response?.message);
       return false;
     }
+
     close();
+    MySwal.fire({
+      icon: "success",
+      title: "Berhasil",
+      text: "Iklan berhasil ditambahkan.",
+      confirmButtonText: "OK",
+    }).then(() => {
+      window.location.href = "/in/admin/settings/iklan";
+    });
 
     Cookies.set("scheduleId", response?.data?.data.id, {
       expires: 1,
     });
+
+    Cookies.set("scheduleId", response?.data?.data.id, { expires: 1 });
   };
 
   React.useEffect(() => {
@@ -299,6 +378,46 @@ export function TambahIklanUpdate() {
   };
 
   const handleRemoveFile = (id: number) => {};
+
+  React.useEffect(() => {
+    fetchData();
+    // setPagination({
+    //   pageIndex: 0,
+    //   pageSize: Number(showData),
+    // });
+  }, []);
+
+  const [disabledCheckbox, setDisabledCheckbox] = React.useState<string[]>([]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await listDataAdvertisements(0, "10", "");
+      const data = res?.data?.data?.content;
+      // const contentData = data?.content;
+      const temp = data.map((a: any) => {
+        if (a.placements == "left-top" && a.id !== Number(id)) {
+          return "0";
+        }
+        if (a.placements == "left-bottom" && a.id !== Number(id)) {
+          return "1";
+        }
+        if (a.placements == "right-top" && a.id !== Number(id)) {
+          return "2";
+        }
+        if (a.placements == "right-bottom" && a.id !== Number(id)) {
+          return "3";
+        }
+      });
+      console.log("contentData : ", data);
+
+      setDisabledCheckbox(temp);
+
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
   return (
     <div>
       <Card className="px-3 py-3">
@@ -313,9 +432,10 @@ export function TambahIklanUpdate() {
                     { label: "Kiri - 2", value: "left-bottom" },
                     { label: "Kanan - 1", value: "right-top" },
                     { label: "Kanan - 2", value: "right-bottom" },
-                  ].map(({ label, value }) => (
+                  ].map(({ label, value }, index) => (
                     <label key={value} className="flex items-center gap-2">
                       <Checkbox
+                        disabled={disabledCheckbox.includes(String(index))}
                         id={value}
                         checked={selectedPlacement === value}
                         onCheckedChange={() => handlePlacementSelect(value)}
@@ -448,7 +568,8 @@ export function TambahIklanUpdate() {
                     <Input
                       size={"md"}
                       type="text"
-                      defaultValue={detail?.title}
+                      // defaultValue={detail?.title}
+                      value={field.value}
                       onChange={field.onChange}
                       placeholder="Masukan Nama Iklan"
                     />
@@ -472,7 +593,7 @@ export function TambahIklanUpdate() {
                   label="Upload file dengan format .png, .jpg, atau .jpeg."
                   onDrop={(files) => setImageFiles(files)}
                 />
-                {imageUploadedFiles?.map((file: any, index: number) => (
+                {imageFiles?.map((file: any, index: number) => (
                   <div>
                     <Card className="mt-2">
                       <img
@@ -526,7 +647,8 @@ export function TambahIklanUpdate() {
                   render={({ field }) => (
                     <Textarea
                       rows={3}
-                      defaultValue={detail?.description}
+                      // defaultValue={detail?.description}
+                      value={field.value}
                       onChange={field.onChange}
                       placeholder="Masukan Description"
                     />

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

@@ -36,6 +36,8 @@ import Cookies from "js-cookie";
 import { Label } from "@/components/ui/label";
 import FileUploader from "../shared/file-uploader";
 import { Icon } from "@/components/ui/icon";
+import { close } from "@/config/swal";
+import { listDataAdvertisements } from "@/service/broadcast/broadcast";
 
 const calendarSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -173,6 +175,16 @@ export function TambahIklanModal() {
     }));
   };
 
+  async function fetchExistingImageAsFile(
+    url: string,
+    filename = "existing-image.jpg"
+  ) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    const contentType = blob.type || "image/jpeg";
+    return new File([blob], filename, { type: contentType });
+  }
+
   const save = async (data: CalendarSchema) => {
     const unitMapping = {
       allUnit: "0",
@@ -204,6 +216,15 @@ export function TambahIklanModal() {
     }
     close();
 
+    MySwal.fire({
+      icon: "success",
+      title: "Berhasil",
+      text: "Iklan berhasil ditambahkan.",
+      confirmButtonText: "OK",
+    }).then(() => {
+      window.location.reload();
+    });
+
     Cookies.set("scheduleId", response?.data?.data.id, {
       expires: 1,
     });
@@ -323,6 +344,46 @@ export function TambahIklanModal() {
   };
 
   const handleRemoveFile = (id: number) => {};
+
+  React.useEffect(() => {
+    fetchData();
+    // setPagination({
+    //   pageIndex: 0,
+    //   pageSize: Number(showData),
+    // });
+  }, []);
+
+  const [disabledCheckbox, setDisabledCheckbox] = React.useState<string[]>([]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await listDataAdvertisements(0, "10", "");
+      const data = res?.data?.data?.content;
+      // const contentData = data?.content;
+      const temp = data.map((a: any) => {
+        if (a.placements == "left-top") {
+          return "0";
+        }
+        if (a.placements == "left-bottom") {
+          return "1";
+        }
+        if (a.placements == "right-top") {
+          return "2";
+        }
+        if (a.placements == "right-bottom") {
+          return "3";
+        }
+      });
+      console.log("contentData : ", data);
+
+      setDisabledCheckbox(temp);
+
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
   return (
     <div>
       <Card className="px-3 py-3">
@@ -336,9 +397,10 @@ export function TambahIklanModal() {
                   { label: "Kiri - 2", value: "left-bottom" },
                   { label: "Kanan - 1", value: "right-top" },
                   { label: "Kanan - 2", value: "right-bottom" },
-                ].map(({ label, value }) => (
+                ].map(({ label, value }, index) => (
                   <label key={value} className="flex items-center gap-2">
                     <Checkbox
+                      disabled={disabledCheckbox.includes(String(index))}
                       id={value}
                       checked={selectedPlacement === value}
                       onCheckedChange={() => handlePlacementSelect(value)}

components/landing-page/advertisement-placements.tsx

@@ -4,8 +4,9 @@ import * as React from "react";
 
 interface Advertisement {
   id: string;
+  placements: string;
   imageUrl: string;
-  [key: string]: any; // Tambahan kalau ada properti lain
+  [key: string]: any;
 }
 
 // // Simulasi fungsi API (replace dengan yang asli)
@@ -31,42 +32,49 @@ interface Advertisement {
 //   };
 // }
 
-const AdvertisementPlacements = (props: { placement?: string }) => {
+const AdvertisementPlacements = (props: {
-  const [ads, setAds] = useState<Advertisement[]>([]);
+  placement: string;
-  const [loading, setLoading] = useState<boolean>(false);
+  data: Advertisement[];
-
+  loading: boolean;
-  const fetchData = async () => {
+}) => {
-    try {
+  const [ads, setAds] = useState<Advertisement[] | undefined[]>([]);
-      setLoading(true);
-      const res = await listDataAdvertisements( 
-        0,
-        "4",
-        ""
-      );
-      const data = res?.data?.data;
-      const contentData = data?.content;
-      if (props.placement == "left") {
-        setAds(contentData.slice(0,2));
-      } else {
-        setAds(contentData.slice(2));
-      }
-    } catch (error) {
-      console.error("Error fetching advertisements:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
   useEffect(() => {
-    fetchData();
+    if (!props.loading && props.data.length > 0) {
-  }, []);
+      console.log(
+        "RRRRRR",
+        props.data[0].placements.includes(props.placement),
+        props.placement
+      );
+
+      const filtered = props.data.filter((a) =>
+        a.placements.includes(props.placement)
+      );
+      let temps: Advertisement[] | undefined[] = [];
+      temps[0] = filtered.find((b) => b.placements.includes("top"));
+      temps[1] = filtered.find((b) => b.placements.includes("bottom"));
+      setAds(temps);
+      console.log("PPPPPP", filtered);
+    }
+  }, [props.data, props.loading]);
 
   return (
-    <div className={`sticky top-0 space-y-4 ${props.placement == "left" ? "ml-14" : "mr-14"}`}>
+    <div
-      {loading && <p className="text-sm text-gray-500">Loading...</p>}
+      className={`sticky top-0 space-y-4 ${
-      {ads?.map((ad) => (
+        props.placement == "left" ? "ml-14" : "mr-14"
-        <img key={ad.id} src={ad.contentFileUrl} alt={`Banner ${ad.id}`} className="w-full" />
+      }`}
-      ))}
+    >
+      {props.loading && <p className="text-sm text-gray-500">Loading...</p>}
+      {ads?.map(
+        (ad) =>
+          ad && (
+            <img
+              key={ad.id}
+              src={ad.contentFileUrl}
+              alt={`Banner ${ad.id}`}
+              className="w-full"
+            />
+          )
+      )}
     </div>
   );
 };

components/landing-page/search-section.tsx

@@ -10,7 +10,7 @@ import { Icon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import router from "next/router";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
 import ScrollableContent from "./search-section-new";
 import NewContent from "./new-content";
@@ -19,6 +19,14 @@ import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
 import EventCalender from "./event-calender";
 import UserSurveyBox from "./survey-box";
 import AdvertisementPlacements from "./advertisement-placements";
+import { listDataAdvertisements } from "@/service/broadcast/broadcast";
+
+interface Advertisement {
+  id: string;
+  placements: string;
+  imageUrl: string;
+  [key: string]: any;
+}
 
 const SearchSection = () => {
   const [contentType, setContentType] = useState("all");
@@ -26,7 +34,32 @@ const SearchSection = () => {
   const router = useRouter();
   const t = useTranslations("LandingPage");
   const { theme } = useTheme();
-  
+  const [ads, setAds] = useState<Advertisement[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const res = await listDataAdvertisements(0, "4", "");
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      setAds(contentData);
+      // if (props.placement == "left") {
+      //   setAds(contentData.slice(0, 2));
+      // } else {
+      //   setAds(contentData.slice(2));
+      // }
+    } catch (error) {
+      console.error("Error fetching advertisements:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   const getBackgroundImage = () => {
     if (theme === "dark") {
       return "url('/assets/background-dark.jpg')";
@@ -41,7 +74,11 @@ const SearchSection = () => {
       style={{ backgroundImage: getBackgroundImage() }}
     >
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[130px] space-y-4 self-start">
-        <AdvertisementPlacements placement="left"/>
+        <AdvertisementPlacements
+          placement="left"
+          data={ads}
+          loading={loading}
+        />
       </div>
 
       <div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
@@ -55,7 +92,11 @@ const SearchSection = () => {
       </div>
 
       <div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[130px] space-y-4 self-start">
-        <AdvertisementPlacements placement="right" />
+        <AdvertisementPlacements
+          placement="right"
+          data={ads}
+          loading={loading}
+        />
       </div>
     </div>
   );