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>
   );