From eddb9eb6e3ad67eb298f1e324b33802845df9096 Mon Sep 17 00:00:00 2001
From: iamkiddy <francisyoungson@gmail.com>
Date: Fri, 5 Dec 2025 19:16:02 +0000
Subject: [PATCH] Refactor appointment detail messaging and styles for clarity

- Updated the appointment detail pages for both admin and user views to replace "Meeting would be available shortly" with "Click here to join," enhancing user clarity on meeting access.
- Adjusted CSS classes for buttons and icons to improve layout consistency and responsiveness across different screen sizes.
---
 app/(admin)/admin/booking/[id]/page.tsx    | 18 +++++-------------
 app/(user)/user/appointments/[id]/page.tsx | 18 +++++++++---------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/app/(admin)/admin/booking/[id]/page.tsx b/app/(admin)/admin/booking/[id]/page.tsx
index ff14ed3..1a03d0f 100644
--- a/app/(admin)/admin/booking/[id]/page.tsx
+++ b/app/(admin)/admin/booking/[id]/page.tsx
@@ -457,10 +457,11 @@ export default function AppointmentDetailPage() {
                           }
                           setRescheduleDialogOpen(true);
                         }}
-                        className={`p-2 rounded-lg transition-colors ${isDark ? "hover:bg-gray-700 text-gray-300 hover:text-white" : "hover:bg-gray-100 text-gray-600 hover:text-gray-900"}`}
+                        className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${isDark ? "hover:bg-gray-700 text-gray-300 hover:text-white" : "hover:bg-gray-100 text-gray-600 hover:text-gray-900"}`}
                         title="Reschedule Appointment"
                       >
-                        <Pencil className="w-4 h-4" />
+                        <Pencil className="w-4 h-4 shrink-0" />
+                        <span className="hidden sm:inline text-sm font-medium">Reschedule</span>
                       </button>
                     )}
                   </div>
@@ -682,9 +683,7 @@ export default function AppointmentDetailPage() {
                       <p className={`text-sm font-medium ${appointment.can_join_as_moderator ? (isDark ? "text-green-300" : "text-green-700") : (isDark ? "text-gray-400" : "text-gray-500")}`}>
                         {appointment.can_join_as_moderator 
                           ? "Meeting is active - You can join as moderator" 
-                          : appointment.scheduled_datetime 
-                            ? `Meeting would be available to join starting at ${formatTime(appointment.scheduled_datetime)}`
-                            : "Meeting would be available shortly"}
+                          : "Click here to join"}
                       </p>
                     </div>
                   )}
@@ -837,20 +836,13 @@ export default function AppointmentDetailPage() {
 
                     // If can_join_as_moderator != true, display "Meeting would be available shortly"
                     if (!canJoinAsModerator) {
-                      const meetingTime = appointment.scheduled_datetime 
-                        ? formatTime(appointment.scheduled_datetime)
-                        : "the scheduled time";
                       return (
                         <button
                           disabled
                           className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-sm sm:text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
                         >
                           <Video className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" />
-                          <span className="text-center px-1">
-                            <span className="hidden sm:inline">Meeting would be available to join starting at </span>
-                            <span className="sm:hidden">Available at </span>
-                            <span className="font-semibold">{meetingTime}</span>
-                          </span>
+                          <span className="text-center">Click here to join</span>
                         </button>
                       );
                     }
diff --git a/app/(user)/user/appointments/[id]/page.tsx b/app/(user)/user/appointments/[id]/page.tsx
index 73e06fe..f964a72 100644
--- a/app/(user)/user/appointments/[id]/page.tsx
+++ b/app/(user)/user/appointments/[id]/page.tsx
@@ -469,7 +469,7 @@ export default function UserAppointmentDetailPage() {
                     <div className={`flex items-center gap-2 px-4 py-3 rounded-lg ${appointment.can_join_as_participant ? (isDark ? "bg-green-500/20 border border-green-500/30" : "bg-green-50 border border-green-200") : (isDark ? "bg-gray-800 border border-gray-700" : "bg-gray-50 border border-gray-200")}`}>
                       <div className={`h-2 w-2 rounded-full ${appointment.can_join_as_participant ? (isDark ? "bg-green-400" : "bg-green-600") : (isDark ? "bg-gray-500" : "bg-gray-400")}`} />
                       <p className={`text-sm font-medium ${appointment.can_join_as_participant ? (isDark ? "text-green-300" : "text-green-700") : (isDark ? "text-gray-400" : "text-gray-500")}`}>
-                        {appointment.can_join_as_participant ? "Meeting is active - You can join now" : "Meeting would be available shortly"}
+                        {appointment.can_join_as_participant ? "Meeting is active - You can join now" : "Click here to join"}
                       </p>
                     </div>
                   )}
@@ -568,15 +568,15 @@ export default function UserAppointmentDetailPage() {
                     const startedAt = appointment.started_at || appointment.meeting_started_at;
                     const hasStarted = startedAt != null && startedAt !== "";
 
-                    // If can_join_as_participant != true, display "Meeting would be available shortly"
+                    // If can_join_as_participant != true, display "Click here to join"
                     if (!canJoinAsParticipant) {
                       return (
                         <button
                           disabled
-                          className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
+                          className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-sm sm:text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
                         >
-                          <Video className="w-5 h-5" />
-                          Meeting would be available shortly
+                          <Video className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" />
+                          <span className="text-center">Click here to join</span>
                         </button>
                       );
                     }
@@ -596,14 +596,14 @@ export default function UserAppointmentDetailPage() {
                       );
                     }
 
-                    // If can_join_as_participant == true && started_at == null, show "Meeting would be available shortly"
+                    // If can_join_as_participant == true && started_at == null, show "Click here to join"
                     return (
                       <button
                         disabled
-                        className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
+                        className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-sm sm:text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
                       >
-                        <Video className="w-5 h-5" />
-                        Meeting would be available shortly
+                        <Video className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" />
+                        <span className="text-center">Click here to join</span>
                       </button>
                     );
                   })()}