From 9cf0d15c331a8c0386f4f76b39335356136d0c4d Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sun, 12 Apr 2026 21:36:40 +0700
Subject: [PATCH] fix: implement lazy loading for select input

---
 .../marketing/tab/DailyMarketingTab.tsx       | 44 ++++++++++++++-----
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx b/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
index 1d9dc750..0bf66748 100644
--- a/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
+++ b/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
@@ -88,21 +88,33 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
   const filterModal = useModal();
 
   // ===== OPTIONS =====
-  const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
-    AreaApi.basePath,
-    'id',
-    'name',
-    'search'
-  );
+  const {
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreas,
+    setInputValue: setAreaInputValue,
+    loadMore: loadMoreArea,
+  } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
 
-  const { options: locationOptions, isLoadingOptions: isLoadingLocations } =
-    useSelect(LocationApi.basePath, 'id', 'name', 'search');
+  const {
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    setInputValue: setLocationInputValue,
+    loadMore: loadMoreLocation,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
 
-  const { options: warehouseOptions, isLoadingOptions: isLoadingWarehouses } =
-    useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+  const {
+    options: warehouseOptions,
+    isLoadingOptions: isLoadingWarehouses,
+    setInputValue: setWarehouseInputValue,
+    loadMore: loadMoreWarehouse,
+  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
 
-  const { options: customerOptions, isLoadingOptions: isLoadingCustomers } =
-    useSelect(CustomerApi.basePath, 'id', 'name', 'search');
+  const {
+    options: customerOptions,
+    isLoadingOptions: isLoadingCustomers,
+    setInputValue: setCustomerInputValue,
+    loadMore: loadMoreCustomer,
+  } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
   // ===== FORMIK SETUP =====
   const formik = useFormik<DailyMarketingReportFilterType>({
@@ -837,6 +849,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
               }}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setAreaInputValue}
+              onMenuScrollToBottom={loadMoreArea}
             />
 
             {/* Location Filter */}
@@ -854,6 +868,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
               }}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setLocationInputValue}
+              onMenuScrollToBottom={loadMoreLocation}
             />
 
             {/* Warehouse Filter */}
@@ -871,6 +887,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
               }}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setWarehouseInputValue}
+              onMenuScrollToBottom={loadMoreWarehouse}
             />
 
             {/* Customer Filter */}
@@ -888,6 +906,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
               }}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setCustomerInputValue}
+              onMenuScrollToBottom={loadMoreCustomer}
             />
 
             {/* Filter By Date Type */}