From 2a3fc6ad4dc301f196ddeaad89b70e9a0fab6504 Mon Sep 17 00:00:00 2001
From: iamkiddy <francisyoungson@gmail.com>
Date: Thu, 4 Dec 2025 19:19:23 +0000
Subject: [PATCH] Refactor meeting information display in appointment detail
 page. Update layout and styling for improved clarity and user experience,
 ensuring essential details about scheduled meetings are prominently
 presented.

---
 app/(admin)/admin/booking/[id]/page.tsx | 50 ++++++++++++-------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/app/(admin)/admin/booking/[id]/page.tsx b/app/(admin)/admin/booking/[id]/page.tsx
index 54e6a83..428cdc4 100644
--- a/app/(admin)/admin/booking/[id]/page.tsx
+++ b/app/(admin)/admin/booking/[id]/page.tsx
@@ -625,31 +625,6 @@ export default function AppointmentDetailPage() {
                       </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>
             )}
@@ -689,6 +664,31 @@ export default function AppointmentDetailPage() {
                     {formatStatus(appointment.status)}
                   </span>
                 </div>
+                {appointment.scheduled_datetime && (
+                  <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <p className={`text-xs font-medium mb-2 uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                      Meeting Information
+                    </p>
+                    <div className="space-y-3">
+                      <div>
+                        <p className={`text-xs font-medium mb-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                          Meeting Start Time:
+                        </p>
+                        <p className={`text-sm font-medium ${isDark ? "text-white" : "text-gray-900"}`}>
+                          {formatDate(appointment.scheduled_datetime)} at {formatTime(appointment.scheduled_datetime)}
+                        </p>
+                      </div>
+                      <div>
+                        <p className={`text-xs font-medium mb-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                          How to Access:
+                        </p>
+                        <p className={`text-sm ${isDark ? "text-gray-300" : "text-gray-700"}`}>
+                          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>