316 lines
12 KiB
TypeScript
316 lines
12 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CalendarDays, MapPin, Settings, Users, Camera, Sparkles, QrCode, Image, Shield, Layout, RefreshCcw, Pencil, Megaphone } from 'lucide-react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
|
import { MobileShell } from './components/MobileShell';
|
|
import { MobileCard, PillBadge, KpiTile, ActionTile } from './components/Primitives';
|
|
import { TenantEvent, EventStats, EventToolkit, getEvent, getEventStats, getEventToolkit, getEvents } from '../api';
|
|
import { adminPath, ADMIN_EVENT_BRANDING_PATH, ADMIN_EVENT_GUEST_NOTIFICATIONS_PATH, ADMIN_EVENT_INVITES_PATH, ADMIN_EVENT_MEMBERS_PATH, ADMIN_EVENT_PHOTOS_PATH, ADMIN_EVENT_TASKS_PATH } from '../constants';
|
|
import { isAuthError } from '../auth/tokens';
|
|
import { getApiErrorMessage } from '../lib/apiError';
|
|
import { MobileSheet } from './components/Sheet';
|
|
import { useEventContext } from '../context/EventContext';
|
|
import { formatEventDate, isBrandingAllowed, resolveEngagementMode, resolveEventDisplayName } from '../lib/events';
|
|
import { isPastEvent } from './eventDate';
|
|
|
|
export default function MobileEventDetailPage() {
|
|
const { slug: slugParam } = useParams<{ slug?: string }>();
|
|
const slug = slugParam ?? null;
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation('management');
|
|
|
|
const [event, setEvent] = React.useState<TenantEvent | null>(null);
|
|
const [stats, setStats] = React.useState<EventStats | null>(null);
|
|
const [toolkit, setToolkit] = React.useState<EventToolkit | null>(null);
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const { events, activeEvent, selectEvent } = useEventContext();
|
|
const [showEventPicker, setShowEventPicker] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (!slug) return;
|
|
selectEvent(slug);
|
|
}, [slug, selectEvent]);
|
|
|
|
React.useEffect(() => {
|
|
if (!slug) return;
|
|
(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [eventData, statsData, toolkitData] = await Promise.all([getEvent(slug), getEventStats(slug), getEventToolkit(slug)]);
|
|
setEvent(eventData);
|
|
setStats(statsData);
|
|
setToolkit(toolkitData);
|
|
setError(null);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
try {
|
|
const list = await getEvents({ force: true });
|
|
const fallback = list.find((ev: TenantEvent) => ev.slug === slug) ?? null;
|
|
if (fallback) {
|
|
setEvent(fallback);
|
|
setError(null);
|
|
} else {
|
|
setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Event konnte nicht geladen werden.')));
|
|
}
|
|
} catch (fallbackErr) {
|
|
setError(getApiErrorMessage(fallbackErr, t('events.errors.loadFailed', 'Event konnte nicht geladen werden.')));
|
|
}
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
})();
|
|
}, [slug, t]);
|
|
|
|
const tasksEnabled = resolveEngagementMode(event ?? activeEvent ?? null) !== 'photo_only';
|
|
const brandingAllowed = isBrandingAllowed(event ?? activeEvent ?? null);
|
|
|
|
const kpis = [
|
|
{
|
|
label: t('events.detail.kpi.guests', 'Guests Registered'),
|
|
value: toolkit?.invites?.summary.total ?? event?.active_invites_count ?? '—',
|
|
icon: Users,
|
|
},
|
|
{
|
|
label: t('events.detail.kpi.photos', 'Images Uploaded'),
|
|
value: stats?.uploads_total ?? event?.photo_count ?? '—',
|
|
icon: Camera,
|
|
},
|
|
];
|
|
|
|
if (tasksEnabled) {
|
|
kpis.unshift({
|
|
label: t('events.detail.kpi.tasks', 'Active Tasks'),
|
|
value: event?.tasks_count ?? toolkit?.tasks?.summary?.total ?? '—',
|
|
icon: Sparkles,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<MobileShell
|
|
activeTab="home"
|
|
title={resolveEventDisplayName(event ?? activeEvent ?? undefined)}
|
|
subtitle={
|
|
event?.event_date || activeEvent?.event_date
|
|
? formatDate(event?.event_date ?? activeEvent?.event_date, t)
|
|
: undefined
|
|
}
|
|
onBack={() => navigate(-1)}
|
|
headerActions={
|
|
<XStack space="$3" alignItems="center">
|
|
<Pressable onPress={() => navigate(adminPath('/mobile/settings'))}>
|
|
<Settings size={18} color="#0f172a" />
|
|
</Pressable>
|
|
<Pressable onPress={() => navigate(0)}>
|
|
<RefreshCcw size={18} color="#0f172a" />
|
|
</Pressable>
|
|
</XStack>
|
|
}
|
|
>
|
|
{error ? (
|
|
<MobileCard>
|
|
<Text fontWeight="700" color="#b91c1c">
|
|
{error}
|
|
</Text>
|
|
</MobileCard>
|
|
) : null}
|
|
|
|
<MobileCard space="$3">
|
|
<Text fontSize="$lg" fontWeight="800" color="#111827">
|
|
{event ? renderName(event.name, t) : t('events.placeholders.untitled', 'Unbenanntes Event')}
|
|
</Text>
|
|
<XStack alignItems="center" space="$2">
|
|
<CalendarDays size={16} color="#6b7280" />
|
|
<Text fontSize="$sm" color="#4b5563">
|
|
{formatDate(event?.event_date, t)}
|
|
</Text>
|
|
<MapPin size={16} color="#6b7280" />
|
|
<Text fontSize="$sm" color="#4b5563">
|
|
{resolveLocation(event, t)}
|
|
</Text>
|
|
</XStack>
|
|
<PillBadge tone={event?.status === 'published' ? 'success' : 'warning'}>
|
|
{event?.status === 'published' ? t('events.status.published', 'Live') : t('events.status.draft', 'Draft')}
|
|
</PillBadge>
|
|
<Pressable
|
|
aria-label={t('mobileEvents.edit', 'Edit event')}
|
|
onPress={() => slug && navigate(adminPath(`/mobile/events/${slug}/edit`))}
|
|
style={{
|
|
position: 'absolute',
|
|
right: 16,
|
|
top: 16,
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
backgroundColor: '#e2e8f0',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
boxShadow: '0 6px 16px rgba(0,0,0,0.12)',
|
|
}}
|
|
>
|
|
<Pencil size={18} color="#0f172a" />
|
|
</Pressable>
|
|
</MobileCard>
|
|
|
|
<YStack space="$2">
|
|
{loading ? (
|
|
<XStack space="$2" flexWrap="wrap">
|
|
{Array.from({ length: 3 }).map((_, idx) => (
|
|
<MobileCard key={`kpi-${idx}`} height={90} width="32%" />
|
|
))}
|
|
</XStack>
|
|
) : (
|
|
<XStack space="$2" flexWrap="wrap">
|
|
{kpis.map((kpi) => (
|
|
<KpiTile key={kpi.label} icon={kpi.icon} label={kpi.label} value={kpi.value} />
|
|
))}
|
|
</XStack>
|
|
)}
|
|
</YStack>
|
|
|
|
<MobileSheet
|
|
open={showEventPicker}
|
|
onClose={() => setShowEventPicker(false)}
|
|
title={t('events.detail.pickEvent', 'Event wählen')}
|
|
footer={null}
|
|
bottomOffsetPx={120}
|
|
>
|
|
<YStack space="$2">
|
|
{events.length === 0 ? (
|
|
<Text fontSize={12.5} color="#4b5563">
|
|
{t('events.list.empty.description', 'Starte jetzt mit deinem ersten Event.')}
|
|
</Text>
|
|
) : (
|
|
events.map((ev) => (
|
|
<Pressable
|
|
key={ev.slug}
|
|
onPress={() => {
|
|
selectEvent(ev.slug ?? null);
|
|
setShowEventPicker(false);
|
|
navigate(adminPath(`/mobile/events/${ev.slug}`));
|
|
}}
|
|
>
|
|
<XStack alignItems="center" justifyContent="space-between" paddingVertical="$2">
|
|
<YStack space="$1">
|
|
<Text fontSize={13} fontWeight="700" color="#111827">
|
|
{renderName(ev.name, t)}
|
|
</Text>
|
|
<XStack alignItems="center" space="$1.5">
|
|
<CalendarDays size={14} color="#6b7280" />
|
|
<Text fontSize={12} color="#4b5563">
|
|
{formatDate(ev.event_date, t)}
|
|
</Text>
|
|
</XStack>
|
|
</YStack>
|
|
<PillBadge tone={ev.slug === activeEvent?.slug ? 'success' : 'muted'}>
|
|
{ev.slug === activeEvent?.slug ? t('events.detail.active', 'Aktiv') : t('events.actions.open', 'Öffnen')}
|
|
</PillBadge>
|
|
</XStack>
|
|
</Pressable>
|
|
))
|
|
)}
|
|
</YStack>
|
|
</MobileSheet>
|
|
|
|
<YStack space="$2">
|
|
<Text fontSize="$md" fontWeight="800" color="#111827">
|
|
{t('events.detail.managementTitle', 'Event Management')}
|
|
</Text>
|
|
<XStack flexWrap="wrap" space="$2">
|
|
<ActionTile
|
|
icon={Sparkles}
|
|
label={
|
|
tasksEnabled
|
|
? t('events.quick.tasks', 'Tasks & Checklists')
|
|
: `${t('events.quick.tasks', 'Tasks & Checklists')} (${t('common:states.disabled', 'Disabled')})`
|
|
}
|
|
color="#60a5fa"
|
|
onPress={() => navigate(adminPath(`/mobile/events/${slug ?? ''}/tasks`))}
|
|
/>
|
|
<ActionTile
|
|
icon={QrCode}
|
|
label={t('events.quick.qr', 'QR Code Layouts')}
|
|
color="#fbbf24"
|
|
onPress={() => navigate(adminPath(`/mobile/events/${slug ?? ''}/qr`))}
|
|
/>
|
|
<ActionTile
|
|
icon={Image}
|
|
label={t('events.quick.images', 'Image Management')}
|
|
color="#a855f7"
|
|
onPress={() => navigate(adminPath(`/mobile/events/${slug ?? ''}/photos`))}
|
|
/>
|
|
<ActionTile
|
|
icon={Users}
|
|
label={t('events.quick.guests', 'Guest Management')}
|
|
color="#4ade80"
|
|
onPress={() => navigate(adminPath(`/mobile/events/${slug ?? ''}/members`))}
|
|
/>
|
|
<ActionTile
|
|
icon={Megaphone}
|
|
label={t('events.quick.guestMessages', 'Guest messages')}
|
|
color="#fb923c"
|
|
onPress={() => slug && navigate(ADMIN_EVENT_GUEST_NOTIFICATIONS_PATH(slug))}
|
|
disabled={!slug}
|
|
/>
|
|
<ActionTile
|
|
icon={Layout}
|
|
label={t('events.quick.branding', 'Branding & Theme')}
|
|
color="#fb7185"
|
|
onPress={
|
|
brandingAllowed ? () => navigate(adminPath(`/mobile/events/${slug ?? ''}/branding`)) : undefined
|
|
}
|
|
disabled={!brandingAllowed}
|
|
/>
|
|
<ActionTile
|
|
icon={Camera}
|
|
label={t('events.quick.photobooth', 'Photobooth')}
|
|
color="#38bdf8"
|
|
onPress={() => navigate(adminPath(`/mobile/events/${slug ?? ''}/photobooth`))}
|
|
/>
|
|
{isPastEvent(event?.event_date) ? (
|
|
<ActionTile
|
|
icon={Sparkles}
|
|
label={t('events.quick.recap', 'Recap & Archive')}
|
|
color="#f59e0b"
|
|
onPress={() => navigate(adminPath(`/mobile/events/${slug ?? ''}/recap`))}
|
|
/>
|
|
) : null}
|
|
</XStack>
|
|
</YStack>
|
|
</MobileShell>
|
|
);
|
|
}
|
|
|
|
function renderName(name: TenantEvent['name'], t: (key: string, fallback: string) => string): string {
|
|
const fallback = t('events.placeholders.untitled', 'Untitled event');
|
|
if (typeof name === 'string' && name.trim()) return name;
|
|
if (name && typeof name === 'object') {
|
|
return name.de ?? name.en ?? Object.values(name)[0] ?? fallback;
|
|
}
|
|
return fallback;
|
|
}
|
|
|
|
function formatDate(iso: string | null | undefined, t: (key: string, fallback: string) => string): string {
|
|
if (!iso) return t('events.detail.dateTbd', 'Date tbd');
|
|
const date = new Date(iso);
|
|
if (Number.isNaN(date.getTime())) return t('events.detail.dateTbd', 'Date tbd');
|
|
return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
|
|
}
|
|
|
|
function resolveLocation(event: TenantEvent | null, t: (key: string, fallback: string) => string): string {
|
|
if (!event) return t('events.detail.locationPlaceholder', 'Location');
|
|
const settings = (event.settings ?? {}) as Record<string, unknown>;
|
|
const candidate =
|
|
(settings.location as string | undefined) ??
|
|
(settings.address as string | undefined) ??
|
|
(settings.city as string | undefined);
|
|
if (candidate && candidate.trim()) {
|
|
return candidate;
|
|
}
|
|
return t('events.detail.locationPlaceholder', 'Location');
|
|
}
|