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,14 +916,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         return;
       }
 
-      formik.setFieldValue('project_flock_kandang_id', projectFlockKandangId);
+      if (formik.values.project_flock_kandang_id !== projectFlockKandangId) {
+        formik.setFieldValue('project_flock_kandang_id', projectFlockKandangId);
 
-      formik.setFieldValue('project_flock_kandang', {
+        formik.setFieldValue('project_flock_kandang', {
-        value: projectFlockKandangId,
+          value: projectFlockKandangId,
-        label: projectFlockKandangLookup
+          label: projectFlockKandangLookup
-          ? `${projectFlockKandangLookup.project_flock.flock_name} - ${projectFlockKandangLookup.kandang.name}`
+            ? `${projectFlockKandangLookup.project_flock.flock_name} - ${projectFlockKandangLookup.kandang.name}`
-          : `${selectedProjectFlock?.label || ''} - ${selectedKandang?.label || ''}`,
+            : `${selectedProjectFlock?.label || ''} - ${selectedKandang?.label || ''}`,
-      });
+        });
+      }
     }
   }, [
     projectFlockKandangLookup,
@@ -930,6 +933,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     selectedKandang,
     type,
     recordedProjectFlockKandangIds,
+    formik.values.project_flock_kandang_id,
   ]);
 
   useEffect(() => {
@@ -959,19 +963,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             };
             setSelectedKandang(kandangOption);
 
-            formik.setFieldValue(
+            if (
-              'project_flock_kandang_id',
+              formik.values.project_flock_kandang_id !==
               projectFlockKandangDetail.id
-            );
+            ) {
-            formik.setFieldValue('project_flock_kandang', {
+              formik.setFieldValue(
-              value: projectFlockKandangDetail.id,
+                'project_flock_kandang_id',
-              label: `${projectFlock.flock_name} - ${kandang.name}`,
+                projectFlockKandangDetail.id
-            });
+              );
+              formik.setFieldValue('project_flock_kandang', {
+                value: projectFlockKandangDetail.id,
+                label: `${projectFlock.flock_name} - ${kandang.name}`,
+              });
+            }
           }
         }
       }
     }
-  }, [projectFlockKandangDetail, type, projectFlockOptions]);
+  }, [
+    projectFlockKandangDetail,
+    type,
+    projectFlockOptions,
+    formik.values.project_flock_kandang_id,
+  ]);
 
   const approveHandler = async () => {
     setIsApproveLoading(true);
@@ -1345,31 +1359,41 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               Kembali
             </Button>
 
-            {type === 'detail' && !isRecordingApproved(initialValues) && (!isLayingCategory || hasGradingData(initialValues)) && (
+            {type === 'detail' &&
-              <div className='flex flex-row gap-2'>
+              !isRecordingApproved(initialValues) &&
-                <Button
+              (!isLayingCategory || hasGradingData(initialValues)) && (
-                  variant='outline'
+                <div className='flex flex-row gap-2'>
-                  color='success'
+                  <Button
-                  onClick={() => approveModal.openModal()}
+                    variant='outline'
-                  isLoading={isApproveLoading}
+                    color='success'
-                  className='w-full sm:w-fit'
+                    onClick={() => approveModal.openModal()}
-                >
+                    isLoading={isApproveLoading}
-                  <Icon icon='material-symbols:check' width={24} height={24} />
+                    className='w-full sm:w-fit'
-                  Approve
+                  >
-                </Button>
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
 
-                <Button
+                  <Button
-                  variant='outline'
+                    variant='outline'
-                  color='error'
+                    color='error'
-                  onClick={() => rejectModal.openModal()}
+                    onClick={() => rejectModal.openModal()}
-                  isLoading={isRejectLoading}
+                    isLoading={isRejectLoading}
-                  className='w-full sm:w-fit'
+                    className='w-full sm:w-fit'
-                >
+                  >
-                  <Icon icon='material-symbols:close' width={24} height={24} />
+                    <Icon
-                  Reject
+                      icon='material-symbols:close'
-                </Button>
+                      width={24}
-              </div>
+                      height={24}
-            )}
+                    />
+                    Reject
+                  </Button>
+                </div>
+              )}
           </div>
 
           <h1 className='text-2xl font-bold text-center'>
@@ -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 (
     <>