refactor(FE-170,174): update GradingForm to include recording_egg_id in grading data enhance validation schema

src/components/pages/production/recording/form/RecordingForm.schema.ts

@@ -36,8 +36,8 @@ type RecordingLayingFormSchemaType = RecordingGrowingFormSchemaType & {
 };
 
 type RecordingGradingFormSchemaType = {
-  recording_egg_id: number;
   eggs_grading: {
+    recording_egg_id: number;
     grade: string;
     qty: number | string;
   }[];
@@ -192,14 +192,14 @@ export const UpdateRecordingLayingFormSchema = RecordingLayingFormSchema.shape({
 });
 
 export const RecordingGradingFormSchema: Yup.ObjectSchema<RecordingGradingFormSchemaType> =
+  Yup.object({
+    eggs_grading: Yup.array()
+      .of(
         Yup.object({
           recording_egg_id: Yup.number()
             .required('Recording Egg ID wajib diisi!')
             .min(1, 'Recording Egg ID minimal 1!')
             .typeError('Recording Egg ID harus berupa angka!'),
-    eggs_grading: Yup.array()
-      .of(
-        Yup.object({
           grade: Yup.string()
             .required('Grade telur wajib diisi!')
             .typeError('Grade telur harus berupa string!'),
@@ -213,13 +213,7 @@ export const RecordingGradingFormSchema: Yup.ObjectSchema<RecordingGradingFormSc
       .required('Data grading telur wajib diisi!'),
   });
 
-export const UpdateRecordingGradingFormSchema =
+export const UpdateRecordingGradingFormSchema = RecordingGradingFormSchema;
-  RecordingGradingFormSchema.shape({
-    recording_egg_id: Yup.number()
-      .required('Recording Egg ID wajib diisi!')
-      .min(1, 'Recording Egg ID minimal 1!')
-      .typeError('Recording Egg ID harus berupa angka!'),
-  });
 
 export type RecordingGrowingFormValues = Yup.InferType<
   typeof RecordingGrowingFormSchema
@@ -306,14 +300,15 @@ export const getRecordingLayingFormInitialValues = (
 });
 
 export const getRecordingGradingFormInitialValues = (
-  initialValues?: Partial<CreateGradingPayload>
+  initialValues?: Partial<CreateGradingPayload> & { recording_egg_id?: number }
 ): RecordingGradingFormValues => ({
-  recording_egg_id: initialValues?.recording_egg_id ?? 0,
   eggs_grading: initialValues?.eggs_grading?.map((grading) => ({
+    recording_egg_id: grading.recording_egg_id,
     grade: grading.grade,
     qty: grading.qty,
   })) ?? [
     {
+      recording_egg_id: initialValues?.recording_egg_id ?? 0,
       grade: '',
       qty: '',
     },

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

@@ -3,7 +3,6 @@
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useFormik } from 'formik';
-import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 
@@ -12,7 +11,6 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
-import { RecordingApi } from '@/services/api/production';
 import {
   CreateGradingPayload,
   UpdateGradingPayload,
@@ -50,8 +48,6 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
   const [formSteps, setFormSteps] = useState<FormStepStatus[] | null>(null);
 
   // ===== API DATA FETCHING =====
-  // Fetch existing gradings for the recording egg to show recorded data
-  // Optional: Fetch existing gradings if needed for display purposes
   // const existingGradingsUrl = useMemo(() => {
   //   const recordingEggIdToUse = recordingId || initialValues?.id?.toString();
   //   if (!recordingEggIdToUse) return null;
@@ -64,7 +60,6 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
   // );
 
   // ===== DATA PROCESSING =====
-  // No data processing needed - grading form only needs recording_egg_id and grading data
 
   // ===== FORM HANDLERS =====
   const {
@@ -88,6 +83,7 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
       recording_egg_id: recordingEggId,
       eggs_grading:
         initialValues?.grading_eggs?.map((grading: GradingEgg) => ({
+          recording_egg_id: recordingEggId,
           grade: grading.grade,
           qty: grading.qty,
         })) || [],
@@ -105,8 +101,8 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
     validateOnBlur: true,
     onSubmit: async (values) => {
       const gradingPayload = {
-        recording_egg_id: values.recording_egg_id,
         eggs_grading: (values.eggs_grading ?? []).map((grading) => ({
+          recording_egg_id: grading.recording_egg_id,
           grade: grading.grade,
           qty: grading.qty || 0,
         })),
@@ -126,15 +122,20 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
     },
   });
 
-  // Grading form doesn't need approval/reject handlers
-
   // Grading Handlers
   const addGrading = () => {
+    let recordingEggId: number | undefined = initialValues?.id;
+
+    if (!recordingEggId) {
+      recordingEggId = parseInt(recordingId || '0') || 0;
+    }
+
     const newGrading = [
       ...(formik.values.eggs_grading || []),
       {
+        recording_egg_id: recordingEggId,
         grade: '',
-        qty: 0,
+        qty: '',
       },
     ];
     formik.setFieldValue('eggs_grading', newGrading);
@@ -223,12 +224,18 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
 
   useEffect(() => {
     if (formik.values.eggs_grading && formik.values.eggs_grading.length === 0) {
-      formik.setFieldValue('eggs_grading', [{ grade: '', qty: 0 }]);
+      let recordingEggId: number | undefined = initialValues?.id;
+
+      if (!recordingEggId) {
+        recordingEggId = parseInt(recordingId || '0') || 0;
+      }
+
+      formik.setFieldValue('eggs_grading', [
+        { recording_egg_id: recordingEggId, grade: '', qty: '' },
+      ]);
     }
   }, [formik]);
 
-  // Grading form doesn't need loading state since it only depends on recording_egg_id
-
   return (
     <>
       <section className='w-full'>
@@ -320,7 +327,8 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
                 </>
               ) : (
                 <>
-                  <span>Recording Egg ID</span>#{formik.values.recording_egg_id}
+                  <span>Recording Egg ID</span>#
+                  {formik.values.eggs_grading?.[0]?.recording_egg_id || '-'}
                 </>
               )}
             </div>
@@ -473,7 +481,7 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
                           className={{
                             wrapper: 'w-full min-w-24',
                           }}
-                          placeholder='Jumlah'
+                          placeholder='Masukkan jumlah telur'
                         />
                       </td>
                       {type !== 'detail' && (

src/types/api/production/recording.d.ts

@@ -85,8 +85,8 @@ export type CreateGrowingRecordingPayload = {
 };
 
 export type CreateGradingPayload = {
-  recording_egg_id: number;
   eggs_grading: {
+    recording_egg_id: number;
     grade: string;
     qty: number;
   }[];
@@ -95,8 +95,8 @@ export type CreateGradingPayload = {
 export type UpdateGradingPayload = CreateGradingPayload;
 
 export type CreateGradingRecordingPayload = {
-  recording_egg_id: number;
   eggs_grading: {
+    recording_egg_id: number;
     grade: string;
     qty: number;
   }[];