refactor(FE): Show validation error list before submit

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -36,6 +36,8 @@ import CheckboxInput from '@/components/input/CheckboxInput';
 import Badge from '@/components/Badge';
 import Card from '@/components/Card';
 import { S3_PUBLIC_BASE_URL } from '@/config/constant';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -53,6 +55,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   // ===== FORM HANDLERS =====
   const createMovementHandler = useCallback(
@@ -819,6 +822,22 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     formik.errors.destination_warehouse_id,
   ]);
 
+  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);
+  };
+
   return (
     <>
       <section className='w-full'>
@@ -838,7 +857,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           </h1>
         </header>
         <form
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
@@ -852,6 +871,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
               <span>{movementFormErrorMessage}</span>
             </div>
           )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+
           {/* Top card - Movement details */}
           <Card
             title='Detail Movement'