theming, date, time localisation, additional features, seeding initial cleanup

components/dashboard/dashboard-header.tsx

@@ -9,6 +9,7 @@ import { Bell, LogOut, Settings, User, Calendar } from 'lucide-react';
 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';
 
 interface DashboardHeaderProps {
 	user: {
@@ -71,24 +72,22 @@ export function DashboardHeader({ user }: DashboardHeaderProps) {
 	};
 
 	return (
-		<header className='bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50'>
+		<header className='bg-background/80 backdrop-blur-md border-b border-border sticky top-0 z-50'>
 			<div className='container mx-auto px-4'>
 				<div className='flex items-center justify-between h-16'>
 					<div className='flex items-center space-x-4'>
 						<div className='flex items-center space-x-2'>
-							<Calendar className='h-6 w-6 text-blue-600' />
-							<h1 className='text-xl font-bold text-gray-900'>TT Booking</h1>
+							<Calendar className='h-6 w-6 text-primary' />
+							<h1 className='text-xl font-bold text-foreground'>TT Booking</h1>
 						</div>
-						{user.role === 'admin' && (
-							<Badge variant='secondary' className='bg-purple-100 text-purple-800'>
-								Admin
-							</Badge>
-						)}
+						{user.role === 'admin' && <Badge variant='secondary'>Admin</Badge>}
 					</div>
 
 					<div className='flex items-center space-x-4'>
 						<NotificationBell unreadCount={unreadCount} onClick={() => setShowAnnouncements(true)} />
 
+						<ModeToggle />
+
 						{user.role === 'admin' && (
 							<Button variant='ghost' size='sm' onClick={() => router.push('/admin')}>
 								<Settings className='h-4 w-4 mr-2' />
@@ -102,8 +101,8 @@ export function DashboardHeader({ user }: DashboardHeaderProps) {
 							onClick={() => setShowUserProfile(true)}
 							className='flex items-center space-x-2'
 						>
-							<User className='h-4 w-4 text-gray-600' />
-							<span className='text-sm text-gray-700'>
+							<User className='h-4 w-4 text-muted-foreground' />
+							<span className='text-sm text-foreground'>
 								{user.name && user.surname ? `${user.name} ${user.surname}` : user.email.split('@')[0]}
 							</span>
 						</Button>