fix: filter date in convert spit

app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx

@@ -92,7 +92,7 @@ const TableSPIT = () => {
   const userId = getCookiesDecrypt("uie");
   const userLevelId = getCookiesDecrypt("ulie");
   const t = useTranslations("AnalyticsDashboard");
-  const [dateFilter, setDateFilter] = React.useState("");
+  // const [dateFilter, setDateFilter] = React.useState("");
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -106,6 +106,9 @@ const TableSPIT = () => {
   });
   const [categories, setCategories] = React.useState<any[]>([]);
   const roleId = getCookiesDecrypt("urie");
+  const [startDate, setStartDate] = React.useState("");
+  const [endDate, setEndDate] = React.useState("");
+
   const columns = useTableColumns();
   const table = useReactTable({
     data: spitTable,
@@ -159,6 +162,15 @@ const TableSPIT = () => {
     }
   }, [searchParams]);
 
+  React.useEffect(() => {
+    setPage(1);
+    setPagination({
+      pageIndex: 0,
+      pageSize: Number(showData),
+    });
+    fetchData();
+  }, [startDate, endDate]);
+
   // React.useEffect(() => {
   //   fetchData();
   // }, [showData, page, search, statusFilter, dateFilter]);
@@ -176,10 +188,38 @@ const TableSPIT = () => {
   //   // endDate,
   // ]);
 
+  const handleResetFilter = () => {
+    setSearch("");
+    setStatusFilter([]);
+    setStartDate("");
+    setEndDate("");
+    setShowData("10");
+    setPage(1);
+
+    // kalau pakai tanstack pagination
+    setPagination({
+      pageIndex: 0,
+      pageSize: 10,
+    });
+
+    table.resetRowSelection();
+
+    fetchData();
+  };
+
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [statusFilter, page, showData, search, dateFilter]);
+  }, [
+    startDate,
+    endDate,
+    statusFilter,
+    showData,
+    page,
+    search,
+    pagination.pageIndex,
+    pagination.pageSize,
+  ]);
 
   async function getCategories() {
     const category = await listEnableCategory("4");
@@ -188,11 +228,11 @@ const TableSPIT = () => {
   }
 
   // Panggil fetchData otomatis ketika dateFilter berubah
-  React.useEffect(() => {
+  // React.useEffect(() => {
-    if (dateFilter) {
+  //   if (dateFilter) {
-      fetchData();
+  //     fetchData();
-    }
+  //   }
-  }, [dateFilter]);
+  // }, [dateFilter]);
 
   async function fetchData() {
     let isPublish;
@@ -203,18 +243,27 @@ const TableSPIT = () => {
     } else {
       isPublish = statusFilter.includes(1) ? false : true;
     }
+    const formattedStartDate = startDate
+      ? format(new Date(startDate), "yyyy-MM-dd")
+      : "";
 
-    const formattedStartDate = dateFilter
+    const formattedEndDate = endDate
-      ? format(new Date(dateFilter + "T00:00:00"), "yyyy-MM-dd")
+      ? format(new Date(endDate), "yyyy-MM-dd")
       : "";
 
     try {
       const res = await listSPIT(
+        // showData,
+        // page - 1,
+        // // limit,
+        // search,
+        // formattedStartDate,
+        // isPublish
         showData,
         page - 1,
-        // limit,
         search,
         formattedStartDate,
+        formattedEndDate,
         isPublish
       );
       const data = res?.data?.data;
@@ -231,6 +280,78 @@ const TableSPIT = () => {
     }
   }
 
+  // async function fetchData() {
+  //   let isPublish;
+  //   if (statusFilter.length === 0) {
+  //     isPublish = "";
+  //   } else if (statusFilter.length > 1) {
+  //     isPublish = "";
+  //   } else {
+  //     isPublish = statusFilter.includes(1) ? false : true;
+  //   }
+
+  //   // ✳️ format tanggal dari input (YYYY-MM-DD)
+  //   const formattedStartDate = startDate
+  //     ? format(new Date(startDate), "yyyy-MM-dd")
+  //     : "";
+
+  //   const formattedEndDate = endDate
+  //     ? format(new Date(endDate), "yyyy-MM-dd")
+  //     : "";
+
+  //   try {
+  //     const res = await listSPIT(
+  //       showData,
+  //       page - 1,
+  //       search,
+  //       formattedStartDate,
+  //       formattedEndDate,
+  //       isPublish
+  //     );
+
+  //     const data = res?.data?.data;
+  //     let contentData: any[] = data?.content || [];
+
+  //     // 🔒 FRONTEND RANGE FILTER TAMBAHAN (anti bocor November)
+  //     if (formattedStartDate || formattedEndDate) {
+  //       contentData = contentData.filter((item) => {
+  //         if (!item.contentCreatedDate) return false;
+
+  //         // jadikan string tanggal lokal 'yyyy-MM-dd'
+  //         const createdDateStr = format(
+  //           new Date(item.contentCreatedDate),
+  //           "yyyy-MM-dd"
+  //         );
+
+  //         if (formattedStartDate && createdDateStr < formattedStartDate) {
+  //           return false;
+  //         }
+
+  //         if (formattedEndDate && createdDateStr > formattedEndDate) {
+  //           return false;
+  //         }
+
+  //         return true;
+  //       });
+  //     }
+
+  //     // kasih nomor urut
+  //     const newData = contentData.map((item: any, index: number) => ({
+  //       ...item,
+  //       no: (page - 1) * Number(showData) + index + 1,
+  //     }));
+
+  //     setSpitTable(newData);
+  //     setTotalData(data?.totalElements || 0);
+  //     setTotalPage(data?.totalPages || 1);
+
+  //     // optional: bersihkan selection
+  //     table.resetRowSelection();
+  //   } 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);
@@ -312,6 +433,17 @@ const TableSPIT = () => {
                 <div className="flex flex-row justify-between my-1 mx-1">
                   <p>Filter</p>
                 </div>
+                <div className="flex justify-center px-3 pt-2 pb-1">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="text-xs text-gray-700 hover:bg-red-400 dark:text-white"
+                    onClick={handleResetFilter}
+                  >
+                    Reset Semua Filter
+                  </Button>
+                </div>
+
                 {/* <div className="mx-2 my-1">
                   <Label>{t("date", { defaultValue: "Date" })}</Label>
                   <Input
@@ -321,7 +453,7 @@ const TableSPIT = () => {
                     className="max-w-sm"
                   />
                 </div> */}
-                <div className="mx-2 my-1">
+                {/* <div className="mx-2 my-1">
                   <Label>{t("date", { defaultValue: "Tanggal" })}</Label>
                   <Input
                     type="date"
@@ -333,6 +465,23 @@ const TableSPIT = () => {
                     }}
                     className="max-w-sm"
                   />
+                </div> */}
+
+                <div className="mx-2 my-1">
+                  <Label>Tanggal Awal</Label>
+                  <Input
+                    type="date"
+                    value={startDate}
+                    onChange={(e) => setStartDate(e.target.value)}
+                  />
+                </div>
+                <div className="mx-2 my-1">
+                  <Label>Tanggal Akhir</Label>
+                  <Input
+                    type="date"
+                    value={endDate}
+                    onChange={(e) => setEndDate(e.target.value)}
+                  />
                 </div>
 
                 <Label className="ml-2 mt-2">Status</Label>

service/content/content.ts

@@ -78,7 +78,6 @@ export async function listDataSatker(
   );
 }
 
-
 export async function listDataImage(
   size: any = "",
   page: any = "",
@@ -160,15 +159,28 @@ export async function listDataAudio(
   );
 }
 
+// export async function listSPIT(
+//   size: any,
+//   page: any,
+//   title = "",
+//   contentCreatedDate = "",
+//   isPublish: any
+// ) {
+//   return await httpGetInterceptor(
+//     `media/spit/pagination?enablePage=1&page=${page}&size=${size}&sort=desc&sortBy=contentTitleId&title=${title}&startDate=${contentCreatedDate}&endDate=${contentCreatedDate}&isPublish=${isPublish}`
+//   );
+// }
+
 export async function listSPIT(
   size: any,
   page: any,
   title = "",
-  contentCreatedDate = "",
+  startDate = "",
+  endDate = "",
   isPublish: any
 ) {
   return await httpGetInterceptor(
-    `media/spit/pagination?enablePage=1&page=${page}&size=${size}&sort=desc&sortBy=contentTitleId&title=${title}&startDate=${contentCreatedDate}&endDate=${contentCreatedDate}&isPublish=${isPublish}`
+    `media/spit/pagination?enablePage=1&page=${page}&size=${size}&sort=desc&sortBy=contentTitleId&title=${title}&startDate=${startDate}&endDate=${endDate}&isPublish=${isPublish}`
   );
 }
 
@@ -190,11 +202,15 @@ export async function getTagsBySubCategoryId(subCategory: any) {
 }
 
 export async function listEnableCategory(type: any, status?: boolean) {
-  const url = `media/categories/list?enablePage=0&sort=desc&sortBy=id&type=${type}&isInt=true&isPublish=${status || ""}`;
+  const url = `media/categories/list?enablePage=0&sort=desc&sortBy=id&type=${type}&isInt=true&isPublish=${
+    status || ""
+  }`;
   return httpGetInterceptor(url);
 }
 export async function listEnableCategoryNew(type: any, status?: boolean) {
-  const url = `media/categories/list/publish?enablePage=0&sort=desc&sortBy=id&type=${type}&isPublish=${status || ""}`;
+  const url = `media/categories/list/publish?enablePage=0&sort=desc&sortBy=id&type=${type}&isPublish=${
+    status || ""
+  }`;
   return httpGetInterceptor(url);
 }