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',
+			});
 		}
 	};
 

components/dashboard/dashboard-header.tsx

@@ -10,6 +10,7 @@ import { useToast } from '@/hooks/use-toast';
 import { NotificationBell, AnnouncementsModal } from '@/components/notifications/announcements';
 import { UserProfile } from '@/components/user/user-profile';
 import { ModeToggle } from '@/components/ui/mode-toggle';
+import type { AppConfig } from '@/lib/app-config';
 
 interface DashboardHeaderProps {
 	user: {
@@ -28,6 +29,23 @@ export function DashboardHeader({ user }: DashboardHeaderProps) {
 	const [showAnnouncements, setShowAnnouncements] = useState(false);
 	const [showUserProfile, setShowUserProfile] = useState(false);
 	const [unreadCount, setUnreadCount] = useState(0);
+	const [appConfig, setAppConfig] = useState<AppConfig | null>(null);
+
+	useEffect(() => {
+		const fetchAppConfig = async () => {
+			try {
+				const response = await fetch('/api/config');
+				if (response.ok) {
+					const config = await response.json();
+					setAppConfig(config);
+				}
+			} catch (error) {
+				console.error('Error fetching app config:', error);
+			}
+		};
+
+		fetchAppConfig();
+	}, []);
 
 	// Fetch unread announcements count on component mount
 	useEffect(() => {
@@ -78,7 +96,7 @@ export function DashboardHeader({ user }: DashboardHeaderProps) {
 					<div className='flex items-center space-x-4'>
 						<div className='flex items-center space-x-2'>
 							<Calendar className='h-6 w-6 text-primary' />
-							<h1 className='text-xl font-bold text-foreground'>TT Booking</h1>
+							<h1 className='text-xl font-bold text-foreground'>{appConfig?.clubName || 'TT Booking'}</h1>
 						</div>
 						{user.role === 'admin' && <Badge variant='secondary'>Admin</Badge>}
 					</div>