additional features, refinement and more control over the app from admin side, better bookings UX
This commit is contained in:
mikicvi
@@ -39,6 +39,7 @@ interface BookingSlot {
|
||||
available: boolean;
|
||||
bookingId?: string;
|
||||
bookedBy?: string;
|
||||
partner?: string;
|
||||
}
|
||||
|
||||
interface TimeSlot {
|
||||
@@ -176,24 +177,22 @@ export function EnhancedBookingCalendar() {
|
||||
|
||||
const generateTimeSlots = (): string[] => {
|
||||
const dayOfWeek = selectedDate.getDay();
|
||||
|
||||
|
||||
// Get time slots for the selected day
|
||||
const dayTimeSlots = timeSlots.filter(
|
||||
slot => slot.dayOfWeek === dayOfWeek && slot.isActive
|
||||
);
|
||||
const dayTimeSlots = timeSlots.filter((slot) => slot.dayOfWeek === dayOfWeek && slot.isActive);
|
||||
|
||||
if (dayTimeSlots.length > 0) {
|
||||
// Use day-specific time slots
|
||||
const slots: string[] = [];
|
||||
dayTimeSlots.forEach(timeSlot => {
|
||||
dayTimeSlots.forEach((timeSlot) => {
|
||||
const start = parseInt(timeSlot.startTime.split(':')[0]);
|
||||
const end = parseInt(timeSlot.endTime.split(':')[0]);
|
||||
|
||||
|
||||
for (let hour = start; hour < end; hour++) {
|
||||
slots.push(`${hour.toString().padStart(2, '0')}:00`);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Remove duplicates and sort
|
||||
return [...new Set(slots)].sort();
|
||||
}
|
||||
@@ -205,9 +204,7 @@ export function EnhancedBookingCalendar() {
|
||||
|
||||
const isDayBookable = (): boolean => {
|
||||
const dayOfWeek = selectedDate.getDay();
|
||||
const dayTimeSlots = timeSlots.filter(
|
||||
slot => slot.dayOfWeek === dayOfWeek && slot.isActive
|
||||
);
|
||||
const dayTimeSlots = timeSlots.filter((slot) => slot.dayOfWeek === dayOfWeek && slot.isActive);
|
||||
return dayTimeSlots.length > 0;
|
||||
};
|
||||
|
||||
@@ -216,6 +213,24 @@ export function EnhancedBookingCalendar() {
|
||||
return days[dayOfWeek];
|
||||
};
|
||||
|
||||
const parseBookingNotes = (notes?: string) => {
|
||||
if (!notes) return { partner: '', additionalNotes: '' };
|
||||
|
||||
const parts = notes.split(' | ');
|
||||
let partner = '';
|
||||
let additionalNotes = '';
|
||||
|
||||
parts.forEach((part) => {
|
||||
if (part.startsWith('Partner: ')) {
|
||||
partner = part.replace('Partner: ', '');
|
||||
} else {
|
||||
additionalNotes = additionalNotes ? `${additionalNotes} | ${part}` : part;
|
||||
}
|
||||
});
|
||||
|
||||
return { partner, additionalNotes };
|
||||
};
|
||||
|
||||
const generateBookingSlots = (existingBookings: Booking[]) => {
|
||||
const dateStr = selectedDate.toISOString().split('T')[0];
|
||||
const timeSlots = generateTimeSlots();
|
||||
@@ -231,10 +246,12 @@ export function EnhancedBookingCalendar() {
|
||||
booking.status === 'active'
|
||||
);
|
||||
|
||||
const bookedBy = existingBooking?.user
|
||||
const bookedBy = existingBooking?.user
|
||||
? `${existingBooking.user.name} ${existingBooking.user.surname}`
|
||||
: undefined;
|
||||
|
||||
const { partner } = parseBookingNotes(existingBooking?.notes);
|
||||
|
||||
slots.push({
|
||||
time,
|
||||
courtId: court.id,
|
||||
@@ -242,6 +259,7 @@ export function EnhancedBookingCalendar() {
|
||||
available: !existingBooking,
|
||||
bookingId: existingBooking?.id,
|
||||
bookedBy,
|
||||
partner,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -268,10 +286,8 @@ export function EnhancedBookingCalendar() {
|
||||
|
||||
// CRITICAL: Check if there are any active time slots for this day
|
||||
const dayOfWeek = selectedDateOnly.getDay();
|
||||
const dayTimeSlots = timeSlots.filter(
|
||||
slot => slot.dayOfWeek === dayOfWeek && slot.isActive
|
||||
);
|
||||
|
||||
const dayTimeSlots = timeSlots.filter((slot) => slot.dayOfWeek === dayOfWeek && slot.isActive);
|
||||
|
||||
// If no time slots are configured for this day, it's not selectable
|
||||
if (dayTimeSlots.length === 0) return false;
|
||||
|
||||
@@ -441,34 +457,55 @@ export function EnhancedBookingCalendar() {
|
||||
<div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2'>
|
||||
{getAvailableDates()
|
||||
.slice(0, 8)
|
||||
.map((date, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant={
|
||||
date.toDateString() === selectedDate.toDateString()
|
||||
? 'default'
|
||||
: 'outline'
|
||||
}
|
||||
size='sm'
|
||||
onClick={() => setSelectedDate(date)}
|
||||
className='h-16 flex flex-col'
|
||||
>
|
||||
<span className='text-xs font-normal'>
|
||||
{date.toLocaleDateString('en-US', { weekday: 'short' })}
|
||||
</span>
|
||||
<span className='font-semibold'>{date.getDate()}</span>
|
||||
<span className='text-xs font-normal'>
|
||||
{date.toLocaleDateString('en-US', { month: 'short' })}
|
||||
</span>
|
||||
{isToday(date) && <span className='text-xs text-blue-600'>Today</span>}
|
||||
</Button>
|
||||
))}
|
||||
.map((date, index) => {
|
||||
const isSelectedDate = date.toDateString() === selectedDate.toDateString();
|
||||
const isTodayDate = isToday(date);
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
variant={isSelectedDate ? 'default' : 'outline'}
|
||||
size='sm'
|
||||
onClick={() => setSelectedDate(date)}
|
||||
className={`h-16 flex flex-col relative transition-all ${
|
||||
isTodayDate && !isSelectedDate
|
||||
? 'ring-2 ring-blue-400 ring-opacity-50 bg-blue-50 border-blue-200 hover:bg-blue-100'
|
||||
: ''
|
||||
} ${
|
||||
isSelectedDate && isTodayDate
|
||||
? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{isTodayDate && (
|
||||
<div className='absolute -top-1 -right-1 w-3 h-3 bg-orange-500 rounded-full animate-pulse' />
|
||||
)}
|
||||
<span className='text-xs font-normal'>
|
||||
{date.toLocaleDateString('en-US', { weekday: 'short' })}
|
||||
</span>
|
||||
<span className='font-semibold'>{date.getDate()}</span>
|
||||
<span className='text-xs font-normal'>
|
||||
{date.toLocaleDateString('en-US', { month: 'short' })}
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Date Display */}
|
||||
<div className='text-center p-4 bg-blue-50 rounded-lg'>
|
||||
<h3 className='text-lg font-semibold text-blue-900'>
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
<h3
|
||||
className={`text-lg font-semibold ${
|
||||
isToday(selectedDate) ? 'text-white' : 'text-blue-900'
|
||||
}`}
|
||||
>
|
||||
{selectedDate.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
@@ -476,7 +513,13 @@ export function EnhancedBookingCalendar() {
|
||||
day: 'numeric',
|
||||
})}
|
||||
</h3>
|
||||
{isToday(selectedDate) && <span className='text-sm text-blue-600'>Today</span>}
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
@@ -494,53 +537,85 @@ export function EnhancedBookingCalendar() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Time Slots Grid */}
|
||||
{/* Time Slots Grid - Organized by Time */}
|
||||
{!loading && courts.length > 0 && (
|
||||
<div className='space-y-4'>
|
||||
<h3 className='font-medium'>Available Time Slots</h3>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
|
||||
{bookingSlots.map((slot, index) => (
|
||||
<div
|
||||
key={`${slot.courtId}-${slot.time}`}
|
||||
className={`p-4 border rounded-lg transition-colors cursor-pointer ${
|
||||
slot.available
|
||||
? 'border-green-200 bg-green-50 hover:bg-green-100'
|
||||
: 'border-red-200 bg-red-50 cursor-not-allowed'
|
||||
}`}
|
||||
onClick={() => handleSlotClick(slot)}
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='space-y-2'>
|
||||
<div className='flex items-center gap-2 text-sm font-medium'>
|
||||
<div className='space-y-3'>
|
||||
{/* Group slots by time */}
|
||||
{Array.from(new Set(bookingSlots.map((slot) => slot.time)))
|
||||
.sort()
|
||||
.map((time) => {
|
||||
const slotsForTime = bookingSlots.filter((slot) => slot.time === time);
|
||||
|
||||
return (
|
||||
<div key={time} className='space-y-2'>
|
||||
<div className='flex items-center gap-2 text-sm font-medium text-gray-700'>
|
||||
<Clock className='h-4 w-4' />
|
||||
{slot.time} -{' '}
|
||||
{String(parseInt(slot.time.split(':')[0]) + 1).padStart(2, '0')}
|
||||
:00
|
||||
{time} -{' '}
|
||||
{String(parseInt(time.split(':')[0]) + 1).padStart(2, '0')}:00
|
||||
</div>
|
||||
<div className='flex items-center gap-2 text-sm text-gray-600'>
|
||||
<MapPin className='h-4 w-4' />
|
||||
{slot.courtName}
|
||||
<div
|
||||
className={`grid gap-3 ${
|
||||
slotsForTime.length === 1
|
||||
? 'grid-cols-1'
|
||||
: 'grid-cols-1 sm:grid-cols-2'
|
||||
}`}
|
||||
>
|
||||
{slotsForTime.map((slot) => (
|
||||
<div
|
||||
key={`${slot.courtId}-${slot.time}`}
|
||||
className={`p-3 border rounded-lg transition-colors cursor-pointer ${
|
||||
slot.available
|
||||
? 'border-green-200 bg-green-50 hover:bg-green-100'
|
||||
: 'border-red-200 bg-red-50 cursor-not-allowed'
|
||||
}`}
|
||||
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'>
|
||||
<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'>
|
||||
<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'>
|
||||
<User className='h-3 w-3' />
|
||||
Playing with: {slot.partner}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!slot.available && !slot.bookedBy && (
|
||||
<div className='text-xs text-red-600'>
|
||||
Already booked
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
size='sm'
|
||||
disabled={!slot.available}
|
||||
className={
|
||||
slot.available
|
||||
? 'bg-green-600 hover:bg-green-700'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{slot.available ? 'Book' : 'Booked'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{!slot.available && slot.bookedBy && (
|
||||
<div className='flex items-center gap-2 text-xs text-red-600'>
|
||||
<Users className='h-3 w-3' />
|
||||
Booked by {slot.bookedBy}
|
||||
</div>
|
||||
)}
|
||||
{!slot.available && !slot.bookedBy && (
|
||||
<div className='text-xs text-red-600'>Already booked</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
size='sm'
|
||||
disabled={!slot.available}
|
||||
className={slot.available ? 'bg-green-600 hover:bg-green-700' : ''}
|
||||
>
|
||||
{slot.available ? 'Book' : 'Booked'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -554,8 +629,8 @@ export function EnhancedBookingCalendar() {
|
||||
No courts available on {getDayName(selectedDate.getDay())}s
|
||||
</div>
|
||||
<p className='text-gray-500 text-sm'>
|
||||
This facility is closed on {getDayName(selectedDate.getDay())}s.
|
||||
Please select a different day to make a booking.
|
||||
This facility is closed on {getDayName(selectedDate.getDay())}s. Please
|
||||
select a different day to make a booking.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user