additional features, refinement and more control over the app from admin side, better bookings UX
This commit is contained in:
mikicvi
@@ -23,6 +23,7 @@ interface SettingsData {
|
||||
booking_start_time: string;
|
||||
booking_end_time: string;
|
||||
allow_weekend_bookings: string;
|
||||
max_bookings_per_user_per_hour_per_day: string;
|
||||
}
|
||||
|
||||
export function AdminSettingsManagement() {
|
||||
@@ -33,6 +34,7 @@ export function AdminSettingsManagement() {
|
||||
booking_start_time: '08:00',
|
||||
booking_end_time: '22:00',
|
||||
allow_weekend_bookings: 'true',
|
||||
max_bookings_per_user_per_hour_per_day: '1',
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
@@ -54,6 +56,7 @@ export function AdminSettingsManagement() {
|
||||
booking_start_time: '08:00',
|
||||
booking_end_time: '22:00',
|
||||
allow_weekend_bookings: 'true',
|
||||
max_bookings_per_user_per_hour_per_day: '1',
|
||||
};
|
||||
|
||||
// Map the settings array to our object
|
||||
@@ -249,6 +252,20 @@ export function AdminSettingsManagement() {
|
||||
<p className='text-sm text-gray-500'>When courts close for booking each day</p>
|
||||
</div>
|
||||
|
||||
{/* Booking Restrictions */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='max_bookings_per_user_per_hour_per_day'>Max Bookings per User per Hour</Label>
|
||||
<Input
|
||||
id='max_bookings_per_user_per_hour_per_day'
|
||||
type='number'
|
||||
min='1'
|
||||
max='5'
|
||||
value={settings.max_bookings_per_user_per_hour_per_day}
|
||||
onChange={(e) => updateSetting('max_bookings_per_user_per_hour_per_day', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>Maximum bookings per user per hour on the same day</p>
|
||||
</div>
|
||||
|
||||
{/* Weekend Bookings */}
|
||||
<div className='space-y-2'>
|
||||
<div className='flex items-center space-x-2'>
|
||||
@@ -286,6 +303,10 @@ export function AdminSettingsManagement() {
|
||||
<strong>Weekend Bookings:</strong>{' '}
|
||||
{settings.allow_weekend_bookings === 'true' ? 'Enabled' : 'Disabled'}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Booking Limit:</strong> {settings.max_bookings_per_user_per_hour_per_day} per
|
||||
hour
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,15 +21,7 @@ interface TimeSlot {
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
const DAYS = [
|
||||
'Sunday',
|
||||
'Monday',
|
||||
'Tuesday',
|
||||
'Wednesday',
|
||||
'Thursday',
|
||||
'Friday',
|
||||
'Saturday'
|
||||
];
|
||||
const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
|
||||
export function AdminTimeSlotManagement() {
|
||||
const [timeSlots, setTimeSlots] = useState<TimeSlot[]>([]);
|
||||
@@ -76,16 +68,14 @@ export function AdminTimeSlotManagement() {
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const url = editingSlot
|
||||
? `/api/admin/time-slots/${editingSlot.id}`
|
||||
: '/api/admin/time-slots';
|
||||
|
||||
|
||||
const url = editingSlot ? `/api/admin/time-slots/${editingSlot.id}` : '/api/admin/time-slots';
|
||||
|
||||
const method = editingSlot ? 'PUT' : 'POST';
|
||||
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
@@ -97,9 +87,7 @@ export function AdminTimeSlotManagement() {
|
||||
if (response.ok) {
|
||||
toast({
|
||||
title: 'Success',
|
||||
description: editingSlot
|
||||
? 'Time slot updated successfully'
|
||||
: 'Time slot created successfully',
|
||||
description: editingSlot ? 'Time slot updated successfully' : 'Time slot created successfully',
|
||||
});
|
||||
fetchTimeSlots();
|
||||
setShowDialog(false);
|
||||
@@ -161,6 +149,51 @@ export function AdminTimeSlotManagement() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleWipeDay = async (dayOfWeek: number) => {
|
||||
const dayName = DAYS[dayOfWeek];
|
||||
if (!confirm(`Are you sure you want to delete ALL time slots for ${dayName}? This action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const slotsToDelete = timeSlots.filter((slot) => slot.dayOfWeek === dayOfWeek);
|
||||
|
||||
// Delete all slots for this day
|
||||
const deletePromises = slotsToDelete.map((slot) =>
|
||||
fetch(`/api/admin/time-slots/${slot.id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
);
|
||||
|
||||
const responses = await Promise.all(deletePromises);
|
||||
const successCount = responses.filter((response) => response.ok).length;
|
||||
|
||||
if (successCount === slotsToDelete.length) {
|
||||
toast({
|
||||
title: 'Success',
|
||||
description: `All ${dayName} time slots deleted successfully`,
|
||||
});
|
||||
fetchTimeSlots();
|
||||
} else {
|
||||
toast({
|
||||
title: 'Partial Success',
|
||||
description: `${successCount} of ${slotsToDelete.length} slots deleted`,
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error wiping day slots:', error);
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: 'Failed to delete day slots',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (slot: TimeSlot) => {
|
||||
setEditingSlot(slot);
|
||||
setFormData({
|
||||
@@ -193,35 +226,33 @@ export function AdminTimeSlotManagement() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-center">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Clock className="h-5 w-5" />
|
||||
<div className='flex justify-between items-center'>
|
||||
<CardTitle className='flex items-center gap-2'>
|
||||
<Clock className='h-5 w-5' />
|
||||
Time Slot Management
|
||||
</CardTitle>
|
||||
<Dialog open={showDialog} onOpenChange={setShowDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button onClick={resetForm}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
<Plus className='h-4 w-4 mr-2' />
|
||||
Add Time Slot
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editingSlot ? 'Edit Time Slot' : 'Add New Time Slot'}
|
||||
</DialogTitle>
|
||||
<DialogTitle>{editingSlot ? 'Edit Time Slot' : 'Add New Time Slot'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<form onSubmit={handleSubmit} className='space-y-4'>
|
||||
<div>
|
||||
<Label htmlFor="dayOfWeek">Day of Week</Label>
|
||||
<Select
|
||||
value={formData.dayOfWeek.toString()}
|
||||
onValueChange={(value) =>
|
||||
<Label htmlFor='dayOfWeek'>Day of Week</Label>
|
||||
<Select
|
||||
value={formData.dayOfWeek.toString()}
|
||||
onValueChange={(value) =>
|
||||
setFormData({ ...formData, dayOfWeek: parseInt(value) })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select day" />
|
||||
<SelectValue placeholder='Select day' />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{DAYS.map((day, index) => (
|
||||
@@ -233,48 +264,38 @@ export function AdminTimeSlotManagement() {
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="startTime">Start Time</Label>
|
||||
<Label htmlFor='startTime'>Start Time</Label>
|
||||
<Input
|
||||
id="startTime"
|
||||
type="time"
|
||||
id='startTime'
|
||||
type='time'
|
||||
value={formData.startTime}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, startTime: e.target.value })
|
||||
}
|
||||
onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="endTime">End Time</Label>
|
||||
<Label htmlFor='endTime'>End Time</Label>
|
||||
<Input
|
||||
id="endTime"
|
||||
type="time"
|
||||
id='endTime'
|
||||
type='time'
|
||||
value={formData.endTime}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, endTime: e.target.value })
|
||||
}
|
||||
onChange={(e) => setFormData({ ...formData, endTime: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className='flex items-center space-x-2'>
|
||||
<Switch
|
||||
id="isActive"
|
||||
id='isActive'
|
||||
checked={formData.isActive}
|
||||
onCheckedChange={(checked) =>
|
||||
setFormData({ ...formData, isActive: checked })
|
||||
}
|
||||
onCheckedChange={(checked) => setFormData({ ...formData, isActive: checked })}
|
||||
/>
|
||||
<Label htmlFor="isActive">Active</Label>
|
||||
<Label htmlFor='isActive'>Active</Label>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setShowDialog(false)}
|
||||
>
|
||||
<div className='flex justify-end space-x-2'>
|
||||
<Button type='button' variant='outline' onClick={() => setShowDialog(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading}>
|
||||
<Button type='submit' disabled={loading}>
|
||||
{loading ? 'Saving...' : editingSlot ? 'Update' : 'Create'}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -285,57 +306,75 @@ export function AdminTimeSlotManagement() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading && timeSlots.length === 0 ? (
|
||||
<div className="text-center py-4">Loading time slots...</div>
|
||||
<div className='text-center py-4'>Loading time slots...</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className='space-y-6'>
|
||||
{DAYS.map((day, dayIndex) => (
|
||||
<div key={dayIndex} className="space-y-2">
|
||||
<h3 className="font-semibold text-lg">{day}</h3>
|
||||
<div key={dayIndex} className='space-y-2'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h3 className='font-semibold text-lg'>{day}</h3>
|
||||
{groupedTimeSlots[dayIndex]?.length > 0 && (
|
||||
<Button
|
||||
size='sm'
|
||||
variant='outline'
|
||||
onClick={() => handleWipeDay(dayIndex)}
|
||||
className='text-red-600 hover:text-red-700 hover:bg-red-50'
|
||||
disabled={loading}
|
||||
>
|
||||
<Trash2 className='h-4 w-4 mr-1' />
|
||||
Wipe All
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{groupedTimeSlots[dayIndex]?.length > 0 ? (
|
||||
<div className="grid gap-2">
|
||||
<div className='grid gap-2'>
|
||||
{groupedTimeSlots[dayIndex]
|
||||
.sort((a, b) => a.startTime.localeCompare(b.startTime))
|
||||
.map((slot) => (
|
||||
<div
|
||||
key={slot.id}
|
||||
className={`flex items-center justify-between p-3 border rounded-lg ${
|
||||
slot.isActive ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200'
|
||||
slot.isActive
|
||||
? 'bg-green-50 border-green-200'
|
||||
: 'bg-gray-50 border-gray-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="font-medium">
|
||||
<div className='flex items-center space-x-3'>
|
||||
<div className='font-medium'>
|
||||
{slot.startTime} - {slot.endTime}
|
||||
</div>
|
||||
<div className={`px-2 py-1 rounded-full text-xs ${
|
||||
slot.isActive
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
<div
|
||||
className={`px-2 py-1 rounded-full text-xs ${
|
||||
slot.isActive
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}
|
||||
>
|
||||
{slot.isActive ? 'Active' : 'Inactive'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<div className='flex space-x-2'>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
size='sm'
|
||||
variant='outline'
|
||||
onClick={() => handleEdit(slot)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
<Edit className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
size='sm'
|
||||
variant='outline'
|
||||
onClick={() => handleDelete(slot.id)}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
className='text-red-600 hover:text-red-700'
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500 italic">No time slots configured for {day}</p>
|
||||
<p className='text-gray-500 italic'>No time slots configured for {day}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -71,8 +71,12 @@ export function AdminUserManagement() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateUser = async () => {
|
||||
const handleCreateUser = async (e?: React.FormEvent) => {
|
||||
try {
|
||||
// Prevent form submission and double submissions
|
||||
if (e) e.preventDefault();
|
||||
if (loading) return;
|
||||
|
||||
if (!formData.name || !formData.surname || !formData.email || !formData.password) {
|
||||
toast({
|
||||
title: 'Error',
|
||||
@@ -82,6 +86,8 @@ export function AdminUserManagement() {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
const response = await fetch('/api/admin/users', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -114,11 +120,16 @@ export function AdminUserManagement() {
|
||||
description: 'Failed to create user',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditUser = async () => {
|
||||
try {
|
||||
// Prevent double submissions
|
||||
if (loading) return;
|
||||
|
||||
if (!editingUser || !formData.name || !formData.surname || !formData.email) {
|
||||
toast({
|
||||
title: 'Error',
|
||||
@@ -128,6 +139,8 @@ export function AdminUserManagement() {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
const updateData = { ...formData };
|
||||
if (!updateData.password) {
|
||||
delete updateData.password; // Don't update password if not provided
|
||||
@@ -166,6 +179,8 @@ export function AdminUserManagement() {
|
||||
description: 'Failed to update user',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -262,7 +277,7 @@ export function AdminUserManagement() {
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create New User</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className='space-y-4'>
|
||||
<form onSubmit={handleCreateUser} className='space-y-4'>
|
||||
<div className='grid grid-cols-2 gap-4'>
|
||||
<div>
|
||||
<Label htmlFor='name'>First Name</Label>
|
||||
@@ -321,12 +336,14 @@ export function AdminUserManagement() {
|
||||
</Select>
|
||||
</div>
|
||||
<div className='flex gap-2 justify-end'>
|
||||
<Button variant='outline' onClick={() => setIsCreateDialogOpen(false)}>
|
||||
<Button type='button' variant='outline' onClick={() => setIsCreateDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCreateUser}>Create User</Button>
|
||||
<Button type='submit' disabled={loading}>
|
||||
{loading ? 'Creating...' : 'Create User'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
@@ -474,7 +491,9 @@ export function AdminUserManagement() {
|
||||
<Button variant='outline' onClick={() => setIsEditDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleEditUser}>Update User</Button>
|
||||
<Button onClick={handleEditUser} disabled={loading}>
|
||||
{loading ? 'Updating...' : 'Update User'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
@@ -15,14 +15,52 @@ import { AdminCourtManagement } from './AdminCourtManagement';
|
||||
import { AdminSettingsManagement } from './AdminSettingsManagement';
|
||||
import { AdminTimeSlotManagement } from './AdminTimeSlotManagement';
|
||||
|
||||
interface AdminStats {
|
||||
totalUsers: number;
|
||||
activeCourts: number;
|
||||
todaysBookings: number;
|
||||
monthlyBookings: number;
|
||||
}
|
||||
|
||||
interface RecentBooking {
|
||||
id: string;
|
||||
date: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
courtName: string;
|
||||
userName: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export function AdminDashboard() {
|
||||
const router = useRouter();
|
||||
const [stats] = useState({
|
||||
totalUsers: 125,
|
||||
todayBookings: 18,
|
||||
totalCourts: 2,
|
||||
weeklyRevenue: 850,
|
||||
const [stats, setStats] = useState<AdminStats>({
|
||||
totalUsers: 0,
|
||||
activeCourts: 0,
|
||||
todaysBookings: 0,
|
||||
monthlyBookings: 0,
|
||||
});
|
||||
const [recentBookings, setRecentBookings] = useState<RecentBooking[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/admin/stats');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setStats(data.stats);
|
||||
setRecentBookings(data.recentBookings);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching admin stats:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
@@ -68,19 +106,8 @@ export function AdminDashboard() {
|
||||
<Users className='h-4 w-4 text-muted-foreground' />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className='text-2xl font-bold'>{stats.totalUsers}</div>
|
||||
<p className='text-xs text-muted-foreground'>+12% from last month</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
|
||||
<CardTitle className='text-sm font-medium'>Today's Bookings</CardTitle>
|
||||
<Calendar className='h-4 w-4 text-muted-foreground' />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className='text-2xl font-bold'>{stats.todayBookings}</div>
|
||||
<p className='text-xs text-muted-foreground'>+5% from yesterday</p>
|
||||
<div className='text-2xl font-bold'>{loading ? '...' : stats.totalUsers}</div>
|
||||
<p className='text-xs text-muted-foreground'>Registered users</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -90,19 +117,30 @@ export function AdminDashboard() {
|
||||
<MapPin className='h-4 w-4 text-muted-foreground' />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className='text-2xl font-bold'>{stats.totalCourts}</div>
|
||||
<p className='text-xs text-muted-foreground'>All courts operational</p>
|
||||
<div className='text-2xl font-bold'>{loading ? '...' : stats.activeCourts}</div>
|
||||
<p className='text-xs text-muted-foreground'>Available for booking</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
|
||||
<CardTitle className='text-sm font-medium'>Weekly Revenue</CardTitle>
|
||||
<CardTitle className='text-sm font-medium'>Today's Bookings</CardTitle>
|
||||
<Calendar className='h-4 w-4 text-muted-foreground' />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className='text-2xl font-bold'>{loading ? '...' : stats.todaysBookings}</div>
|
||||
<p className='text-xs text-muted-foreground'>Bookings for today</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
|
||||
<CardTitle className='text-sm font-medium'>Monthly Bookings</CardTitle>
|
||||
<BarChart3 className='h-4 w-4 text-muted-foreground' />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className='text-2xl font-bold'>${stats.weeklyRevenue}</div>
|
||||
<p className='text-xs text-muted-foreground'>+8% from last week</p>
|
||||
<div className='text-2xl font-bold'>{loading ? '...' : stats.monthlyBookings}</div>
|
||||
<p className='text-xs text-muted-foreground'>This month's total</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -127,7 +165,7 @@ export function AdminDashboard() {
|
||||
<AdminCourtManagement />
|
||||
</TabsContent>{' '}
|
||||
<TabsContent value='settings'>
|
||||
<div className="space-y-6">
|
||||
<div className='space-y-6'>
|
||||
<AdminSettingsManagement />
|
||||
<AdminTimeSlotManagement />
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
) : (
|
||||
|
||||
@@ -268,8 +268,11 @@ export function UserBookingManagement() {
|
||||
<MapPin className='h-4 w-4 text-blue-600' />
|
||||
<span className='font-medium text-sm'>{booking.court.name}</span>
|
||||
{isToday(booking.date) && (
|
||||
<Badge variant='secondary' className='text-xs'>
|
||||
Today
|
||||
<Badge
|
||||
variant='secondary'
|
||||
className='text-xs bg-gradient-to-r from-orange-100 to-orange-200 text-orange-700 border-orange-300'
|
||||
>
|
||||
🎯 Today
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,8 @@ interface DashboardHeaderProps {
|
||||
userId: string;
|
||||
email: string;
|
||||
role: 'user' | 'admin';
|
||||
name?: string;
|
||||
surname?: string;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -101,7 +103,9 @@ export function DashboardHeader({ user }: DashboardHeaderProps) {
|
||||
className='flex items-center space-x-2'
|
||||
>
|
||||
<User className='h-4 w-4 text-gray-600' />
|
||||
<span className='text-sm text-gray-700'>{user.email.split('@')[0]}</span>
|
||||
<span className='text-sm text-gray-700'>
|
||||
{user.name && user.surname ? `${user.name} ${user.surname}` : user.email.split('@')[0]}
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
<Button variant='outline' size='sm' onClick={handleLogout} disabled={isLoggingOut}>
|
||||
|
||||
Reference in New Issue
Block a user