fix appointments and pagination

web/app/adopt/page.js

@@ -74,13 +74,20 @@ export default function AdoptPage() {
     [pets]
   );
   
-  const displayedPets = useMemo(
+  const ITEMS_PER_PAGE = 20;
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const filteredPets = useMemo(
     () => (selectedBreed ? pets.filter((p) => p.petBreed === selectedBreed) : pets),
     [pets, selectedBreed]
   );
 
+  const totalPages = Math.ceil(filteredPets.length / ITEMS_PER_PAGE);
+  const displayedPets = filteredPets.slice(currentPage * ITEMS_PER_PAGE, (currentPage + 1) * ITEMS_PER_PAGE);
+
   function handleSearch(e) {
     e.preventDefault();
+    setCurrentPage(0);
     setQuery(search.trim());
   }
 
@@ -89,6 +96,7 @@ export default function AdoptPage() {
     setQuery("");
     setSelectedSpecies("");
     setSelectedBreed("");
+    setCurrentPage(0);
   }
 
   const hasActiveFilters = query || selectedSpecies || selectedBreed;
@@ -109,7 +117,7 @@ export default function AdoptPage() {
               id="species-filter"
               className="adopt-filter-select"
               value={selectedSpecies}
-              onChange={(e) => setSelectedSpecies(e.target.value)}
+              onChange={(e) => { setSelectedSpecies(e.target.value); setCurrentPage(0); }}
             >
               <option value="">All Species</option>
               {speciesOptions.map((s) => (
@@ -124,7 +132,7 @@ export default function AdoptPage() {
               id="breed-filter"
               className="adopt-filter-select"
               value={selectedBreed}
-              onChange={(e) => setSelectedBreed(e.target.value)}
+              onChange={(e) => { setSelectedBreed(e.target.value); setCurrentPage(0); }}
               disabled={!selectedSpecies}
             >
               <option value="">{!selectedSpecies ? "Select a species first" : "All Breeds"}</option>
@@ -184,6 +192,25 @@ export default function AdoptPage() {
             ))}
           </div>
         )}
+        {!loading && !error && totalPages > 1 && (
+          <div className="pagination-controls">
+            <button
+              className="pagination-btn"
+              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+              disabled={currentPage === 0}
+            >
+              ← Prev
+            </button>
+            <span className="pagination-info">Page {currentPage + 1} of {totalPages}</span>
+            <button
+              className="pagination-btn"
+              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+              disabled={currentPage === totalPages - 1}
+            >
+              Next →
+            </button>
+          </div>
+        )}
       </section>
     </main>
   );

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();
+    loadAppointments();
-    else loadAppointments();
+    loadAdoptions();
-  }, [adoptionMode, 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>

web/app/globals.css

@@ -3030,3 +3030,7 @@ img, video, iframe {
 .contact-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
 .contact-error { color: #c0392b; font-size: 0.9rem; }
 .contact-success { color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.75rem 1rem; }
+.pagination-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem 1rem; }
+.pagination-btn { background: #333; color: white; border: none; border-radius: 8px; padding: 0.5rem 1.2rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
+.pagination-btn:disabled { background: #ccc; cursor: not-allowed; }
+.pagination-info { font-size: 0.9rem; color: #555; font-weight: 500; }

web/app/products/page.js

@@ -14,10 +14,13 @@ export default function ProductsPage() {
   const [query, setQuery] = useState("");
 
   const PAGE_SIZE = 100;
+  const ITEMS_PER_PAGE = 20;
+  const [currentPage, setCurrentPage] = useState(0);
 
   useEffect(() => {
     setLoading(true);
     setError(null);
+    setCurrentPage(0);
 
     fetchAllPages((page) => {
       const params = new URLSearchParams({
@@ -37,10 +40,14 @@ export default function ProductsPage() {
       .finally(() => setLoading(false));
   }, [query]);
 
+  const totalPages = Math.ceil(products.length / ITEMS_PER_PAGE);
+  const displayedProducts = products.slice(currentPage * ITEMS_PER_PAGE, (currentPage + 1) * ITEMS_PER_PAGE);
+
   function handleSearch(e) {
     e.preventDefault();
     setLoading(true);
     setError(null);
+    setCurrentPage(0);
     setQuery(search.trim());
   }
 
@@ -92,7 +99,7 @@ export default function ProductsPage() {
 
         {!loading && !error && products.length > 0 && (
           <div className="adopt-grid">
-            {products.map((product) => (
+            {displayedProducts.map((product) => (
               <ProductCard
                 key={product.prodId}
                 prodId={product.prodId}
@@ -104,7 +111,25 @@ export default function ProductsPage() {
             ))}
           </div>
         )}
-
+        {!loading && !error && totalPages > 1 && (
+          <div className="pagination-controls">
+            <button
+              className="pagination-btn"
+              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+              disabled={currentPage === 0}
+            >
+              ← Prev
+            </button>
+            <span className="pagination-info">Page {currentPage + 1} of {totalPages}</span>
+            <button
+              className="pagination-btn"
+              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+              disabled={currentPage === totalPages - 1}
+            >
+              Next →
+            </button>
+          </div>
+        )}
       </section>
     </main>
   );