theming, date, time localisation, additional features, seeding initial cleanup

components/dashboard/BookingCalendar.tsx

@@ -33,7 +33,7 @@ export function BookingCalendar() {
 	const [selectedCourt, setSelectedCourt] = useState<string | null>(null);
 
 	const formatDate = (date: Date) => {
-		return date.toLocaleDateString('en-US', {
+		return date.toLocaleDateString('en-IE', {
 			weekday: 'long',
 			year: 'numeric',
 			month: 'long',
@@ -145,13 +145,17 @@ export function BookingCalendar() {
 										size='sm'
 										onClick={() => !isBooked && setSelectedSlot(time)}
 										disabled={isBooked}
-										className='relative'
+										className={`relative transition-all ${
+											isBooked
+												? 'opacity-60 cursor-not-allowed bg-muted/50 border-muted text-muted-foreground hover:opacity-75'
+												: ''
+										}`}
 									>
 										{time}
 										{isBooked && (
 											<Badge
-												variant='destructive'
-												className='absolute -top-1 -right-1 h-2 w-2 p-0'
+												variant='secondary'
+												className='absolute -top-1 -right-1 h-2 w-2 p-0 bg-muted border-muted'
 											/>
 										)}
 									</Button>
@@ -162,9 +166,9 @@ export function BookingCalendar() {
 
 					{/* Booking Summary */}
 					{selectedDate && selectedSlot && selectedCourt && (
-						<div className='bg-blue-50 border border-blue-200 rounded-lg p-4 space-y-2'>
-							<h4 className='font-medium text-blue-900'>Booking Summary</h4>
-							<div className='text-sm text-blue-700 space-y-1'>
+						<div className='bg-primary/5 border border-primary/20 rounded-lg p-4 space-y-2 dark:bg-primary/10 dark:border-primary/30'>
+							<h4 className='font-medium text-primary dark:text-primary-foreground'>Booking Summary</h4>
+							<div className='text-sm text-primary/80 dark:text-primary-foreground/80 space-y-1'>
 								<div className='flex items-center gap-2'>
 									<CalendarIcon className='h-3 w-3' />
 									{formatDate(selectedDate)}