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 } =
+  const {
-    useSelect(CustomerApi.basePath, 'id', 'name', 'search');
+    options: customerOptions,
+    isLoadingOptions: isLoadingCustomers,
+    loadMore: loadMoreCustomers,
+    hasMore: hasMoreCustomers,
+  } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
-  const { options: salesOptions, isLoadingOptions: isLoadingSales } = useSelect(
+  const {
-    UserApi.basePath,
+    options: salesOptions,
-    'id',
+    isLoadingOptions: isLoadingSales,
-    'name',
+    loadMore: loadMoreSales,
-    'search'
+    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>