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

src/components/pages/master-data/location/form/LocationForm.tsx

@@ -27,6 +27,8 @@ import {
 } from '@/types/api/master-data/location';
 import { AreaApi, LocationApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface LocationFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -160,6 +162,9 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl'>
@@ -181,7 +186,7 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -268,6 +273,8 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -282,7 +289,7 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit