From 186c5360570c6d9955ef50dd54bc7a16ff642e7c Mon Sep 17 00:00:00 2001
From: iamkiddy <francisyoungson@gmail.com>
Date: Fri, 5 Dec 2025 18:55:30 +0000
Subject: [PATCH] Refine appointment detail styles and enhance status handling

- Updated the appointment detail page to adjust the CSS class for the Video component, improving layout consistency.
- Added handling for "cancelled" and "canceled" statuses in the user dashboard, ensuring accurate representation of appointment states and enhancing user experience.
---
 app/(admin)/admin/booking/[id]/page.tsx | 2 +-
 app/(user)/user/dashboard/page.tsx      | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/(admin)/admin/booking/[id]/page.tsx b/app/(admin)/admin/booking/[id]/page.tsx
index e8bb34e..ff14ed3 100644
--- a/app/(admin)/admin/booking/[id]/page.tsx
+++ b/app/(admin)/admin/booking/[id]/page.tsx
@@ -845,7 +845,7 @@ export default function AppointmentDetailPage() {
                           disabled
                           className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-sm sm:text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
                         >
-                          <Video className="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0" />
+                          <Video className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" />
                           <span className="text-center px-1">
                             <span className="hidden sm:inline">Meeting would be available to join starting at </span>
                             <span className="sm:hidden">Available at </span>
diff --git a/app/(user)/user/dashboard/page.tsx b/app/(user)/user/dashboard/page.tsx
index 47090c2..19a6e17 100644
--- a/app/(user)/user/dashboard/page.tsx
+++ b/app/(user)/user/dashboard/page.tsx
@@ -369,6 +369,8 @@ export default function UserDashboard() {
                             case "completed":
                               return isDark ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-50 text-blue-700';
                             case "rejected":
+                            case "cancelled":
+                            case "canceled":
                               return isDark ? 'bg-red-900/30 text-red-400' : 'bg-red-50 text-red-700';
                             default:
                               return isDark ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-700';