feat(FE-170,175): extend GradingForm to support additional grading data and improve form initialization

src/app/production/recording/grading/add/page.tsx

@@ -35,7 +35,7 @@ const AddGrading = () => {
       {(!recordingId ||
         recordingId === 'new' ||
         (!isLoadingRecording && recording && isResponseSuccess(recording))) && (
-        <GradingForm type='add' initialValues={isResponseSuccess(recording) ? recording.data?.recording_eggs?.[0] : undefined} />
+        <GradingForm type='add' initialValues={isResponseSuccess(recording) ? recording.data?.eggs?.[0] : undefined} />
       )}
     </div>
   );

src/app/production/recording/grading/detail/edit/page.tsx

@@ -41,7 +41,7 @@ const EditGrading = () => {
       {!isLoadingRecording && recording && isResponseSuccess(recording) && (
         <GradingForm
           type='edit'
-          initialValues={recording.data.recording_eggs?.find(
+          initialValues={recording.data.eggs?.find(
             (egg) => egg.id === parseInt(gradingId || '0')
           )}
         />

src/app/production/recording/grading/detail/page.tsx

@@ -4,7 +4,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
 import { RecordingApi } from '@/services/api/production';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 const DetailGrading = () => {
   const router = useRouter();
@@ -40,7 +40,7 @@ const DetailGrading = () => {
       {!isLoadingGrading && grading && isResponseSuccess(grading) && (
         <GradingForm
           type='detail'
-          initialValues={grading.data.recording_eggs?.find(
+          initialValues={grading.data.eggs?.find(
             (egg) => egg.id === parseInt(gradingId)
           )}
         />

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

@@ -640,6 +640,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     RecordingGrowingFormValues | RecordingLayingFormValues
   >({
     initialValues: formikInitialValues,
+    enableReinitialize: true,
     validationSchema: (() => {
       if (isLayingCategory) {
         return type === 'edit'
@@ -915,6 +916,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         return;
       }
 
+      if (formik.values.project_flock_kandang_id !== projectFlockKandangId) {
         formik.setFieldValue('project_flock_kandang_id', projectFlockKandangId);
 
         formik.setFieldValue('project_flock_kandang', {
@@ -924,12 +926,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             : `${selectedProjectFlock?.label || ''} - ${selectedKandang?.label || ''}`,
         });
       }
+    }
   }, [
     projectFlockKandangLookup,
     selectedProjectFlock,
     selectedKandang,
     type,
     recordedProjectFlockKandangIds,
+    formik.values.project_flock_kandang_id,
   ]);
 
   useEffect(() => {
@@ -959,6 +963,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             };
             setSelectedKandang(kandangOption);
 
+            if (
+              formik.values.project_flock_kandang_id !==
+              projectFlockKandangDetail.id
+            ) {
               formik.setFieldValue(
                 'project_flock_kandang_id',
                 projectFlockKandangDetail.id
@@ -971,7 +979,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           }
         }
       }
-  }, [projectFlockKandangDetail, type, projectFlockOptions]);
+    }
+  }, [
+    projectFlockKandangDetail,
+    type,
+    projectFlockOptions,
+    formik.values.project_flock_kandang_id,
+  ]);
 
   const approveHandler = async () => {
     setIsApproveLoading(true);
@@ -1345,7 +1359,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               Kembali
             </Button>
 
-            {type === 'detail' && !isRecordingApproved(initialValues) && (!isLayingCategory || hasGradingData(initialValues)) && (
+            {type === 'detail' &&
+              !isRecordingApproved(initialValues) &&
+              (!isLayingCategory || hasGradingData(initialValues)) && (
                 <div className='flex flex-row gap-2'>
                   <Button
                     variant='outline'
@@ -1354,7 +1370,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     isLoading={isApproveLoading}
                     className='w-full sm:w-fit'
                   >
-                  <Icon icon='material-symbols:check' width={24} height={24} />
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
                     Approve
                   </Button>
 
@@ -1365,7 +1385,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     isLoading={isRejectLoading}
                     className='w-full sm:w-fit'
                   >
-                  <Icon icon='material-symbols:close' width={24} height={24} />
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
                     Reject
                   </Button>
                 </div>
@@ -2681,7 +2705,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           {/* Approve Confirmation Modal */}
           {(type as 'add' | 'edit' | 'detail') === 'detail' &&
-            !isRecordingApproved(initialValues) && (!isLayingCategory || hasGradingData(initialValues)) && (
+            !isRecordingApproved(initialValues) &&
+            (!isLayingCategory || hasGradingData(initialValues)) && (
               <ConfirmationModal
                 ref={approveModal.ref}
                 type='success'
@@ -2700,7 +2725,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           {/* Reject Confirmation Modal */}
           {(type as 'add' | 'edit' | 'detail') === 'detail' &&
-            !isRecordingApproved(initialValues) && (!isLayingCategory || hasGradingData(initialValues)) && (
+            !isRecordingApproved(initialValues) &&
+            (!isLayingCategory || hasGradingData(initialValues)) && (
               <ConfirmationModal
                 ref={rejectModal.ref}
                 type='error'

src/components/pages/production/recording/grading/form/GradingForm.tsx

@@ -49,7 +49,10 @@ import useSWR from 'swr';
 // INTERFACES & PROPS
 interface GradingFormProps {
   type?: 'add' | 'edit' | 'detail';
-  initialValues?: RecordingEgg & { grading_eggs?: GradingEgg[] };
+  initialValues?: RecordingEgg & {
+    grading_eggs?: GradingEgg[];
+    gradings?: { grade: string; qty: number }[];
+  };
 }
 
 const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
@@ -190,19 +193,37 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
       recordingEggId = parseInt(recordingId || '0') || 0;
     }
 
-    return getRecordingGradingFormInitialValues({
+    let gradingData: {
-      recording_egg_id: recordingEggId,
+      recording_egg_id: number;
-      eggs_grading:
+      grade: string;
-        initialValues?.grading_eggs?.map((grading: GradingEgg) => ({
+      qty: number;
+    }[] = [];
+
+    if (initialValues?.grading_eggs && initialValues.grading_eggs.length > 0) {
+      gradingData = initialValues.grading_eggs.map((grading: GradingEgg) => ({
         recording_egg_id: recordingEggId,
         grade: grading.grade,
         qty: grading.qty,
-        })) || [],
+      }));
+    } else if (initialValues?.gradings && initialValues.gradings.length > 0) {
+      gradingData = initialValues.gradings.map(
+        (grading: { grade: string; qty: number }) => ({
+          recording_egg_id: recordingEggId,
+          grade: grading.grade,
+          qty: grading.qty,
+        })
+      );
+    }
+
+    return getRecordingGradingFormInitialValues({
+      recording_egg_id: recordingEggId,
+      eggs_grading: gradingData,
     });
   }, [initialValues, recordingId, konsumsiBaikEggId]);
 
   const formik = useFormik<RecordingGradingFormValues>({
     initialValues: formikInitialValues,
+    enableReinitialize: true,
     validationSchema: (() => {
       return type === 'edit'
         ? UpdateRecordingGradingFormSchema
@@ -370,7 +391,7 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
         { recording_egg_id: konsumsiBaikEggId, grade: '', qty: '' },
       ]);
     }
-  }, [konsumsiBaikEggId, formik.values.eggs_grading]);
+  }, [konsumsiBaikEggId, formik.values.eggs_grading.length]);
 
   return (
     <>