refactor(FE): Move form error alerts to bottom of forms

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

@@ -273,19 +273,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {productFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{productFormErrorMessage}</span>
-            </div>
-          )}
-
-          <AlertErrorList formErrorList={formErrorList} onClose={close} />
-
           <div className='grid grid-cols-1 gap-4'>
             <TextInput
               required
@@ -627,6 +614,22 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 )}
               </div>
             )}
+
+            <div className='mb-4 w-full'>
+              {productFormErrorMessage && (
+                <div role='alert' className='alert alert-error'>
+                  <Icon
+                    icon='material-symbols:error-outline'
+                    width={24}
+                    height={24}
+                  />
+                  <span>{productFormErrorMessage}</span>
+                </div>
+              )}
+
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            </div>
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {