80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
|
|
import { AdminLayout } from '../components/AdminLayout';
|
|
import { useAuth } from '../auth/context';
|
|
|
|
export default function SettingsPage() {
|
|
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 (
|
|
<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>
|
|
);
|
|
}
|