theming, date, time localisation, additional features, seeding initial cleanup
This commit is contained in:
mikicvi
@@ -468,24 +468,28 @@ export function EnhancedBookingCalendar() {
|
||||
size='sm'
|
||||
onClick={() => setSelectedDate(date)}
|
||||
className={`h-16 flex flex-col relative transition-all ${
|
||||
isSelectedDate && !isTodayDate
|
||||
? 'bg-primary text-primary-foreground hover:bg-primary/90'
|
||||
: ''
|
||||
} ${
|
||||
isTodayDate && !isSelectedDate
|
||||
? 'ring-2 ring-blue-400 ring-opacity-50 bg-blue-50 border-blue-200 hover:bg-blue-100'
|
||||
? 'ring-2 ring-blue-400 ring-opacity-50 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900 text-foreground'
|
||||
: ''
|
||||
} ${
|
||||
isSelectedDate && isTodayDate
|
||||
? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800'
|
||||
? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 dark:from-blue-700 dark:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-900 text-white'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{isTodayDate && (
|
||||
<div className='absolute -top-1 -right-1 w-3 h-3 bg-orange-500 rounded-full animate-pulse' />
|
||||
<div className='absolute -top-1 -right-1 w-3 h-3 bg-orange-500 dark:bg-orange-400 rounded-full animate-pulse' />
|
||||
)}
|
||||
<span className='text-xs font-normal'>
|
||||
{date.toLocaleDateString('en-US', { weekday: 'short' })}
|
||||
{date.toLocaleDateString('en-IE', { weekday: 'short' })}
|
||||
</span>
|
||||
<span className='font-semibold'>{date.getDate()}</span>
|
||||
<span className='text-xs font-normal'>
|
||||
{date.toLocaleDateString('en-US', { month: 'short' })}
|
||||
{date.toLocaleDateString('en-IE', { month: 'short' })}
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
@@ -497,16 +501,16 @@ export function EnhancedBookingCalendar() {
|
||||
<div
|
||||
className={`text-center p-4 rounded-lg ${
|
||||
isToday(selectedDate)
|
||||
? 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white'
|
||||
: 'bg-blue-50'
|
||||
? 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white dark:from-blue-600 dark:to-indigo-700'
|
||||
: 'bg-blue-50 dark:bg-blue-950'
|
||||
}`}
|
||||
>
|
||||
<h3
|
||||
className={`text-lg font-semibold ${
|
||||
isToday(selectedDate) ? 'text-white' : 'text-blue-900'
|
||||
isToday(selectedDate) ? 'text-primary-foreground' : 'text-foreground'
|
||||
}`}
|
||||
>
|
||||
{selectedDate.toLocaleDateString('en-US', {
|
||||
{selectedDate.toLocaleDateString('en-IE', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
@@ -515,9 +519,9 @@ export function EnhancedBookingCalendar() {
|
||||
</h3>
|
||||
{isToday(selectedDate) && (
|
||||
<div className='flex items-center justify-center gap-2 mt-2'>
|
||||
<div className='w-2 h-2 bg-orange-300 rounded-full animate-pulse' />
|
||||
<span className='text-sm font-medium text-blue-100'>Today</span>
|
||||
<div className='w-2 h-2 bg-orange-300 rounded-full animate-pulse' />
|
||||
<div className='w-2 h-2 bg-orange-300 dark:bg-orange-400 rounded-full animate-pulse' />
|
||||
<span className='text-sm font-medium text-blue-100 dark:text-blue-200'>Today</span>
|
||||
<div className='w-2 h-2 bg-orange-300 dark:bg-orange-400 rounded-full animate-pulse' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -525,15 +529,15 @@ export function EnhancedBookingCalendar() {
|
||||
{/* Loading State */}
|
||||
{loading && (
|
||||
<div className='text-center py-8'>
|
||||
<div className='inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900'></div>
|
||||
<p className='mt-2 text-sm text-gray-500'>Loading booking slots...</p>
|
||||
<div className='inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary'></div>
|
||||
<p className='mt-2 text-sm text-muted-foreground'>Loading booking slots...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Courts Available */}
|
||||
{!loading && courts.length === 0 && (
|
||||
<div className='text-center py-8'>
|
||||
<p className='text-gray-500'>No courts available for booking</p>
|
||||
<p className='text-muted-foreground'>No courts available for booking</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -550,7 +554,7 @@ export function EnhancedBookingCalendar() {
|
||||
|
||||
return (
|
||||
<div key={time} className='space-y-2'>
|
||||
<div className='flex items-center gap-2 text-sm font-medium text-gray-700'>
|
||||
<div className='flex items-center gap-2 text-sm font-medium text-foreground'>
|
||||
<Clock className='h-4 w-4' />
|
||||
{time} -{' '}
|
||||
{String(parseInt(time.split(':')[0]) + 1).padStart(2, '0')}:00
|
||||
@@ -565,27 +569,27 @@ export function EnhancedBookingCalendar() {
|
||||
{slotsForTime.map((slot) => (
|
||||
<div
|
||||
key={`${slot.courtId}-${slot.time}`}
|
||||
className={`p-3 border rounded-lg transition-colors cursor-pointer ${
|
||||
className={`p-3 border rounded-lg transition-all duration-200 ${
|
||||
slot.available
|
||||
? 'border-green-200 bg-green-50 hover:bg-green-100'
|
||||
: 'border-red-200 bg-red-50 cursor-not-allowed'
|
||||
? 'border-green-200 bg-green-50 hover:bg-green-100 hover:shadow-sm cursor-pointer dark:border-green-700 dark:bg-green-950 dark:hover:bg-green-900'
|
||||
: 'border-muted bg-muted/50 cursor-not-allowed opacity-75 hover:opacity-100'
|
||||
}`}
|
||||
onClick={() => handleSlotClick(slot)}
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='space-y-1 flex-1'>
|
||||
<div className='flex items-center gap-2 text-sm font-medium'>
|
||||
<div className='flex items-center gap-2 text-sm font-medium text-foreground'>
|
||||
<MapPin className='h-4 w-4' />
|
||||
{slot.courtName}
|
||||
</div>
|
||||
{!slot.available && slot.bookedBy && (
|
||||
<div className='space-y-1'>
|
||||
<div className='flex items-center gap-2 text-xs text-red-600'>
|
||||
<div className='flex items-center gap-2 text-xs text-muted-foreground'>
|
||||
<Users className='h-3 w-3' />
|
||||
Booked by {slot.bookedBy}
|
||||
</div>
|
||||
{slot.partner && (
|
||||
<div className='flex items-center gap-2 text-xs text-orange-600'>
|
||||
<div className='flex items-center gap-2 text-xs text-orange-600 dark:text-orange-400'>
|
||||
<User className='h-3 w-3' />
|
||||
Playing with: {slot.partner}
|
||||
</div>
|
||||
@@ -593,7 +597,7 @@ export function EnhancedBookingCalendar() {
|
||||
</div>
|
||||
)}
|
||||
{!slot.available && !slot.bookedBy && (
|
||||
<div className='text-xs text-red-600'>
|
||||
<div className='text-xs text-muted-foreground'>
|
||||
Already booked
|
||||
</div>
|
||||
)}
|
||||
@@ -601,10 +605,13 @@ export function EnhancedBookingCalendar() {
|
||||
<Button
|
||||
size='sm'
|
||||
disabled={!slot.available}
|
||||
variant={
|
||||
slot.available ? 'default' : 'secondary'
|
||||
}
|
||||
className={
|
||||
slot.available
|
||||
? 'bg-green-600 hover:bg-green-700'
|
||||
: ''
|
||||
? 'bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600 border-0'
|
||||
: 'opacity-50 cursor-not-allowed'
|
||||
}
|
||||
>
|
||||
{slot.available ? 'Book' : 'Booked'}
|
||||
@@ -625,16 +632,16 @@ export function EnhancedBookingCalendar() {
|
||||
<div className='text-center py-8'>
|
||||
{!isDayBookable() ? (
|
||||
<div className='space-y-2'>
|
||||
<div className='text-red-600 font-medium'>
|
||||
<div className='text-destructive font-medium'>
|
||||
No courts available on {getDayName(selectedDate.getDay())}s
|
||||
</div>
|
||||
<p className='text-gray-500 text-sm'>
|
||||
<p className='text-muted-foreground text-sm'>
|
||||
This facility is closed on {getDayName(selectedDate.getDay())}s. Please
|
||||
select a different day to make a booking.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className='text-gray-500'>No booking slots available for this date</p>
|
||||
<p className='text-muted-foreground'>No booking slots available for this date</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -650,21 +657,21 @@ export function EnhancedBookingCalendar() {
|
||||
</DialogHeader>
|
||||
<div className='space-y-4'>
|
||||
{selectedSlot && (
|
||||
<div className='bg-blue-50 p-4 rounded-lg space-y-2'>
|
||||
<div className='flex items-center gap-2 text-sm'>
|
||||
<div className='bg-primary/5 border border-primary/20 p-4 rounded-lg space-y-2 dark:bg-primary/10 dark:border-primary/30'>
|
||||
<div className='flex items-center gap-2 text-sm text-foreground'>
|
||||
<Calendar className='h-4 w-4' />
|
||||
{selectedDate.toLocaleDateString('en-US', {
|
||||
{selectedDate.toLocaleDateString('en-IE', {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</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' />
|
||||
{selectedSlot.time} -{' '}
|
||||
{String(parseInt(selectedSlot.time.split(':')[0]) + 1).padStart(2, '0')}:00
|
||||
</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' />
|
||||
{selectedSlot.courtName}
|
||||
</div>
|
||||
@@ -674,7 +681,7 @@ export function EnhancedBookingCalendar() {
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='partner'>Playing Partner (Optional)</Label>
|
||||
<div className='relative'>
|
||||
<User className='absolute left-3 top-3 h-4 w-4 text-gray-400' />
|
||||
<User className='absolute left-3 top-3 h-4 w-4 text-muted-foreground' />
|
||||
<Input
|
||||
id='partner'
|
||||
placeholder='Who will you be playing with?'
|
||||
@@ -683,7 +690,9 @@ export function EnhancedBookingCalendar() {
|
||||
className='pl-10'
|
||||
/>
|
||||
</div>
|
||||
<p className='text-xs text-gray-500'>Enter the name of the person you'll be playing with</p>
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
Enter the name of the person you'll be playing with
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2'>
|
||||
|
||||
Reference in New Issue
Block a user