rearranged tenant admin layout, invite layouts now visible and manageable
This commit is contained in:
Codex Agent
@@ -1,7 +1,6 @@
|
||||
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 { ArrowLeft, Camera, Heart, Loader2, RefreshCw, Sparkles, QrCode } from 'lucide-react';
|
||||
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -9,19 +8,12 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
|
||||
|
||||
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,
|
||||
@@ -30,13 +22,12 @@ import {
|
||||
ADMIN_EVENT_MEMBERS_PATH,
|
||||
ADMIN_EVENT_TASKS_PATH,
|
||||
ADMIN_EVENT_TOOLKIT_PATH,
|
||||
ADMIN_EVENT_INVITES_PATH,
|
||||
} from '../constants';
|
||||
|
||||
interface State {
|
||||
event: TenantEvent | null;
|
||||
stats: TenantEventStats | null;
|
||||
invites: EventQrInvite[];
|
||||
inviteLink: string | null;
|
||||
error: string | null;
|
||||
loading: boolean;
|
||||
busy: boolean;
|
||||
@@ -51,16 +42,10 @@ export default function EventDetailPage() {
|
||||
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) {
|
||||
@@ -70,22 +55,19 @@ export default function EventDetailPage() {
|
||||
|
||||
setState((prev) => ({ ...prev, loading: true, error: null }));
|
||||
try {
|
||||
const [eventData, statsData, qrInvites] = await Promise.all([
|
||||
const [eventData, statsData] = 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: [] }));
|
||||
setState((prev) => ({ ...prev, error: 'Event konnte nicht geladen werden.', loading: false }));
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
@@ -113,132 +95,10 @@ export default function EventDetailPage() {
|
||||
}
|
||||
}
|
||||
|
||||
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 { event, stats, 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 activeInvitesCount = event?.active_invites_count ?? 0;
|
||||
const totalInvitesCount = event?.total_invites_count ?? activeInvitesCount;
|
||||
|
||||
const actions = (
|
||||
<>
|
||||
@@ -247,7 +107,7 @@ export default function EventDetailPage() {
|
||||
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
|
||||
<ArrowLeft className="h-4 w-4" /> Zurück zur Liste
|
||||
</Button>
|
||||
{event && (
|
||||
<>
|
||||
@@ -272,6 +132,13 @@ export default function EventDetailPage() {
|
||||
>
|
||||
Tasks
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate(ADMIN_EVENT_INVITES_PATH(event.slug))}
|
||||
className="border-amber-200 text-amber-600 hover:bg-amber-50"
|
||||
>
|
||||
QR & Einladungen
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate(ADMIN_EVENT_TOOLKIT_PATH(event.slug))}
|
||||
@@ -286,10 +153,10 @@ export default function EventDetailPage() {
|
||||
|
||||
if (!slug) {
|
||||
return (
|
||||
<AdminLayout title="Event nicht gefunden" subtitle="Bitte waehle ein Event aus der Uebersicht." actions={actions}>
|
||||
<AdminLayout title="Event nicht gefunden" subtitle="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">
|
||||
Ohne gueltigen Slug koennen wir keine Daten laden. Kehre zur Event-Liste zurueck und waehle dort ein Event aus.
|
||||
Ohne gültigen Slug können wir keine Daten laden. Kehre zur Event-Liste zurück und wähle dort ein Event aus.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AdminLayout>
|
||||
@@ -319,12 +186,12 @@ export default function EventDetailPage() {
|
||||
<Sparkles className="h-5 w-5 text-pink-500" /> Eventdaten
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
Grundlegende Informationen fuer Gaeste und Moderation.
|
||||
Grundlegende Informationen für Gäste 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="Status" value={event.status === 'published' ? 'Veröffentlicht' : 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">
|
||||
@@ -347,60 +214,35 @@ export default function EventDetailPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card id="qr-invites" className="border-0 bg-white/90 shadow-xl shadow-amber-100/60">
|
||||
<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" /> QR-Einladungen & Drucklayouts
|
||||
<QrCode className="h-5 w-5 text-amber-500" /> Einladungen & QR
|
||||
</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.
|
||||
Steuere QR-Einladungen, Layouts und Branding gesammelt auf einer eigenen Seite.
|
||||
</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.
|
||||
Aktive QR-Einladungen: {activeInvitesCount} · Gesamt erstellt: {totalInvitesCount}
|
||||
</p>
|
||||
<p>
|
||||
Bereite deine Drucklayouts vor, personalisiere Texte und Logos und drucke sie direkt aus.
|
||||
</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}
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
className="w-full bg-amber-500 text-white shadow-lg shadow-amber-500/20 hover:bg-amber-500/90"
|
||||
onClick={() => navigate(ADMIN_EVENT_INVITES_PATH(event.slug))}
|
||||
>
|
||||
Einladungen & Layouts verwalten
|
||||
</Button>
|
||||
<p className="text-xs text-slate-500">
|
||||
Du kannst bestehende Layouts duplizieren, Farben anpassen und neue PDFs generieren.
|
||||
</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>
|
||||
@@ -425,21 +267,9 @@ export default function EventDetailPage() {
|
||||
) : (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>Event nicht gefunden</AlertTitle>
|
||||
<AlertDescription>Bitte pruefe den Slug und versuche es erneut.</AlertDescription>
|
||||
<AlertDescription>Bitte prüfe 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>
|
||||
);
|
||||
}
|
||||
@@ -472,220 +302,6 @@ function StatChip({ label, value }: { label: string; value: string | number }) {
|
||||
);
|
||||
}
|
||||
|
||||
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);
|
||||
@@ -695,32 +311,6 @@ function formatDate(iso: string | null): string {
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user