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) => {