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

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

@@ -30,6 +30,7 @@ import FilterVideoComponent from "@/components/landing-page/filter-all/video-fil
 import FilterDocumentComponent from "@/components/landing-page/filter-all/document-filter-card";
 import FilterAudioComponent from "@/components/landing-page/filter-all/audio-filter-card";
 import { useTranslations } from "next-intl";
+import FilterIndeksComponent from "@/components/landing-page/filter-all/indeks-filter-card";
 
 export default function FilterPage() {
   const router = useRouter();
@@ -744,6 +745,13 @@ export default function FilterPage() {
                 endDateString={endDateString}
                 monthYearFilter={monthYearFilter}
               />
+              <FilterIndeksComponent
+                categoryFilter={categoryFilter}
+                sortByOpt={sortByOpt}
+                startDateString={startDateString}
+                endDateString={endDateString}
+                monthYearFilter={monthYearFilter}
+              />
             </div>
           </div>
         </div>

components/landing-page/filter-all/indeks-filter-card.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSearchParams, useParams } from "next/navigation";
+import Image from "next/image";
+import Link from "next/link"; // pastikan path-nya sesuai
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { getIndeksData, getIndeksDataFilter } from "@/service/landing/landing";
+import { usePathname, useRouter } from "@/i18n/routing";
+import { loading } from "@/lib/swal";
+import { getOnlyMonthAndYear } from "@/utils/globals";
+
+export default function IndeksCarouselComponent(props: {
+  categoryFilter?: any;
+  sortByOpt?: string;
+  startDateString?: string;
+  endDateString?: string;
+  monthYearFilter?: any;
+}) {
+  const {
+    categoryFilter,
+    sortByOpt,
+    startDateString,
+    endDateString,
+    monthYearFilter,
+  } = props;
+  const router = useRouter();
+  const asPath = usePathname();
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const [indeksData, setIndeksData] = useState<any[]>([]); // ✅ State untuk menyimpan konten data
+  const [newContent, setNewContent] = useState<any[]>([]); // Optional, bisa jadi redundant
+  const [totalData, setTotalData] = useState<number>(0);
+  const [totalPage, setTotalPage] = useState<number>(0);
+  const [totalContent, setTotalContent] = useState<number>(0);
+  const sortBy = searchParams?.get("sortBy");
+  const title = searchParams?.get("title");
+  const categorie = searchParams?.get("category");
+  const group = searchParams?.get("group");
+
+  const poldaName = params?.polda_name;
+  const satkerName = params?.satker_name;
+
+  let prefixPath = poldaName
+    ? `/polda/${poldaName}`
+    : satkerName
+    ? `/satker/${satkerName}`
+    : "/";
+
+  // useEffect(() => {
+  //   initFetch();
+  // }, []);
+
+  //  const initFetch = async () => {
+  //     try {
+  //       const month =
+  //         monthYearFilter?.split("/")?.[0]?.replace("0", "") || "";
+  //       const year = monthYearFilter?.split("/")?.[1] || "";
+  //  const name = title == undefined ? "" : title;
+  //         const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+  //       const response = await getIndeksDataFilter(
+
+  //                 name,
+  //                 filter,
+  //                 12,
+  //                 0,
+  //                 sortByOpt,
+  //                 "",
+  //                 "",
+  //                 filterGroup,
+  //                 startDateString,
+  //                 endDateString,
+  //                 monthYearFilter
+  //                   ? getOnlyMonthAndYear(monthYearFilter)
+  //                       ?.split("/")[0]
+  //                       ?.replace("", "")
+  //                   : "",
+  //                 monthYearFilter
+  //                   ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
+  //                   : ""
+  //               );
+  //       const data = response?.data?.data;
+  //       const contentData = data?.content;
+
+  //       setIndeksData(contentData || []);
+  //       setNewContent(contentData || []);
+  //       setTotalData(data?.totalElements || 0);
+  //       setTotalPage(data?.totalPages || 0);
+  //       setTotalContent(data?.totalElements || 0);
+  //     } catch (error) {
+  //       console.error("Error fetching indeks data:", error);
+  //     }
+  //   };
+  useEffect(() => {
+    initFetch();
+  }, [
+    title,
+    categoryFilter,
+    categorie,
+    group,
+    startDateString,
+    endDateString,
+    monthYearFilter,
+    sortByOpt,
+  ]);
+
+  async function initFetch() {
+    if (asPath?.includes("/polda/") == true) {
+      if (asPath?.split("/")[2] !== "[polda_name]") {
+        const filter =
+          categoryFilter?.length > 0
+            ? categoryFilter?.sort().join(",")
+            : categorie || "";
+
+        const name = title == undefined ? "" : title;
+        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+        loading();
+        const response = await getIndeksDataFilter(
+          "4",
+          name,
+          filter,
+          12,
+          0,
+          sortByOpt,
+          "",
+          "",
+          filterGroup,
+          startDateString,
+          endDateString,
+          monthYearFilter
+            ? getOnlyMonthAndYear(monthYearFilter)
+                ?.split("/")[0]
+                ?.replace("", "")
+            : "",
+          monthYearFilter
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
+            : ""
+        );
+        close();
+        const data = response?.data?.data;
+        const contentData = data?.content;
+        setNewContent(contentData);
+        setTotalData(data?.totalElements);
+        setTotalPage(data?.totalPages);
+        setTotalContent(response?.data?.data?.totalElements);
+      }
+    } else {
+      const filter =
+        categoryFilter?.length > 0
+          ? categoryFilter?.sort().join(",")
+          : categorie || "";
+
+      const name = title == undefined ? "" : title;
+      loading();
+      const response = await getIndeksDataFilter(
+        "4",
+        name,
+        filter,
+        12,
+        0,
+        sortByOpt,
+        "",
+        "",
+        "",
+        startDateString,
+        endDateString,
+        monthYearFilter
+          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
+          : "",
+        monthYearFilter
+          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
+          : ""
+      );
+      close();
+
+      const data = response?.data?.data;
+      const contentData = data?.content;
+
+      setNewContent(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      setTotalContent(response?.data?.data?.totalElements);
+    }
+  }
+
+  return newContent?.length > 0 ? (
+    <div className="flex flex-col gap-3 w-full">
+      <p>{`Indeks (${totalContent})`}</p>
+      <Carousel className="w-full max-w-7xl mx-auto mt-3">
+        <CarouselContent>
+          {newContent.map((image: any) => (
+            <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
+              <div
+                onClick={() => router.push(`/indeks/detail/${image?.slug}`)}
+                className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
+              >
+                <div className="w-full h-48 lg:h-60">
+                  <Image
+                    priority
+                    width={2560}
+                    height={1440}
+                    alt="image"
+                    src={image?.thumbnailLink}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+
+                <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>
+                    <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
+                      {image?.title}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className="-ml-0" />
+        <CarouselNext className="-mr-0" />
+      </Carousel>
+      <div className="flex justify-center mt-1 mb-6">
+        <Link
+          href={`${prefixPath}/image`}
+          className="border border-red-500 text-red-500 hover:bg-red-500 text-sm hover:text-white px-4 py-2 rounded transition duration-200"
+        >
+          Lihat Semua
+        </Link>
+      </div>
+    </div>
+  ) : null;
+}

components/main/video-detail.tsx

@@ -480,7 +480,7 @@ const DetailVideo = () => {
                   className="cursor-pointer flex flex-col items-center gap-1"
                 >
                   <img
-                    src={file?.thumbnailLink}
+                    src={file?.thumbnailFileUrl}
                     alt={file?.fileName}
                     className="w-32 h-20 object-cover rounded"
                   />

service/blog/blog.ts

@@ -43,3 +43,8 @@ export async function getBlogCategory() {
   const url = "blog/categories/enable";
   return httpGetInterceptor(url);
 }
+
+export async function publicListBlog(page: any, limit: any) {
+  const url = `blog/public/pagination?enablePage=1&page=${page}&size=${limit}`;
+  return httpGetInterceptor(url);
+}

service/landing/landing.ts

@@ -91,6 +91,27 @@ export async function getIndeksData() {
   );
 }
 
+export async function getIndeksDataFilter(
+  type: string,
+  search: string,
+  category: string,
+  size = 10,
+  page = 0,
+  sortBy = "createdAt",
+  format = "",
+  tag = "",
+  group = "",
+  startDate = "",
+  endDate = "",
+  month = "",
+  year = "",
+  isInt = false
+) {
+  return await httpGetInterceptor(
+    `blog/public/pagination?enablePage=1&sort=desc&sortBy=${sortBy}&size=${size}&page=${page}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&group=${group}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}&isInt=${isInt}`
+  );
+}
+
 export async function getDetail(slug: string) {
   return await httpGetInterceptor(`media/public?slug=${slug}&state=mabes`);
 }