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

src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx

@@ -1,12 +1,10 @@
 'use client';
 
 import Button from '@/components/Button';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import SelectInput, { useSelect } from '@/components/input/SelectInput';
 import TextArea from '@/components/input/TextArea';
 import TextInput from '@/components/input/TextInput';
 import {
@@ -17,6 +15,7 @@ import {
   FINANCE_INITIAL_BALANCE_TYPE_OPTIONS,
   FINANCE_PARTY_TYPE_OPTIONS,
 } from '@/config/constant';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { formatTitleCase } from '@/lib/helper';
 import { FinanceApi } from '@/services/api/finance';
@@ -173,6 +172,9 @@ const FormFinanceAddInitialBalance = ({
     [router]
   );
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl mx-auto'>
@@ -181,7 +183,7 @@ const FormFinanceAddInitialBalance = ({
             title={`${type === 'add' ? 'Tambah' : 'Ubah'} Saldo Awal`}
             backUrl='/finance'
           />
-          <form className='flex flex-col gap-4' onSubmit={formik.handleSubmit}>
+          <form className='flex flex-col gap-4' onSubmit={handleFormSubmit}>
             <SelectInput
               label='Jenis Pihak'
               placeholder='Pilih jenis pihak'
@@ -352,6 +354,7 @@ const FormFinanceAddInitialBalance = ({
               }
               required
             />
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
             <div className='flex justify-center gap-4'>
               <Button
                 type='reset'