gnx/Hotel-Booking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Iliyan Angelov
2025-11-21 01:20:51 +02:00
parent a38ab4fa82
commit 6f85b8cf17
242 changed files with 7154 additions and 14492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
Frontend/src/components/layout/Header.tsx
View File

@@ -35,7 +35,7 @@ const Header: React.FC<HeaderProps> = ({
}) => {
const { settings } = useCompanySettings();
// Get phone and email from centralized company settings
const displayPhone = settings.company_phone || '+1 (234) 567-890';
const displayEmail = settings.company_email || 'info@luxuryhotel.com';
const logoUrl = settings.company_logo_url
@@ -48,7 +48,7 @@ const Header: React.FC<HeaderProps> = ({
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
const userMenuRef = useRef<HTMLDivElement>(null);
// Close user menu when clicking outside
useClickOutside(userMenuRef, () => {
if (isUserMenuOpen) {
setIsUserMenuOpen(false);
@@ -73,7 +73,7 @@ const Header: React.FC<HeaderProps> = ({
return (
<header className="bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f] sticky top-0 z-50 border-b border-[#d4af37]/20 shadow-2xl">
{/* Top Bar - Contact Info */}
{}
<div className="hidden lg:block bg-[#0a0a0a]/50 border-b border-[#d4af37]/10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
<div className="flex items-center justify-end space-x-6 text-sm">
@@ -93,10 +93,10 @@ const Header: React.FC<HeaderProps> = ({
</div>
</div>
{/* Main Header */}
{}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center justify-between">
{/* Logo */}
{}
<Link
to="/"
className="flex items-center space-x-3
@@ -126,7 +126,7 @@ const Header: React.FC<HeaderProps> = ({
</div>
</Link>
{/* Desktop Navigation */}
{}
<nav className="hidden md:flex items-center
space-x-1"
>
@@ -168,7 +168,7 @@ const Header: React.FC<HeaderProps> = ({
</Link>
</nav>
{/* Desktop Auth Section */}
{}
<div className="hidden md:flex items-center
space-x-3"
>
@@ -233,7 +233,7 @@ const Header: React.FC<HeaderProps> = ({
</span>
</button>
{/* User Dropdown Menu */}
{}
{isUserMenuOpen && (
<div className="absolute right-0 mt-2
w-52 bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f]
@@ -252,30 +252,34 @@ const Header: React.FC<HeaderProps> = ({
<User className="w-4 h-4" />
<span className="font-light tracking-wide">Profile</span>
</Link>
<Link
to="/favorites"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
>
<Heart className="w-4 h-4" />
<span className="font-light tracking-wide">Favorites</span>
</Link>
<Link
to="/bookings"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
>
<Calendar className="w-4 h-4" />
<span className="font-light tracking-wide">My Bookings</span>
</Link>
{userInfo?.role !== 'admin' && userInfo?.role !== 'staff' && (
<>
<Link
to="/favorites"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
>
<Heart className="w-4 h-4" />
<span className="font-light tracking-wide">Favorites</span>
</Link>
<Link
to="/bookings"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
>
<Calendar className="w-4 h-4" />
<span className="font-light tracking-wide">My Bookings</span>
</Link>
</>
)}
{userInfo?.role === 'admin' && (
<Link
to="/admin"
@@ -292,6 +296,22 @@ const Header: React.FC<HeaderProps> = ({
<span className="font-light tracking-wide">Admin</span>
</Link>
)}
{userInfo?.role === 'staff' && (
<Link
to="/staff"
onClick={() =>
setIsUserMenuOpen(false)
}
className="flex items-center
space-x-3 px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
>
<User className="w-4 h-4" />
<span className="font-light tracking-wide">Staff Dashboard</span>
</Link>
)}
<div className="border-t border-[#d4af37]/20 my-1"></div>
<button
onClick={handleLogout}
@@ -310,7 +330,7 @@ const Header: React.FC<HeaderProps> = ({
)}
</div>
{/* Mobile Menu Button */}
{}
<button
onClick={toggleMobileMenu}
className="md:hidden p-2 rounded-sm
@@ -325,7 +345,7 @@ const Header: React.FC<HeaderProps> = ({
</button>
</div>
{/* Mobile Menu */}
{}
{isMobileMenuOpen && (
<div className="md:hidden py-4 border-t
border-[#d4af37]/20 mt-4 bg-[#0a0a0a]/50
@@ -436,36 +456,40 @@ const Header: React.FC<HeaderProps> = ({
<User className="w-4 h-4" />
<span>Profile</span>
</Link>
<Link
to="/favorites"
onClick={() =>
setIsMobileMenuOpen(false)
}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
>
<Heart className="w-4 h-4" />
<span>Favorites</span>
</Link>
<Link
to="/bookings"
onClick={() =>
setIsMobileMenuOpen(false)
}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
>
<Calendar className="w-4 h-4" />
<span>My Bookings</span>
</Link>
{userInfo?.role !== 'admin' && userInfo?.role !== 'staff' && (
<>
<Link
to="/favorites"
onClick={() =>
setIsMobileMenuOpen(false)
}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
>
<Heart className="w-4 h-4" />
<span>Favorites</span>
</Link>
<Link
to="/bookings"
onClick={() =>
setIsMobileMenuOpen(false)
}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
>
<Calendar className="w-4 h-4" />
<span>My Bookings</span>
</Link>
</>
)}
{userInfo?.role === 'admin' && (
<Link
to="/admin"
@@ -483,6 +507,23 @@ const Header: React.FC<HeaderProps> = ({
<span>Admin</span>
</Link>
)}
{userInfo?.role === 'staff' && (
<Link
to="/staff"
onClick={() =>
setIsMobileMenuOpen(false)
}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
>
<User className="w-4 h-4" />
<span>Staff Dashboard</span>
</Link>
)}
<button
onClick={handleLogout}
className="w-full flex items-center