theming, date, time localisation, additional features, seeding initial cleanup
This commit is contained in:
mikicvi
@@ -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