From 9237d4e731c062a5d402328b60266d46361ced66 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Wed, 14 Jan 2026 17:10:42 +0700
Subject: [PATCH] fix(FE): implement lazy load select project flock

---
 .../project-flock/form/ProjectFlockForm.tsx   | 67 +++++++++++++------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 745a6b1e..0c252cb6 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -102,34 +102,47 @@ const ProjectFlockForm = ({
   );
 
   // Fetch Data
-  const { isLoadingOptions: isLoadingFlocks, options: optionsFlock } =
-    useSelect(FlockApi.basePath, 'id', 'name');
+  const {
+    setInputValue: setInputValueFlock,
+    isLoadingOptions: isLoadingFlocks,
+    options: optionsFlock,
+    loadMore: loadMoreFlock,
+  } = useSelect(FlockApi.basePath, 'id', 'name', '', {
+    project_category: selectedCategory,
+  });
 
-  const { options: optionsArea, isLoadingOptions: isLoadingAreas } = useSelect(
-    AreaApi.basePath,
-    'id',
-    'name'
-  );
+  const {
+    setInputValue: setInputValueArea,
+    options: optionsArea,
+    isLoadingOptions: isLoadingAreas,
+    loadMore: loadMoreArea,
+  } = useSelect(AreaApi.basePath, 'id', 'name');
 
-  const { options: optionsLocation, isLoadingOptions: isLoadingLocations } =
-    useSelect(LocationApi.basePath, 'id', 'name', '', {
-      area_id:
-        selectedArea != ''
-          ? selectedArea
-          : ((initialValues?.area?.id ?? '') as string),
-    });
+  const {
+    options: optionsLocation,
+    isLoadingOptions: isLoadingLocations,
+    setInputValue: setInputValueLocation,
+    loadMore: loadMoreLocation,
+  } = useSelect(LocationApi.basePath, 'id', 'name', '', {
+    area_id:
+      selectedArea != ''
+        ? selectedArea
+        : ((initialValues?.area?.id ?? '') as string),
+  });
 
-  const { options: optionsFcr, isLoadingOptions: isLoadingFcrs } = useSelect(
-    FcrApi.basePath,
-    'id',
-    'name'
-  );
+  const {
+    options: optionsFcr,
+    isLoadingOptions: isLoadingFcrs,
+    setInputValue: setInputValueFcr,
+    loadMore: loadMoreFcr,
+  } = useSelect(FcrApi.basePath, 'id', 'name');
 
   const {
     options: optionsProductionStandards,
     isLoadingOptions: isLoadingProductionStandards,
+    setInputValue: setInputValueProductionStandard,
+    loadMore: loadMoreProductionStandard,
   } = useSelect(ProductionStandardApi.basePath, 'id', 'name', '', {
-    search: '',
     project_category: selectedCategory,
   });
 
@@ -153,6 +166,8 @@ const ProjectFlockForm = ({
     options: optionsNonstock,
     rawData: nonstocks,
     isLoadingOptions: isLoadingNonstocks,
+    setInputValue: setInputValueNonstock,
+    loadMore: loadMoreNonstock,
   } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
 
   useEffect(() => {
@@ -722,6 +737,8 @@ const ProjectFlockForm = ({
                   formik.touched.area_id && Boolean(formik.errors.area_id)
                 }
                 errorMessage={formik.errors.area_id as string}
+                onInputChange={setInputValueArea}
+                onMenuScrollToBottom={loadMoreArea}
                 isClearable
                 isDisabled={formType != 'add'}
               />
@@ -740,6 +757,8 @@ const ProjectFlockForm = ({
                   formik.touched.location_id &&
                   Boolean(formik.errors.location_id)
                 }
+                onInputChange={setInputValueLocation}
+                onMenuScrollToBottom={loadMoreLocation}
                 errorMessage={formik.errors.location_id as string}
                 isClearable
                 isDisabled={formType != 'add' || disabledLocation}
@@ -766,6 +785,8 @@ const ProjectFlockForm = ({
                   );
                 }}
                 options={optionsFlock}
+                onInputChange={setInputValueFlock}
+                onMenuScrollToBottom={loadMoreFlock}
                 isLoading={isLoadingFlocks}
                 isError={
                   formik.touched.flock_name && Boolean(formik.errors.flock_name)
@@ -781,6 +802,8 @@ const ProjectFlockForm = ({
                 onChange={(val) => {
                   optionChangeHandler(val, 'fcr');
                 }}
+                onInputChange={setInputValueFcr}
+                onMenuScrollToBottom={loadMoreFcr}
                 options={optionsFcr}
                 isLoading={isLoadingFcrs}
                 isError={formik.touched.fcr_id && Boolean(formik.errors.fcr_id)}
@@ -808,6 +831,8 @@ const ProjectFlockForm = ({
                 onChange={(val) => {
                   optionChangeHandler(val, 'production_standard');
                 }}
+                onInputChange={setInputValueProductionStandard}
+                onMenuScrollToBottom={loadMoreProductionStandard}
                 options={optionsProductionStandards}
                 isLoading={isLoadingProductionStandards}
                 isError={
@@ -892,6 +917,8 @@ const ProjectFlockForm = ({
                           isLoading={isLoadingNonstocks}
                           placeholder='Pilih barang non stock'
                           value={formik.values.project_budgets[index].nonstock}
+                          onInputChange={setInputValueNonstock}
+                          onMenuScrollToBottom={loadMoreNonstock}
                           onChange={(val) => {
                             const updatedBudgets = [
                               ...formik.values.project_budgets,