update

frontEnd/components/pages/support/CreateTicketForm.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, FormEvent } from 'react';
+import { useState, FormEvent, useEffect, useRef } from 'react';
 import { createTicket, CreateTicketData } from '@/lib/api/supportService';
 import { useTicketCategories } from '@/lib/hooks/useSupport';
 
@@ -26,6 +26,49 @@ const CreateTicketForm = ({ onOpenStatusCheck }: CreateTicketFormProps) => {
   const [submitSuccess, setSubmitSuccess] = useState(false);
   const [ticketNumber, setTicketNumber] = useState<string>('');
   const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+  
+  // Refs for scrolling to messages
+  const errorRef = useRef<HTMLDivElement>(null);
+  const successRef = useRef<HTMLDivElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  // Scroll to error/success messages when they appear
+  useEffect(() => {
+    if (submitError && errorRef.current) {
+      setTimeout(() => {
+        errorRef.current?.scrollIntoView({ 
+          behavior: 'smooth', 
+          block: 'center' 
+        });
+      }, 100);
+    }
+  }, [submitError]);
+
+  useEffect(() => {
+    if (submitSuccess && successRef.current) {
+      setTimeout(() => {
+        successRef.current?.scrollIntoView({ 
+          behavior: 'smooth', 
+          block: 'center' 
+        });
+      }, 100);
+    }
+  }, [submitSuccess]);
+
+  // Scroll to first validation error
+  useEffect(() => {
+    if (Object.keys(fieldErrors).length > 0 && formRef.current) {
+      const firstErrorField = formRef.current.querySelector('.field-error');
+      if (firstErrorField) {
+        setTimeout(() => {
+          firstErrorField.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'center' 
+          });
+        }, 100);
+      }
+    }
+  }, [fieldErrors]);
 
   const handleInputChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
@@ -72,6 +115,16 @@ const CreateTicketForm = ({ onOpenStatusCheck }: CreateTicketFormProps) => {
     e.preventDefault();
     
     if (!validateForm()) {
+      // Scroll to first error after validation
+      setTimeout(() => {
+        const firstErrorField = formRef.current?.querySelector('.field-error');
+        if (firstErrorField) {
+          firstErrorField.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'center' 
+          });
+        }
+      }, 100);
       return;
     }
     
@@ -125,7 +178,7 @@ const CreateTicketForm = ({ onOpenStatusCheck }: CreateTicketFormProps) => {
 
   if (submitSuccess) {
     return (
-      <div className="ticket-success">
+      <div className="ticket-success" ref={successRef}>
         <div className="success-icon">
           <i className="fa-solid fa-circle-check"></i>
         </div>
@@ -204,7 +257,7 @@ const CreateTicketForm = ({ onOpenStatusCheck }: CreateTicketFormProps) => {
           </div>
 
           {submitError && (
-            <div className="alert-enterprise alert-error">
+            <div className="alert-enterprise alert-error" ref={errorRef}>
               <i className="fa-solid fa-triangle-exclamation"></i>
               <div>
                 <strong>Submission Error</strong>
@@ -213,7 +266,7 @@ const CreateTicketForm = ({ onOpenStatusCheck }: CreateTicketFormProps) => {
             </div>
           )}
 
-          <form onSubmit={handleSubmit} className="support-form-enterprise">
+          <form ref={formRef} onSubmit={handleSubmit} className="support-form-enterprise">
             {/* Personal Information */}
             <div className="form-section">
               <div className="section-header">