feat: implement admin dashboard with authentication, menu management, and responsive UI components

app/setup/page.tsx

@@ -3,6 +3,7 @@
 import React, { useState } from 'react';
 import { GlassCard } from '@/components/GlassCard';
 import { setupAdmin } from '@/app/actions/setup';
+import { Lock } from 'lucide-react';
 
 export default function SetupPage() {
   const [error, setError] = useState<string | null>(null);
@@ -23,42 +24,65 @@ export default function SetupPage() {
   };
 
   return (
-    <div className="container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
-      <GlassCard style={{ width: '100%', maxWidth: '450px' }}>
-        <h1 style={{ marginBottom: '1rem', fontSize: '1.8rem' }}>Configuration Initiale</h1>
-        <p style={{ textAlign: 'center', marginBottom: '2rem', color: 'var(--foreground)', opacity: 0.8 }}>
-          Définissez le mot de passe maître pour accéder au panel d'administration.
-        </p>
+    <div style={{
+      minHeight: '100vh',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '2rem',
+    }}>
+      <div style={{ width: '100%', maxWidth: '420px' }}>
 
-        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
-          <div>
-            <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Mot de passe Admin</label>
-            <input name="password" type="password" required placeholder="••••••••" />
-          </div>
-          <div>
-            <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Confirmer le mot de passe</label>
-            <input name="confirm" type="password" required placeholder="••••••••" />
+        {/* Logo */}
+        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
+          <div style={{
+            width: '64px',
+            height: '64px',
+            borderRadius: '18px',
+            background: 'var(--accent)',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: '1rem',
+            boxShadow: '0 8px 24px var(--accent-glow)',
+          }}>
+            <Lock size={28} color="white" />
           </div>
+          <h1 style={{ fontSize: '1.7rem', fontWeight: 700, letterSpacing: '-0.03em' }}>
+            Configuration
+          </h1>
+          <p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem', marginTop: '0.4rem' }}>
+            Définissez votre mot de passe administrateur
+          </p>
+        </div>
 
-          {error && <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center' }}>{error}</p>}
+        <GlassCard style={{ padding: '2rem' }}>
+          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
+            <div>
+              <label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
+                Mot de passe
+              </label>
+              <input name="password" type="password" required placeholder="••••••••" />
+            </div>
+            <div>
+              <label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
+                Confirmer
+              </label>
+              <input name="confirm" type="password" required placeholder="••••••••" />
+            </div>
 
-          <button 
-            type="submit" 
-            disabled={loading}
-            style={{
-              background: 'var(--accent)',
-              color: 'white',
-              padding: '1rem',
-              borderRadius: '12px',
-              fontWeight: 600,
-              marginTop: '1rem',
-              opacity: loading ? 0.7 : 1
-            }}
-          >
-            {loading ? 'Configuration...' : 'Finaliser la configuration'}
-          </button>
-        </form>
-      </GlassCard>
+            {error && (
+              <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'rgba(255,59,48,0.08)', padding: '0.6rem', borderRadius: '8px' }}>
+                {error}
+              </p>
+            )}
+
+            <button type="submit" disabled={loading} className="btn-primary" style={{ marginTop: '0.4rem', width: '100%' }}>
+              {loading ? 'Configuration...' : 'Créer le compte admin →'}
+            </button>
+          </form>
+        </GlassCard>
+      </div>
     </div>
   );
 }