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'>
|
||||
|
||||
@@ -44,10 +44,15 @@ export function UserBookingManagement() {
|
||||
const [selectedBooking, setSelectedBooking] = useState<Booking | null>(null);
|
||||
const [editNotes, setEditNotes] = useState('');
|
||||
const [editPartner, setEditPartner] = useState('');
|
||||
const [settings, setSettings] = useState<{
|
||||
allow_booking_modifications: string;
|
||||
booking_modification_hours_before: string;
|
||||
} | null>(null);
|
||||
const { toast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
fetchBookings();
|
||||
fetchSettings();
|
||||
}, []);
|
||||
|
||||
const fetchBookings = async () => {
|
||||
@@ -79,6 +84,34 @@ export function UserBookingManagement() {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchSettings = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/settings');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const settingsMap = {
|
||||
allow_booking_modifications: 'true',
|
||||
booking_modification_hours_before: '2',
|
||||
};
|
||||
|
||||
data.settings?.forEach((setting: any) => {
|
||||
if (setting.key in settingsMap) {
|
||||
settingsMap[setting.key as keyof typeof settingsMap] = setting.value;
|
||||
}
|
||||
});
|
||||
|
||||
setSettings(settingsMap);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching settings:', error);
|
||||
// Use default settings if fetch fails
|
||||
setSettings({
|
||||
allow_booking_modifications: 'true',
|
||||
booking_modification_hours_before: '2',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const parseBookingNotes = (notes?: string) => {
|
||||
if (!notes) return { partner: '', additionalNotes: '' };
|
||||
|
||||
@@ -205,13 +238,19 @@ export function UserBookingManagement() {
|
||||
};
|
||||
|
||||
const canModifyBooking = (booking: Booking) => {
|
||||
if (!settings || settings.allow_booking_modifications !== 'true') {
|
||||
return false;
|
||||
}
|
||||
|
||||
const bookingDateTime = new Date(`${booking.date}T${booking.startTime}`);
|
||||
const now = new Date();
|
||||
const timeDiff = bookingDateTime.getTime() - now.getTime();
|
||||
const hoursDiff = timeDiff / (1000 * 60 * 60);
|
||||
|
||||
// Allow modifications if booking is more than 2 hours away
|
||||
return hoursDiff > 2;
|
||||
const requiredHours = parseFloat(settings.booking_modification_hours_before) || 2;
|
||||
|
||||
// Allow modifications if booking is more than the required hours away
|
||||
return hoursDiff > requiredHours;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
@@ -227,8 +266,8 @@ export function UserBookingManagement() {
|
||||
<div className='space-y-3'>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className='animate-pulse border rounded-lg p-4'>
|
||||
<div className='h-4 bg-gray-200 rounded w-3/4 mb-2'></div>
|
||||
<div className='h-3 bg-gray-200 rounded w-1/2'></div>
|
||||
<div className='h-4 bg-muted rounded w-3/4 mb-2'></div>
|
||||
<div className='h-3 bg-muted rounded w-1/2'></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -251,7 +290,7 @@ export function UserBookingManagement() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{bookings.length === 0 ? (
|
||||
<div className='text-sm text-gray-500 text-center py-6'>
|
||||
<div className='text-sm text-muted-foreground text-center py-6'>
|
||||
No upcoming bookings. Make your first booking!
|
||||
</div>
|
||||
) : (
|
||||
@@ -265,19 +304,19 @@ export function UserBookingManagement() {
|
||||
<div className='flex items-start justify-between'>
|
||||
<div className='space-y-2 flex-1'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<MapPin className='h-4 w-4 text-blue-600' />
|
||||
<MapPin className='h-4 w-4 text-primary' />
|
||||
<span className='font-medium text-sm'>{booking.court.name}</span>
|
||||
{isToday(booking.date) && (
|
||||
<Badge
|
||||
variant='secondary'
|
||||
className='text-xs bg-gradient-to-r from-orange-100 to-orange-200 text-orange-700 border-orange-300'
|
||||
className='text-xs bg-orange-100 text-orange-700 border-orange-300 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800'
|
||||
>
|
||||
🎯 Today
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-4 text-xs text-gray-500'>
|
||||
<div className='flex items-center gap-4 text-xs text-muted-foreground'>
|
||||
<div className='flex items-center gap-1'>
|
||||
<Calendar className='h-3 w-3' />
|
||||
<span>{formatDate(booking.date)}</span>
|
||||
@@ -291,14 +330,14 @@ export function UserBookingManagement() {
|
||||
</div>
|
||||
|
||||
{partner && (
|
||||
<div className='flex items-center gap-1 text-xs text-gray-600'>
|
||||
<div className='flex items-center gap-1 text-xs text-muted-foreground'>
|
||||
<User className='h-3 w-3' />
|
||||
<span>Playing with: {partner}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{additionalNotes && (
|
||||
<p className='text-xs text-gray-600 italic bg-gray-50 p-2 rounded'>
|
||||
<p className='text-xs text-muted-foreground italic bg-muted p-2 rounded'>
|
||||
{additionalNotes}
|
||||
</p>
|
||||
)}
|
||||
@@ -319,7 +358,7 @@ export function UserBookingManagement() {
|
||||
variant='outline'
|
||||
onClick={() => handleDeleteClick(booking)}
|
||||
disabled={!canModify}
|
||||
className='h-8 w-8 p-0 text-red-600 hover:text-red-700'
|
||||
className='h-8 w-8 p-0 text-destructive hover:text-destructive/80'
|
||||
>
|
||||
<Trash2 className='h-3 w-3' />
|
||||
</Button>
|
||||
@@ -327,8 +366,12 @@ export function UserBookingManagement() {
|
||||
</div>
|
||||
|
||||
{!canModify && (
|
||||
<p className='text-xs text-amber-600 bg-amber-50 p-2 rounded'>
|
||||
Booking can only be modified more than 2 hours before the session
|
||||
<p className='text-xs text-amber-600 bg-amber-50 p-2 rounded dark:text-amber-400 dark:bg-amber-950'>
|
||||
{settings?.allow_booking_modifications !== 'true'
|
||||
? 'Booking modifications are currently disabled by administrator'
|
||||
: `Booking can only be modified more than ${
|
||||
settings?.booking_modification_hours_before || '2'
|
||||
} hours before the session`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -347,7 +390,7 @@ export function UserBookingManagement() {
|
||||
</DialogHeader>
|
||||
<div className='space-y-4'>
|
||||
{selectedBooking && (
|
||||
<div className='bg-blue-50 p-4 rounded-lg space-y-2'>
|
||||
<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'>
|
||||
<Calendar className='h-4 w-4' />
|
||||
{formatDate(selectedBooking.date)}
|
||||
@@ -366,7 +409,7 @@ export function UserBookingManagement() {
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='edit-partner'>Playing Partner</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='edit-partner'
|
||||
placeholder='Who will you be playing with?'
|
||||
@@ -408,11 +451,11 @@ export function UserBookingManagement() {
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to cancel this booking? This action cannot be undone.
|
||||
{selectedBooking && (
|
||||
<div className='mt-3 p-3 bg-gray-50 rounded'>
|
||||
<div className='mt-3 p-3 bg-muted rounded'>
|
||||
<p className='text-sm font-medium'>
|
||||
{selectedBooking.court.name} - {formatDate(selectedBooking.date)}
|
||||
</p>
|
||||
<p className='text-sm text-gray-600'>
|
||||
<p className='text-sm text-muted-foreground'>
|
||||
{selectedBooking.startTime} - {selectedBooking.endTime}
|
||||
</p>
|
||||
</div>
|
||||
@@ -421,7 +464,10 @@ export function UserBookingManagement() {
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Keep Booking</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDeleteConfirm} className='bg-red-600 hover:bg-red-700'>
|
||||
<AlertDialogAction
|
||||
onClick={handleDeleteConfirm}
|
||||
className='bg-destructive hover:bg-destructive/90'
|
||||
>
|
||||
Cancel Booking
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
||||
Reference in New Issue
Block a user