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

src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx

@@ -370,25 +370,6 @@ const PurchaseOrderAcceptApprovalForm = ({
             ? 'Konfirmasi Penerimaan Produk'
             : 'Edit Penerimaan Produk'}
         </h2>
-        {purchaseOrderFormErrorMessage && (
-          <div role='alert' className='alert alert-error'>
-            <Icon
-              icon='material-symbols:error-outline'
-              width={24}
-              height={24}
-            />
-            <span>{purchaseOrderFormErrorMessage}</span>
-          </div>
-        )}
-
-        {/* Error List Alert */}
-        {formErrorList.length > 0 && (
-          <AlertErrorList
-            formErrorList={formErrorList}
-            onClose={() => setFormErrorList([])}
-          />
-        )}
-
         <div className='overflow-x-auto'>
           <table className='table'>
             <thead>
@@ -709,6 +690,27 @@ const PurchaseOrderAcceptApprovalForm = ({
           />
         </div>
 
+        <div className='w-full mt-4'>
+          {purchaseOrderFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{purchaseOrderFormErrorMessage}</span>
+            </div>
+          )}
+
+          {/* Error List Alert */}
+          {formErrorList.length > 0 && (
+            <AlertErrorList
+              formErrorList={formErrorList}
+              onClose={() => setFormErrorList([])}
+            />
+          )}
+        </div>
+
         {/* Action buttons */}
         <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
           <div className='flex flex-row justify-end gap-2 w-full'>

src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx

@@ -688,25 +688,6 @@ const PurchaseOrderStaffApprovalForm = ({
               ? 'Konfirmasi Item Pembelian'
               : 'Edit Item Pembelian'}
           </h2>
-          {purchaseOrderFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{purchaseOrderFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
-
           <div className='overflow-x-auto'>
             {groupedPurchaseItems.length > 0 ? (
               <div>
@@ -1186,6 +1167,27 @@ const PurchaseOrderStaffApprovalForm = ({
             />
           </div>
 
+          <div className='w-full mt-4'>
+            {purchaseOrderFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{purchaseOrderFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList
+                formErrorList={formErrorList}
+                onClose={() => setFormErrorList([])}
+              />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
             <div className='flex flex-row justify-end gap-2 w-full'>

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

@@ -494,25 +494,6 @@ const PurchaseRequestForm = ({
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {purchaseRequestFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{purchaseRequestFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
-
           {/* Basic Info Card */}
           <Card
             title='Informasi Purchase Request'
@@ -912,6 +893,27 @@ const PurchaseRequestForm = ({
             )}
           </Card>
 
+          <div className='w-full mb-4'>
+            {purchaseRequestFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{purchaseRequestFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList
+                formErrorList={formErrorList}
+                onClose={() => setFormErrorList([])}
+              />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'detail' && (