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

src/components/pages/master-data/area/form/AreaForm.tsx

@@ -25,6 +25,8 @@ import {
 } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface AreaFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -118,6 +120,9 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl'>
@@ -139,7 +144,7 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -199,6 +204,8 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -213,7 +220,7 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit