refactor(FE): Display form error list in purchase forms

src/components/pages/purchase/form/request/PurchaseRequestForm.tsx

@@ -16,6 +16,7 @@ import SelectInput, {
 } from '@/components/input/SelectInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 import {
   PurchaseRequestFormSchema,
@@ -32,6 +33,7 @@ import {
 import { Supplier, SupplierProducts } from '@/types/api/master-data/supplier';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { formatNumber } from '@/lib/helper';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import { PurchaseApi } from '@/services/api/purchase';
 
 import Card from '@/components/Card';
@@ -59,6 +61,7 @@ const PurchaseRequestForm = ({
   );
   const [purchaseRequestFormErrorMessage, setPurchaseRequestFormErrorMessage] =
     useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   // ===== TYPE DEFINITIONS =====
   interface ProductOptionType {
@@ -211,6 +214,22 @@ const PurchaseRequestForm = ({
     },
   });
 
+  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);
+  };
+
   // ===== API DATA FETCHING =====
   const { data: supplierData, isLoading: isLoadingProducts } = useSWR(
     formik.values.supplier_id && Number(formik.values.supplier_id) > 0
@@ -487,7 +506,7 @@ const PurchaseRequestForm = ({
           </h1>
         </header>
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -501,6 +520,15 @@ const PurchaseRequestForm = ({
               <span>{purchaseRequestFormErrorMessage}</span>
             </div>
           )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           {/* Basic Info Card */}
           <Card
             title='Informasi Purchase Request'