refactor(FE-170,174,175): add layout component and enhance API data fetching limits

src/app/production/recording/add/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -265,6 +265,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   // ===== API DATA FETCHING =====
   const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({
     search: locationSearchValue || '',
+    limit: '100',
   }).toString()}`;
   const { data: locations, isLoading: isLoadingLocations } = useSWR(
     locationsUrl,
@@ -273,6 +274,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const projectFlocksUrl = `${ProjectFlockApi.basePath}?${new URLSearchParams({
     search: projectFlockSearchValue || '',
+    limit: '100',
     ...(selectedLocation
       ? { location_id: selectedLocation.value.toString() }
       : {}),
@@ -371,6 +373,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const existingRecordingsUrl = useMemo(() => {
     const params = new URLSearchParams({
       record_date: today,
+      limit: '100',
     });
     return `${RecordingApi.basePath}?${params.toString()}`;
   }, [today]);
@@ -413,6 +416,24 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     ProductWarehouseApi.getAllFetcher
   );
 
+  const approvedProjectFlockKandangsUrl = useMemo(() => {
+    const params = new URLSearchParams({
+      step_name: 'Disetujui',
+      limit: '100',
+    });
+    return `${ProjectFlockKandangApi.basePath}?${params.toString()}`;
+  }, []);
+
+  const { data: approvedProjectFlockKandangsData } = useSWR(
+    approvedProjectFlockKandangsUrl,
+    ProjectFlockKandangApi.getAllFetcher
+  );
+
+  const approvedProjectFlockKandangs = useMemo(() => {
+    if (!isResponseSuccess(approvedProjectFlockKandangsData)) return [];
+    return approvedProjectFlockKandangsData.data;
+  }, [approvedProjectFlockKandangsData]);
+
   // ===== APPROVAL DATA FETCHING =====
   const approvalHistoryUrl = useMemo(() => {
     if (!initialValues?.id || type !== 'detail') return null;
@@ -420,6 +441,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       module_name: 'RECORDINGS',
       module_id: initialValues.id.toString(),
       group_step_number: 'true',
+      limit: '100',
     });
     return `${ApprovalApi.basePath}?${params.toString()}`;
   }, [initialValues?.id, type]);
@@ -686,12 +708,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       );
 
       if (selectedProjectFlockData?.kandangs) {
-        const kandangOptions = selectedProjectFlockData.kandangs.map(
+        const approvedKandangIds = approvedProjectFlockKandangs
-          (kandang: Kandang) => ({
+          .filter((pfk) => pfk.project_flock_id === selectedProjectFlock.value)
+          .map((pfk) => pfk.kandang_id);
+
+        const kandangOptions = selectedProjectFlockData.kandangs
+          .filter((kandang: Kandang) => {
+            if (type === 'add') {
+              return approvedKandangIds.includes(kandang.id);
+            }
+            return true;
+          })
+          .map((kandang: Kandang) => ({
             value: kandang.id,
             label: kandang.name || '',
-          })
+          }));
-        );
         options = options.concat(kandangOptions);
       }
     }
@@ -710,7 +741,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
 
     return options;
-  }, [selectedProjectFlock, projectFlocks, projectFlockKandangDetail, type]);
+  }, [
+    selectedProjectFlock,
+    projectFlocks,
+    projectFlockKandangDetail,
+    type,
+    approvedProjectFlockKandangs,
+  ]);
 
   const recordedProjectFlockKandangIds = useMemo(() => {
     if (!isResponseSuccess(existingRecordings)) return new Set<number>();

src/services/api/production/project-flock-kandang.ts

@@ -0,0 +1,11 @@
+import { BaseApiService } from '@/services/api/base';
+import {
+  BaseProjectFlockKandang,
+  ProjectFlockKandang,
+} from '@/types/api/production/project-flock-kandang';
+
+export const ProjectFlockKandangApi = new BaseApiService<
+  BaseProjectFlockKandang,
+  ProjectFlockKandang,
+  unknown
+>('project-flock-kandang');