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

src/components/pages/master-data/product/form/ProductForm.tsx

@@ -39,6 +39,7 @@ import {
 } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { PRODUCT_FLAG_OPTIONS } from '@/config/constant';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface ProductFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -50,7 +51,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   const deleteModal = useModal();
 
   const [productFormErrorMessage, setProductFormErrorMessage] = useState('');
-  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const createProductHandler = useCallback(
@@ -204,21 +204,8 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
-  const handleValidateForm = async () => {
-    const errors = await formik.validateForm();
-
-    if (Object.keys(errors).length > 0) {
-      const errorMessages = getUniqueFormikErrors(errors);
-      setFormErrorList(errorMessages);
-      return;
-    }
-  };
-
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleValidateForm();
-    formik.handleSubmit(e);
-  };
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   return (
     <>
@@ -254,13 +241,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
             </div>
           )}
 
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
+          <AlertErrorList formErrorList={formErrorList} onClose={close} />
 
           <div className='grid grid-cols-1 gap-4'>
             <TextInput