From 9f93200bd568eb87f811ba7a9cc5ca49a2078d57 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 28 Jan 2026 14:14:44 +0700
Subject: [PATCH 1/2] refactor(FE): Move form error alerts to bottom of forms

---
 .../inventory/movement/form/MovementForm.tsx  | 40 ++++++++++---------
 .../form/ProductCategoryForm.tsx              | 28 +++++++------
 .../master-data/product/form/ProductForm.tsx  | 29 ++++++++------
 .../recording/form/RecordingForm.tsx          | 34 ++++++++--------
 .../uniformity/form/UniformityForm.tsx        | 40 ++++++++++---------
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 40 ++++++++++---------
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 40 ++++++++++---------
 .../form/request/PurchaseRequestForm.tsx      | 40 ++++++++++---------
 8 files changed, 154 insertions(+), 137 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index ff3edbfc..ef4bc3bb 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1263,25 +1263,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {movementFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{movementFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
-          )}
-
           {/* Top card - Movement details */}
           <Card
             title='Detail Movement'
@@ -2007,6 +1988,27 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
             )}
           </Card>
 
+          <div className='w-full'>
+            {movementFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{movementFormErrorMessage}</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' && (
diff --git a/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx b/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
index 1e61879c..b75795b1 100644
--- a/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
+++ b/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
@@ -159,19 +159,6 @@ const ProductCategoryForm = ({
           onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {formErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{formErrorMessage}</span>
-            </div>
-          )}
-
-          <AlertErrorList formErrorList={formErrorList} onClose={close} />
-
           <div className='flex flex-col gap-4'>
             <TextInput
               required
@@ -240,6 +227,21 @@ const ProductCategoryForm = ({
               </div>
             )}
 
+            <div className='w-full mb-4'>
+              {formErrorMessage && (
+                <div role='alert' className='alert alert-error'>
+                  <Icon
+                    icon='material-symbols:error-outline'
+                    width={24}
+                    height={24}
+                  />
+                  <span>{formErrorMessage}</span>
+                </div>
+              )}
+
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            </div>
+
             {type !== 'detail' && (
               <div
                 className={cn('flex flex-row justify-end gap-2', {
diff --git a/src/components/pages/master-data/product/form/ProductForm.tsx b/src/components/pages/master-data/product/form/ProductForm.tsx
index 45ba192d..65329464 100644
--- a/src/components/pages/master-data/product/form/ProductForm.tsx
+++ b/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', {
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 83076391..13ce9cc9 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1734,22 +1734,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           onSubmit={handleFormSubmit}
           className='w-full mt-8 flex flex-col gap-6'
         >
-          {recordingFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{recordingFormErrorMessage}</span>
-            </div>
-          )}
-
-          {/* Error List Alert */}
-          {formErrorList.length > 0 && (
-            <AlertErrorList formErrorList={formErrorList} onClose={close} />
-          )}
-
           {/* Basic Info Card */}
           {(type === 'add' || type === 'edit') && (
             <Card
@@ -3010,6 +2994,24 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             </Card>
           )}
 
+          <div className='w-full'>
+            {recordingFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{recordingFormErrorMessage}</span>
+              </div>
+            )}
+
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            )}
+          </div>
+
           {/* Action buttons */}
           <div className='flex flex-col sm:flex-row sm:justify-between gap-2'>
             {/* Left side - Detail & Edit actions */}
diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index e6b0657d..8d62f09e 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -511,25 +511,6 @@ const UniformityForm = ({
           <h2 className='text-2xl font-semibold mb-6'>Informasi Umum</h2>
 
           <form onSubmit={handleFormSubmit} className='flex flex-col gap-6'>
-            {uniformityFormErrorMessage && (
-              <div className='alert alert-error' role='alert'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{uniformityFormErrorMessage}</span>
-              </div>
-            )}
-
-            {/* Error List Alert */}
-            {formErrorList.length > 0 && (
-              <AlertErrorList
-                formErrorList={formErrorList}
-                onClose={() => setFormErrorList([])}
-              />
-            )}
-
             <DateInput
               required
               label='Tanggal'
@@ -753,6 +734,27 @@ const UniformityForm = ({
               )}
             </div>
 
+            <div className='w-full'>
+              {uniformityFormErrorMessage && (
+                <div className='alert alert-error' role='alert'>
+                  <Icon
+                    icon='material-symbols:error-outline'
+                    width={24}
+                    height={24}
+                  />
+                  <span>{uniformityFormErrorMessage}</span>
+                </div>
+              )}
+
+              {/* Error List Alert */}
+              {formErrorList.length > 0 && (
+                <AlertErrorList
+                  formErrorList={formErrorList}
+                  onClose={() => setFormErrorList([])}
+                />
+              )}
+            </div>
+
             {!isNextStep && (
               <RequirePermission permissions='lti.production.uniformity.create'>
                 <Button
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index de27a169..c7b196a2 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/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'>
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index a232347d..000c212b 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/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'>
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 83d9e2d7..90f79e6d 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/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' && (

From 554037bfe54ee1edb431e136aefac2df44483d61 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 28 Jan 2026 14:20:41 +0700
Subject: [PATCH 2/2] refactor(FE): Move expense form error alerts below fields

---
 .../pages/expense/form/ExpenseRequestForm.tsx | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/expense/form/ExpenseRequestForm.tsx b/src/components/pages/expense/form/ExpenseRequestForm.tsx
index ed30de3d..733204d9 100644
--- a/src/components/pages/expense/form/ExpenseRequestForm.tsx
+++ b/src/components/pages/expense/form/ExpenseRequestForm.tsx
@@ -372,23 +372,6 @@ const ExpenseRequestForm = ({
           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'
@@ -557,6 +540,24 @@ const ExpenseRequestForm = ({
             />
           </div>
 
+          {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='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>