fixes, theming, branding

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>