Sami Alzein
c047a1e4a2
feat: Implement API service for handling system, recipe, process, hardware, safety, and user management endpoints feat: Create Zustand store for managing system state and connection status feat: Define TypeScript types for system, recipe, process, hardware, safety, user, and API responses chore: Configure Vite for React development with TypeScript and Tailwind CSS feat: Implement CSV migration tools for importing legacy data into the new system
107 lines
2.7 KiB
TypeScript
107 lines
2.7 KiB
TypeScript
import React from 'react'
|
|
import { Link, useLocation } from 'react-router-dom'
|
|
import {
|
|
LayoutDashboard,
|
|
Play,
|
|
BookOpen,
|
|
HardDrive,
|
|
Settings,
|
|
Users,
|
|
} from 'lucide-react'
|
|
|
|
const Sidebar: React.FC = () => {
|
|
const location = useLocation()
|
|
|
|
const navigationItems = [
|
|
{
|
|
name: 'Dashboard',
|
|
href: '/dashboard',
|
|
icon: LayoutDashboard,
|
|
description: 'System overview'
|
|
},
|
|
{
|
|
name: 'Process Control',
|
|
href: '/process',
|
|
icon: Play,
|
|
description: 'Start and monitor tempering'
|
|
},
|
|
{
|
|
name: 'Recipes',
|
|
href: '/recipes',
|
|
icon: BookOpen,
|
|
description: 'Manage tempering recipes'
|
|
},
|
|
{
|
|
name: 'Hardware',
|
|
href: '/hardware',
|
|
icon: HardDrive,
|
|
description: 'Monitor equipment status'
|
|
},
|
|
{
|
|
name: 'Settings',
|
|
href: '/settings',
|
|
icon: Settings,
|
|
description: 'System configuration'
|
|
},
|
|
{
|
|
name: 'Users',
|
|
href: '/users',
|
|
icon: Users,
|
|
description: 'User management'
|
|
},
|
|
]
|
|
|
|
const isActive = (href: string) => location.pathname === href
|
|
|
|
return (
|
|
<nav className="bg-white shadow-sm border-r border-gray-200 w-64 flex-shrink-0">
|
|
<div className="p-4">
|
|
<h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-4">
|
|
Navigation
|
|
</h2>
|
|
|
|
<ul className="space-y-2">
|
|
{navigationItems.map((item) => {
|
|
const Icon = item.icon
|
|
const active = isActive(item.href)
|
|
|
|
return (
|
|
<li key={item.name}>
|
|
<Link
|
|
to={item.href}
|
|
className={`
|
|
flex items-center p-3 rounded-lg text-sm font-medium touch-optimized
|
|
transition-colors duration-150
|
|
${active
|
|
? 'bg-primary-50 text-primary-700 border border-primary-200'
|
|
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
|
|
}
|
|
`}
|
|
>
|
|
<Icon
|
|
className={`
|
|
w-5 h-5 mr-3 flex-shrink-0
|
|
${active ? 'text-primary-600' : 'text-gray-400'}
|
|
`}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span>{item.name}</span>
|
|
<span className={`
|
|
text-xs mt-0.5
|
|
${active ? 'text-primary-600' : 'text-gray-500'}
|
|
`}>
|
|
{item.description}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Sidebar
|