web issue fixes

web/app/appointments/page.js

@@ -2,6 +2,7 @@
 
 import dynamic from "next/dynamic";
 import { useState, useEffect, useCallback, useRef } from "react";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useAuth } from "@/context/AuthContext";
 
@@ -339,6 +340,7 @@ function AppointmentsPage() {
   const adoptionStoreName  = searchParams.get("storeName") || "";
 
   const didPreselectRef = useRef(false);
+  const errorRef = useRef(null);
 
   // Adoption-mode URL verification
   const [adoptionVerified, setAdoptionVerified]       = useState(!adoptionMode);
@@ -364,6 +366,12 @@ function AppointmentsPage() {
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(null);
 
+  useEffect(() => {
+    if (error && errorRef.current) {
+      errorRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [error]);
+
   const [appointments, setAppointments] = useState([]);
   const [loadingAppointments, setLoadingAppointments] = useState(false);
 
@@ -779,7 +787,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
           <form className="appt-form" onSubmit={handleSubmit}>
             <h2 className="appt-form-title">{adoptionMode ? "New Adoption" : "New Appointment"}</h2>
 
-            {error && <div className="appt-error">{error}</div>}
+            {error && <div className="appt-error" ref={errorRef}>{error}</div>}
 
             {adoptionMode && adoptionVerifyLoading && (
               <p className="appt-loading">Verifying pet details…</p>
@@ -805,7 +813,10 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
               <div className="appt-label">
                 <span>Select Your Pet</span>
                 {eligiblePets.length === 0 ? (
-                  <p className="appt-no-slots">You have no adopted pets available for appointments.</p>
+                  <p className="appt-no-slots">
+                    You have no adopted pets available.{" "}
+                    <Link href="/profile">Add a pet on your profile page.</Link>
+                  </p>
                 ) : (
                   <div className="appt-pets-grid">
                     {eligiblePets.map((p) => (