refactor: optimize DebtSupplierTab with useTableFilter persistence pattern

Replace filterParams/currentPage/pageSize state with useTableFilter (persist:true),
switch SWR to httpClientFetcher with explicit type, store OptionType[] directly for
suppliers/filterBy, add formikResetHandler using resetFilter(), remove TabActions
component anti-pattern and handleFilterModalOpenRef, pass filterModal.openModal directly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/pages/report/finance/tab/DebtSupplierTab.tsx

@@ -9,23 +9,15 @@ import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 import { SupplierApi } from '@/services/api/master-data';
-import {
+import { DebtRow, DebtSupplier } from '@/types/api/report/debt-supplier';
-  DebtRow,
-  DebtSupplier,
-  DebtSupplierFilter,
-} from '@/types/api/report/debt-supplier';
 import { generateDebtSupplierPDF } from '@/components/pages/report/finance/export/DebtSupllierExportPDF';
 import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 import { DebtSupplierApi } from '@/services/api/report/debt-supplier';
 import { useFormik } from 'formik';
-import {
-  DebtSupplierFilterSchema,
-  DebtSupplierFilterType,
-} from '@/components/pages/report/finance/filter/DebtSupplierFilter';
 import ButtonFilter from '@/components/helper/ButtonFilter';
 import { Color } from '@/types/theme';
 import { Supplier } from '@/types/api/master-data/supplier';
@@ -34,6 +26,10 @@ import SelectInputRadio from '@/components/input/SelectInputRadio';
 import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import StatusBadge from '@/components/helper/StatusBadge';
 import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { AxiosError } from 'axios';
 
 const dueStatus: Record<string, Color> = {
   'Sudah Jatuh Tempo': 'error',
@@ -51,7 +47,6 @@ const getPillBadge = (
   statusText: string,
   type: 'due' | 'payment' = 'payment'
 ) => {
-  // Get color based on type
   const color =
     type === 'due'
       ? dueStatus[statusText] || 'neutral'
@@ -68,6 +63,11 @@ const getPillBadge = (
   );
 };
 
+const dataTypeOptions: OptionType<string>[] = [
+  { value: 'received_date', label: 'Tanggal Terima' },
+  { value: 'po_date', label: 'Tanggal PO' },
+];
+
 interface DebtSupplierTabProps {
   tabId: string;
 }
@@ -81,26 +81,45 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
   const isAnyExportLoading =
     isPdfExportLoading || isExcelExportLoading || isExcelGeneralExportLoading;
 
-  // ===== PAGINATION STATE =====
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-
-  // ===== SUBMISSION STATE =====
-  const [filterParams, setFilterParams] = useState<DebtSupplierFilter>({
-    start_date: undefined,
-    end_date: undefined,
-    supplier_ids: undefined,
-    filter_by: undefined,
-  });
-
-  // ===== DATE ERROR STATE =====
   const [dateErrorShown, setDateErrorShown] = useState(false);
   const [hasDateError, setHasDateError] = useState(false);
 
-  const handleFilterModalOpenRef = useRef(() => {});
-
   const filterModal = useModal();
 
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+    reset: resetFilter,
+  } = useTableFilter<{
+    start_date: string;
+    end_date: string;
+    suppliers: OptionType<number>[];
+    filterBy?: OptionType<string>;
+  }>({
+    initial: {
+      start_date: '',
+      end_date: '',
+      suppliers: [],
+      filterBy: undefined,
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      start_date: 'start_date',
+      end_date: 'end_date',
+      suppliers: 'supplier_ids',
+      filterBy: 'filter_by',
+    },
+    persist: true,
+    storeName: 'debt-supplier-report-table',
+  });
+
   const {
     setInputValue: setSupplierInputValue,
     options: supplierOptions,
@@ -108,154 +127,149 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     loadMore: loadMoreSuppliers,
   } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
 
-  const dataTypeOptions = useMemo(
-    () => [
-      { value: 'received_date', label: 'Tanggal Terima' },
-      { value: 'po_date', label: 'Tanggal PO' },
-    ],
-    []
-  );
-
   // ===== FORMIK SETUP =====
-  const formik = useFormik<DebtSupplierFilterType>({
+  const formik = useFormik({
     initialValues: {
-      startDate: null,
+      start_date: tableFilterState.start_date,
-      endDate: null,
+      end_date: tableFilterState.end_date,
-      supplierIds: null,
+      suppliers: tableFilterState.suppliers,
-      filterBy: null,
+      filterBy: tableFilterState.filterBy,
     },
-    validationSchema: DebtSupplierFilterSchema,
     onSubmit: (values) => {
-      setFilterParams({
+      updateFilter('start_date', values.start_date, true);
-        start_date: values.startDate?.toString() || undefined,
+      updateFilter('end_date', values.end_date, true);
-        end_date: values.endDate?.toString() || undefined,
+      updateFilter('suppliers', values.suppliers, true);
-        supplier_ids:
+      updateFilter('filterBy', values.filterBy, true);
-          values.supplierIds?.map((v) => String(v.value)).join(',') ||
-          undefined,
-        filter_by: values.filterBy?.value?.toString() || undefined,
-      });
-      filterModal.closeModal();
-      setCurrentPage(1);
-    },
-    onReset: () => {
-      setFilterParams({
-        start_date: undefined,
-        end_date: undefined,
-        supplier_ids: undefined,
-        filter_by: undefined,
-      });
-      setCurrentPage(1);
       filterModal.closeModal();
     },
   });
 
-  handleFilterModalOpenRef.current = () => {
+  const formikResetHandler = () => {
-    const restoredFilterBy =
+    resetFilter();
-      dataTypeOptions.find((opt) => opt.value === filterParams.filter_by) ||
-      null;
 
-    const supplierIdList = filterParams.supplier_ids
+    setHasDateError(false);
-      ? filterParams.supplier_ids.split(',')
+    if (dateErrorShown) {
-      : [];
+      toast.dismiss();
-    const restoredSupplierIds = supplierOptions.filter((opt) =>
+      setDateErrorShown(false);
-      supplierIdList.includes(String(opt.value))
+    }
-    );
 
-    formik.setValues({
+    formik.resetForm({
-      startDate: filterParams.start_date || null,
+      values: {
-      endDate: filterParams.end_date || null,
+        start_date: '',
-      supplierIds: restoredSupplierIds.length > 0 ? restoredSupplierIds : null,
+        end_date: '',
-      filterBy: restoredFilterBy,
+        suppliers: [],
+        filterBy: undefined,
+      },
     });
-    filterModal.openModal();
+
+    filterModal.closeModal();
+  };
+
+  // ===== DATE CHANGE HANDLERS =====
+  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('start_date', value);
+
+    if (value && formik.values.end_date) {
+      if (new Date(formik.values.end_date) < new Date(value)) {
+        setHasDateError(true);
+        if (!dateErrorShown) {
+          toast.error('Tanggal akhir tidak boleh masa lampau', {
+            duration: Infinity,
+          });
+          setDateErrorShown(true);
+        }
+      } else {
+        setHasDateError(false);
+        if (dateErrorShown) {
+          toast.dismiss();
+          setDateErrorShown(false);
+        }
+      }
+    } else {
+      setHasDateError(false);
+    }
+  };
+
+  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('end_date', value);
+
+    if (value && formik.values.start_date) {
+      if (new Date(value) < new Date(formik.values.start_date)) {
+        setHasDateError(true);
+        if (!dateErrorShown) {
+          toast.error('Tanggal akhir tidak boleh masa lampau', {
+            duration: Infinity,
+          });
+          setDateErrorShown(true);
+        }
+        return;
+      }
+    }
+
+    setHasDateError(false);
+    if (dateErrorShown) {
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
   };
 
   // ===== DATA FETCHING =====
-  const { data: debtSupplier, isLoading } = useSWR(
+  const { data: debtSupplierResponse, isLoading } = useSWR<
-    () => {
+    BaseApiResponse<DebtSupplier[]>,
-      const params = {
+    AxiosError<BaseApiResponse>,
-        supplier_ids: filterParams.supplier_ids,
+    SWRHttpKey
-        filter_by: filterParams.filter_by,
+  >(
-        start_date: filterParams.start_date,
+    `${DebtSupplierApi.basePath}/debt-supplier${getTableFilterQueryString()}`,
-        end_date: filterParams.end_date,
+    httpClientFetcher
-        page: currentPage,
-        limit: pageSize,
-      };
-
-      return ['debt-supplier-report', params];
-    },
-    ([, params]) =>
-      DebtSupplierApi.getDebtSupplierReport(
-        params.supplier_ids,
-        params.filter_by,
-        params.start_date,
-        params.end_date,
-        params.page,
-        params.limit
-      )
   );
 
-  const data: DebtSupplier[] = useMemo(
+  const data: DebtSupplier[] = isResponseSuccess(debtSupplierResponse)
-    () =>
+    ? ((debtSupplierResponse?.data as unknown as DebtSupplier[]) ?? [])
-      isResponseSuccess(debtSupplier)
+    : [];
-        ? (debtSupplier?.data as unknown as DebtSupplier[]) || []
-        : [],
-    [debtSupplier]
-  );
 
-  const meta = useMemo(
+  const meta =
-    () =>
+    isResponseSuccess(debtSupplierResponse) && debtSupplierResponse.meta
-      isResponseSuccess(debtSupplier) && debtSupplier.meta
+      ? debtSupplierResponse.meta
-        ? debtSupplier.meta
+      : null;
-        : null,
-    [debtSupplier]
-  );
 
   // ===== EXPORT DATA FETCHER =====
   const debtSupplierExport = useCallback(async (): Promise<
     DebtSupplier[] | null
   > => {
-    const params = {
+    const supplier_ids =
-      supplier_ids:
+      tableFilterState.suppliers.length > 0
-        formik.values.supplierIds && formik.values.supplierIds.length > 0
+        ? tableFilterState.suppliers.map((o) => String(o.value)).join(',')
-          ? formik.values.supplierIds.map((v) => String(v.value)).join(',')
+        : undefined;
-          : undefined,
-      filter_by: formik.values.filterBy?.value?.toString() || undefined,
-      start_date: formik.values.startDate || undefined,
-      end_date: formik.values.endDate || undefined,
-      date_type: formik.values.filterBy
-        ? formik.values.filterBy.value
-        : undefined,
-      limit: 100,
-      page: 1,
-    };
 
     const response = await DebtSupplierApi.getDebtSupplierReport(
-      params.supplier_ids,
+      supplier_ids,
-      params.filter_by,
+      tableFilterState.filterBy?.value,
-      params.start_date,
+      tableFilterState.start_date || undefined,
-      params.end_date
+      tableFilterState.end_date || undefined,
+      1,
+      100
     );
 
     return isResponseSuccess(response)
       ? (response.data as unknown as DebtSupplier[])
       : null;
-  }, [
+  }, [tableFilterState]);
-    formik.values.supplierIds,
-    formik.values.startDate,
-    formik.values.endDate,
-    formik.values.filterBy,
-  ]);
 
   // ===== EXPORT HANDLERS =====
   const handleExportExcel = useCallback(async () => {
     setIsExcelExportLoading(true);
     try {
+      const supplier_ids =
+        tableFilterState.suppliers.length > 0
+          ? tableFilterState.suppliers.map((o) => String(o.value)).join(',')
+          : undefined;
       await DebtSupplierApi.exportToExcelSupplierPerSheet(
-        filterParams.supplier_ids,
+        supplier_ids,
-        filterParams.filter_by,
+        tableFilterState.filterBy?.value,
-        filterParams.start_date,
+        tableFilterState.start_date || undefined,
-        filterParams.end_date
+        tableFilterState.end_date || undefined
       );
       toast.success('Excel berhasil dibuat dan diunduh.');
     } catch {
@@ -263,7 +277,30 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     } finally {
       setIsExcelExportLoading(false);
     }
-  }, [filterParams]);
+  }, [tableFilterState]);
+
+  const handleExportExcelGeneral = useCallback(async () => {
+    setIsExcelGeneralExportLoading(true);
+    try {
+      const supplier_ids =
+        tableFilterState.suppliers.length > 0
+          ? tableFilterState.suppliers.map((o) => String(o.value)).join(',')
+          : undefined;
+
+      await DebtSupplierApi.exportToExcelGeneral(
+        supplier_ids,
+        tableFilterState.filterBy?.value,
+        tableFilterState.start_date || undefined,
+        tableFilterState.end_date || undefined
+      );
+
+      toast.success('Excel General berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat Excel General. Silakan coba lagi.');
+    } finally {
+      setIsExcelGeneralExportLoading(false);
+    }
+  }, [tableFilterState]);
 
   const handleExportPdf = useCallback(async () => {
     setIsPdfExportLoading(true);
@@ -279,15 +316,18 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         return;
       }
 
+      const supplierName =
+        tableFilterState.suppliers.length > 0
+          ? tableFilterState.suppliers.map((o) => o.label).join(', ')
+          : undefined;
+
       await generateDebtSupplierPDF({
         data: allDataForExport,
         params: {
-          supplier_name: formik.values.supplierIds
+          supplier_name: supplierName,
-            ?.map((v) => v.label)
+          filter_by: tableFilterState.filterBy?.label,
-            .join(', '),
+          start_date: tableFilterState.start_date || undefined,
-          filter_by: formik.values.filterBy?.label,
+          end_date: tableFilterState.end_date || undefined,
-          start_date: formik.values.startDate || undefined,
-          end_date: formik.values.endDate || undefined,
         },
       });
       toast.success('PDF berhasil dibuat dan diunduh.');
@@ -296,131 +336,91 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     } finally {
       setIsPdfExportLoading(false);
     }
-  }, [
+  }, [debtSupplierExport, tableFilterState]);
-    debtSupplierExport,
-    formik.values.supplierIds,
-    formik.values.filterBy,
-    formik.values.startDate,
-    formik.values.endDate,
-  ]);
 
-  const handleExportExcelGeneral = useCallback(async () => {
+  // ===== TAB ACTIONS =====
-    setIsExcelGeneralExportLoading(true);
+  useEffect(() => {
-    try {
+    setTabActions(
-      await DebtSupplierApi.exportToExcelGeneral(
+      tabId,
-        filterParams.supplier_ids,
+      <div className='flex flex-row gap-3'>
-        filterParams.filter_by,
+        <ButtonFilter
-        filterParams.start_date,
+          values={{
-        filterParams.end_date
+            start_date: tableFilterState.start_date,
-      );
+            end_date: tableFilterState.end_date,
-      toast.success('Excel General berhasil dibuat dan diunduh.');
+            suppliers: tableFilterState.suppliers,
-    } catch {
+            filterBy: tableFilterState.filterBy,
-      toast.error('Gagal membuat Excel General. Silakan coba lagi.');
+          }}
-    } finally {
+          fieldGroups={[['start_date', 'end_date']]}
-      setIsExcelGeneralExportLoading(false);
+          onClick={filterModal.openModal}
-    }
+          variant='outline'
-  }, [filterParams]);
+          className='px-3 py-2.5'
+        />
 
-  // ===== TAB ACTIONS COMPONENT =====
+        <Dropdown
-  const TabActions = useMemo(() => {
+          align='end'
-    return function TabActionsComponent() {
+          direction='bottom'
-      const setTabActions = useTabActionsStore((state) => state.setTabActions);
+          className={{
-      const clearTabActions = useTabActionsStore(
+            content:
-        (state) => state.clearTabActions
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
-      );
+          }}
-
+          trigger={
-      useEffect(() => {
+            <Button
-        setTabActions(
-          tabId,
-          <div className='flex flex-row gap-3'>
-            <ButtonFilter
-              values={filterParams}
-              fieldGroups={[['start_date', 'end_date']]}
-              onClick={() => handleFilterModalOpenRef.current()}
               variant='outline'
-              className='px-3 py-2.5'
+              color='none'
-            />
+              isLoading={isAnyExportLoading}
-
+              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-            <Dropdown
-              align='end'
-              direction='bottom'
-              className={{
-                content:
-                  'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
-              }}
-              trigger={
-                <Button
-                  variant='outline'
-                  color='none'
-                  isLoading={isAnyExportLoading}
-                  className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-                >
-                  <div className='flex flex-row items-center gap-1.5'>
-                    <Icon
-                      icon='heroicons:cloud-arrow-down'
-                      width={20}
-                      height={20}
-                    />
-
-                    <span>Export</span>
-
-                    <div className='w-px self-stretch bg-base-content/10' />
-
-                    <Icon
-                      icon='heroicons:chevron-down'
-                      width={14}
-                      height={14}
-                    />
-                  </div>
-                </Button>
-              }
             >
-              <Button
+              <div className='flex flex-row items-center gap-1.5'>
-                variant='ghost'
+                <Icon
-                color='none'
+                  icon='heroicons:cloud-arrow-down'
-                onClick={handleExportExcel}
+                  width={20}
-                isLoading={isExcelExportLoading}
+                  height={20}
-                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+                />
-              >
+                <span>Export</span>
-                <Icon icon='heroicons:table-cells' width={20} height={20} />
+                <div className='w-px self-stretch bg-base-content/10' />
-                Export to Excel - Supplier Per Sheet
+                <Icon icon='heroicons:chevron-down' width={14} height={14} />
-              </Button>
+              </div>
-              <Button
+            </Button>
-                variant='ghost'
+          }
-                color='none'
+        >
-                onClick={handleExportExcelGeneral}
+          <Button
-                isLoading={isExcelGeneralExportLoading}
+            variant='ghost'
-                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+            color='none'
-              >
+            onClick={handleExportExcel}
-                <Icon icon='heroicons:table-cells' width={20} height={20} />
+            isLoading={isExcelExportLoading}
-                Export to Excel - General
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
-              </Button>
+          >
-              <Button
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
-                variant='ghost'
+            Export to Excel - Supplier Per Sheet
-                color='none'
+          </Button>
-                onClick={handleExportPdf}
+          <Button
-                isLoading={isPdfExportLoading}
+            variant='ghost'
-                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+            color='none'
-              >
+            onClick={handleExportExcelGeneral}
-                <Icon icon='heroicons:document' width={20} height={20} />
+            isLoading={isExcelGeneralExportLoading}
-                Export to PDF
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
-              </Button>
+          >
-            </Dropdown>
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
-          </div>
+            Export to Excel - General
-        );
+          </Button>
-      }, [setTabActions]);
+          <Button
-
+            variant='ghost'
-      useEffect(() => {
+            color='none'
-        return () => {
+            onClick={handleExportPdf}
-          clearTabActions(tabId);
+            isLoading={isPdfExportLoading}
-        };
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
-      }, [clearTabActions]);
+          >
-
+            <Icon icon='heroicons:document' width={20} height={20} />
-      return null;
+            Export to PDF
-    };
+          </Button>
+        </Dropdown>
+      </div>
+    );
   }, [
     tabId,
-    filterParams,
+    setTabActions,
+    tableFilterState,
+    filterModal.openModal,
     isAnyExportLoading,
     handleExportExcel,
     handleExportExcelGeneral,
@@ -430,24 +430,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     isPdfExportLoading,
   ]);
 
-  const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
-
   useEffect(() => {
-    return () => {
+    return () => clearTabActions(tabId);
-      if (dateErrorShown) {
+  }, [tabId, clearTabActions]);
-        toast.dismiss();
-      }
-    };
-  }, [dateErrorShown]);
-
-  useEffect(() => {
-    return () => {
-      if (dateErrorShown) {
-        toast.dismiss();
-        setDateErrorShown(false);
-      }
-    };
-  }, [filterModal.open, dateErrorShown]);
 
   const getTableColumns = (supplier?: DebtSupplier): ColumnDef<DebtRow>[] => [
     {
@@ -662,9 +647,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
       },
     },
   ];
+
   return (
     <>
-      {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {isLoading && (
           <div className='w-full flex flex-row justify-center items-center p-4'>
@@ -693,16 +678,16 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
             <Pagination
               totalItems={meta.total_results || 0}
               itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
+              currentPage={tableFilterState.page}
-              onPrevPage={() =>
+              onPrevPage={() => setPage(Math.max(1, tableFilterState.page - 1))}
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
               onNextPage={() =>
-                setCurrentPage((curr) =>
+                setPage(
-                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                  meta.total_pages && tableFilterState.page < meta.total_pages
+                    ? tableFilterState.page + 1
+                    : tableFilterState.page
                 )
               }
-              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
+              onPageChange={setPage}
               rowOptions={[10, 20, 50, 100]}
               onRowChange={setPageSize}
             />
@@ -802,16 +787,16 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
             <Pagination
               totalItems={meta.total_results || 0}
               itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
+              currentPage={tableFilterState.page}
-              onPrevPage={() =>
+              onPrevPage={() => setPage(Math.max(1, tableFilterState.page - 1))}
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
               onNextPage={() =>
-                setCurrentPage((curr) =>
+                setPage(
-                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                  meta.total_pages && tableFilterState.page < meta.total_pages
+                    ? tableFilterState.page + 1
+                    : tableFilterState.page
                 )
               }
-              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
+              onPageChange={setPage}
               rowOptions={[10, 20, 50, 100]}
               onRowChange={setPageSize}
             />
@@ -827,23 +812,23 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
           modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
         }}
       >
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
+        {/* Modal Header */}
-          {/* Modal Header */}
+        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
+          <div className='flex items-center gap-2 text-primary'>
-            <div className='flex items-center gap-2 text-primary'>
+            <Icon icon='heroicons:funnel' width={20} height={20} />
-              <Icon icon='heroicons:funnel' width={20} height={20} />
+            <h3 className='font-medium text-sm'>Filter Data</h3>
-              <h3 className='font-medium text-sm'>Filter Data</h3>
-            </div>
-            <Button
-              variant='link'
-              type='button'
-              onClick={filterModal.closeModal}
-              className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
-            >
-              <Icon icon='heroicons:x-mark' width={20} height={20} />
-            </Button>
           </div>
+          <Button
+            variant='link'
+            type='button'
+            onClick={filterModal.closeModal}
+            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
+          >
+            <Icon icon='heroicons:x-mark' width={20} height={20} />
+          </Button>
+        </div>
 
+        <form onSubmit={formik.handleSubmit} onReset={formikResetHandler}>
           {/* Modal Body */}
           <div className='p-4 flex flex-col gap-1.5'>
             <div>
@@ -852,153 +837,68 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
               </label>
               <div className='flex flex-row gap-1.5 items-center justify-between'>
                 <DateInput
-                  name='startDate'
+                  name='start_date'
-                  value={formik.values.startDate || ''}
+                  value={formik.values.start_date || ''}
-                  onChange={(e) => {
+                  onChange={handleStartDateChange}
-                    const value = e.target.value;
-                    formik.setFieldValue('startDate', value || null);
-
-                    if (value && formik.values.endDate) {
-                      const startDate = new Date(value);
-                      const endDateObj = new Date(formik.values.endDate);
-
-                      if (endDateObj < startDate) {
-                        setHasDateError(true);
-                        if (!dateErrorShown) {
-                          toast.error('Tanggal akhir tidak boleh masa lampau', {
-                            duration: Infinity,
-                          });
-                          setDateErrorShown(true);
-                        }
-                      } else {
-                        setHasDateError(false);
-                        if (dateErrorShown) {
-                          toast.dismiss();
-                          setDateErrorShown(false);
-                        }
-                      }
-                    } else {
-                      setHasDateError(false);
-                    }
-                  }}
                   className={{ wrapper: 'w-full' }}
-                  isError={
-                    formik.touched.startDate && !!formik.errors.startDate
-                  }
-                  errorMessage={formik.errors.startDate}
                   isNestedModal
                 />
-                <hr className='w-full max-w-3 h-px border-base-content/10'></hr>
+                <hr className='w-full max-w-3 h-px border-base-content/10' />
                 <DateInput
-                  name='endDate'
+                  name='end_date'
-                  value={formik.values.endDate || ''}
+                  value={formik.values.end_date || ''}
-                  onChange={(e) => {
+                  onChange={handleEndDateChange}
-                    const value = e.target.value;
-                    formik.setFieldValue('endDate', value || null);
-
-                    if (value && formik.values.startDate) {
-                      const startDateObj = new Date(formik.values.startDate);
-                      const endDate = new Date(value);
-
-                      if (endDate < startDateObj) {
-                        setHasDateError(true);
-                        if (!dateErrorShown) {
-                          toast.error('Tanggal akhir tidak boleh masa lampau', {
-                            duration: Infinity,
-                          });
-                          setDateErrorShown(true);
-                        }
-                        return;
-                      }
-                    }
-
-                    setHasDateError(false);
-                    if (dateErrorShown) {
-                      toast.dismiss();
-                      setDateErrorShown(false);
-                    }
-                  }}
                   className={{ wrapper: 'w-full' }}
-                  isError={
-                    (formik.touched.endDate && !!formik.errors.endDate) ||
-                    hasDateError
-                  }
-                  errorMessage={formik.errors.endDate}
                   isNestedModal
+                  isError={hasDateError}
                 />
               </div>
             </div>
 
-            <div>
+            <SelectInputCheckbox
-              <SelectInputCheckbox
+              label='Supplier'
-                label='Supplier'
+              placeholder='Pilih Supplier'
-                placeholder='Pilih Supplier'
+              options={supplierOptions}
-                isMulti
+              value={formik.values.suppliers}
-                options={supplierOptions}
+              onChange={(val) =>
-                value={
+                formik.setFieldValue('suppliers', Array.isArray(val) ? val : [])
-                  (formik.values.supplierIds as
+              }
-                    | { value: number; label: string }
+              onInputChange={setSupplierInputValue}
-                    | { value: number; label: string }[]
+              onMenuScrollToBottom={loadMoreSuppliers}
-                    | null
+              isLoading={isLoadingSupplierOptions}
-                    | undefined) || []
+              isClearable
-                }
+              className={{ wrapper: 'w-full' }}
-                onChange={(val) => {
+            />
-                  formik.setFieldValue(
-                    'supplierIds',
-                    Array.isArray(val) ? val : val ? [val] : null
-                  );
-                }}
-                onInputChange={setSupplierInputValue}
-                onMenuScrollToBottom={loadMoreSuppliers}
-                isLoading={isLoadingSupplierOptions}
-                isClearable
-                className={{ wrapper: 'w-full' }}
-                isError={
-                  formik.touched.supplierIds && !!formik.errors.supplierIds
-                }
-                errorMessage={formik.errors.supplierIds as string}
-              />
-            </div>
 
-            <div>
+            <SelectInputRadio
-              <SelectInputRadio
+              label='Filter Berdasarkan'
-                label='Filter Berdasarkan'
+              placeholder='Pilih Filter Berdasarkan'
-                placeholder='Pilih Filter Berdasarkan'
+              options={dataTypeOptions}
-                options={dataTypeOptions}
+              value={formik.values.filterBy ?? null}
-                value={
+              onChange={(val) =>
-                  (formik.values.filterBy as
+                formik.setFieldValue(
-                    | { value: string; label: string }
+                  'filterBy',
-                    | { value: string; label: string }[]
+                  !Array.isArray(val) ? (val ?? undefined) : undefined
-                    | null
+                )
-                    | undefined) || null
+              }
-                }
+              className={{ wrapper: 'w-full' }}
-                onChange={(val) => {
+              isClearable
-                  formik.setFieldValue(
+            />
-                    'filterBy',
-                    val ? (val as OptionType) : null
-                  );
-                }}
-                className={{ wrapper: 'w-full' }}
-                isClearable
-                isError={formik.touched.filterBy && !!formik.errors.filterBy}
-                errorMessage={formik.errors.filterBy as string}
-              />
-            </div>
           </div>
 
-          {/* Action Buttons */}
+          {/* Modal Footer */}
           <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
             <Button
-              variant='soft'
-              color='none'
-              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
               type='reset'
+              variant='soft'
+              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
             >
               Reset Filter
             </Button>
             <Button
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
               type='submit'
+              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
+              disabled={hasDateError}
             >
               Apply Filter
             </Button>