459 lines
16 KiB
TypeScript
459 lines
16 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
|
import { ArrowLeft, Camera, 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 {
|
|
createInviteLink,
|
|
EventJoinToken,
|
|
EventStats as TenantEventStats,
|
|
getEvent,
|
|
getEventJoinTokens,
|
|
getEventStats,
|
|
TenantEvent,
|
|
toggleEvent,
|
|
revokeEventJoinToken,
|
|
} from '../api';
|
|
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,
|
|
} from '../constants';
|
|
|
|
interface State {
|
|
event: TenantEvent | null;
|
|
stats: TenantEventStats | null;
|
|
tokens: EventJoinToken[];
|
|
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,
|
|
tokens: [],
|
|
inviteLink: null,
|
|
error: null,
|
|
loading: true,
|
|
busy: false,
|
|
});
|
|
const [creatingToken, setCreatingToken] = React.useState(false);
|
|
const [revokingId, setRevokingId] = React.useState<number | null>(null);
|
|
|
|
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, joinTokens] = await Promise.all([
|
|
getEvent(slug),
|
|
getEventStats(slug),
|
|
getEventJoinTokens(slug),
|
|
]);
|
|
setState((prev) => ({
|
|
...prev,
|
|
event: eventData,
|
|
stats: statsData,
|
|
tokens: joinTokens,
|
|
loading: false,
|
|
inviteLink: prev.inviteLink,
|
|
}));
|
|
} catch (err) {
|
|
if (isAuthError(err)) return;
|
|
setState((prev) => ({ ...prev, error: 'Event konnte nicht geladen werden.', loading: false, tokens: [] }));
|
|
}
|
|
}, [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 || creatingToken) return;
|
|
setCreatingToken(true);
|
|
setState((prev) => ({ ...prev, error: null }));
|
|
try {
|
|
const token = await createInviteLink(slug);
|
|
setState((prev) => ({
|
|
...prev,
|
|
inviteLink: token.url,
|
|
tokens: [token, ...prev.tokens.filter((t) => t.id !== token.id)],
|
|
}));
|
|
try {
|
|
await navigator.clipboard.writeText(token.url);
|
|
} catch {
|
|
// clipboard may be unavailable, ignore silently
|
|
}
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setState((prev) => ({ ...prev, error: 'Einladungslink konnte nicht erzeugt werden.' }));
|
|
}
|
|
}
|
|
setCreatingToken(false);
|
|
}
|
|
|
|
async function handleCopy(token: EventJoinToken) {
|
|
try {
|
|
await navigator.clipboard.writeText(token.url);
|
|
setState((prev) => ({ ...prev, inviteLink: token.url }));
|
|
} catch (err) {
|
|
console.warn('Clipboard copy failed', err);
|
|
}
|
|
}
|
|
|
|
async function handleRevoke(token: EventJoinToken) {
|
|
if (!slug || token.revoked_at) return;
|
|
setRevokingId(token.id);
|
|
setState((prev) => ({ ...prev, error: null }));
|
|
try {
|
|
const updated = await revokeEventJoinToken(slug, token.id);
|
|
setState((prev) => ({
|
|
...prev,
|
|
tokens: prev.tokens.map((existing) => (existing.id === updated.id ? updated : existing)),
|
|
}));
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setState((prev) => ({ ...prev, error: 'Token konnte nicht deaktiviert werden.' }));
|
|
}
|
|
} finally {
|
|
setRevokingId(null);
|
|
}
|
|
}
|
|
|
|
const { event, stats, tokens, inviteLink, error, loading, busy } = state;
|
|
|
|
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>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
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 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" /> Einladungen
|
|
</CardTitle>
|
|
<CardDescription className="text-sm text-slate-600">
|
|
Generiere Links um Gaeste direkt in das Event zu fuehren.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 text-sm text-slate-700">
|
|
<Button onClick={handleInvite} disabled={creatingToken} className="w-full">
|
|
{creatingToken ? <Loader2 className="h-4 w-4 animate-spin" /> : <Share2 className="h-4 w-4" />}
|
|
Einladungslink erzeugen
|
|
</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">
|
|
{tokens.length > 0 ? (
|
|
tokens.map((token) => (
|
|
<JoinTokenRow
|
|
key={token.id}
|
|
token={token}
|
|
onCopy={() => handleCopy(token)}
|
|
onRevoke={() => handleRevoke(token)}
|
|
revoking={revokingId === token.id}
|
|
/>
|
|
))
|
|
) : (
|
|
<p className="text-xs text-slate-500">
|
|
Noch keine Einladungen erstellt. Nutze den Button, um einen neuen QR-Link zu generieren.
|
|
</p>
|
|
)}
|
|
</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>
|
|
)}
|
|
</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 JoinTokenRow({
|
|
token,
|
|
onCopy,
|
|
onRevoke,
|
|
revoking,
|
|
}: {
|
|
token: EventJoinToken;
|
|
onCopy: () => void;
|
|
onRevoke: () => void;
|
|
revoking: boolean;
|
|
}) {
|
|
const status = getTokenStatus(token);
|
|
return (
|
|
<div className="flex flex-col gap-3 rounded-xl border border-amber-100 bg-amber-50/60 p-3 md:flex-row md:items-center md:justify-between">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-semibold text-slate-800">{token.label || `Einladung #${token.id}`}</span>
|
|
<span
|
|
className={`rounded-full px-2 py-0.5 text-xs font-medium ${
|
|
status === 'Aktiv'
|
|
? 'bg-emerald-100 text-emerald-700'
|
|
: status === 'Abgelaufen'
|
|
? 'bg-orange-100 text-orange-700'
|
|
: 'bg-slate-200 text-slate-700'
|
|
}`}
|
|
>
|
|
{status}
|
|
</span>
|
|
</div>
|
|
<p className="break-all font-mono text-xs text-slate-600">{token.url}</p>
|
|
<div className="flex flex-wrap gap-3 text-xs text-slate-500">
|
|
<span>
|
|
Nutzung: {token.usage_count}
|
|
{token.usage_limit ? ` / ${token.usage_limit}` : ''}
|
|
</span>
|
|
{token.expires_at && <span>Gültig bis {formatDateTime(token.expires_at)}</span>}
|
|
{token.created_at && <span>Erstellt {formatDateTime(token.created_at)}</span>}
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" onClick={onCopy} className="border-amber-200 text-amber-700 hover:bg-amber-100">
|
|
Kopieren
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onRevoke}
|
|
disabled={revoking || token.revoked_at !== null || !token.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>
|
|
);
|
|
}
|
|
|
|
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 getTokenStatus(token: EventJoinToken): 'Aktiv' | 'Deaktiviert' | 'Abgelaufen' {
|
|
if (token.revoked_at) return 'Deaktiviert';
|
|
if (token.expires_at) {
|
|
const expiry = new Date(token.expires_at);
|
|
if (!Number.isNaN(expiry.getTime()) && expiry.getTime() < Date.now()) {
|
|
return 'Abgelaufen';
|
|
}
|
|
}
|
|
return token.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';
|
|
}
|
|
|