start working on the frontend side

frontend/src/components/Layout.tsx

@@ -0,0 +1,101 @@
+import { Outlet, Link, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '@/store/auth'
+import { LogOut, Menu } from 'lucide-react'
+import { useState } from 'react'
+
+export default function Layout() {
+  const { user, clearAuth } = useAuthStore()
+  const navigate = useNavigate()
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+
+  const handleLogout = () => {
+    clearAuth()
+    navigate('/login')
+  }
+
+  const navigation = [
+    { name: 'Dashboard', href: '/', icon: '📊' },
+    { name: 'Storage', href: '/storage', icon: '💾' },
+    { name: 'Tape Libraries', href: '/tape', icon: '📼' },
+    { name: 'iSCSI Targets', href: '/iscsi', icon: '🔌' },
+    { name: 'Tasks', href: '/tasks', icon: '⚙️' },
+    { name: 'Alerts', href: '/alerts', icon: '🔔' },
+    { name: 'System', href: '/system', icon: '🖥️' },
+  ]
+
+  if (user?.roles.includes('admin')) {
+    navigation.push({ name: 'IAM', href: '/iam', icon: '👥' })
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Sidebar */}
+      <div
+        className={`fixed inset-y-0 left-0 z-50 w-64 bg-gray-900 text-white transition-transform duration-300 ${
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        <div className="flex flex-col h-full">
+          <div className="flex items-center justify-between p-4 border-b border-gray-800">
+            <h1 className="text-xl font-bold">Calypso</h1>
+            <button
+              onClick={() => setSidebarOpen(false)}
+              className="lg:hidden text-gray-400 hover:text-white"
+            >
+              <Menu className="h-6 w-6" />
+            </button>
+          </div>
+          <nav className="flex-1 p-4 space-y-2">
+            {navigation.map((item) => (
+              <Link
+                key={item.name}
+                to={item.href}
+                className="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors"
+              >
+                <span>{item.icon}</span>
+                <span>{item.name}</span>
+              </Link>
+            ))}
+          </nav>
+          <div className="p-4 border-t border-gray-800">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <p className="text-sm font-medium">{user?.username}</p>
+                <p className="text-xs text-gray-400">{user?.roles.join(', ')}</p>
+              </div>
+            </div>
+            <button
+              onClick={handleLogout}
+              className="w-full flex items-center space-x-2 px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors"
+            >
+              <LogOut className="h-4 w-4" />
+              <span>Logout</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className={`transition-all duration-300 ${sidebarOpen ? 'lg:ml-64' : 'ml-0'}`}>
+        {/* Top bar */}
+        <div className="bg-white shadow-sm border-b border-gray-200">
+          <div className="flex items-center justify-between px-6 py-4">
+            <button
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className="lg:hidden text-gray-600 hover:text-gray-900"
+            >
+              <Menu className="h-6 w-6" />
+            </button>
+            <div className="flex-1" />
+          </div>
+        </div>
+
+        {/* Page content */}
+        <main className="p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}
+