fix: render one project flock kandang if kandang is selected

src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx

@@ -46,6 +46,7 @@ import Modal, { useModal } from '@/components/Modal';
 import { formatNumber } from '@/lib/helper';
 import Pagination from '@/components/Pagination';
 import ProductionResultSkeleton from '@/components/pages/report/production-result/skeleton/ProductionResultSkeleton';
+import { ProjectFlock } from '@/types/api/production/project-flock';
 
 interface ProductionResultTabProps {
   tabId: string;
@@ -238,6 +239,17 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
           ? String(values.kandang_id.value)
           : undefined,
       });
+
+      const selectedProjectFlockKandangRawData = isResponseSuccess(
+        projectFlockKandangsRawData
+      )
+        ? projectFlockKandangsRawData.data.find(
+            (item) => item.id === values.kandang_id?.value
+          )
+        : undefined;
+
+      setSelectedProjectFlockKandang(selectedProjectFlockKandangRawData);
+
       filterModal.closeModal();
       setIsSubmitted(true);
       setPage(1);
@@ -255,6 +267,9 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     formik.validateForm();
   };
 
+  const [selectedProjectFlockKandang, setSelectedProjectFlockKandang] =
+    useState<ProjectFlockKandang | undefined>();
+
   // ===== OPTIONS =====
   const {
     setInputValue: setAreaInputValue,
@@ -279,7 +294,7 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     options: projectFlockOptions,
     isLoadingOptions: isLoadingProjectFlocks,
     loadMore: loadMoreProjectFlocks,
-  } = useSelect<BaseKandang>(
+  } = useSelect<ProjectFlock>(
     ProjectFlockApi.basePath,
     'id',
     'flock_name',
@@ -300,10 +315,11 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     options: projectFlockKandangOptions,
     isLoadingOptions: isLoadingProjectFlockKandangs,
     loadMore: loadMoreProjectFlockKandangs,
-  } = useSelect<BaseKandang>(
+    rawData: projectFlockKandangsRawData,
+  } = useSelect<ProjectFlockKandang>(
     ProjectFlockKandangApi.basePath,
     'id',
-    'kandang.name',
+    'name_with_period',
     'search',
     {
       area_id: formik.values.area_id?.value
@@ -359,13 +375,15 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     ([url]: string[]) => httpClient<BaseApiResponse<ProjectFlockKandang[]>>(url)
   );
 
-  const projectFlockKandangs = useMemo(
+  const projectFlockKandangs = useMemo(() => {
-    () =>
+    if (selectedProjectFlockKandang) {
-      isResponseSuccess(projectFlockKandangsData)
+      return [selectedProjectFlockKandang];
+    }
+
+    return isResponseSuccess(projectFlockKandangsData)
       ? projectFlockKandangsData.data
-        : null,
+      : null;
-    [projectFlockKandangsData]
+  }, [projectFlockKandangsData, selectedProjectFlockKandang]);
-  );
 
   const projectFlockKandangMetadata = useMemo(
     () =>
@@ -804,7 +822,6 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
             />
 
             <SelectInput
-              required
               label='Kandang'
               placeholder='Pilih Kandang'
               options={projectFlockKandangOptions}