refactor(FE-change-api): Refactor Kandang input handling in

DashboardProduction

src/components/pages/dashboard/DashboardProduction.tsx

@@ -5,11 +5,14 @@ import { Icon } from '@iconify/react';
 import Modal, { useModal } from '@/components/Modal';
 import DateInput from '@/components/input/DateInput';
 import { OptionType, useSelect } from '@/components/input/SelectInput';
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import useSWR from 'swr';
 import { DashboardApi } from '@/services/api/dashboard';
 import { useFormik } from 'formik';
-import { ProjectFlockApi } from '@/services/api/production';
+import {
+  ProjectFlockApi,
+  ProjectFlockKandangApi,
+} from '@/services/api/production';
 import { LocationApi } from '@/services/api/master-data';
 import { generateDashboardPDF } from '@/components/pages/dashboard/export/DashboardPDF';
 import {
@@ -22,10 +25,7 @@ import DashboardExportCharts, {
   DashboardExportChartsRef,
 } from '@/components/pages/dashboard/export/DashboardExportCharts';
 import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
-import {
+import { DashboardMeta } from '@/types/api/dashboard/dashboard';
-  DashboardFilter,
-  DashboardMeta,
-} from '@/types/api/dashboard/dashboard';
 import DashboardStats from '@/components/pages/dashboard/chart/DashboardStats';
 import { isResponseSuccess } from '@/lib/api-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
@@ -43,6 +43,7 @@ import DashboardExportStats, {
   DashboardExportStatsRef,
 } from '@/components/pages/dashboard/export/DashboardExportStats';
 import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 
 // Helper function to normalize values to array
 const normalizeToArray = (
@@ -72,7 +73,6 @@ const DashboardProduction = () => {
   const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>(
     normalizeToArray(filterValues.location)
   );
-  const [kandangInputValue, setRawKandangInputValue] = useState('');
   const [exporting, setExporting] = useState(false);
   const allChartsRef = useRef<DashboardExportChartsRef>(null);
   const allStatsRef = useRef<DashboardExportStatsRef>(null);
@@ -116,15 +116,13 @@ const DashboardProduction = () => {
     options: flockOptions,
     isLoadingOptions: isLoadingFlockOptions,
     loadMore: loadMoreFlock,
-    rawData: projectFlocksRawData,
   } = useSelect<ProjectFlock>(
     ProjectFlockApi.basePath,
     'id',
     'flock_name',
-    '',
+    'search',
     {
-      location_id:
+      location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
-        selectedLocationIds.length > 0 ? selectedLocationIds.toString() : '',
     }
   );
 
@@ -165,66 +163,34 @@ const DashboardProduction = () => {
 
   const { resetForm } = formik;
 
-  const selectedFlockIds = useMemo(
+  const selectedLocationValues = normalizeToArray(formik.values.location);
-    () => normalizeToArray(formik.values.flock),
+  const selectedFlockValues = normalizeToArray(formik.values.flock);
-    [formik.values.flock]
-  );
-
-  const derivedKandangOptions = useMemo(() => {
-    if (!isResponseSuccess(projectFlocksRawData)) return [];
-
-    const availableProjectFlocks = projectFlocksRawData.data.filter(
-      (projectFlock) =>
-        selectedFlockIds.length === 0 ||
-        selectedFlockIds.includes(projectFlock.id)
-    );
-
-    const kandangMap = new Map<number, OptionType<number>>();
-
-    availableProjectFlocks.forEach((projectFlock) => {
-      projectFlock.kandangs?.forEach((kandang) => {
-        if (!kandangMap.has(kandang.id)) {
-          kandangMap.set(kandang.id, {
-            value: kandang.id,
-            label: kandang.name,
-          });
-        }
-      });
-    });
-
-    const normalizedSearch = kandangInputValue.trim().toLowerCase();
-    const allOptions = Array.from(kandangMap.values());
-
-    if (!normalizedSearch) return allOptions;
-
-    return allOptions.filter((option) =>
-      option.label.toLowerCase().includes(normalizedSearch)
-    );
-  }, [projectFlocksRawData, selectedFlockIds, kandangInputValue]);
-
-  const kandangSelect = useMemo(
-    () => ({
-      setInputValue: setRawKandangInputValue,
-      options: derivedKandangOptions,
-      isLoadingOptions: isLoadingFlockOptions,
-      loadMore: loadMoreFlock,
-    }),
-    [derivedKandangOptions, isLoadingFlockOptions, loadMoreFlock]
-  );
 
   const {
     setInputValue: setInputValueKandang,
     options: kandangOptions,
     isLoadingOptions: isLoadingKandangOptions,
     loadMore: loadMoreKandang,
-  } = kandangSelect;
+  } = useSelect<ProjectFlockKandang>(
+    ProjectFlockKandangApi.basePath,
+    'kandang_id',
+    'kandang.name',
+    'search',
+    {
+      location_id:
+        selectedLocationValues.length > 0
+          ? selectedLocationValues.toString()
+          : '',
+      project_flock_id:
+        selectedFlockValues.length > 0 ? selectedFlockValues.toString() : '',
+    }
+  );
 
   const handleResetFilter = useCallback(() => {
     resetForm();
     resetFilterValues(); // Clear stored filter values
     setAnalysisMode('OVERVIEW');
     setSelectedLocationIds([]);
-    setRawKandangInputValue('');
     filterModal.closeModal();
   }, [filterModal, resetForm, resetFilterValues]);
 
@@ -520,7 +486,6 @@ const DashboardProduction = () => {
                     formik.setFieldValue('kandang', []);
                     formik.setFieldValue('comparisonType', '');
                     setSelectedLocationIds([]);
-                    setRawKandangInputValue('');
                   }}
                   color='primary'
                   className={{
@@ -592,7 +557,6 @@ const DashboardProduction = () => {
                     // Reset dependent fields when location changes
                     formik.setFieldValue('flock', []);
                     formik.setFieldValue('kandang', []);
-                    setRawKandangInputValue('');
                   }}
                   errorMessage={formik.errors.location as string}
                   options={locationOptions}
@@ -625,7 +589,6 @@ const DashboardProduction = () => {
                     // Reset dependent fields when location changes
                     formik.setFieldValue('flock', []);
                     formik.setFieldValue('kandang', []);
-                    setRawKandangInputValue('');
                   }}
                   errorMessage={formik.errors.location as string}
                   options={locationOptions}
@@ -662,11 +625,9 @@ const DashboardProduction = () => {
                           | null
                           | undefined
                       }
-                      onChange={(selected) => {
+                      onChange={(selected) =>
-                        formik.setFieldValue('flock', selected);
+                        formik.setFieldValue('flock', selected)
-                        formik.setFieldValue('kandang', []);
+                      }
-                        setInputValueKandang('');
-                      }}
                       errorMessage={formik.errors.flock as string}
                       onInputChange={setInputValueFlock}
                       onMenuScrollToBottom={loadMoreFlock}
@@ -691,11 +652,9 @@ const DashboardProduction = () => {
                           | null
                           | undefined
                       }
-                      onChange={(selected) => {
+                      onChange={(selected) =>
-                        formik.setFieldValue('flock', selected);
+                        formik.setFieldValue('flock', selected)
-                        formik.setFieldValue('kandang', []);
+                      }
-                        setInputValueKandang('');
-                      }}
                       errorMessage={formik.errors.flock as string}
                       onInputChange={setInputValueFlock}
                       onMenuScrollToBottom={loadMoreFlock}