Enhance admin dashboard and header with responsive layouts and additional navigation buttons, icon

components/admin/admin-dashboard.tsx

@@ -5,7 +5,19 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Badge } from '@/components/ui/badge';
-import { Users, Calendar, Settings, BarChart3, Bell, Shield, Clock, MapPin, Activity, LogOut } from 'lucide-react';
+import {
+	Users,
+	Calendar,
+	Settings,
+	BarChart3,
+	Bell,
+	Shield,
+	Clock,
+	MapPin,
+	Activity,
+	LogOut,
+	ArrowLeft,
+} from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { AdminUserManagement } from './AdminUserManagement';
 import { AdminAnnouncementManagement } from './AdminAnnouncementManagement';
@@ -79,13 +91,23 @@ export function AdminDashboard() {
 			{/* Header */}
 			<header className='bg-card border-b border-border'>
 				<div className='container mx-auto px-4'>
-					<div className='flex items-center justify-between h-16'>
+					{/* Desktop Layout */}
+					<div className='hidden md:flex items-center justify-between h-16'>
 						<div className='flex items-center space-x-4'>
 							<Shield className='h-6 w-6 text-blue-600 dark:text-blue-400' />
 							<h1 className='text-xl font-semibold text-foreground'>Admin Dashboard</h1>
 						</div>
 
 						<div className='flex items-center space-x-4'>
+							<Button
+								variant='ghost'
+								size='sm'
+								onClick={() => router.push('/dashboard')}
+								className='flex items-center gap-2'
+							>
+								<ArrowLeft className='h-4 w-4' />
+								Back to Booking
+							</Button>
 							<Badge variant='secondary'>Administrator</Badge>
 							<ModeToggle />
 							<Button variant='ghost' size='sm' onClick={handleLogout}>
@@ -94,6 +116,44 @@ export function AdminDashboard() {
 							</Button>
 						</div>
 					</div>
+
+					{/* Mobile Layout */}
+					<div className='md:hidden py-3'>
+						{/* Top row */}
+						<div className='flex items-center justify-between mb-3'>
+							<div className='flex items-center space-x-2 min-w-0 flex-1'>
+								<Shield className='h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0' />
+								<h1 className='text-lg font-semibold text-foreground truncate'>Admin Dashboard</h1>
+								<Badge variant='secondary' className='flex-shrink-0'>
+									Admin
+								</Badge>
+							</div>
+							<ModeToggle />
+						</div>
+
+						{/* Bottom row */}
+						<div className='flex items-center justify-between gap-2'>
+							<Button
+								variant='ghost'
+								size='sm'
+								onClick={() => router.push('/dashboard')}
+								className='flex items-center gap-1 px-3 py-2 min-h-[36px] touch-manipulation'
+							>
+								<ArrowLeft className='h-4 w-4' />
+								<span className='text-xs font-medium'>Booking</span>
+							</Button>
+
+							<Button
+								variant='ghost'
+								size='sm'
+								onClick={handleLogout}
+								className='flex items-center gap-1 px-3 py-2 min-h-[36px] touch-manipulation'
+							>
+								<LogOut className='h-4 w-4' />
+								<span className='text-xs font-medium'>Logout</span>
+							</Button>
+						</div>
+					</div>
 				</div>
 			</header>
 

components/dashboard/dashboard-header.tsx

@@ -92,7 +92,8 @@ export function DashboardHeader({ user }: DashboardHeaderProps) {
 	return (
 		<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'>
+				{/* Desktop Layout */}
+				<div className='hidden md: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-primary' />
@@ -131,6 +132,73 @@ export function DashboardHeader({ user }: DashboardHeaderProps) {
 						</Button>
 					</div>
 				</div>
+
+				{/* Mobile Layout */}
+				<div className='md:hidden py-3'>
+					{/* Top row */}
+					<div className='flex items-center justify-between mb-3'>
+						<div className='flex items-center space-x-2 min-w-0 flex-1'>
+							<Calendar className='h-5 w-5 text-primary flex-shrink-0' />
+							<h1 className='text-lg font-bold text-foreground truncate'>
+								{appConfig?.clubName || 'TT Booking'}
+							</h1>
+							{user.role === 'admin' && (
+								<Badge variant='secondary' className='flex-shrink-0'>
+									Admin
+								</Badge>
+							)}
+						</div>
+						<div className='flex items-center space-x-2 flex-shrink-0'>
+							<NotificationBell unreadCount={unreadCount} onClick={() => setShowAnnouncements(true)} />
+							<ModeToggle />
+						</div>
+					</div>
+
+					{/* Bottom row */}
+					<div className='flex items-center justify-between gap-2'>
+						<Button
+							variant='ghost'
+							size='sm'
+							onClick={() => setShowUserProfile(true)}
+							className='flex items-center space-x-2 min-w-0 flex-1 justify-start'
+						>
+							<User className='h-4 w-4 text-muted-foreground flex-shrink-0' />
+							<span className='text-sm text-foreground truncate'>
+								{user.name && user.surname ? `${user.name} ${user.surname}` : user.email.split('@')[0]}
+							</span>
+						</Button>
+
+						<div className='flex items-center gap-2 flex-shrink-0'>
+							{user.role === 'admin' && (
+								<Button
+									variant='ghost'
+									size='sm'
+									onClick={() => {
+										console.log('Admin button clicked');
+										router.push('/admin');
+									}}
+									className='flex items-center gap-1 px-3 py-2 min-h-[36px] touch-manipulation'
+									title='Admin Panel'
+								>
+									<Settings className='h-4 w-4' />
+									<span className='text-xs font-medium'>Admin</span>
+								</Button>
+							)}
+
+							<Button
+								variant='outline'
+								size='sm'
+								onClick={handleLogout}
+								disabled={isLoggingOut}
+								className='flex items-center gap-1 px-2'
+								title={isLoggingOut ? 'Logging out...' : 'Logout'}
+							>
+								<LogOut className='h-4 w-4' />
+								<span className='text-xs'>{isLoggingOut ? 'Out' : 'Logout'}</span>
+							</Button>
+						</div>
+					</div>
+				</div>
 			</div>
 
 			{/* Announcements Modal */}