feat: implement lazy loading in SelectInput

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

@@ -55,6 +55,7 @@ const CustomerPaymentTab = () => {
 
   const {
     options: customerOptions,
+    setInputValue: setCustomerInputValue,
     isLoadingOptions: isLoadingCustomers,
     loadMore: loadMoreCustomers,
     hasMore: hasMoreCustomers,
@@ -62,6 +63,7 @@ const CustomerPaymentTab = () => {
 
   const {
     options: salesOptions,
+    setInputValue: setSalesInputValue,
     isLoadingOptions: isLoadingSales,
     loadMore: loadMoreSales,
     hasMore: hasMoreSales,
@@ -654,6 +656,7 @@ const CustomerPaymentTab = () => {
                       Array.isArray(val) ? val : val ? [val] : []
                     );
                   }}
+                  onInputChange={setCustomerInputValue}
                   isLoading={isLoadingCustomers}
                   isClearable
                   onMenuScrollToBottom={loadMoreCustomers}
@@ -670,6 +673,7 @@ const CustomerPaymentTab = () => {
                   onChange={(val) => {
                     setFilterSales(Array.isArray(val) ? val : val ? [val] : []);
                   }}
+                  onInputChange={setSalesInputValue}
                   isLoading={isLoadingSales}
                   isClearable
                   onMenuScrollToBottom={loadMoreSales}

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

@@ -33,6 +33,7 @@ import {
 } from '@/components/pages/report/finance/filter/DebtSupplierFilter';
 import { getFilledFormikValuesCount } from '@/lib/formik-helper';
 import ButtonFilter from '@/components/helper/ButtonFilter';
+import { Supplier } from '@/types/api/master-data/supplier';
 
 const DebtSupplierTab = () => {
   // ===== STATE MANAGEMENT =====
@@ -51,10 +52,12 @@ const DebtSupplierTab = () => {
 
   const filterModal = useModal();
 
-  const { options: supplierOptions, isLoadingOptions: isLoadingSuppliers } =
-    useSelect(SupplierApi.basePath, 'id', 'name', '', {
-      limit: 'limit',
-    });
+  const {
+    setInputValue: setSupplierInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSupplierOptions,
+    loadMore: loadMoreSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
 
   const dataTypeOptions = useMemo(
     () => [
@@ -610,7 +613,9 @@ const DebtSupplierTab = () => {
                     Array.isArray(val) ? val : val ? [val] : null
                   );
                 }}
-                isLoading={isLoadingSuppliers}
+                onInputChange={setSupplierInputValue}
+                onMenuScrollToBottom={loadMoreSuppliers}
+                isLoading={isLoadingSupplierOptions}
                 isClearable
                 className={{ wrapper: 'w-full' }}
                 isError={