Comments, appointments adjustments, fixed some issues

web/app/profile/page.js

@@ -6,6 +6,7 @@ import { useAuth } from "@/context/AuthContext";
 
 const API_BASE = "";
 
+//Species and breed options for the add/edit pet form
 const SPECIES_BREEDS = {
   Dog: ["Beagle", "Boxer", "Bulldog", "Chihuahua", "Dachshund", "German Shepherd", "Golden Retriever", "Labrador Retriever", "Poodle", "Rottweiler", "Shih Tzu", "Siberian Husky", "Yorkshire Terrier", "Mixed / Other"],
   Cat: ["Abyssinian", "Bengal", "British Shorthair", "Maine Coon", "Persian", "Ragdoll", "Scottish Fold", "Siamese", "Sphynx", "Mixed / Other"],
@@ -19,12 +20,13 @@ const SPECIES_BREEDS = {
 };
 
 const labelCls = "flex flex-col gap-[0.35rem] text-[0.9rem] font-semibold text-[#444]";
-const inputCls = "px-[0.85rem] py-[0.6rem] border border-[#ddd] rounded-lg text-base outline-none transition-all focus:border-[#e68672] focus:shadow-[0_0_0_3px_rgba(230,134,114,0.2)]";
+const inputCls = "px-[0.85rem] py-[0.6rem] bg-white border border-[#ddd] rounded-lg text-base outline-none transition-all focus:border-[#e68672] focus:shadow-[0_0_0_3px_rgba(230,134,114,0.2)]";
 const selectCls = `custom-select ${inputCls} bg-white cursor-pointer`;
 const errorCls = "bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b] rounded-lg px-4 py-3 text-[0.9rem]";
 const successCls = "bg-[#f0fdf4] border border-[#bbf7d0] text-[#16a34a] rounded-lg px-4 py-3 text-[0.9rem]";
 const submitBtnCls = "py-3 bg-[#e68672] text-white border-none rounded-lg text-base font-bold cursor-pointer transition-all hover:bg-[#d4705e] active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed";
 
+//Profile page - shows user info, edit form, avatar upload, owned pets, and order history
 export default function ProfilePage() {
   const {user, token, loading, logout, refreshUser} = useAuth();
   const router = useRouter();
@@ -49,6 +51,7 @@ export default function ProfilePage() {
   const [profileSuccess, setProfileSuccess] = useState(null);
   const [avatarSubmitting, setAvatarSubmitting] = useState(false);
 
+  //Revokes all blob URLs created for pet images to free up memory
   const clearPetImageObjectUrls = useCallback(() => {
     for (const objectUrl of petImageObjectUrlsRef.current) {
       URL.revokeObjectURL(objectUrl);
@@ -73,6 +76,7 @@ export default function ProfilePage() {
     });
   }, [user]);
 
+  //Fetches the user's owned pets and resolves their images into blob URLs
   const loadPets = useCallback(async () => {
     if (!token) return;
     setLoadingPets(true);
@@ -128,6 +132,7 @@ export default function ProfilePage() {
     };
   }, [clearPetImageObjectUrls]);
 
+  //Fetches the user's recent order history
   const loadOrders = useCallback(async () => {
     if (!token) return;
     setLoadingOrders(true);
@@ -176,11 +181,13 @@ export default function ProfilePage() {
     };
   }, [user?.avatarUrl, token]);
 
+  //Logs out and sends the user to the home page
   function handleLogout() {
     logout();
     router.push("/");
   }
 
+  //Saves changes to the user's name, email, phone, or password
   async function handleProfileSubmit(e) {
     e.preventDefault();
     setProfileError(null);
@@ -232,6 +239,7 @@ export default function ProfilePage() {
     }
   }
 
+  //Uploads a new avatar image for the user
   async function handleAvatarUpload(file) {
     if (!file) return;
 
@@ -266,6 +274,7 @@ export default function ProfilePage() {
     }
   }
 
+  //Removes the user's avatar
   async function handleAvatarDelete() {
     setAvatarSubmitting(true);
     setProfileError(null);
@@ -295,6 +304,7 @@ export default function ProfilePage() {
     }
   }
 
+  //Opens the add pet form with blank fields
   function openAddForm() {
     setEditingPet(null);
     setPetName("");
@@ -305,6 +315,7 @@ export default function ProfilePage() {
     setShowForm(true);
   }
 
+  //Opens the edit pet form pre-filled with the selected pet's details
   function openEditForm(pet) {
     setEditingPet(pet);
     setPetName(pet.petName);
@@ -321,6 +332,7 @@ export default function ProfilePage() {
     setPetError(null);
   }
 
+  //Creates a new pet or saves edits to an existing one
   async function handlePetSubmit(e) {
     e.preventDefault();
     setPetError(null);
@@ -358,6 +370,7 @@ export default function ProfilePage() {
     }
   }
 
+  //Confirms with the user then removes the pet profile
   async function handleDeletePet(id) {
     if (!confirm("Remove this pet profile?")) return;
 
@@ -378,6 +391,7 @@ export default function ProfilePage() {
     }
   }
 
+  //Uploads a photo for a specific pet profile
   async function handleImageUpload(petId, file) {
     const formData = new FormData();
     formData.append("image", file);