fixes, theming, branding

components/booking/user-booking-management.tsx

@@ -61,16 +61,8 @@ export function UserBookingManagement() {
 			const response = await fetch('/api/bookings');
 			if (response.ok) {
 				const data = await response.json();
-				// Filter to show only future and today's bookings
-				const now = new Date();
-				const today = now.toISOString().split('T')[0];
-
-				const relevantBookings = data.bookings.filter((booking: Booking) => {
-					if (booking.status !== 'active') return false;
-					return booking.date >= today;
-				});
-
-				setBookings(relevantBookings);
+				// API already filters to show only active future bookings (today onwards)
+				setBookings(data.bookings || []);
 			}
 		} catch (error) {
 			console.error('Error fetching bookings:', error);
@@ -282,7 +274,7 @@ export function UserBookingManagement() {
 				<CardHeader className='pb-3 flex flex-row items-center justify-between'>
 					<CardTitle className='text-base flex items-center gap-2'>
 						<Calendar className='h-4 w-4' />
-						Your Bookings
+						Your Upcoming Bookings
 					</CardTitle>
 					<Button size='sm' variant='outline' onClick={fetchBookings}>
 						<RefreshCw className='h-4 w-4' />
@@ -390,16 +382,16 @@ export function UserBookingManagement() {
 					</DialogHeader>
 					<div className='space-y-4'>
 						{selectedBooking && (
-							<div className='bg-blue-50 p-4 rounded-lg space-y-2 dark:bg-blue-950'>
-								<div className='flex items-center gap-2 text-sm'>
+							<div className='bg-accent/50 p-4 rounded-lg space-y-2'>
+								<div className='flex items-center gap-2 text-sm text-foreground'>
 									<Calendar className='h-4 w-4' />
 									{formatDate(selectedBooking.date)}
 								</div>
-								<div className='flex items-center gap-2 text-sm'>
+								<div className='flex items-center gap-2 text-sm text-foreground'>
 									<Clock className='h-4 w-4' />
 									{selectedBooking.startTime} - {selectedBooking.endTime}
 								</div>
-								<div className='flex items-center gap-2 text-sm'>
+								<div className='flex items-center gap-2 text-sm text-foreground'>
 									<MapPin className='h-4 w-4' />
 									{selectedBooking.court.name}
 								</div>