feat: implement lazy loading in SelectInput

src/components/pages/report/DailyMarketingReportContent.tsx

@@ -87,6 +87,7 @@ const DailyMarketingReportContent = () => {
     setInputValue: setAreaInputValue,
     options: areaOptions,
     isLoadingOptions: isLoadingAreaOptions,
+    loadMore: loadMoreAreas,
   } = useSelect<Area>(AreaApi.basePath, 'id', 'name');
 
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -101,6 +102,7 @@ const DailyMarketingReportContent = () => {
     setInputValue: setLocationInputValue,
     options: locationOptions,
     isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
   } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -118,6 +120,7 @@ const DailyMarketingReportContent = () => {
     setInputValue: setWarehouseInputValue,
     options: warehouseOptions,
     isLoadingOptions: isLoadingWarehouseOptions,
+    loadMore: loadMoreWarehouses,
   } = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name');
 
   const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -135,6 +138,7 @@ const DailyMarketingReportContent = () => {
     setInputValue: setCustomerInputValue,
     options: customerOptions,
     isLoadingOptions: isLoadingCustomerOptions,
+    loadMore: loadMoreCustomers,
   } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
 
   const customerChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -298,6 +302,7 @@ const DailyMarketingReportContent = () => {
             value={selectedArea}
             onChange={areaChangeHandler}
             onInputChange={setAreaInputValue}
+            onMenuScrollToBottom={loadMoreAreas}
             isClearable
             className={{
               wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
@@ -312,6 +317,7 @@ const DailyMarketingReportContent = () => {
             value={selectedLocation}
             onChange={locationChangeHandler}
             onInputChange={setLocationInputValue}
+            onMenuScrollToBottom={loadMoreLocations}
             isClearable
             className={{
               wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
@@ -326,6 +332,7 @@ const DailyMarketingReportContent = () => {
             value={selectedWarehouse}
             onChange={warehouseChangeHandler}
             onInputChange={setWarehouseInputValue}
+            onMenuScrollToBottom={loadMoreWarehouses}
             isClearable
             className={{
               wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
@@ -340,6 +347,7 @@ const DailyMarketingReportContent = () => {
             value={selectedCustomer}
             onChange={customerChangeHandler}
             onInputChange={setCustomerInputValue}
+            onMenuScrollToBottom={loadMoreCustomers}
             isClearable
             className={{
               wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',