update

frontEnd/components/pages/support/TicketStatusCheck.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, FormEvent } from 'react';
+import { useState, FormEvent, useEffect, useRef } from 'react';
 import { checkTicketStatus, SupportTicket } from '@/lib/api/supportService';
 
 const TicketStatusCheck = () => {
@@ -7,6 +7,34 @@ const TicketStatusCheck = () => {
   const [isSearching, setIsSearching] = useState(false);
   const [searchError, setSearchError] = useState<string | null>(null);
   const [ticket, setTicket] = useState<SupportTicket | null>(null);
+  
+  // Refs for scrolling to results
+  const errorRef = useRef<HTMLDivElement>(null);
+  const ticketRef = useRef<HTMLDivElement>(null);
+  
+  // Scroll to error when it appears
+  useEffect(() => {
+    if (searchError && errorRef.current) {
+      setTimeout(() => {
+        errorRef.current?.scrollIntoView({ 
+          behavior: 'smooth', 
+          block: 'center' 
+        });
+      }, 100);
+    }
+  }, [searchError]);
+  
+  // Scroll to ticket results when they appear
+  useEffect(() => {
+    if (ticket && ticketRef.current) {
+      setTimeout(() => {
+        ticketRef.current?.scrollIntoView({ 
+          behavior: 'smooth', 
+          block: 'start' 
+        });
+      }, 100);
+    }
+  }, [ticket]);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -136,7 +164,7 @@ const TicketStatusCheck = () => {
           </form>
 
           {searchError && (
-            <div className="alert-enterprise alert-error">
+            <div ref={errorRef} className="alert-enterprise alert-error">
               <i className="fa-solid fa-exclamation-circle"></i>
               <div>
                 <strong>Ticket Not Found</strong>
@@ -146,7 +174,7 @@ const TicketStatusCheck = () => {
           )}
 
           {ticket && (
-            <div className="ticket-details-enterprise">
+            <div ref={ticketRef} className="ticket-details-enterprise">
               {/* Header Section */}
               <div className="ticket-header-enterprise">
                 <div className="ticket-number-section">