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'

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'

src/components/pages/finance/add/injection/FormFinanceInjection.tsx

@@ -1,18 +1,17 @@
 'use client';
 
 import Button from '@/components/Button';
+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';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import SelectInput, { useSelect } from '@/components/input/SelectInput';
 import TextArea from '@/components/input/TextArea';
 import {
   InjectionFormSchema,
   InjectionFormValues,
 } from '@/components/pages/finance/add/injection/FormFinanceInjection.schema';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { formatDate } from '@/lib/helper';
 import { FinanceApi } from '@/services/api/finance';
@@ -128,6 +127,9 @@ const FormFinanceInjection = ({
     [router]
   );
 
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+
   return (
     <>
       <section className='w-full max-w-xl mx-auto'>
@@ -136,7 +138,7 @@ const FormFinanceInjection = ({
             title={`${type === 'add' ? 'Tambah' : 'Ubah'} Injeksi Dana`}
             backUrl='/finance'
           />
-          <form className='flex flex-col gap-4' onSubmit={formik.handleSubmit}>
+          <form className='flex flex-col gap-4' onSubmit={handleFormSubmit}>
             <SelectInput
               label='Bank'
               placeholder='Pilih bank'
@@ -223,6 +225,7 @@ const FormFinanceInjection = ({
               }
               required
             />
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
             <div className='flex justify-center gap-4'>
               <Button
                 type='reset'