Merge pull request 'Update appointment detail pages to clarify meeting availability messages and add meeting information section' (#51) from feat/booking-panel into master

Reviewed-on: http://35.207.46.142/ATTUNE-HEART-THERAPY/website/pulls/51

app/(admin)/admin/booking/[id]/page.tsx

@@ -621,10 +621,35 @@ export default function AppointmentDetailPage() {
                     <div className={`flex items-center gap-2 px-4 py-3 rounded-lg ${appointment.can_join_as_moderator ? (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_moderator ? (isDark ? "bg-green-400" : "bg-green-600") : (isDark ? "bg-gray-500" : "bg-gray-400")}`} />
                       <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" : "Meeting is not available yet"}
+                        {appointment.can_join_as_moderator ? "Meeting is active - You can join as moderator" : "Meeting would be available shortly"}
                       </p>
                     </div>
                   )}
+                  {appointment.scheduled_datetime && (
+                    <div className={`px-4 py-3 rounded-lg border ${isDark ? "bg-blue-500/10 border-blue-500/30" : "bg-blue-50 border-blue-200"}`}>
+                      <p className={`text-sm font-semibold mb-2 ${isDark ? "text-blue-300" : "text-blue-700"}`}>
+                        Meeting Information
+                      </p>
+                      <div className="space-y-2">
+                        <div>
+                          <p className={`text-xs font-medium mb-1 ${isDark ? "text-blue-200" : "text-blue-600"}`}>
+                            Meeting Start Time:
+                          </p>
+                          <p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
+                            {formatDate(appointment.scheduled_datetime)} at {formatTime(appointment.scheduled_datetime)}
+                          </p>
+                        </div>
+                        <div>
+                          <p className={`text-xs font-medium mb-1 ${isDark ? "text-blue-200" : "text-blue-600"}`}>
+                            How to Access:
+                          </p>
+                          <p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
+                            Click the "Start Meeting" button below to begin the session. Once started, participants can join using the meeting link. You can also use the moderator link above to join directly.
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </div>
               </div>
             )}
@@ -701,7 +726,7 @@ export default function AppointmentDetailPage() {
                     const startedAt = appointment.started_at || appointment.meeting_started_at;
                     const hasStarted = startedAt != null && startedAt !== "";
 
-                    // If can_join_as_moderator != true, display "Meeting Not Available"
+                    // If can_join_as_moderator != true, display "Meeting would be available shortly"
                     if (!canJoinAsModerator) {
                       return (
                         <button
@@ -709,7 +734,7 @@ export default function AppointmentDetailPage() {
                           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"}`}
                         >
                           <Video className="w-5 h-5" />
-                          Meeting Not Available
+                          Meeting would be available shortly
                         </button>
                       );
                     }

app/(user)/user/appointments/[id]/page.tsx

@@ -528,10 +528,35 @@ 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 is not available yet"}
+                        {appointment.can_join_as_participant ? "Meeting is active - You can join now" : "Meeting would be available shortly"}
                       </p>
                     </div>
                   )}
+                  {appointment.scheduled_datetime && (
+                    <div className={`px-4 py-3 rounded-lg border ${isDark ? "bg-blue-500/10 border-blue-500/30" : "bg-blue-50 border-blue-200"}`}>
+                      <p className={`text-sm font-semibold mb-2 ${isDark ? "text-blue-300" : "text-blue-700"}`}>
+                        Meeting Information
+                      </p>
+                      <div className="space-y-2">
+                        <div>
+                          <p className={`text-xs font-medium mb-1 ${isDark ? "text-blue-200" : "text-blue-600"}`}>
+                            Meeting Start Time:
+                          </p>
+                          <p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
+                            {formatDate(appointment.scheduled_datetime)} at {formatTime(appointment.scheduled_datetime)}
+                          </p>
+                        </div>
+                        <div>
+                          <p className={`text-xs font-medium mb-1 ${isDark ? "text-blue-200" : "text-blue-600"}`}>
+                            How to Access:
+                          </p>
+                          <p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
+                            Click the "Join Now" button below or use the meeting link above when the meeting becomes available. The meeting will be accessible shortly before the scheduled start time.
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </div>
               </div>
             )}
@@ -585,7 +610,7 @@ 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 Not Available"
+                    // If can_join_as_participant != true, display "Meeting would be available shortly"
                     if (!canJoinAsParticipant) {
                       return (
                         <button
@@ -593,7 +618,7 @@ export default function UserAppointmentDetailPage() {
                           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"}`}
                         >
                           <Video className="w-5 h-5" />
-                          Meeting Not Available
+                          Meeting would be available shortly
                         </button>
                       );
                     }
@@ -613,14 +638,14 @@ export default function UserAppointmentDetailPage() {
                       );
                     }
 
-                    // If can_join_as_participant == true && started_at == null, show "Meeting Not Available"
+                    // If can_join_as_participant == true && started_at == null, show "Meeting would be available shortly"
                     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"}`}
                       >
                         <Video className="w-5 h-5" />
-                        Meeting Not Available
+                        Meeting would be available shortly
                       </button>
                     );
                   })()}