Merge branch 'main' of https://gitlab.com/hanifsalafi/mediahub_redesign into prod

2025-08-05 11:59:47 +07:00 · 2025-08-05 11:59:47 +07:00 · f10db99437
parent a4bf80482a ab8f0c1086
commit f10db99437
7 changed files with 337 additions and 69 deletions
--- a/app/[locale]/(protected)/admin/settings/iklan/component/table.tsx
+++ b/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(
-        page - 1,
-        showData,
-        "",
-      );
+      const res = await listDataAdvertisements(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 color="primary" className="text-white" size="md">
-              <UploadIcon size={18} className="mr-2" />
-              Tambah Iklan
-            </Button>
-          </Link>
+          <Button
+            disabled={dataTable.length == 4}
+            onClick={() => router.push("/admin/settings/iklan/create")}
+            color="primary"
+            className="text-white"
+            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>
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/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">
-                                    {image?.categoryName?.toUpperCase() ??
-                                      "Giat Pimpinan"}
-                                  </p>
+                                  <div className="flex flex-row justify-between">
+                                    <p className="text-[9px] font-bold text-[#bb3523]">
+                                      {image?.categoryName?.toUpperCase() ??
+                                        "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>
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/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">
-                                    {video?.categoryName?.toUpperCase() ??
-                                      "Giat Pimpinan"}
-                                  </p>
+                                  <div className="flex flex-row justify-between">
+                                    <p className="text-[9px] font-bold text-[#bb3523] uppercase">
+                                      {video?.categoryName?.toUpperCase() ??
+                                        "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>
--- a/components/form/setting/form-add-iklan-update.tsx
+++ b/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://mediahub.polri.go.id");
    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"
                    />
--- a/components/form/setting/form-add-iklan.tsx
+++ b/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)}
--- a/components/landing-page/advertisement-placements.tsx
+++ b/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 [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;
-      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);
-    }
-  };
-
+const AdvertisementPlacements = (props: {
+  placement: string;
+  data: Advertisement[];
+  loading: boolean;
+}) => {
+  const [ads, setAds] = useState<Advertisement[] | undefined[]>([]);
  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"}`}>
-      {loading && <p className="text-sm text-gray-500">Loading...</p>}
-      {ads?.map((ad) => (
-        <img key={ad.id} src={ad.contentFileUrl} alt={`Banner ${ad.id}`} className="w-full" />
-      ))}
+    <div
+      className={`sticky top-0 space-y-4 ${
+        props.placement == "left" ? "ml-14" : "mr-14"
+      }`}
+    >
+      {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>
  );
 };
--- a/components/landing-page/search-section.tsx
+++ b/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.png')";
@ -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>
  );