feat: unify tenant admin ui and add photo moderation

This commit is contained in:
Codex Agent
2025-11-07 13:50:55 +01:00
parent 9cc9950b0c
commit 253239455b
14 changed files with 995 additions and 583 deletions

View File

@@ -11,10 +11,11 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
import { AdminLayout } from '../components/AdminLayout';
import {
TenantHeroCard,
FrostedCard,
FrostedSurface,
tenantHeroPrimaryButtonClass,
tenantHeroSecondaryButtonClass,
SectionCard,
SectionHeader,
} from '../components/tenant';
import { useAuth } from '../auth/context';
import { ADMIN_EVENTS_PATH, ADMIN_LOGIN_PATH, ADMIN_PROFILE_PATH } from '../constants';
@@ -65,7 +66,7 @@ export default function SettingsPage() {
</Button>
);
const heroAside = (
<FrostedSurface className="space-y-3 border-white/25 p-5 text-slate-900 shadow-lg shadow-rose-300/20 dark:border-slate-800/70 dark:bg-slate-950/80">
<FrostedSurface className="space-y-3 border-slate-200 p-5 text-slate-900 shadow-lg shadow-rose-300/20 dark:border-white/20 dark:bg-white/10">
<div>
<p className="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">{t('settings.hero.accountLabel', { defaultValue: 'Angemeldeter Account' })}</p>
<p className="mt-2 text-lg font-semibold text-slate-900 dark:text-slate-100">{accountName}</p>
@@ -120,16 +121,12 @@ export default function SettingsPage() {
aside={heroAside}
/>
<FrostedCard className="mt-6 max-w-2xl border border-white/20">
<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 Gästeportal.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<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">
@@ -162,20 +159,14 @@ export default function SettingsPage() {
</Button>
</div>
</section>
</CardContent>
</FrostedCard>
</SectionCard>
<FrostedCard className="max-w-3xl border border-white/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
<AlertTriangle className="h-5 w-5 text-pink-500" />
{t('settings.notifications.title', 'Benachrichtigungen')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
{t('settings.notifications.description', 'Lege fest, für welche Ereignisse wir dich per E-Mail informieren.')}
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<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>
@@ -225,8 +216,7 @@ export default function SettingsPage() {
translate={translateNotification}
/>
) : null}
</CardContent>
</FrostedCard>
</SectionCard>
</AdminLayout>
);
}
@@ -275,7 +265,7 @@ function NotificationPreferencesForm({
const checked = preferences[item.key] ?? defaults[item.key] ?? true;
return (
<FrostedSurface key={item.key} className="flex items-start justify-between gap-4 border border-pink-100/60 p-4 text-slate-900 shadow-sm shadow-rose-200/20 dark:border-pink-500/20 dark:bg-slate-950/80">
<FrostedSurface key={item.key} className="flex items-start justify-between gap-4 border border-slate-200 p-4 text-slate-900 shadow-sm shadow-rose-200/20 dark:border-pink-500/20 dark:bg-white/10">
<div className="space-y-1">
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">{item.label}</h3>
<p className="text-sm text-slate-600 dark:text-slate-400">{item.description}</p>