Adopt page filter added

web/app/adopt/page.js

@@ -1,31 +1,62 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import PetCard from "@/components/PetCard";
 import { fetchAllPages } from "@/lib/fetchAllPages";
+import { useCart } from "@/context/CartContext";
 
 const API_BASE = "";
+const PAGE_SIZE = 10000;
 
 export default function AdoptPage() {
+  const { selectedStoreId } = useCart();
+
+  // pets = everything returned by the server (filtered by species + store + text query)
   const [pets, setPets] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [health, setHealth] = useState(null);
+
   const [search, setSearch] = useState("");
   const [query, setQuery] = useState("");
 
-  const PAGE_SIZE = 100;
+  const [selectedSpecies, setSelectedSpecies] = useState("");
+  const [selectedBreed, setSelectedBreed] = useState("");
 
+  // Species options come from a dedicated fetch (only store-filtered, no species filter)
+  const [speciesOptions, setSpeciesOptions] = useState([]);
+
+  // ---------- health check ----------
   useEffect(() => {
     fetch(`${API_BASE}/api/v1/health`)
       .then((res) => (res.ok ? setHealth("online") : setHealth("error")))
       .catch(() => setHealth("offline"));
   }, []);
 
+  useEffect(() => {
+    setSelectedSpecies("");
+    const params = new URLSearchParams({ status: "Available", page: "0", size: String(PAGE_SIZE) });
+    if (selectedStoreId) params.set("storeId", String(selectedStoreId));
+
+    fetch(`${API_BASE}/api/v1/pets?${params}`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data) => {
+        const items = data?.content ?? [];
+        const species = [...new Set(items.map((p) => p.petSpecies).filter(Boolean))].sort((a, b) =>
+          a.localeCompare(b, undefined, { sensitivity: "base" })
+        );
+        setSpeciesOptions(species);
+      })
+      .catch(() => setSpeciesOptions([]));
+  }, [selectedStoreId]);
+
+  useEffect(() => {
+    setSelectedBreed("");
+  }, [selectedSpecies]);
+
   useEffect(() => {
     setLoading(true);
     setError(null);
-
     fetchAllPages((page) => {
       const params = new URLSearchParams({
         page: String(page),
@@ -33,25 +64,44 @@ export default function AdoptPage() {
         sort: "id,asc",
         status: "Available",
       });
-      if (query) {
-        params.set("q", query);
-      }
+      if (query) params.set("q", query);
+      if (selectedSpecies) params.set("species", selectedSpecies);
+      if (selectedStoreId) params.set("storeId", String(selectedStoreId));
+
       return `${API_BASE}/api/v1/pets?${params}`;
     })
-      .then((allPets) => {
-        setPets(allPets);
-      })
+      .then(setPets)
       .catch((err) => setError(err.message))
       .finally(() => setLoading(false));
-  }, [query]);
+  }, [query, selectedSpecies, selectedStoreId]);
+
+  const breedOptions = useMemo(
+    () =>
+      [...new Set(pets.map((p) => p.petBreed).filter(Boolean))].sort((a, b) =>
+        a.localeCompare(b, undefined, { sensitivity: "base" })
+      ),
+    [pets]
+  );
+  
+  const displayedPets = useMemo(
+    () => (selectedBreed ? pets.filter((p) => p.petBreed === selectedBreed) : pets),
+    [pets, selectedBreed]
+  );
 
   function handleSearch(e) {
     e.preventDefault();
-    setLoading(true);
-    setError(null);
     setQuery(search.trim());
   }
 
+  function handleClearFilters() {
+    setSearch("");
+    setQuery("");
+    setSelectedSpecies("");
+    setSelectedBreed("");
+  }
+
+  const hasActiveFilters = query || selectedSpecies || selectedBreed;
+
   return (
     <main className="adopt-page">
       <section className="adopt-hero">
@@ -61,26 +111,57 @@ export default function AdoptPage() {
       </section>
 
       <section className="adopt-controls">
+        <div className="adopt-filters-row">
+          <div className="adopt-filter-group">
+            <label className="adopt-filter-label" htmlFor="species-filter">Species</label>
+            <select
+              id="species-filter"
+              className="adopt-filter-select"
+              value={selectedSpecies}
+              onChange={(e) => setSelectedSpecies(e.target.value)}
+            >
+              <option value="">All Species</option>
+              {speciesOptions.map((s) => (
+                <option key={s} value={s}>{s}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="adopt-filter-group">
+            <label className="adopt-filter-label" htmlFor="breed-filter">Breed</label>
+            <select
+              id="breed-filter"
+              className="adopt-filter-select"
+              value={selectedBreed}
+              onChange={(e) => setSelectedBreed(e.target.value)}
+              disabled={!selectedSpecies}
+            >
+              <option value="">{!selectedSpecies ? "Select a species first" : "All Breeds"}</option>
+              {breedOptions.map((b) => (
+                <option key={b} value={b}>{b}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
         <div className="adopt-controls-row">
           <form className="adopt-search-form" onSubmit={handleSearch}>
             <input
               className="adopt-search-input"
               type="text"
-               placeholder="Search by name, species, or breed..."
+              placeholder="Search by name, species, or breed..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
             />
             <button className="adopt-search-btn" type="submit">Search</button>
-            {query && (
-              <button
-                className="adopt-clear-btn"
-                type="button"
-                onClick={() => { setLoading(true); setError(null); setSearch(""); setQuery(""); }}
-              >
-                Clear
-              </button>
-            )}
           </form>
+
+          {hasActiveFilters && (
+            <button className="adopt-clear-btn" type="button" onClick={handleClearFilters}>
+              Clear Filters
+            </button>
+          )}
+
           <span
             className={`backend-status backend-status--${health ?? "checking"}`}
             title={
@@ -109,13 +190,13 @@ export default function AdoptPage() {
           </div>
         )}
 
-        {!loading && !error && pets.length === 0 && (
-          <p className="adopt-status-msg">No pets found.</p>
+        {!loading && !error && displayedPets.length === 0 && (
+          <p className="adopt-status-msg">No pets found matching your filters.</p>
         )}
 
-        {!loading && !error && pets.length > 0 && (
+        {!loading && !error && displayedPets.length > 0 && (
           <div className="adopt-grid">
-            {pets.map((pet) => (
+            {displayedPets.map((pet) => (
               <PetCard
                 key={pet.petId}
                 petId={pet.petId}
@@ -127,7 +208,6 @@ export default function AdoptPage() {
             ))}
           </div>
         )}
-
       </section>
     </main>
   );

web/app/globals.css

@@ -824,6 +824,58 @@ body {
 }
 /* Adopt diagnostics */
 
+.adopt-filters-row {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.adopt-filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 160px;
+}
+
+.adopt-filter-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #555;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.adopt-filter-select {
+  padding: 0.6rem 1rem;
+  border: 2px solid #ddd;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  font-family: Arial, sans-serif;
+  background: #fff;
+  color: #333;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2rem;
+}
+
+.adopt-filter-select:focus {
+  border-color: orange;
+}
+
+.adopt-filter-select:disabled {
+  background-color: #f5f5f5;
+  color: #aaa;
+  cursor: not-allowed;
+  border-color: #e0e0e0;
+}
+
 .adopt-controls-row {
   display: flex;
   align-items: center;