Merge branch 'fix/recording' into 'development'

[FIX/FE] Fixing Recording Form

See merge request mbugroup/lti-web-client!208

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

@@ -79,6 +79,7 @@ import {
   GROWING_RECORDING_APPROVAL_LINE,
   LAYING_RECORDING_APPROVAL_LINE,
 } from '@/config/approval-line';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -227,7 +228,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const [, setApprovalNotes] = useState('');
   const [recordingFormErrorMessage, setRecordingFormErrorMessage] =
     useState('');
-  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [, setNewRecordingData] = useState<Recording | null>(null);
   const [nextDayRecording, setNextDayRecording] =
@@ -905,10 +905,58 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       baseValues = getRecordingGrowingFormInitialValues(initialValues);
     }
 
+    if (type === 'add') {
+      baseValues.location = selectedLocation
+        ? {
+            value: Number(selectedLocation.value),
+            label: selectedLocation.label,
+          }
+        : null;
+      baseValues.location_id = selectedLocation
+        ? Number(selectedLocation.value)
+        : 0;
+      baseValues.project_flock = selectedProjectFlock
+        ? {
+            value: Number(selectedProjectFlock.value),
+            label: selectedProjectFlock.label,
+          }
+        : null;
+      baseValues.project_flock_id = selectedProjectFlock
+        ? Number(selectedProjectFlock.value)
+        : 0;
+      baseValues.kandang = selectedKandang
+        ? {
+            value: Number(selectedKandang.value),
+            label: selectedKandang.label,
+          }
+        : null;
+      baseValues.kandang_id = selectedKandang
+        ? Number(selectedKandang.value)
+        : 0;
+    }
+
     if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
-      baseValues.project_flock_kandang = {
-        value: projectFlockKandangDetail.project_flock.id,
-        label: projectFlockKandangDetail.project_flock.flock_name || '',
+      baseValues = {
+        ...baseValues,
+        project_flock_kandang: {
+          value: projectFlockKandangDetail.project_flock?.id,
+          label: projectFlockKandangDetail.project_flock?.flock_name || '',
+        },
+        project_flock: {
+          value: projectFlockKandangDetail.project_flock?.id,
+          label: projectFlockKandangDetail.project_flock?.flock_name || '',
+        },
+        project_flock_id: projectFlockKandangDetail.project_flock?.id,
+        location: {
+          value: projectFlockKandangDetail.project_flock?.location?.id,
+          label: projectFlockKandangDetail.project_flock?.location?.name || '',
+        },
+        location_id: projectFlockKandangDetail.project_flock?.location?.id,
+        kandang: {
+          value: projectFlockKandangDetail.kandang?.id,
+          label: projectFlockKandangDetail.kandang?.name || '',
+        },
+        kandang_id: projectFlockKandangDetail.kandang?.id,
       };
     }
 
@@ -995,22 +1043,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     },
   });
 
-  const handleValidateForm = async () => {
-    const errors = await formik.validateForm();
-
-    if (Object.keys(errors).length > 0) {
-      const errorMessages = getUniqueFormikErrors(errors);
-      setFormErrorList(errorMessages);
-      return;
-    }
-  };
-
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleValidateForm();
-    formik.handleSubmit(e);
-  };
-
   // ===== HELPER FUNCTIONS =====
   const getAvailableStock = useCallback(
     (productWarehouseId: number) => {
@@ -1266,6 +1298,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     [formik, duplicateErrorShown]
   );
 
+  const { formErrorList, handleFormSubmit, close } = useFormikErrorList(formik);
+
   useEffect(() => {
     if (projectFlockKandangLookup?.project_flock_kandang_id) {
       const projectFlockKandangId =
@@ -1655,12 +1689,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           {/* Error List Alert */}
           {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
           )}
 
+          <div className='text-xs text-error'>
+            {JSON.stringify(formik.errors)}
+          </div>
+          <div className='text-xs text-success'>
+            {JSON.stringify(formik.values)}
+          </div>
           {/* Basic Info Card */}
           {(type === 'add' || type === 'edit') && (
             <Card