import { useState } from 'react'
import type { User } from '../lib/supabase'
interface SidebarProps {
user: User
currentView: string
onViewChange: (view: string) => void
}
interface MenuItem {
id: string
name: string
icon: React.ReactElement
requiredRoles?: string[]
}
export function Sidebar({ user, currentView, onViewChange }: SidebarProps) {
const [isCollapsed, setIsCollapsed] = useState(false)
const menuItems: MenuItem[] = [
{
id: 'dashboard',
name: 'Dashboard',
icon: (
),
},
{
id: 'user-management',
name: 'User Management',
icon: (
),
requiredRoles: ['admin']
},
{
id: 'experiments',
name: 'Experiments',
icon: (
),
requiredRoles: ['admin', 'conductor']
},
{
id: 'analytics',
name: 'Analytics',
icon: (
),
requiredRoles: ['admin', 'conductor', 'analyst']
},
{
id: 'data-entry',
name: 'Data Entry',
icon: (
),
requiredRoles: ['admin', 'conductor', 'data recorder']
},
{
id: 'vision-system',
name: 'Vision System',
icon: (
),
}
]
const hasAccess = (item: MenuItem): boolean => {
if (!item.requiredRoles) return true
return item.requiredRoles.some(role => user.roles.includes(role as any))
}
return (
{/* Header */}
{!isCollapsed && (
Pecan Experiments
Admin Dashboard
)}
{/* Navigation Menu */}