Adopt page, minor adjustment to backend

web/app/adopt/[id]/page.js

@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { useParams } from "next/navigation";
+import PetProfile from "@/components/PetProfile";
+
+const API_BASE = "";
+
+export default function PetDetailPage() {
+  const { id } = useParams();
+  const [pet, setPet] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!id) return;
+    setLoading(true);
+    setError(null);
+
+    fetch(`${API_BASE}/api/v1/pets/${id}`)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status} – ${res.statusText}`);
+        return res.json();
+      })
+      .then((data) => setPet(data))
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  return (
+    <main className="pet-detail-page">
+      <div className="pet-detail-container">
+        <Link href="/adopt" className="pet-detail-back">← Back to Pets</Link>
+
+        {loading && <p className="adopt-status-msg">Loading pet details...</p>}
+        {error && <p className="adopt-status-msg adopt-error">{error}</p>}
+
+        {!loading && !error && pet && (
+          <PetProfile
+            petName={pet.petName}
+            petSpecies={pet.petSpecies}
+            petBreed={pet.petBreed}
+            petAge={pet.petAge}
+            petStatus={pet.petStatus}
+            petPrice={pet.petPrice}
+          />
+        )}
+      </div>
+    </main>
+  );
+}