From fcb8fe3356c9865d8ad8969a66df56edf21b049b Mon Sep 17 00:00:00 2001
From: iamkiddy <francisyoungson@gmail.com>
Date: Thu, 4 Dec 2025 15:56:53 +0000
Subject: [PATCH 1/2] Refactor appointment detail components to improve meeting
 join logic

Enhance the appointment detail page for both admin and user interfaces by refining the logic for joining meetings. Update the handling of participant and moderator permissions, ensuring clarity in button displays based on meeting status. Remove the end meeting API endpoint from the API URLs as it is no longer needed.
---
 app/(admin)/admin/booking/[id]/page.tsx    |  9 ++-
 app/(user)/user/appointments/[id]/page.tsx | 65 +++++++++++++++-------
 lib/api_urls.ts                            |  1 -
 3 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/app/(admin)/admin/booking/[id]/page.tsx b/app/(admin)/admin/booking/[id]/page.tsx
index 03c1075..cc4e38d 100644
--- a/app/(admin)/admin/booking/[id]/page.tsx
+++ b/app/(admin)/admin/booking/[id]/page.tsx
@@ -695,11 +695,14 @@ export default function AppointmentDetailPage() {
               <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gradient-to-br from-blue-900/20 to-purple-900/20 border-blue-800/30" : "bg-gradient-to-br from-blue-50 to-purple-50 border-blue-200"}`}>
                 <div className="p-6 space-y-3">
                   {(() => {
-                    const canJoin = appointment.can_join_as_moderator === true || appointment.can_join_as_moderator === "true";
+                    // Check if can join as moderator (handle both boolean and string values)
+                    const canJoinAsModerator = appointment.can_join_as_moderator === true || appointment.can_join_as_moderator === "true";
+                    // Check if meeting has started (handle both field names)
                     const startedAt = appointment.started_at || appointment.meeting_started_at;
                     const hasStarted = startedAt != null && startedAt !== "";
 
-                    if (!canJoin) {
+                    // If can_join_as_moderator != true, display "Meeting Not Available"
+                    if (!canJoinAsModerator) {
                       return (
                         <button
                           disabled
@@ -711,6 +714,7 @@ export default function AppointmentDetailPage() {
                       );
                     }
 
+                    // If can_join_as_moderator == true && started_at != null, show "Join Now" button
                     if (hasStarted) {
                       return (
                         <>
@@ -745,6 +749,7 @@ export default function AppointmentDetailPage() {
                       );
                     }
 
+                    // If can_join_as_moderator == true && started_at == null, show "Start Meeting" button
                     return (
                       <Button
                         onClick={handleStartMeeting}
diff --git a/app/(user)/user/appointments/[id]/page.tsx b/app/(user)/user/appointments/[id]/page.tsx
index 1064e87..49c90d0 100644
--- a/app/(user)/user/appointments/[id]/page.tsx
+++ b/app/(user)/user/appointments/[id]/page.tsx
@@ -578,25 +578,52 @@ export default function UserAppointmentDetailPage() {
             {appointment.status === "scheduled" && appointment.participant_join_url && (
               <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gradient-to-br from-blue-900/20 to-purple-900/20 border-blue-800/30" : "bg-gradient-to-br from-blue-50 to-purple-50 border-blue-200"}`}>
                 <div className="p-6">
-                  {appointment.can_join_as_participant ? (
-                    <a
-                      href={appointment.participant_join_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className={`flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 text-white h-12 rounded-lg text-base font-medium transition-colors`}
-                    >
-                      <Video className="w-5 h-5" />
-                      Join Meeting
-                    </a>
-                  ) : (
-                    <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 Yet
-                    </button>
-                  )}
+                  {(() => {
+                    // Check if can join as participant (handle both boolean and string values)
+                    const canJoinAsParticipant = appointment.can_join_as_participant === true || appointment.can_join_as_participant === "true";
+                    // Check if meeting has started (handle both field names)
+                    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 (!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"}`}
+                        >
+                          <Video className="w-5 h-5" />
+                          Meeting Not Available
+                        </button>
+                      );
+                    }
+
+                    // If can_join_as_participant == true && started_at != null, show "Join Now" button
+                    if (hasStarted) {
+                      return (
+                        <a
+                          href={appointment.participant_join_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={`flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 text-white h-12 rounded-lg text-base font-medium transition-colors`}
+                        >
+                          <Video className="w-5 h-5" />
+                          Join Now
+                        </a>
+                      );
+                    }
+
+                    // If can_join_as_participant == true && started_at == null, show "Meeting Not Available"
+                    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
+                      </button>
+                    );
+                  })()}
                 </div>
               </div>
             )}
diff --git a/lib/api_urls.ts b/lib/api_urls.ts
index aa36240..ee28760 100644
--- a/lib/api_urls.ts
+++ b/lib/api_urls.ts
@@ -30,7 +30,6 @@ export const API_ENDPOINTS = {
     checkDateAvailability: `${API_BASE_URL}/meetings/availability/check/`,
     availabilityOverview: `${API_BASE_URL}/meetings/availability/overview/`,
     startMeeting: (id: string) => `${API_BASE_URL}/meetings/appointments/${id}/start/`,
-    endMeeting: (id: string) => `${API_BASE_URL}/meetings/appointments/${id}/end/`,
   },
 } as const;
 
-- 
2.39.5


From 61f7f5cf1a9e3bf5685047b1c9ae4e374b128db8 Mon Sep 17 00:00:00 2001
From: iamkiddy <francisyoungson@gmail.com>
Date: Thu, 4 Dec 2025 15:58:21 +0000
Subject: [PATCH 2/2] Add end meeting API endpoint to API URLs

Introduce a new API endpoint for ending meetings in the API_URLS file, enhancing the meeting management functionality. This addition complements the existing start meeting endpoint, providing a complete set of meeting control options.
---
 lib/api_urls.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/api_urls.ts b/lib/api_urls.ts
index ee28760..aa36240 100644
--- a/lib/api_urls.ts
+++ b/lib/api_urls.ts
@@ -30,6 +30,7 @@ export const API_ENDPOINTS = {
     checkDateAvailability: `${API_BASE_URL}/meetings/availability/check/`,
     availabilityOverview: `${API_BASE_URL}/meetings/availability/overview/`,
     startMeeting: (id: string) => `${API_BASE_URL}/meetings/appointments/${id}/start/`,
+    endMeeting: (id: string) => `${API_BASE_URL}/meetings/appointments/${id}/end/`,
   },
 } as const;
 
-- 
2.39.5