From f6aad4c5e9958073b92cbe17bc3f85a2da43f154 Mon Sep 17 00:00:00 2001
From: The Dogfather <the-dogfather@groombook.dev>
Date: Sat, 28 Mar 2026 03:47:54 +0000
Subject: [PATCH] fix(portal): disable non-functional stub buttons in customer
 portal

Reschedule, Cancel, Add Notes, Edit Pet, Archive Pet, and Add New Pet
buttons in the customer portal were UI stubs with no click handlers.
Clicking them did nothing, confusing users. Mark all as disabled with
"coming soon" tooltips and muted styling until the underlying features
(portal reschedule endpoint, pet CRUD portal endpoints) are implemented.

Fixes GRO-166, GRO-167

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 .../src/portal/sections/AccountSettings.tsx    | 18 +++++++++++++++---
 apps/web/src/portal/sections/Appointments.tsx  |  6 +++++-
 apps/web/src/portal/sections/Dashboard.tsx     | 18 +++++++++++++++---
 apps/web/src/portal/sections/PetProfiles.tsx   |  4 ++--
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/portal/sections/AccountSettings.tsx b/apps/web/src/portal/sections/AccountSettings.tsx
index 2377023..8b5e9a3 100644
--- a/apps/web/src/portal/sections/AccountSettings.tsx
+++ b/apps/web/src/portal/sections/AccountSettings.tsx
@@ -125,10 +125,18 @@ function ManagePets({ readOnly }: { readOnly: boolean }) {
           </div>
           {!readOnly && (
             <div className="flex gap-2">
-              <button className="px-3 py-1.5 border border-stone-200 rounded-lg text-xs text-stone-600 hover:bg-stone-50">
+              <button
+                disabled
+                title="Pet editing coming soon"
+                className="px-3 py-1.5 border border-stone-200 rounded-lg text-xs text-stone-400 cursor-not-allowed"
+              >
                 Edit
               </button>
-              <button className="p-1.5 border border-stone-200 rounded-lg text-stone-400 hover:text-amber-600 hover:border-amber-200">
+              <button
+                disabled
+                title="Pet archiving coming soon"
+                className="p-1.5 border border-stone-200 rounded-lg text-stone-300 cursor-not-allowed"
+              >
                 <Archive size={14} />
               </button>
             </div>
@@ -136,7 +144,11 @@ function ManagePets({ readOnly }: { readOnly: boolean }) {
         </div>
       ))}
       {!readOnly && (
-        <button className="w-full flex items-center justify-center gap-2 py-3 border-2 border-dashed border-stone-300 rounded-2xl text-sm text-stone-500 hover:border-(--color-accent) hover:text-(--color-accent-dark) transition-colors">
+        <button
+          disabled
+          title="Adding pets coming soon"
+          className="w-full flex items-center justify-center gap-2 py-3 border-2 border-dashed border-stone-300 rounded-2xl text-sm text-stone-400 cursor-not-allowed"
+        >
           <Plus size={16} />
           Add New Pet
         </button>
diff --git a/apps/web/src/portal/sections/Appointments.tsx b/apps/web/src/portal/sections/Appointments.tsx
index 04c2bc1..4277bfc 100644
--- a/apps/web/src/portal/sections/Appointments.tsx
+++ b/apps/web/src/portal/sections/Appointments.tsx
@@ -176,7 +176,11 @@ function AppointmentCard({
           )}
           {appt.status !== "completed" && appt.status !== "cancelled" && !readOnly && (
             <div className="flex gap-2 mt-3">
-              <button className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
+              <button
+                disabled
+                title="Rescheduling coming soon"
+                className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
+              >
                 Reschedule
               </button>
               <CancelAppointmentButton appointment={appt} sessionId={sessionId} />
diff --git a/apps/web/src/portal/sections/Dashboard.tsx b/apps/web/src/portal/sections/Dashboard.tsx
index 2f82cc7..289d1c7 100644
--- a/apps/web/src/portal/sections/Dashboard.tsx
+++ b/apps/web/src/portal/sections/Dashboard.tsx
@@ -77,13 +77,25 @@ export function Dashboard({ onNavigate, readOnly }: Props) {
           </div>
           {!readOnly && (
             <div className="flex gap-2 mt-4">
-              <button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
+              <button
+                disabled
+                title="Rescheduling coming soon"
+                className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
+              >
                 Reschedule
               </button>
-              <button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
+              <button
+                disabled
+                title="Cancellation coming soon"
+                className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
+              >
                 Cancel
               </button>
-              <button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
+              <button
+                disabled
+                title="Notes coming soon"
+                className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
+              >
                 Add Notes
               </button>
             </div>
diff --git a/apps/web/src/portal/sections/PetProfiles.tsx b/apps/web/src/portal/sections/PetProfiles.tsx
index 3f10d20..5496534 100644
--- a/apps/web/src/portal/sections/PetProfiles.tsx
+++ b/apps/web/src/portal/sections/PetProfiles.tsx
@@ -54,8 +54,8 @@ export function PetProfiles({ readOnly }: Props) {
             <p className="text-stone-400 text-xs mt-0.5">Born {new Date(pet.dob).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}</p>
           </div>
           {!readOnly && (
-            <button className="p-2 hover:bg-stone-50 rounded-lg">
-              <Edit3 size={16} className="text-stone-400" />
+            <button disabled title="Pet editing coming soon" className="p-2 rounded-lg cursor-not-allowed">
+              <Edit3 size={16} className="text-stone-300" />
             </button>
           )}
         </div>
-- 
2.52.0