feat: add more filters

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

@@ -38,6 +38,7 @@ import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton
 import { OptionType } from '@/components/table/TableRowSizeSelector';
 import { Color } from '@/types/theme';
 import ButtonFilter from '@/components/helper/ButtonFilter';
+import Pagination from '@/components/Pagination';
 
 interface CustomerPaymentTabProps {
   tabId: string;
@@ -58,7 +59,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
 
   // ===== PAGINATION STATE =====
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(10);
 
   // ===== SUBMISSION STATE =====
   const [filterParams, setFilterParams] = useState<FilterParams>({});
@@ -117,8 +118,13 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   });
 
   handleFilterModalOpenRef.current = () => {
+    formik.setValues({
+      start_date: filterParams.start_date || null,
+      end_date: filterParams.end_date || null,
+      customer_ids: filterParams.customer_ids || null,
+      filter_by: filterParams.filter_by || null,
+    });
     filterModal.openModal();
-    formik.validateForm();
   };
 
   const getPaymentStatusBadgeColor = (notes: string): Color => {
@@ -249,6 +255,14 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     [customerPayment]
   );
 
+  const meta = useMemo(
+    () =>
+      isResponseSuccess(customerPayment) && customerPayment.meta
+        ? customerPayment.meta
+        : null,
+    [customerPayment]
+  );
+
   // ===== EXPORT DATA FETCHER =====
   const customerPaymentExport = useCallback(async (): Promise<
     CustomerPaymentReport[] | null
@@ -717,6 +731,29 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
           />
         )}
 
+        {!isLoading && data.length > 0 && meta && (
+          <div className='max-w-sm ml-auto'>
+            <Pagination
+              totalItems={meta.total_results || 0}
+              itemsPerPage={meta.limit || 0}
+              currentPage={meta.page || 0}
+              onPrevPage={() =>
+                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
+              }
+              onNextPage={() =>
+                setCurrentPage((curr) =>
+                  meta.total_pages && curr < meta.total_pages
+                    ? curr + 1
+                    : curr
+                )
+              }
+              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
+              rowOptions={[10, 20, 50, 100]}
+              onRowChange={setPageSize}
+            />
+          </div>
+        )}
+
         {!isLoading &&
           data.length > 0 &&
           data.map((customerReport) => {

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

@@ -1,6 +1,7 @@
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import Dropdown from '@/components/Dropdown';
+import Pagination from '@/components/Pagination';
 import DateInput from '@/components/input/DateInput';
 import { OptionType, useSelect } from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
@@ -78,6 +79,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
   const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
 
+  // ===== PAGINATION STATE =====
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
   // ===== SUBMISSION STATE =====
   const [filterParams, setFilterParams] = useState<DebtSupplierFilter>({
     start_date: undefined,
@@ -128,7 +133,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         filter_by: values.filterBy?.value?.toString() || undefined,
       });
       filterModal.closeModal();
-      // setIsSubmitted(true);
+      setCurrentPage(1);
     },
     onReset: () => {
       setFilterParams({
@@ -137,14 +142,29 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         supplier_ids: undefined,
         filter_by: undefined,
       });
-      // setIsSubmitted(false);
+      setCurrentPage(1);
       filterModal.closeModal();
     },
   });
 
   handleFilterModalOpenRef.current = () => {
+    const restoredFilterBy =
+      dataTypeOptions.find((opt) => opt.value === filterParams.filter_by) || null;
+
+    const supplierIdList = filterParams.supplier_ids
+      ? filterParams.supplier_ids.split(',')
+      : [];
+    const restoredSupplierIds = supplierOptions.filter((opt) =>
+      supplierIdList.includes(String(opt.value))
+    );
+
+    formik.setValues({
+      startDate: filterParams.start_date || null,
+      endDate: filterParams.end_date || null,
+      supplierIds: restoredSupplierIds.length > 0 ? restoredSupplierIds : null,
+      filterBy: restoredFilterBy,
+    });
     filterModal.openModal();
-    formik.validateForm();
   };
 
   // ===== DATA FETCHING =====
@@ -155,6 +175,8 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         filter_by: filterParams.filter_by,
         start_date: filterParams.start_date,
         end_date: filterParams.end_date,
+        page: currentPage,
+        limit: pageSize,
       };
 
       return ['debt-supplier-report', params];
@@ -164,7 +186,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         params.supplier_ids,
         params.filter_by,
         params.start_date,
-        params.end_date
+        params.end_date,
+        params.page,
+        params.limit
       )
   );
 
@@ -176,6 +200,14 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     [debtSupplier]
   );
 
+  const meta = useMemo(
+    () =>
+      isResponseSuccess(debtSupplier) && debtSupplier.meta
+        ? debtSupplier.meta
+        : null,
+    [debtSupplier]
+  );
+
   // ===== EXPORT DATA FETCHER =====
   const debtSupplierExport = useCallback(async (): Promise<
     DebtSupplier[] | null
@@ -630,6 +662,29 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
           />
         )}
 
+        {!isLoading && data.length > 0 && meta && (
+          <div className='max-w-sm ml-auto'>
+            <Pagination
+              totalItems={meta.total_results || 0}
+              itemsPerPage={meta.limit || 0}
+              currentPage={meta.page || 0}
+              onPrevPage={() =>
+                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
+              }
+              onNextPage={() =>
+                setCurrentPage((curr) =>
+                  meta.total_pages && curr < meta.total_pages
+                    ? curr + 1
+                    : curr
+                )
+              }
+              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
+              rowOptions={[10, 20, 50, 100]}
+              onRowChange={setPageSize}
+            />
+          </div>
+        )}
+
         {!isLoading &&
           data.length > 0 &&
           data.map((supplierReport) => {