221 lines
7.6 KiB
TypeScript
221 lines
7.6 KiB
TypeScript
import React, { useState } from "react"
|
|
import { Link, useLocation } from "@tanstack/react-router"
|
|
import {
|
|
Home,
|
|
Clock,
|
|
Users,
|
|
FolderKanban,
|
|
Calendar,
|
|
ShieldCheck,
|
|
Sun,
|
|
Moon,
|
|
Settings,
|
|
ListTree,
|
|
Menu,
|
|
X,
|
|
Zap,
|
|
CreditCard,
|
|
Languages,
|
|
LogOut,
|
|
FileText,
|
|
LayoutTemplate,
|
|
Bell
|
|
} from "lucide-react"
|
|
import { useQuery } from "@tanstack/react-query"
|
|
import { api } from "../lib/api"
|
|
import { useTheme } from "../lib/theme"
|
|
import Avatar from "./Avatar"
|
|
|
|
function NotificationBell() {
|
|
const { data: notifications, isLoading } = useQuery({
|
|
queryKey: ['notifications', 'unread'],
|
|
queryFn: async () => {
|
|
const res = await api.get('/notifications/unread');
|
|
return res;
|
|
}
|
|
})
|
|
|
|
const unreadCount = notifications?.length || 0
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
className="p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors relative"
|
|
aria-label="Notifications"
|
|
>
|
|
<Bell className="w-5 h-5" />
|
|
{unreadCount > 0 && (
|
|
<span className="absolute top-1.5 right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white ring-2 ring-white dark:ring-slate-900">
|
|
{unreadCount > 9 ? '9+' : unreadCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function Nav() {
|
|
const location = useLocation()
|
|
const { theme, toggleTheme } = useTheme()
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
|
const [lang, setLang] = useState<'en' | 'de'>('en')
|
|
|
|
const { data: user } = useQuery({
|
|
queryKey: ['me'],
|
|
queryFn: api.getMe
|
|
})
|
|
|
|
const { data: settings } = useQuery({
|
|
queryKey: ['settings'],
|
|
queryFn: api.getSettings
|
|
})
|
|
|
|
const navItems = [
|
|
{ label: "Dashboard", to: "/", icon: Home },
|
|
{ label: "Time Entries", to: "/time-entries", icon: Clock },
|
|
{ label: "Calendar", to: "/calendar", icon: Calendar },
|
|
{ label: "Customers", to: "/customers", icon: Users },
|
|
{ label: "Projects", to: "/projects", icon: FolderKanban },
|
|
{ label: "Invoices", to: "/invoices", icon: FileText },
|
|
{ label: "Templates", to: "/templates", icon: LayoutTemplate },
|
|
{ label: "Integrations", to: "/integrations", icon: Zap },
|
|
{ label: "Billing", to: "/billing", icon: CreditCard },
|
|
]
|
|
|
|
const adminItems = [
|
|
{ label: "Admin", to: "/admin", icon: ShieldCheck },
|
|
{ label: "Audit Log", to: "/admin/audit-log", icon: ListTree },
|
|
{ label: "Webhooks", to: "/admin/webhooks", icon: Zap },
|
|
]
|
|
|
|
const allItems = user?.role === 'admin'
|
|
? [...navItems, ...adminItems]
|
|
: navItems
|
|
|
|
const NavLink = ({ item }: { item: typeof navItems[0] }) => {
|
|
const isActive = location.pathname === item.to
|
|
const Icon = item.icon
|
|
|
|
const baseClasses = "flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors"
|
|
const activeClasses = "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
|
|
const inactiveClasses = "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
|
|
|
|
return (
|
|
<Link
|
|
to={item.to}
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
className={`${baseClasses} ${isActive ? activeClasses : inactiveClasses}`}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
{item.label}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<nav
|
|
role="navigation"
|
|
className="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 sticky top-0 z-50"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between h-16">
|
|
<div className="flex items-center gap-8">
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
to="/"
|
|
className="flex items-center gap-2"
|
|
>
|
|
{settings?.logoUrl ? (
|
|
<img
|
|
src={settings.logoUrl}
|
|
alt="Logo"
|
|
className="h-8 w-auto object-contain"
|
|
/>
|
|
) : (
|
|
<span className="text-xl font-bold text-indigo-600 dark:text-indigo-400">
|
|
EmberClone
|
|
</span>
|
|
)}
|
|
</Link>
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label="Open command palette"
|
|
className="hidden md:flex items-center px-1.5 py-0.5 rounded border border-gray-300 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-[10px] font-medium text-gray-400 dark:text-slate-500 cursor-pointer"
|
|
>
|
|
⌘K
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hidden lg:flex items-center gap-1">
|
|
{allItems.map((item) => (
|
|
<NavLink key={item.to} item={item} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 sm:gap-4">
|
|
<div className="hidden sm:flex items-center gap-1">
|
|
<button
|
|
onClick={() => setLang(lang === 'en' ? 'de' : 'en')}
|
|
className="p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
|
|
title="Change Language"
|
|
>
|
|
<Languages className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
|
|
title="Toggle Theme"
|
|
>
|
|
{theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 border-l border-gray-200 dark:border-slate-800 pl-2 sm:pl-4">
|
|
<NotificationBell />
|
|
<Avatar user={user} />
|
|
</div>
|
|
|
|
<button
|
|
className="lg:hidden p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMobileMenuOpen && (
|
|
<div className="lg:hidden bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 px-4 py-4 space-y-1">
|
|
{allItems.map((item) => (
|
|
<NavLink key={item.to} item={item} />
|
|
))}
|
|
<div className="pt-4 mt-4 border-t border-gray-200 dark:border-slate-800 flex flex-col gap-1">
|
|
<Link
|
|
to="/settings"
|
|
className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-50 dark:text-slate-400 dark:hover:bg-slate-800"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
<Settings className="w-4 h-4" />
|
|
Settings
|
|
</Link>
|
|
<button
|
|
className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
|
|
onClick={() => {
|
|
api.logout();
|
|
setIsMobileMenuOpen(false);
|
|
}}
|
|
>
|
|
<LogOut className="w-4 h-4" />
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
)
|
|
} |