fix: resolve typescript and build errors across admin and guest apps

resources/js/admin/mobile/EventRecapPage.tsx

@@ -1,74 +1,72 @@
 import React from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { Check, Copy, Download, Share2, Sparkles, Trophy, Users } 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 { Sparkles, Camera, Link2, QrCode, RefreshCcw, Shield, Archive, ShoppingCart, Clock3, Share2 } from 'lucide-react';
-import toast from 'react-hot-toast';
+import { MobileShell } from './components/MobileShell';
+import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
+import { LegalConsentSheet } from './components/LegalConsentSheet';
 import {
   getEvent,
   getEventStats,
   getEventQrInvites,
-  toggleEvent,
   updateEvent,
-  createEventAddonCheckout,
+  TenantEvent,
+  EventStats,
+  EventQrInvite,
+  EventAddonCatalogItem,
   getAddonCatalog,
-  submitTenantFeedback,
-  type TenantEvent,
-  type EventStats,
-  type EventQrInvite,
-  type EventAddonCatalogItem,
+  createEventAddonCheckout,
 } from '../api';
 import { isAuthError } from '../auth/tokens';
 import { getApiErrorMessage } from '../lib/apiError';
-import { HeaderActionButton, MobileShell } from './components/MobileShell';
-import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
 import { adminPath } from '../constants';
-import { selectAddonKeyForScope } from './addons';
-import { LegalConsentSheet } from './components/LegalConsentSheet';
+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 { slug } = useParams<{ slug: string }>();
   const navigate = useNavigate();
-  const location = useLocation();
   const { t } = useTranslation('management');
-  const { textStrong, text, muted, subtle, danger, border, primary, accentSoft } = useAdminTheme();
+  const { textStrong, text, muted, border, primary, successText, danger } = useAdminTheme();
 
   const [event, setEvent] = React.useState<TenantEvent | null>(null);
-  const [stats, setStats] = React.useState<EventStats | null>(null);
+  const [stats, setEventStats] = React.useState<EventStats | null>(null);
   const [invites, setInvites] = React.useState<EventQrInvite[]>([]);
   const [addons, setAddons] = React.useState<EventAddonCatalogItem[]>([]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
-  const [busy, setBusy] = React.useState(false);
-  const [archiveBusy, setArchiveBusy] = React.useState(false);
-  const [checkoutBusy, setCheckoutBusy] = React.useState(false);
   const [consentOpen, setConsentOpen] = React.useState(false);
-  const [consentBusy, setConsentBusy] = React.useState(false);
-  const [consentAddonKey, setConsentAddonKey] = React.useState<string | null>(null);
+  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, inviteData, addonData] = await Promise.all([
+      const [eventData, statsData, invitesData, addonsData] = await Promise.all([
         getEvent(slug),
         getEventStats(slug),
         getEventQrInvites(slug),
         getAddonCatalog(),
       ]);
       setEvent(eventData);
-      setStats(statsData);
-      setInvites(inviteData ?? []);
-      setAddons(addonData ?? []);
+      setEventStats(statsData);
+      setInvites(invitesData);
+      setAddons(addonsData);
       setError(null);
     } catch (err) {
       if (!isAuthError(err)) {
-        setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Event konnte nicht geladen werden.')));
+        setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Recap konnte nicht geladen werden.')));
       }
     } finally {
       setLoading(false);
@@ -79,323 +77,243 @@ export default function MobileEventRecapPage() {
     void load();
   }, [load]);
 
-  React.useEffect(() => {
-    if (!location.search) return;
-    const params = new URLSearchParams(location.search);
-    if (params.get('addon_success')) {
-      toast.success(t('events.success.addonApplied', 'Add-on angewendet. Limits aktualisieren sich in Kürze.'));
-      params.delete('addon_success');
-      navigate({ pathname: location.pathname, search: params.toString() ? `?${params.toString()}` : '' }, { replace: true });
-      void load();
+  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);
     }
-  }, [location.search, location.pathname, t, navigate, load]);
+  };
 
-  if (!slug) {
+  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.errors.notFoundTitle', 'Event nicht gefunden')} onBack={back}>
+      <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 color={danger}>{t('events.errors.notFoundBody', 'Kehre zur Eventliste zurück und wähle dort ein Event aus.')}</Text>
+          <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 activeInvite = invites.find((invite) => invite.is_active);
-  const guestLink = event?.public_url ?? activeInvite?.url ?? (activeInvite?.token ? `/g/${activeInvite.token}` : null);
-  const galleryCounts = {
-    photos: stats?.uploads_total ?? stats?.total ?? 0,
+  const galleryCounts: GalleryCounts = {
+    photos: stats?.total ?? 0,
+    likes: stats?.likes ?? 0,
     pending: stats?.pending_photos ?? 0,
-    likes: stats?.likes_total ?? stats?.likes ?? 0,
   };
 
-  async function toggleGallery() {
-    if (!slug) return;
-    setBusy(true);
-    try {
-      const updated = await toggleEvent(slug);
-      setEvent(updated);
-    } catch (err) {
-      if (!isAuthError(err)) {
-        setError(getApiErrorMessage(err, t('events.errors.toggleFailed', 'Status konnte nicht angepasst werden.')));
-      }
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  async function archiveEvent() {
-    if (!slug || !event) return;
-    setArchiveBusy(true);
-    try {
-      const updated = await updateEvent(slug, { status: 'archived', is_active: false });
-      setEvent(updated);
-      toast.success(t('events.recap.archivedSuccess', 'Event archiviert. Galerie ist geschlossen.'));
-    } catch (err) {
-      if (!isAuthError(err)) {
-        setError(getApiErrorMessage(err, t('events.errors.archiveFailed', 'Archivierung fehlgeschlagen.')));
-      }
-    } finally {
-      setArchiveBusy(false);
-    }
-  }
-
-  function startAddonCheckout() {
-    if (!slug) return;
-    const addonKey = selectAddonKeyForScope(addons, 'gallery');
-    setConsentAddonKey(addonKey);
-    setConsentOpen(true);
-  }
-
-  async function confirmAddonCheckout(consents: { acceptedTerms: boolean; acceptedWaiver: boolean }) {
-    if (!slug || !consentAddonKey) return;
-    const currentUrl = typeof window !== 'undefined' ? `${window.location.origin}${adminPath(`/mobile/events/${slug}/recap`)}` : '';
-    const successUrl = `${currentUrl}?addon_success=1`;
-    setCheckoutBusy(true);
-    setConsentBusy(true);
-    try {
-      const checkout = await createEventAddonCheckout(slug, {
-        addon_key: consentAddonKey,
-        quantity: 1,
-        success_url: successUrl,
-        cancel_url: currentUrl,
-        accepted_terms: consents.acceptedTerms,
-        accepted_waiver: consents.acceptedWaiver,
-      });
-      if (checkout.checkout_url) {
-        window.location.href = checkout.checkout_url;
-      } else {
-        toast.error(t('events.errors.checkoutMissing', 'Checkout konnte nicht gestartet werden.'));
-      }
-    } catch (err) {
-      if (!isAuthError(err)) {
-        toast.error(getApiErrorMessage(err, t('events.errors.checkoutFailed', 'Add-on Checkout fehlgeschlagen.')));
-      }
-    } finally {
-      setCheckoutBusy(false);
-      setConsentBusy(false);
-      setConsentOpen(false);
-      setConsentAddonKey(null);
-    }
-  }
-
-  async function submitFeedback(sentiment: 'positive' | 'neutral' | 'negative') {
-    if (!event) return;
-    try {
-      await submitTenantFeedback({
-        category: 'event_workspace_after_event',
-        event_slug: event.slug,
-        sentiment,
-        metadata: {
-          event_name: resolveName(event.name),
-          guest_link: guestLink,
-        },
-      });
-      toast.success(t('events.feedback.submitted', 'Danke!'));
-    } catch (err) {
-      toast.error(getApiErrorMessage(err, t('events.feedback.genericError', 'Feedback konnte nicht gesendet werden.')));
-    }
-  }
+  const activeInvite = invites.find((i) => i.is_active) ?? invites[0] ?? null;
+  const guestLink = activeInvite?.url ?? '';
 
   return (
     <MobileShell
       activeTab="home"
-      title={event ? resolveName(event.name) : t('events.placeholders.untitled', 'Unbenanntes Event')}
-      subtitle={event?.event_date ? formatDate(event.event_date) : undefined}
+      title={t('events.recap.title', 'Event Recap')}
+      subtitle={resolveName(event.name)}
       onBack={back}
-      headerActions={
-        <HeaderActionButton onPress={() => load()} ariaLabel={t('common.refresh', 'Refresh')}>
-          <RefreshCcw size={18} color={textStrong} />
-        </HeaderActionButton>
-      }
     >
-      {error ? (
-        <MobileCard>
-          <Text color={danger}>{error}</Text>
+      <YStack space="$4">
+        {/* Status & Summary */}
+        <MobileCard space="$3">
+          <XStack alignItems="center" justifyContent="space-between">
+            <YStack space="$1">
+              <Text fontSize="$xl" fontWeight="800" color={textStrong}>
+                {t('events.recap.done', 'Event beendet')}
+              </Text>
+              <Text fontSize="$sm" color={muted}>
+                {formatDate(event.event_date)}
+              </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={String(galleryCounts.photos)} />
+            <Stat label={t('events.stats.pending', 'Offen')} value={String(galleryCounts.pending)} />
+            <Stat label={t('events.stats.likes', 'Likes')} value={String(galleryCounts.likes)} />
+          </XStack>
         </MobileCard>
-      ) : null}
 
-      {loading ? (
-        <YStack space="$2">
-          {Array.from({ length: 4 }).map((_, idx) => (
-            <SkeletonCard key={`sk-${idx}`} height={90} />
-          ))}
-        </YStack>
-      ) : event && stats ? (
-        <YStack space="$3">
-          <MobileCard space="$2">
-            <XStack alignItems="center" justifyContent="space-between">
-              <YStack space="$1">
-                <Text fontSize="$xs" color={muted} fontWeight="700" letterSpacing={1.2}>
-                  {t('events.recap.badge', 'Nachbereitung')}
-                </Text>
-                <Text fontSize="$lg" fontWeight="800" color={textStrong}>{resolveName(event.name)}</Text>
-                <Text fontSize="$sm" color={muted}>
-                  {t('events.recap.subtitle', 'Abschluss, Export und Galerie-Laufzeit verwalten.')}
-                </Text>
-              </YStack>
-              <PillBadge tone={event.is_active ? 'success' : 'muted'}>
-                {event.is_active ? t('events.recap.galleryOpen', 'Galerie geöffnet') : t('events.recap.galleryClosed', 'Galerie geschlossen')}
-              </PillBadge>
-            </XStack>
-            <XStack space="$2" marginTop="$2" flexWrap="wrap">
-              <CTAButton
-                label={event.is_active ? t('events.recap.closeGallery', 'Galerie schließen') : t('events.recap.openGallery', 'Galerie öffnen')}
-                onPress={toggleGallery}
-                loading={busy}
-              />
-              <CTAButton label={t('events.recap.moderate', 'Uploads ansehen')} tone="ghost" onPress={() => navigate(adminPath(`/mobile/events/${slug}/photos`))} />
-              <CTAButton label={t('events.actions.edit', 'Bearbeiten')} tone="ghost" onPress={() => navigate(adminPath(`/mobile/events/${slug}/edit`))} />
-            </XStack>
-          </MobileCard>
+        {/* Share Section */}
+        <MobileCard space="$3">
+          <XStack alignItems="center" space="$2">
+            <Share2 size={18} color={primary} />
+            <Text fontSize="$md" fontWeight="800" color={textStrong}>
+              {t('events.recap.shareGallery', '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>
 
-          <MobileCard space="$2">
-            <XStack alignItems="center" justifyContent="space-between">
-              <Text fontSize="$md" fontWeight="800" color={textStrong}>
-                {t('events.recap.galleryTitle', 'Galerie-Status')}
-              </Text>
-              <PillBadge tone="muted">{t('events.recap.galleryCounts', '{{photos}} Fotos, {{pending}} offen, {{likes}} Likes', galleryCounts)}</PillBadge>
-            </XStack>
-            <XStack space="$2" marginTop="$2" flexWrap="wrap">
-              <Stat pill label={t('events.stats.uploads', 'Uploads')} value={String(galleryCounts.photos)} />
-              <Stat pill label={t('events.stats.pending', 'Offen')} value={String(galleryCounts.pending)} />
-              <Stat pill label={t('events.stats.likes', 'Likes')} value={String(galleryCounts.likes)} />
-            </XStack>
-          </MobileCard>
-
-          <MobileCard space="$2">
-            <XStack alignItems="center" space="$2">
-              <Link2 size={16} color={textStrong} />
-              <Text fontSize="$md" fontWeight="800" color={textStrong}>
-                {t('events.recap.shareLink', 'Gäste-Link')}
-              </Text>
-            </XStack>
-            {guestLink ? (
-              <Text fontSize="$sm" color={text} selectable>
+          <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>
-            ) : (
-              <Text fontSize="$sm" color={muted}>
-                {t('events.recap.noPublicUrl', 'Kein Gäste-Link gesetzt. Lege den öffentlichen Link im Event-Setup fest.')}
-              </Text>
-            )}
-            <XStack space="$2" marginTop="$2">
               <CTAButton label={t('events.recap.copy', 'Kopieren')} tone="ghost" onPress={() => guestLink && copyToClipboard(guestLink, t)} />
-              {guestLink ? (
+            </XStack>
+            {typeof navigator !== 'undefined' && !!navigator.share && (
                 <CTAButton label={t('events.recap.share', 'Teilen')} tone="ghost" onPress={() => shareLink(guestLink, event, t)} />
-              ) : null}
-            </XStack>
-            {activeInvite?.qr_code_data_url ? (
-              <XStack space="$2" alignItems="center" marginTop="$2">
-                <img
-                  src={activeInvite.qr_code_data_url}
-                  alt={t('events.qr.qrAlt', 'QR code')}
-                  style={{ width: 96, height: 96 }}
-                />
-                <CTAButton label={t('events.recap.downloadQr', 'QR herunterladen')} tone="ghost" onPress={() => downloadQr(activeInvite.qr_code_data_url)} />
-              </XStack>
-            ) : null}
-          </MobileCard>
+            )}
+          </YStack>
 
-          <MobileCard space="$2">
-            <XStack alignItems="center" space="$2">
-              <ShoppingCart size={16} color={textStrong} />
-              <Text fontSize="$md" fontWeight="800" color={textStrong}>
-                {t('events.sections.addons.title', 'Add-ons & Upgrades')}
-              </Text>
-            </XStack>
-            <Text fontSize="$sm" color={muted}>
-              {t('events.sections.addons.description', 'Zusätzliche Kontingente freischalten.')}
+          {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="QR" style={{ width: 120, height: 120 }} />
+                </YStack>
+                <CTAButton label={t('events.recap.downloadQr', 'QR herunterladen')} tone="ghost" onPress={() => downloadQr(activeInvite.qr_code_data_url!)} />
+            </YStack>
+          ) : null}
+        </MobileCard>
+
+        {/* Settings */}
+        <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>
-            <CTAButton
-              label={t('events.recap.extendGallery', 'Galerie verlängern')}
-              onPress={() => {
-                startAddonCheckout();
-              }}
-              loading={checkoutBusy}
-            />
-          </MobileCard>
+          </XStack>
 
-          <MobileCard space="$2">
-            <XStack alignItems="center" space="$2">
-              <Shield size={16} color={textStrong} />
-              <Text fontSize="$md" fontWeight="800" color={textStrong}>
-                {t('events.recap.settingsTitle', 'Gast-Einstellungen')}
-              </Text>
-            </XStack>
-            <ToggleRow
-              label={t('events.recap.downloads', 'Downloads erlauben')}
+          <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)}
+              onToggle={(value) => updateSetting(event, setEvent, slug, 'guest_downloads_enabled', value, setError, t as any)}
             />
-            <ToggleRow
-              label={t('events.recap.sharing', 'Sharing erlauben')}
+            <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)}
+              onToggle={(value) => updateSetting(event, setEvent, slug, 'guest_sharing_enabled', value, setError, t as any)}
             />
-          </MobileCard>
+          </YStack>
+        </MobileCard>
 
-          <MobileCard space="$2">
-            <XStack alignItems="center" space="$2">
-              <Archive size={16} color={textStrong} />
-              <Text fontSize="$md" fontWeight="800" color={textStrong}>
-                {t('events.recap.archiveTitle', 'Event archivieren')}
-              </Text>
-            </XStack>
-            <Text fontSize="$sm" color={muted}>
-              {t('events.recap.archiveCopy', 'Schließt die Galerie und markiert das Event als abgeschlossen.')}
+        {/* Extensions */}
+        <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>
-            <CTAButton label={t('events.recap.archive', 'Archivieren')} onPress={() => archiveEvent()} loading={archiveBusy} />
-          </MobileCard>
+          </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>
 
-          <MobileCard space="$2">
-            <XStack alignItems="center" space="$2">
-              <Sparkles size={16} color={textStrong} />
-              <Text fontSize="$md" fontWeight="800" color={textStrong}>
-                {t('events.recap.feedbackTitle', 'Wie lief das Event?')}
-              </Text>
-            </XStack>
-            <XStack space="$2" marginTop="$2" flexWrap="wrap">
-              <CTAButton label={t('events.feedback.positive', 'War super')} tone="ghost" onPress={() => void submitFeedback('positive')} />
-              <CTAButton label={t('events.feedback.neutral', 'In Ordnung')} tone="ghost" onPress={() => void submitFeedback('neutral')} />
-              <CTAButton label={t('events.feedback.negative', 'Brauch(t)e Unterstützung')} tone="ghost" onPress={() => void submitFeedback('negative')} />
-            </XStack>
-          </MobileCard>
-        </YStack>
-      ) : null}
       <LegalConsentSheet
         open={consentOpen}
         onClose={() => {
-          if (consentBusy) return;
           setConsentOpen(false);
-          setConsentAddonKey(null);
+          setBusyScope(null);
         }}
-        onConfirm={confirmAddonCheckout}
-        busy={consentBusy}
-        t={t}
+        onConfirm={handleConsentConfirm}
+        busy={Boolean(busyScope)}
+        t={t as any}
       />
     </MobileShell>
   );
 }
 
-function Stat({ label, value }: { label: string; value: string }) {
-  const { border, muted, textStrong } = useAdminTheme();
+function Stat({ label, value, pill }: { label: string; value: string; pill?: boolean }) {
+  const { textStrong, muted, accentSoft, border } = useAdminTheme();
   return (
-    <MobileCard borderColor={border} space="$1.5">
+    <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>
-    </MobileCard>
+    </YStack>
   );
 }
 
-function ToggleRow({ label, value, onToggle }: { label: string; value: boolean; onToggle: (value: boolean) => void }) {
+function ToggleOption({ label, value, onToggle }: { label: string; value: boolean; onToggle: (val: boolean) => void }) {
   const { textStrong } = useAdminTheme();
   return (
-    <XStack alignItems="center" justifyContent="space-between" marginTop="$1.5">
-      <Text fontSize="$sm" color={textStrong}>
+    <XStack alignItems="center" justifyContent="space-between" paddingVertical="$1">
+      <Text fontSize="$sm" color={textStrong} fontWeight="600">
         {label}
       </Text>
       <input
@@ -433,27 +351,25 @@ async function updateSetting(
   }
 }
 
-function copyToClipboard(value: string, t: (key: string, fallback?: string) => string) {
-  navigator.clipboard
-    .writeText(value)
-    .then(() => toast.success(t('events.recap.copySuccess', 'Link kopiert')))
-    .catch(() => toast.error(t('events.recap.copyError', 'Link konnte nicht kopiert 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, t: (key: string, fallback?: string) => string) {
-  if (navigator.share) {
+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.shareGuests', 'Gäste-Galerie teilen'),
+        title: resolveName(event?.name ?? ''),
+        text: t('events.recap.shareText', 'Schau dir die Fotos von unserem Event an!'),
         url: value,
       });
-      return;
     } catch {
-      // ignore
+      // silently ignore or fallback to copy
     }
   }
-  copyToClipboard(value, t);
 }
 
 function downloadQr(dataUrl: string) {
@@ -476,4 +392,4 @@ function formatDate(iso?: string | null): string {
   const date = new Date(iso);
   if (Number.isNaN(date.getTime())) return '';
   return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' });
-}
+}