feat: update banner and pop up

2025-07-15 01:08:27 +07:00 · 2025-07-15 01:08:27 +07:00 · ddc2484cc3
parent 4250c2ec78
commit ddc2484cc3
7 changed files with 141 additions and 141 deletions
--- a/app/[locale]/(protected)/admin/settings/popup/component/popup-table.tsx
+++ b/app/[locale]/(protected)/admin/settings/popup/component/popup-table.tsx
@ -28,7 +28,7 @@ import { useSearchParams } from "next/navigation";
 import { close, loading } from "@/config/swal";
 import { Link, useRouter } from "@/i18n/routing";
 import columns from "./popup-column";
-import { listBanner, listStaticBanner } from "@/service/settings/settings";
+import { getListPopUp, listBanner, listStaticBanner } from "@/service/settings/settings";
 import { listDataPopUp } from "@/service/broadcast/broadcast";

 const PopUpListTable = () => {
@ -84,82 +84,73 @@ const PopUpListTable = () => {

  React.useEffect(() => {
    if (dataChange) {
-      router.push("/admin/settings/banner");
+      router.push("/admin/settings/popup");
    }
-    getListBanner();
+    getPopUp();
  }, [dataChange]);

  React.useEffect(() => {
-    getListBanner();
+    getPopUp();
    // getListStaticBanner();
  }, [page, showData]);

-  async function getListBanner() {
+  async function getPopUp() {
    loading();
    let temp: any;

-    // const response = await listDataPopUp(
-    //   page - 1,
-    //   showData,
-    //   "",
-    //   categoryFilter?.sort().join(","),
-    //   statusFilter?.sort().join(",")
-    // );
-    // const data = response?.data?.data?.content;
-    // console.log("banner", data);
-    // setGetData(data);
-
-     const response = await listBanner();
-        const data = response?.data?.data?.content;
-        console.log("banner", data);
-        setGetData(data);
+    const response = await getListPopUp();
+    const data = response?.data?.data?.content;
+    console.log("banner", data);
+    setGetData(data);

    close();
  }

  return (
    <>
-      <Table className="overflow-hidden mt-10">
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="bg-default-200">
-              {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </TableHead>
-              ))}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-                className="h-[75px]"
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
+      {table && 
+        <Table className="overflow-hidden mt-10">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="bg-default-200">
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
                ))}
              </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table?.getRowModel()?.rows?.length ? (
+              table?.getRowModel()?.rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  className="h-[75px]"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      }
    </>
  );
 };
--- a/app/[locale]/(protected)/admin/settings/popup/component/table.tsx
+++ b/app/[locale]/(protected)/admin/settings/popup/component/table.tsx
@ -237,7 +237,7 @@ const ContentListPopUp = () => {

  const { toast } = useToast();

-  const handleBanner = async (ids: number[]) => {
+  const handlePopUp = async (ids: number[]) => {
    try {
      await Promise.all(ids.map((id) => setPopUp(id, true)));
      toast({
@ -413,7 +413,7 @@ const ContentListPopUp = () => {
            <span>Pilih Semua</span>
          </div>
          {selectedItems.length > 0 && (
-            <Button color="primary" onClick={() => handleBanner(selectedItems)}>
+            <Button color="primary" onClick={() => handlePopUp(selectedItems)}>
              Jadikan PopUp
            </Button>
          )}
--- a/components/landing-page/event-calender.tsx
+++ b/components/landing-page/event-calender.tsx
@ -315,11 +315,11 @@ const EventCalender = () => {
                        </div>
                      </div>

-                      <div className="flex gap-2">
+                      {/* <div className="flex gap-2">
                        <button className="px-4 py-2 bg-gray-300 dark:bg-zinc-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-400 dark:hover:bg-zinc-600 transition-colors">
                          {t("share", { defaultValue: "Share" })}
                        </button>
-                      </div>
+                      </div> */}
                    </div>
                  </div>
                ) : (
--- a/components/landing-page/hero-new-polda.tsx
+++ b/components/landing-page/hero-new-polda.tsx
@ -41,24 +41,6 @@ const HeroModal = ({
  const swiperRef = useRef<SwiperClass | null>(null);

  useEffect(() => {
-    async function fetchCategories() {
-      const url = "https://netidhub.com/api/csrf";
-
-      try {
-        const response = await fetch(url);
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const data = await response.json();
-        return data;
-      } catch (error) {
-        console.error("Fetch error: ", error);
-      }
-    }
-
-    fetchCategories();
    initFetch();
  }, []);

@ -269,32 +251,39 @@ const HeroNewPolda = (props: { group?: string }) => {
  }, []);

  useEffect(() => {
-    async function fetchCategories() {
-      const url = "https://netidhub.com/api/csrf";
-
-      try {
-        const response = await fetch(url);
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const data = await response.json();
-        return data;
-      } catch (error) {
-        console.error("Fetch error: ", error);
-      }
-    }
-
-    fetchCategories();
    initFetch();
  }, []);

  const initFetch = async () => {
-    const response = await getHeroData(locale == "en");
-    console.log(response);
+    const request = {
+      title: "",
+      page: 0,
+      size: 5,
+      sortBy: "createdAt",
+      contentTypeId:
+        selectedTab == "image"
+          ? "1"
+          : selectedTab == "video"
+          ? "2"
+          : selectedTab == "text"
+          ? "3"
+          : selectedTab == "audio"
+          ? "4"
+          : "",
+      group:
+        props.group == "mabes"
+          ? ""
+          : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+          ? poldaName
+          : props.group == "satker" &&
+            satkerName &&
+            String(satkerName)?.length > 1
+          ? "satker-" + satkerName
+          : "",
+      isInt: locale == "en" ? true : false,
+    };
+    const response = await getListContent(request);
    let data = response?.data?.data?.content;
-    setHeroData(data);

    if (
      data &&
@ -318,6 +307,7 @@ const HeroNewPolda = (props: { group?: string }) => {
  useEffect(() => {
    fecthNewContent();
  }, [selectedTab]);
+
  const fecthNewContent = async () => {
    console.log("Satker Name : ", satkerName);
    const request = {
@ -348,7 +338,6 @@ const HeroNewPolda = (props: { group?: string }) => {
      isInt: locale == "en" ? true : false,
    };
    const response = await getListContent(request);
-    console.log("category", response);
    setNewContent(response?.data?.data?.content);
  };

--- a/components/landing-page/hero-new.tsx
+++ b/components/landing-page/hero-new.tsx
@ -80,6 +80,7 @@ const HeroModal = ({
    : "";

  useEffect(() => {
+    console.log("Show modal popup list");
    initFetch();
  }, []);

@ -103,10 +104,9 @@ const HeroModal = ({
      locale == "en"
    );

-    const banners = response?.data?.data || [];
-
-    console.log("banner Modal", banners);
-    setHeroData(banners);
+    const interstitial = response?.data?.data || [];
+    console.log("banner Modal", interstitial);
+    setHeroData(interstitial);
  };

  return (
@ -230,6 +230,7 @@ const HeroNew = (props: { group?: string }) => {
  useEffect(() => {
    fecthNewContent();
  }, [selectedTab]);
+
  const fecthNewContent = async () => {
    console.log("Satker Name : ", satkerName);
    const request = {
@ -315,6 +316,7 @@ const HeroNew = (props: { group?: string }) => {
  // Show hero modal after 20 seconds when website is fully loaded
  useEffect(() => {
    const timer = setTimeout(() => {
+      console.log("Show modal popup");
      setShowModal(true);
    }, 30000); // 30 seconds

@ -322,32 +324,39 @@ const HeroNew = (props: { group?: string }) => {
  }, []);

  useEffect(() => {
-    async function fetchCategories() {
-      const url = "https://netidhub.com/api/csrf";
-
-      try {
-        const response = await fetch(url);
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const data = await response.json();
-        return data;
-      } catch (error) {
-        console.error("Fetch error: ", error);
-      }
-    }
-
-    fetchCategories();
    initFetch();
  }, []);

  const initFetch = async () => {
-    const response = await getHeroData(locale == "en");
-    console.log(response);
+    const request = {
+      title: "",
+      page: 0,
+      size: 5,
+      sortBy: "createdAt",
+      contentTypeId:
+        selectedTab == "image"
+          ? "1"
+          : selectedTab == "video"
+          ? "2"
+          : selectedTab == "text"
+          ? "3"
+          : selectedTab == "audio"
+          ? "4"
+          : "",
+      group:
+        props.group == "mabes"
+          ? ""
+          : props.group == "polda" && poldaName && String(poldaName)?.length > 1
+          ? poldaName
+          : props.group == "satker" &&
+            satkerName &&
+            String(satkerName)?.length > 1
+          ? "satker-" + satkerName
+          : "",
+      isInt: locale == "en" ? true : false,
+    };
+    const response = await getListContent(request);
    let data = response?.data?.data?.content;
-    setHeroData(data);

    if (data) {
      const resStatic = await listStaticBanner(
@ -363,8 +372,8 @@ const HeroNew = (props: { group?: string }) => {
        locale == "en"
      );

-      for (let i = 0; i < resStatic?.data?.data?.length; i++) {
-        const media = resStatic?.data.data[i]?.mediaUpload;
+      for (let i = resStatic?.data?.data?.length; i >= 0 ; i--) {
+        const media = resStatic?.data?.data[i];
        if (!media) continue;
        media.fileTypeId = media?.fileType?.id ?? null;
        data = data.filter((item: any) => item.id != media.id);
@ -399,7 +408,7 @@ const HeroNew = (props: { group?: string }) => {
    <div className="flex items-start justify-center mx-auto w-auto">
      <div className="relative">
        {showModal && (
-          <HeroModal onClose={() => setShowModal(false)} group="mabes" />
+          <HeroModal onClose={() => setShowModal(false)} group={props.group || "mabes"} />
        )}
      </div>
      {isLoading ? (
@ -466,7 +475,7 @@ const HeroNew = (props: { group?: string }) => {
          </Carousel>

          <div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-4 w-[520px] bg-black/40 p-4 rounded-lg z-10">
-            {content?.slice(0, 3).map((item: any) => (
+            {newContent?.slice(0, 3).map((item: any) => (
              <li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
                <div className="flex-shrink-0 w-32 rounded-lg">
                  <Image
--- a/components/partials/header/locale-switcher.tsx
+++ b/components/partials/header/locale-switcher.tsx
@ -37,18 +37,24 @@ export default function LocalSwitcher() {
  useEffect(() => {
    const storedLang = getLanguage();

-    if (!storedLang) {
-      setLanguage("in");
-      setSelectedLang("in");
-
+    if (pathname.includes("polda")){
      startTransition(() => {
-        router.replace(pathname, { locale: "in" });
+          router.replace(pathname, { locale: "in" });
      });
    } else {
-      setSelectedLang(storedLang);
-      startTransition(() => {
-        router.replace(pathname, { locale: storedLang });
-      });
+      if (!storedLang) {
+        setLanguage("in");
+        setSelectedLang("in");
+
+        startTransition(() => {
+          router.replace(pathname, { locale: "in" });
+        });
+      } else {
+        setSelectedLang(storedLang);
+        startTransition(() => {
+          router.replace(pathname, { locale: storedLang });
+        });
+      }
    }
  }, []);

--- a/service/settings/settings.ts
+++ b/service/settings/settings.ts
@ -153,6 +153,11 @@ export async function deleteAdvertisements(id: string | number) {
  return httpDeleteInterceptor(url);
 }

+export async function getListPopUp() {
+  const url = `media/interstitial/pagination`;
+  return httpGetInterceptor(url);
+}
+
 export async function setPopUp(id: number, status: boolean) {
  const url = `media/interstitial?id=${id}&status=${status}`;
  return httpPostInterceptor(url);