feat: implement lazy loading in SelectInput

src/components/pages/report/expense/ReportExpenseTable.tsx

@@ -26,6 +26,15 @@ import MenuItem from '@/components/menu/MenuItem';
 import * as XLSX from 'xlsx';
 import { generateReportExpensePDF } from './pdf/ReportExpenseExport';
 import toast from 'react-hot-toast';
+import {
+  KandangApi,
+  LocationApi,
+  NonstockApi,
+  SupplierApi,
+} from '@/services/api/master-data';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Nonstock } from '@/types/api/master-data/nonstock';
 
 const ReportExpenseTable = () => {
   // ===== STATE MANAGEMENT =====
@@ -64,16 +73,33 @@ const ReportExpenseTable = () => {
   });
 
   // ===== SELECT OPTIONS =====
-  const { options: optionsLocation, isLoadingOptions: isLoadingLocation } =
-    useSelect(`/master-data/locations`, 'id', 'name');
-  const { options: optionsSupplier, isLoadingOptions: isLoadingSupplier } =
-    useSelect(`/master-data/suppliers`, 'id', 'name');
-  const { options: optionsKandang, isLoadingOptions: isLoadingKandang } =
-    useSelect(`/master-data/kandangs`, 'id', 'name', '', {
-      location_id: filterState.location_id,
-    });
-  const { options: optionsNonstock, isLoadingOptions: isLoadingNonstock } =
-    useSelect(`/master-data/nonstocks`, 'id', 'name');
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setSupplierInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSupplierOptions,
+    loadMore: loadMoreSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setKandangInputValue,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangOptions,
+    loadMore: loadMoreKandangs,
+  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setNonstockInputValue,
+    options: nonstockOptions,
+    isLoadingOptions: isLoadingNonstockOptions,
+    loadMore: loadMoreNonstocks,
+  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
 
   const categoryOptions = useMemo(
     () => [
@@ -86,31 +112,31 @@ const ReportExpenseTable = () => {
   // Mendapatkan value option select dari filter state
   const selectedLocation = useMemo(
     () =>
-      optionsLocation.find(
+      locationOptions.find(
         (opt) => String(opt.value) === filterState.location_id
       ) || null,
-    [optionsLocation, filterState.location_id]
+    [locationOptions, filterState.location_id]
   );
   const selectedSupplier = useMemo(
     () =>
-      optionsSupplier.find(
+      supplierOptions.find(
         (opt) => String(opt.value) === filterState.supplier_id
       ) || null,
-    [optionsSupplier, filterState.supplier_id]
+    [supplierOptions, filterState.supplier_id]
   );
   const selectedKandang = useMemo(
     () =>
-      optionsKandang.find(
+      kandangOptions.find(
         (opt) => String(opt.value) === filterState.kandang_id
       ) || null,
-    [optionsKandang, filterState.kandang_id]
+    [kandangOptions, filterState.kandang_id]
   );
   const selectedNonstock = useMemo(
     () =>
-      optionsNonstock.find(
+      nonstockOptions.find(
         (opt) => String(opt.value) === filterState.nonstock_id
       ) || null,
-    [optionsNonstock, filterState.nonstock_id]
+    [nonstockOptions, filterState.nonstock_id]
   );
   const selectedCategory = useMemo(
     () =>
@@ -756,38 +782,46 @@ const ReportExpenseTable = () => {
           <SelectInput
             isClearable
             label='Lokasi'
-            options={optionsLocation}
-            isLoading={isLoadingLocation}
+            options={locationOptions}
+            isLoading={isLoadingLocationOptions}
             placeholder='Lokasi'
             value={selectedLocation}
             onChange={locationChangeHandler}
+            onInputChange={setLocationInputValue}
+            onMenuScrollToBottom={loadMoreLocations}
           />
           <SelectInput
             isClearable
             label='Kandang'
-            options={optionsKandang}
-            isLoading={isLoadingKandang}
+            options={kandangOptions}
+            isLoading={isLoadingKandangOptions}
             placeholder='Kandang'
             value={selectedKandang}
             onChange={kandangChangeHandler}
+            onInputChange={setKandangInputValue}
+            onMenuScrollToBottom={loadMoreKandangs}
           />
           <SelectInput
             isClearable
             label='Supplier'
-            options={optionsSupplier}
-            isLoading={isLoadingSupplier}
+            options={supplierOptions}
+            isLoading={isLoadingSupplierOptions}
             placeholder='Supplier'
             value={selectedSupplier}
             onChange={supplierChangeHandler}
+            onInputChange={setSupplierInputValue}
+            onMenuScrollToBottom={loadMoreSuppliers}
           />
           <SelectInput
             isClearable
             label='Produk'
-            options={optionsNonstock}
-            isLoading={isLoadingNonstock}
+            options={nonstockOptions}
+            isLoading={isLoadingNonstockOptions}
             placeholder='Produk'
             value={selectedNonstock}
             onChange={nonstockChangeHandler}
+            onInputChange={setNonstockInputValue}
+            onMenuScrollToBottom={loadMoreNonstocks}
           />
           <SelectInput
             isClearable