import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Link, useLocation } from 'react-router-dom'; import { LayoutDashboard, CalendarDays, Settings, Users, CreditCard, MessageSquare, LogOut, ClipboardList, Briefcase, Ticket, HelpCircle, Code, ChevronDown, BookOpen, FileQuestion, LifeBuoy, Zap, Plug, Package, Clock, Store, Mail } from 'lucide-react'; import { Business, User } from '../types'; import { useLogout } from '../hooks/useAuth'; import SmoothScheduleLogo from './SmoothScheduleLogo'; interface SidebarProps { business: Business; user: User; isCollapsed: boolean; toggleCollapse: () => void; } const Sidebar: React.FC = ({ business, user, isCollapsed, toggleCollapse }) => { const { t } = useTranslation(); const location = useLocation(); const { role } = user; const logoutMutation = useLogout(); const [isHelpOpen, setIsHelpOpen] = useState(location.pathname.startsWith('/help') || location.pathname === '/support'); const [isPluginsOpen, setIsPluginsOpen] = useState(location.pathname.startsWith('/plugins') || location.pathname === '/plugins/marketplace'); const getNavClass = (path: string, exact: boolean = false, disabled: boolean = false) => { const isActive = exact ? location.pathname === path : location.pathname.startsWith(path); const baseClasses = `flex items-center gap-3 py-3 text-base font-medium rounded-lg transition-colors`; const collapsedClasses = isCollapsed ? 'px-3 justify-center' : 'px-4'; const activeClasses = 'bg-white/10 text-white'; const inactiveClasses = 'text-white/70 hover:text-white hover:bg-white/5'; const disabledClasses = 'text-white/30 cursor-not-allowed'; if (disabled) { return `${baseClasses} ${collapsedClasses} ${disabledClasses}`; } return `${baseClasses} ${collapsedClasses} ${isActive ? activeClasses : inactiveClasses}`; }; const canViewAdminPages = role === 'owner' || role === 'manager'; const canViewManagementPages = role === 'owner' || role === 'manager' || role === 'staff'; const canViewSettings = role === 'owner'; // Tickets: owners/managers always, staff only with permission const canViewTickets = role === 'owner' || role === 'manager' || (role === 'staff' && user.can_access_tickets); const getDashboardLink = () => { if (role === 'resource') return '/'; return '/'; }; const handleSignOut = () => { logoutMutation.mutate(); }; return (
{!isCollapsed && (
{t('common.poweredBy')} Smooth Schedule
)}
); }; export default Sidebar;