fix(FE): create hooks for formik error list and integrate alert error list for finance and master data modules

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -6,7 +6,6 @@ import SelectInput, {
   useSelect,
 } from '@/components/input/SelectInput';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import {
   AreaApi,
@@ -47,6 +46,7 @@ import { Nonstock } from '@/types/api/master-data/nonstock';
 import { useUiStore } from '@/stores/ui/ui.store';
 import RequirePermission from '@/components/helper/RequirePermission';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -66,7 +66,6 @@ const ProjectFlockForm = ({
 
   const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
     useState('');
-  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [selectedArea, setSelectedArea] = useState('');
   const [selectedLocation, setSelectedLocation] = useState('');
   const [selectedCategory, setSelectedCategory] = useState('');
@@ -642,16 +641,8 @@ const ProjectFlockForm = ({
     return !isNonstockAlreadyInBudgets;
   });
 
-  const handleValidateForm = async () => {
-    const errors = await formik.validateForm();
-
-    if (Object.keys(errors).length > 0) {
-      // Parse and display errors
-      const errorMessages = getUniqueFormikErrors(errors);
-      setFormErrorList(errorMessages);
-      return; // Stop submission
-    }
-  };
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   return (
     <>
@@ -712,11 +703,7 @@ const ProjectFlockForm = ({
 
         <form
           className='w-auto h-auto'
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleValidateForm();
-            formik.handleSubmit(e);
-          }}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
         >
           {/* Form Informasi Umum */}
@@ -1082,13 +1069,7 @@ const ProjectFlockForm = ({
             </div>
           </div>
 
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
+          <AlertErrorList formErrorList={formErrorList} onClose={close} />
 
           <div className='flex flex-row justify-center gap-2 flex-wrap my-6 px-4'>
             {formType !== 'detail' && (