rework of the event admin UI
This commit is contained in:
Codex Agent
@@ -1,11 +1,13 @@
|
||||
import React from 'react';
|
||||
import { LogOut, UserCog } from 'lucide-react';
|
||||
import { AlertTriangle, CheckCircle2, Loader2, Lock, LogOut, Mail, Moon, ShieldCheck, SunMedium, UserCog } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import AppearanceToggleDropdown from '@/components/appearance-dropdown';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
import { AdminLayout } from '../components/AdminLayout';
|
||||
import {
|
||||
@@ -120,102 +122,143 @@ export default function SettingsPage() {
|
||||
aside={heroAside}
|
||||
/>
|
||||
|
||||
<SectionCard className="mt-6 max-w-2xl space-y-6">
|
||||
<SectionHeader
|
||||
eyebrow={t('settings.appearance.badge', 'Darstellung & Account')}
|
||||
title={t('settings.appearance.title', 'Darstellung & Account')}
|
||||
description={t('settings.appearance.description', 'Gestalte den Admin-Bereich so farbenfroh wie dein Gästeportal.')}
|
||||
/>
|
||||
<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 übernimm automatisch die Systemeinstellung.
|
||||
</p>
|
||||
<AppearanceToggleDropdown />
|
||||
</section>
|
||||
<div className="mt-6 grid gap-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
|
||||
<div className="space-y-6">
|
||||
<SectionCard className="space-y-6">
|
||||
<SectionHeader
|
||||
eyebrow={t('settings.appearance.badge', 'Darstellung')}
|
||||
title={t('settings.appearance.title', 'Darstellung & Branding')}
|
||||
description={t('settings.appearance.description', 'Passe den Admin an eure Markenfarben oder synchronisiere das System-Theme.')}
|
||||
/>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<FrostedSurface className="flex items-start gap-3 border border-white/20 bg-white/70 p-4 text-slate-900 shadow-sm">
|
||||
<SunMedium className="mt-0.5 h-5 w-5 text-amber-500" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold">{t('settings.appearance.lightTitle', 'Heller Modus')}</p>
|
||||
<p className="text-xs text-slate-600">{t('settings.appearance.lightCopy', 'Perfekt für Büros und klare Kontraste.')}</p>
|
||||
</div>
|
||||
</FrostedSurface>
|
||||
<FrostedSurface className="flex items-start gap-3 border border-white/20 bg-slate-900/80 p-4 text-white shadow-sm">
|
||||
<Moon className="mt-0.5 h-5 w-5 text-indigo-200" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold">{t('settings.appearance.darkTitle', 'Dunkler Modus')}</p>
|
||||
<p className="text-xs text-slate-200">{t('settings.appearance.darkCopy', 'Schonend für Nachtproduktionen oder OLED-Displays.')}</p>
|
||||
</div>
|
||||
</FrostedSurface>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-slate-200 bg-white/90 p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/40">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-900 dark:text-white">{t('settings.appearance.themeLabel', 'Theme wählen')}</p>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400">
|
||||
{t('settings.appearance.themeHint', 'Nutze automatische Anpassung oder überschreibe das Theme manuell.')}
|
||||
</p>
|
||||
</div>
|
||||
<AppearanceToggleDropdown />
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
|
||||
<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 ?? 'Customer Admin'}</span>
|
||||
{user.tenant_id && <> - Tenant #{user.tenant_id}</>}
|
||||
</>
|
||||
) : (
|
||||
'Aktuell kein Benutzer geladen.'
|
||||
)}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3 pt-2">
|
||||
<SectionCard className="space-y-6">
|
||||
<SectionHeader
|
||||
eyebrow={t('settings.session.badge', 'Account & Sicherheit')}
|
||||
title={t('settings.session.title', 'Angemeldeter Account')}
|
||||
description={t('settings.session.description', 'Verwalte deine Sitzung oder wechsel schnell zu deinem Profil.')}
|
||||
/>
|
||||
<div className="rounded-2xl border border-slate-200 bg-white/90 p-4 shadow-inner dark:border-slate-700 dark:bg-slate-900/40">
|
||||
<p className="text-sm text-slate-700 dark:text-slate-200">
|
||||
{user ? (
|
||||
<>
|
||||
{t('settings.session.loggedInAs', 'Eingeloggt als')} <span className="font-semibold text-slate-900 dark:text-white">{user.name ?? user.email ?? 'Customer Admin'}</span>
|
||||
{user.tenant_id ? <span className="text-xs text-slate-500 dark:text-slate-400"> • Tenant #{user.tenant_id}</span> : null}
|
||||
</>
|
||||
) : (
|
||||
t('settings.session.unknown', 'Aktuell kein Benutzer geladen.')
|
||||
)}
|
||||
</p>
|
||||
<div className="mt-4 flex flex-wrap gap-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
<Badge variant="outline" className="border-emerald-200 text-emerald-700">
|
||||
<ShieldCheck className="mr-1 h-3 w-3" /> {t('settings.session.security', 'SSO & 2FA aktivierbar')}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-slate-200 text-slate-600">
|
||||
<Lock className="mr-1 h-3 w-3" /> {t('settings.session.session', 'Session 12h gültig')}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Alert className="border-amber-200 bg-amber-50 text-amber-900">
|
||||
<AlertDescription className="flex items-center gap-2 text-xs">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
{t('settings.session.hint', 'Bei Gerätewechsel solltest du dich kurz ab- und wieder anmelden, um Berechtigungen zu synchronisieren.')}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="destructive" onClick={handleLogout} className="flex items-center gap-2">
|
||||
<LogOut className="h-4 w-4" /> Abmelden
|
||||
<LogOut className="h-4 w-4" /> {t('settings.session.logout', 'Abmelden')}
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={() => navigate(ADMIN_PROFILE_PATH)} className="flex items-center gap-2">
|
||||
<UserCog className="h-4 w-4" /> {t('settings.profile.actions.openProfile', 'Profil bearbeiten')}
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => navigate(-1)}>
|
||||
Abbrechen
|
||||
{t('settings.session.cancel', 'Zurück')}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</SectionCard>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard className="max-w-3xl space-y-6">
|
||||
<SectionHeader
|
||||
eyebrow={t('settings.notifications.badge', 'Benachrichtigungen')}
|
||||
title={t('settings.notifications.title', 'Benachrichtigungen')}
|
||||
description={t('settings.notifications.description', 'Lege fest, für welche Ereignisse wir dich per E-Mail informieren.')}
|
||||
/>
|
||||
{notificationError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{notificationError}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{loadingNotifications ? (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<FrostedSurface
|
||||
key={index}
|
||||
className="h-12 animate-pulse border border-white/20 bg-gradient-to-r from-white/30 via-white/60 to-white/30 shadow-inner dark:border-slate-800/60 dark:from-slate-800 dark:via-slate-700 dark:to-slate-800"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : preferences ? (
|
||||
<NotificationPreferencesForm
|
||||
preferences={preferences}
|
||||
defaults={defaults}
|
||||
meta={notificationMeta}
|
||||
onChange={(next) => setPreferences(next)}
|
||||
onReset={() => setPreferences(defaults)}
|
||||
onSave={async () => {
|
||||
if (!preferences) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setSavingNotifications(true);
|
||||
const updated = await updateNotificationPreferences(preferences);
|
||||
setPreferences(updated.preferences);
|
||||
if (updated.defaults && Object.keys(updated.defaults).length > 0) {
|
||||
setDefaults(updated.defaults);
|
||||
}
|
||||
if (updated.meta) {
|
||||
setNotificationMeta(updated.meta);
|
||||
}
|
||||
setNotificationError(null);
|
||||
} catch (error) {
|
||||
setNotificationError(
|
||||
getApiErrorMessage(error, t('settings.notifications.errorSave', 'Speichern fehlgeschlagen. Bitte versuche es erneut.')),
|
||||
);
|
||||
} finally {
|
||||
setSavingNotifications(false);
|
||||
}
|
||||
}}
|
||||
saving={savingNotifications}
|
||||
translate={translateNotification}
|
||||
<SectionCard className="space-y-6">
|
||||
<SectionHeader
|
||||
eyebrow={t('settings.notifications.badge', 'Benachrichtigungen')}
|
||||
title={t('settings.notifications.title', 'Benachrichtigungen')}
|
||||
description={t('settings.notifications.description', 'Lege fest, für welche Ereignisse wir dich per E-Mail informieren.')}
|
||||
/>
|
||||
) : null}
|
||||
</SectionCard>
|
||||
{notificationError ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{notificationError}</AlertDescription>
|
||||
</Alert>
|
||||
) : null}
|
||||
|
||||
{loadingNotifications ? (
|
||||
<NotificationSkeleton />
|
||||
) : preferences ? (
|
||||
<NotificationPreferencesForm
|
||||
preferences={preferences}
|
||||
defaults={defaults}
|
||||
meta={notificationMeta}
|
||||
onChange={(next) => setPreferences(next)}
|
||||
onReset={() => setPreferences(defaults)}
|
||||
onSave={async () => {
|
||||
if (!preferences) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setSavingNotifications(true);
|
||||
const updated = await updateNotificationPreferences(preferences);
|
||||
setPreferences(updated.preferences);
|
||||
if (updated.defaults && Object.keys(updated.defaults).length > 0) {
|
||||
setDefaults(updated.defaults);
|
||||
}
|
||||
if (updated.meta) {
|
||||
setNotificationMeta(updated.meta);
|
||||
}
|
||||
setNotificationError(null);
|
||||
} catch (error) {
|
||||
setNotificationError(
|
||||
getApiErrorMessage(error, t('settings.notifications.errorSave', 'Speichern fehlgeschlagen. Bitte versuche es erneut.')),
|
||||
);
|
||||
} finally {
|
||||
setSavingNotifications(false);
|
||||
}
|
||||
}}
|
||||
saving={savingNotifications}
|
||||
translate={translateNotification}
|
||||
/>
|
||||
) : null}
|
||||
</SectionCard>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<NotificationMetaCard meta={notificationMeta} loading={loadingNotifications} translate={translateNotification} />
|
||||
<SupportCard />
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
@@ -258,7 +301,7 @@ function NotificationPreferencesForm({
|
||||
}, [meta, translate, locale]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="relative space-y-4 pb-16">
|
||||
<div className="space-y-3">
|
||||
{items.map((item) => {
|
||||
const checked = preferences[item.key] ?? defaults[item.key] ?? true;
|
||||
@@ -277,9 +320,10 @@ function NotificationPreferencesForm({
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button onClick={onSave} disabled={saving} className="bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-white shadow-md shadow-rose-400/30">
|
||||
{saving ? 'Speichern...' : translate('settings.notifications.actions.save', 'Speichern')}
|
||||
<div className="sticky bottom-4 z-[1] flex flex-wrap items-center gap-3 rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-lg shadow-rose-200/40 backdrop-blur dark:border-slate-700 dark:bg-slate-900/80">
|
||||
<Button onClick={onSave} disabled={saving} className="flex items-center gap-2 bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-white shadow-md shadow-rose-400/30">
|
||||
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
||||
{saving ? translate('settings.notifications.actions.save', 'Speichern') : translate('settings.notifications.actions.save', 'Speichern')}
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={onReset} disabled={saving}>
|
||||
{translate('settings.notifications.actions.reset', 'Auf Standard setzen')}
|
||||
@@ -357,6 +401,98 @@ function buildPreferenceMeta(
|
||||
return map as Array<{ key: keyof NotificationPreferences; label: string; description: string }>;
|
||||
}
|
||||
|
||||
function NotificationSkeleton() {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<FrostedSurface
|
||||
key={`notification-skeleton-${index}`}
|
||||
className="h-14 animate-pulse border border-white/20 bg-gradient-to-r from-white/30 via-white/60 to-white/30 shadow-inner dark:border-slate-800/60 dark:from-slate-800 dark:via-slate-700 dark:to-slate-800"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NotificationMetaCard({
|
||||
meta,
|
||||
loading,
|
||||
translate,
|
||||
}: {
|
||||
meta: NotificationPreferencesMeta | null;
|
||||
loading: boolean;
|
||||
translate: (key: string, fallback?: string, options?: Record<string, unknown>) => string;
|
||||
}) {
|
||||
const locale = typeof window !== 'undefined' ? window.navigator.language : 'de-DE';
|
||||
const lastWarning = meta?.credit_warning_sent_at
|
||||
? formatDateTime(meta.credit_warning_sent_at, locale)
|
||||
: translate('settings.notifications.meta.creditNever', 'Noch keine Slot-Warnung versendet.');
|
||||
|
||||
return (
|
||||
<Card className="border border-slate-200 bg-white/90 shadow-sm dark:border-slate-800 dark:bg-slate-900/60">
|
||||
<CardContent className="space-y-4 p-5">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-slate-500">{translate('settings.notifications.summary.badge', 'Status')}</p>
|
||||
<p className="mt-1 text-base font-semibold text-slate-900 dark:text-white">
|
||||
{translate('settings.notifications.summary.title', 'Benachrichtigungsübersicht')}
|
||||
</p>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="space-y-2">
|
||||
<div className="h-3 w-3/4 animate-pulse rounded bg-slate-200" />
|
||||
<div className="h-3 w-1/2 animate-pulse rounded bg-slate-100" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3 text-sm text-slate-600 dark:text-slate-300">
|
||||
<div className="flex items-center gap-2 rounded-2xl border border-slate-200/80 bg-white/70 p-3 text-slate-800 dark:border-slate-700 dark:bg-slate-900/40 dark:text-white">
|
||||
<Mail className="h-4 w-4 text-primary" />
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-slate-300">{translate('settings.notifications.summary.channel', 'E-Mail Kanal')}</p>
|
||||
<p>{translate('settings.notifications.summary.channelCopy', 'Alle Warnungen werden per E-Mail versendet.')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-slate-200/80 bg-amber-50 p-3 text-slate-800">
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-amber-700">{translate('settings.notifications.summary.credits', 'Credits')}</p>
|
||||
<p>{lastWarning}</p>
|
||||
{meta?.credit_warning_threshold ? (
|
||||
<p className="text-xs text-amber-700/80">
|
||||
{translate('settings.notifications.summary.threshold', 'Warnung bei {{count}} verbleibenden Slots', {
|
||||
count: meta.credit_warning_threshold,
|
||||
})}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function SupportCard() {
|
||||
const { t } = useTranslation('management');
|
||||
return (
|
||||
<Card className="border border-slate-200 bg-white/90 shadow-sm dark:border-slate-800 dark:bg-slate-900/60">
|
||||
<CardContent className="space-y-4 p-5">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-slate-500">{t('settings.support.badge', 'Hilfe & Support')}</p>
|
||||
<p className="mt-1 text-base font-semibold text-slate-900 dark:text-white">{t('settings.support.title', 'Team informieren')}</p>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300">{t('settings.support.copy', 'Benötigst du sofortige Hilfe? Unser Support reagiert in der Regel innerhalb weniger Stunden.')}</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
window.location.href = 'mailto:support@fotospiel.app';
|
||||
}}
|
||||
>
|
||||
<Mail className="mr-2 h-4 w-4" /> {t('settings.support.cta', 'Support kontaktieren')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function formatDateTime(value: string, locale: string): string {
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
|
||||
Reference in New Issue
Block a user