fix appointments and pagination

web/app/appointments/page.js

@@ -341,6 +341,7 @@ function AppointmentsPage() {
 
   const didPreselectRef = useRef(false);
   const errorRef = useRef(null);
+  const historyRef = useRef(null);
 
   // Adoption-mode URL verification
   const [adoptionVerified, setAdoptionVerified]       = useState(!adoptionMode);
@@ -507,9 +508,9 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
   }, [token]);
 
   useEffect(() => {
-    if (adoptionMode) loadAdoptions();
-    else loadAppointments();
-  }, [adoptionMode, loadAppointments, loadAdoptions]);
+    loadAppointments();
+    loadAdoptions();
+  }, [loadAppointments, loadAdoptions]);
 
   async function handleCancelAppointment(appointmentId) {
     if (!confirm("Cancel this appointment?")) return;
@@ -704,6 +705,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
         setSuccess(`Adoption request submitted! ${adoptionPetName} is now marked as Pending. We'll be in touch soon.`);
         setEmployeeId("");
         loadAdoptions();
+        setTimeout(() => historyRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 300);
         return;
       }
 
@@ -744,6 +746,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
       setSelectedPetIds([]);
       setAvailableSlots([]);
       loadAppointments();
+      setTimeout(() => historyRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 300);
     } 
     
     catch (err) {
@@ -957,7 +960,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
           </form>
         ) : null}
 
-        <div className="appt-history">
+        <div className="appt-history" ref={historyRef}>
           <h2 className="appt-form-title">
             {adoptionMode ? "Your Adoptions" : canBookAppointments ? "Your Appointments" : "Appointments"}
           </h2>