733 lines
27 KiB
TypeScript
733 lines
27 KiB
TypeScript
import React from 'react';
|
||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { ArrowLeft, Camera, Copy, Download, Heart, Loader2, RefreshCw, Share2, Sparkles } from 'lucide-react';
|
||
|
||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
|
||
import { AdminLayout } from '../components/AdminLayout';
|
||
import {
|
||
createQrInvite,
|
||
EventQrInvite,
|
||
EventQrInviteLayout,
|
||
EventStats as TenantEventStats,
|
||
getEvent,
|
||
getEventQrInvites,
|
||
getEventStats,
|
||
TenantEvent,
|
||
toggleEvent,
|
||
revokeEventQrInvite,
|
||
updateEventQrInvite,
|
||
} from '../api';
|
||
import QrInviteCustomizationDialog, { QrLayoutCustomization } from './components/QrInviteCustomizationDialog';
|
||
import { isAuthError } from '../auth/tokens';
|
||
import {
|
||
ADMIN_EVENTS_PATH,
|
||
ADMIN_EVENT_EDIT_PATH,
|
||
ADMIN_EVENT_PHOTOS_PATH,
|
||
ADMIN_EVENT_MEMBERS_PATH,
|
||
ADMIN_EVENT_TASKS_PATH,
|
||
ADMIN_EVENT_TOOLKIT_PATH,
|
||
} from '../constants';
|
||
|
||
interface State {
|
||
event: TenantEvent | null;
|
||
stats: TenantEventStats | null;
|
||
invites: EventQrInvite[];
|
||
inviteLink: string | null;
|
||
error: string | null;
|
||
loading: boolean;
|
||
busy: boolean;
|
||
}
|
||
|
||
export default function EventDetailPage() {
|
||
const params = useParams<{ slug?: string }>();
|
||
const [searchParams] = useSearchParams();
|
||
const slug = params.slug ?? searchParams.get('slug') ?? null;
|
||
const navigate = useNavigate();
|
||
|
||
const [state, setState] = React.useState<State>({
|
||
event: null,
|
||
stats: null,
|
||
invites: [],
|
||
inviteLink: null,
|
||
error: null,
|
||
loading: true,
|
||
busy: false,
|
||
});
|
||
const [creatingInvite, setCreatingInvite] = React.useState(false);
|
||
const [revokingId, setRevokingId] = React.useState<number | null>(null);
|
||
const [customizingInvite, setCustomizingInvite] = React.useState<EventQrInvite | null>(null);
|
||
const [customizerSaving, setCustomizerSaving] = React.useState(false);
|
||
|
||
const load = React.useCallback(async () => {
|
||
if (!slug) {
|
||
setState((prev) => ({ ...prev, loading: false, error: 'Kein Event-Slug angegeben.' }));
|
||
return;
|
||
}
|
||
|
||
setState((prev) => ({ ...prev, loading: true, error: null }));
|
||
try {
|
||
const [eventData, statsData, qrInvites] = await Promise.all([
|
||
getEvent(slug),
|
||
getEventStats(slug),
|
||
getEventQrInvites(slug),
|
||
]);
|
||
setState((prev) => ({
|
||
...prev,
|
||
event: eventData,
|
||
stats: statsData,
|
||
invites: qrInvites,
|
||
loading: false,
|
||
inviteLink: prev.inviteLink,
|
||
}));
|
||
} catch (err) {
|
||
if (isAuthError(err)) return;
|
||
setState((prev) => ({ ...prev, error: 'Event konnte nicht geladen werden.', loading: false, invites: [] }));
|
||
}
|
||
}, [slug]);
|
||
|
||
React.useEffect(() => {
|
||
load();
|
||
}, [load]);
|
||
|
||
async function handleToggle() {
|
||
if (!slug) return;
|
||
setState((prev) => ({ ...prev, busy: true, error: null }));
|
||
try {
|
||
const updated = await toggleEvent(slug);
|
||
setState((prev) => ({
|
||
...prev,
|
||
event: updated,
|
||
stats: prev.stats ? { ...prev.stats, status: updated.status, is_active: Boolean(updated.is_active) } : prev.stats,
|
||
busy: false,
|
||
}));
|
||
} catch (err) {
|
||
if (!isAuthError(err)) {
|
||
setState((prev) => ({ ...prev, error: 'Status konnte nicht angepasst werden.', busy: false }));
|
||
} else {
|
||
setState((prev) => ({ ...prev, busy: false }));
|
||
}
|
||
}
|
||
}
|
||
|
||
async function handleInvite() {
|
||
if (!slug || creatingInvite) return;
|
||
setCreatingInvite(true);
|
||
setState((prev) => ({ ...prev, error: null }));
|
||
try {
|
||
const invite = await createQrInvite(slug);
|
||
setState((prev) => ({
|
||
...prev,
|
||
inviteLink: invite.url,
|
||
invites: [invite, ...prev.invites.filter((existing) => existing.id !== invite.id)],
|
||
}));
|
||
try {
|
||
await navigator.clipboard.writeText(invite.url);
|
||
} catch {
|
||
// clipboard may be unavailable, ignore silently
|
||
}
|
||
} catch (err) {
|
||
if (!isAuthError(err)) {
|
||
setState((prev) => ({ ...prev, error: 'QR-Einladung konnte nicht erzeugt werden.' }));
|
||
}
|
||
}
|
||
setCreatingInvite(false);
|
||
}
|
||
|
||
async function handleCopy(invite: EventQrInvite) {
|
||
try {
|
||
await navigator.clipboard.writeText(invite.url);
|
||
setState((prev) => ({ ...prev, inviteLink: invite.url }));
|
||
} catch (err) {
|
||
console.warn('Clipboard copy failed', err);
|
||
}
|
||
}
|
||
|
||
async function handleRevoke(invite: EventQrInvite) {
|
||
if (!slug || invite.revoked_at) return;
|
||
setRevokingId(invite.id);
|
||
setState((prev) => ({ ...prev, error: null }));
|
||
try {
|
||
const updated = await revokeEventQrInvite(slug, invite.id);
|
||
setState((prev) => ({
|
||
...prev,
|
||
invites: prev.invites.map((existing) => (existing.id === updated.id ? updated : existing)),
|
||
}));
|
||
} catch (err) {
|
||
if (!isAuthError(err)) {
|
||
setState((prev) => ({ ...prev, error: 'QR-Einladung konnte nicht deaktiviert werden.' }));
|
||
}
|
||
} finally {
|
||
setRevokingId(null);
|
||
}
|
||
}
|
||
|
||
function openCustomizer(invite: EventQrInvite) {
|
||
setState((prev) => ({ ...prev, error: null }));
|
||
setCustomizingInvite(invite);
|
||
}
|
||
|
||
function closeCustomizer() {
|
||
if (customizerSaving) {
|
||
return;
|
||
}
|
||
setCustomizingInvite(null);
|
||
}
|
||
|
||
async function handleApplyCustomization(customization: QrLayoutCustomization) {
|
||
if (!slug || !customizingInvite) {
|
||
return;
|
||
}
|
||
setCustomizerSaving(true);
|
||
setState((prev) => ({ ...prev, error: null }));
|
||
try {
|
||
const updated = await updateEventQrInvite(slug, customizingInvite.id, {
|
||
metadata: {
|
||
layout_customization: customization,
|
||
},
|
||
});
|
||
setState((prev) => ({
|
||
...prev,
|
||
invites: prev.invites.map((invite) => (invite.id === updated.id ? updated : invite)),
|
||
}));
|
||
setCustomizerSaving(false);
|
||
setCustomizingInvite(null);
|
||
} catch (err) {
|
||
if (!isAuthError(err)) {
|
||
setState((prev) => ({ ...prev, error: 'QR-Einladung konnte nicht gespeichert werden.' }));
|
||
}
|
||
setCustomizerSaving(false);
|
||
}
|
||
}
|
||
|
||
async function handleResetCustomization() {
|
||
if (!slug || !customizingInvite) {
|
||
return;
|
||
}
|
||
setCustomizerSaving(true);
|
||
setState((prev) => ({ ...prev, error: null }));
|
||
try {
|
||
const updated = await updateEventQrInvite(slug, customizingInvite.id, {
|
||
metadata: {
|
||
layout_customization: null,
|
||
},
|
||
});
|
||
setState((prev) => ({
|
||
...prev,
|
||
invites: prev.invites.map((invite) => (invite.id === updated.id ? updated : invite)),
|
||
}));
|
||
setCustomizerSaving(false);
|
||
setCustomizingInvite(null);
|
||
} catch (err) {
|
||
if (!isAuthError(err)) {
|
||
setState((prev) => ({ ...prev, error: 'Anpassungen konnten nicht zurückgesetzt werden.' }));
|
||
}
|
||
setCustomizerSaving(false);
|
||
}
|
||
}
|
||
|
||
const { event, stats, invites, inviteLink, error, loading, busy } = state;
|
||
const eventDisplayName = event ? renderName(event.name) : '';
|
||
const currentCustomization = React.useMemo(() => {
|
||
if (!customizingInvite) {
|
||
return null;
|
||
}
|
||
const metadata = customizingInvite.metadata as Record<string, unknown> | undefined | null;
|
||
const raw = metadata?.layout_customization;
|
||
return raw && typeof raw === 'object' ? (raw as QrLayoutCustomization) : null;
|
||
}, [customizingInvite]);
|
||
|
||
const actions = (
|
||
<>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => navigate(ADMIN_EVENTS_PATH)}
|
||
className="border-pink-200 text-pink-600 hover:bg-pink-50"
|
||
>
|
||
<ArrowLeft className="h-4 w-4" /> Zurueck zur Liste
|
||
</Button>
|
||
{event && (
|
||
<>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => navigate(ADMIN_EVENT_EDIT_PATH(event.slug))}
|
||
className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50"
|
||
>
|
||
Bearbeiten
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => navigate(ADMIN_EVENT_MEMBERS_PATH(event.slug))}
|
||
className="border-sky-200 text-sky-700 hover:bg-sky-50"
|
||
>
|
||
Mitglieder
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => navigate(ADMIN_EVENT_TASKS_PATH(event.slug))}
|
||
className="border-amber-200 text-amber-600 hover:bg-amber-50"
|
||
>
|
||
Tasks
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => navigate(ADMIN_EVENT_TOOLKIT_PATH(event.slug))}
|
||
className="border-emerald-200 text-emerald-600 hover:bg-emerald-50"
|
||
>
|
||
Event-Day Toolkit
|
||
</Button>
|
||
</>
|
||
)}
|
||
</>
|
||
);
|
||
|
||
if (!slug) {
|
||
return (
|
||
<AdminLayout title="Event nicht gefunden" subtitle="Bitte waehle ein Event aus der Uebersicht." actions={actions}>
|
||
<Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
|
||
<CardContent className="p-6 text-sm text-slate-600">
|
||
Ohne gueltigen Slug koennen wir keine Daten laden. Kehre zur Event-Liste zurueck und waehle dort ein Event aus.
|
||
</CardContent>
|
||
</Card>
|
||
</AdminLayout>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<AdminLayout
|
||
title={event ? renderName(event.name) : 'Event wird geladen'}
|
||
subtitle="Verwalte Status, Einladungen und Statistiken deines Events."
|
||
actions={actions}
|
||
>
|
||
{error && (
|
||
<Alert variant="destructive">
|
||
<AlertTitle>Aktion fehlgeschlagen</AlertTitle>
|
||
<AlertDescription>{error}</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{loading ? (
|
||
<DetailSkeleton />
|
||
) : event ? (
|
||
<div className="grid gap-6 lg:grid-cols-[2fr,1fr]">
|
||
<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" /> Eventdaten
|
||
</CardTitle>
|
||
<CardDescription className="text-sm text-slate-600">
|
||
Grundlegende Informationen fuer Gaeste und Moderation.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4 text-sm text-slate-700">
|
||
<InfoRow label="Slug" value={event.slug} />
|
||
<InfoRow label="Status" value={event.status === 'published' ? 'Veroeffentlicht' : event.status} />
|
||
<InfoRow label="Datum" value={formatDate(event.event_date)} />
|
||
<InfoRow label="Aktiv" value={event.is_active ? 'Aktiv' : 'Deaktiviert'} />
|
||
<div className="flex flex-wrap gap-3 pt-2">
|
||
<Button
|
||
onClick={handleToggle}
|
||
disabled={busy}
|
||
className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
|
||
>
|
||
{busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||
{event.is_active ? 'Deaktivieren' : 'Aktivieren'}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => navigate(ADMIN_EVENT_PHOTOS_PATH(event.slug))}
|
||
className="border-sky-200 text-sky-700 hover:bg-sky-50"
|
||
>
|
||
<Camera className="h-4 w-4" /> Fotos moderieren
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card id="qr-invites" className="border-0 bg-white/90 shadow-xl shadow-amber-100/60">
|
||
<CardHeader className="space-y-2">
|
||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||
<Share2 className="h-5 w-5 text-amber-500" /> QR-Einladungen & Drucklayouts
|
||
</CardTitle>
|
||
<CardDescription className="text-sm text-slate-600">
|
||
Erzeuge QR-Codes für eure Gäste und ladet direkt passende A4-Vorlagen – inklusive Branding und Anleitungen –
|
||
zum Ausdrucken herunter.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4 text-sm text-slate-700">
|
||
<div className="space-y-2 rounded-xl border border-amber-100 bg-amber-50/70 p-3 text-xs text-amber-800">
|
||
<p>
|
||
Drucke die Layouts aus, platziere sie am Eventort oder teile den QR-Link digital. Du kannst Einladungen
|
||
jederzeit erneuern oder deaktivieren.
|
||
</p>
|
||
{invites.length > 0 && (
|
||
<p className="flex items-center gap-2 text-[11px] uppercase tracking-wide text-amber-600">
|
||
Aktive QR-Einladungen: {invites.filter((invite) => invite.is_active && !invite.revoked_at).length} · Gesamt:{' '}
|
||
{invites.length}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<Button onClick={handleInvite} disabled={creatingInvite} className="w-full">
|
||
{creatingInvite ? <Loader2 className="h-4 w-4 animate-spin" /> : <Share2 className="h-4 w-4" />}
|
||
QR-Einladung erstellen
|
||
</Button>
|
||
|
||
{inviteLink && (
|
||
<p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 font-mono text-xs text-amber-800">
|
||
{inviteLink}
|
||
</p>
|
||
)}
|
||
|
||
<div className="space-y-3">
|
||
{invites.length > 0 ? (
|
||
invites.map((invite) => (
|
||
<InvitationCard
|
||
key={invite.id}
|
||
invite={invite}
|
||
onCopy={() => handleCopy(invite)}
|
||
onRevoke={() => handleRevoke(invite)}
|
||
revoking={revokingId === invite.id}
|
||
onCustomize={() => openCustomizer(invite)}
|
||
eventName={eventDisplayName}
|
||
/>
|
||
))
|
||
) : (
|
||
<div className="rounded-lg border border-slate-200 bg-white/80 p-4 text-xs text-slate-500">
|
||
Es gibt noch keine QR-Einladungen. Erstelle jetzt eine Einladung, um Layouts mit QR-Code zu generieren
|
||
und zu teilen.
|
||
</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-0 bg-white/90 shadow-xl shadow-sky-100/60 lg:col-span-2">
|
||
<CardHeader className="space-y-2">
|
||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||
<Heart className="h-5 w-5 text-sky-500" /> Performance
|
||
</CardTitle>
|
||
<CardDescription className="text-sm text-slate-600">
|
||
Kennzahlen zu Uploads, Highlights und Interaktion.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="grid gap-3 sm:grid-cols-2 md:grid-cols-4">
|
||
<StatChip label="Fotos" value={stats?.total ?? 0} />
|
||
<StatChip label="Featured" value={stats?.featured ?? 0} />
|
||
<StatChip label="Likes" value={stats?.likes ?? 0} />
|
||
<StatChip label="Uploads (7 Tage)" value={stats?.recent_uploads ?? 0} />
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
) : (
|
||
<Alert variant="destructive">
|
||
<AlertTitle>Event nicht gefunden</AlertTitle>
|
||
<AlertDescription>Bitte pruefe den Slug und versuche es erneut.</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
<QrInviteCustomizationDialog
|
||
open={Boolean(customizingInvite)}
|
||
onClose={closeCustomizer}
|
||
onSubmit={handleApplyCustomization}
|
||
onReset={handleResetCustomization}
|
||
saving={customizerSaving}
|
||
inviteUrl={customizingInvite?.url ?? ''}
|
||
eventName={eventDisplayName}
|
||
layouts={customizingInvite?.layouts ?? []}
|
||
initialCustomization={currentCustomization}
|
||
/>
|
||
</AdminLayout>
|
||
);
|
||
}
|
||
|
||
function DetailSkeleton() {
|
||
return (
|
||
<div className="space-y-4">
|
||
{Array.from({ length: 3 }).map((_, index) => (
|
||
<div key={index} className="h-40 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function InfoRow({ label, value }: { label: string; value: string }) {
|
||
return (
|
||
<div className="flex flex-col gap-1 rounded-xl border border-pink-100 bg-white/70 px-3 py-2">
|
||
<span className="text-xs uppercase tracking-wide text-slate-500">{label}</span>
|
||
<span className="text-sm font-medium text-slate-800">{value}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function StatChip({ label, value }: { label: string; value: string | number }) {
|
||
return (
|
||
<div className="rounded-2xl border border-sky-100 bg-white/80 px-4 py-3 text-center shadow-sm">
|
||
<div className="text-xs uppercase tracking-wide text-slate-500">{label}</div>
|
||
<div className="text-lg font-semibold text-slate-900">{value}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function InvitationCard({
|
||
invite,
|
||
onCopy,
|
||
onRevoke,
|
||
revoking,
|
||
onCustomize,
|
||
eventName,
|
||
}: {
|
||
invite: EventQrInvite;
|
||
onCopy: () => void;
|
||
onRevoke: () => void;
|
||
revoking: boolean;
|
||
onCustomize: () => void;
|
||
eventName: string;
|
||
}) {
|
||
const { t } = useTranslation('management');
|
||
const status = getInviteStatus(invite);
|
||
const layouts = Array.isArray(invite.layouts) ? invite.layouts : [];
|
||
const usageLabel = invite.usage_limit ? `${invite.usage_count} / ${invite.usage_limit}` : `${invite.usage_count}`;
|
||
const metadata = (invite.metadata ?? {}) as Record<string, unknown>;
|
||
const isAutoGenerated = Boolean(metadata.auto_generated);
|
||
const customization = (metadata.layout_customization ?? null) as QrLayoutCustomization | null;
|
||
const preferredLayoutId = customization?.layout_id ?? (layouts[0]?.id ?? null);
|
||
const hasCustomization = customization ? Object.keys(customization).length > 0 : false;
|
||
|
||
const statusClassname =
|
||
status === 'Aktiv'
|
||
? 'bg-emerald-100 text-emerald-700'
|
||
: status === 'Abgelaufen'
|
||
? 'bg-orange-100 text-orange-700'
|
||
: 'bg-slate-200 text-slate-700';
|
||
|
||
return (
|
||
<div className="flex flex-col gap-4 rounded-2xl border border-amber-100 bg-white/90 p-4 shadow-md shadow-amber-100/40">
|
||
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
||
<div className="space-y-3">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className="text-sm font-semibold text-slate-900">{invite.label?.trim() || `Einladung #${invite.id}`}</span>
|
||
<span className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusClassname}`}>{status}</span>
|
||
{isAutoGenerated ? (
|
||
<span className="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-700">
|
||
Standard
|
||
</span>
|
||
) : null}
|
||
{hasCustomization ? (
|
||
<span className="rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-medium text-emerald-700">
|
||
{t('tasks.customizer.badge', 'Angepasst')}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className="break-all rounded-md border border-slate-200 bg-slate-50 px-2 py-1 font-mono text-xs text-slate-700">
|
||
{invite.url}
|
||
</span>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={onCopy}
|
||
className="border-amber-200 text-amber-700 hover:bg-amber-100"
|
||
>
|
||
<Copy className="mr-1 h-3 w-3" />
|
||
Link kopieren
|
||
</Button>
|
||
</div>
|
||
<div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">
|
||
<span>Nutzung: {usageLabel}</span>
|
||
{invite.expires_at ? <span>Gültig bis {formatDateTime(invite.expires_at)}</span> : null}
|
||
{invite.created_at ? <span>Erstellt am {formatDateTime(invite.created_at)}</span> : null}
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
variant={hasCustomization ? 'default' : 'outline'}
|
||
size="sm"
|
||
onClick={onCustomize}
|
||
className={hasCustomization ? 'bg-amber-500 text-white hover:bg-amber-500/90 border-amber-200' : 'border-amber-200 text-amber-700 hover:bg-amber-100'}
|
||
>
|
||
<Sparkles className="mr-1 h-3 w-3" />
|
||
{t('tasks.customizer.actionLabel', 'Layout anpassen')}
|
||
</Button>
|
||
{invite.layouts_url ? (
|
||
<Button
|
||
asChild
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-amber-200 text-amber-700 hover:bg-amber-100"
|
||
>
|
||
<a href={invite.layouts_url} target="_blank" rel="noreferrer">
|
||
<Download className="mr-1 h-3 w-3" />
|
||
Layout-Übersicht
|
||
</a>
|
||
</Button>
|
||
) : null}
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={onRevoke}
|
||
disabled={revoking || invite.revoked_at !== null || !invite.is_active}
|
||
className="text-slate-600 hover:bg-slate-100 disabled:opacity-50"
|
||
>
|
||
{revoking ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Deaktivieren'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{layouts.length > 0 ? (
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
{layouts.map((layout) => (
|
||
<LayoutPreviewCard
|
||
key={layout.id}
|
||
layout={layout}
|
||
customization={layout.id === preferredLayoutId ? customization : null}
|
||
selected={layout.id === preferredLayoutId}
|
||
eventName={eventName}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : invite.layouts_url ? (
|
||
<div className="rounded-xl border border-amber-100 bg-amber-50/60 p-3 text-xs text-amber-800">
|
||
Für diese Einladung stehen Layouts bereit. Öffne die Übersicht, um PDF- oder SVG-Versionen zu laden.
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function LayoutPreviewCard({
|
||
layout,
|
||
customization,
|
||
selected,
|
||
eventName,
|
||
}: {
|
||
layout: EventQrInviteLayout;
|
||
customization: QrLayoutCustomization | null;
|
||
selected: boolean;
|
||
eventName: string;
|
||
}) {
|
||
const gradient = customization?.background_gradient ?? layout.preview?.background_gradient;
|
||
const stops = Array.isArray(gradient?.stops) ? gradient?.stops ?? [] : [];
|
||
const gradientStyle = stops.length
|
||
? {
|
||
backgroundImage: `linear-gradient(${gradient?.angle ?? customization?.background_gradient?.angle ?? 135}deg, ${stops.join(', ')})`,
|
||
}
|
||
: {
|
||
backgroundColor: customization?.background_color ?? layout.preview?.background ?? '#F8FAFC',
|
||
};
|
||
const textColor = customization?.text_color ?? layout.preview?.text ?? '#0F172A';
|
||
const badgeColor = customization?.badge_color ?? customization?.accent_color ?? layout.preview?.accent ?? '#0EA5E9';
|
||
|
||
const formats = Array.isArray(layout.formats) ? layout.formats : [];
|
||
const headline = customization?.headline ?? layout.name ?? eventName;
|
||
const subtitle = customization?.subtitle ?? layout.subtitle ?? '';
|
||
const description = customization?.description ?? layout.description ?? '';
|
||
const instructions = customization?.instructions ?? [];
|
||
|
||
return (
|
||
<div
|
||
className={`overflow-hidden rounded-xl border bg-white shadow-sm ${selected ? 'border-amber-300 ring-2 ring-amber-200' : 'border-amber-100'}`}
|
||
>
|
||
<div className="relative h-28">
|
||
<div className="absolute inset-0" style={gradientStyle} />
|
||
<div className="absolute inset-0 flex flex-col justify-between p-3 text-xs" style={{ color: textColor }}>
|
||
<span
|
||
className="w-fit rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
|
||
style={{ backgroundColor: badgeColor, color: '#ffffff' }}
|
||
>
|
||
QR-Layout
|
||
</span>
|
||
<div>
|
||
<div className="text-sm font-semibold leading-tight">{headline}</div>
|
||
{subtitle ? <div className="text-[11px] opacity-80">{subtitle}</div> : null}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-3 p-3">
|
||
{description ? <p className="text-xs text-slate-600">{description}</p> : null}
|
||
{instructions.length > 0 ? (
|
||
<ul className="space-y-1 text-[11px] text-slate-500">
|
||
{instructions.slice(0, 3).map((item, index) => (
|
||
<li key={`${layout.id}-instruction-${index}`}>• {item}</li>
|
||
))}
|
||
</ul>
|
||
) : null}
|
||
<div className="flex flex-wrap gap-2">
|
||
{formats.map((format) => {
|
||
const key = String(format ?? '').toLowerCase();
|
||
const href = layout.download_urls?.[key] ?? layout.download_urls?.[String(format ?? '')] ?? null;
|
||
if (!href) {
|
||
return null;
|
||
}
|
||
|
||
const label = String(format ?? '').toUpperCase() || 'PDF';
|
||
|
||
return (
|
||
<Button
|
||
asChild
|
||
key={`${layout.id}-${label}`}
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-amber-200 text-amber-700 hover:bg-amber-100"
|
||
>
|
||
<a href={href} target="_blank" rel="noreferrer">
|
||
<Download className="mr-1 h-3 w-3" />
|
||
{label}
|
||
</a>
|
||
</Button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function formatDate(iso: string | null): string {
|
||
if (!iso) return 'Noch kein Datum';
|
||
const date = new Date(iso);
|
||
if (Number.isNaN(date.getTime())) {
|
||
return 'Unbekanntes Datum';
|
||
}
|
||
return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
|
||
}
|
||
|
||
function formatDateTime(iso: string | null): string {
|
||
if (!iso) return 'unbekannt';
|
||
const date = new Date(iso);
|
||
if (Number.isNaN(date.getTime())) {
|
||
return 'unbekannt';
|
||
}
|
||
return date.toLocaleString('de-DE', {
|
||
day: '2-digit',
|
||
month: '2-digit',
|
||
year: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
}
|
||
|
||
function getInviteStatus(invite: EventQrInvite): 'Aktiv' | 'Deaktiviert' | 'Abgelaufen' {
|
||
if (invite.revoked_at) return 'Deaktiviert';
|
||
if (invite.expires_at) {
|
||
const expiry = new Date(invite.expires_at);
|
||
if (!Number.isNaN(expiry.getTime()) && expiry.getTime() < Date.now()) {
|
||
return 'Abgelaufen';
|
||
}
|
||
}
|
||
return invite.is_active ? 'Aktiv' : 'Deaktiviert';
|
||
}
|
||
|
||
function renderName(name: TenantEvent['name']): string {
|
||
if (typeof name === 'string') {
|
||
return name;
|
||
}
|
||
if (name && typeof name === 'object') {
|
||
return name.de ?? name.en ?? Object.values(name)[0] ?? 'Unbenanntes Event';
|
||
}
|
||
return 'Unbenanntes Event';
|
||
}
|