feat(tenant-admin): refresh event management experience

resources/js/admin/pages/SettingsPage.tsx

@@ -1,35 +1,79 @@
 import React from 'react';
+import { LogOut, Palette } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
 import AppearanceToggleDropdown from '@/components/appearance-dropdown';
 import { Button } from '@/components/ui/button';
-import { useNavigate } from 'react-router-dom';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+import { AdminLayout } from '../components/AdminLayout';
 import { useAuth } from '../auth/context';
 
 export default function SettingsPage() {
-  const nav = useNavigate();
+  const navigate = useNavigate();
   const { user, logout } = useAuth();
 
   function handleLogout() {
     logout({ redirect: '/admin/login' });
   }
 
+  const actions = (
+    <Button
+      variant="outline"
+      onClick={() => navigate('/admin/events')}
+      className="border-pink-200 text-pink-600 hover:bg-pink-50"
+    >
+      Zurueck zur Uebersicht
+    </Button>
+  );
+
   return (
-    <div className="mx-auto max-w-sm space-y-4 p-6">
-      <div>
-        <h1 className="text-lg font-semibold">Einstellungen</h1>
-        {user && (
-          <p className="mt-1 text-sm text-muted-foreground">
-            Angemeldet als {user.name ?? user.email ?? 'Tenant Admin'} - Tenant #{user.tenant_id}
-          </p>
-        )}
-      </div>
-      <div>
-        <div className="text-sm font-medium">Darstellung</div>
-        <AppearanceToggleDropdown />
-      </div>
-      <div className="flex gap-2">
-        <Button variant="destructive" onClick={handleLogout}>Abmelden</Button>
-        <Button variant="secondary" onClick={() => nav(-1)}>Zurück</Button>
-      </div>
-    </div>
+    <AdminLayout
+      title="Einstellungen"
+      subtitle="Passe das Erscheinungsbild deines Dashboards an und verwalte deine Session."
+      actions={actions}
+    >
+      <Card className="max-w-2xl border-0 bg-white/85 shadow-xl shadow-amber-100/60">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+            <Palette className="h-5 w-5 text-amber-500" /> Darstellung & Account
+          </CardTitle>
+          <CardDescription className="text-sm text-slate-600">
+            Gestalte den Admin-Bereich so farbenfroh wie dein Gaesteportal.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <section className="space-y-2">
+            <h2 className="text-sm font-semibold text-slate-800">Darstellung</h2>
+            <p className="text-sm text-slate-600">
+              Wechsel zwischen Hell- und Dunkelmodus oder uebernimm automatisch die Systemeinstellung.
+            </p>
+            <AppearanceToggleDropdown />
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-sm font-semibold text-slate-800">Angemeldeter Account</h2>
+            <p className="text-sm text-slate-600">
+              {user ? (
+                <>
+                  Eingeloggt als <span className="font-medium text-slate-900">{user.name ?? user.email ?? 'Tenant Admin'}</span>
+                  {user.tenant_id && <> - Tenant #{user.tenant_id}</>}
+                </>
+              ) : (
+                'Aktuell kein Benutzer geladen.'
+              )}
+            </p>
+            <div className="flex flex-wrap gap-3 pt-2">
+              <Button variant="destructive" onClick={handleLogout} className="flex items-center gap-2">
+                <LogOut className="h-4 w-4" /> Abmelden
+              </Button>
+              <Button variant="ghost" onClick={() => navigate(-1)}>
+                Abbrechen
+              </Button>
+            </div>
+          </section>
+        </CardContent>
+      </Card>
+    </AdminLayout>
   );
 }