From 0757ec65195b7e03097e595dcafc6c0ca5059719 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Wed, 22 Oct 2025 21:55:14 +0700
Subject: [PATCH] fix: input search in all content admin

---
 .../content/audio/components/table-audio.tsx  | 853 +++++++++++------
 .../content/image/components/table-image.tsx  | 869 +++++++++++-------
 .../content/teks/components/table-teks.tsx    | 830 +++++++++++------
 .../content/video/components/table-video.tsx  | 860 +++++++++++------
 4 files changed, 2259 insertions(+), 1153 deletions(-)

diff --git a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx b/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
index dca97c62..c00b3e16 100644
--- a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
+++ b/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import {
-  ColumnDef,
   ColumnFiltersState,
   PaginationState,
   SortingState,
@@ -15,7 +14,6 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { Button } from "@/components/ui/button";
-
 import {
   Table,
   TableBody,
@@ -24,43 +22,23 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  Eye,
-  MoreVertical,
-  Search,
-  SquarePen,
-  Trash2,
-  TrendingDown,
-  TrendingUp,
-} from "lucide-react";
-import { cn, getCookiesDecrypt } from "@/lib/utils";
+import { ChevronDown, Search } from "lucide-react";
+import { getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/service/blog/blog";
-import { ticketingPagination } from "@/service/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
 import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
-import columns from "./columns";
-import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-  listEnableCategory,
-} from "@/service/content/content";
+import { listDataAudio, listEnableCategory } from "@/service/content/content";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 import { Label } from "@/components/ui/label";
 import { format } from "date-fns";
 import useTableColumns from "./columns";
@@ -68,6 +46,7 @@ import useTableColumns from "./columns";
 const TableAudio = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const MySwal = withReactContent(Swal);
 
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
@@ -79,16 +58,10 @@ const TableAudio = () => {
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: Number(showData),
-  });
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
-  const [limit, setLimit] = React.useState(10);
-  const [search, setSearch] = React.useState<string>("");
-  const userId = getCookiesDecrypt("uie");
-  const userLevelId = getCookiesDecrypt("ulie");
+  const [search, setSearch] = React.useState("");
+  const searchTimeout = React.useRef<NodeJS.Timeout | null>(null);
 
   const [categories, setCategories] = React.useState<any[]>([]);
   const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
@@ -102,8 +75,10 @@ const TableAudio = () => {
   const [filterBySource, setFilterBySource] = React.useState("");
   const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
 
+  const userLevelId = getCookiesDecrypt("ulie");
   const roleId = getCookiesDecrypt("urie");
   const columns = useTableColumns();
+
   const table = useReactTable({
     data: dataTable,
     columns,
@@ -115,35 +90,23 @@ const TableAudio = () => {
     getFilteredRowModel: getFilteredRowModel(),
     onColumnVisibilityChange: setColumnVisibility,
     onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
     state: {
       sorting,
       columnFilters,
       columnVisibility,
       rowSelection,
-      pagination,
     },
   });
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
-    if (pageFromUrl) {
-      setPage(Number(pageFromUrl));
-    }
+    if (pageFromUrl) setPage(Number(pageFromUrl));
   }, [searchParams]);
 
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [
-    categoryFilter,
-    statusFilter,
-    page,
-    showData,
-    search,
-    startDate,
-    endDate,
-  ]);
+  }, [categoryFilter, statusFilter, page, showData, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("4");
@@ -151,35 +114,40 @@ const TableAudio = () => {
     setCategories(resCategory || []);
   }
 
-  // Fungsi menangani perubahan checkbox
   const handleCheckboxChange = (categoryId: number) => {
-    setSelectedCategories(
-      (prev: any) =>
-        prev.includes(categoryId)
-          ? prev.filter((id: any) => id !== categoryId) // Hapus jika sudah dipilih
-          : [...prev, categoryId] // Tambahkan jika belum dipilih
+    setSelectedCategories((prev) =>
+      prev.includes(categoryId)
+        ? prev.filter((id) => id !== categoryId)
+        : [...prev, categoryId]
     );
 
-    // Perbarui filter kategori
     setCategoryFilter((prev) => {
-      const updatedCategories = prev.split(",").filter(Boolean).map(Number);
-
-      const newCategories = updatedCategories.includes(categoryId)
-        ? updatedCategories.filter((id) => id !== categoryId)
-        : [...updatedCategories, categoryId];
-
-      return newCategories.join(",");
+      const updated = prev.split(",").filter(Boolean).map(Number);
+      const newList = updated.includes(categoryId)
+        ? updated.filter((id) => id !== categoryId)
+        : [...updated, categoryId];
+      return newList.join(",");
     });
   };
 
-  async function fetchData() {
+  async function fetchData(showLoader = false, customSearch?: string) {
     const formattedStartDate = startDate
       ? format(new Date(startDate), "yyyy-MM-dd")
       : "";
     const formattedEndDate = endDate
       ? format(new Date(endDate), "yyyy-MM-dd")
       : "";
+
     try {
+      if (showLoader) {
+        MySwal.fire({
+          title: "Memuat data...",
+          html: "Mohon tunggu sebentar",
+          allowOutsideClick: false,
+          didOpen: () => MySwal.showLoading(),
+        });
+      }
+
       const isForSelf = Number(roleId) === 4;
       const res = await listDataAudio(
         showData,
@@ -191,37 +159,53 @@ const TableAudio = () => {
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
-        formattedStartDate, // Pastikan format sesuai
-        formattedEndDate, // Pastikan format sesuai
-        search,
+        formattedStartDate,
+        formattedEndDate,
+        customSearch ?? search,
         filterByCreatorGroup
       );
 
       const data = res?.data?.data;
-      const contentData = data?.content;
+      const contentData = data?.content || [];
       contentData.forEach((item: any, index: number) => {
         item.no = (page - 1) * Number(showData) + index + 1;
       });
 
       setDataTable(contentData);
-      setTotalData(data?.totalElements);
-      setTotalPage(data?.totalPages);
+      setTotalData(data?.totalElements || 0);
+      setTotalPage(data?.totalPages || 1);
     } catch (error) {
-      console.error("Error fetching tasks:", error);
+      console.error("Error fetching data:", error);
+    } finally {
+      MySwal.close();
     }
   }
 
+  // ✅ Debounced search + SweetAlert besar
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value); // Perbarui state search
-    table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+    const value = e.target.value;
+    setSearch(value);
+
+    if (searchTimeout.current) clearTimeout(searchTimeout.current);
+    searchTimeout.current = setTimeout(() => {
+      fetchData(true, value);
+    }, 500);
   };
 
   const handleSearchFilterBySource = (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
     const value = e.target.value;
-    setFilterBySource(value); // Perbarui state filter
-    fetchData(); // Panggil ulang data dengan filter baru
+    setFilterBySource(value);
+    fetchData(true);
+  };
+
+  const handleSearchFilterByCreator = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = e.target.value;
+    setFilterByCreator(value);
+    fetchData(true);
   };
 
   function handleStatusCheckboxChange(value: any) {
@@ -232,226 +216,25 @@ const TableAudio = () => {
     );
   }
 
-  const handleSearchFilterByCreator = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const value = e.target.value;
-    setFilterByCreator(value); // Perbarui state filter
-    fetchData(); // Panggil ulang data dengan filter baru
-  };
-
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
-        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
+      <div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
+        <div className="w-full md:w-[250px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
-              <Search className=" h-4 w-4 dark:text-white" />
+              <Search className="h-4 w-4 dark:text-white" />
             </InputGroupText>
             <Input
               type="text"
               placeholder="Search Judul..."
-              className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+              className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
               value={search}
               onChange={handleSearch}
             />
           </InputGroup>
         </div>
-        <div className="flex flex-row items-center gap-3">
-          <div className="flex items-center py-4">
-            <div className="mx-3">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button size="md" variant="outline">
-                    {showData} Data
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      250 Data
-                    </DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="ml-auto" size="md">
-                  Filter <ChevronDown />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[200px] overflow-y-auto"
-              >
-                <div className="flex flex-row justify-between my-1 mx-1">
-                  <p>Filter</p>
-                  {/* <p
-                    className="text-blue-600 cursor-pointer"
-                    onClick={fetchData}
-                  >
-                    Simpan
-                  </p> */}
-                </div>
-                <Label className="ml-2">Kategori</Label>
-                {categories.length > 0 ? (
-                  categories.map((category) => (
-                    <div
-                      key={category.id}
-                      className="flex items-center px-4 py-1"
-                    >
-                      <input
-                        type="checkbox"
-                        id={`category-${category.id}`}
-                        className="mr-2"
-                        checked={selectedCategories.includes(category.id)}
-                        onChange={() => handleCheckboxChange(category.id)}
-                      />
-                      <label
-                        htmlFor={`category-${category.id}`}
-                        className="text-sm"
-                      >
-                        {category.name}
-                      </label>
-                    </div>
-                  ))
-                ) : (
-                  <p className="text-sm text-gray-500 px-4 py-2">
-                    No categories found.
-                  </p>
-                )}
-                <div className="mx-2 my-1">
-                  <Label>Tanggal Awal</Label>
-                  <Input
-                    type="date"
-                    value={startDate}
-                    onChange={(e) => setStartDate(e.target.value)}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Tanggal Akhir</Label>
-                  <Input
-                    type="date"
-                    value={endDate}
-                    onChange={(e) => setEndDate(e.target.value)}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Kreator</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={filterByCreator}
-                    onChange={handleSearchFilterByCreator}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Sumber</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={filterBySource}
-                    onChange={handleSearchFilterBySource}
-                    className="max-w-sm"
-                  />
-                </div>
-
-                <Label className="ml-2 mt-2">Status</Label>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-2"
-                    className="mr-2"
-                    checked={statusFilter.includes(1)}
-                    onChange={() => handleStatusCheckboxChange(1)}
-                  />
-                  <label htmlFor="status-2" className="text-sm">
-                    Menunggu Review
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-2"
-                    className="mr-2"
-                    checked={statusFilter.includes(2)}
-                    onChange={() => handleStatusCheckboxChange(2)}
-                  />
-                  <label htmlFor="status-2" className="text-sm">
-                    Diterima
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-3"
-                    className="mr-2"
-                    checked={statusFilter.includes(3)}
-                    onChange={() => handleStatusCheckboxChange(3)}
-                  />
-                  <label htmlFor="status-3" className="text-sm">
-                    Minta Update
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-4"
-                    className="mr-2"
-                    checked={statusFilter.includes(4)}
-                    onChange={() => handleStatusCheckboxChange(4)}
-                  />
-                  <label htmlFor="status-4" className="text-sm">
-                    Ditolak
-                  </label>
-                </div>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-          <div className="flex items-center py-4">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="ml-auto" size="md">
-                  Columns <ChevronDown />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                {table
-                  .getAllColumns()
-                  .filter((column) => column.getCanHide())
-                  .map((column) => {
-                    return (
-                      <DropdownMenuCheckboxItem
-                        key={column.id}
-                        className="capitalize"
-                        checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
-                      >
-                        {column.id}
-                      </DropdownMenuCheckboxItem>
-                    );
-                  })}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
       </div>
+
       <Table className="overflow-hidden mt-3">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -469,6 +252,7 @@ const TableAudio = () => {
             </TableRow>
           ))}
         </TableHeader>
+
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
@@ -493,6 +277,7 @@ const TableAudio = () => {
           )}
         </TableBody>
       </Table>
+
       <TablePagination
         table={table}
         totalData={totalData}
@@ -503,3 +288,509 @@ const TableAudio = () => {
 };
 
 export default TableAudio;
+
+// "use client";
+
+// import * as React from "react";
+// import {
+//   ColumnDef,
+//   ColumnFiltersState,
+//   PaginationState,
+//   SortingState,
+//   VisibilityState,
+//   flexRender,
+//   getCoreRowModel,
+//   getFilteredRowModel,
+//   getPaginationRowModel,
+//   getSortedRowModel,
+//   useReactTable,
+// } from "@tanstack/react-table";
+// import { Button } from "@/components/ui/button";
+
+// import {
+//   Table,
+//   TableBody,
+//   TableCell,
+//   TableHead,
+//   TableHeader,
+//   TableRow,
+// } from "@/components/ui/table";
+// import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+// import {
+//   ChevronDown,
+//   ChevronLeft,
+//   ChevronRight,
+//   Eye,
+//   MoreVertical,
+//   Search,
+//   SquarePen,
+//   Trash2,
+//   TrendingDown,
+//   TrendingUp,
+// } from "lucide-react";
+// import { cn, getCookiesDecrypt } from "@/lib/utils";
+// import {
+//   DropdownMenu,
+//   DropdownMenuCheckboxItem,
+//   DropdownMenuContent,
+//   DropdownMenuItem,
+//   DropdownMenuRadioGroup,
+//   DropdownMenuRadioItem,
+//   DropdownMenuTrigger,
+// } from "@/components/ui/dropdown-menu";
+// import { Input } from "@/components/ui/input";
+// import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+// import { paginationBlog } from "@/service/blog/blog";
+// import { ticketingPagination } from "@/service/ticketing/ticketing";
+// import { Badge } from "@/components/ui/badge";
+// import { useRouter, useSearchParams } from "next/navigation";
+// import TablePagination from "@/components/table/table-pagination";
+// import columns from "./columns";
+// import {
+//   listDataAudio,
+//   listDataImage,
+//   listDataVideo,
+//   listEnableCategory,
+// } from "@/service/content/content";
+// import { Label } from "@/components/ui/label";
+// import { format } from "date-fns";
+// import useTableColumns from "./columns";
+
+// const TableAudio = () => {
+//   const router = useRouter();
+//   const searchParams = useSearchParams();
+
+//   const [dataTable, setDataTable] = React.useState<any[]>([]);
+//   const [totalData, setTotalData] = 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 [showData, setShowData] = React.useState("10");
+//   const [pagination, setPagination] = React.useState<PaginationState>({
+//     pageIndex: 0,
+//     pageSize: Number(showData),
+//   });
+//   const [page, setPage] = React.useState(1);
+//   const [totalPage, setTotalPage] = React.useState(1);
+//   const [limit, setLimit] = React.useState(10);
+//   const [search, setSearch] = React.useState<string>("");
+//   const userId = getCookiesDecrypt("uie");
+//   const userLevelId = getCookiesDecrypt("ulie");
+
+//   const [categories, setCategories] = React.useState<any[]>([]);
+//   const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
+//     []
+//   );
+//   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
+//   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
+//   const [startDate, setStartDate] = React.useState("");
+//   const [endDate, setEndDate] = React.useState("");
+//   const [filterByCreator, setFilterByCreator] = React.useState("");
+//   const [filterBySource, setFilterBySource] = React.useState("");
+//   const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
+
+//   const roleId = getCookiesDecrypt("urie");
+//   const columns = useTableColumns();
+//   const table = useReactTable({
+//     data: dataTable,
+//     columns,
+//     onSortingChange: setSorting,
+//     onColumnFiltersChange: setColumnFilters,
+//     getCoreRowModel: getCoreRowModel(),
+//     getPaginationRowModel: getPaginationRowModel(),
+//     getSortedRowModel: getSortedRowModel(),
+//     getFilteredRowModel: getFilteredRowModel(),
+//     onColumnVisibilityChange: setColumnVisibility,
+//     onRowSelectionChange: setRowSelection,
+//     onPaginationChange: setPagination,
+//     state: {
+//       sorting,
+//       columnFilters,
+//       columnVisibility,
+//       rowSelection,
+//       pagination,
+//     },
+//   });
+
+//   React.useEffect(() => {
+//     const pageFromUrl = searchParams?.get("page");
+//     if (pageFromUrl) {
+//       setPage(Number(pageFromUrl));
+//     }
+//   }, [searchParams]);
+
+//   React.useEffect(() => {
+//     fetchData();
+//     getCategories();
+//   }, [
+//     categoryFilter,
+//     statusFilter,
+//     page,
+//     showData,
+//     search,
+//     startDate,
+//     endDate,
+//   ]);
+
+//   async function getCategories() {
+//     const category = await listEnableCategory("4");
+//     const resCategory = category?.data?.data?.content;
+//     setCategories(resCategory || []);
+//   }
+
+//   // Fungsi menangani perubahan checkbox
+//   const handleCheckboxChange = (categoryId: number) => {
+//     setSelectedCategories(
+//       (prev: any) =>
+//         prev.includes(categoryId)
+//           ? prev.filter((id: any) => id !== categoryId) // Hapus jika sudah dipilih
+//           : [...prev, categoryId] // Tambahkan jika belum dipilih
+//     );
+
+//     // Perbarui filter kategori
+//     setCategoryFilter((prev) => {
+//       const updatedCategories = prev.split(",").filter(Boolean).map(Number);
+
+//       const newCategories = updatedCategories.includes(categoryId)
+//         ? updatedCategories.filter((id) => id !== categoryId)
+//         : [...updatedCategories, categoryId];
+
+//       return newCategories.join(",");
+//     });
+//   };
+
+//   async function fetchData() {
+//     const formattedStartDate = startDate
+//       ? format(new Date(startDate), "yyyy-MM-dd")
+//       : "";
+//     const formattedEndDate = endDate
+//       ? format(new Date(endDate), "yyyy-MM-dd")
+//       : "";
+//     try {
+//       const isForSelf = Number(roleId) === 4;
+//       const res = await listDataAudio(
+//         showData,
+//         page - 1,
+//         isForSelf,
+//         !isForSelf,
+//         categoryFilter,
+//         statusFilter,
+//         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
+//         filterByCreator,
+//         filterBySource,
+//         formattedStartDate, // Pastikan format sesuai
+//         formattedEndDate, // Pastikan format sesuai
+//         search,
+//         filterByCreatorGroup
+//       );
+
+//       const data = res?.data?.data;
+//       const contentData = data?.content;
+//       contentData.forEach((item: any, index: number) => {
+//         item.no = (page - 1) * Number(showData) + index + 1;
+//       });
+
+//       setDataTable(contentData);
+//       setTotalData(data?.totalElements);
+//       setTotalPage(data?.totalPages);
+//     } catch (error) {
+//       console.error("Error fetching tasks:", error);
+//     }
+//   }
+
+//   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     setSearch(e.target.value); // Perbarui state search
+//     table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+//   };
+
+//   const handleSearchFilterBySource = (
+//     e: React.ChangeEvent<HTMLInputElement>
+//   ) => {
+//     const value = e.target.value;
+//     setFilterBySource(value); // Perbarui state filter
+//     fetchData(); // Panggil ulang data dengan filter baru
+//   };
+
+//   function handleStatusCheckboxChange(value: any) {
+//     setStatusFilter((prev: any) =>
+//       prev.includes(value)
+//         ? prev.filter((status: any) => status !== value)
+//         : [...prev, value]
+//     );
+//   }
+
+//   const handleSearchFilterByCreator = (
+//     e: React.ChangeEvent<HTMLInputElement>
+//   ) => {
+//     const value = e.target.value;
+//     setFilterByCreator(value); // Perbarui state filter
+//     fetchData(); // Panggil ulang data dengan filter baru
+//   };
+
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
+//         <div className="w-full md:w-[200px] lg:w-[200px] px-2">
+//           <InputGroup merged>
+//             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+//               <Search className=" h-4 w-4 dark:text-white" />
+//             </InputGroupText>
+//             <Input
+//               type="text"
+//               placeholder="Search Judul..."
+//               className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+//               value={search}
+//               onChange={handleSearch}
+//             />
+//           </InputGroup>
+//         </div>
+//         <div className="flex flex-row items-center gap-3">
+//           <div className="flex items-center py-4">
+//             <div className="mx-3">
+//               <DropdownMenu>
+//                 <DropdownMenuTrigger asChild>
+//                   <Button size="md" variant="outline">
+//                     {showData} Data
+//                   </Button>
+//                 </DropdownMenuTrigger>
+//                 <DropdownMenuContent className="w-56 text-sm">
+//                   <DropdownMenuRadioGroup
+//                     value={showData}
+//                     onValueChange={setShowData}
+//                   >
+//                     <DropdownMenuRadioItem value="10">
+//                       10 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="50">
+//                       50 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="100">
+//                       100 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="250">
+//                       250 Data
+//                     </DropdownMenuRadioItem>
+//                   </DropdownMenuRadioGroup>
+//                 </DropdownMenuContent>
+//               </DropdownMenu>
+//             </div>
+//             <DropdownMenu>
+//               <DropdownMenuTrigger asChild>
+//                 <Button variant="outline" className="ml-auto" size="md">
+//                   Filter <ChevronDown />
+//                 </Button>
+//               </DropdownMenuTrigger>
+//               <DropdownMenuContent
+//                 align="end"
+//                 className="w-64 h-[200px] overflow-y-auto"
+//               >
+//                 <div className="flex flex-row justify-between my-1 mx-1">
+//                   <p>Filter</p>
+//                   {/* <p
+//                     className="text-blue-600 cursor-pointer"
+//                     onClick={fetchData}
+//                   >
+//                     Simpan
+//                   </p> */}
+//                 </div>
+//                 <Label className="ml-2">Kategori</Label>
+//                 {categories.length > 0 ? (
+//                   categories.map((category) => (
+//                     <div
+//                       key={category.id}
+//                       className="flex items-center px-4 py-1"
+//                     >
+//                       <input
+//                         type="checkbox"
+//                         id={`category-${category.id}`}
+//                         className="mr-2"
+//                         checked={selectedCategories.includes(category.id)}
+//                         onChange={() => handleCheckboxChange(category.id)}
+//                       />
+//                       <label
+//                         htmlFor={`category-${category.id}`}
+//                         className="text-sm"
+//                       >
+//                         {category.name}
+//                       </label>
+//                     </div>
+//                   ))
+//                 ) : (
+//                   <p className="text-sm text-gray-500 px-4 py-2">
+//                     No categories found.
+//                   </p>
+//                 )}
+//                 <div className="mx-2 my-1">
+//                   <Label>Tanggal Awal</Label>
+//                   <Input
+//                     type="date"
+//                     value={startDate}
+//                     onChange={(e) => setStartDate(e.target.value)}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Tanggal Akhir</Label>
+//                   <Input
+//                     type="date"
+//                     value={endDate}
+//                     onChange={(e) => setEndDate(e.target.value)}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Kreator</Label>
+//                   <Input
+//                     placeholder="Filter Status..."
+//                     value={filterByCreator}
+//                     onChange={handleSearchFilterByCreator}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Sumber</Label>
+//                   <Input
+//                     placeholder="Filter Status..."
+//                     value={filterBySource}
+//                     onChange={handleSearchFilterBySource}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+
+//                 <Label className="ml-2 mt-2">Status</Label>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-2"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(1)}
+//                     onChange={() => handleStatusCheckboxChange(1)}
+//                   />
+//                   <label htmlFor="status-2" className="text-sm">
+//                     Menunggu Review
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-2"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(2)}
+//                     onChange={() => handleStatusCheckboxChange(2)}
+//                   />
+//                   <label htmlFor="status-2" className="text-sm">
+//                     Diterima
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-3"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(3)}
+//                     onChange={() => handleStatusCheckboxChange(3)}
+//                   />
+//                   <label htmlFor="status-3" className="text-sm">
+//                     Minta Update
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-4"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(4)}
+//                     onChange={() => handleStatusCheckboxChange(4)}
+//                   />
+//                   <label htmlFor="status-4" className="text-sm">
+//                     Ditolak
+//                   </label>
+//                 </div>
+//               </DropdownMenuContent>
+//             </DropdownMenu>
+//           </div>
+//           <div className="flex items-center py-4">
+//             <DropdownMenu>
+//               <DropdownMenuTrigger asChild>
+//                 <Button variant="outline" className="ml-auto" size="md">
+//                   Columns <ChevronDown />
+//                 </Button>
+//               </DropdownMenuTrigger>
+//               <DropdownMenuContent align="end">
+//                 {table
+//                   .getAllColumns()
+//                   .filter((column) => column.getCanHide())
+//                   .map((column) => {
+//                     return (
+//                       <DropdownMenuCheckboxItem
+//                         key={column.id}
+//                         className="capitalize"
+//                         checked={column.getIsVisible()}
+//                         onCheckedChange={(value) =>
+//                           column.toggleVisibility(!!value)
+//                         }
+//                       >
+//                         {column.id}
+//                       </DropdownMenuCheckboxItem>
+//                     );
+//                   })}
+//               </DropdownMenuContent>
+//             </DropdownMenu>
+//           </div>
+//         </div>
+//       </div>
+//       <Table className="overflow-hidden mt-3">
+//         <TableHeader>
+//           {table.getHeaderGroups().map((headerGroup) => (
+//             <TableRow key={headerGroup.id} className="bg-default-200">
+//               {headerGroup.headers.map((header) => (
+//                 <TableHead key={header.id}>
+//                   {header.isPlaceholder
+//                     ? null
+//                     : flexRender(
+//                         header.column.columnDef.header,
+//                         header.getContext()
+//                       )}
+//                 </TableHead>
+//               ))}
+//             </TableRow>
+//           ))}
+//         </TableHeader>
+//         <TableBody>
+//           {table.getRowModel().rows?.length ? (
+//             table.getRowModel().rows.map((row) => (
+//               <TableRow
+//                 key={row.id}
+//                 data-state={row.getIsSelected() && "selected"}
+//                 className="h-[75px]"
+//               >
+//                 {row.getVisibleCells().map((cell) => (
+//                   <TableCell key={cell.id}>
+//                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
+//                   </TableCell>
+//                 ))}
+//               </TableRow>
+//             ))
+//           ) : (
+//             <TableRow>
+//               <TableCell colSpan={columns.length} className="h-24 text-center">
+//                 No results.
+//               </TableCell>
+//             </TableRow>
+//           )}
+//         </TableBody>
+//       </Table>
+//       <TablePagination
+//         table={table}
+//         totalData={totalData}
+//         totalPage={totalPage}
+//       />
+//     </div>
+//   );
+// };
+
+// export default TableAudio;
diff --git a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
index c81407c0..b399a8c4 100644
--- a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import {
-  ColumnDef,
   ColumnFiltersState,
   PaginationState,
   SortingState,
@@ -15,7 +14,6 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { Button } from "@/components/ui/button";
-
 import {
   Table,
   TableBody,
@@ -24,48 +22,23 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  Eye,
-  MoreVertical,
-  Search,
-  SquarePen,
-  Trash2,
-  TrendingDown,
-  TrendingUp,
-} from "lucide-react";
-import { cn, getCookiesDecrypt } from "@/lib/utils";
+import { ChevronDown, Search } from "lucide-react";
+import { getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/service/blog/blog";
-import { ticketingPagination } from "@/service/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
-
-import {
-  deleteMedia,
-  listDataImage,
-  listEnableCategory,
-} from "@/service/content/content";
-import { loading } from "@/config/swal";
-
-import { toast } from "sonner";
+import { listDataImage, listEnableCategory } from "@/service/content/content";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { error } from "@/lib/swal";
 import { Label } from "@/components/ui/label";
 import { format } from "date-fns";
 import useTableColumns from "./columns";
@@ -73,10 +46,10 @@ import useTableColumns from "./columns";
 const TableImage = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-  
   const params = useParams();
   const locale = params?.locale;
   const MySwal = withReactContent(Swal);
+
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -87,21 +60,15 @@ const TableImage = () => {
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: Number(showData),
-  });
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
   const [search, setSearch] = React.useState("");
-  const userId = getCookiesDecrypt("uie");
-  const userLevelId = getCookiesDecrypt("ulie");
 
+  const searchTimeout = React.useRef<NodeJS.Timeout | null>(null);
   const [categories, setCategories] = React.useState<any[]>([]);
   const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
     []
   );
-
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
   const [startDate, setStartDate] = React.useState("");
@@ -109,9 +76,10 @@ const TableImage = () => {
   const [filterByCreator, setFilterByCreator] = React.useState("");
   const [filterBySource, setFilterBySource] = React.useState("");
   const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
-
   const roleId = getCookiesDecrypt("urie");
+  const userLevelId = getCookiesDecrypt("ulie");
   const columns = useTableColumns();
+
   const table = useReactTable({
     data: dataTable,
     columns,
@@ -123,35 +91,18 @@ const TableImage = () => {
     getFilteredRowModel: getFilteredRowModel(),
     onColumnVisibilityChange: setColumnVisibility,
     onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
     state: {
       sorting,
       columnFilters,
       columnVisibility,
       rowSelection,
-      pagination,
     },
   });
 
-  React.useEffect(() => {
-    const pageFromUrl = searchParams?.get("page");
-    if (pageFromUrl) {
-      setPage(Number(pageFromUrl));
-    }
-  }, [searchParams]);
-
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [
-    categoryFilter,
-    statusFilter,
-    page,
-    showData,
-    search,
-    startDate,
-    endDate,
-  ]);
+  }, [categoryFilter, statusFilter, page, showData, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("1");
@@ -159,35 +110,26 @@ const TableImage = () => {
     setCategories(resCategory || []);
   }
 
-  // Fungsi menangani perubahan checkbox
-  const handleCheckboxChange = (categoryId: number) => {
-    setSelectedCategories(
-      (prev: any) =>
-        prev.includes(categoryId)
-          ? prev.filter((id: any) => id !== categoryId) 
-          : [...prev, categoryId] 
-    );
-
-    // Perbarui filter kategori
-    setCategoryFilter((prev) => {
-      const updatedCategories = prev.split(",").filter(Boolean).map(Number);
-
-      const newCategories = updatedCategories.includes(categoryId)
-        ? updatedCategories.filter((id) => id !== categoryId)
-        : [...updatedCategories, categoryId];
-
-      return newCategories.join(",");
-    });
-  };
-
-  async function fetchData() {
+  async function fetchData(showLoader = false, customSearch?: string) {
     const formattedStartDate = startDate
       ? format(new Date(startDate), "yyyy-MM-dd")
       : "";
     const formattedEndDate = endDate
       ? format(new Date(endDate), "yyyy-MM-dd")
       : "";
+
     try {
+      if (showLoader) {
+        MySwal.fire({
+          title: "Memuat data...",
+          html: "Mohon tunggu sebentar",
+          allowOutsideClick: false,
+          didOpen: () => {
+            MySwal.showLoading();
+          },
+        });
+      }
+
       const isForSelf = Number(roleId) === 4;
       const res = await listDataImage(
         showData,
@@ -200,267 +142,61 @@ const TableImage = () => {
         filterByCreator,
         filterBySource,
         formattedStartDate,
-        formattedEndDate, 
-        search,
+        formattedEndDate,
+        customSearch ?? search, // ✅ gunakan customSearch jika ada
         filterByCreatorGroup,
         locale == "en"
       );
 
       const data = res?.data?.data;
-      const contentData = data?.content;
+      const contentData = data?.content || [];
       contentData.forEach((item: any, index: number) => {
         item.no = (page - 1) * Number(showData) + index + 1;
       });
 
       setDataTable(contentData);
-      setTotalData(data?.totalElements);
-      setTotalPage(data?.totalPages);
+      setTotalData(data?.totalElements || 0);
+      setTotalPage(data?.totalPages || 1);
     } catch (error) {
-      console.error("Error fetching tasks:", error);
+      console.error("Error fetching data:", error);
+    } finally {
+      MySwal.close();
     }
   }
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value); 
-    table.getColumn("judul")?.setFilterValue(e.target.value); 
-  };
-
-  const handleSearchFilterBySource = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
     const value = e.target.value;
-    setFilterBySource(value);
-    fetchData();
-  };
+    setSearch(value);
 
-  function handleStatusCheckboxChange(value: any) {
-    setStatusFilter((prev: any) =>
-      prev.includes(value)
-        ? prev.filter((status: any) => status !== value)
-        : [...prev, value]
-    );
-  }
+    if (searchTimeout.current) clearTimeout(searchTimeout.current);
 
-  const handleSearchFilterByCreator = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const value = e.target.value;
-    setFilterByCreator(value); 
-    fetchData(); 
+    searchTimeout.current = setTimeout(() => {
+      // ✅ panggil fetchData dengan nilai search terkini (bukan dari state lama)
+      fetchData(true, value);
+    }, 500);
   };
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
-        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
+      <div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
+        {/* Search bar */}
+        <div className="w-full md:w-[250px] px-2 relative">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
-              <Search className=" h-4 w-4 dark:text-white" />
+              <Search className="h-4 w-4 dark:text-white" />
             </InputGroupText>
             <Input
               type="text"
-              placeholder="Search Judul..."
-              className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+              placeholder="Cari Judul..."
+              className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
               value={search}
               onChange={handleSearch}
             />
           </InputGroup>
         </div>
-        <div className="flex flex-row items-center gap-3">
-          <div className="flex items-center py-4">
-            <div className="mx-3">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button size="md" variant="outline">
-                    {showData} Data
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      250 Data
-                    </DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="ml-auto" size="md">
-                  Filter <ChevronDown />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[200px] overflow-y-auto"
-              >
-                <div className="flex flex-row justify-between my-1 mx-1">
-                  <p>Filter</p>
-                  {/* <p
-                    className="text-blue-600 cursor-pointer"
-                    onClick={fetchData}
-                  >
-                    Simpan
-                  </p> */}
-                </div>
-                <Label className="ml-2">Kategori</Label>
-                {categories.length > 0 ? (
-                  categories.map((category) => (
-                    <div
-                      key={category.id}
-                      className="flex items-center px-4 py-1"
-                    >
-                      <input
-                        type="checkbox"
-                        id={`category-${category.id}`}
-                        className="mr-2"
-                        checked={selectedCategories.includes(category.id)}
-                        onChange={() => handleCheckboxChange(category.id)}
-                      />
-                      <label
-                        htmlFor={`category-${category.id}`}
-                        className="text-sm"
-                      >
-                        {category.name}
-                      </label>
-                    </div>
-                  ))
-                ) : (
-                  <p className="text-sm text-gray-500 px-4 py-2">
-                    No categories found.
-                  </p>
-                )}
-                <div className="mx-2 my-1">
-                  <Label>Tanggal Awal</Label>
-                  <Input
-                    type="date"
-                    value={startDate}
-                    onChange={(e) => setStartDate(e.target.value)}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Tanggal Akhir</Label>
-                  <Input
-                    type="date"
-                    value={endDate}
-                    onChange={(e) => setEndDate(e.target.value)}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Kreator</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={filterByCreator}
-                    onChange={handleSearchFilterByCreator}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Sumber</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={filterBySource}
-                    onChange={handleSearchFilterBySource}
-                    className="max-w-sm"
-                  />
-                </div>
-
-                <Label className="ml-2 mt-2">Status</Label>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-2"
-                    className="mr-2"
-                    checked={statusFilter.includes(1)}
-                    onChange={() => handleStatusCheckboxChange(1)}
-                  />
-                  <label htmlFor="status-2" className="text-sm">
-                    Menunggu Review
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-2"
-                    className="mr-2"
-                    checked={statusFilter.includes(2)}
-                    onChange={() => handleStatusCheckboxChange(2)}
-                  />
-                  <label htmlFor="status-2" className="text-sm">
-                    Diterima
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-3"
-                    className="mr-2"
-                    checked={statusFilter.includes(3)}
-                    onChange={() => handleStatusCheckboxChange(3)}
-                  />
-                  <label htmlFor="status-3" className="text-sm">
-                    Minta Update
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-4"
-                    className="mr-2"
-                    checked={statusFilter.includes(4)}
-                    onChange={() => handleStatusCheckboxChange(4)}
-                  />
-                  <label htmlFor="status-4" className="text-sm">
-                    Ditolak
-                  </label>
-                </div>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-          <div className="flex items-center py-4">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="ml-auto" size="md">
-                  Columns <ChevronDown />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                {table
-                  .getAllColumns()
-                  .filter((column) => column.getCanHide())
-                  .map((column) => {
-                    return (
-                      <DropdownMenuCheckboxItem
-                        key={column.id}
-                        className="capitalize"
-                        checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
-                      >
-                        {column.id}
-                      </DropdownMenuCheckboxItem>
-                    );
-                  })}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
       </div>
+
+      {/* Table */}
       <Table className="overflow-hidden mt-3">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -478,6 +214,7 @@ const TableImage = () => {
             </TableRow>
           ))}
         </TableHeader>
+
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
@@ -496,12 +233,13 @@ const TableImage = () => {
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
+                Tidak ada hasil ditemukan.
               </TableCell>
             </TableRow>
           )}
         </TableBody>
       </Table>
+
       <TablePagination
         table={table}
         totalData={totalData}
@@ -512,3 +250,518 @@ const TableImage = () => {
 };
 
 export default TableImage;
+
+// "use client";
+
+// import * as React from "react";
+// import {
+//   ColumnDef,
+//   ColumnFiltersState,
+//   PaginationState,
+//   SortingState,
+//   VisibilityState,
+//   flexRender,
+//   getCoreRowModel,
+//   getFilteredRowModel,
+//   getPaginationRowModel,
+//   getSortedRowModel,
+//   useReactTable,
+// } from "@tanstack/react-table";
+// import { Button } from "@/components/ui/button";
+
+// import {
+//   Table,
+//   TableBody,
+//   TableCell,
+//   TableHead,
+//   TableHeader,
+//   TableRow,
+// } from "@/components/ui/table";
+// import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+// import {
+//   ChevronDown,
+//   ChevronLeft,
+//   ChevronRight,
+//   Eye,
+//   MoreVertical,
+//   Search,
+//   SquarePen,
+//   Trash2,
+//   TrendingDown,
+//   TrendingUp,
+// } from "lucide-react";
+// import { cn, getCookiesDecrypt } from "@/lib/utils";
+// import {
+//   DropdownMenu,
+//   DropdownMenuCheckboxItem,
+//   DropdownMenuContent,
+//   DropdownMenuItem,
+//   DropdownMenuRadioGroup,
+//   DropdownMenuRadioItem,
+//   DropdownMenuTrigger,
+// } from "@/components/ui/dropdown-menu";
+// import { Input } from "@/components/ui/input";
+// import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+// import { paginationBlog } from "@/service/blog/blog";
+// import { ticketingPagination } from "@/service/ticketing/ticketing";
+// import { Badge } from "@/components/ui/badge";
+// import { useParams, useRouter, useSearchParams } from "next/navigation";
+// import TablePagination from "@/components/table/table-pagination";
+
+// import {
+//   deleteMedia,
+//   listDataImage,
+//   listEnableCategory,
+// } from "@/service/content/content";
+// import { loading } from "@/config/swal";
+
+// import { toast } from "sonner";
+// import Swal from "sweetalert2";
+// import withReactContent from "sweetalert2-react-content";
+// import { error } from "@/lib/swal";
+// import { Label } from "@/components/ui/label";
+// import { format } from "date-fns";
+// import useTableColumns from "./columns";
+
+// const TableImage = () => {
+//   const router = useRouter();
+//   const searchParams = useSearchParams();
+
+//   const params = useParams();
+//   const locale = params?.locale;
+//   const MySwal = withReactContent(Swal);
+//   const [dataTable, setDataTable] = React.useState<any[]>([]);
+//   const [totalData, setTotalData] = 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 [showData, setShowData] = React.useState("10");
+//   const [pagination, setPagination] = React.useState<PaginationState>({
+//     pageIndex: 0,
+//     pageSize: Number(showData),
+//   });
+//   const [page, setPage] = React.useState(1);
+//   const [totalPage, setTotalPage] = React.useState(1);
+//   const [search, setSearch] = React.useState("");
+//   const userId = getCookiesDecrypt("uie");
+//   const userLevelId = getCookiesDecrypt("ulie");
+
+//   const [categories, setCategories] = React.useState<any[]>([]);
+//   const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
+//     []
+//   );
+
+//   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
+//   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
+//   const [startDate, setStartDate] = React.useState("");
+//   const [endDate, setEndDate] = React.useState("");
+//   const [filterByCreator, setFilterByCreator] = React.useState("");
+//   const [filterBySource, setFilterBySource] = React.useState("");
+//   const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
+
+//   const roleId = getCookiesDecrypt("urie");
+//   const columns = useTableColumns();
+//   const table = useReactTable({
+//     data: dataTable,
+//     columns,
+//     onSortingChange: setSorting,
+//     onColumnFiltersChange: setColumnFilters,
+//     getCoreRowModel: getCoreRowModel(),
+//     getPaginationRowModel: getPaginationRowModel(),
+//     getSortedRowModel: getSortedRowModel(),
+//     getFilteredRowModel: getFilteredRowModel(),
+//     onColumnVisibilityChange: setColumnVisibility,
+//     onRowSelectionChange: setRowSelection,
+//     onPaginationChange: setPagination,
+//     state: {
+//       sorting,
+//       columnFilters,
+//       columnVisibility,
+//       rowSelection,
+//       pagination,
+//     },
+//   });
+
+//   React.useEffect(() => {
+//     const pageFromUrl = searchParams?.get("page");
+//     if (pageFromUrl) {
+//       setPage(Number(pageFromUrl));
+//     }
+//   }, [searchParams]);
+
+//   React.useEffect(() => {
+//     fetchData();
+//     getCategories();
+//   }, [
+//     categoryFilter,
+//     statusFilter,
+//     page,
+//     showData,
+//     search,
+//     startDate,
+//     endDate,
+//   ]);
+
+//   async function getCategories() {
+//     const category = await listEnableCategory("1");
+//     const resCategory = category?.data?.data?.content;
+//     setCategories(resCategory || []);
+//   }
+
+//   // Fungsi menangani perubahan checkbox
+//   const handleCheckboxChange = (categoryId: number) => {
+//     setSelectedCategories(
+//       (prev: any) =>
+//         prev.includes(categoryId)
+//           ? prev.filter((id: any) => id !== categoryId)
+//           : [...prev, categoryId]
+//     );
+
+//     // Perbarui filter kategori
+//     setCategoryFilter((prev) => {
+//       const updatedCategories = prev.split(",").filter(Boolean).map(Number);
+
+//       const newCategories = updatedCategories.includes(categoryId)
+//         ? updatedCategories.filter((id) => id !== categoryId)
+//         : [...updatedCategories, categoryId];
+
+//       return newCategories.join(",");
+//     });
+//   };
+
+//   async function fetchData() {
+//     const formattedStartDate = startDate
+//       ? format(new Date(startDate), "yyyy-MM-dd")
+//       : "";
+//     const formattedEndDate = endDate
+//       ? format(new Date(endDate), "yyyy-MM-dd")
+//       : "";
+//     try {
+//       const isForSelf = Number(roleId) === 4;
+//       const res = await listDataImage(
+//         showData,
+//         page - 1,
+//         isForSelf,
+//         !isForSelf,
+//         categoryFilter,
+//         statusFilter,
+//         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
+//         filterByCreator,
+//         filterBySource,
+//         formattedStartDate,
+//         formattedEndDate,
+//         search,
+//         filterByCreatorGroup,
+//         locale == "en"
+//       );
+
+//       const data = res?.data?.data;
+//       const contentData = data?.content;
+//       contentData.forEach((item: any, index: number) => {
+//         item.no = (page - 1) * Number(showData) + index + 1;
+//       });
+
+//       setDataTable(contentData);
+//       setTotalData(data?.totalElements);
+//       setTotalPage(data?.totalPages);
+//     } catch (error) {
+//       console.error("Error fetching tasks:", error);
+//     }
+//   }
+
+//   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     setSearch(e.target.value);
+//     table.getColumn("judul")?.setFilterValue(e.target.value);
+//   };
+
+//   const handleSearchFilterBySource = (
+//     e: React.ChangeEvent<HTMLInputElement>
+//   ) => {
+//     const value = e.target.value;
+//     setFilterBySource(value);
+//     fetchData();
+//   };
+
+//   function handleStatusCheckboxChange(value: any) {
+//     setStatusFilter((prev: any) =>
+//       prev.includes(value)
+//         ? prev.filter((status: any) => status !== value)
+//         : [...prev, value]
+//     );
+//   }
+
+//   const handleSearchFilterByCreator = (
+//     e: React.ChangeEvent<HTMLInputElement>
+//   ) => {
+//     const value = e.target.value;
+//     setFilterByCreator(value);
+//     fetchData();
+//   };
+
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
+//         <div className="w-full md:w-[200px] lg:w-[200px] px-2">
+//           <InputGroup merged>
+//             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+//               <Search className=" h-4 w-4 dark:text-white" />
+//             </InputGroupText>
+//             <Input
+//               type="text"
+//               placeholder="Search Judul..."
+//               className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+//               value={search}
+//               onChange={handleSearch}
+//             />
+//           </InputGroup>
+//         </div>
+//         <div className="flex flex-row items-center gap-3">
+//           <div className="flex items-center py-4">
+//             <div className="mx-3">
+//               <DropdownMenu>
+//                 <DropdownMenuTrigger asChild>
+//                   <Button size="md" variant="outline">
+//                     {showData} Data
+//                   </Button>
+//                 </DropdownMenuTrigger>
+//                 <DropdownMenuContent className="w-56 text-sm">
+//                   <DropdownMenuRadioGroup
+//                     value={showData}
+//                     onValueChange={setShowData}
+//                   >
+//                     <DropdownMenuRadioItem value="10">
+//                       10 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="50">
+//                       50 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="100">
+//                       100 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="250">
+//                       250 Data
+//                     </DropdownMenuRadioItem>
+//                   </DropdownMenuRadioGroup>
+//                 </DropdownMenuContent>
+//               </DropdownMenu>
+//             </div>
+//             <DropdownMenu>
+//               <DropdownMenuTrigger asChild>
+//                 <Button variant="outline" className="ml-auto" size="md">
+//                   Filter <ChevronDown />
+//                 </Button>
+//               </DropdownMenuTrigger>
+//               <DropdownMenuContent
+//                 align="end"
+//                 className="w-64 h-[200px] overflow-y-auto"
+//               >
+//                 <div className="flex flex-row justify-between my-1 mx-1">
+//                   <p>Filter</p>
+//                   {/* <p
+//                     className="text-blue-600 cursor-pointer"
+//                     onClick={fetchData}
+//                   >
+//                     Simpan
+//                   </p> */}
+//                 </div>
+//                 <Label className="ml-2">Kategori</Label>
+//                 {categories.length > 0 ? (
+//                   categories.map((category) => (
+//                     <div
+//                       key={category.id}
+//                       className="flex items-center px-4 py-1"
+//                     >
+//                       <input
+//                         type="checkbox"
+//                         id={`category-${category.id}`}
+//                         className="mr-2"
+//                         checked={selectedCategories.includes(category.id)}
+//                         onChange={() => handleCheckboxChange(category.id)}
+//                       />
+//                       <label
+//                         htmlFor={`category-${category.id}`}
+//                         className="text-sm"
+//                       >
+//                         {category.name}
+//                       </label>
+//                     </div>
+//                   ))
+//                 ) : (
+//                   <p className="text-sm text-gray-500 px-4 py-2">
+//                     No categories found.
+//                   </p>
+//                 )}
+//                 <div className="mx-2 my-1">
+//                   <Label>Tanggal Awal</Label>
+//                   <Input
+//                     type="date"
+//                     value={startDate}
+//                     onChange={(e) => setStartDate(e.target.value)}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Tanggal Akhir</Label>
+//                   <Input
+//                     type="date"
+//                     value={endDate}
+//                     onChange={(e) => setEndDate(e.target.value)}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Kreator</Label>
+//                   <Input
+//                     placeholder="Filter Status..."
+//                     value={filterByCreator}
+//                     onChange={handleSearchFilterByCreator}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Sumber</Label>
+//                   <Input
+//                     placeholder="Filter Status..."
+//                     value={filterBySource}
+//                     onChange={handleSearchFilterBySource}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+
+//                 <Label className="ml-2 mt-2">Status</Label>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-2"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(1)}
+//                     onChange={() => handleStatusCheckboxChange(1)}
+//                   />
+//                   <label htmlFor="status-2" className="text-sm">
+//                     Menunggu Review
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-2"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(2)}
+//                     onChange={() => handleStatusCheckboxChange(2)}
+//                   />
+//                   <label htmlFor="status-2" className="text-sm">
+//                     Diterima
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-3"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(3)}
+//                     onChange={() => handleStatusCheckboxChange(3)}
+//                   />
+//                   <label htmlFor="status-3" className="text-sm">
+//                     Minta Update
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-4"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(4)}
+//                     onChange={() => handleStatusCheckboxChange(4)}
+//                   />
+//                   <label htmlFor="status-4" className="text-sm">
+//                     Ditolak
+//                   </label>
+//                 </div>
+//               </DropdownMenuContent>
+//             </DropdownMenu>
+//           </div>
+//           <div className="flex items-center py-4">
+//             <DropdownMenu>
+//               <DropdownMenuTrigger asChild>
+//                 <Button variant="outline" className="ml-auto" size="md">
+//                   Columns <ChevronDown />
+//                 </Button>
+//               </DropdownMenuTrigger>
+//               <DropdownMenuContent align="end">
+//                 {table
+//                   .getAllColumns()
+//                   .filter((column) => column.getCanHide())
+//                   .map((column) => {
+//                     return (
+//                       <DropdownMenuCheckboxItem
+//                         key={column.id}
+//                         className="capitalize"
+//                         checked={column.getIsVisible()}
+//                         onCheckedChange={(value) =>
+//                           column.toggleVisibility(!!value)
+//                         }
+//                       >
+//                         {column.id}
+//                       </DropdownMenuCheckboxItem>
+//                     );
+//                   })}
+//               </DropdownMenuContent>
+//             </DropdownMenu>
+//           </div>
+//         </div>
+//       </div>
+//       <Table className="overflow-hidden mt-3">
+//         <TableHeader>
+//           {table.getHeaderGroups().map((headerGroup) => (
+//             <TableRow key={headerGroup.id} className="bg-default-200">
+//               {headerGroup.headers.map((header) => (
+//                 <TableHead key={header.id}>
+//                   {header.isPlaceholder
+//                     ? null
+//                     : flexRender(
+//                         header.column.columnDef.header,
+//                         header.getContext()
+//                       )}
+//                 </TableHead>
+//               ))}
+//             </TableRow>
+//           ))}
+//         </TableHeader>
+//         <TableBody>
+//           {table.getRowModel().rows?.length ? (
+//             table.getRowModel().rows.map((row) => (
+//               <TableRow
+//                 key={row.id}
+//                 data-state={row.getIsSelected() && "selected"}
+//                 className="h-[75px]"
+//               >
+//                 {row.getVisibleCells().map((cell) => (
+//                   <TableCell key={cell.id}>
+//                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
+//                   </TableCell>
+//                 ))}
+//               </TableRow>
+//             ))
+//           ) : (
+//             <TableRow>
+//               <TableCell colSpan={columns.length} className="h-24 text-center">
+//                 No results.
+//               </TableCell>
+//             </TableRow>
+//           )}
+//         </TableBody>
+//       </Table>
+//       <TablePagination
+//         table={table}
+//         totalData={totalData}
+//         totalPage={totalPage}
+//       />
+//     </div>
+//   );
+// };
+
+// export default TableImage;
diff --git a/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx b/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
index eea434ee..a39972f2 100644
--- a/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
+++ b/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import {
-  ColumnDef,
   ColumnFiltersState,
   PaginationState,
   SortingState,
@@ -15,7 +14,6 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { Button } from "@/components/ui/button";
-
 import {
   Table,
   TableBody,
@@ -24,42 +22,23 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  Eye,
-  MoreVertical,
-  Search,
-  SquarePen,
-  Trash2,
-  TrendingDown,
-  TrendingUp,
-} from "lucide-react";
-import { cn, getCookiesDecrypt } from "@/lib/utils";
+import { ChevronDown, Search } from "lucide-react";
+import { getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/service/blog/blog";
-import { ticketingPagination } from "@/service/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
 import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
-import columns from "./columns";
-import {
-  listDataImage,
-  listDataTeks,
-  listEnableCategory,
-} from "@/service/content/content";
+import { listDataTeks, listEnableCategory } from "@/service/content/content";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 import { Label } from "@/components/ui/label";
 import { format } from "date-fns";
 import useTableColumns from "./columns";
@@ -67,6 +46,8 @@ import useTableColumns from "./columns";
 const TableTeks = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const MySwal = withReactContent(Swal);
+
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -77,16 +58,11 @@ const TableTeks = () => {
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: Number(showData),
-  });
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
-  const [limit, setLimit] = React.useState(10);
-  const [search, setSearch] = React.useState<string>("");
-  const userId = getCookiesDecrypt("uie");
-  const userLevelId = getCookiesDecrypt("ulie");
+  const [search, setSearch] = React.useState("");
+  const searchTimeout = React.useRef<NodeJS.Timeout | null>(null);
+
   const [categories, setCategories] = React.useState<any[]>([]);
   const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
     []
@@ -99,8 +75,10 @@ const TableTeks = () => {
   const [filterBySource, setFilterBySource] = React.useState("");
   const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
 
+  const userLevelId = getCookiesDecrypt("ulie");
   const roleId = getCookiesDecrypt("urie");
   const columns = useTableColumns();
+
   const table = useReactTable({
     data: dataTable,
     columns,
@@ -112,35 +90,23 @@ const TableTeks = () => {
     getFilteredRowModel: getFilteredRowModel(),
     onColumnVisibilityChange: setColumnVisibility,
     onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
     state: {
       sorting,
       columnFilters,
       columnVisibility,
       rowSelection,
-      pagination,
     },
   });
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
-    if (pageFromUrl) {
-      setPage(Number(pageFromUrl));
-    }
+    if (pageFromUrl) setPage(Number(pageFromUrl));
   }, [searchParams]);
 
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [
-    categoryFilter,
-    statusFilter,
-    page,
-    showData,
-    search,
-    startDate,
-    endDate,
-  ]);
+  }, [categoryFilter, statusFilter, page, showData, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("3");
@@ -148,35 +114,40 @@ const TableTeks = () => {
     setCategories(resCategory || []);
   }
 
-  // Fungsi menangani perubahan checkbox
   const handleCheckboxChange = (categoryId: number) => {
-    setSelectedCategories(
-      (prev: any) =>
-        prev.includes(categoryId)
-          ? prev.filter((id: any) => id !== categoryId) // Hapus jika sudah dipilih
-          : [...prev, categoryId] // Tambahkan jika belum dipilih
+    setSelectedCategories((prev) =>
+      prev.includes(categoryId)
+        ? prev.filter((id) => id !== categoryId)
+        : [...prev, categoryId]
     );
 
-    // Perbarui filter kategori
     setCategoryFilter((prev) => {
-      const updatedCategories = prev.split(",").filter(Boolean).map(Number);
-
-      const newCategories = updatedCategories.includes(categoryId)
-        ? updatedCategories.filter((id) => id !== categoryId)
-        : [...updatedCategories, categoryId];
-
-      return newCategories.join(",");
+      const updated = prev.split(",").filter(Boolean).map(Number);
+      const newList = updated.includes(categoryId)
+        ? updated.filter((id) => id !== categoryId)
+        : [...updated, categoryId];
+      return newList.join(",");
     });
   };
 
-  async function fetchData() {
+  async function fetchData(showLoader = false, customSearch?: string) {
     const formattedStartDate = startDate
       ? format(new Date(startDate), "yyyy-MM-dd")
       : "";
     const formattedEndDate = endDate
       ? format(new Date(endDate), "yyyy-MM-dd")
       : "";
+
     try {
+      if (showLoader) {
+        MySwal.fire({
+          title: "Memuat data...",
+          html: "Mohon tunggu sebentar",
+          allowOutsideClick: false,
+          didOpen: () => MySwal.showLoading(),
+        });
+      }
+
       const isForSelf = Number(roleId) === 4;
       const res = await listDataTeks(
         showData,
@@ -188,37 +159,46 @@ const TableTeks = () => {
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
-        formattedStartDate, // Pastikan format sesuai
-        formattedEndDate, // Pastikan format sesuai
-        search,
+        formattedStartDate,
+        formattedEndDate,
+        customSearch ?? search,
         filterByCreatorGroup
       );
 
       const data = res?.data?.data;
-      const contentData = data?.content;
+      const contentData = data?.content || [];
       contentData.forEach((item: any, index: number) => {
         item.no = (page - 1) * Number(showData) + index + 1;
       });
 
       setDataTable(contentData);
-      setTotalData(data?.totalElements);
-      setTotalPage(data?.totalPages);
+      setTotalData(data?.totalElements || 0);
+      setTotalPage(data?.totalPages || 1);
     } catch (error) {
-      console.error("Error fetching tasks:", error);
+      console.error("Error fetching data:", error);
+    } finally {
+      MySwal.close();
     }
   }
 
+  // ✅ Debounced search + SweetAlert besar
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value); // Perbarui state search
-    table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+    const value = e.target.value;
+    setSearch(value);
+
+    if (searchTimeout.current) clearTimeout(searchTimeout.current);
+
+    searchTimeout.current = setTimeout(() => {
+      fetchData(true, value);
+    }, 500);
   };
 
   const handleSearchFilterBySource = (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
     const value = e.target.value;
-    setFilterBySource(value); // Perbarui state filter
-    fetchData(); // Panggil ulang data dengan filter baru
+    setFilterBySource(value);
+    fetchData(true);
   };
 
   function handleStatusCheckboxChange(value: any) {
@@ -233,222 +213,29 @@ const TableTeks = () => {
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
     const value = e.target.value;
-    setFilterByCreator(value); // Perbarui state filter
-    fetchData(); // Panggil ulang data dengan filter baru
+    setFilterByCreator(value);
+    fetchData(true);
   };
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
-        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
+      <div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
+        <div className="w-full md:w-[250px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
-              <Search className=" h-4 w-4 dark:text-white" />
+              <Search className="h-4 w-4 dark:text-white" />
             </InputGroupText>
             <Input
               type="text"
               placeholder="Search Judul..."
-              className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+              className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
               value={search}
               onChange={handleSearch}
             />
           </InputGroup>
         </div>
-        <div className="flex flex-row items-center gap-3">
-          <div className="flex items-center py-4">
-            <div className="mx-3">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button size="md" variant="outline">
-                    {showData} Data
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      250 Data
-                    </DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="ml-auto" size="md">
-                  Filter <ChevronDown />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[200px] overflow-y-auto"
-              >
-                <div className="flex flex-row justify-between my-1 mx-1">
-                  <p>Filter</p>
-                  {/* <p
-                    className="text-blue-600 cursor-pointer"
-                    onClick={fetchData}
-                  >
-                    Simpan
-                  </p> */}
-                </div>
-                <Label className="ml-2">Kategori</Label>
-                {categories.length > 0 ? (
-                  categories.map((category) => (
-                    <div
-                      key={category.id}
-                      className="flex items-center px-4 py-1"
-                    >
-                      <input
-                        type="checkbox"
-                        id={`category-${category.id}`}
-                        className="mr-2"
-                        checked={selectedCategories.includes(category.id)}
-                        onChange={() => handleCheckboxChange(category.id)}
-                      />
-                      <label
-                        htmlFor={`category-${category.id}`}
-                        className="text-sm"
-                      >
-                        {category.name}
-                      </label>
-                    </div>
-                  ))
-                ) : (
-                  <p className="text-sm text-gray-500 px-4 py-2">
-                    No categories found.
-                  </p>
-                )}
-                <div className="mx-2 my-1">
-                  <Label>Tanggal Awal</Label>
-                  <Input
-                    type="date"
-                    value={startDate}
-                    onChange={(e) => setStartDate(e.target.value)}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Tanggal Akhir</Label>
-                  <Input
-                    type="date"
-                    value={endDate}
-                    onChange={(e) => setEndDate(e.target.value)}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Kreator</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={filterByCreator}
-                    onChange={handleSearchFilterByCreator}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Sumber</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={filterBySource}
-                    onChange={handleSearchFilterBySource}
-                    className="max-w-sm"
-                  />
-                </div>
-
-                <Label className="ml-2 mt-2">Status</Label>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-2"
-                    className="mr-2"
-                    checked={statusFilter.includes(1)}
-                    onChange={() => handleStatusCheckboxChange(1)}
-                  />
-                  <label htmlFor="status-2" className="text-sm">
-                    Menunggu Review
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-2"
-                    className="mr-2"
-                    checked={statusFilter.includes(2)}
-                    onChange={() => handleStatusCheckboxChange(2)}
-                  />
-                  <label htmlFor="status-2" className="text-sm">
-                    Diterima
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-3"
-                    className="mr-2"
-                    checked={statusFilter.includes(3)}
-                    onChange={() => handleStatusCheckboxChange(3)}
-                  />
-                  <label htmlFor="status-3" className="text-sm">
-                    Minta Update
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-4"
-                    className="mr-2"
-                    checked={statusFilter.includes(4)}
-                    onChange={() => handleStatusCheckboxChange(4)}
-                  />
-                  <label htmlFor="status-4" className="text-sm">
-                    Ditolak
-                  </label>
-                </div>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-          <div className="flex items-center py-4">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="ml-auto" size="md">
-                  Columns <ChevronDown />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                {table
-                  .getAllColumns()
-                  .filter((column) => column.getCanHide())
-                  .map((column) => {
-                    return (
-                      <DropdownMenuCheckboxItem
-                        key={column.id}
-                        className="capitalize"
-                        checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
-                      >
-                        {column.id}
-                      </DropdownMenuCheckboxItem>
-                    );
-                  })}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
       </div>
+
       <Table className="overflow-hidden mt-3">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -466,6 +253,7 @@ const TableTeks = () => {
             </TableRow>
           ))}
         </TableHeader>
+
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
@@ -490,6 +278,7 @@ const TableTeks = () => {
           )}
         </TableBody>
       </Table>
+
       <TablePagination
         table={table}
         totalData={totalData}
@@ -500,3 +289,496 @@ const TableTeks = () => {
 };
 
 export default TableTeks;
+
+// "use client";
+
+// import * as React from "react";
+// import {
+//   ColumnDef,
+//   ColumnFiltersState,
+//   PaginationState,
+//   SortingState,
+//   VisibilityState,
+//   flexRender,
+//   getCoreRowModel,
+//   getFilteredRowModel,
+//   getPaginationRowModel,
+//   getSortedRowModel,
+//   useReactTable,
+// } from "@tanstack/react-table";
+// import { Button } from "@/components/ui/button";
+// import {
+//   Table,
+//   TableBody,
+//   TableCell,
+//   TableHead,
+//   TableHeader,
+//   TableRow,
+// } from "@/components/ui/table";
+// import {
+//   ChevronDown,
+//   Search,
+// } from "lucide-react";
+// import { cn, getCookiesDecrypt } from "@/lib/utils";
+// import {
+//   DropdownMenu,
+//   DropdownMenuCheckboxItem,
+//   DropdownMenuContent,
+//   DropdownMenuItem,
+//   DropdownMenuRadioGroup,
+//   DropdownMenuRadioItem,
+//   DropdownMenuTrigger,
+// } from "@/components/ui/dropdown-menu";
+// import { Input } from "@/components/ui/input";
+// import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+// import { paginationBlog } from "@/service/blog/blog";
+// import { ticketingPagination } from "@/service/ticketing/ticketing";
+// import { Badge } from "@/components/ui/badge";
+// import { useRouter, useSearchParams } from "next/navigation";
+// import TablePagination from "@/components/table/table-pagination";
+// import columns from "./columns";
+// import {
+//   listDataImage,
+//   listDataTeks,
+//   listEnableCategory,
+// } from "@/service/content/content";
+// import { Label } from "@/components/ui/label";
+// import { format } from "date-fns";
+// import useTableColumns from "./columns";
+
+// const TableTeks = () => {
+//   const router = useRouter();
+//   const searchParams = useSearchParams();
+//   const [dataTable, setDataTable] = React.useState<any[]>([]);
+//   const [totalData, setTotalData] = 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 [showData, setShowData] = React.useState("10");
+//   const [pagination, setPagination] = React.useState<PaginationState>({
+//     pageIndex: 0,
+//     pageSize: Number(showData),
+//   });
+//   const [page, setPage] = React.useState(1);
+//   const [totalPage, setTotalPage] = React.useState(1);
+//   const [limit, setLimit] = React.useState(10);
+//   const [search, setSearch] = React.useState<string>("");
+//   const userId = getCookiesDecrypt("uie");
+//   const userLevelId = getCookiesDecrypt("ulie");
+//   const [categories, setCategories] = React.useState<any[]>([]);
+//   const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
+//     []
+//   );
+//   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
+//   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
+//   const [startDate, setStartDate] = React.useState("");
+//   const [endDate, setEndDate] = React.useState("");
+//   const [filterByCreator, setFilterByCreator] = React.useState("");
+//   const [filterBySource, setFilterBySource] = React.useState("");
+//   const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
+
+//   const roleId = getCookiesDecrypt("urie");
+//   const columns = useTableColumns();
+//   const table = useReactTable({
+//     data: dataTable,
+//     columns,
+//     onSortingChange: setSorting,
+//     onColumnFiltersChange: setColumnFilters,
+//     getCoreRowModel: getCoreRowModel(),
+//     getPaginationRowModel: getPaginationRowModel(),
+//     getSortedRowModel: getSortedRowModel(),
+//     getFilteredRowModel: getFilteredRowModel(),
+//     onColumnVisibilityChange: setColumnVisibility,
+//     onRowSelectionChange: setRowSelection,
+//     onPaginationChange: setPagination,
+//     state: {
+//       sorting,
+//       columnFilters,
+//       columnVisibility,
+//       rowSelection,
+//       pagination,
+//     },
+//   });
+
+//   React.useEffect(() => {
+//     const pageFromUrl = searchParams?.get("page");
+//     if (pageFromUrl) {
+//       setPage(Number(pageFromUrl));
+//     }
+//   }, [searchParams]);
+
+//   React.useEffect(() => {
+//     fetchData();
+//     getCategories();
+//   }, [
+//     categoryFilter,
+//     statusFilter,
+//     page,
+//     showData,
+//     search,
+//     startDate,
+//     endDate,
+//   ]);
+
+//   async function getCategories() {
+//     const category = await listEnableCategory("3");
+//     const resCategory = category?.data?.data?.content;
+//     setCategories(resCategory || []);
+//   }
+
+//   // Fungsi menangani perubahan checkbox
+//   const handleCheckboxChange = (categoryId: number) => {
+//     setSelectedCategories(
+//       (prev: any) =>
+//         prev.includes(categoryId)
+//           ? prev.filter((id: any) => id !== categoryId) // Hapus jika sudah dipilih
+//           : [...prev, categoryId] // Tambahkan jika belum dipilih
+//     );
+
+//     // Perbarui filter kategori
+//     setCategoryFilter((prev) => {
+//       const updatedCategories = prev.split(",").filter(Boolean).map(Number);
+
+//       const newCategories = updatedCategories.includes(categoryId)
+//         ? updatedCategories.filter((id) => id !== categoryId)
+//         : [...updatedCategories, categoryId];
+
+//       return newCategories.join(",");
+//     });
+//   };
+
+//   async function fetchData() {
+//     const formattedStartDate = startDate
+//       ? format(new Date(startDate), "yyyy-MM-dd")
+//       : "";
+//     const formattedEndDate = endDate
+//       ? format(new Date(endDate), "yyyy-MM-dd")
+//       : "";
+//     try {
+//       const isForSelf = Number(roleId) === 4;
+//       const res = await listDataTeks(
+//         showData,
+//         page - 1,
+//         isForSelf,
+//         !isForSelf,
+//         categoryFilter,
+//         statusFilter,
+//         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
+//         filterByCreator,
+//         filterBySource,
+//         formattedStartDate, // Pastikan format sesuai
+//         formattedEndDate, // Pastikan format sesuai
+//         search,
+//         filterByCreatorGroup
+//       );
+
+//       const data = res?.data?.data;
+//       const contentData = data?.content;
+//       contentData.forEach((item: any, index: number) => {
+//         item.no = (page - 1) * Number(showData) + index + 1;
+//       });
+
+//       setDataTable(contentData);
+//       setTotalData(data?.totalElements);
+//       setTotalPage(data?.totalPages);
+//     } catch (error) {
+//       console.error("Error fetching tasks:", error);
+//     }
+//   }
+
+//   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     setSearch(e.target.value); // Perbarui state search
+//     table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+//   };
+
+//   const handleSearchFilterBySource = (
+//     e: React.ChangeEvent<HTMLInputElement>
+//   ) => {
+//     const value = e.target.value;
+//     setFilterBySource(value); // Perbarui state filter
+//     fetchData(); // Panggil ulang data dengan filter baru
+//   };
+
+//   function handleStatusCheckboxChange(value: any) {
+//     setStatusFilter((prev: any) =>
+//       prev.includes(value)
+//         ? prev.filter((status: any) => status !== value)
+//         : [...prev, value]
+//     );
+//   }
+
+//   const handleSearchFilterByCreator = (
+//     e: React.ChangeEvent<HTMLInputElement>
+//   ) => {
+//     const value = e.target.value;
+//     setFilterByCreator(value); // Perbarui state filter
+//     fetchData(); // Panggil ulang data dengan filter baru
+//   };
+
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
+//         <div className="w-full md:w-[200px] lg:w-[200px] px-2">
+//           <InputGroup merged>
+//             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+//               <Search className=" h-4 w-4 dark:text-white" />
+//             </InputGroupText>
+//             <Input
+//               type="text"
+//               placeholder="Search Judul..."
+//               className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+//               value={search}
+//               onChange={handleSearch}
+//             />
+//           </InputGroup>
+//         </div>
+//         <div className="flex flex-row items-center gap-3">
+//           <div className="flex items-center py-4">
+//             <div className="mx-3">
+//               <DropdownMenu>
+//                 <DropdownMenuTrigger asChild>
+//                   <Button size="md" variant="outline">
+//                     {showData} Data
+//                   </Button>
+//                 </DropdownMenuTrigger>
+//                 <DropdownMenuContent className="w-56 text-sm">
+//                   <DropdownMenuRadioGroup
+//                     value={showData}
+//                     onValueChange={setShowData}
+//                   >
+//                     <DropdownMenuRadioItem value="10">
+//                       10 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="50">
+//                       50 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="100">
+//                       100 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="250">
+//                       250 Data
+//                     </DropdownMenuRadioItem>
+//                   </DropdownMenuRadioGroup>
+//                 </DropdownMenuContent>
+//               </DropdownMenu>
+//             </div>
+//             <DropdownMenu>
+//               <DropdownMenuTrigger asChild>
+//                 <Button variant="outline" className="ml-auto" size="md">
+//                   Filter <ChevronDown />
+//                 </Button>
+//               </DropdownMenuTrigger>
+//               <DropdownMenuContent
+//                 align="end"
+//                 className="w-64 h-[200px] overflow-y-auto"
+//               >
+//                 <div className="flex flex-row justify-between my-1 mx-1">
+//                   <p>Filter</p>
+//                   {/* <p
+//                     className="text-blue-600 cursor-pointer"
+//                     onClick={fetchData}
+//                   >
+//                     Simpan
+//                   </p> */}
+//                 </div>
+//                 <Label className="ml-2">Kategori</Label>
+//                 {categories.length > 0 ? (
+//                   categories.map((category) => (
+//                     <div
+//                       key={category.id}
+//                       className="flex items-center px-4 py-1"
+//                     >
+//                       <input
+//                         type="checkbox"
+//                         id={`category-${category.id}`}
+//                         className="mr-2"
+//                         checked={selectedCategories.includes(category.id)}
+//                         onChange={() => handleCheckboxChange(category.id)}
+//                       />
+//                       <label
+//                         htmlFor={`category-${category.id}`}
+//                         className="text-sm"
+//                       >
+//                         {category.name}
+//                       </label>
+//                     </div>
+//                   ))
+//                 ) : (
+//                   <p className="text-sm text-gray-500 px-4 py-2">
+//                     No categories found.
+//                   </p>
+//                 )}
+//                 <div className="mx-2 my-1">
+//                   <Label>Tanggal Awal</Label>
+//                   <Input
+//                     type="date"
+//                     value={startDate}
+//                     onChange={(e) => setStartDate(e.target.value)}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Tanggal Akhir</Label>
+//                   <Input
+//                     type="date"
+//                     value={endDate}
+//                     onChange={(e) => setEndDate(e.target.value)}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Kreator</Label>
+//                   <Input
+//                     placeholder="Filter Status..."
+//                     value={filterByCreator}
+//                     onChange={handleSearchFilterByCreator}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Sumber</Label>
+//                   <Input
+//                     placeholder="Filter Status..."
+//                     value={filterBySource}
+//                     onChange={handleSearchFilterBySource}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+
+//                 <Label className="ml-2 mt-2">Status</Label>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-2"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(1)}
+//                     onChange={() => handleStatusCheckboxChange(1)}
+//                   />
+//                   <label htmlFor="status-2" className="text-sm">
+//                     Menunggu Review
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-2"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(2)}
+//                     onChange={() => handleStatusCheckboxChange(2)}
+//                   />
+//                   <label htmlFor="status-2" className="text-sm">
+//                     Diterima
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-3"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(3)}
+//                     onChange={() => handleStatusCheckboxChange(3)}
+//                   />
+//                   <label htmlFor="status-3" className="text-sm">
+//                     Minta Update
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-4"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(4)}
+//                     onChange={() => handleStatusCheckboxChange(4)}
+//                   />
+//                   <label htmlFor="status-4" className="text-sm">
+//                     Ditolak
+//                   </label>
+//                 </div>
+//               </DropdownMenuContent>
+//             </DropdownMenu>
+//           </div>
+//           <div className="flex items-center py-4">
+//             <DropdownMenu>
+//               <DropdownMenuTrigger asChild>
+//                 <Button variant="outline" className="ml-auto" size="md">
+//                   Columns <ChevronDown />
+//                 </Button>
+//               </DropdownMenuTrigger>
+//               <DropdownMenuContent align="end">
+//                 {table
+//                   .getAllColumns()
+//                   .filter((column) => column.getCanHide())
+//                   .map((column) => {
+//                     return (
+//                       <DropdownMenuCheckboxItem
+//                         key={column.id}
+//                         className="capitalize"
+//                         checked={column.getIsVisible()}
+//                         onCheckedChange={(value) =>
+//                           column.toggleVisibility(!!value)
+//                         }
+//                       >
+//                         {column.id}
+//                       </DropdownMenuCheckboxItem>
+//                     );
+//                   })}
+//               </DropdownMenuContent>
+//             </DropdownMenu>
+//           </div>
+//         </div>
+//       </div>
+//       <Table className="overflow-hidden mt-3">
+//         <TableHeader>
+//           {table.getHeaderGroups().map((headerGroup) => (
+//             <TableRow key={headerGroup.id} className="bg-default-200">
+//               {headerGroup.headers.map((header) => (
+//                 <TableHead key={header.id}>
+//                   {header.isPlaceholder
+//                     ? null
+//                     : flexRender(
+//                         header.column.columnDef.header,
+//                         header.getContext()
+//                       )}
+//                 </TableHead>
+//               ))}
+//             </TableRow>
+//           ))}
+//         </TableHeader>
+//         <TableBody>
+//           {table.getRowModel().rows?.length ? (
+//             table.getRowModel().rows.map((row) => (
+//               <TableRow
+//                 key={row.id}
+//                 data-state={row.getIsSelected() && "selected"}
+//                 className="h-[75px]"
+//               >
+//                 {row.getVisibleCells().map((cell) => (
+//                   <TableCell key={cell.id}>
+//                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
+//                   </TableCell>
+//                 ))}
+//               </TableRow>
+//             ))
+//           ) : (
+//             <TableRow>
+//               <TableCell colSpan={columns.length} className="h-24 text-center">
+//                 No results.
+//               </TableCell>
+//             </TableRow>
+//           )}
+//         </TableBody>
+//       </Table>
+//       <TablePagination
+//         table={table}
+//         totalData={totalData}
+//         totalPage={totalPage}
+//       />
+//     </div>
+//   );
+// };
+
+// export default TableTeks;
diff --git a/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx b/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
index dd4bd302..92ae45e9 100644
--- a/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
+++ b/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import {
-  ColumnDef,
   ColumnFiltersState,
   PaginationState,
   SortingState,
@@ -14,8 +13,6 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
 import {
   Table,
   TableBody,
@@ -24,50 +21,23 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  Eye,
-  MoreVertical,
-  Search,
-  SquarePen,
-  Trash2,
-  TrendingDown,
-  TrendingUp,
-} from "lucide-react";
-import { cn, getCookiesDecrypt } from "@/lib/utils";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { ChevronDown, Search } from "lucide-react";
+import { getCookiesDecrypt } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/service/blog/blog";
-import { ticketingPagination } from "@/service/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
-import columns from "./columns";
-import {
-  listDataImage,
-  listDataVideo,
-  listEnableCategory,
-} from "@/service/content/content";
-import { Label } from "@/components/ui/label";
+import { listDataVideo, listEnableCategory } from "@/service/content/content";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 import { format } from "date-fns";
 import useTableColumns from "./columns";
+import { useRouter } from "@/i18n/routing";
+import { useSearchParams } from "next/navigation";
 
 const TableVideo = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-
+  const MySwal = withReactContent(Swal);
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -78,17 +48,10 @@ const TableVideo = () => {
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: Number(showData),
-  });
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
-  const [limit, setLimit] = React.useState(10);
-  const [search, setSearch] = React.useState<string>("");
-  const userId = getCookiesDecrypt("uie");
-  const userLevelId = getCookiesDecrypt("ulie");
-
+  const [search, setSearch] = React.useState("");
+  const searchTimeout = React.useRef<NodeJS.Timeout | null>(null);
   const [categories, setCategories] = React.useState<any[]>([]);
   const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
     []
@@ -100,9 +63,10 @@ const TableVideo = () => {
   const [filterByCreator, setFilterByCreator] = React.useState("");
   const [filterBySource, setFilterBySource] = React.useState("");
   const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
-
+  const userLevelId = getCookiesDecrypt("ulie");
   const roleId = getCookiesDecrypt("urie");
   const columns = useTableColumns();
+
   const table = useReactTable({
     data: dataTable,
     columns,
@@ -114,36 +78,23 @@ const TableVideo = () => {
     getFilteredRowModel: getFilteredRowModel(),
     onColumnVisibilityChange: setColumnVisibility,
     onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
     state: {
       sorting,
       columnFilters,
       columnVisibility,
       rowSelection,
-      pagination,
     },
   });
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
-    if (pageFromUrl) {
-      setPage(Number(pageFromUrl));
-    }
+    if (pageFromUrl) setPage(Number(pageFromUrl));
   }, [searchParams]);
 
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [
-    categoryFilter,
-    statusFilter,
-    page,
-    showData,
-    ,
-    search,
-    startDate,
-    endDate,
-  ]);
+  }, [categoryFilter, statusFilter, page, showData, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("2");
@@ -151,35 +102,40 @@ const TableVideo = () => {
     setCategories(resCategory || []);
   }
 
-  // Fungsi menangani perubahan checkbox
   const handleCheckboxChange = (categoryId: number) => {
-    setSelectedCategories(
-      (prev: any) =>
-        prev.includes(categoryId)
-          ? prev.filter((id: any) => id !== categoryId) // Hapus jika sudah dipilih
-          : [...prev, categoryId] // Tambahkan jika belum dipilih
+    setSelectedCategories((prev) =>
+      prev.includes(categoryId)
+        ? prev.filter((id) => id !== categoryId)
+        : [...prev, categoryId]
     );
 
-    // Perbarui filter kategori
     setCategoryFilter((prev) => {
-      const updatedCategories = prev.split(",").filter(Boolean).map(Number);
-
-      const newCategories = updatedCategories.includes(categoryId)
-        ? updatedCategories.filter((id) => id !== categoryId)
-        : [...updatedCategories, categoryId];
-
-      return newCategories.join(",");
+      const updated = prev.split(",").filter(Boolean).map(Number);
+      const newList = updated.includes(categoryId)
+        ? updated.filter((id) => id !== categoryId)
+        : [...updated, categoryId];
+      return newList.join(",");
     });
   };
 
-  async function fetchData() {
+  async function fetchData(showLoader = false, customSearch?: string) {
     const formattedStartDate = startDate
       ? format(new Date(startDate), "yyyy-MM-dd")
       : "";
     const formattedEndDate = endDate
       ? format(new Date(endDate), "yyyy-MM-dd")
       : "";
+
     try {
+      if (showLoader) {
+        MySwal.fire({
+          title: "Memuat data...",
+          html: "Mohon tunggu sebentar",
+          allowOutsideClick: false,
+          didOpen: () => MySwal.showLoading(),
+        });
+      }
+
       const isForSelf = Number(roleId) === 4;
       const res = await listDataVideo(
         showData,
@@ -191,37 +147,46 @@ const TableVideo = () => {
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
-        formattedStartDate, // Pastikan format sesuai
-        formattedEndDate, // Pastikan format sesuai
-        search,
+        formattedStartDate,
+        formattedEndDate,
+        customSearch ?? search,
         filterByCreatorGroup
       );
 
       const data = res?.data?.data;
-      const contentData = data?.content;
+      const contentData = data?.content || [];
       contentData.forEach((item: any, index: number) => {
         item.no = (page - 1) * Number(showData) + index + 1;
       });
 
       setDataTable(contentData);
-      setTotalData(data?.totalElements);
-      setTotalPage(data?.totalPages);
+      setTotalData(data?.totalElements || 0);
+      setTotalPage(data?.totalPages || 1);
     } catch (error) {
-      console.error("Error fetching tasks:", error);
+      console.error("Error fetching data:", error);
+    } finally {
+      MySwal.close();
     }
   }
 
+  // ✅ Debounced search + SweetAlert besar
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value); // Perbarui state search
-    table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+    const value = e.target.value;
+    setSearch(value);
+
+    if (searchTimeout.current) clearTimeout(searchTimeout.current);
+
+    searchTimeout.current = setTimeout(() => {
+      fetchData(true, value);
+    }, 500);
   };
 
   const handleSearchFilterBySource = (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
     const value = e.target.value;
-    setFilterBySource(value); // Perbarui state filter
-    fetchData(); // Panggil ulang data dengan filter baru
+    setFilterBySource(value);
+    fetchData(true);
   };
 
   function handleStatusCheckboxChange(value: any) {
@@ -236,223 +201,29 @@ const TableVideo = () => {
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
     const value = e.target.value;
-    setFilterByCreator(value); // Perbarui state filter
-    fetchData(); // Panggil ulang data dengan filter baru
+    setFilterByCreator(value);
+    fetchData(true);
   };
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
-        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
+      <div className="flex flex-col md:flex-row md:justify-between items-center md:px-5">
+        <div className="w-full md:w-[250px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
-              <Search className=" h-4 w-4 dark:text-white" />
+              <Search className="h-4 w-4 dark:text-white" />
             </InputGroupText>
             <Input
               type="text"
               placeholder="Search Judul..."
-              className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+              className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
               value={search}
               onChange={handleSearch}
             />
           </InputGroup>
         </div>
-
-        <div className="flex flex-row items-center gap-3">
-          <div className="flex items-center py-4">
-            <div className="mx-3">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button size="md" variant="outline">
-                    {showData} Data
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      250 Data
-                    </DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="ml-auto" size="md">
-                  Filter <ChevronDown />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[200px] overflow-y-auto"
-              >
-                <div className="flex flex-row justify-between my-1 mx-1">
-                  <p>Filter</p>
-                  {/* <p
-                    className="text-blue-600 cursor-pointer"
-                    onClick={fetchData}
-                  >
-                    Simpan
-                  </p> */}
-                </div>
-                <Label className="ml-2">Kategori</Label>
-                {categories.length > 0 ? (
-                  categories.map((category) => (
-                    <div
-                      key={category.id}
-                      className="flex items-center px-4 py-1"
-                    >
-                      <input
-                        type="checkbox"
-                        id={`category-${category.id}`}
-                        className="mr-2"
-                        checked={selectedCategories.includes(category.id)}
-                        onChange={() => handleCheckboxChange(category.id)}
-                      />
-                      <label
-                        htmlFor={`category-${category.id}`}
-                        className="text-sm"
-                      >
-                        {category.name}
-                      </label>
-                    </div>
-                  ))
-                ) : (
-                  <p className="text-sm text-gray-500 px-4 py-2">
-                    No categories found.
-                  </p>
-                )}
-                <div className="mx-2 my-1">
-                  <Label>Tanggal Awal</Label>
-                  <Input
-                    type="date"
-                    value={startDate}
-                    onChange={(e) => setStartDate(e.target.value)}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Tanggal Akhir</Label>
-                  <Input
-                    type="date"
-                    value={endDate}
-                    onChange={(e) => setEndDate(e.target.value)}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Kreator</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={filterByCreator}
-                    onChange={handleSearchFilterByCreator}
-                    className="max-w-sm"
-                  />
-                </div>
-                <div className="mx-2 my-1">
-                  <Label>Sumber</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={filterBySource}
-                    onChange={handleSearchFilterBySource}
-                    className="max-w-sm"
-                  />
-                </div>
-
-                <Label className="ml-2 mt-2">Status</Label>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-2"
-                    className="mr-2"
-                    checked={statusFilter.includes(1)}
-                    onChange={() => handleStatusCheckboxChange(1)}
-                  />
-                  <label htmlFor="status-2" className="text-sm">
-                    Menunggu Review
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-2"
-                    className="mr-2"
-                    checked={statusFilter.includes(2)}
-                    onChange={() => handleStatusCheckboxChange(2)}
-                  />
-                  <label htmlFor="status-2" className="text-sm">
-                    Diterima
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-3"
-                    className="mr-2"
-                    checked={statusFilter.includes(3)}
-                    onChange={() => handleStatusCheckboxChange(3)}
-                  />
-                  <label htmlFor="status-3" className="text-sm">
-                    Minta Update
-                  </label>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <input
-                    type="checkbox"
-                    id="status-4"
-                    className="mr-2"
-                    checked={statusFilter.includes(4)}
-                    onChange={() => handleStatusCheckboxChange(4)}
-                  />
-                  <label htmlFor="status-4" className="text-sm">
-                    Ditolak
-                  </label>
-                </div>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-          <div className="flex items-center py-4">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="ml-auto" size="md">
-                  Columns <ChevronDown />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                {table
-                  .getAllColumns()
-                  .filter((column) => column.getCanHide())
-                  .map((column) => {
-                    return (
-                      <DropdownMenuCheckboxItem
-                        key={column.id}
-                        className="capitalize"
-                        checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
-                      >
-                        {column.id}
-                      </DropdownMenuCheckboxItem>
-                    );
-                  })}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
       </div>
+
       <Table className="overflow-hidden mt-3">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -470,6 +241,7 @@ const TableVideo = () => {
             </TableRow>
           ))}
         </TableHeader>
+
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
@@ -494,6 +266,7 @@ const TableVideo = () => {
           )}
         </TableBody>
       </Table>
+
       <TablePagination
         table={table}
         totalData={totalData}
@@ -504,3 +277,510 @@ const TableVideo = () => {
 };
 
 export default TableVideo;
+
+// "use client";
+
+// import * as React from "react";
+// import {
+//   ColumnDef,
+//   ColumnFiltersState,
+//   PaginationState,
+//   SortingState,
+//   VisibilityState,
+//   flexRender,
+//   getCoreRowModel,
+//   getFilteredRowModel,
+//   getPaginationRowModel,
+//   getSortedRowModel,
+//   useReactTable,
+// } from "@tanstack/react-table";
+// import { Button } from "@/components/ui/button";
+
+// import {
+//   Table,
+//   TableBody,
+//   TableCell,
+//   TableHead,
+//   TableHeader,
+//   TableRow,
+// } from "@/components/ui/table";
+// import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+// import {
+//   ChevronDown,
+//   ChevronLeft,
+//   ChevronRight,
+//   Eye,
+//   MoreVertical,
+//   Search,
+//   SquarePen,
+//   Trash2,
+//   TrendingDown,
+//   TrendingUp,
+// } from "lucide-react";
+// import { cn, getCookiesDecrypt } from "@/lib/utils";
+// import {
+//   DropdownMenu,
+//   DropdownMenuCheckboxItem,
+//   DropdownMenuContent,
+//   DropdownMenuItem,
+//   DropdownMenuRadioGroup,
+//   DropdownMenuRadioItem,
+//   DropdownMenuTrigger,
+// } from "@/components/ui/dropdown-menu";
+// import { Input } from "@/components/ui/input";
+// import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+// import { paginationBlog } from "@/service/blog/blog";
+// import { ticketingPagination } from "@/service/ticketing/ticketing";
+// import { Badge } from "@/components/ui/badge";
+// import { useRouter, useSearchParams } from "next/navigation";
+// import TablePagination from "@/components/table/table-pagination";
+// import columns from "./columns";
+// import {
+//   listDataImage,
+//   listDataVideo,
+//   listEnableCategory,
+// } from "@/service/content/content";
+// import { Label } from "@/components/ui/label";
+// import { format } from "date-fns";
+// import useTableColumns from "./columns";
+
+// const TableVideo = () => {
+//   const router = useRouter();
+//   const searchParams = useSearchParams();
+
+//   const [dataTable, setDataTable] = React.useState<any[]>([]);
+//   const [totalData, setTotalData] = 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 [showData, setShowData] = React.useState("10");
+//   const [pagination, setPagination] = React.useState<PaginationState>({
+//     pageIndex: 0,
+//     pageSize: Number(showData),
+//   });
+//   const [page, setPage] = React.useState(1);
+//   const [totalPage, setTotalPage] = React.useState(1);
+//   const [limit, setLimit] = React.useState(10);
+//   const [search, setSearch] = React.useState<string>("");
+//   const userId = getCookiesDecrypt("uie");
+//   const userLevelId = getCookiesDecrypt("ulie");
+
+//   const [categories, setCategories] = React.useState<any[]>([]);
+//   const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
+//     []
+//   );
+//   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
+//   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
+//   const [startDate, setStartDate] = React.useState("");
+//   const [endDate, setEndDate] = React.useState("");
+//   const [filterByCreator, setFilterByCreator] = React.useState("");
+//   const [filterBySource, setFilterBySource] = React.useState("");
+//   const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
+
+//   const roleId = getCookiesDecrypt("urie");
+//   const columns = useTableColumns();
+//   const table = useReactTable({
+//     data: dataTable,
+//     columns,
+//     onSortingChange: setSorting,
+//     onColumnFiltersChange: setColumnFilters,
+//     getCoreRowModel: getCoreRowModel(),
+//     getPaginationRowModel: getPaginationRowModel(),
+//     getSortedRowModel: getSortedRowModel(),
+//     getFilteredRowModel: getFilteredRowModel(),
+//     onColumnVisibilityChange: setColumnVisibility,
+//     onRowSelectionChange: setRowSelection,
+//     onPaginationChange: setPagination,
+//     state: {
+//       sorting,
+//       columnFilters,
+//       columnVisibility,
+//       rowSelection,
+//       pagination,
+//     },
+//   });
+
+//   React.useEffect(() => {
+//     const pageFromUrl = searchParams?.get("page");
+//     if (pageFromUrl) {
+//       setPage(Number(pageFromUrl));
+//     }
+//   }, [searchParams]);
+
+//   React.useEffect(() => {
+//     fetchData();
+//     getCategories();
+//   }, [
+//     categoryFilter,
+//     statusFilter,
+//     page,
+//     showData,
+//     ,
+//     search,
+//     startDate,
+//     endDate,
+//   ]);
+
+//   async function getCategories() {
+//     const category = await listEnableCategory("2");
+//     const resCategory = category?.data?.data?.content;
+//     setCategories(resCategory || []);
+//   }
+
+//   // Fungsi menangani perubahan checkbox
+//   const handleCheckboxChange = (categoryId: number) => {
+//     setSelectedCategories(
+//       (prev: any) =>
+//         prev.includes(categoryId)
+//           ? prev.filter((id: any) => id !== categoryId) // Hapus jika sudah dipilih
+//           : [...prev, categoryId] // Tambahkan jika belum dipilih
+//     );
+
+//     // Perbarui filter kategori
+//     setCategoryFilter((prev) => {
+//       const updatedCategories = prev.split(",").filter(Boolean).map(Number);
+
+//       const newCategories = updatedCategories.includes(categoryId)
+//         ? updatedCategories.filter((id) => id !== categoryId)
+//         : [...updatedCategories, categoryId];
+
+//       return newCategories.join(",");
+//     });
+//   };
+
+//   async function fetchData() {
+//     const formattedStartDate = startDate
+//       ? format(new Date(startDate), "yyyy-MM-dd")
+//       : "";
+//     const formattedEndDate = endDate
+//       ? format(new Date(endDate), "yyyy-MM-dd")
+//       : "";
+//     try {
+//       const isForSelf = Number(roleId) === 4;
+//       const res = await listDataVideo(
+//         showData,
+//         page - 1,
+//         isForSelf,
+//         !isForSelf,
+//         categoryFilter,
+//         statusFilter,
+//         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
+//         filterByCreator,
+//         filterBySource,
+//         formattedStartDate, // Pastikan format sesuai
+//         formattedEndDate, // Pastikan format sesuai
+//         search,
+//         filterByCreatorGroup
+//       );
+
+//       const data = res?.data?.data;
+//       const contentData = data?.content;
+//       contentData.forEach((item: any, index: number) => {
+//         item.no = (page - 1) * Number(showData) + index + 1;
+//       });
+
+//       setDataTable(contentData);
+//       setTotalData(data?.totalElements);
+//       setTotalPage(data?.totalPages);
+//     } catch (error) {
+//       console.error("Error fetching tasks:", error);
+//     }
+//   }
+
+//   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     setSearch(e.target.value); // Perbarui state search
+//     table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+//   };
+
+//   const handleSearchFilterBySource = (
+//     e: React.ChangeEvent<HTMLInputElement>
+//   ) => {
+//     const value = e.target.value;
+//     setFilterBySource(value); // Perbarui state filter
+//     fetchData(); // Panggil ulang data dengan filter baru
+//   };
+
+//   function handleStatusCheckboxChange(value: any) {
+//     setStatusFilter((prev: any) =>
+//       prev.includes(value)
+//         ? prev.filter((status: any) => status !== value)
+//         : [...prev, value]
+//     );
+//   }
+
+//   const handleSearchFilterByCreator = (
+//     e: React.ChangeEvent<HTMLInputElement>
+//   ) => {
+//     const value = e.target.value;
+//     setFilterByCreator(value); // Perbarui state filter
+//     fetchData(); // Panggil ulang data dengan filter baru
+//   };
+
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
+//         <div className="w-full md:w-[200px] lg:w-[200px] px-2">
+//           <InputGroup merged>
+//             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+//               <Search className=" h-4 w-4 dark:text-white" />
+//             </InputGroupText>
+//             <Input
+//               type="text"
+//               placeholder="Search Judul..."
+//               className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+//               value={search}
+//               onChange={handleSearch}
+//             />
+//           </InputGroup>
+//         </div>
+
+//         <div className="flex flex-row items-center gap-3">
+//           <div className="flex items-center py-4">
+//             <div className="mx-3">
+//               <DropdownMenu>
+//                 <DropdownMenuTrigger asChild>
+//                   <Button size="md" variant="outline">
+//                     {showData} Data
+//                   </Button>
+//                 </DropdownMenuTrigger>
+//                 <DropdownMenuContent className="w-56 text-sm">
+//                   <DropdownMenuRadioGroup
+//                     value={showData}
+//                     onValueChange={setShowData}
+//                   >
+//                     <DropdownMenuRadioItem value="10">
+//                       10 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="50">
+//                       50 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="100">
+//                       100 Data
+//                     </DropdownMenuRadioItem>
+//                     <DropdownMenuRadioItem value="250">
+//                       250 Data
+//                     </DropdownMenuRadioItem>
+//                   </DropdownMenuRadioGroup>
+//                 </DropdownMenuContent>
+//               </DropdownMenu>
+//             </div>
+//             <DropdownMenu>
+//               <DropdownMenuTrigger asChild>
+//                 <Button variant="outline" className="ml-auto" size="md">
+//                   Filter <ChevronDown />
+//                 </Button>
+//               </DropdownMenuTrigger>
+//               <DropdownMenuContent
+//                 align="end"
+//                 className="w-64 h-[200px] overflow-y-auto"
+//               >
+//                 <div className="flex flex-row justify-between my-1 mx-1">
+//                   <p>Filter</p>
+//                   {/* <p
+//                     className="text-blue-600 cursor-pointer"
+//                     onClick={fetchData}
+//                   >
+//                     Simpan
+//                   </p> */}
+//                 </div>
+//                 <Label className="ml-2">Kategori</Label>
+//                 {categories.length > 0 ? (
+//                   categories.map((category) => (
+//                     <div
+//                       key={category.id}
+//                       className="flex items-center px-4 py-1"
+//                     >
+//                       <input
+//                         type="checkbox"
+//                         id={`category-${category.id}`}
+//                         className="mr-2"
+//                         checked={selectedCategories.includes(category.id)}
+//                         onChange={() => handleCheckboxChange(category.id)}
+//                       />
+//                       <label
+//                         htmlFor={`category-${category.id}`}
+//                         className="text-sm"
+//                       >
+//                         {category.name}
+//                       </label>
+//                     </div>
+//                   ))
+//                 ) : (
+//                   <p className="text-sm text-gray-500 px-4 py-2">
+//                     No categories found.
+//                   </p>
+//                 )}
+//                 <div className="mx-2 my-1">
+//                   <Label>Tanggal Awal</Label>
+//                   <Input
+//                     type="date"
+//                     value={startDate}
+//                     onChange={(e) => setStartDate(e.target.value)}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Tanggal Akhir</Label>
+//                   <Input
+//                     type="date"
+//                     value={endDate}
+//                     onChange={(e) => setEndDate(e.target.value)}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Kreator</Label>
+//                   <Input
+//                     placeholder="Filter Status..."
+//                     value={filterByCreator}
+//                     onChange={handleSearchFilterByCreator}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+//                 <div className="mx-2 my-1">
+//                   <Label>Sumber</Label>
+//                   <Input
+//                     placeholder="Filter Status..."
+//                     value={filterBySource}
+//                     onChange={handleSearchFilterBySource}
+//                     className="max-w-sm"
+//                   />
+//                 </div>
+
+//                 <Label className="ml-2 mt-2">Status</Label>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-2"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(1)}
+//                     onChange={() => handleStatusCheckboxChange(1)}
+//                   />
+//                   <label htmlFor="status-2" className="text-sm">
+//                     Menunggu Review
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-2"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(2)}
+//                     onChange={() => handleStatusCheckboxChange(2)}
+//                   />
+//                   <label htmlFor="status-2" className="text-sm">
+//                     Diterima
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-3"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(3)}
+//                     onChange={() => handleStatusCheckboxChange(3)}
+//                   />
+//                   <label htmlFor="status-3" className="text-sm">
+//                     Minta Update
+//                   </label>
+//                 </div>
+//                 <div className="flex items-center px-4 py-1">
+//                   <input
+//                     type="checkbox"
+//                     id="status-4"
+//                     className="mr-2"
+//                     checked={statusFilter.includes(4)}
+//                     onChange={() => handleStatusCheckboxChange(4)}
+//                   />
+//                   <label htmlFor="status-4" className="text-sm">
+//                     Ditolak
+//                   </label>
+//                 </div>
+//               </DropdownMenuContent>
+//             </DropdownMenu>
+//           </div>
+//           <div className="flex items-center py-4">
+//             <DropdownMenu>
+//               <DropdownMenuTrigger asChild>
+//                 <Button variant="outline" className="ml-auto" size="md">
+//                   Columns <ChevronDown />
+//                 </Button>
+//               </DropdownMenuTrigger>
+//               <DropdownMenuContent align="end">
+//                 {table
+//                   .getAllColumns()
+//                   .filter((column) => column.getCanHide())
+//                   .map((column) => {
+//                     return (
+//                       <DropdownMenuCheckboxItem
+//                         key={column.id}
+//                         className="capitalize"
+//                         checked={column.getIsVisible()}
+//                         onCheckedChange={(value) =>
+//                           column.toggleVisibility(!!value)
+//                         }
+//                       >
+//                         {column.id}
+//                       </DropdownMenuCheckboxItem>
+//                     );
+//                   })}
+//               </DropdownMenuContent>
+//             </DropdownMenu>
+//           </div>
+//         </div>
+//       </div>
+//       <Table className="overflow-hidden mt-3">
+//         <TableHeader>
+//           {table.getHeaderGroups().map((headerGroup) => (
+//             <TableRow key={headerGroup.id} className="bg-default-200">
+//               {headerGroup.headers.map((header) => (
+//                 <TableHead key={header.id}>
+//                   {header.isPlaceholder
+//                     ? null
+//                     : flexRender(
+//                         header.column.columnDef.header,
+//                         header.getContext()
+//                       )}
+//                 </TableHead>
+//               ))}
+//             </TableRow>
+//           ))}
+//         </TableHeader>
+//         <TableBody>
+//           {table.getRowModel().rows?.length ? (
+//             table.getRowModel().rows.map((row) => (
+//               <TableRow
+//                 key={row.id}
+//                 data-state={row.getIsSelected() && "selected"}
+//                 className="h-[75px]"
+//               >
+//                 {row.getVisibleCells().map((cell) => (
+//                   <TableCell key={cell.id}>
+//                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
+//                   </TableCell>
+//                 ))}
+//               </TableRow>
+//             ))
+//           ) : (
+//             <TableRow>
+//               <TableCell colSpan={columns.length} className="h-24 text-center">
+//                 No results.
+//               </TableCell>
+//             </TableRow>
+//           )}
+//         </TableBody>
+//       </Table>
+//       <TablePagination
+//         table={table}
+//         totalData={totalData}
+//         totalPage={totalPage}
+//       />
+//     </div>
+//   );
+// };
+
+// export default TableVideo;