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

src/components/pages/master-data/supplier/form/SupplierForm.tsx

@@ -25,6 +25,8 @@ import TextArea from '@/components/input/TextArea';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface SupplierCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -199,6 +201,9 @@ const SupplierForm = ({
     formik.setFieldValue('category', val);
   };
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   // Render
   return (
     <>
@@ -221,7 +226,7 @@ const SupplierForm = ({
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -444,6 +449,8 @@ const SupplierForm = ({
               </div>
             )}
 
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
             {formType !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
@@ -458,7 +465,7 @@ const SupplierForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={formik.isSubmitting}
                   className='px-4'
                 >
                   Submit