Update appointment detail pages to clarify meeting availability messages and add meeting information section

Refactor the appointment detail components for both admin and user interfaces to change the messaging for meeting availability from "Meeting Not Available" to "Meeting would be available shortly." Additionally, introduce a new section displaying meeting information, including start time and access instructions, enhancing user clarity and experience.

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>
                     );
                   })()}