rework of the event admin UI
This commit is contained in:
Codex Agent
@@ -0,0 +1,254 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
AlertTriangle,
|
||||
Camera,
|
||||
ClipboardList,
|
||||
PlugZap,
|
||||
QrCode,
|
||||
Sparkles,
|
||||
CalendarDays,
|
||||
} from 'lucide-react';
|
||||
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import type { TenantEvent, DashboardSummary } from '../../api';
|
||||
import type { LimitWarning } from '../../lib/limitWarnings';
|
||||
import { resolveEventDisplayName, formatEventDate, formatEventStatusLabel, resolveEngagementMode } from '../../lib/events';
|
||||
|
||||
type DashboardEventFocusCardProps = {
|
||||
event: TenantEvent | null;
|
||||
limitWarnings: LimitWarning[];
|
||||
summary: DashboardSummary | null;
|
||||
dateLocale: string;
|
||||
onCreateEvent: () => void;
|
||||
onOpenEvent: () => void;
|
||||
onOpenPhotos: () => void;
|
||||
onOpenInvites: () => void;
|
||||
onOpenTasks: () => void;
|
||||
onOpenPhotobooth: () => void;
|
||||
};
|
||||
|
||||
export function DashboardEventFocusCard({
|
||||
event,
|
||||
limitWarnings,
|
||||
summary,
|
||||
dateLocale,
|
||||
onCreateEvent,
|
||||
onOpenEvent,
|
||||
onOpenPhotos,
|
||||
onOpenInvites,
|
||||
onOpenTasks,
|
||||
onOpenPhotobooth,
|
||||
}: DashboardEventFocusCardProps) {
|
||||
const { t } = useTranslation('dashboard', { keyPrefix: 'dashboard.eventFocus' });
|
||||
const { t: tc } = useTranslation('common');
|
||||
|
||||
if (!event) {
|
||||
return (
|
||||
<Card className="border border-dashed border-rose-200/80 bg-white/80 shadow-sm shadow-rose-100/40 dark:border-white/20 dark:bg-white/5">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-rose-600 dark:text-rose-200">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
{t('empty.eyebrow', 'Noch kein Event aktiv')}
|
||||
</div>
|
||||
<CardTitle className="text-lg text-slate-900 dark:text-white">
|
||||
{t('empty.title', 'Leg mit deinem ersten Event los')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600 dark:text-slate-300">
|
||||
{t('empty.description', 'Importiere ein Mission Pack, lege Branding fest und teile sofort den Gästelink.')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button className="rounded-full bg-brand-rose px-6 text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]" onClick={onCreateEvent}>
|
||||
{t('empty.cta', 'Event anlegen')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const eventName = resolveEventDisplayName(event);
|
||||
const dateLabel = formatEventDate(event.event_date, dateLocale) ?? t('noDate', 'Kein Datum gesetzt');
|
||||
const statusLabel = formatEventStatusLabel(event.status ?? null, tc);
|
||||
const isLive = Boolean(event.is_active || event.status === 'published');
|
||||
const engagementMode = resolveEngagementMode(event);
|
||||
|
||||
const overviewStats = [
|
||||
{
|
||||
key: 'uploads',
|
||||
label: t('stats.uploads', 'Uploads gesamt'),
|
||||
value: Number(event.photo_count ?? 0).toLocaleString(),
|
||||
},
|
||||
{
|
||||
key: 'likes',
|
||||
label: t('stats.likes', 'Likes'),
|
||||
value: Number(event.like_count ?? 0).toLocaleString(),
|
||||
},
|
||||
{
|
||||
key: 'tasks',
|
||||
label: t('stats.tasks', 'Aktive Aufgaben'),
|
||||
value: Number(event.tasks_count ?? 0).toLocaleString(),
|
||||
},
|
||||
{
|
||||
key: 'invites',
|
||||
label: t('stats.invites', 'Einladungen live'),
|
||||
value: Number(event.active_invites_count ?? event.total_invites_count ?? 0).toLocaleString(),
|
||||
},
|
||||
];
|
||||
|
||||
const quickActions = [
|
||||
{
|
||||
key: 'photos',
|
||||
label: t('actions.photos', 'Uploads prüfen'),
|
||||
description: t('actions.photosHint', 'Neueste Uploads ansehen und verstecken.'),
|
||||
icon: Camera,
|
||||
handler: onOpenPhotos,
|
||||
},
|
||||
{
|
||||
key: 'invites',
|
||||
label: t('actions.invites', 'QR & Einladungen'),
|
||||
description: t('actions.invitesHint', 'Layouts exportieren oder Links kopieren.'),
|
||||
icon: QrCode,
|
||||
handler: onOpenInvites,
|
||||
},
|
||||
{
|
||||
key: 'tasks',
|
||||
label: t('actions.tasks', 'Mission Packs & Emotionen'),
|
||||
description: t('actions.tasksHint', 'Kollektionen importieren und Emotionen aktivieren.'),
|
||||
icon: ClipboardList,
|
||||
handler: onOpenTasks,
|
||||
},
|
||||
{
|
||||
key: 'photobooth',
|
||||
label: t('actions.photobooth', 'Photobooth binden'),
|
||||
description: t('actions.photoboothHint', 'FTP-Daten freigeben und Rate-Limit prüfen.'),
|
||||
icon: PlugZap,
|
||||
handler: onOpenPhotobooth,
|
||||
},
|
||||
];
|
||||
|
||||
const latestUploads = summary?.new_photos ?? 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card className="border border-slate-200 bg-white/90 shadow-lg shadow-rose-100/40 dark:border-white/10 dark:bg-white/5">
|
||||
<CardHeader className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-[0.35em] text-rose-500 dark:text-rose-200">
|
||||
{t('eyebrow', 'Aktuelles Event')}
|
||||
</div>
|
||||
<CardTitle className="mt-2 text-2xl font-semibold text-slate-900 dark:text-white">
|
||||
{eventName}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-1 text-sm text-slate-600 dark:text-slate-300">
|
||||
{t('dateLabel', { defaultValue: 'Eventdatum: {{date}}', date: dateLabel })}
|
||||
</CardDescription>
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
<Badge className={isLive ? 'bg-emerald-500 text-white' : 'bg-slate-200 text-slate-800'}>
|
||||
{statusLabel}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs font-semibold">
|
||||
{isLive ? t('badges.live', 'Live für Gäste') : t('badges.hidden', 'Noch versteckt')}
|
||||
</Badge>
|
||||
{engagementMode === 'photo_only' ? (
|
||||
<Badge variant="outline" className="text-xs font-semibold">
|
||||
{t('badges.photoOnly', 'Nur Foto-Modus')}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs font-semibold">
|
||||
{t('badges.missionMode', 'Mission Cards aktiv')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button variant="outline" size="sm" className="rounded-full border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40" onClick={onOpenEvent}>
|
||||
<CalendarDays className="mr-2 h-4 w-4" />
|
||||
{t('viewEvent', 'Event öffnen')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{overviewStats.map((stat) => (
|
||||
<div key={stat.key} className="rounded-2xl border border-slate-200 bg-white/80 p-4 text-sm text-slate-600 dark:border-white/10 dark:bg-white/5">
|
||||
<p className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-300">{stat.label}</p>
|
||||
<p className="mt-2 text-2xl font-semibold text-slate-900 dark:text-white">{stat.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 lg:grid-cols-2">
|
||||
{quickActions.map((action) => (
|
||||
<button
|
||||
key={action.key}
|
||||
type="button"
|
||||
onClick={action.handler}
|
||||
className="flex items-start gap-3 rounded-2xl border border-slate-200 bg-white/90 p-4 text-left transition hover:border-rose-200 hover:bg-rose-50 dark:border-white/10 dark:bg-white/5"
|
||||
>
|
||||
<action.icon className="mt-1 h-5 w-5 text-rose-500 dark:text-rose-200" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-900 dark:text-white">{action.label}</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-300">{action.description}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<div className="rounded-2xl border border-slate-200 bg-sky-50 p-4 text-slate-800 shadow-inner shadow-sky-100 dark:border-white/10 dark:bg-white/10 dark:text-white">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-slate-500">{t('latestUploads.title', 'Neueste Uploads')}</p>
|
||||
<p className="mt-2 text-3xl font-semibold">{latestUploads}</p>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-300">{t('latestUploads.hint', 'Gerade eingetroffen – prüfe sie schnell.')}</p>
|
||||
<Button size="sm" variant="secondary" className="mt-4" onClick={onOpenPhotos}>
|
||||
{t('actions.photos', 'Uploads prüfen')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-slate-200 bg-white/80 p-4 text-slate-800 shadow-inner shadow-slate-100 dark:border-white/10 dark:bg-white/5 dark:text-white">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-slate-500">{t('invitesCard.title', 'Galerie & Einladungen')}</p>
|
||||
<p className="mt-2 text-sm text-slate-600 dark:text-slate-200">
|
||||
{t('invitesCard.description', 'Kopiere den Gästelink oder exportiere QR-Karten.')}
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<Button size="sm" variant="outline" onClick={onOpenInvites}>
|
||||
{t('invitesCard.cta', 'Links verwalten')}
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={onOpenPhotobooth}>
|
||||
{t('invitesCard.secondaryCta', 'Photobooth öffnen')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{limitWarnings.length > 0 && (
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{limitWarnings.map((warning) => (
|
||||
<Alert
|
||||
key={warning.id}
|
||||
variant={warning.tone === 'danger' ? 'destructive' : 'default'}
|
||||
className={warning.tone === 'warning' ? 'border-amber-400/50 bg-amber-50 text-amber-900 dark:border-amber-300/40 dark:bg-amber-500/10 dark:text-amber-100' : undefined}
|
||||
>
|
||||
<AlertTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
{t(`limitWarnings.${warning.scope}`, {
|
||||
defaultValue:
|
||||
warning.scope === 'photos'
|
||||
? 'Fotos'
|
||||
: warning.scope === 'guests'
|
||||
? 'Gäste'
|
||||
: 'Galerie',
|
||||
})}
|
||||
</AlertTitle>
|
||||
<AlertDescription className="text-sm">{warning.message}</AlertDescription>
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user