345 lines
11 KiB
TypeScript
345 lines
11 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
|
import {
|
|
LayoutDashboard,
|
|
FileText,
|
|
BarChart3,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
LogIn,
|
|
LogOut,
|
|
Menu,
|
|
X,
|
|
CreditCard,
|
|
MessageCircle,
|
|
Award,
|
|
Users,
|
|
Wrench,
|
|
Bell,
|
|
Mail,
|
|
AlertTriangle,
|
|
TrendingUp
|
|
} from 'lucide-react';
|
|
import useAuthStore from '../../store/useAuthStore';
|
|
import { useChatNotifications } from '../../features/notifications/contexts/ChatNotificationContext';
|
|
import { useResponsive } from '../../hooks';
|
|
import { logger } from '../utils/logger';
|
|
|
|
interface SidebarStaffProps {
|
|
isCollapsed?: boolean;
|
|
onToggle?: () => void;
|
|
}
|
|
|
|
const SidebarStaff: React.FC<SidebarStaffProps> = ({
|
|
isCollapsed: controlledCollapsed,
|
|
onToggle
|
|
}) => {
|
|
const [internalCollapsed, setInternalCollapsed] = useState(false);
|
|
const [isMobileOpen, setIsMobileOpen] = useState(false);
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { logout } = useAuthStore();
|
|
const { unreadCount } = useChatNotifications();
|
|
const { isMobile, isDesktop } = useResponsive();
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await logout();
|
|
// Logout function will redirect to homepage
|
|
if (isMobile) {
|
|
setIsMobileOpen(false);
|
|
}
|
|
} catch (error) {
|
|
logger.error('Logout error', error);
|
|
}
|
|
};
|
|
|
|
// Close mobile menu when screen becomes desktop
|
|
useEffect(() => {
|
|
if (isDesktop) {
|
|
setIsMobileOpen(false);
|
|
}
|
|
}, [isDesktop]);
|
|
|
|
const isCollapsed =
|
|
controlledCollapsed !== undefined
|
|
? controlledCollapsed
|
|
: internalCollapsed;
|
|
|
|
const handleToggle = () => {
|
|
if (onToggle) {
|
|
onToggle();
|
|
} else {
|
|
setInternalCollapsed(!internalCollapsed);
|
|
}
|
|
};
|
|
|
|
const handleMobileToggle = () => {
|
|
setIsMobileOpen(!isMobileOpen);
|
|
};
|
|
|
|
const handleLinkClick = () => {
|
|
if (isMobile) {
|
|
setIsMobileOpen(false);
|
|
}
|
|
};
|
|
|
|
|
|
const menuItems = [
|
|
{
|
|
path: '/staff/dashboard',
|
|
icon: LayoutDashboard,
|
|
label: 'Dashboard'
|
|
},
|
|
{
|
|
path: '/staff/bookings',
|
|
icon: FileText,
|
|
label: 'Bookings'
|
|
},
|
|
{
|
|
path: '/staff/reception',
|
|
icon: LogIn,
|
|
label: 'Reception'
|
|
},
|
|
{
|
|
path: '/staff/payments',
|
|
icon: CreditCard,
|
|
label: 'Payments'
|
|
},
|
|
{
|
|
path: '/staff/loyalty',
|
|
icon: Award,
|
|
label: 'Loyalty Program'
|
|
},
|
|
{
|
|
path: '/staff/guest-profiles',
|
|
icon: Users,
|
|
label: 'Guest Profiles'
|
|
},
|
|
{
|
|
path: '/staff/guest-requests',
|
|
icon: Bell,
|
|
label: 'Guest Requests'
|
|
},
|
|
{
|
|
path: '/staff/guest-communication',
|
|
icon: Mail,
|
|
label: 'Communication'
|
|
},
|
|
{
|
|
path: '/staff/incidents-complaints',
|
|
icon: AlertTriangle,
|
|
label: 'Incidents & Complaints'
|
|
},
|
|
{
|
|
path: '/staff/upsells',
|
|
icon: TrendingUp,
|
|
label: 'Upsell Management'
|
|
},
|
|
{
|
|
path: '/staff/advanced-rooms',
|
|
icon: Wrench,
|
|
label: 'Room Management'
|
|
},
|
|
{
|
|
path: '/staff/chats',
|
|
icon: MessageCircle,
|
|
label: 'Chat Support'
|
|
},
|
|
{
|
|
path: '/staff/reports',
|
|
icon: BarChart3,
|
|
label: 'Reports'
|
|
},
|
|
{
|
|
path: '/staff/profile',
|
|
icon: Users,
|
|
label: 'My Profile'
|
|
},
|
|
];
|
|
|
|
const isActive = (path: string) => {
|
|
|
|
if (location.pathname === path) return true;
|
|
|
|
return location.pathname.startsWith(`${path}/`);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{}
|
|
{isMobile && (
|
|
<button
|
|
onClick={handleMobileToggle}
|
|
className="fixed top-4 left-4 z-50 lg:hidden p-3 bg-gradient-to-r from-blue-900 to-blue-800 text-white rounded-xl shadow-2xl border border-blue-700 hover:from-blue-800 hover:to-blue-700 transition-all duration-200"
|
|
aria-label="Toggle menu"
|
|
>
|
|
{isMobileOpen ? (
|
|
<X className="w-6 h-6" />
|
|
) : (
|
|
<Menu className="w-6 h-6" />
|
|
)}
|
|
</button>
|
|
)}
|
|
|
|
{}
|
|
{isMobile && isMobileOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden"
|
|
onClick={handleMobileToggle}
|
|
/>
|
|
)}
|
|
|
|
{}
|
|
<aside
|
|
className={`
|
|
fixed lg:static inset-y-0 left-0 z-40
|
|
bg-gradient-to-b from-blue-900 via-blue-800 to-blue-900
|
|
text-white shadow-2xl
|
|
transition-all duration-300 ease-in-out flex flex-col
|
|
${isMobile
|
|
? (isMobileOpen ? 'translate-x-0' : '-translate-x-full')
|
|
: ''
|
|
}
|
|
${!isMobile && (isCollapsed ? 'w-20' : 'w-72')}
|
|
${isMobile ? 'w-72' : ''}
|
|
border-r border-blue-700/50
|
|
`}
|
|
>
|
|
{}
|
|
<div className="p-6 border-b border-blue-700/50 flex items-center justify-between bg-gradient-to-r from-blue-800/50 to-blue-900/50 backdrop-blur-sm">
|
|
{!isCollapsed && (
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-1 w-12 bg-gradient-to-r from-blue-400 to-blue-600 rounded-full"></div>
|
|
<h2 className="text-xl font-bold bg-gradient-to-r from-blue-100 to-blue-200 bg-clip-text text-transparent">
|
|
Staff Panel
|
|
</h2>
|
|
</div>
|
|
)}
|
|
{isCollapsed && !isMobile && (
|
|
<div className="w-full flex justify-center">
|
|
<div className="h-8 w-8 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<span className="text-white font-bold text-sm">S</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{!isMobile && (
|
|
<button
|
|
onClick={handleToggle}
|
|
className="p-2.5 rounded-xl bg-blue-800/50 hover:bg-blue-700/50 border border-blue-700/50 hover:border-blue-500/50 transition-all duration-200 ml-auto shadow-lg hover:shadow-xl"
|
|
aria-label="Toggle sidebar"
|
|
>
|
|
{isCollapsed ? (
|
|
<ChevronRight className="w-5 h-5 text-blue-200" />
|
|
) : (
|
|
<ChevronLeft className="w-5 h-5 text-blue-200" />
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
<nav className="flex-1 overflow-y-auto py-4 px-3 custom-scrollbar">
|
|
<ul className="space-y-2">
|
|
{menuItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = isActive(item.path);
|
|
|
|
return (
|
|
<li key={item.path}>
|
|
<Link
|
|
to={item.path}
|
|
onClick={handleLinkClick}
|
|
className={`
|
|
flex items-center
|
|
space-x-3 px-4 py-3.5 rounded-xl
|
|
transition-all duration-200 group relative
|
|
${active
|
|
? 'bg-gradient-to-r from-blue-500/20 to-blue-600/20 text-blue-100 shadow-lg border border-blue-500/30'
|
|
: 'text-blue-300 hover:bg-blue-800/50 hover:text-blue-100 border border-transparent hover:border-blue-700/50'
|
|
}
|
|
${isCollapsed && !isMobile ? 'justify-center' : ''}
|
|
`}
|
|
title={isCollapsed && !isMobile ? item.label : undefined}
|
|
>
|
|
{active && (
|
|
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-to-b from-blue-400 to-blue-600 rounded-r-full"></div>
|
|
)}
|
|
<Icon className={`
|
|
flex-shrink-0 transition-transform duration-200
|
|
${active ? 'text-blue-400' : 'text-blue-400 group-hover:text-blue-300'}
|
|
${isCollapsed && !isMobile ? 'w-6 h-6' : 'w-5 h-5'}
|
|
`} />
|
|
{(!isCollapsed || isMobile) && (
|
|
<span className={`
|
|
font-semibold transition-all duration-200
|
|
${active ? 'text-blue-100' : 'group-hover:text-blue-100'}
|
|
`}>
|
|
{item.label}
|
|
</span>
|
|
)}
|
|
{item.path === '/staff/chats' && unreadCount > 0 && (
|
|
<span className="ml-auto bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
|
|
{unreadCount > 9 ? '9+' : unreadCount}
|
|
</span>
|
|
)}
|
|
{active && !isCollapsed && item.path !== '/staff/chats' && (
|
|
<div className="ml-auto w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
|
|
)}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
|
|
{}
|
|
<div className="p-4 border-t border-blue-700/50">
|
|
<button
|
|
onClick={handleLogout}
|
|
className={`
|
|
w-full flex items-center
|
|
space-x-3 px-4 py-3.5 rounded-xl
|
|
transition-all duration-200 group relative
|
|
text-blue-300 hover:bg-gradient-to-r hover:from-rose-600/20 hover:to-rose-700/20
|
|
hover:text-rose-100 border border-transparent hover:border-rose-500/30
|
|
${isCollapsed && !isMobile ? 'justify-center' : ''}
|
|
`}
|
|
title={isCollapsed && !isMobile ? 'Logout' : undefined}
|
|
>
|
|
<LogOut className={`
|
|
flex-shrink-0 transition-transform duration-200
|
|
text-blue-400 group-hover:text-rose-400 group-hover:rotate-12
|
|
${isCollapsed && !isMobile ? 'w-6 h-6' : 'w-5 h-5'}
|
|
`} />
|
|
{(!isCollapsed || isMobile) && (
|
|
<span className="font-semibold transition-all duration-200 group-hover:text-rose-100">
|
|
Logout
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{}
|
|
<div className="p-4 border-t border-blue-700/50 bg-gradient-to-r from-blue-800/50 to-blue-900/50 backdrop-blur-sm">
|
|
{(!isCollapsed || isMobile) ? (
|
|
<div className="text-xs text-blue-400 text-center space-y-1">
|
|
<p className="font-semibold text-blue-200/80">Staff Dashboard</p>
|
|
<p className="text-blue-500">
|
|
© {new Date().getFullYear()} Luxury Hotel
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex justify-center">
|
|
<div className="w-3 h-3 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full shadow-lg animate-pulse"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SidebarStaff;
|
|
|