initial commit
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
419
src/admin/components/Sidebar.tsx
Normal file
419
src/admin/components/Sidebar.tsx
Normal file
@@ -0,0 +1,419 @@
|
||||
import { type ReactNode } from 'react'
|
||||
import { NavLink, useLocation } from 'react-router-dom'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { useTheme } from '../../context/ThemeContext'
|
||||
|
||||
interface MenuItem {
|
||||
path: string
|
||||
label: string
|
||||
end?: boolean
|
||||
permission?: string | string[]
|
||||
matchPrefix?: string
|
||||
matchAlso?: string[]
|
||||
matchExclude?: string[]
|
||||
icon: ReactNode
|
||||
}
|
||||
|
||||
interface MenuSection {
|
||||
label: string
|
||||
items: MenuItem[]
|
||||
}
|
||||
|
||||
const menuSections: MenuSection[] = [
|
||||
{
|
||||
label: 'Přehled',
|
||||
items: [
|
||||
{
|
||||
path: '/',
|
||||
label: 'Přehled',
|
||||
end: true,
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1" />
|
||||
<rect x="14" y="3" width="7" height="7" rx="1" />
|
||||
<rect x="14" y="14" width="7" height="7" rx="1" />
|
||||
<rect x="3" y="14" width="7" height="7" rx="1" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Docházka',
|
||||
items: [
|
||||
{
|
||||
path: '/attendance',
|
||||
label: 'Záznam',
|
||||
permission: 'attendance.record',
|
||||
end: true,
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<polyline points="12 7 12 12 15 15" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/attendance/history',
|
||||
label: 'Moje historie',
|
||||
permission: 'attendance.history',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="12 8 12 12 14 14" />
|
||||
<path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/attendance/requests',
|
||||
label: 'Žádosti',
|
||||
permission: 'attendance.record',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
<line x1="12" y1="18" x2="12" y2="12" />
|
||||
<line x1="9" y1="15" x2="15" y2="15" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/attendance/approval',
|
||||
label: 'Schvalování',
|
||||
permission: 'attendance.approve',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M9 12l2 2 4-4" />
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/attendance/admin',
|
||||
label: 'Správa',
|
||||
permission: 'attendance.admin',
|
||||
matchPrefix: '/attendance/admin',
|
||||
matchAlso: ['/attendance/create', '/attendance/location'],
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="4" y1="21" x2="4" y2="14" /><line x1="4" y1="10" x2="4" y2="3" />
|
||||
<line x1="12" y1="21" x2="12" y2="12" /><line x1="12" y1="8" x2="12" y2="3" />
|
||||
<line x1="20" y1="21" x2="20" y2="16" /><line x1="20" y1="12" x2="20" y2="3" />
|
||||
<line x1="1" y1="14" x2="7" y2="14" />
|
||||
<line x1="9" y1="8" x2="15" y2="8" />
|
||||
<line x1="17" y1="16" x2="23" y2="16" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/attendance/balances',
|
||||
label: 'Správa bilancí',
|
||||
permission: 'attendance.balances',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="20" x2="18" y2="10" />
|
||||
<line x1="12" y1="20" x2="12" y2="4" />
|
||||
<line x1="6" y1="20" x2="6" y2="14" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Kniha jízd',
|
||||
items: [
|
||||
{
|
||||
path: '/trips',
|
||||
label: 'Záznam',
|
||||
permission: 'trips.record',
|
||||
end: true,
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="5" cy="18" r="3" /><circle cx="19" cy="18" r="3" />
|
||||
<path d="M5 18V12L8 5h8l3 7v6" /><path d="M10 18h4" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/trips/history',
|
||||
label: 'Moje historie',
|
||||
permission: 'trips.history',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="12 8 12 12 14 14" />
|
||||
<path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/trips/admin',
|
||||
label: 'Správa',
|
||||
permission: 'trips.admin',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="4" y1="21" x2="4" y2="14" /><line x1="4" y1="10" x2="4" y2="3" />
|
||||
<line x1="12" y1="21" x2="12" y2="12" /><line x1="12" y1="8" x2="12" y2="3" />
|
||||
<line x1="20" y1="21" x2="20" y2="16" /><line x1="20" y1="12" x2="20" y2="3" />
|
||||
<line x1="1" y1="14" x2="7" y2="14" />
|
||||
<line x1="9" y1="8" x2="15" y2="8" />
|
||||
<line x1="17" y1="16" x2="23" y2="16" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/vehicles',
|
||||
label: 'Vozidla',
|
||||
permission: 'trips.vehicles',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="1" y="3" width="15" height="13" rx="2" />
|
||||
<path d="M16 8h4l3 3v5h-7V8z" />
|
||||
<circle cx="5.5" cy="18.5" r="2.5" />
|
||||
<circle cx="18.5" cy="18.5" r="2.5" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Administrativa',
|
||||
items: [
|
||||
{
|
||||
path: '/offers',
|
||||
label: 'Nabídky',
|
||||
permission: 'offers.view',
|
||||
matchPrefix: '/offers',
|
||||
matchExclude: ['/offers/customers', '/offers/templates'],
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/orders',
|
||||
label: 'Objednávky',
|
||||
permission: 'orders.view',
|
||||
matchPrefix: '/orders',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<path d="M16 10a4 4 0 0 1-8 0" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/invoices',
|
||||
label: 'Faktury',
|
||||
permission: 'invoices.view',
|
||||
matchPrefix: '/invoices',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="12" y1="1" x2="12" y2="23" />
|
||||
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
label: 'Projekty',
|
||||
permission: 'projects.view',
|
||||
matchPrefix: '/projects',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" />
|
||||
<line x1="8" y1="21" x2="16" y2="21" />
|
||||
<line x1="12" y1="17" x2="12" y2="21" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/offers/customers',
|
||||
label: 'Zákazníci',
|
||||
permission: 'offers.view',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/company/settings',
|
||||
label: 'Firma',
|
||||
permission: 'offers.settings',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Systém',
|
||||
items: [
|
||||
{
|
||||
path: '/users',
|
||||
label: 'Uživatelé',
|
||||
permission: 'users.view',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
label: 'Nastavení',
|
||||
permission: ['settings.roles', 'settings.security'],
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
path: '/audit-log',
|
||||
label: 'Audit log',
|
||||
permission: 'settings.audit',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
<line x1="16" y1="13" x2="8" y2="13" />
|
||||
<line x1="16" y1="17" x2="8" y2="17" />
|
||||
<polyline points="10 9 9 9 8 9" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
interface SidebarProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onLogout: () => void
|
||||
}
|
||||
|
||||
export default function Sidebar({ isOpen, onClose, onLogout }: SidebarProps) {
|
||||
const { user, hasPermission } = useAuth()
|
||||
const { theme } = useTheme()
|
||||
const location = useLocation()
|
||||
|
||||
const isItemActive = (item: MenuItem) => {
|
||||
if (item.matchPrefix) {
|
||||
let active = location.pathname.startsWith(item.matchPrefix)
|
||||
if (active && item.matchExclude) {
|
||||
active = !item.matchExclude.some(ex => location.pathname.startsWith(ex))
|
||||
}
|
||||
return active
|
||||
}
|
||||
if (item.end) {
|
||||
return location.pathname === item.path
|
||||
}
|
||||
return location.pathname.startsWith(item.path)
|
||||
}
|
||||
|
||||
const hasItemPermission = (item: MenuItem) => {
|
||||
if (!item.permission) {
|
||||
return true
|
||||
}
|
||||
if (Array.isArray(item.permission)) {
|
||||
return item.permission.some(p => hasPermission(p))
|
||||
}
|
||||
return hasPermission(item.permission)
|
||||
}
|
||||
|
||||
const visibleSections = menuSections
|
||||
.map(section => ({
|
||||
...section,
|
||||
items: section.items.filter(hasItemPermission)
|
||||
}))
|
||||
.filter(section => section.items.length > 0)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`admin-sidebar-overlay${isOpen ? ' open' : ''}`}
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
<aside className={`admin-sidebar${isOpen ? ' open' : ''}`}>
|
||||
<div className="admin-sidebar-header">
|
||||
<img
|
||||
src={theme === 'dark' ? '/images/logo-dark.png' : '/images/logo-light.png'}
|
||||
alt="Logo"
|
||||
className="admin-sidebar-logo"
|
||||
/>
|
||||
<button onClick={onClose} className="admin-sidebar-close" aria-label="Zavřít menu">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="admin-sidebar-nav">
|
||||
{visibleSections.map((section) => (
|
||||
<div key={section.label} className="admin-nav-section">
|
||||
<div className="admin-nav-label">{section.label}</div>
|
||||
{section.items.map((item) => (
|
||||
<NavLink
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
end={item.end}
|
||||
onClick={onClose}
|
||||
className={() => {
|
||||
let active = isItemActive(item)
|
||||
if (!active && item.matchAlso) {
|
||||
active = item.matchAlso.some(p => location.pathname.startsWith(p))
|
||||
}
|
||||
return `admin-nav-item${active ? ' active' : ''}`
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
{item.label}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="admin-sidebar-footer">
|
||||
<div className="admin-user-chip">
|
||||
<div className="admin-user-avatar">
|
||||
{user?.fullName?.charAt(0) || user?.username?.charAt(0) || 'U'}
|
||||
</div>
|
||||
<div className="admin-user-details">
|
||||
<div className="admin-user-name">
|
||||
{user?.fullName || user?.username}
|
||||
</div>
|
||||
<div className="admin-user-role">
|
||||
{user?.roleDisplay}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={onLogout} className="admin-logout-btn" aria-label="Odhlásit se">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||||
<polyline points="16 17 21 12 16 7" />
|
||||
<line x1="21" y1="12" x2="9" y2="12" />
|
||||
</svg>
|
||||
Odhlásit se
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user