Merge remote-tracking branch 'origin/feature/IO-3537-Bill-Entry-Scroll-to-Top-for-Errors' into release/2026-02-27

client/src/components/bill-enter-modal/bill-enter-modal.container.jsx

@@ -58,6 +58,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   const notification = useNotification();
   const fileInputRef = useRef(null);
   const pollingIntervalRef = useRef(null);
+  const formTopRef = useRef(null);
 
   const {
     treatments: { Enhanced_Payroll, Imgproxy, Bill_OCR_AI }
@@ -66,7 +67,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
     names: ["Enhanced_Payroll", "Imgproxy", "Bill_OCR_AI"],
     splitKey: bodyshop.imexshopid
   });
-  
+
   const formValues = useMemo(() => {
     return {
       ...billEnterModal.context.bill,
@@ -499,17 +500,25 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         autoComplete={"off"}
         layout="vertical"
         form={form}
-        onFinishFailed={() => {
+        onFinishFailed={(errorInfo) => {
           setEnterAgain(false);
+          // Scroll to the top of the form to show validation errors
+          if (errorInfo.errorFields && errorInfo.errorFields.length > 0) {
+            setTimeout(() => {
+              formTopRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+            }, 100);
+          }
         }}
       >
-        <RbacWrapper action="bills:enter">
+        <div ref={formTopRef}>
-          <BillFormContainer
+          <RbacWrapper action="bills:enter">
-            form={form}
+            <BillFormContainer
-            isAiScan={isAiScan}
+              form={form}
-            disableInvNumber={billEnterModal.context.disableInvNumber}
+              isAiScan={isAiScan}
-          />
+              disableInvNumber={billEnterModal.context.disableInvNumber}
-        </RbacWrapper>
+            />
+          </RbacWrapper>
+        </div>
       </Form>
     </Modal>
   );

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -39,11 +39,13 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
               {errors.length > 0 && (
                 <AlertComponent
                   type="error"
-                  title={
+                  message={t("general.labels.validationerror")}
+                  description={
                     <div>
                       <ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
                     </div>
                   }
+                  showIcon
                 />
               )}
             </Space>

client/src/translations/en_us/common.json

@@ -1390,6 +1390,7 @@
         "unknown": "Unknown",
         "unsavedchanges": "Unsaved changes.",
         "username": "Username",
+        "validationerror": "Please fix the following errors:",
         "view": "View",
         "wednesday": "Wednesday",
         "yes": "Yes"

client/src/translations/es/common.json

@@ -1390,6 +1390,7 @@
         "unknown": "Desconocido",
         "unsavedchanges": "",
         "username": "",
+        "validationerror": "",
         "view": "",
         "wednesday": "",
         "yes": ""

client/src/translations/fr/common.json

@@ -1390,6 +1390,7 @@
         "unknown": "Inconnu",
         "unsavedchanges": "",
         "username": "",
+        "validationerror": "",
         "view": "",
         "wednesday": "",
         "yes": ""