740 lines
28 KiB
TypeScript
740 lines
28 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Share2, Sparkles, Trophy, Users, TrendingUp, Heart, Image as ImageIcon } 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 { Switch } from '@tamagui/switch';
|
|
import { MobileShell } from './components/MobileShell';
|
|
import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
|
|
import { LegalConsentSheet } from './components/LegalConsentSheet';
|
|
import { DataExportsPanel } from './DataExportsPage';
|
|
import {
|
|
getEvent,
|
|
getEventStats,
|
|
getEventQrInvites,
|
|
getEventEngagement,
|
|
updateEvent,
|
|
TenantEvent,
|
|
EventStats,
|
|
EventQrInvite,
|
|
EventEngagement,
|
|
EventAddonCatalogItem,
|
|
getAddonCatalog,
|
|
createEventAddonCheckout,
|
|
} from '../api';
|
|
import { isAuthError } from '../auth/tokens';
|
|
import { getApiErrorMessage, isApiError } from '../lib/apiError';
|
|
import { adminPath } from '../constants';
|
|
import toast from 'react-hot-toast';
|
|
import { useBackNavigation } from './hooks/useBackNavigation';
|
|
import { useAdminTheme } from './theme';
|
|
|
|
type GalleryCounts = {
|
|
photos: number;
|
|
likes: number;
|
|
pending: number;
|
|
};
|
|
|
|
export default function MobileEventRecapPage() {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const navigate = useNavigate();
|
|
const { t, i18n } = useTranslation('management');
|
|
const { textStrong, text, muted, border, primary, danger } = useAdminTheme();
|
|
const locale = i18n.language;
|
|
|
|
const [activeTab, setActiveTab] = React.useState<'overview' | 'engagement' | 'compliance'>('overview');
|
|
const [event, setEvent] = React.useState<TenantEvent | null>(null);
|
|
const [stats, setEventStats] = React.useState<EventStats | null>(null);
|
|
const [invites, setInvites] = React.useState<EventQrInvite[]>([]);
|
|
const [addons, setAddons] = React.useState<EventAddonCatalogItem[]>([]);
|
|
const [engagement, setEngagement] = React.useState<EventEngagement | null>(null);
|
|
const [engagementLoading, setEngagementLoading] = React.useState(false);
|
|
const [engagementError, setEngagementError] = React.useState<string | null>(null);
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [consentOpen, setConsentOpen] = React.useState(false);
|
|
const [busyScope, setBusyScope] = React.useState<string | null>(null);
|
|
const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events'));
|
|
|
|
const load = React.useCallback(async () => {
|
|
if (!slug) return;
|
|
setLoading(true);
|
|
try {
|
|
const [eventData, statsData, invitesData, addonsData] = await Promise.all([
|
|
getEvent(slug),
|
|
getEventStats(slug),
|
|
getEventQrInvites(slug),
|
|
getAddonCatalog(),
|
|
]);
|
|
setEvent(eventData);
|
|
setEventStats(statsData);
|
|
setInvites(invitesData);
|
|
setAddons(addonsData);
|
|
setError(null);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Recap konnte nicht geladen werden.')));
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [slug, t]);
|
|
|
|
React.useEffect(() => {
|
|
void load();
|
|
}, [load]);
|
|
|
|
React.useEffect(() => {
|
|
if (event?.status && event.status !== 'published') {
|
|
setEngagement(null);
|
|
setEngagementError(null);
|
|
setEngagementLoading(false);
|
|
return;
|
|
}
|
|
|
|
const token = invites.find((invite) => invite.is_active)?.token ?? invites[0]?.token ?? '';
|
|
if (!token) {
|
|
setEngagement(null);
|
|
setEngagementError(null);
|
|
setEngagementLoading(false);
|
|
return;
|
|
}
|
|
|
|
const controller = new AbortController();
|
|
setEngagementLoading(true);
|
|
setEngagementError(null);
|
|
getEventEngagement(token, { locale: i18n.language, signal: controller.signal })
|
|
.then((payload) => {
|
|
setEngagement(payload);
|
|
})
|
|
.catch((err) => {
|
|
if (err?.name === 'AbortError') {
|
|
return;
|
|
}
|
|
if (isApiError(err) && (err.status === 403 || err.status === 404)) {
|
|
setEngagement(null);
|
|
setEngagementError(null);
|
|
return;
|
|
}
|
|
setEngagement(null);
|
|
setEngagementError(getApiErrorMessage(err, t('events.recap.engagementError', 'Engagement konnte nicht geladen werden.')));
|
|
})
|
|
.finally(() => {
|
|
setEngagementLoading(false);
|
|
});
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [event?.status, i18n.language, invites, t]);
|
|
|
|
const handleCheckout = async (addonKey: string) => {
|
|
if (!slug || busyScope) return;
|
|
setBusyScope(addonKey);
|
|
try {
|
|
const { checkout_url } = await createEventAddonCheckout(slug, {
|
|
addon_key: addonKey,
|
|
success_url: window.location.href,
|
|
cancel_url: window.location.href,
|
|
});
|
|
if (checkout_url) {
|
|
window.location.href = checkout_url;
|
|
}
|
|
} catch (err) {
|
|
toast.error(getApiErrorMessage(err, t('events.errors.checkoutFailed', 'Bezahlvorgang konnte nicht gestartet werden.')));
|
|
setBusyScope(null);
|
|
}
|
|
};
|
|
|
|
const handleConsentConfirm = async (consents: { acceptedTerms: boolean }) => {
|
|
if (!slug || !busyScope) return;
|
|
try {
|
|
const { checkout_url } = await createEventAddonCheckout(slug, {
|
|
addon_key: busyScope,
|
|
success_url: window.location.href,
|
|
cancel_url: window.location.href,
|
|
accepted_terms: consents.acceptedTerms,
|
|
} as any);
|
|
if (checkout_url) {
|
|
window.location.href = checkout_url;
|
|
}
|
|
} catch (err) {
|
|
toast.error(getApiErrorMessage(err, t('events.errors.checkoutFailed', 'Bezahlvorgang konnte nicht gestartet werden.')));
|
|
setBusyScope(null);
|
|
setConsentOpen(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<MobileShell activeTab="home" title={t('events.recap.title', 'Event Recap')} onBack={back}>
|
|
<YStack space="$3">
|
|
<SkeletonCard height={120} />
|
|
<SkeletonCard height={200} />
|
|
<SkeletonCard height={150} />
|
|
</YStack>
|
|
</MobileShell>
|
|
);
|
|
}
|
|
|
|
if (error || !event) {
|
|
return (
|
|
<MobileShell activeTab="home" title={t('events.recap.title', 'Event Recap')} onBack={back}>
|
|
<MobileCard>
|
|
<Text fontWeight="700" color={danger}>
|
|
{error || t('common.error', 'Ein Fehler ist aufgetreten.')}
|
|
</Text>
|
|
<CTAButton label={t('common.retry', 'Erneut versuchen')} onPress={load} tone="ghost" />
|
|
</MobileCard>
|
|
</MobileShell>
|
|
);
|
|
}
|
|
|
|
const galleryCounts: GalleryCounts = {
|
|
photos: stats?.total ?? 0,
|
|
likes: stats?.likes ?? 0,
|
|
pending: stats?.pending_photos ?? 0,
|
|
};
|
|
|
|
const activeInvite = invites.find((i) => i.is_active) ?? invites[0] ?? null;
|
|
const guestLink = activeInvite?.url ?? '';
|
|
|
|
return (
|
|
<MobileShell
|
|
activeTab="home"
|
|
title={t('events.recap.title', 'Event Recap')}
|
|
onBack={back}
|
|
>
|
|
<YStack space="$4">
|
|
<XStack space="$2">
|
|
<TabButton
|
|
label={t('events.recap.tabs.overview', 'Overview')}
|
|
active={activeTab === 'overview'}
|
|
onPress={() => setActiveTab('overview')}
|
|
/>
|
|
<TabButton
|
|
label={t('events.recap.tabs.engagement', 'Engagement')}
|
|
active={activeTab === 'engagement'}
|
|
onPress={() => setActiveTab('engagement')}
|
|
/>
|
|
<TabButton
|
|
label={t('events.recap.tabs.compliance', 'Compliance')}
|
|
active={activeTab === 'compliance'}
|
|
onPress={() => setActiveTab('compliance')}
|
|
/>
|
|
</XStack>
|
|
|
|
{activeTab === 'overview' ? (
|
|
<YStack space="$4">
|
|
<MobileCard space="$3">
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<YStack space="$1">
|
|
<Text fontSize="$xl" fontWeight="800" color={textStrong}>
|
|
{t('events.recap.completedTitle', 'Event abgeschlossen')}
|
|
</Text>
|
|
<Text fontSize="$sm" color={muted}>
|
|
{formatDate(event.event_date, locale)}
|
|
</Text>
|
|
</YStack>
|
|
<PillBadge tone="success">{t('events.recap.statusClosed', 'Archiviert')}</PillBadge>
|
|
</XStack>
|
|
|
|
<XStack flexWrap="wrap" gap="$2" marginTop="$1">
|
|
<Stat label={t('events.stats.uploads', 'Uploads')} value={formatCount(galleryCounts.photos, locale)} />
|
|
<Stat label={t('events.stats.pending', 'Offen')} value={formatCount(galleryCounts.pending, locale)} />
|
|
<Stat label={t('events.stats.likes', 'Likes')} value={formatCount(galleryCounts.likes, locale)} />
|
|
</XStack>
|
|
</MobileCard>
|
|
|
|
<MobileCard space="$3">
|
|
<XStack alignItems="center" space="$2">
|
|
<Share2 size={18} color={primary} />
|
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
{t('events.recap.shareGuests', 'Gäste-Galerie teilen')}
|
|
</Text>
|
|
</XStack>
|
|
<Text fontSize="$sm" color={text}>
|
|
{t('events.recap.shareBody', 'Deine Gäste können die Galerie auch nach dem Event weiterhin ansehen.')}
|
|
</Text>
|
|
|
|
{guestLink ? (
|
|
<YStack space="$2" marginTop="$1">
|
|
<XStack
|
|
backgroundColor={border}
|
|
padding="$3"
|
|
borderRadius={12}
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
>
|
|
<Text fontSize="$xs" color={muted} numberOfLines={1} flex={1}>
|
|
{guestLink}
|
|
</Text>
|
|
<CTAButton
|
|
label={t('events.recap.copyLink', 'Link kopieren')}
|
|
tone="ghost"
|
|
onPress={() => copyToClipboard(guestLink, t)}
|
|
/>
|
|
</XStack>
|
|
{typeof navigator !== 'undefined' && !!navigator.share && (
|
|
<CTAButton
|
|
label={t('events.recap.qrShare', 'Link/QR teilen')}
|
|
tone="ghost"
|
|
onPress={() => shareLink(guestLink, event, t)}
|
|
/>
|
|
)}
|
|
</YStack>
|
|
) : (
|
|
<Text fontSize="$sm" color={muted} marginTop="$1">
|
|
{t('events.recap.noPublicUrl', 'Kein Gäste-Link gesetzt. Lege den öffentlichen Link im Event-Setup fest.')}
|
|
</Text>
|
|
)}
|
|
|
|
{guestLink && activeInvite?.qr_code_data_url ? (
|
|
<YStack alignItems="center" space="$2" marginTop="$2">
|
|
<YStack
|
|
padding="$2"
|
|
backgroundColor="white"
|
|
borderRadius={12}
|
|
borderWidth={1}
|
|
borderColor={border}
|
|
>
|
|
<img
|
|
src={activeInvite.qr_code_data_url}
|
|
alt={t('events.recap.qrAlt', 'QR-Code zur Gäste-Galerie')}
|
|
style={{ width: 120, height: 120 }}
|
|
/>
|
|
</YStack>
|
|
<CTAButton
|
|
label={t('events.recap.qrDownload', 'QR-Code herunterladen')}
|
|
tone="ghost"
|
|
onPress={() => downloadQr(activeInvite.qr_code_data_url!)}
|
|
/>
|
|
</YStack>
|
|
) : null}
|
|
</MobileCard>
|
|
|
|
<MobileCard space="$3">
|
|
<XStack alignItems="center" space="$2">
|
|
<Users size={18} color={primary} />
|
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
{t('events.recap.settings', 'Nachlauf-Optionen')}
|
|
</Text>
|
|
</XStack>
|
|
|
|
<YStack space="$1.5">
|
|
<ToggleOption
|
|
label={t('events.recap.allowDownloads', 'Gäste dürfen Fotos laden')}
|
|
value={Boolean(event.settings?.guest_downloads_enabled)}
|
|
onToggle={(value) => updateSetting(event, setEvent, slug, 'guest_downloads_enabled', value, setError, t as any)}
|
|
/>
|
|
<ToggleOption
|
|
label={t('events.recap.allowSharing', 'Gäste dürfen Fotos teilen')}
|
|
value={Boolean(event.settings?.guest_sharing_enabled)}
|
|
onToggle={(value) => updateSetting(event, setEvent, slug, 'guest_sharing_enabled', value, setError, t as any)}
|
|
/>
|
|
</YStack>
|
|
</MobileCard>
|
|
|
|
<MobileCard space="$3">
|
|
<XStack alignItems="center" space="$2">
|
|
<Sparkles size={18} color={primary} />
|
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
{t('events.recap.addons', 'Galerie verlängern')}
|
|
</Text>
|
|
</XStack>
|
|
<Text fontSize="$sm" color={text}>
|
|
{t('events.recap.addonBody', 'Die Online-Zeit deiner Galerie neigt sich dem Ende? Hier kannst du sie verlängern.')}
|
|
</Text>
|
|
|
|
<YStack space="$2">
|
|
{addons
|
|
.filter((a) => a.key === 'gallery_extension')
|
|
.map((addon) => (
|
|
<CTAButton
|
|
key={addon.key}
|
|
label={t('events.recap.buyExtension', 'Galerie um 30 Tage verlängern')}
|
|
onPress={() => handleCheckout(addon.key)}
|
|
loading={busyScope === addon.key}
|
|
/>
|
|
))}
|
|
</YStack>
|
|
</MobileCard>
|
|
</YStack>
|
|
) : null}
|
|
|
|
{activeTab === 'engagement' ? (
|
|
<YStack space="$4">
|
|
{engagementLoading ? (
|
|
<YStack space="$2">
|
|
<SkeletonCard height={140} />
|
|
<SkeletonCard height={180} />
|
|
<SkeletonCard height={180} />
|
|
</YStack>
|
|
) : engagementError ? (
|
|
<MobileCard>
|
|
<Text fontWeight="700" color={danger}>
|
|
{engagementError}
|
|
</Text>
|
|
</MobileCard>
|
|
) : !engagement ? (
|
|
<MobileCard>
|
|
<Text fontWeight="700" color={muted}>
|
|
{activeInvite
|
|
? t('events.recap.engagement.empty', 'No engagement data yet.')
|
|
: t('events.recap.engagement.noInvite', 'No active guest link available yet.')}
|
|
</Text>
|
|
</MobileCard>
|
|
) : (
|
|
<YStack space="$4">
|
|
<MobileCard space="$3">
|
|
<XStack alignItems="center" space="$2">
|
|
<TrendingUp size={18} color={primary} />
|
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
{t('events.recap.engagement.title', 'Guest engagement')}
|
|
</Text>
|
|
</XStack>
|
|
<Text fontSize="$sm" color={text}>
|
|
{t('events.recap.engagement.subtitle', 'Highlights, leaderboards, and milestones from your guests.')}
|
|
</Text>
|
|
<XStack flexWrap="wrap" gap="$2" marginTop="$1">
|
|
<Stat
|
|
label={t('events.recap.engagement.summary.photos', 'Photos')}
|
|
value={formatCount(engagement.summary.totalPhotos, locale)}
|
|
/>
|
|
<Stat
|
|
label={t('events.recap.engagement.summary.guests', 'Guests')}
|
|
value={formatCount(engagement.summary.uniqueGuests, locale)}
|
|
/>
|
|
<Stat
|
|
label={t('events.recap.engagement.summary.tasks', 'Tasks solved')}
|
|
value={formatCount(engagement.summary.tasksSolved, locale)}
|
|
/>
|
|
<Stat
|
|
label={t('events.recap.engagement.summary.likes', 'Likes')}
|
|
value={formatCount(engagement.summary.likesTotal, locale)}
|
|
/>
|
|
</XStack>
|
|
</MobileCard>
|
|
|
|
<MobileCard space="$3">
|
|
<XStack alignItems="center" space="$2">
|
|
<Trophy size={18} color={primary} />
|
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
{t('events.recap.engagement.leaderboards.uploadsTitle', 'Top contributors')}
|
|
</Text>
|
|
</XStack>
|
|
{engagement.leaderboards.uploads.length === 0 ? (
|
|
<Text fontSize="$sm" color={muted}>
|
|
{t('events.recap.engagement.leaderboards.uploadsEmpty', 'No uploads yet.')}
|
|
</Text>
|
|
) : (
|
|
<YStack space="$1.5" marginTop="$1">
|
|
{engagement.leaderboards.uploads.slice(0, 5).map((entry, index) => (
|
|
<LeaderboardRow
|
|
key={`${entry.guest}-${entry.photos}-${index}`}
|
|
rank={index + 1}
|
|
name={entry.guest || t('events.recap.engagement.guestFallback', 'Guest')}
|
|
value={`${formatCount(entry.photos, locale)} · ${formatCount(entry.likes, locale)} ${t('events.recap.engagement.likesLabel', 'Likes')}`}
|
|
/>
|
|
))}
|
|
</YStack>
|
|
)}
|
|
</MobileCard>
|
|
|
|
<MobileCard space="$3">
|
|
<XStack alignItems="center" space="$2">
|
|
<Heart size={18} color={primary} />
|
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
{t('events.recap.engagement.leaderboards.likesTitle', 'Most liked')}
|
|
</Text>
|
|
</XStack>
|
|
{engagement.leaderboards.likes.length === 0 ? (
|
|
<Text fontSize="$sm" color={muted}>
|
|
{t('events.recap.engagement.leaderboards.likesEmpty', 'No likes yet.')}
|
|
</Text>
|
|
) : (
|
|
<YStack space="$1.5" marginTop="$1">
|
|
{engagement.leaderboards.likes.slice(0, 5).map((entry, index) => (
|
|
<LeaderboardRow
|
|
key={`${entry.guest}-${entry.likes}-${index}`}
|
|
rank={index + 1}
|
|
name={entry.guest || t('events.recap.engagement.guestFallback', 'Guest')}
|
|
value={`${formatCount(entry.likes, locale)} ${t('events.recap.engagement.likesLabel', 'Likes')}`}
|
|
/>
|
|
))}
|
|
</YStack>
|
|
)}
|
|
</MobileCard>
|
|
|
|
<MobileCard space="$3">
|
|
<XStack alignItems="center" space="$2">
|
|
<Sparkles size={18} color={primary} />
|
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
{t('events.recap.engagement.highlightsTitle', 'Highlights')}
|
|
</Text>
|
|
</XStack>
|
|
<YStack space="$2" marginTop="$1">
|
|
<XStack space="$2" alignItems="center">
|
|
<YStack
|
|
width={72}
|
|
height={72}
|
|
borderRadius={12}
|
|
backgroundColor={border}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
overflow="hidden"
|
|
>
|
|
{engagement.highlights.topPhoto?.thumbnail ? (
|
|
<img
|
|
src={engagement.highlights.topPhoto.thumbnail}
|
|
alt={t('events.recap.engagement.topPhoto', 'Top photo')}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
) : (
|
|
<ImageIcon size={24} color={muted} />
|
|
)}
|
|
</YStack>
|
|
<YStack flex={1}>
|
|
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
|
{t('events.recap.engagement.topPhoto', 'Top photo')}
|
|
</Text>
|
|
<Text fontSize="$xs" color={muted}>
|
|
{engagement.highlights.topPhoto
|
|
? `${engagement.highlights.topPhoto.guest || t('events.recap.engagement.guestFallback', 'Guest')} · ${formatCount(engagement.highlights.topPhoto.likes, locale)} ${t('events.recap.engagement.likesLabel', 'Likes')}`
|
|
: t('events.recap.engagement.topPhotoEmpty', 'No photo highlights yet.')}
|
|
</Text>
|
|
</YStack>
|
|
</XStack>
|
|
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<Text fontSize="$sm" fontWeight="600" color={textStrong}>
|
|
{t('events.recap.engagement.trendingEmotion', 'Trending emotion')}
|
|
</Text>
|
|
<Text fontSize="$sm" color={muted}>
|
|
{engagement.highlights.trendingEmotion
|
|
? `${engagement.highlights.trendingEmotion.name} · ${formatCount(engagement.highlights.trendingEmotion.count, locale)}`
|
|
: t('events.recap.engagement.trendingEmpty', 'No trends yet.')}
|
|
</Text>
|
|
</XStack>
|
|
|
|
<YStack space="$1">
|
|
<Text fontSize="$sm" fontWeight="600" color={textStrong}>
|
|
{t('events.recap.engagement.timeline', 'Uploads over time')}
|
|
</Text>
|
|
{engagement.highlights.timeline.length === 0 ? (
|
|
<Text fontSize="$xs" color={muted}>
|
|
{t('events.recap.engagement.timelineEmpty', 'No timeline data yet.')}
|
|
</Text>
|
|
) : (
|
|
<YStack space="$1">
|
|
{engagement.highlights.timeline.slice(-5).map((point) => (
|
|
<XStack key={point.date} alignItems="center" justifyContent="space-between">
|
|
<Text fontSize="$xs" color={muted}>
|
|
{formatShortDate(point.date, locale)}
|
|
</Text>
|
|
<Text fontSize="$xs" color={muted}>
|
|
{t('events.recap.engagement.timelineRow', '{{photos}} photos · {{guests}} guests', {
|
|
photos: formatCount(point.photos, locale),
|
|
guests: formatCount(point.guests, locale),
|
|
})}
|
|
</Text>
|
|
</XStack>
|
|
))}
|
|
</YStack>
|
|
)}
|
|
</YStack>
|
|
</YStack>
|
|
</MobileCard>
|
|
</YStack>
|
|
)}
|
|
</YStack>
|
|
) : null}
|
|
|
|
{activeTab === 'compliance' ? (
|
|
<YStack space="$4">
|
|
<DataExportsPanel variant="recap" event={event} />
|
|
</YStack>
|
|
) : null}
|
|
</YStack>
|
|
|
|
<LegalConsentSheet
|
|
open={consentOpen}
|
|
onClose={() => {
|
|
setConsentOpen(false);
|
|
setBusyScope(null);
|
|
}}
|
|
onConfirm={handleConsentConfirm}
|
|
busy={Boolean(busyScope)}
|
|
t={t as any}
|
|
/>
|
|
</MobileShell>
|
|
);
|
|
}
|
|
|
|
function Stat({ label, value, pill }: { label: string; value: string; pill?: boolean }) {
|
|
const { textStrong, muted, accentSoft, border } = useAdminTheme();
|
|
return (
|
|
<YStack
|
|
paddingHorizontal="$3"
|
|
paddingVertical="$2"
|
|
borderRadius={12}
|
|
borderWidth={1}
|
|
borderColor={border}
|
|
backgroundColor={pill ? accentSoft : 'transparent'}
|
|
minWidth={80}
|
|
>
|
|
<Text fontSize="$xs" color={muted}>
|
|
{label}
|
|
</Text>
|
|
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
|
{value}
|
|
</Text>
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
function ToggleOption({ label, value, onToggle }: { label: string; value: boolean; onToggle: (val: boolean) => void }) {
|
|
const { textStrong } = useAdminTheme();
|
|
return (
|
|
<XStack alignItems="center" justifyContent="space-between" paddingVertical="$1">
|
|
<Text fontSize="$sm" color={textStrong} fontWeight="600">
|
|
{label}
|
|
</Text>
|
|
<Switch size="$4" checked={value} onCheckedChange={onToggle} aria-label={label}>
|
|
<Switch.Thumb />
|
|
</Switch>
|
|
</XStack>
|
|
);
|
|
}
|
|
|
|
function TabButton({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
|
|
const { primary, surfaceMuted, border, surface, textStrong } = useAdminTheme();
|
|
return (
|
|
<Pressable onPress={onPress} style={{ flex: 1 }}>
|
|
<XStack
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
paddingVertical="$2.5"
|
|
borderRadius={12}
|
|
backgroundColor={active ? primary : surfaceMuted}
|
|
borderWidth={1}
|
|
borderColor={active ? primary : border}
|
|
>
|
|
<Text fontSize="$sm" color={active ? surface : textStrong} fontWeight="700">
|
|
{label}
|
|
</Text>
|
|
</XStack>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
function LeaderboardRow({ rank, name, value }: { rank: number; name: string; value: string }) {
|
|
const { textStrong, muted, border, surfaceMuted } = useAdminTheme();
|
|
return (
|
|
<XStack
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
paddingHorizontal="$2.5"
|
|
paddingVertical="$2"
|
|
borderRadius={12}
|
|
borderWidth={1}
|
|
borderColor={border}
|
|
backgroundColor={surfaceMuted}
|
|
>
|
|
<XStack alignItems="center" space="$2">
|
|
<Text fontSize="$xs" color={muted} fontWeight="700">
|
|
#{rank}
|
|
</Text>
|
|
<Text fontSize="$sm" color={textStrong} fontWeight="600">
|
|
{name}
|
|
</Text>
|
|
</XStack>
|
|
<Text fontSize="$xs" color={muted}>
|
|
{value}
|
|
</Text>
|
|
</XStack>
|
|
);
|
|
}
|
|
|
|
function formatCount(value: number, locale?: string): string {
|
|
const normalized = Number.isFinite(value) ? value : 0;
|
|
return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(normalized);
|
|
}
|
|
|
|
function formatShortDate(iso: string, locale?: string): string {
|
|
if (!iso) return '';
|
|
const date = new Date(iso);
|
|
if (Number.isNaN(date.getTime())) return '';
|
|
return new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric' }).format(date);
|
|
}
|
|
|
|
async function updateSetting(
|
|
event: TenantEvent,
|
|
setEvent: (event: TenantEvent) => void,
|
|
slug: string | undefined,
|
|
key: 'guest_downloads_enabled' | 'guest_sharing_enabled',
|
|
value: boolean,
|
|
setError: (message: string | null) => void,
|
|
t: (key: string, fallback?: string) => string,
|
|
): Promise<void> {
|
|
if (!slug) return;
|
|
try {
|
|
const updated = await updateEvent(slug, {
|
|
settings: {
|
|
...(event.settings ?? {}),
|
|
[key]: value,
|
|
},
|
|
});
|
|
setEvent(updated);
|
|
} catch (err) {
|
|
if (!isAuthError(err)) {
|
|
setError(getApiErrorMessage(err, t('events.errors.toggleFailed', 'Einstellung konnte nicht gespeichert werden.')));
|
|
}
|
|
}
|
|
}
|
|
|
|
function copyToClipboard(value: string, t: any) {
|
|
if (typeof window !== 'undefined') {
|
|
void window.navigator.clipboard.writeText(value);
|
|
toast.success(t('events.recap.copySuccess', 'Link kopiert'));
|
|
}
|
|
}
|
|
|
|
async function shareLink(value: string, event: TenantEvent | null, t: any) {
|
|
if (typeof window !== 'undefined' && navigator.share) {
|
|
try {
|
|
await navigator.share({
|
|
title: resolveName(event?.name ?? ''),
|
|
text: t('events.recap.shareText', 'Schau dir die Fotos von unserem Event an!'),
|
|
url: value,
|
|
});
|
|
} catch {
|
|
// silently ignore or fallback to copy
|
|
}
|
|
}
|
|
}
|
|
|
|
function downloadQr(dataUrl: string) {
|
|
const link = document.createElement('a');
|
|
link.href = dataUrl;
|
|
link.download = 'guest-gallery-qr.png';
|
|
link.click();
|
|
}
|
|
|
|
function resolveName(name: TenantEvent['name']): string {
|
|
if (typeof name === 'string') return name;
|
|
if (name && typeof name === 'object') {
|
|
return name.de ?? name.en ?? Object.values(name)[0] ?? 'Event';
|
|
}
|
|
return 'Event';
|
|
}
|
|
|
|
function formatDate(iso?: string | null, locale?: string): string {
|
|
if (!iso) return '';
|
|
const date = new Date(iso);
|
|
if (Number.isNaN(date.getTime())) return '';
|
|
return date.toLocaleDateString(locale, { day: '2-digit', month: 'short', year: 'numeric' });
|
|
}
|