From c18851fba8f843ede822398d729925cd1e27dd7a Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Wed, 15 Apr 2026 07:03:35 -0600
Subject: [PATCH] fix appointment history

---
 web/app/appointments/page.js | 88 +++++++++++++++++-------------------
 1 file changed, 41 insertions(+), 47 deletions(-)

diff --git a/web/app/appointments/page.js b/web/app/appointments/page.js
index 2dffe6bb..58b741f9 100644
--- a/web/app/appointments/page.js
+++ b/web/app/appointments/page.js
@@ -961,45 +961,8 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
         ) : null}
 
         <div className="appt-history" ref={historyRef}>
-          <h2 className="appt-form-title">
-            {adoptionMode ? "Your Adoptions" : canBookAppointments ? "Your Appointments" : "Appointments"}
-          </h2>
-          {adoptionMode ? (
-            loadingAdoptions ? (
-              <p className="appt-loading">Loading adoptions...</p>
-            ) : adoptions.length === 0 ? (
-              <p className="appt-empty">No adoption appointments yet.</p>
-            ) : (
-              <div className="appt-list">
-                {adoptions.map((a) => (
-                  <div key={a.adoptionId} className="appt-card">
-                    <div className="appt-card-header">
-                      <span className="appt-card-service">{a.petName}</span>
-                      <span className={`appt-card-status appt-card-status--${a.adoptionStatus?.toLowerCase()}`}>
-                        {a.adoptionStatus}
-                      </span>
-                    </div>
-                    <div className="appt-card-details">
-                      <span>{a.sourceStoreName}</span>
-                      <span>{a.adoptionDate}</span>
-                    </div>
-                    {a.adoptionStatus?.toLowerCase() === "pending" && (
-                      <div className="appt-card-actions">
-                        <button
-                          type="button"
-                          className="appt-cancel-btn"
-                          disabled={cancellingId === a.adoptionId}
-                          onClick={() => handleCancelAdoption(a.adoptionId)}
-                        >
-                          {cancellingId === a.adoptionId ? "Cancelling..." : "Cancel"}
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )
-          ) : loadingAppointments ? (
+          <h2 className="appt-form-title">{canBookAppointments ? "Your Appointments" : "Appointments"}</h2>
+          {loadingAppointments ? (
             <p className="appt-loading">Loading appointments...</p>
           ) : appointments.length === 0 ? (
             <p className="appt-empty">No appointments yet.</p>
@@ -1009,7 +972,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
                 <div key={a.appointmentId} className="appt-card">
                   <div className="appt-card-header">
                     <span className="appt-card-service">{a.serviceName}</span>
-                    <span className={`appt-card-status appt-card-status--${a.appointmentStatus.toLowerCase()}`}>
+                    <span className={`appt-card-status appt-card-status--${a.appointmentStatus?.toLowerCase()}`}>
                       {a.appointmentStatus}
                     </span>
                   </div>
@@ -1017,14 +980,9 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
                     <span>{a.storeName}</span>
                     <span>{a.appointmentDate} at {formatTime(a.appointmentTime)}</span>
                   </div>
-                  {a.petNames && a.petNames.length > 0 && (
+                  {a.petName && (
                     <div className="appt-card-pets">
-                      Pets: {a.petNames.join(", ")}
-                    </div>
-                  )}
-                  {a.customerPetNames && a.customerPetNames.length > 0 && (
-                    <div className="appt-card-pets">
-                      Pets: {a.customerPetNames.join(", ")}
+                      Pet: {a.petName}
                     </div>
                   )}
                   {a.appointmentStatus?.toLowerCase() === "booked" && (
@@ -1043,6 +1001,42 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
               ))}
             </div>
           )}
+
+          <h2 className="appt-form-title" style={{ marginTop: "2rem" }}>{canBookAppointments ? "Your Adoptions" : "Adoptions"}</h2>
+          {loadingAdoptions ? (
+            <p className="appt-loading">Loading adoptions...</p>
+          ) : adoptions.length === 0 ? (
+            <p className="appt-empty">No adoption requests yet.</p>
+          ) : (
+            <div className="appt-list">
+              {adoptions.map((a) => (
+                <div key={a.adoptionId} className="appt-card">
+                  <div className="appt-card-header">
+                    <span className="appt-card-service">{a.petName}</span>
+                    <span className={`appt-card-status appt-card-status--${a.adoptionStatus?.toLowerCase()}`}>
+                      {a.adoptionStatus}
+                    </span>
+                  </div>
+                  <div className="appt-card-details">
+                    <span>{a.sourceStoreName}</span>
+                    <span>{a.adoptionDate}</span>
+                  </div>
+                  {a.adoptionStatus?.toLowerCase() === "pending" && (
+                    <div className="appt-card-actions">
+                      <button
+                        type="button"
+                        className="appt-cancel-btn"
+                        disabled={cancellingId === a.adoptionId}
+                        onClick={() => handleCancelAdoption(a.adoptionId)}
+                      >
+                        {cancellingId === a.adoptionId ? "Cancelling..." : "Cancel"}
+                      </button>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       </section>
     </main>