Age input when editing/adding pet profile

web/app/profile/page.js

@@ -30,6 +30,7 @@ export default function ProfilePage() {
   const [petName, setPetName] = useState("");
   const [species, setSpecies] = useState("");
   const [breed, setBreed] = useState("");
+  const [petAge, setPetAge] = useState("1");
   const [submitting, setSubmitting] = useState(false);
   const [petError, setPetError] = useState(null);
   const [profileForm, setProfileForm] = useState({ fullName: "", email: "", phone: "" });
@@ -230,6 +231,7 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
     setPetName("");
     setSpecies("");
     setBreed("");
+    setPetAge("1");
     setPetError(null);
     setShowForm(true);
   }
@@ -239,6 +241,7 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
     setPetName(pet.petName);
     setSpecies(pet.species);
     setBreed(pet.breed || "");
+    setPetAge(pet.petAge != null ? String(pet.petAge) : "1");
     setPetError(null);
     setShowForm(true);
   }
@@ -265,7 +268,7 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-        body: JSON.stringify({ petName, species, breed: breed || null }),
+        body: JSON.stringify({ petName, species, breed: breed || null, petAge: Number(petAge) }),
       });
 
       if (!res.ok) {
@@ -485,6 +488,19 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
                   ))}
                 </select>
               </label>
+              <label className="appt-label">
+                Age (years)
+                <select
+                  className="appt-select"
+                  value={petAge}
+                  onChange={(e) => setPetAge(e.target.value)}
+                  required
+                >
+                  {Array.from({ length: 20 }, (_, i) => i + 1).map((n) => (
+                    <option key={n} value={n}>{n}</option>
+                  ))}
+                </select>
+              </label>
               <div className="profile-pet-form-actions">
                 <button type="submit" className="appt-submit-btn" disabled={submitting}>
                   {submitting ? "Saving..." : editingPet ? "Save Changes" : "Add Pet"}
@@ -531,6 +547,7 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
                     <span className="profile-pet-card-name">{pet.petName}</span>
                     <span className="profile-pet-card-detail">{pet.species}</span>
                     {pet.breed && <span className="profile-pet-card-detail">{pet.breed}</span>}
+                    {pet.petAge != null && <span className="profile-pet-card-detail">Age: {pet.petAge === 0 ? "< 1 yr" : `${pet.petAge} yr${pet.petAge !== 1 ? "s" : ""}`}</span>}
                   </div>
                   <div className="profile-pet-card-actions">
                     <button type="button" className="profile-pet-edit-btn" onClick={() => openEditForm(pet)}>Edit</button>