feat: Add frontend pages for Hardware Status, Process Control, Recipe Management, System Settings, and User Management

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
2025-08-06 22:36:59 +02:00
parent 196b6fff06
commit c047a1e4a2
34 changed files with 3167 additions and 23 deletions
--- a/python_rewrite/frontend/src/components/layout/Sidebar.tsx
+++ b/python_rewrite/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,106 @@
+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