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

src/components/pages/marketing/form/MarketingForm.tsx

@@ -48,8 +48,8 @@ import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater
 import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
 import RequirePermission from '@/components/helper/RequirePermission';
-import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
@@ -219,7 +219,6 @@ const MarketingForm = ({
   const [deliveryFormState, setDeliveryFormState] = useState<'add' | 'edit'>(
     'add'
   );
-  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [deliveryOrderValues, setDeliveryOrderValues] = useState<
     DeliveryOrderProductFormValues[]
   >(
@@ -561,22 +560,8 @@ const MarketingForm = ({
     );
   }, [memoSalesOrder]);
 
-  const handleValidateForm = async () => {
-    const errors = await formik.validateForm();
-
-    if (Object.keys(errors).length > 0) {
-      // Parse and display errors
-      const errorMessages = getUniqueFormikErrors(errors);
-      setFormErrorList(errorMessages);
-      return; // Stop submission
-    }
-  };
-
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleValidateForm();
-    formik.handleSubmit();
-  };
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   return (
     <>
@@ -686,13 +671,7 @@ const MarketingForm = ({
           </div>
         </div>
 
-        {/* Error List Alert */}
-        {formErrorList.length > 0 && (
-          <AlertErrorList
-            formErrorList={formErrorList}
-            onClose={() => setFormErrorList([])}
-          />
-        )}
+        <AlertErrorList formErrorList={formErrorList} onClose={close} />
 
         {/* Form Actions */}
         <div className='flex flex-row items-start justify-center gap-2 mt-4'>

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx

@@ -16,8 +16,8 @@ import Badge from '@/components/Badge';
 import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm';
 import * as Yup from 'yup';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 const DeliveryOrderProductForm = ({
   formState,
@@ -42,7 +42,6 @@ const DeliveryOrderProductForm = ({
     null
   );
   const [currentInput, setCurrentInput] = useState<string>('');
-  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   const salesOrder = salesOrders.find(
     (item) => item.id === initialValues?.marketing_product_id
@@ -168,21 +167,8 @@ const DeliveryOrderProductForm = ({
     }
   }, [initialValues]);
 
-  const handleValidateForm = () => {
-    formik.validateForm();
-    const formErrorList = getUniqueFormikErrors(formik.errors);
-    setFormErrorList(formErrorList);
-    if (formErrorList.length > 0) {
-      return;
-    }
-  };
-
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleBlurField(currentInput);
-    handleValidateForm();
-    formik.handleSubmit(e);
-  };
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   return (
     <>
@@ -388,12 +374,7 @@ const DeliveryOrderProductForm = ({
           />
         </div>
 
-        {formErrorList.length > 0 && (
-          <AlertErrorList
-            formErrorList={formErrorList}
-            onClose={() => setFormErrorList([])}
-          />
-        )}
+        <AlertErrorList formErrorList={formErrorList} onClose={close} />
 
         <div className='flex flex-row justify-end gap-3 mt-4'>
           <Button type='reset' color='warning'>

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx

@@ -24,8 +24,8 @@ import {
 } from '@/lib/helper';
 import PatternInput from '@/components/input/PatternInput';
 import Alert from '@/components/Alert';
-import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 const SalesOrderProductForm = ({
   initialValues,
@@ -39,7 +39,6 @@ const SalesOrderProductForm = ({
 }) => {
   const [formErrorMessage, setFormErrorMessage] = useState('');
   const [currentInput, setCurrentInput] = useState<string>('');
-  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   // ============ Formik ============
   const formik = useFormik<SalesOrderProductFormValues>({
@@ -172,23 +171,8 @@ const SalesOrderProductForm = ({
     }
   };
 
-  const handleValidateForm = async () => {
-    const errors = await formik.validateForm();
-
-    if (Object.keys(errors).length > 0) {
-      // Parse and display errors
-      const errorMessages = getUniqueFormikErrors(errors);
-      setFormErrorList(errorMessages);
-      return; // Stop submission
-    }
-  };
-
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleBlurField(currentInput);
-    handleValidateForm();
-    formik.handleSubmit(e);
-  };
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   return (
     <>
@@ -356,13 +340,7 @@ const SalesOrderProductForm = ({
           />
         </div>
 
-        {/* Error List Alert */}
-        {formErrorList.length > 0 && (
-          <AlertErrorList
-            formErrorList={formErrorList}
-            onClose={() => setFormErrorList([])}
-          />
-        )}
+        <AlertErrorList formErrorList={formErrorList} onClose={close} />
 
         <div className='flex flex-row justify-end gap-3 mt-4'>
           <Button type='reset' color='warning' onClick={handleResetForm}>