From 95860da6d67309bc4576ddcde34886d759e05687 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Thu, 16 Jan 2025 20:52:59 +0800
Subject: [PATCH] feat:fix penugasan,filter content,update content

---
 .../content/audio/components/columns.tsx      |  10 +-
 .../content/audio/components/table-audio.tsx  | 228 ++++++++++++++--
 .../content/image/components/columns.tsx      |  10 +-
 .../content/image/components/table-image.tsx  | 228 ++++++++++++----
 .../content/spit/table-spit/columns.tsx       |   2 +-
 .../content/spit/table-spit/table-spit.tsx    |   4 +-
 .../content/teks/components/columns.tsx       |  10 +-
 .../content/teks/components/table-teks.tsx    | 232 ++++++++++++++--
 .../content/video/components/columns.tsx      |  10 +-
 .../content/video/components/table-video.tsx  | 237 ++++++++++++++--
 components/form/task/task-detail-form.tsx     | 256 ++++++++++--------
 components/form/task/task-edit-form.tsx       |  14 +-
 components/form/task/task-form.tsx            |  14 +-
 service/content/content.ts                    |  20 +-
 14 files changed, 985 insertions(+), 290 deletions(-)

diff --git a/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx b/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
index a31c3683..f6410a19 100644
--- a/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
@@ -68,17 +68,19 @@ const columns: ColumnDef<any>[] = [
     },
   },
   {
-    accessorKey: "creatorGroup",
+    accessorKey: "creatorName",
     header: "Creator Group",
     cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("creatorGroup")}</span>
+      <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
     ),
   },
   {
-    accessorKey: "creatorName",
+    accessorKey: "creatorGroupLevelName",
     header: "Sumber",
     cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
+      <span className="whitespace-nowrap">
+        {row.getValue("creatorGroupLevelName")}
+      </span>
     ),
   },
   {
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 3f42e5e1..0fcfcb37 100644
--- a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
+++ b/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Eye,
@@ -39,6 +40,7 @@ import {
 import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
@@ -55,7 +57,10 @@ import {
   listDataAudio,
   listDataImage,
   listDataVideo,
+  listEnableCategory,
 } from "@/service/content/content";
+import { Label } from "@/components/ui/label";
+import { format } from "date-fns";
 
 const TableAudio = () => {
   const router = useRouter();
@@ -81,13 +86,17 @@ const TableAudio = () => {
   const userId = getCookiesDecrypt("uie");
   const userLevelId = getCookiesDecrypt("ulie");
 
-  const [categories, setCategories] = React.useState();
-  const [categoryFilter, setCategoryFilter] = React.useState([]);
+  const [categories, setCategories] = React.useState<any[]>([]);
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
+    []
+  );
+  const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState([]);
-  const [startDateString, setStartDateString] = React.useState("");
-  const [endDateString, setEndDateString] = React.useState("");
+  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");
 
@@ -121,35 +130,69 @@ const TableAudio = () => {
 
   React.useEffect(() => {
     fetchData();
-  }, [page, limit, search]);
+    getCategories();
+  }, [categoryFilter, page, limit, 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 isForSelf = Number(roleId) === 4;
       const res = await listDataAudio(
         limit,
         page - 1,
         isForSelf,
         !isForSelf,
-        categoryFilter?.sort().join(","),
+        categoryFilter,
         statusFilter?.sort().join(",").includes("1")
           ? "1,2"
           : statusFilter?.sort().join(","),
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
-        startDateString,
-        endDateString,
-        search
+        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) * limit + index + 1;
       });
 
-      console.log("contentData : ", contentData);
-
       setDataTable(contentData);
       setTotalData(data?.totalElements);
       setTotalPage(data?.totalPages);
@@ -157,11 +200,28 @@ const TableAudio = () => {
       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
+  };
+
+  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 justify-between items-center px-5">
@@ -179,17 +239,139 @@ const TableAudio = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
+        <div className="flex flex-row items-center gap-3">
+          <div className="flex items-center py-4">
+            <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>
+
+                <div className="mx-2 my-1">
+                  <Label>Status</Label>
+                  <Input
+                    placeholder="Filter Status..."
+                    value={
+                      (table
+                        .getColumn("statusName")
+                        ?.getFilterValue() as string) ?? ""
+                    }
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      table
+                        .getColumn("statusName")
+                        ?.setFilterValue(event.target.value)
+                    }
+                    className="max-w-sm "
+                  />
+                </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">
diff --git a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
index dcc54f88..4e1a7d8b 100644
--- a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
@@ -72,17 +72,19 @@ const columns: ColumnDef<any>[] = [
     },
   },
   {
-    accessorKey: "creatorGroup",
+    accessorKey: "creatorName",
     header: "Creator Group",
     cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("creatorGroup")}</span>
+      <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
     ),
   },
   {
-    accessorKey: "creatorName",
+    accessorKey: "creatorGroupLevelName",
     header: "Sumber",
     cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
+      <span className="whitespace-nowrap">
+        {row.getValue("creatorGroupLevelName")}
+      </span>
     ),
   },
   {
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 2f51e56d..9c14dfc8 100644
--- a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
@@ -53,13 +53,19 @@ import { Badge } from "@/components/ui/badge";
 import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
-import { deleteMedia, listDataImage } from "@/service/content/content";
+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";
 
 const TableImage = () => {
   const router = useRouter();
@@ -85,13 +91,17 @@ const TableImage = () => {
   const userId = getCookiesDecrypt("uie");
   const userLevelId = getCookiesDecrypt("ulie");
 
-  const [categories, setCategories] = React.useState();
-  const [categoryFilter, setCategoryFilter] = React.useState([]);
+  const [categories, setCategories] = React.useState<any[]>([]);
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
+    []
+  );
+  const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState([]);
-  const [startDateString, setStartDateString] = React.useState("");
-  const [endDateString, setEndDateString] = React.useState("");
+  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");
 
@@ -124,36 +134,71 @@ const TableImage = () => {
   }, [searchParams]);
 
   React.useEffect(() => {
+    // Panggil fetchData saat filter kategori berubah
     fetchData();
-  }, [page, limit, search]);
+    getCategories();
+  }, [categoryFilter, page, limit, 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) // 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 isForSelf = Number(roleId) === 4;
       const res = await listDataImage(
         limit,
         page - 1,
         isForSelf,
         !isForSelf,
-        categoryFilter?.sort().join(","),
+        categoryFilter,
         statusFilter?.sort().join(",").includes("1")
           ? "1,2"
           : statusFilter?.sort().join(","),
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
-        startDateString,
-        endDateString,
-        search
+        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) * limit + index + 1;
       });
 
-      console.log("contentData : ", contentData);
-
       setDataTable(contentData);
       setTotalData(data?.totalElements);
       setTotalPage(data?.totalPages);
@@ -167,36 +212,21 @@ const TableImage = () => {
     table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
   };
 
-  // async function doDelete(id: any) {
-  //   loading();
-  //   const data = {
-  //     id,
-  //   };
+  const handleSearchFilterBySource = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = e.target.value;
+    setFilterBySource(value); // Perbarui state filter
+    fetchData(); // Panggil ulang data dengan filter baru
+  };
 
-  //   const response = await deleteMedia(data);
-
-  //   if (response?.error) {
-  //     error(response.message);
-  //     return false;
-  //   }
-
-  //   fetchData();
-  //   toast.success("Konten berhasil dihapus");
-  // }
-
-  // const handleDeleteMedia = (id: any) => {
-  //   MySwal.fire({
-  //     title: "Apakah anda ingin menghapus konten?",
-  //     showCancelButton: true,
-  //     confirmButtonColor: "#dc3545",
-  //     confirmButtonText: "Iya",
-  //     cancelButtonText: "Tidak",
-  //   }).then((result: any) => {
-  //     if (result.isConfirmed) {
-  //       doDelete(id);
-  //     }
-  //   });
-  // };
+  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">
@@ -216,16 +246,110 @@ const TableImage = () => {
           </InputGroup>
         </div>
         <div className="flex flex-row items-center gap-3">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
+          <div className="flex items-center py-4">
+            <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>
+
+                <div className="mx-2 my-1">
+                  <Label>Status</Label>
+                  <Input
+                    placeholder="Filter Status..."
+                    value={
+                      (table
+                        .getColumn("statusName")
+                        ?.getFilterValue() as string) ?? ""
+                    }
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      table
+                        .getColumn("statusName")
+                        ?.setFilterValue(event.target.value)
+                    }
+                    className="max-w-sm "
+                  />
+                </div>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
           <div className="flex items-center py-4">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
diff --git a/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx b/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx
index aa706fb3..1eaa46ef 100644
--- a/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx
@@ -77,7 +77,7 @@ const columns: ColumnDef<any>[] = [
         <div>
           <Button
             size="sm"
-            color={isPublish ? "success" : "warning"} // Hijau untuk diterima, oranye untuk menunggu review
+            color={isPublish ? "success" : "warning"}
             variant="outline"
             className={`btn btn-sm ${
               isPublish ? "btn-outline-success" : "btn-outline-warning"
diff --git a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx b/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
index 03434a54..678b23f6 100644
--- a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
+++ b/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
@@ -170,10 +170,10 @@ const TableSPIT = () => {
           <Input
             placeholder="Filter Status..."
             value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
+              (table.getColumn("isPublish")?.getFilterValue() as string) ?? ""
             }
             onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
+              table.getColumn("isPublish")?.setFilterValue(event.target.value)
             }
             className="max-w-sm "
           />
diff --git a/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx b/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
index a13d04b6..ad40c578 100644
--- a/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
@@ -68,17 +68,19 @@ const columns: ColumnDef<any>[] = [
     },
   },
   {
-    accessorKey: "creatorGroup",
+    accessorKey: "creatorName",
     header: "Creator Group",
     cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("creatorGroup")}</span>
+      <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
     ),
   },
   {
-    accessorKey: "creatorName",
+    accessorKey: "creatorGroupLevelName",
     header: "Sumber",
     cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
+      <span className="whitespace-nowrap">
+        {row.getValue("creatorGroupLevelName")}
+      </span>
     ),
   },
   {
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 6cda6a2f..7236cbe7 100644
--- a/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
+++ b/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Eye,
@@ -39,6 +40,7 @@ import {
 import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
@@ -51,7 +53,13 @@ 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 } from "@/service/content/content";
+import {
+  listDataImage,
+  listDataTeks,
+  listEnableCategory,
+} from "@/service/content/content";
+import { Label } from "@/components/ui/label";
+import { format } from "date-fns";
 
 const TableTeks = () => {
   const router = useRouter();
@@ -77,13 +85,17 @@ const TableTeks = () => {
   const userId = getCookiesDecrypt("uie");
   const userLevelId = getCookiesDecrypt("ulie");
 
-  const [categories, setCategories] = React.useState();
-  const [categoryFilter, setCategoryFilter] = React.useState([]);
+  const [categories, setCategories] = React.useState<any[]>([]);
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
+    []
+  );
+  const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState([]);
-  const [startDateString, setStartDateString] = React.useState("");
-  const [endDateString, setEndDateString] = React.useState("");
+  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");
 
@@ -117,35 +129,69 @@ const TableTeks = () => {
 
   React.useEffect(() => {
     fetchData();
-  }, [page, limit, search]);
+    getCategories();
+  }, [categoryFilter, page, limit, 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 isForSelf = Number(roleId) === 4;
       const res = await listDataTeks(
         limit,
         page - 1,
         isForSelf,
         !isForSelf,
-        categoryFilter?.sort().join(","),
+        categoryFilter,
         statusFilter?.sort().join(",").includes("1")
           ? "1,2"
           : statusFilter?.sort().join(","),
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
-        startDateString,
-        endDateString,
-        search
+        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) * limit + index + 1;
       });
 
-      console.log("contentData : ", contentData);
-
       setDataTable(contentData);
       setTotalData(data?.totalElements);
       setTotalPage(data?.totalPages);
@@ -159,6 +205,22 @@ const TableTeks = () => {
     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
+  };
+
+  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 justify-between items-center px-5">
@@ -176,17 +238,139 @@ const TableTeks = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
+        <div className="flex flex-row items-center gap-3">
+          <div className="flex items-center py-4">
+            <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>
+
+                <div className="mx-2 my-1">
+                  <Label>Status</Label>
+                  <Input
+                    placeholder="Filter Status..."
+                    value={
+                      (table
+                        .getColumn("statusName")
+                        ?.getFilterValue() as string) ?? ""
+                    }
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      table
+                        .getColumn("statusName")
+                        ?.setFilterValue(event.target.value)
+                    }
+                    className="max-w-sm "
+                  />
+                </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">
diff --git a/app/[locale]/(protected)/contributor/content/video/components/columns.tsx b/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
index af0704cc..399b44d7 100644
--- a/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
@@ -68,17 +68,19 @@ const columns: ColumnDef<any>[] = [
     },
   },
   {
-    accessorKey: "creatorGroup",
+    accessorKey: "creatorName",
     header: "Creator Group",
     cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("creatorGroup")}</span>
+      <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
     ),
   },
   {
-    accessorKey: "creatorName",
+    accessorKey: "creatorGroupLevelName",
     header: "Sumber",
     cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
+      <span className="whitespace-nowrap">
+        {row.getValue("creatorGroupLevelName")}
+      </span>
     ),
   },
   {
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 c5b2bd8e..90a47401 100644
--- a/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
+++ b/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Eye,
@@ -39,6 +40,7 @@ import {
 import { cn, getCookiesDecrypt } from "@/lib/utils";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
@@ -51,9 +53,15 @@ 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 } from "@/service/content/content";
+import {
+  listDataImage,
+  listDataVideo,
+  listEnableCategory,
+} from "@/service/content/content";
+import { Label } from "@/components/ui/label";
+import { format } from "date-fns";
 
-const TableImage = () => {
+const TableVideo = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -77,13 +85,17 @@ const TableImage = () => {
   const userId = getCookiesDecrypt("uie");
   const userLevelId = getCookiesDecrypt("ulie");
 
-  const [categories, setCategories] = React.useState();
-  const [categoryFilter, setCategoryFilter] = React.useState([]);
+  const [categories, setCategories] = React.useState<any[]>([]);
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
+    []
+  );
+  const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState([]);
-  const [startDateString, setStartDateString] = React.useState("");
-  const [endDateString, setEndDateString] = React.useState("");
+  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");
 
@@ -117,35 +129,69 @@ const TableImage = () => {
 
   React.useEffect(() => {
     fetchData();
-  }, [page, limit, search]);
+    getCategories();
+  }, [categoryFilter, page, limit, 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 isForSelf = Number(roleId) === 4;
       const res = await listDataVideo(
         limit,
         page - 1,
         isForSelf,
         !isForSelf,
-        categoryFilter?.sort().join(","),
+        categoryFilter,
         statusFilter?.sort().join(",").includes("1")
           ? "1,2"
           : statusFilter?.sort().join(","),
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
-        startDateString,
-        endDateString,
-        search
+        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) * limit + index + 1;
       });
 
-      console.log("contentData : ", contentData);
-
       setDataTable(contentData);
       setTotalData(data?.totalElements);
       setTotalPage(data?.totalPages);
@@ -159,6 +205,22 @@ const TableImage = () => {
     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
+  };
+
+  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 justify-between items-center px-5">
@@ -176,17 +238,140 @@ const TableImage = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
+
+        <div className="flex flex-row items-center gap-3">
+          <div className="flex items-center py-4">
+            <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>
+
+                <div className="mx-2 my-1">
+                  <Label>Status</Label>
+                  <Input
+                    placeholder="Filter Status..."
+                    value={
+                      (table
+                        .getColumn("statusName")
+                        ?.getFilterValue() as string) ?? ""
+                    }
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      table
+                        .getColumn("statusName")
+                        ?.setFilterValue(event.target.value)
+                    }
+                    className="max-w-sm "
+                  />
+                </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">
@@ -239,4 +424,4 @@ const TableImage = () => {
   );
 };
 
-export default TableImage;
+export default TableVideo;
diff --git a/components/form/task/task-detail-form.tsx b/components/form/task/task-detail-form.tsx
index 36391e38..a0fec401 100644
--- a/components/form/task/task-detail-form.tsx
+++ b/components/form/task/task-detail-form.tsx
@@ -240,15 +240,27 @@ export default function FormTaskDetail() {
   const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>(
     []
   );
+  const [selectedImage, setSelectedImage] = useState<string | null>(
+    imageUploadedFiles?.[0]?.url || null
+  );
   const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>(
     []
   );
+  const [selectedVideo, setSelectedVideo] = useState<string | null>(
+    videoUploadedFiles?.[0]?.url || null
+  );
   const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>(
     []
   );
+  const [selectedText, setSelectedText] = useState<string | null>(
+    textUploadedFiles?.[0]?.url || null
+  );
   const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>(
     []
   );
+  const [selectedAudio, setSelectedAudio] = useState<string | null>(
+    audioUploadedFiles?.[0]?.url || null
+  );
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -358,10 +370,10 @@ export default function FormTaskDetail() {
     if (detail?.fileTypeOutput) {
       const outputSet = new Set(detail.fileTypeOutput.split(",").map(Number));
       setTaskOutput({
-        all: outputSet.has(0),
+        all: outputSet.has(1),
         video: outputSet.has(2),
         audio: outputSet.has(4),
-        image: outputSet.has(1),
+        image: outputSet.has(3),
         text: outputSet.has(5),
       });
     }
@@ -1028,24 +1040,32 @@ export default function FormTaskDetail() {
                 <div className="space-y-3">
                   <div>
                     {videoUploadedFiles?.length > 0 && <Label>Video</Label>}
-                    {videoUploadedFiles?.map((file: any, index: number) => (
-                      <div>
-                        <video
-                          className="object-fill h-full w-full rounded-md"
-                          src={file.url}
-                          controls
-                          title={`Video ${file.id}`} // Mengganti alt dengan title
-                        />
+                    <div>
+                      {selectedVideo && (
+                        <Card className="mt-2">
+                          <video
+                            className="object-fill h-full w-full rounded-md"
+                            src={selectedVideo}
+                            controls
+                            title={`Video`} // Mengganti alt dengan title
+                          />
+                        </Card>
+                      )}
+
+                      {videoUploadedFiles?.map((file: any, index: number) => (
                         <div
                           key={index}
-                          className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+                          className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
                         >
-                          <div className="flex gap-3 items-center">
+                          <div
+                            className="flex gap-3 items-center cursor-pointer"
+                            onClick={() => setSelectedVideo(file.url)}
+                          >
                             <div className="file-preview">
                               {renderFilePreview(file.url)}
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
+                              <div className="text-sm text-card-foreground">
                                 {file.fileName}
                               </div>
                             </div>
@@ -1055,36 +1075,42 @@ export default function FormTaskDetail() {
                             size="icon"
                             color="destructive"
                             variant="outline"
-                            className=" border-none rounded-full"
+                            className="border-none rounded-full"
                             onClick={() => handleRemoveFile(file)}
                           >
-                            <Icon icon="tabler:x" className=" h-5 w-5" />
+                            <Icon icon="tabler:x" className="h-5 w-5" />
                           </Button>
                         </div>
-                      </div>
-                    ))}
+                      ))}
+                    </div>
                   </div>
                   <div>
                     {imageUploadedFiles?.length > 0 && <Label>Foto</Label>}
-                    {imageUploadedFiles?.map((file: any, index: number) => (
-                      <div>
+                    <div>
+                      {selectedImage && (
                         <Card className="mt-2">
                           <img
-                            src={file.url}
+                            src={selectedImage}
                             alt="Thumbnail Gambar Utama"
                             className="w-full h-auto rounded-md"
                           />
                         </Card>
+                      )}
+
+                      {imageUploadedFiles?.map((file: any, index: number) => (
                         <div
                           key={index}
-                          className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+                          className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
                         >
-                          <div className="flex gap-3 items-center">
+                          <div
+                            className="flex gap-3 items-center cursor-pointer"
+                            onClick={() => setSelectedImage(file.url)}
+                          >
                             <div className="file-preview">
                               {renderFilePreview(file.url)}
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
+                              <div className="text-sm text-card-foreground">
                                 {file.fileName}
                               </div>
                             </div>
@@ -1094,44 +1120,44 @@ export default function FormTaskDetail() {
                             size="icon"
                             color="destructive"
                             variant="outline"
-                            className=" border-none rounded-full"
+                            className="border-none rounded-full"
                             onClick={() => handleRemoveFile(file)}
                           >
-                            <Icon icon="tabler:x" className=" h-5 w-5" />
+                            <Icon icon="tabler:x" className="h-5 w-5" />
                           </Button>
                         </div>
-                      </div>
-                    ))}
-                    {/* <FileUploader
-                      accept={{
-                        "image/*": [],
-                      }}
-                      maxSize={100}
-                      label="Upload file dengan format .png, .jpg, atau .jpeg."
-                      onDrop={(files) => setImageFiles(files)}
-                    /> */}
+                      ))}
+                    </div>
                   </div>
                   <div>
                     {textUploadedFiles?.length > 0 && <Label>Teks</Label>}
-                    {textUploadedFiles?.map((file: any, index: number) => (
-                      <div>
-                        <iframe
-                          className="w-full h-96 rounded-md"
-                          src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
-                            file.url
-                          )}`}
-                          title={file.fileName || "Document"}
-                        />
+                    <div>
+                      {selectedText && (
+                        <Card className="mt-2">
+                          <iframe
+                            className="w-full h-96 rounded-md"
+                            src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
+                              selectedText
+                            )}`}
+                            title={"Document"}
+                          />
+                        </Card>
+                      )}
+
+                      {textUploadedFiles?.map((file: any, index: number) => (
                         <div
                           key={index}
-                          className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+                          className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
                         >
-                          <div className="flex gap-3 items-center">
+                          <div
+                            className="flex gap-3 items-center cursor-pointer"
+                            onClick={() => setSelectedText(file.url)}
+                          >
                             <div className="file-preview">
                               {renderFilePreview(file.url)}
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
+                              <div className="text-sm text-card-foreground">
                                 {file.fileName}
                               </div>
                             </div>
@@ -1141,69 +1167,68 @@ export default function FormTaskDetail() {
                             size="icon"
                             color="destructive"
                             variant="outline"
-                            className=" border-none rounded-full"
+                            className="border-none rounded-full"
                             onClick={() => handleRemoveFile(file)}
                           >
-                            <Icon icon="tabler:x" className=" h-5 w-5" />
+                            <Icon icon="tabler:x" className="h-5 w-5" />
                           </Button>
                         </div>
-                      </div>
-                    ))}
-                    {/* <FileUploader
-                      accept={{
-                        "pdf/*": [],
-                      }}
-                      maxSize={100}
-                      label="Upload file dengan format .pdf."
-                      onDrop={(files) => setTextFiles(files)}
-                    /> */}
+                      ))}
+                    </div>
                   </div>
                   <div>
                     {audioUploadedFiles?.length > 0 && <Label>Audio</Label>}
-                    {audioUploadedFiles?.map((file: any, index: number) => (
-                      <div>
-                        <div key={file.id}>
-                          <WavesurferPlayer
-                            height={500}
-                            waveColor="red"
-                            url={file.url}
-                            onReady={onReady}
-                            onPlay={() => setIsPlaying(true)}
-                            onPause={() => setIsPlaying(false)}
-                          />
-                        </div>
-                        <Button
-                          size="sm"
-                          type="button"
-                          onClick={onPlayPause}
-                          disabled={isPlaying}
-                          className={`flex items-center gap-2 ${
-                            isPlaying
-                              ? "bg-gray-300 cursor-not-allowed"
-                              : "bg-primary text-white"
-                          } p-2 rounded`}
-                        >
-                          {isPlaying ? "Pause" : "Play"}
-                          <Icon
-                            icon={
+                    <div>
+                      {selectedAudio && (
+                        <Card className="mt-2">
+                          <div key={selectedAudio}>
+                            <WavesurferPlayer
+                              height={500}
+                              waveColor="red"
+                              url={selectedAudio}
+                              onReady={onReady}
+                              onPlay={() => setIsPlaying(true)}
+                              onPause={() => setIsPlaying(false)}
+                            />
+                          </div>
+                          <Button
+                            size="sm"
+                            type="button"
+                            onClick={onPlayPause}
+                            disabled={isPlaying}
+                            className={`flex items-center gap-2 ${
                               isPlaying
-                                ? "carbon:pause-outline"
-                                : "famicons:play-sharp"
-                            }
-                            className="h-5 w-5"
-                          />
-                        </Button>
+                                ? "bg-gray-300 cursor-not-allowed"
+                                : "bg-primary text-white"
+                            } p-2 rounded`}
+                          >
+                            {isPlaying ? "Pause" : "Play"}
+                            <Icon
+                              icon={
+                                isPlaying
+                                  ? "carbon:pause-outline"
+                                  : "famicons:play-sharp"
+                              }
+                              className="h-5 w-5"
+                            />
+                          </Button>
+                        </Card>
+                      )}
 
+                      {audioUploadedFiles?.map((file: any, index: number) => (
                         <div
                           key={index}
-                          className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+                          className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
                         >
-                          <div className="flex gap-3 items-center">
+                          <div
+                            className="flex gap-3 items-center cursor-pointer"
+                            onClick={() => setSelectedAudio(file.url)}
+                          >
                             <div className="file-preview">
                               {renderFilePreview(file.url)}
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
+                              <div className="text-sm text-card-foreground">
                                 {file.fileName}
                               </div>
                             </div>
@@ -1213,14 +1238,15 @@ export default function FormTaskDetail() {
                             size="icon"
                             color="destructive"
                             variant="outline"
-                            className=" border-none rounded-full"
+                            className="border-none rounded-full"
                             onClick={() => handleRemoveFile(file)}
                           >
-                            <Icon icon="tabler:x" className=" h-5 w-5" />
+                            <Icon icon="tabler:x" className="h-5 w-5" />
                           </Button>
                         </div>
-                      </div>
-                    ))}
+                      ))}
+                    </div>
+
                     {audioUploadedFiles?.length > 0 && (
                       <AudioRecorder
                         onRecordingComplete={addAudioElement}
@@ -1232,16 +1258,6 @@ export default function FormTaskDetail() {
                         downloadFileExtension="webm"
                       />
                     )}
-                    {/* <FileUploader
-                      accept={{
-                        "mp3/*": [],
-                        "wav/*": [],
-                      }}
-                      maxSize={100}
-                      label="Upload file dengan format .mp3 atau .wav."
-                      onDrop={(files) => setAudioFiles(files)}
-                      className="mt-2"
-                    /> */}
                   </div>
                   {audioFile && (
                     <div className="flex flex-row justify-between items-center">
@@ -1260,17 +1276,19 @@ export default function FormTaskDetail() {
                   {/* Display remaining time */}
                   <div className="mt-4">
                     {urlInputs.map((url: any, index: any) => (
-                      <div className="mt-4 flex flex-col" key={index}>
-                        <Label htmlFor={`url-${index}`}>Link Berita</Label>
-                        <Button
-                          size="sm"
-                          id={`url-${index}`}
-                          className="bg-slate-400 text-white py-2 px-4 rounded mt-2 hover:bg-blue-600 text-start"
-                          onClick={() => window.open(url, "_blank")}
-                          disabled={!url} // Disable button if URL is empty
-                        >
-                          {url}
-                        </Button>
+                      <div
+                        key={url.id}
+                        className="flex items-center gap-2 mt-2"
+                      >
+                        <input
+                          type="url"
+                          className="border rounded p-2 w-full"
+                          value={url}
+                          // onChange={(e) =>
+                          //   handleLinkChange(index, e.target.value)
+                          // }
+                          placeholder={`Masukkan link berita ${index + 1}`}
+                        />
                       </div>
                     ))}
                   </div>
diff --git a/components/form/task/task-edit-form.tsx b/components/form/task/task-edit-form.tsx
index f53ef764..18f506e2 100644
--- a/components/form/task/task-edit-form.tsx
+++ b/components/form/task/task-edit-form.tsx
@@ -246,10 +246,10 @@ export default function FormTaskEdit() {
     if (detail?.fileTypeOutput) {
       const outputSet = new Set(detail.fileTypeOutput.split(",").map(Number)); // Membagi string ke dalam array dan mengonversi ke nomor
       setTaskOutput({
-        all: outputSet.has(0),
+        all: outputSet.has(1),
         video: outputSet.has(2),
         audio: outputSet.has(4),
-        image: outputSet.has(1),
+        image: outputSet.has(3),
         text: outputSet.has(5),
       });
     }
@@ -289,8 +289,8 @@ export default function FormTaskEdit() {
     const fileTypeMapping = {
       all: "1",
       video: "2",
-      audio: "3",
-      image: "4",
+      audio: "4",
+      image: "3",
       text: "5",
     };
 
@@ -580,9 +580,9 @@ export default function FormTaskEdit() {
   };
 
   const handleLinkChange = (index: number, value: string) => {
-    const updatedUrls = [...urlInputs];
-    updatedUrls[index].attachmentUrl = value;
-    setUrlInputs(updatedUrls);
+    const updatedLinks = [...links];
+    updatedLinks[index] = value;
+    setLinks(updatedLinks);
   };
 
   const handleAddLink = () => {
diff --git a/components/form/task/task-form.tsx b/components/form/task/task-form.tsx
index 293eb0db..b80f0539 100644
--- a/components/form/task/task-form.tsx
+++ b/components/form/task/task-form.tsx
@@ -188,8 +188,8 @@ export default function FormTask() {
     const fileTypeMapping = {
       all: "1",
       video: "2",
-      audio: "3",
-      image: "4",
+      audio: "4",
+      image: "3",
       text: "5",
     };
 
@@ -275,16 +275,6 @@ export default function FormTask() {
     audioFiles?.map(async (item: any, index: number) => {
       await uploadResumableFile(index, String(id), item, "4", "0");
     });
-
-    // MySwal.fire({
-    //   title: "Sukses",
-    //   text: "Data berhasil disimpan.",
-    //   icon: "success",
-    //   confirmButtonColor: "#3085d6",
-    //   confirmButtonText: "OK",
-    // }).then(() => {
-    //   router.push("/en/contributor/task");
-    // });
   };
 
   const onSubmit = (data: TaskSchema) => {
diff --git a/service/content/content.ts b/service/content/content.ts
index 0ea21c23..b16beec2 100644
--- a/service/content/content.ts
+++ b/service/content/content.ts
@@ -57,10 +57,11 @@ export async function listDataImage(
   source: any,
   startDate: any,
   endDate: any,
-  title: string = ""
+  title: string = "",
+  creatorGroup: string = ""
 ) {
   return await httpGetInterceptor(
-    `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}`
+    `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}`
   );
 }
 
@@ -76,10 +77,11 @@ export async function listDataVideo(
   source: any,
   startDate: any,
   endDate: any,
-  title: string = ""
+  title: string = "",
+  creatorGroup: string = ""
 ) {
   return await httpGetInterceptor(
-    `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=2&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}`
+    `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=2&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}`
   );
 }
 
@@ -95,10 +97,11 @@ export async function listDataTeks(
   source: any,
   startDate: any,
   endDate: any,
-  title: string = ""
+  title: string = "",
+  creatorGroup: string = ""
 ) {
   return await httpGetInterceptor(
-    `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=3&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}`
+    `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=3&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}`
   );
 }
 
@@ -114,10 +117,11 @@ export async function listDataAudio(
   source: any,
   startDate: any,
   endDate: any,
-  title: string = ""
+  title: string = "",
+  creatorGroup: string = ""
 ) {
   return await httpGetInterceptor(
-    `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=4&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}`
+    `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=4&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}`
   );
 }