feat(FE): Load more select options on scroll

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

@@ -53,15 +53,19 @@ const CustomerPaymentTab = () => {
 
   const filterModal = useModal();
 
-  const { options: customerOptions, isLoadingOptions: isLoadingCustomers } =
-    useSelect(CustomerApi.basePath, 'id', 'name', 'search');
+  const {
+    options: customerOptions,
+    isLoadingOptions: isLoadingCustomers,
+    loadMore: loadMoreCustomers,
+    hasMore: hasMoreCustomers,
+  } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
-  const { options: salesOptions, isLoadingOptions: isLoadingSales } = useSelect(
-    UserApi.basePath,
-    'id',
-    'name',
-    'search'
-  );
+  const {
+    options: salesOptions,
+    isLoadingOptions: isLoadingSales,
+    loadMore: loadMoreSales,
+    hasMore: hasMoreSales,
+  } = useSelect(UserApi.basePath, 'id', 'name', 'search');
 
   const dataTypeOptions = useMemo(
     () => [{ value: 'do_date', label: 'Tanggal Jual' }],
@@ -652,6 +656,7 @@ const CustomerPaymentTab = () => {
                   }}
                   isLoading={isLoadingCustomers}
                   isClearable
+                  onMenuScrollToBottom={loadMoreCustomers}
                   className={{ wrapper: 'w-full' }}
                 />
               </div>
@@ -667,6 +672,7 @@ const CustomerPaymentTab = () => {
                   }}
                   isLoading={isLoadingSales}
                   isClearable
+                  onMenuScrollToBottom={loadMoreSales}
                   className={{ wrapper: 'w-full' }}
                 />
               </div>