fixes, theming, branding

components/dashboard/BookingCalendar.tsx

@@ -6,6 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { CalendarIcon, Clock, MapPin } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
 
 const timeSlots = [
 	'09:00',
@@ -31,6 +32,7 @@ export function BookingCalendar() {
 	const [selectedDate, setSelectedDate] = useState<Date>(new Date());
 	const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
 	const [selectedCourt, setSelectedCourt] = useState<string | null>(null);
+	const { toast } = useToast();
 
 	const formatDate = (date: Date) => {
 		return date.toLocaleDateString('en-IE', {
@@ -66,13 +68,24 @@ export function BookingCalendar() {
 				setSelectedSlot(null);
 				setSelectedCourt(null);
 				// Show success message
-				alert('Booking created successfully!');
+				toast({
+					title: 'Success',
+					description: 'Booking created successfully!',
+				});
 			} else {
-				alert(result.error || 'Booking failed');
+				toast({
+					title: 'Error',
+					description: result.error || 'Booking failed',
+					variant: 'destructive',
+				});
 			}
 		} catch (error) {
 			console.error('Booking error:', error);
-			alert('An error occurred while creating the booking');
+			toast({
+				title: 'Error',
+				description: 'An error occurred while creating the booking',
+				variant: 'destructive',
+			});
 		}
 	};