feat(FE): Add 5MB file size check and show form errors

src/components/pages/expense/form/ExpenseRequestForm.tsx

@@ -37,6 +37,8 @@ import { cn, sleep } from '@/lib/helper';
 import { LocationApi, SupplierApi } from '@/services/api/master-data';
 import { ACCEPTED_FILE_TYPE } from '@/config/constant';
 import { Supplier } from '@/types/api/master-data/supplier';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface ExpenseFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -55,6 +57,7 @@ const ExpenseRequestForm = ({
   const rejectModal = useModal();
 
   const [expenseFormErrorMessage, setExpenseFormErrorMessage] = useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   const createExpenseHandler = useCallback(
     async (payload: CreateExpensePayload) => {
@@ -322,6 +325,22 @@ const ExpenseRequestForm = ({
     router.push('/expense');
   };
 
+  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);
+  };
+
   useEffect(() => {
     formikSetValues(getExpenseFormInitialValues(initialValues));
   }, [formikSetValues, getExpenseFormInitialValues, initialValues]);
@@ -347,10 +366,27 @@ const ExpenseRequestForm = ({
         </header>
 
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
+          {expenseFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{expenseFormErrorMessage}</span>
+            </div>
+          )}
+
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
           <div className='grid grid-cols-12 gap-4'>
             <SelectInput
               label='Kategori'
@@ -535,17 +571,6 @@ const ExpenseRequestForm = ({
               </div>
             )}
 
-            {expenseFormErrorMessage && (
-              <div role='alert' className='alert alert-error w-full'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{expenseFormErrorMessage}</span>
-              </div>
-            )}
-
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {