refactor(FE): Display Formik validation errors in alert list

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

@@ -17,6 +17,7 @@ import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import { useModal } from '@/components/Modal';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 import {
   ProjectFlockKandangApi,
@@ -52,6 +53,7 @@ import {
 
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { formatDate, formatNumber } from '@/lib/helper';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import toast from 'react-hot-toast';
 import ApprovalSteps, {
   useApprovalSteps,
@@ -91,6 +93,7 @@ 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] =
@@ -757,6 +760,22 @@ 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 =====
   useCallback((): OptionType | null => {
     if (
@@ -1322,7 +1341,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         )}
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           className='w-full mt-8 flex flex-col gap-6'
         >
           {recordingFormErrorMessage && (
@@ -1335,6 +1354,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               <span>{recordingFormErrorMessage}</span>
             </div>
           )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           {/* Basic Info Card */}
           {(type === 'add' || type === 'edit') && (
             <Card