soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: unify tenant admin ui and add photo moderation

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

408
resources/js/admin/pages/EventDetailPage.tsx
View File

@@ -37,6 +37,7 @@ import {
getEventToolkit,
toggleEvent,
submitTenantFeedback,
updatePhotoVisibility,
} from '../api';
import { buildLimitWarnings } from '../lib/limitWarnings';
import { getApiErrorMessage } from '../lib/apiError';
@@ -49,6 +50,11 @@ import {
ADMIN_EVENT_PHOTOS_PATH,
ADMIN_EVENT_TASKS_PATH,
} from '../constants';
import {
SectionCard,
SectionHeader,
ActionGrid,
} from '../components/tenant';
type EventDetailPageProps = {
mode?: 'detail' | 'toolkit';
@@ -202,15 +208,15 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
if (!slug) {
return (
<AdminLayout title={t('events.errors.notFoundTitle', 'Event nicht gefunden')} subtitle={t('events.errors.notFoundCopy', 'Bitte wähle ein Event aus der Übersicht.')} actions={actions}>
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
<CardContent className="p-6 text-sm text-slate-600">
{t('events.errors.notFoundBody', 'Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.')}
</CardContent>
</Card>
</AdminLayout>
);
}
<AdminLayout title={t('events.errors.notFoundTitle', 'Event nicht gefunden')} subtitle={t('events.errors.notFoundCopy', 'Bitte wähle ein Event aus der Übersicht.')} actions={actions}>
<SectionCard>
<p className="text-sm text-slate-600 dark:text-slate-300">
{t('events.errors.notFoundBody', 'Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.')}
</p>
</SectionCard>
</AdminLayout>
);
}
const limitWarnings = React.useMemo(
() => (event?.limits ? buildLimitWarnings(event.limits, (key, options) => tCommon(`limits.${key}`, options)) : []),
@@ -294,20 +300,21 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
<div className="grid gap-6 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,0.8fr)]">
<PendingPhotosCard
slug={event.slug}
photos={toolkitData?.photos.pending ?? []}
navigateToModeration={() => navigate(ADMIN_EVENT_PHOTOS_PATH(event.slug))}
/>
<RecentUploadsCard photos={toolkitData?.photos.recent ?? []} />
<RecentUploadsCard slug={event.slug} photos={toolkitData?.photos.recent ?? []} />
</div>
<FeedbackCard slug={event.slug} />
</div>
) : (
<Card className="border-0 bg-white/90 shadow-xl shadow-pink-100/60">
<CardContent className="p-6 text-sm text-slate-600">
<SectionCard>
<p className="text-sm text-slate-600 dark:text-slate-300">
{t('events.errors.notFoundBody', 'Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.')}
</CardContent>
</Card>
</p>
</SectionCard>
)}
</AdminLayout>
);
@@ -335,17 +342,13 @@ function StatusCard({ event, stats, busy, onToggle }: { event: TenantEvent; stat
: t('events.status.archived', 'Archiviert');
return (
<Card className="border-0 bg-white/90 shadow-xl shadow-pink-100/60">
<CardHeader className="space-y-2">
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
<Sparkles className="h-5 w-5 text-pink-500" />
{t('events.workspace.sections.statusTitle', 'Eventstatus & Sichtbarkeit')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
{t('events.workspace.sections.statusSubtitle', 'Aktiviere dein Event für Gäste oder verstecke es vorübergehend.')}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4 text-sm text-slate-700">
<SectionCard className="space-y-4">
<SectionHeader
eyebrow={t('events.workspace.sections.statusBadge', 'Status')}
title={t('events.workspace.sections.statusTitle', 'Eventstatus & Sichtbarkeit')}
description={t('events.workspace.sections.statusSubtitle', 'Aktiviere dein Event für Gäste oder verstecke es vorübergehend.')}
/>
<div className="space-y-4 text-sm text-slate-700 dark:text-slate-300">
<InfoRow icon={<Sparkles className="h-4 w-4 text-pink-500" />} label={t('events.workspace.fields.status', 'Status')} value={statusLabel} />
<InfoRow icon={<Circle className="h-4 w-4 text-amber-500" />} label={t('events.workspace.fields.active', 'Aktiv für Gäste')} value={event.is_active ? t('events.workspace.activeYes', 'Ja') : t('events.workspace.activeNo', 'Nein')} />
<InfoRow icon={<CalendarIcon />} label={t('events.workspace.fields.date', 'Eventdatum')} value={formatDate(event.event_date)} />
@@ -380,88 +383,67 @@ function StatusCard({ event, stats, busy, onToggle }: { event: TenantEvent; stat
{event.is_active ? t('events.workspace.actions.pause', 'Event pausieren') : t('events.workspace.actions.activate', 'Event aktivieren')}
</Button>
</div>
</CardContent>
</Card>
</div>
</SectionCard>
);
}
function QuickActionsCard({ slug, busy, onToggle, navigate }: { slug: string; busy: boolean; onToggle: () => void | Promise<void>; navigate: ReturnType<typeof useNavigate> }) {
const { t } = useTranslation('management');
const actions = [
const gridItems = [
{
key: 'photos',
icon: <Camera className="h-4 w-4" />,
label: t('events.quickActions.moderate', 'Fotos moderieren'),
description: t('events.quickActions.moderateDesc', 'Prüfe Uploads und veröffentliche Highlights.'),
onClick: () => navigate(ADMIN_EVENT_PHOTOS_PATH(slug)),
},
{
key: 'tasks',
icon: <Sparkles className="h-4 w-4" />,
label: t('events.quickActions.tasks', 'Aufgaben bearbeiten'),
description: t('events.quickActions.tasksDesc', 'Passe Story-Prompts und Moderation an.'),
onClick: () => navigate(ADMIN_EVENT_TASKS_PATH(slug)),
},
{
key: 'invites',
icon: <QrCode className="h-4 w-4" />,
label: t('events.quickActions.invites', 'Layouts & QR verwalten'),
description: t('events.quickActions.invitesDesc', 'Aktualisiere QR-Kits und Einladungslayouts.'),
onClick: () => navigate(`${ADMIN_EVENT_INVITES_PATH(slug)}?tab=layout`),
},
{
key: 'roles',
icon: <Users className="h-4 w-4" />,
label: t('events.quickActions.roles', 'Team & Rollen anpassen'),
description: t('events.quickActions.rolesDesc', 'Verwalte Moderatoren und Co-Leads.'),
onClick: () => navigate(ADMIN_EVENT_MEMBERS_PATH(slug)),
},
{
key: 'print',
icon: <Printer className="h-4 w-4" />,
label: t('events.quickActions.print', 'Layouts als PDF drucken'),
description: t('events.quickActions.printDesc', 'Exportiere QR-Sets für den Druck.'),
onClick: () => navigate(`${ADMIN_EVENT_INVITES_PATH(slug)}?tab=export`),
},
{
icon: <CheckCircle2 className="h-4 w-4" />,
label: t('events.quickActions.toggle', 'Status ändern'),
onClick: () => { void onToggle(); },
disabled: busy,
},
];
return (
<Card className="border-0 bg-white/90 shadow-xl shadow-violet-100/60">
<CardHeader className="space-y-1">
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
<Sparkles className="h-5 w-5 text-violet-500" />
{t('events.quickActions.title', 'Schnellaktionen')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
{t('events.quickActions.subtitle', 'Nutze die wichtigsten Schritte vor und während deines Events.')}
</CardDescription>
</CardHeader>
<CardContent className="space-y-2">
{actions.map((action, index) => (
<button
key={index}
type="button"
onClick={() => {
if (action.disabled) {
return;
}
const result = action.onClick();
if (result instanceof Promise) {
void result;
}
}}
disabled={action.disabled}
className="flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-4 py-3 text-left text-sm text-slate-700 transition hover:border-violet-200 hover:bg-violet-50 disabled:cursor-not-allowed disabled:opacity-50"
>
<span className="flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-violet-100 text-violet-600">
{action.icon}
</span>
{action.label}
</span>
<ChevronRight className="h-4 w-4 text-slate-400" />
</button>
))}
</CardContent>
</Card>
<SectionCard className="space-y-4">
<SectionHeader
eyebrow={t('events.quickActions.badge', 'Schnellaktionen')}
title={t('events.quickActions.title', 'Schnellaktionen')}
description={t('events.quickActions.subtitle', 'Nutze die wichtigsten Schritte vor und während deines Events.')}
/>
<ActionGrid items={gridItems} columns={1} />
<div className="flex flex-wrap gap-2">
<Button onClick={() => { void onToggle(); }} disabled={busy} variant="outline" className="rounded-full border-rose-200 text-rose-600 hover:bg-rose-50">
{busy ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <CheckCircle2 className="mr-2 h-4 w-4" />}
{t('events.quickActions.toggle', 'Status ändern')}
</Button>
</div>
</SectionCard>
);
}
@@ -493,16 +475,18 @@ function MetricsGrid({ metrics, stats }: { metrics: EventToolkit['metrics'] | nu
return (
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
{cards.map((card, index) => (
<Card key={index} className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
<CardContent className="flex items-center gap-4 p-5">
<span className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">{card.icon}</span>
{cards.map((card) => (
<SectionCard key={card.label} className="p-4">
<div className="flex items-center gap-4">
<span className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 dark:bg-white/10">
{card.icon}
</span>
<div>
<p className="text-xs uppercase tracking-wide text-slate-500">{card.label}</p>
<p className="text-2xl font-semibold text-slate-900">{card.value}</p>
<p className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{card.label}</p>
<p className="text-2xl font-semibold text-slate-900 dark:text-white">{card.value}</p>
</div>
</CardContent>
</Card>
</div>
</SectionCard>
))}
</div>
);
@@ -512,22 +496,18 @@ function InviteSummary({ invites, navigateToInvites }: { invites: EventToolkit['
const { t } = useTranslation('management');
return (
<Card className="border-0 bg-white/90 shadow-md shadow-amber-100/60">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
<QrCode className="h-5 w-5 text-amber-500" />
{t('events.invites.title', 'QR-Einladungen')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
{t('events.invites.subtitle', 'Behält aktive Einladungen und Layouts im Blick.')}
</CardDescription>
</CardHeader>
<CardContent className="space-y-3 text-sm text-slate-700">
<SectionCard className="space-y-3">
<SectionHeader
eyebrow={t('events.invites.badge', 'Einladungen')}
title={t('events.invites.title', 'QR-Einladungen')}
description={t('events.invites.subtitle', 'Behält aktive Einladungen und Layouts im Blick.')}
/>
<div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
<div className="flex gap-2 text-sm text-slate-900">
<Badge variant="outline" className="border-amber-200 text-amber-700">
<Badge variant="outline" className="border-amber-200 text-amber-700 dark:border-amber-500/30 dark:text-amber-200">
{t('events.invites.activeCount', { defaultValue: '{{count}} aktiv', count: invites?.summary.active ?? 0 })}
</Badge>
<Badge variant="outline" className="border-amber-200 text-amber-700">
<Badge variant="outline" className="border-amber-200 text-amber-700 dark:border-amber-500/30 dark:text-amber-200">
{t('events.invites.totalCount', { defaultValue: '{{count}} gesamt', count: invites?.summary.total ?? 0 })}
</Badge>
</div>
@@ -548,8 +528,8 @@ function InviteSummary({ invites, navigateToInvites }: { invites: EventToolkit['
<Button variant="outline" onClick={navigateToInvites} className="border-amber-200 text-amber-700 hover:bg-amber-50">
<QrCode className="mr-2 h-4 w-4" /> {t('events.invites.manage', 'Layouts & Einladungen verwalten')}
</Button>
</CardContent>
</Card>
</div>
</SectionCard>
);
}
@@ -557,26 +537,22 @@ function TaskOverviewCard({ tasks, navigateToTasks }: { tasks: EventToolkit['tas
const { t } = useTranslation('management');
return (
<Card className="border-0 bg-white/90 shadow-md shadow-pink-100/60">
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
<div>
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
<Sparkles className="h-5 w-5 text-pink-500" />
{t('events.tasks.title', 'Aktive Aufgaben')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
{t('events.tasks.subtitle', 'Motiviere Gäste mit klaren Aufgaben & Highlights.')}
</CardDescription>
</div>
<Badge variant="outline" className="border-pink-200 text-pink-600">
{t('events.tasks.summary', {
defaultValue: '{{completed}} von {{total}} erledigt',
completed: tasks?.summary.completed ?? 0,
total: tasks?.summary.total ?? 0,
})}
</Badge>
</CardHeader>
<CardContent className="space-y-3 text-sm text-slate-700">
<SectionCard className="space-y-3">
<SectionHeader
eyebrow={t('events.tasks.badge', 'Aufgaben')}
title={t('events.tasks.title', 'Aktive Aufgaben')}
description={t('events.tasks.subtitle', 'Motiviere Gäste mit klaren Aufgaben & Highlights.')}
endSlot={(
<Badge variant="outline" className="border-pink-200 text-pink-600 dark:border-pink-500/30 dark:text-pink-200">
{t('events.tasks.summary', {
defaultValue: '{{completed}} von {{total}} erledigt',
completed: tasks?.summary.completed ?? 0,
total: tasks?.summary.total ?? 0,
})}
</Badge>
)}
/>
<div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
{tasks?.items?.length ? (
<div className="space-y-2">
{tasks.items.slice(0, 4).map((task) => (
@@ -590,8 +566,8 @@ function TaskOverviewCard({ tasks, navigateToTasks }: { tasks: EventToolkit['tas
<Button variant="outline" onClick={navigateToTasks} className="border-pink-200 text-pink-600 hover:bg-pink-50">
<Sparkles className="mr-2 h-4 w-4" /> {t('events.tasks.manage', 'Aufgabenbereich öffnen')}
</Button>
</CardContent>
</Card>
</div>
</SectionCard>
);
}
@@ -609,31 +585,81 @@ function TaskRow({ task }: { task: EventToolkitTask }) {
);
}
function PendingPhotosCard({ photos, navigateToModeration }: { photos: TenantPhoto[]; navigateToModeration: () => void }) {
function PendingPhotosCard({
slug,
photos,
navigateToModeration,
}: {
slug: string;
photos: TenantPhoto[];
navigateToModeration: () => void;
}) {
const { t } = useTranslation('management');
const [entries, setEntries] = React.useState(photos);
const [updatingId, setUpdatingId] = React.useState<number | null>(null);
React.useEffect(() => {
setEntries(photos);
}, [photos]);
const handleVisibility = async (photo: TenantPhoto, visible: boolean) => {
setUpdatingId(photo.id);
try {
const updated = await updatePhotoVisibility(slug, photo.id, visible);
setEntries((prev) => prev.map((item) => (item.id === photo.id ? updated : item)));
toast.success(
visible
? t('events.photos.toastVisible', 'Foto wieder sichtbar gemacht.')
: t('events.photos.toastHidden', 'Foto ausgeblendet.'),
);
} catch (err) {
toast.error(
isAuthError(err)
? t('events.photos.errorAuth', 'Session abgelaufen. Bitte erneut anmelden.')
: t('events.photos.errorVisibility', 'Sichtbarkeit konnte nicht geändert werden.'),
);
} finally {
setUpdatingId(null);
}
};
return (
<Card className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
<div>
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
<Camera className="h-5 w-5 text-emerald-500" />
{t('events.photos.pendingTitle', 'Fotos in Moderation')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
{t('events.photos.pendingSubtitle', 'Schnell prüfen, bevor Gäste live gehen.')}
</CardDescription>
</div>
<Badge variant="outline" className="border-emerald-200 text-emerald-600">
{t('events.photos.pendingCount', { defaultValue: '{{count}} Fotos offen', count: photos.length })}
</Badge>
</CardHeader>
<CardContent className="space-y-3 text-sm text-slate-700">
{photos.length ? (
<SectionCard className="space-y-3">
<SectionHeader
eyebrow={t('events.photos.pendingBadge', 'Moderation')}
title={t('events.photos.pendingTitle', 'Fotos in Moderation')}
description={t('events.photos.pendingSubtitle', 'Schnell prüfen, bevor Gäste live gehen.')}
endSlot={(
<Badge variant="outline" className="border-emerald-200 text-emerald-600 dark:border-emerald-500/30 dark:text-emerald-200">
{t('events.photos.pendingCount', { defaultValue: '{{count}} Fotos offen', count: entries.length })}
</Badge>
)}
/>
<div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
{entries.length ? (
<div className="grid grid-cols-3 gap-2">
{photos.slice(0, 6).map((photo) => (
<img key={photo.id} src={photo.thumbnail_url ?? photo.url} alt={photo.caption ?? 'Foto'} className="h-24 w-full rounded-lg object-cover" />
))}
{entries.slice(0, 6).map((photo) => {
const hidden = photo.status === 'hidden';
return (
<div key={photo.id} className="relative">
<img
src={photo.thumbnail_url ?? photo.url}
alt={photo.caption ?? 'Foto'}
className={`h-24 w-full rounded-lg object-cover ${hidden ? 'opacity-60' : ''}`}
/>
<button
type="button"
onClick={() => handleVisibility(photo, hidden)}
disabled={updatingId === photo.id}
className="absolute inset-x-2 bottom-2 rounded-full bg-white/90 px-2 py-1 text-[11px] font-semibold text-slate-700 shadow disabled:opacity-60"
>
{hidden
? t('events.photos.show', 'Einblenden')
: t('events.photos.hide', 'Ausblenden')}
</button>
</div>
);
})}
</div>
) : (
<p className="text-xs text-slate-500">{t('events.photos.pendingEmpty', 'Aktuell warten keine Fotos auf Freigabe.')}</p>
@@ -642,37 +668,79 @@ function PendingPhotosCard({ photos, navigateToModeration }: { photos: TenantPho
<Button variant="outline" onClick={navigateToModeration} className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
<Camera className="mr-2 h-4 w-4" /> {t('events.photos.openModeration', 'Moderation öffnen')}
</Button>
</CardContent>
</Card>
</div>
</SectionCard>
);
}
function RecentUploadsCard({ photos }: { photos: TenantPhoto[] }) {
function RecentUploadsCard({ slug, photos }: { slug: string; photos: TenantPhoto[] }) {
const { t } = useTranslation('management');
const [entries, setEntries] = React.useState(photos);
const [updatingId, setUpdatingId] = React.useState<number | null>(null);
React.useEffect(() => {
setEntries(photos);
}, [photos]);
const handleVisibility = async (photo: TenantPhoto, visible: boolean) => {
setUpdatingId(photo.id);
try {
const updated = await updatePhotoVisibility(slug, photo.id, visible);
setEntries((prev) => prev.map((item) => (item.id === photo.id ? updated : item)));
toast.success(
visible
? t('events.photos.toastVisible', 'Foto wieder sichtbar gemacht.')
: t('events.photos.toastHidden', 'Foto ausgeblendet.'),
);
} catch (err) {
toast.error(
isAuthError(err)
? t('events.photos.errorAuth', 'Session abgelaufen. Bitte erneut anmelden.')
: t('events.photos.errorVisibility', 'Sichtbarkeit konnte nicht geändert werden.'),
);
} finally {
setUpdatingId(null);
}
};
return (
<Card className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
<Camera className="h-5 w-5 text-sky-500" />
{t('events.photos.recentTitle', 'Neueste Uploads')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
{t('events.photos.recentSubtitle', 'Halte Ausschau nach Highlight-Momenten der Gäste.')}
</CardDescription>
</CardHeader>
<CardContent className="space-y-2 text-sm text-slate-700">
{photos.length ? (
<SectionCard className="space-y-3">
<SectionHeader
eyebrow={t('events.photos.recentBadge', 'Uploads')}
title={t('events.photos.recentTitle', 'Neueste Uploads')}
description={t('events.photos.recentSubtitle', 'Halte Ausschau nach Highlight-Momenten der Gäste.')}
/>
<div className="space-y-2 text-sm text-slate-700 dark:text-slate-300">
{entries.length ? (
<div className="grid grid-cols-3 gap-2">
{photos.slice(0, 6).map((photo) => (
<img key={photo.id} src={photo.thumbnail_url ?? photo.url} alt={photo.caption ?? 'Foto'} className="h-24 w-full rounded-lg object-cover" />
))}
{entries.slice(0, 6).map((photo) => {
const hidden = photo.status === 'hidden';
return (
<div key={photo.id} className="relative">
<img
src={photo.thumbnail_url ?? photo.url}
alt={photo.caption ?? 'Foto'}
className={`h-24 w-full rounded-lg object-cover ${hidden ? 'opacity-60' : ''}`}
/>
<button
type="button"
onClick={() => handleVisibility(photo, hidden)}
disabled={updatingId === photo.id}
className="absolute inset-x-2 bottom-2 rounded-full bg-white/90 px-2 py-1 text-[11px] font-semibold text-slate-700 shadow disabled:opacity-60"
>
{hidden
? t('events.photos.show', 'Einblenden')
: t('events.photos.hide', 'Ausblenden')}
</button>
</div>
);
})}
</div>
) : (
<p className="text-xs text-slate-500">{t('events.photos.recentEmpty', 'Noch keine neuen Uploads.')}</p>
)}
</CardContent>
</Card>
</div>
</SectionCard>
);
}
@@ -691,17 +759,13 @@ function FeedbackCard({ slug }: { slug: string }) {
};
return (
<Card className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-lg text-slate-900">
<MessageSquare className="h-5 w-5 text-slate-500" />
{t('events.feedback.title', 'Wie läuft dein Event?')}
</CardTitle>
<CardDescription className="text-sm text-slate-600">
{t('events.feedback.subtitle', 'Feedback hilft uns, neue Features zu priorisieren.')}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<SectionCard className="space-y-4">
<SectionHeader
eyebrow={t('events.feedback.badge', 'Feedback')}
title={t('events.feedback.title', 'Wie läuft dein Event?')}
description={t('events.feedback.subtitle', 'Feedback hilft uns, neue Features zu priorisieren.')}
/>
<div className="space-y-4">
{error && (
<Alert variant="destructive">
<AlertTitle>{t('events.feedback.errorTitle', 'Feedback konnte nicht gesendet werden.')}</AlertTitle>
@@ -758,8 +822,8 @@ function FeedbackCard({ slug }: { slug: string }) {
>
{busy ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <MessageSquare className="mr-2 h-4 w-4" />} {submitted ? t('events.feedback.submitted', 'Danke!') : t('events.feedback.submit', 'Feedback senden')}
</Button>
</CardContent>
</Card>
</div>
</SectionCard>
);
}