Redesign admin UI as transit operations command center with sidebar navigation, design system, and dashboard

admin_ui/src/components/Login.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { authClient } from '../api'
+import { IconBusFront } from './icons'
 
 export default function Login({ onLogin }) {
   const [userCode, setUserCode] = useState('')
@@ -14,29 +15,51 @@ export default function Login({ onLogin }) {
     try {
       const res = await authClient.post('/login', { userCode, password })
       const token = res.data.token
-      // fetch /me to get payload
       const me = await authClient.get('/me', { headers: { Authorization: `Bearer ${token}` } })
       onLogin(token, me.data.user)
     } catch (err) {
       setError(err.response?.data?.error || 'login_failed')
-    } finally { setLoading(false) }
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
-    <div className="login">
-      <h2>Admin Login</h2>
-      <form onSubmit={submit}>
-        <label>
-          User Code
-          <input value={userCode} onChange={e => setUserCode(e.target.value)} />
-        </label>
-        <label>
-          Password
-          <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
-        </label>
-        <button type="submit" disabled={loading}>{loading ? 'Please wait...' : 'Login'}</button>
-        {error && <div className="error">{error}</div>}
-      </form>
+    <div className="auth-page">
+      <div className="auth-card">
+        <div className="auth-brand">
+          <div className="brand-mark"><IconBusFront size={26} /></div>
+          <div>
+            <h1>Transit Beheer</h1>
+            <p>Operationeel dashboard voor netwerkbeheer</p>
+          </div>
+        </div>
+        <form onSubmit={submit}>
+          <label>
+            Gebruikercode
+            <input
+              value={userCode}
+              onChange={(e) => setUserCode(e.target.value)}
+              placeholder="Bijv. 1234"
+              autoFocus
+            />
+          </label>
+          <label>
+            Wachtwoord
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+            />
+          </label>
+          {error && <div className="error">{error}</div>}
+          <button type="submit" className="auth-submit" disabled={loading}>
+            {loading ? 'Bezig met inloggen…' : 'Inloggen'}
+          </button>
+        </form>
+        <div className="auth-footer">Alleen beheerders hebben toegang</div>
+      </div>
     </div>
   )
-}
+}