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

src/components/pages/finance/add/FormFinanceAdd.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Button from '@/components/Button';
-import Card from '@/components/Card';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import DateInput from '@/components/input/DateInput';
 import NumberInput from '@/components/input/NumberInput';
@@ -21,6 +21,7 @@ import {
 } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { formatDate, formatTitleCase } from '@/lib/helper';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import { FinanceApi } from '@/services/api/finance';
 import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
 import {
@@ -104,6 +105,9 @@ const FormFinanceAdd = ({
     },
   });
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   // ===== Options =====
   const {
     options: partyOptions,
@@ -180,7 +184,7 @@ const FormFinanceAdd = ({
             title={`${type === 'add' ? 'Tambah' : 'Ubah'} Data Keuangan`}
             backUrl='/finance'
           />
-          <form className='flex flex-col gap-4' onSubmit={formik.handleSubmit}>
+          <form className='flex flex-col gap-4' onSubmit={handleFormSubmit}>
             <SelectInput
               label='Jenis Transaksi'
               placeholder='Pilih jenis transaksi'
@@ -384,6 +388,7 @@ const FormFinanceAdd = ({
               }
               required
             />
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
             <div className='flex justify-center gap-4'>
               <Button
                 type='reset'