Fix jwt-token

management/src/components/Layout.jsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { Outlet, NavLink, useLocation } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+import { 
+  HomeIcon, 
+  BuildingOfficeIcon, 
+  UsersIcon, 
+  CogIcon,
+  ArrowRightOnRectangleIcon 
+} from '@heroicons/react/24/outline'
+
+const Layout = () => {
+  const { user, logout } = useAuth()
+  const location = useLocation()
+
+  const navigation = [
+    { name: 'Dashboard', href: '/dashboard', icon: HomeIcon },
+    { name: 'Tenants', href: '/tenants', icon: BuildingOfficeIcon },
+    { name: 'Users', href: '/users', icon: UsersIcon },
+    { name: 'System', href: '/system', icon: CogIcon },
+  ]
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Sidebar */}
+      <div className="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg">
+        <div className="flex h-16 items-center justify-center border-b border-gray-200">
+          <h1 className="text-xl font-bold text-gray-900">UAMILS Management</h1>
+        </div>
+        
+        <nav className="mt-8 px-4 space-y-2">
+          {navigation.map((item) => {
+            const isActive = location.pathname === item.href
+            return (
+              <NavLink
+                key={item.name}
+                to={item.href}
+                className={`group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${
+                  isActive
+                    ? 'bg-blue-50 text-blue-700 border-r-2 border-blue-700'
+                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+                }`}
+              >
+                <item.icon
+                  className={`mr-3 h-5 w-5 ${
+                    isActive ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500'
+                  }`}
+                />
+                {item.name}
+              </NavLink>
+            )
+          })}
+        </nav>
+
+        {/* User info and logout */}
+        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <div className="h-8 w-8 bg-blue-600 rounded-full flex items-center justify-center">
+                <span className="text-sm font-medium text-white">
+                  {user?.username?.charAt(0).toUpperCase()}
+                </span>
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-gray-900 truncate">
+                  {user?.username}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {user?.role}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={logout}
+              className="p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100"
+              title="Logout"
+            >
+              <ArrowRightOnRectangleIcon className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="pl-64">
+        <div className="py-6">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Layout

management/src/components/ProtectedRoute.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+
+export const ProtectedRoute = ({ children }) => {
+  const { isAuthenticated, loading, isAdmin } = useAuth()
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated || !isAdmin) {
+    return <Navigate to="/login" replace />
+  }
+
+  return children
+}