ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

base: ATTUNE-HEART-THERAPY:be717d8f60780580b50cdea6cdd70d7be45781db
Branches Tags
ATTUNE-HEART-THERAPY:master
ATTUNE-HEART-THERAPY:feat/booking-panel
ATTUNE-HEART-THERAPY:feat/deliverables
ATTUNE-HEART-THERAPY:feat/authentication
ATTUNE-HEART-THERAPY:fix/landing
ATTUNE-HEART-THERAPY:fix/landing-page-issues
ATTUNE-HEART-THERAPY:fix/landing-page
ATTUNE-HEART-THERAPY:frontend/website
...
compare: ATTUNE-HEART-THERAPY:5b5213f871dd7293d3f96282975829646562d87a
Branches Tags
ATTUNE-HEART-THERAPY:master
ATTUNE-HEART-THERAPY:feat/booking-panel
ATTUNE-HEART-THERAPY:feat/deliverables
ATTUNE-HEART-THERAPY:feat/authentication
ATTUNE-HEART-THERAPY:fix/landing
ATTUNE-HEART-THERAPY:fix/landing-page-issues
ATTUNE-HEART-THERAPY:fix/landing-page
ATTUNE-HEART-THERAPY:frontend/website

2 Commits
be717d8f60 ... 5b5213f871

Author SHA1 Message Date
Hammond
5b5213f871 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
 2025-12-04 18:10:14 +00:00
iamkiddy
65af13b0b2 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.
 2025-12-04 18:07:27 +00:00
2 changed files with 58 additions and 8 deletions
Show Stats Expand all files Collapse all files

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

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

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

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