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>