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

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.

Browse Source
This commit is contained in:
iamkiddy 2025-12-04 19:19:23 +00:00
parent 4a4590abd1
commit 2a3fc6ad4d
1 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>