add filter section

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

@@ -1,15 +1,19 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
+import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { getListContent } from "@/service/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals";
-import { formatDateToIndonesian } from "@/utils/globals";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
+import { getListContent, getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
 import { Reveal } from "@/components/landing-page/Reveal";
-import { Link } from "@/i18n/routing";
+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";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -19,35 +23,13 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const categories = [
+const FilterPage = () => {
-  { id: 1, title: "HUT HUMAS KE - 73" },
-  { id: 2, title: "OPERASI ZEBRA 2024" },
-  { id: 3, title: "PON XXI" },
-  { id: 4, title: "OPS LILIN NATARU 2024" },
-  { id: 5, title: "HUT HUMAS KE - 72" },
-  { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" },
-  { id: 6, title: "OPS KETUPAT 2024" },
-  { id: 6, title: "OPS PATUH 2024" },
-  { id: 6, title: "HARI JUANG POLRI" },
-  { id: 6, title: "HUT RI KE-79" },
-  { id: 6, title: "HARI BHAYANGKARA KE-78" },
-];
-
-const formatAudio = [
-  { id: 1, title: "DOC" },
-  { id: 2, title: "DOCX" },
-  { id: 3, title: "PDF" },
-  { id: 4, title: "PPT" },
-  { id: 5, title: "PPTX" },
-];
-
-const DocumentPage = () => {
   const router = useRouter();
-  const pathname = usePathname();
+  const asPath = usePathname();
   const params = useParams();
   const searchParams = useSearchParams();
   const locale = params?.locale;
-  const [imageData, setImageData] = useState<any>();
+  const [documentData, setDocumentData] = useState<any>();
   const [totalData, setTotalData] = React.useState<number>(1);
   const [totalPage, setTotalPage] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -56,9 +38,36 @@ const DocumentPage = () => {
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
-    pageSize: 6,
+    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 [, setGetTotalPage] = useState();
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+  const [contentDocument, setContentDocument] = 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 [startDate, endDate] = dateRange;
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
@@ -67,8 +76,191 @@ const DocumentPage = () => {
     }
   }, [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 {
+        getDataAll();
+      }
+    }
+    console.log(monthYearFilter, "monthFilter");
+    initState();
+  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+
+  async function getCategories() {
+    const category = await listCategory("3");
+    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 getDataAll() {
+    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 listData(
+          "3",
+          name,
+          filter,
+          12,
+          pages,
+          sortByOpt,
+          format,
+          "",
+          filterGroup,
+          startDateString,
+          endDateString,
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+          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;
+        setDocumentData(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;
+      const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+      loading();
+      const response = await listData(
+        "3",
+        name,
+        filter,
+        12,
+        pages,
+        sortByOpt,
+        format,
+        "",
+        "",
+        startDateString,
+        endDateString,
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        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;
+      setDocumentData(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(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(
+      "3",
+      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);
+    setContentDocument(response.data?.data?.content);
+    setTotalContent(response.data?.data?.totalElements);
+  }
+
   const table = useReactTable({
-    data: imageData,
+    data: documentData,
     columns: columns,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
@@ -88,10 +280,9 @@ const DocumentPage = () => {
     },
   });
 
-  const [documentData, setDocumentData] = useState<any>();
   useEffect(() => {
     initFetch();
-  }, []);
+  }, [page]);
   const initFetch = async () => {
     const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3" });
     console.log(response);
@@ -102,81 +293,199 @@ const DocumentPage = () => {
     setTotalData(data?.totalElements);
     setTotalPage(data?.totalPages);
   };
+
+  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">
       {/* Header */}
+
       <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Teks {">"} <span className="font-bold">Semua Teks</span>
         </p>
         <p className="font-bold">|</p>
-        <p>Terdapat 32499 artikel berisi Teks yang dapat diunduh </p>
+        <p>{`Terdapat ${totalContent} artikel berisi Teks yang dapat diunduh`}</p>
       </div>
+
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        {/* Sidebar Kiri */}
+        <div className="lg:w-[40%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
-        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+          <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
-          <h2 className="text-xl font-semibold mb-4 flex items-center gap-1">
             <Icon icon="stash:filter-light" fontSize={30} />
             Filter
           </h2>
-          <div className="border-t border-black dark:border-white my-4"></div>
+          <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
-            {/* Pencarian */}
             <div>
               <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                 Pencarian
               </label>
-              <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+              <Input
+                value={searchTitle}
+                onChange={(e) => setSearchTitle(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                type="text"
+                id="search"
+                placeholder="Cari judul..."
+                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              />
             </div>
-            {/* Tahun & Bulan */}
+
             <div>
-              <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label>
-                Pilih Tahun & Bulan
+              <ReactDatePicker
-              </label>
+                selected={monthYearFilter}
-              <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                onChange={(date) => setMonthYearFilter(date)}
+                dateFormat="MM | yyyy"
+                placeholderText="Pilih Tahun dan Bulan"
+                showMonthYearPicker
+              />
             </div>
-            {/* Tanggal */}
+
             <div>
-              <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
-                Pilih Tanggal
+              <div className="flex flex-row justify justify-between gap-2">
-              </label>
+                <ReactDatePicker
-              <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+                  selectsRange
+                  className="mt-1 w-full border 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="Pilih Tanggal"
+                  onCalendarClose={() => setCalenderState(!calenderState)}
+                />
+                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+              </div>
             </div>
-            {/* Kategori */}
+
             <div>
               <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
               <ul className="mt-2 space-y-2">
-                {categories.map((category) => (
+                {categories.map((category: any) => (
                   <li key={category?.id}>
-                    <label className="inline-flex items-center">
+                    <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id="terms" />
+                      <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.title}</span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
             {/* Garis */}
-            <div className="border-t border-black dark:border-white my-4"></div>
+            <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 Foto</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Teks</h3>
               <ul className="mt-2 space-y-2">
-                {formatAudio.map((format) => (
+                <li>
-                  <li key={format?.id}>
+                  <label className="inline-flex items-center">
-                    <label className="inline-flex items-center">
+                    <Checkbox id="doc" value="doc" checked={formatFilter.includes("doc")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "doc")} />
-                      <Checkbox id="terms" />
+                    <span className="ml-2 text-gray-700 dark:text-white">DOC</span>
-                      <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
+                  </label>
-                    </label>
+                </li>
-                  </li>
+                <li>
-                ))}
+                  <label className="inline-flex items-center">
+                    <Checkbox id="docx" value="docx" checked={formatFilter.includes("docx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "docx")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">DOCX</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="pdf" value="pdf" checked={formatFilter.includes("pdf")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pdf")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">PDF</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="ppt" value="ppt" checked={formatFilter.includes("ppt")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "ppt")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">PPT</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="pptx" value="pptx" checked={formatFilter.includes("pptx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pptx")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">PPTX</span>
+                  </label>
+                </li>
               </ul>
             </div>
             <div className="border-t border-black dark:border-white my-4"></div>
             <div className="text-center">
-              <a href="#" className="text-[#bb3523]">
+              <a onClick={cleanCheckbox} className="text-[#bb3523] cursor-pointer">
                 <b>Reset Filter</b>
               </a>
             </div>
@@ -184,20 +493,16 @@ const DocumentPage = () => {
         </div>
 
         {/* Konten Kanan */}
-
+        <Reveal>
-        <div className="flex-1">
+          <div className="flex-1">
-          <Reveal>
             <div className="flex flex-col items-end mb-4">
-              <h2 className="text-lg font-semibold tetx-red-300">Urutkan berdasarkan</h2>
+              <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
-              <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <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="terbaru">Terbaru</option>
-                <option value="terlama">Terpopuler</option>
+                <option value="terpopuler">Terpopuler</option>
               </select>
             </div>
-          </Reveal>
 
-          {/* Card */}
-          <Reveal>
             <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
               {documentData?.map((document: any) => (
                 <Link href={`/document/detail/${document?.slug}`} key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
@@ -226,11 +531,11 @@ const DocumentPage = () => {
               ))}
             </div>
             <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
-          </Reveal>
+          </div>
-        </div>
+        </Reveal>
       </div>
     </div>
   );
 };
 
-export default DocumentPage;
+export default FilterPage;

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

@@ -5,7 +5,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getListContent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
+import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
 import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
 import { Reveal } from "@/components/landing-page/Reveal";
@@ -15,13 +15,6 @@ import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { close, loading } from "@/config/swal";
 
-interface FilterData {
-  searchTitle: string;
-  selectedYearMonth: string;
-  selectedDate: string;
-  selectedCategories: string[];
-}
-
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -30,25 +23,6 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const categories = [
-  { id: 1, title: "HUT HUMAS KE - 73" },
-  { id: 2, title: "OPERASI ZEBRA 2024" },
-  { id: 3, title: "PON XXI" },
-  { id: 4, title: "OPS LILIN NATARU 2024" },
-  { id: 5, title: "HUT HUMAS KE - 72" },
-  { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" },
-  { id: 7, title: "OPS KETUPAT 2024" },
-  { id: 8, title: "OPS PATUH 2024" },
-  { id: 9, title: "HARI JUANG POLRI" },
-  { id: 10, title: "HUT RI KE-79" },
-  { id: 11, title: "HARI BHAYANGKARA KE-78" },
-];
-const formatPicture = [
-  { id: 1, title: "PNG" },
-  { id: 2, title: "JPEG" },
-  { id: 3, title: "JPG" },
-];
-
 const FilterPage = () => {
   const router = useRouter();
   const asPath = usePathname();
@@ -71,26 +45,28 @@ const FilterPage = () => {
   const [change, setChange] = useState(false);
   const sortBy = searchParams?.get("sortBy");
   const title = searchParams?.get("title");
-  const category = searchParams?.get("category");
+  const categorie = searchParams?.get("category");
   const group = searchParams?.get("group");
   const [contentImage, setContentImage] = useState([]);
   const [, setGetTotalPage] = useState();
   let typingTimer: any;
   const doneTypingInterval = 1500;
   const [search, setSearch] = useState();
-  const [categoryFilter, setCategoryFilter] = 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([]);
+  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 [startDate, endDate] = dateRange;
 
@@ -101,6 +77,25 @@ const FilterPage = () => {
     }
   }, [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]);
@@ -115,7 +110,13 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString]);
+  }, [change, asPath, monthYearFilter, page, 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() {
@@ -129,22 +130,10 @@ const FilterPage = () => {
     initState();
   }, [calenderState]);
 
-  // const fetchData = async () => {
-  //   const response = await getListContent({ page: page - 1, size: 6, sortBy: sortByOpt, contentTypeId: "1", title: title ? title : "" });
-  //   console.log(response);
-
-  //   const data = response.data?.data;
-  //   const contentData = data?.content;
-  //   setImageData(contentData);
-  //   setTotalData(data?.totalElements);
-  //   setTotalPage(data?.totalPages);
-  //   setTotalContent(response.data?.data?.totalElements);
-  // };
-
   async function getDataAll() {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
-        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -177,7 +166,7 @@ const FilterPage = () => {
         setTotalContent(response.data?.data?.totalElements);
       }
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : category || "";
+      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -210,8 +199,42 @@ const FilterPage = () => {
     }
   }
 
+  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(",") : category || "";
+    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -258,6 +281,20 @@ const FilterPage = () => {
     },
   });
 
+  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("");
@@ -276,39 +313,27 @@ const FilterPage = () => {
     setChange(!change);
   };
 
-  // async function getCategories() {
+  async function getUserLevels() {
-  //   const category = await listCategory("1");
+    const res = await getUserLevelListByParent(761);
-  //   const resCategory = category?.data?.data?.content;
+    const userLevelList = res?.data?.data;
-  //   setCategories(resCategory);
-  // }
 
-  // function getSelectedCategory() {
+    if (userLevelList !== null) {
-  //   const filter = [];
+      let optionArr: any = [];
 
-  //   if (category) {
+      userLevelList?.map((option: any) => {
-  //     const categoryArr = category.split(",");
+        let optionData = {
+          id: option.id,
+          label: option.name,
+          value: option.id,
+        };
 
-  //     for (const element of categoryArr) {
+        optionArr.push(optionData);
-  //       filter.push(Number(element));
+      });
-  //     }
 
-  //     setCategoryFilter(filter);
+      setUserLevels(optionArr);
-  //   }
+    }
-  // }
+  }
 
-  // function getSelectedCategory() {
-  //   const filter = [];
-
-  //   if (category) {
-  //     const categoryArr = category.split(",");
-
-  //     for (const element of categoryArr) {
-  //       filter.push(Number(element));
-  //     }
-
-  //     setCategoryFilter();
-  //   }
-  // }
   const handleKeyUp = () => {
     clearTimeout(typingTimer);
     typingTimer = setTimeout(doneTyping, doneTypingInterval);
@@ -366,7 +391,6 @@ const FilterPage = () => {
 
             <div>
               <label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label>
-              {/* <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" /> */}
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -379,7 +403,6 @@ const FilterPage = () => {
 
             <div>
               <label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
-              {/* <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" /> */}
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -401,9 +424,9 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
-                    <label className="inline-flex items-center">
+                    <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id="terms" />
+                      <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?.title}</span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
                 ))}
@@ -415,19 +438,29 @@ const FilterPage = () => {
             <div>
               <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Foto</h3>
               <ul className="mt-2 space-y-2">
-                {formatPicture.map((format) => (
+                <li>
-                  <li key={format?.id}>
+                  <label className="inline-flex items-center">
-                    <label className="inline-flex items-center">
+                    <Checkbox id="png" value="png" checked={formatFilter.includes("png")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "png")} />
-                      <Checkbox id="terms" />
+                    <span className="ml-2 text-gray-700 dark:text-white">PNG</span>
-                      <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
+                  </label>
-                    </label>
+                </li>
-                  </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 href="#" className="text-[#bb3523]">
+              <a onClick={cleanCheckbox} className="text-[#bb3523] cursor-pointer">
                 <b>Reset Filter</b>
               </a>
             </div>

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

@@ -3,13 +3,17 @@ import React, { useEffect, useState } from "react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { getListContent } from "@/service/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals";
-import { formatDateToIndonesian } from "@/utils/globals";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
+import { getListContent, getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/service/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import LandingPagination from "@/components/landing-page/pagination";
 import { Reveal } from "@/components/landing-page/Reveal";
-import { Link } from "@/i18n/routing";
+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";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -19,34 +23,13 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-const categories = [
-  { id: 1, title: "HUT HUMAS KE - 73" },
-  { id: 2, title: "OPERASI ZEBRA 2024" },
-  { id: 3, title: "PON XXI" },
-  { id: 4, title: "OPS LILIN NATARU 2024" },
-  { id: 5, title: "HUT HUMAS KE - 72" },
-  { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" },
-  { id: 6, title: "OPS KETUPAT 2024" },
-  { id: 6, title: "OPS PATUH 2024" },
-  { id: 6, title: "HARI JUANG POLRI" },
-  { id: 6, title: "HUT RI KE-79" },
-  { id: 6, title: "HARI BHAYANGKARA KE-78" },
-];
-const formatPicture = [
-  { id: 1, title: "MK4" },
-  { id: 2, title: "MOV" },
-  { id: 3, title: "MP4" },
-  { id: 3, title: "AVI" },
-  { id: 3, title: "WMV" },
-];
-
 const FilterPage = () => {
   const router = useRouter();
-  const pathname = usePathname();
+  const asPath = usePathname();
   const params = useParams();
   const searchParams = useSearchParams();
   const locale = params?.locale;
-  const [imageData, setImageData] = useState<any>();
+  const [videoData, setVideoData] = useState<any>();
   const [totalData, setTotalData] = React.useState<number>(1);
   const [totalPage, setTotalPage] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -55,9 +38,36 @@ const FilterPage = () => {
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
-    pageSize: 6,
+    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 [, setGetTotalPage] = useState();
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+  const [contentVideo, setContentVideo] = 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 [startDate, endDate] = dateRange;
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
@@ -66,8 +76,191 @@ const FilterPage = () => {
     }
   }, [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 {
+        getDataAll();
+      }
+    }
+    console.log(monthYearFilter, "monthFilter");
+    initState();
+  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+
+  async function getCategories() {
+    const category = await listCategory("2");
+    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 getDataAll() {
+    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 listData(
+          "2",
+          name,
+          filter,
+          12,
+          pages,
+          sortByOpt,
+          format,
+          "",
+          filterGroup,
+          startDateString,
+          endDateString,
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+          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;
+        setVideoData(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;
+      const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+      loading();
+      const response = await listData(
+        "2",
+        name,
+        filter,
+        12,
+        pages,
+        sortByOpt,
+        format,
+        "",
+        "",
+        startDateString,
+        endDateString,
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        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;
+      setVideoData(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(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(
+      "2",
+      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);
+    setContentVideo(response.data?.data?.content);
+    setTotalContent(response.data?.data?.totalElements);
+  }
+
   const table = useReactTable({
-    data: imageData,
+    data: videoData,
     columns: columns,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
@@ -87,7 +280,6 @@ const FilterPage = () => {
     },
   });
 
-  const [videoData, setVideoData] = useState<any>();
   useEffect(() => {
     initFetch();
   }, [page]);
@@ -102,97 +294,212 @@ const FilterPage = () => {
     setTotalPage(data?.totalPages);
   };
 
-  
+  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">
       {/* Header */}
+
       <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
         <p>
           {" "}
           Audio Visual {">"} <span className="font-bold">Semua Audio Visual</span>
         </p>
         <p className="font-bold">|</p>
-        <p>Terdapat 324911 artikel berisi Audio Visual yang dapat diunduh </p>
+        <p>{`Terdapat ${totalContent} artikel berisi Audio Visual yang dapat diunduh`}</p>
       </div>
+
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        <div className="lg:w-1/4 w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+        <div className="lg:w-[40%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
-          <Reveal>
+          <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
-            <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
+            <Icon icon="stash:filter-light" fontSize={30} />
-              <Icon icon="stash:filter-light" fontSize={30} />
+            Filter
-              Filter
+          </h2>
-            </h2>
+          <div className="border-t border-black my-4 dark:border-white"></div>
-            <div className="border-t border-black dark:border-white my-4"></div>
+          <div className="space-y-6">
-            <div className="space-y-6">
+            <div>
-              <div>
+              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
-                <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+                Pencarian
-                  Pencarian
+              </label>
-                </label>
+              <Input
-                <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+                value={searchTitle}
-              </div>
+                onChange={(e) => setSearchTitle(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                type="text"
+                id="search"
+                placeholder="Cari judul..."
+                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              />
+            </div>
 
-              <div>
+            <div>
-                <label htmlFor="month" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label>
-                  Tahun & Bulan
+              <ReactDatePicker
-                </label>
+                selected={monthYearFilter}
-                <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
-              </div>
+                onChange={(date) => setMonthYearFilter(date)}
+                dateFormat="MM | yyyy"
+                placeholderText="Pilih Tahun dan Bulan"
+                showMonthYearPicker
+              />
+            </div>
 
-              <div>
+            <div>
-                <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
-                  Tanggal
+              <div className="flex flex-row justify justify-between gap-2">
-                </label>
+                <ReactDatePicker
-                <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+                  selectsRange
-              </div>
+                  className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
-
+                  startDate={dateRange[0]}
-              <div>
+                  endDate={dateRange[1]}
-                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
+                  onChange={(update) => {
-                <ul className="mt-2 space-y-2">
+                    setDateRange(update);
-                  {categories.map((category) => (
+                  }}
-                    <li key={category?.id}>
+                  placeholderText="Pilih Tanggal"
-                      <label className="inline-flex items-center">
+                  onCalendarClose={() => setCalenderState(!calenderState)}
-                        <Checkbox id="terms" />
+                />
-                        <span className="ml-2 text-gray-700 dark:text-white">{category.title}</span>
+                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
-                      </label>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              {/* Garis */}
-              <div className="border-t border-black dark:border-white my-4"></div>
-              {/* Garis */}
-              <div>
-                <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Video</h3>
-                <ul className="mt-2 space-y-2">
-                  {formatPicture.map((format) => (
-                    <li key={format?.id}>
-                      <label className="inline-flex items-center">
-                        <Checkbox id="terms" />
-                        <span className="ml-2 text-gray-700 dark:text-white">{format.title}</span>
-                      </label>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              <div className="border-t border-black dark:border-white my-4"></div>
-              <div className="text-center">
-                <a href="#" className="text-[#bb3523]">
-                  <b>Reset Filter</b>
-                </a>
               </div>
             </div>
-          </Reveal>
+
+            <div>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</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>
+                ))}
+              </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 Foto</h3>
+              <ul className="mt-2 space-y-2">
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="mk4" value="mk4" checked={formatFilter.includes("mk4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mk4")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">MK4</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="mov" value="mov" checked={formatFilter.includes("mov")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mov")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">MOV</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="mp4" value="mp4" checked={formatFilter.includes("mp4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp4")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">MP4</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="avi" value="avi" checked={formatFilter.includes("avi")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "avi")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">AVI</span>
+                  </label>
+                </li>
+                <li>
+                  <label className="inline-flex items-center">
+                    <Checkbox id="wmv" value="wmv" checked={formatFilter.includes("wmv")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wmv")} />
+                    <span className="ml-2 text-gray-700 dark:text-white">WMV</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="flex-1">
+        <Reveal>
-          <Reveal>
+          <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
-              <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <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="terbaru">Terbaru</option>
-                <option value="terlama">Terlama</option>
+                <option value="terpopuler">Terpopuler</option>
               </select>
             </div>
 
@@ -201,7 +508,7 @@ const FilterPage = () => {
                 <Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
                   <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                     <Link href={`/video/detail/${video?.slug}`}>
-                      <img src={video?.thumbnailLink} className=" h-60 object-cover items-center w-full justify-center rounded-lg" />
+                      <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
                       <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                         {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
                         {video?.clickCount}{" "}
@@ -212,15 +519,15 @@ const FilterPage = () => {
                           />
                         </svg>{" "}
                       </div>
-                      <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate text-base hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
+                      <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>
                     </Link>
                   </CardContent>
                 </Card>
               ))}
             </div>
             <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
-          </Reveal>
+          </div>
-        </div>
+        </Reveal>
       </div>
     </div>
   );

components/landing-page/new-content.tsx

@@ -1,10 +1,11 @@
+"use-client";
+
 import React, { useEffect, useState } from "react";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
+import { formatDateToIndonesian } from "@/utils/globals";
-import { generateLocalizedPath } from "@/utils/globals";
 import { getListContent } from "@/service/landing/landing";
 import { Link } from "@/i18n/routing";
 import { Reveal } from "./Reveal";

service/landing/landing.ts

@@ -10,7 +10,9 @@ export async function getCategoryData() {
 
 export async function getListContent(props: any) {
   return await httpGetInterceptor(
-    `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${props.title}&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
+    `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${
+      props.title ? props.title : ""
+    }&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
   );
 }
 
@@ -57,3 +59,7 @@ export async function listDataRegional(type: string, search: string, category: s
     `media/public/regional-list?enablePage=1&size=${size}&page=${page}&sort=desc&sortBy=${sortBy}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}`
   );
 }
+
+export async function getUserLevelListByParent(id: any) {
+  return await httpGetInterceptor(`users/user-levels/list?userLevelId=${id}`);
+}