From e1ac7cc68832e8996b9008eacf91fd691ac51552 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Mon, 28 Jul 2025 21:35:05 +0700
Subject: [PATCH] fixing

---
 .../(polda)/polda/[polda_name]/all/layout.tsx |  14 -
 .../satker/[satker_name]/all/filter/page.tsx  | 753 ++++++++++++++++++
 .../filter-all/document-filter-card.tsx       | 116 +--
 .../filter-all/image-filter-card.tsx          | 116 +--
 .../filter-all/video-filter-card.tsx          | 112 +--
 5 files changed, 877 insertions(+), 234 deletions(-)
 delete mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/all/layout.tsx
 create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/all/filter/page.tsx

diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/all/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/all/layout.tsx
deleted file mode 100644
index e2ca7e0b..00000000
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/all/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/navbar";
-
-const layout = async ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      <Navbar />
-      {children}
-      <Footer />
-    </>
-  );
-};
-
-export default layout;
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/all/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/all/filter/page.tsx
new file mode 100644
index 00000000..55f2d76d
--- /dev/null
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/all/filter/page.tsx
@@ -0,0 +1,753 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import {
+  getPublicCategoryData,
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataAll,
+  listDataRegional,
+} from "@/service/landing/landing";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import { Link, useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import ReactDatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { close, loading } from "@/config/swal";
+import FilterImageComponent from "@/components/landing-page/filter-all/image-filter-card";
+import FilterVideoComponent from "@/components/landing-page/filter-all/video-filter-card";
+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";
+
+export default function FilterPage() {
+  const router = useRouter();
+  const asPath = usePathname();
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const locale = params?.locale;
+  const [imageData, setImageData] = useState<any>();
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [totalPage, setTotalPage] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [page, setPage] = useState(1);
+  const [totalContent, setTotalContent] = useState();
+  const [change, setChange] = useState(false);
+  const sortBy = searchParams?.get("sortBy");
+  const title = searchParams?.get("title");
+  const categorie = searchParams?.get("category");
+  const group = searchParams?.get("group");
+  const tag: any = searchParams?.get("tag");
+  const [contentImage, setContentImage] = useState([]);
+  const [, setGetTotalPage] = useState();
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+  const [search, setSearch] = useState();
+  const [categoryFilter, setCategoryFilter] = useState<any>([]);
+  const [monthYearFilter, setMonthYearFilter] = useState<any>();
+  const [searchTitle, setSearchTitle] = useState<string>("");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
+  const isRegional = asPath?.includes("regional");
+  const isSatker = asPath?.includes("satker");
+  const [formatFilter, setFormatFilter] = useState<any>([]);
+  const pages = page ? page - 1 : 0;
+  const [startDateString, setStartDateString] = useState<any>();
+  const [endDateString, setEndDateString] = useState<any>();
+  const [dateRange, setDateRange] = useState<any>([null, null]);
+  const [calenderState, setCalenderState] = useState(false);
+  const [handleClose, setHandleClose] = useState(false);
+  const [categories, setCategories] = useState([]);
+  const [userLevels, setUserLevels] = useState([]);
+  const [contentAll, setContentAll] = useState([]);
+  const t = useTranslations("FilterPage");
+  const [isFilterOpen, setIsFilterOpen] = useState(true);
+
+  const [categoryPage, setCategoryPage] = useState(1);
+  const [categoryTotalPages, setCategoryTotalPages] = useState(1);
+  const poldaName = params?.polda_name;
+  const satkerName = params?.satker_name;
+
+  useEffect(() => {
+    const title = searchParams?.get("title") || "";
+    const category = searchParams?.get("category") || "";
+    const sortBy = searchParams?.get("sortBy") || "latest";
+
+    setSearchTitle(title);
+    setCategoryFilter(category ? category.split("&") : []);
+    setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
+  }, [searchParams]);
+
+  useEffect(() => {
+    fetchCategories(categoryPage);
+  }, [categoryPage]);
+
+  const fetchCategories = async (pageNumber: number) => {
+    const groupParam =
+      poldaName && poldaName.length > 1
+        ? poldaName
+        : satkerName && satkerName.length > 1
+        ? "satker-" + satkerName
+        : "";
+
+    const isInt = locale === "en";
+
+    const response = await getPublicCategoryData(
+      groupParam,
+      "",
+      isInt,
+      pageNumber
+    );
+
+    const content = response?.data?.data?.content || [];
+    const total = response?.data?.data?.totalPages || 1;
+
+    setCategories(content);
+    setCategoryTotalPages(total);
+  };
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  useEffect(() => {
+    async function initState() {
+      getCategories();
+      // getSelectedCategory();
+      if (isSatker) {
+        getUserLevels();
+      }
+    }
+
+    initState();
+  }, []);
+
+  useEffect(() => {
+    if (categorie) {
+      setCategoryFilter(
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
+    }
+  }, [categorie]);
+
+  // useEffect(() => {
+  //   fetchData();
+  // }, [page, sortBy, sortByOpt, title]);
+
+  useEffect(() => {
+    async function initState() {
+      if (isRegional) {
+        getDataRegional();
+      } else {
+        getData();
+      }
+    }
+    console.log(monthYearFilter, "monthFilter");
+    initState();
+  }, [
+    change,
+    monthYearFilter,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
+
+  async function getCategories() {
+    const category = await listCategory("1");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  useEffect(() => {
+    function initState() {
+      if (dateRange[0] != null && dateRange[1] != null) {
+        setStartDateString(getOnlyDate(dateRange[0]));
+        setEndDateString(getOnlyDate(dateRange[1]));
+        setHandleClose(true);
+        console.log("date range", dateRange, getOnlyDate(dateRange[0]));
+      }
+    }
+    initState();
+  }, [calenderState]);
+
+  async function getData() {
+    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 format = formatFilter == undefined ? "" : formatFilter?.join(",");
+        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+        loading();
+        const response = await listDataAll(
+          "",
+          name,
+          filter,
+          "",
+          tag,
+          filterGroup,
+          startDateString,
+          endDateString,
+          monthYearFilter
+            ? getOnlyMonthAndYear(monthYearFilter)
+                ?.split("/")[0]
+                ?.replace("0", "")
+            : "",
+          monthYearFilter
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
+            : ""
+        );
+        close();
+        // setGetTotalPage(response?.data?.data?.totalPages);
+        // setContentImage(response?.data?.data?.content);
+        // setTotalContent(response?.data?.data?.totalElements);
+        const data = response?.data?.data;
+        const contentData = data?.content;
+        setImageData(contentData);
+        setTotalData(data?.totalElements);
+        setContentAll(response?.data?.data?.content);
+        setTotalPage(response?.data?.data?.totalPages);
+        setTotalContent(response?.data?.data?.totalElements);
+      }
+    } else {
+      const filter =
+        categoryFilter?.length > 0
+          ? categoryFilter?.sort().join(",")
+          : categorie || "";
+
+      const name = title == undefined ? "" : title;
+      const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+      loading();
+      const response = await listDataAll(
+        "",
+        name,
+        filter,
+        "",
+        "",
+        tag,
+        startDateString,
+        endDateString,
+        monthYearFilter
+          ? getOnlyMonthAndYear(monthYearFilter)
+              ?.split("/")[0]
+              ?.replace("0", "")
+          : "",
+        monthYearFilter
+          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
+          : ""
+      );
+      close();
+      // setGetTotalPage(response?.data?.data?.totalPages);
+      // setContentImage(response?.data?.data?.content);
+      // setTotalContent(response?.data?.data?.totalElements);
+      const data = response?.data?.data;
+      const contentData = data?.content;
+      setImageData(contentData);
+      setTotalData(data?.totalElements);
+      setContentAll(response?.data?.data?.content);
+      setTotalPage(response?.data?.data?.totalPages);
+      setTotalContent(response?.data?.data?.totalElements);
+    }
+  }
+
+  const handleCategoryFilter = (e: boolean, id: string) => {
+    let filter = [...categoryFilter];
+
+    if (e) {
+      filter = [...categoryFilter, String(id)];
+    } else {
+      filter.splice(categoryFilter.indexOf(id), 1);
+    }
+    console.log("checkbox filter", filter);
+    setCategoryFilter(filter);
+    router.push(`?category=${filter.join("&")}`);
+  };
+
+  const handleFormatFilter = (e: boolean, id: string) => {
+    let filter = [...formatFilter];
+
+    if (e) {
+      filter = [...formatFilter, id];
+    } else {
+      filter.splice(formatFilter.indexOf(id), 1);
+    }
+    console.log("Format filter", filter);
+    setFormatFilter(filter);
+  };
+
+  const cleanCheckbox = () => {
+    setCategoryFilter([]);
+    setFormatFilter([]);
+    router.push(`?category=&title=`);
+    setDateRange([null, null]);
+    setMonthYearFilter(null);
+    setChange(!change);
+  };
+
+  async function getDataRegional() {
+    const filter =
+      categoryFilter?.length > 0
+        ? categoryFilter?.sort().join(",")
+        : categorie || "";
+
+    const name = title == undefined ? "" : title;
+    const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+    loading();
+    const response = await listDataRegional(
+      "",
+      name,
+      filter,
+      format,
+      "",
+      startDateString,
+      endDateString,
+      monthYearFilter
+        ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
+        : "",
+      monthYearFilter
+        ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
+        : "",
+      12,
+      pages,
+      sortByOpt
+    );
+    close();
+
+    setGetTotalPage(response?.data?.data?.totalPages);
+    setContentImage(response?.data?.data?.content);
+    setTotalContent(response?.data?.data?.totalElements);
+  }
+
+  function getSelectedCategory() {
+    const filter = [];
+
+    if (categorie) {
+      const categoryArr = categorie.split(",");
+
+      for (const element of categoryArr) {
+        filter.push(Number(element));
+      }
+
+      setCategoryFilter(filter);
+    }
+  }
+
+  const handleDeleteDate = () => {
+    setDateRange([null, null]);
+    setStartDateString("");
+    setEndDateString("");
+    setHandleClose(false);
+  };
+
+  const handleSorting = (e: any) => {
+    console.log(e.target.value);
+    if (e.target.value == "terbaru") {
+      setSortByOpt("createdAt");
+    } else {
+      setSortByOpt("clickCount");
+    }
+
+    setChange(!change);
+  };
+
+  async function getUserLevels() {
+    const res = await getUserLevelListByParent(761);
+    const userLevelList = res?.data?.data;
+
+    if (userLevelList !== null) {
+      let optionArr: any = [];
+
+      userLevelList?.map((option: any) => {
+        let optionData = {
+          id: option.id,
+          label: option.name,
+          value: option.id,
+        };
+
+        optionArr.push(optionData);
+      });
+
+      setUserLevels(optionArr);
+    }
+  }
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  async function doneTyping() {
+    if (searchTitle == "" || searchTitle == undefined) {
+      router.push("?title=");
+    } else {
+      router.push(`?title=${searchTitle}`);
+    }
+  }
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  return (
+    <div className="flex flex-col w-full max-w-screen overflow-x-hidden">
+      <div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
+        <p> {t("content", { defaultValue: "Content" })}</p>
+        {">"}
+        <p>
+          <span className="font-bold">
+            {t("allContent", { defaultValue: "All Content" })}
+          </span>
+        </p>
+        <p className="font-bold">|</p>
+        {!title ? (
+          <p>
+            {`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
+              "downloadableImage",
+              { defaultValue: "artikel berisi Foto yang dapat diunduh" }
+            )}`}
+          </p>
+        ) : (
+          <>
+            <p>
+              {t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
+              <span className="font-bold">"{title}"</span>
+            </p>
+          </>
+        )}
+      </div>
+
+      {/* Left */}
+      <div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
+        <div className="lg:hidden flex justify-end mb-2">
+          <button
+            onClick={() => setIsFilterOpen(!isFilterOpen)}
+            className="text-sm text-white bg-[#bb3523] px-4 py-1 rounded-md shadow"
+          >
+            {isFilterOpen ? "Hide Filter" : "Show Filter"}
+          </button>
+        </div>
+
+        {isFilterOpen && (
+          <div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+            <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
+              <Icon icon="stash:filter-light" fontSize={30} />
+              Filter
+            </h2>
+            <div className="border-t border-black my-4 dark:border-white"></div>
+            <div className="space-y-6">
+              <div>
+                <label
+                  htmlFor="search"
+                  className="block text-sm font-medium text-gray-700 dark:text-white"
+                >
+                  {t("search", { defaultValue: "Search" })}
+                </label>
+                <Input
+                  value={searchTitle}
+                  onChange={(e) => setSearchTitle(e.target.value)}
+                  onKeyUp={handleKeyUp}
+                  onKeyDown={handleKeyDown}
+                  type="text"
+                  id="search"
+                  placeholder={t("searchTitle", {
+                    defaultValue: "Search Title",
+                  })}
+                  className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                  {t("monthYear", { defaultValue: "Month Year" })}
+                </label>
+                <ReactDatePicker
+                  selected={monthYearFilter}
+                  className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                  onChange={(date) => setMonthYearFilter(date)}
+                  dateFormat="MM | yyyy"
+                  placeholderText={t("selectYear", {
+                    defaultValue: "Select Year",
+                  })}
+                  showMonthYearPicker
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                  {t("date", { defaultValue: "Date" })}
+                </label>
+                <div className="flex  flex-row justify justify-between gap-2">
+                  <ReactDatePicker
+                    selectsRange
+                    className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                    startDate={dateRange[0]}
+                    endDate={dateRange[1]}
+                    onChange={(update) => {
+                      setDateRange(update);
+                    }}
+                    placeholderText={t("selectDate", {
+                      defaultValue: "Select Date",
+                    })}
+                    onCalendarClose={() => setCalenderState(!calenderState)}
+                  />
+                  <div className="flex items-center">
+                    {handleClose ? (
+                      <Icon
+                        icon="carbon:close-filled"
+                        onClick={handleDeleteDate}
+                        width="20"
+                        inline
+                        color="#216ba5"
+                      />
+                    ) : (
+                      ""
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                  {t("categories", { defaultValue: "Categories" })}
+                </h3>
+                <ul className="mt-2 space-y-2">
+                  {categories.map((category: any) => (
+                    <li key={category?.id}>
+                      <label
+                        className="inline-flex items-center"
+                        htmlFor={`${category.id}`}
+                      >
+                        <Checkbox
+                          id={`${category.id}`}
+                          value={category.id}
+                          checked={categoryFilter.includes(String(category.id))}
+                          onCheckedChange={(e) =>
+                            handleCategoryFilter(Boolean(e), category.id)
+                          }
+                        />
+                        <span className="ml-2 text-gray-700 dark:text-white">
+                          {category?.name}
+                        </span>
+                      </label>
+                    </li>
+                  ))}
+                  <div className="mt-4 flex gap-2 justify-center items-center">
+                    <button
+                      onClick={() =>
+                        setCategoryPage((prev) => Math.max(prev - 1, 1))
+                      }
+                      disabled={categoryPage === 1}
+                      className="px-3 py-1 border rounded disabled:opacity-50"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
+                        />
+                      </svg>
+                    </button>
+
+                    {Array.from({ length: categoryTotalPages }, (_, i) => (
+                      <button
+                        key={i}
+                        onClick={() => setCategoryPage(i + 1)}
+                        className={`px-3 py-1 border rounded ${
+                          categoryPage === i + 1
+                            ? "bg-[#bb3523] text-white"
+                            : ""
+                        }`}
+                      >
+                        {i + 1}
+                      </button>
+                    ))}
+
+                    <button
+                      onClick={() =>
+                        setCategoryPage((prev) =>
+                          Math.min(prev + 1, categoryTotalPages)
+                        )
+                      }
+                      disabled={categoryPage === categoryTotalPages}
+                      className="px-3 py-1 border rounded disabled:opacity-50"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                </ul>
+              </div>
+              {/* Garis */}
+              <div className="border-t border-black my-4 dark:border-white"></div>
+              {/* Garis */}
+              <div>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                  Format
+                </h3>
+                <ul className="mt-2 space-y-2">
+                  <li>
+                    <label className="inline-flex items-center">
+                      <Checkbox
+                        id="png"
+                        value="png"
+                        checked={formatFilter.includes("png")}
+                        onCheckedChange={(e) =>
+                          handleFormatFilter(Boolean(e), "png")
+                        }
+                      />
+                      <span className="ml-2 text-gray-700 dark:text-white">
+                        PNG
+                      </span>
+                    </label>
+                  </li>
+                  <li>
+                    <label className="inline-flex items-center">
+                      <Checkbox
+                        id="jpeg"
+                        value="jpeg"
+                        checked={formatFilter.includes("jpeg")}
+                        onCheckedChange={(e) =>
+                          handleFormatFilter(Boolean(e), "jpeg")
+                        }
+                      />
+                      <span className="ml-2 text-gray-700 dark:text-white">
+                        JPEG
+                      </span>
+                    </label>
+                  </li>
+                  <li>
+                    <label className="inline-flex items-center">
+                      <Checkbox
+                        id="jpg"
+                        value="jpg"
+                        checked={formatFilter.includes("jpg")}
+                        onCheckedChange={(e) =>
+                          handleFormatFilter(Boolean(e), "jpg")
+                        }
+                      />
+                      <span className="ml-2 text-gray-700 dark:text-white">
+                        JPG
+                      </span>
+                    </label>
+                  </li>
+                </ul>
+              </div>
+              <div className="border-t border-black dark:border-white my-4"></div>
+              <div className="text-center">
+                <a
+                  onClick={cleanCheckbox}
+                  className="text-[#bb3523] cursor-pointer"
+                >
+                  <b>Reset Filter</b>
+                </a>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Konten Kanan */}
+        <div className="w-full pl-4 pr-4 lg:pr-16 pb-4 overflow-x-hidden">
+          <div className="w-full">
+            <div className="flex flex-col items-end mb-4">
+              <h2 className="text-lg font-semibold">
+                {t("sortBy", { defaultValue: "Sort By" })}
+              </h2>
+              <select
+                defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                onChange={(e) => handleSorting(e)}
+                className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              >
+                <option value="latest">
+                  {t("latest", { defaultValue: "Latest" })}
+                </option>
+                <option value="popular">
+                  {t("mostPopular", { defaultValue: "Most Popular" })}
+                </option>
+              </select>
+            </div>
+            <div className="flex flex-col gap-4 w-full">
+              <FilterImageComponent
+                categoryFilter={categoryFilter}
+                sortByOpt={sortByOpt}
+                startDateString={startDateString}
+                endDateString={endDateString}
+                monthYearFilter={monthYearFilter}
+              />
+              <FilterVideoComponent
+                categoryFilter={categoryFilter}
+                sortByOpt={sortByOpt}
+                startDateString={startDateString}
+                endDateString={endDateString}
+                monthYearFilter={monthYearFilter}
+              />
+              <FilterDocumentComponent
+                categoryFilter={categoryFilter}
+                sortByOpt={sortByOpt}
+                startDateString={startDateString}
+                endDateString={endDateString}
+                monthYearFilter={monthYearFilter}
+              />
+              <FilterAudioComponent
+                categoryFilter={categoryFilter}
+                sortByOpt={sortByOpt}
+                startDateString={startDateString}
+                endDateString={endDateString}
+                monthYearFilter={monthYearFilter}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/landing-page/filter-all/document-filter-card.tsx b/components/landing-page/filter-all/document-filter-card.tsx
index 5e84c482..be4006f7 100644
--- a/components/landing-page/filter-all/document-filter-card.tsx
+++ b/components/landing-page/filter-all/document-filter-card.tsx
@@ -98,82 +98,50 @@ export default function FilterDocumentComponent(props: {
   }
 
   async function getDataAll() {
-    if (asPath?.includes("/polda/") == true) {
-      if (asPath?.split("/")[2] !== "[polda_name]") {
-        const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+    let filterGroup = "";
 
-        const name = title == undefined ? "" : title;
-        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
-        loading();
-        const response = await listData(
-          "3",
-          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 listData(
-        "3",
-        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);
+    if (asPath.includes("/polda/") && asPath.split("/")[2] !== "[polda_name]") {
+      filterGroup = group ?? asPath.split("/")[2];
+    } else if (
+      asPath.includes("/satker/") &&
+      asPath.split("/")[2] !== "[satker_name]"
+    ) {
+      filterGroup = group ?? asPath.split("/")[2];
     }
+
+    const filter =
+      categoryFilter?.length > 0
+        ? categoryFilter?.sort().join(",")
+        : categorie || "";
+
+    const name = title == undefined ? "" : title;
+    loading();
+    const response = await listData(
+      "3",
+      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(data?.totalElements);
   }
 
   return newContent?.length > 0 ? (
diff --git a/components/landing-page/filter-all/image-filter-card.tsx b/components/landing-page/filter-all/image-filter-card.tsx
index 109048bb..70d45b8e 100644
--- a/components/landing-page/filter-all/image-filter-card.tsx
+++ b/components/landing-page/filter-all/image-filter-card.tsx
@@ -64,82 +64,50 @@ export default function FilterImageComponent(props: {
   ]);
 
   async function getDataAll() {
-    if (asPath?.includes("/polda/") == true) {
-      if (asPath?.split("/")[2] !== "[polda_name]") {
-        const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+    let filterGroup = "";
 
-        const name = title == undefined ? "" : title;
-        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
-        loading();
-        const response = await listData(
-          "1",
-          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 listData(
-        "1",
-        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);
+    if (asPath.includes("/polda/") && asPath.split("/")[2] !== "[polda_name]") {
+      filterGroup = group ?? asPath.split("/")[2];
+    } else if (
+      asPath.includes("/satker/") &&
+      asPath.split("/")[2] !== "[satker_name]"
+    ) {
+      filterGroup = group ?? asPath.split("/")[2];
     }
+
+    const filter =
+      categoryFilter?.length > 0
+        ? categoryFilter?.sort().join(",")
+        : categorie || "";
+
+    const name = title == undefined ? "" : title;
+    loading();
+    const response = await listData(
+      "1",
+      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(data?.totalElements);
   }
 
   async function getDataRegional() {
diff --git a/components/landing-page/filter-all/video-filter-card.tsx b/components/landing-page/filter-all/video-filter-card.tsx
index 30c24851..abe8b5f1 100644
--- a/components/landing-page/filter-all/video-filter-card.tsx
+++ b/components/landing-page/filter-all/video-filter-card.tsx
@@ -99,82 +99,50 @@ export default function FilterVideoComponent(props: {
   }
 
   async function getDataAll() {
-    if (asPath?.includes("/polda/") == true) {
-      if (asPath?.split("/")[2] !== "[polda_name]") {
-        const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+    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 listData(
-          "2",
-          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 ?? "";
 
-      const name = title == undefined ? "" : title;
-      loading();
-      const response = await listData(
-        "2",
-        name,
-        filter,
-        12,
-        0,
-        sortByOpt,
-        "",
-        "",
-        "",
-        startDateString,
-        endDateString,
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
-          : "",
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-          : ""
-      );
-      close();
+    const filterGroup =
+      group ??
+      (() => {
+        const segments = asPath.split("/");
+        if (segments[1] === "polda" || segments[1] === "satker") {
+          return segments[2];
+        }
+        return "";
+      })();
 
-      const data = response?.data?.data;
-      const contentData = data?.content;
+    loading();
+    const response = await listData(
+      "2",
+      name,
+      filter,
+      12,
+      0,
+      sortByOpt,
+      "",
+      "",
+      filterGroup,
+      startDateString,
+      endDateString,
+      monthYearFilter
+        ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
+        : "",
+      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
+    );
+    close();
 
-      setNewContent(contentData);
-      setTotalData(data?.totalElements);
-      setTotalPage(data?.totalPages);
-      setTotalContent(response?.data?.data?.totalElements);
-    }
+    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 ? (