feat: add user profile and admin management features

vps-monitor/frontend/src/App.jsx

@@ -7,6 +7,8 @@ import AddVpsModal   from './components/AddVpsModal'
 import EditVpsModal  from './components/EditVpsModal'
 import StatsModal    from './components/StatsModal'
 import LoginPage     from './components/LoginPage'
+import ProfilePage   from './components/ProfilePage'
+import AdminPage     from './components/AdminPage'
 
 const INTERVAL_OPTIONS = [
   { label: '10 s',  value: 10_000 },
@@ -20,6 +22,8 @@ const INTERVAL_OPTIONS = [
 export default function App() {
   const [token,       setTokenState]  = useState(() => getToken())
   const [username,    setUsername]    = useState(null)
+  const [role,        setRole]        = useState(null)
+  const [page,        setPage]        = useState('main') // 'main' | 'profile' | 'admin'
   const [isFirstUser, setIsFirstUser] = useState(false)
   const [authChecked, setAuthChecked] = useState(false)
 
@@ -63,6 +67,8 @@ export default function App() {
       setToken(null)
       setTokenState(null)
       setUsername(null)
+      setRole(null)
+      setPage('main')
     }
     window.addEventListener('auth:expired', onExpired)
     return () => window.removeEventListener('auth:expired', onExpired)
@@ -71,12 +77,13 @@ export default function App() {
   const handleAuthenticated = (accessToken, role, user) => {
     setToken(accessToken)
     setTokenState(accessToken)
-    // Récupère le username depuis le payload JWT (base64)
     try {
       const payload = JSON.parse(atob(accessToken.split('.')[1]))
       setUsername(payload.sub)
+      setRole(payload.role ?? role ?? 'user')
     } catch {
       setUsername(user ?? 'user')
+      setRole(role ?? 'user')
     }
   }
 
@@ -84,6 +91,8 @@ export default function App() {
     setToken(null)
     setTokenState(null)
     setUsername(null)
+    setRole(null)
+    setPage('main')
     setVpsList([])
     setLoading(true)
   }
@@ -111,12 +120,13 @@ export default function App() {
     return () => clearInterval(id)
   }, [refresh, token, refreshInterval])
 
-  // Extrait le username du token stocké au rechargement de page
+  // Extrait le username et le rôle du token stocké au rechargement de page
   useEffect(() => {
     if (token && !username) {
       try {
         const payload = JSON.parse(atob(token.split('.')[1]))
         setUsername(payload.sub)
+        setRole(payload.role ?? 'user')
       } catch { /* ignore */ }
     }
   }, [token, username])
@@ -191,6 +201,15 @@ export default function App() {
   const totalContainers = vpsList.reduce((acc, v) => acc + v.containers.length, 0)
   const totalRunning    = vpsList.reduce((acc, v) => acc + v.containers.filter(c => c.status === 'running').length, 0)
 
+  // ─── Pages profil / admin ───────────────────────────────────────────────
+  if (page === 'profile') {
+    return <ProfilePage username={username} onBack={() => setPage('main')} />
+  }
+
+  if (page === 'admin') {
+    return <AdminPage onBack={() => setPage('main')} />
+  }
+
   return (
     <div className="min-h-screen bg-gray-950 text-gray-100">
       <Header
@@ -199,7 +218,10 @@ export default function App() {
         onAddVps={() => setShowAddVps(true)}
         refreshing={refreshing}
         username={username}
+        role={role}
         onLogout={handleLogout}
+        onProfile={() => setPage('profile')}
+        onAdmin={() => setPage('admin')}
         refreshInterval={refreshInterval}
         onIntervalChange={handleIntervalChange}
         intervalOptions={INTERVAL_OPTIONS}