mikicv/tt-booking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
mikicvi
2025-09-28 21:31:24 +01:00
parent 43c0cf1359
commit 1911aa9211
3 changed files with 131 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dashboard/dashboard-header.tsx
+69 -1
View File
@@ -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 */}