408 lines
19 KiB
TypeScript
408 lines
19 KiB
TypeScript
import React from 'react';
|
||
import { AlertTriangle, 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 {
|
||
TenantHeroCard,
|
||
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';
|
||
import { encodeReturnTo } from '../lib/returnTo';
|
||
import {
|
||
getNotificationPreferences,
|
||
updateNotificationPreferences,
|
||
NotificationPreferences,
|
||
} from '../api';
|
||
import { getApiErrorMessage } from '../lib/apiError';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
export default function SettingsPage() {
|
||
const navigate = useNavigate();
|
||
const { user, logout } = useAuth();
|
||
const { t } = useTranslation('management');
|
||
|
||
const [preferences, setPreferences] = React.useState<NotificationPreferences | null>(null);
|
||
const [defaults, setDefaults] = React.useState<NotificationPreferences>({});
|
||
const [loadingNotifications, setLoadingNotifications] = React.useState(true);
|
||
const [savingNotifications, setSavingNotifications] = React.useState(false);
|
||
const [notificationError, setNotificationError] = React.useState<string | null>(null);
|
||
|
||
const heroDescription = t('settings.hero.description', { defaultValue: 'Gestalte das Erlebnis für dein Admin-Team – Darstellung, Benachrichtigungen und Session-Sicherheit.' });
|
||
const heroSupporting = [
|
||
t('settings.hero.summary.appearance', { defaultValue: 'Synchronisiere den Look & Feel mit dem Gästeportal oder schalte den Dark Mode frei.' }),
|
||
t('settings.hero.summary.notifications', { defaultValue: 'Stimme Benachrichtigungen auf Aufgaben, Pakete und Live-Events ab.' })
|
||
];
|
||
const accountName = user?.name ?? user?.email ?? 'Customer Admin';
|
||
const heroPrimaryAction = (
|
||
<Button
|
||
size="sm"
|
||
className={tenantHeroPrimaryButtonClass}
|
||
onClick={() => navigate(ADMIN_PROFILE_PATH)}
|
||
>
|
||
{t('settings.hero.actions.profile', 'Profil bearbeiten')}
|
||
</Button>
|
||
);
|
||
const heroSecondaryAction = (
|
||
<Button
|
||
size="sm"
|
||
className={tenantHeroSecondaryButtonClass}
|
||
onClick={() => navigate(ADMIN_EVENTS_PATH)}
|
||
>
|
||
{t('settings.hero.actions.events', 'Zur Event-Übersicht')}
|
||
</Button>
|
||
);
|
||
const heroAside = (
|
||
<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>
|
||
{user?.tenant_id ? (
|
||
<p className="text-xs text-slate-600 dark:text-slate-400">Tenant #{user.tenant_id}</p>
|
||
) : null}
|
||
</div>
|
||
<p className="text-xs text-slate-600 dark:text-slate-400">{t('settings.hero.support', { defaultValue: 'Passe Einstellungen für dich und dein Team an – Änderungen wirken sofort im Admin.' })}</p>
|
||
</FrostedSurface>
|
||
);
|
||
|
||
const translateNotification = React.useCallback(
|
||
(key: string, fallback?: string, options?: Record<string, unknown>) =>
|
||
t(key, { defaultValue: fallback, ...(options ?? {}) }),
|
||
[t],
|
||
);
|
||
|
||
function handleLogout() {
|
||
const target = new URL(ADMIN_LOGIN_PATH, window.location.origin);
|
||
target.searchParams.set('reset-auth', '1');
|
||
target.searchParams.set('return_to', encodeReturnTo(ADMIN_EVENTS_PATH));
|
||
logout({ redirect: `${target.pathname}${target.search}` });
|
||
}
|
||
|
||
React.useEffect(() => {
|
||
(async () => {
|
||
try {
|
||
const result = await getNotificationPreferences();
|
||
setPreferences(result.preferences);
|
||
setDefaults(result.defaults);
|
||
} catch (error) {
|
||
setNotificationError(getApiErrorMessage(error, t('settings.notifications.errorLoad', 'Benachrichtigungseinstellungen konnten nicht geladen werden.')));
|
||
} finally {
|
||
setLoadingNotifications(false);
|
||
}
|
||
})();
|
||
}, [t]);
|
||
|
||
return (
|
||
<AdminLayout
|
||
title="Einstellungen"
|
||
subtitle="Passe das Erscheinungsbild deines Dashboards an und verwalte deine Session."
|
||
>
|
||
<TenantHeroCard
|
||
badge={t('settings.hero.badge', { defaultValue: 'Administration' })}
|
||
title={t('settings.title', { defaultValue: 'Einstellungen' })}
|
||
description={heroDescription}
|
||
supporting={heroSupporting}
|
||
primaryAction={heroPrimaryAction}
|
||
secondaryAction={heroSecondaryAction}
|
||
aside={heroAside}
|
||
/>
|
||
|
||
<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>
|
||
|
||
<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" /> {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)}>
|
||
{t('settings.session.cancel', 'Zurück')}
|
||
</Button>
|
||
</div>
|
||
</SectionCard>
|
||
|
||
<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.')}
|
||
/>
|
||
{notificationError ? (
|
||
<Alert variant="destructive">
|
||
<AlertDescription>{notificationError}</AlertDescription>
|
||
</Alert>
|
||
) : null}
|
||
|
||
{loadingNotifications ? (
|
||
<NotificationSkeleton />
|
||
) : preferences ? (
|
||
<NotificationPreferencesForm
|
||
preferences={preferences}
|
||
defaults={defaults}
|
||
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);
|
||
}
|
||
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">
|
||
<SupportCard />
|
||
</div>
|
||
</div>
|
||
</AdminLayout>
|
||
);
|
||
}
|
||
|
||
function NotificationPreferencesForm({
|
||
preferences,
|
||
defaults,
|
||
onChange,
|
||
onReset,
|
||
onSave,
|
||
saving,
|
||
translate,
|
||
}: {
|
||
preferences: NotificationPreferences;
|
||
defaults: NotificationPreferences;
|
||
onChange: (next: NotificationPreferences) => void;
|
||
onReset: () => void;
|
||
onSave: () => Promise<void>;
|
||
saving: boolean;
|
||
translate: (key: string, fallback?: string, options?: Record<string, unknown>) => string;
|
||
}) {
|
||
const items = React.useMemo(() => buildPreferenceMeta(translate), [translate]);
|
||
|
||
return (
|
||
<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;
|
||
|
||
return (
|
||
<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>
|
||
</div>
|
||
<Switch
|
||
checked={checked}
|
||
onCheckedChange={(value) => onChange({ ...preferences, [item.key]: Boolean(value) })}
|
||
/>
|
||
</FrostedSurface>
|
||
);
|
||
})}
|
||
</div>
|
||
<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')}
|
||
</Button>
|
||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||
{translate('settings.notifications.hint', 'Du kannst Benachrichtigungen jederzeit wieder aktivieren.')}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function buildPreferenceMeta(
|
||
translate: (key: string, fallback?: string, options?: Record<string, unknown>) => string
|
||
): Array<{ key: keyof NotificationPreferences; label: string; description: string }> {
|
||
const map = [
|
||
{
|
||
key: 'photo_thresholds',
|
||
label: translate('settings.notifications.items.photoThresholds.label', 'Warnung bei Foto-Schwellen'),
|
||
description: translate('settings.notifications.items.photoThresholds.description', 'Sende Warnungen bei 80 % und 95 % Foto-Auslastung.'),
|
||
},
|
||
{
|
||
key: 'photo_limits',
|
||
label: translate('settings.notifications.items.photoLimits.label', 'Sperre bei Foto-Limit'),
|
||
description: translate('settings.notifications.items.photoLimits.description', 'Informiere mich, sobald keine Foto-Uploads mehr möglich sind.'),
|
||
},
|
||
{
|
||
key: 'guest_thresholds',
|
||
label: translate('settings.notifications.items.guestThresholds.label', 'Warnung bei Gästekontingent'),
|
||
description: translate('settings.notifications.items.guestThresholds.description', 'Warnung kurz bevor alle Gästelinks vergeben sind.'),
|
||
},
|
||
{
|
||
key: 'guest_limits',
|
||
label: translate('settings.notifications.items.guestLimits.label', 'Sperre bei Gästelimit'),
|
||
description: translate('settings.notifications.items.guestLimits.description', 'Hinweis, wenn keine neuen Gästelinks mehr erzeugt werden können.'),
|
||
},
|
||
{
|
||
key: 'gallery_warnings',
|
||
label: translate('settings.notifications.items.galleryWarnings.label', 'Galerie läuft bald ab'),
|
||
description: translate('settings.notifications.items.galleryWarnings.description', 'Erhalte 7 und 1 Tag vor Ablauf eine Erinnerung.'),
|
||
},
|
||
{
|
||
key: 'gallery_expired',
|
||
label: translate('settings.notifications.items.galleryExpired.label', 'Galerie ist abgelaufen'),
|
||
description: translate('settings.notifications.items.galleryExpired.description', 'Informiere mich, sobald Gäste die Galerie nicht mehr sehen können.'),
|
||
},
|
||
{
|
||
key: 'event_thresholds',
|
||
label: translate('settings.notifications.items.eventThresholds.label', 'Warnung bei Event-Kontingent'),
|
||
description: translate('settings.notifications.items.eventThresholds.description', 'Hinweis, wenn das Reseller-Paket fast ausgeschöpft ist.'),
|
||
},
|
||
{
|
||
key: 'event_limits',
|
||
label: translate('settings.notifications.items.eventLimits.label', 'Sperre bei Event-Kontingent'),
|
||
description: translate('settings.notifications.items.eventLimits.description', 'Nachricht, sobald keine weiteren Events erstellt werden können.'),
|
||
},
|
||
{
|
||
key: 'package_expiring',
|
||
label: translate('settings.notifications.items.packageExpiring.label', 'Paket läuft bald ab'),
|
||
description: translate('settings.notifications.items.packageExpiring.description', 'Erinnerungen bei 30, 7 und 1 Tag vor Paketablauf.'),
|
||
},
|
||
{
|
||
key: 'package_expired',
|
||
label: translate('settings.notifications.items.packageExpired.label', 'Paket ist abgelaufen'),
|
||
description: translate('settings.notifications.items.packageExpired.description', 'Benachrichtige mich, wenn das Paket abgelaufen ist.'),
|
||
},
|
||
];
|
||
|
||
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 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>
|
||
);
|
||
}
|