Adopt page, minor adjustment to backend

web/components/PetProfile.js

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { getSpeciesEmoji, getStatusClass } from "@/components/petUtils";
+
+export default function PetProfile({ petName, petSpecies, petBreed, petAge, petStatus, petPrice }) {
+  return (
+    <div className="pet-detail-card">
+      <div className="pet-detail-image-wrapper">
+        <span className="pet-detail-emoji">{getSpeciesEmoji(petSpecies)}</span>
+      </div>
+
+      <div className="pet-detail-info">
+        <div className="pet-detail-header">
+          <h1 className="pet-detail-name">{petName}</h1>
+          <span className={`pet-card-status ${getStatusClass(petStatus)}`}>
+            {petStatus}
+          </span>
+        </div>
+
+        <div className="pet-detail-fields">
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Species</span>
+            <span className="pet-detail-value">{petSpecies ?? "—"}</span>
+          </div>
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Breed</span>
+            <span className="pet-detail-value">{petBreed ?? "—"}</span>
+          </div>
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Age</span>
+            <span className="pet-detail-value">
+              {petAge != null ? `${petAge} ${petAge === 1 ? "year" : "years"}` : "—"}
+            </span>
+          </div>
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Adoption Fee</span>
+            <span className="pet-detail-value pet-detail-price">
+              {petPrice != null ? `$${parseFloat(petPrice).toFixed(2)}` : "—"}
+            </span>
+          </div>
+        </div>
+
+        {/* Status */}
+        {petStatus?.toLowerCase() === "available" && (
+          <div className="pet-detail-cta">
+            <p className="pet-detail-cta-text">
+              Interested in adopting {petName}? Visit us in store or schedule an appointment.
+            </p>
+            <Link href="/appointments" className="pet-detail-cta-btn">
+              Schedule an Appointment
+            </Link>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}