additional features, refinement and more control over the app from admin side, better bookings UX

This commit is contained in:
mikicvi
2025-09-25 20:23:18 +01:00
parent 6d3202e385
commit b89d91ade2
20 changed files with 1358 additions and 328 deletions
@@ -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>
+118 -79
View File
@@ -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>
))}
+25 -6
View File
@@ -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>
+63 -25
View File
@@ -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>