neuer demo tenant switcher + demo tenants mit eigenem artisan command. Event Admin überarbeitet, aber das ist nur ein Zwischenstand.

2025-11-25 09:47:39 +01:00
parent 8947a37261
commit fd788ef770
22 changed files with 1096 additions and 299 deletions
--- a/resources/js/admin/auth/tokens.ts
+++ b/resources/js/admin/auth/tokens.ts
@@ -16,6 +16,13 @@ export class AuthError extends Error {

 let cachedToken: StoredToken | null = null;

+function getCsrfToken(): string | undefined {
+  const meta = typeof document !== 'undefined'
+    ? (document.querySelector('meta[name=\"csrf-token\"]') as HTMLMetaElement | null)
+    : null;
+  return meta?.content;
+}
+
 function decodeStoredToken(raw: string | null): StoredToken | null {
  if (!raw) {
    return null;
@@ -106,6 +113,38 @@ function persistToken(token: StoredToken): void {
  cachedToken = token;
 }

+async function exchangeSessionForToken(): Promise<StoredToken | null> {
+  const csrf = getCsrfToken();
+
+  try {
+    const response = await fetch('/api/v1/tenant-auth/exchange', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+        ...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
+      },
+      credentials: 'same-origin',
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const data = (await response.json()) as { token?: string; abilities?: string[] } | null;
+    if (!data?.token) {
+      return null;
+    }
+
+    return storePersonalAccessToken(data.token, Array.isArray(data.abilities) ? data.abilities : []);
+  } catch (error) {
+    if (import.meta.env.DEV) {
+      console.warn('[Auth] Session token exchange failed', error);
+    }
+    return null;
+  }
+}
+
 export function storePersonalAccessToken(accessToken: string, abilities: string[]): StoredToken {
  const stored: StoredToken = {
    accessToken,
@@ -167,22 +206,29 @@ export function isAuthError(value: unknown): value is AuthError {
 }

 export async function authorizedFetch(input: RequestInfo | URL, init: RequestInit = {}): Promise<Response> {
-  const stored = loadToken();
-  if (!stored) {
-    notifyAuthFailure();
-    throw new AuthError('unauthenticated', 'No active tenant admin token');
-  }
-
  const headers = new Headers(init.headers);
-  headers.set('Authorization', `Bearer ${stored.accessToken}`);
  if (!headers.has('Accept')) {
    headers.set('Accept', 'application/json');
  }

-  const response = await fetch(input, { ...init, headers });
+  let stored = loadToken();
+  if (!stored) {
+    stored = await exchangeSessionForToken();
+  }
+  if (stored?.accessToken) {
+    headers.set('Authorization', `Bearer ${stored.accessToken}`);
+  }
+
+  const response = await fetch(input, {
+    ...init,
+    headers,
+    credentials: init.credentials ?? 'same-origin',
+  });

  if (response.status === 401) {
-    clearTokens();
+    if (stored) {
+      clearTokens();
+    }
    notifyAuthFailure();
    throw new AuthError('unauthorized', 'Token rejected by API');
  }
--- a/resources/js/admin/components/AdminLayout.tsx
+++ b/resources/js/admin/components/AdminLayout.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link, NavLink, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { LayoutDashboard, CalendarDays, Camera, Settings } from 'lucide-react';
+import { LayoutDashboard, CalendarDays, Settings } from 'lucide-react';
 import toast from 'react-hot-toast';
 import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
@@ -68,8 +68,7 @@ export function AdminLayout({ title, subtitle, actions, children, disableCommand
    : t('navigation.events');

  const photosPath = singleEvent?.slug ? ADMIN_EVENT_PHOTOS_PATH(singleEvent.slug) : ADMIN_EVENTS_PATH;
-  const photosLabel = t('navigation.photos', { defaultValue: 'Fotos' });
-  const settingsLabel = t('navigation.settings');
+  const billingLabel = t('navigation.billing', { defaultValue: 'Paket' });

  const baseNavItems = React.useMemo<NavItem[]>(() => [
    {
@@ -90,21 +89,13 @@ export function AdminLayout({ title, subtitle, actions, children, disableCommand
      prefetchKey: ADMIN_EVENTS_PATH,
    },
    {
-      key: 'photos',
-      to: photosPath,
-      label: photosLabel,
-      icon: Camera,
-      end: Boolean(singleEvent?.slug),
-      prefetchKey: singleEvent?.slug ? undefined : ADMIN_EVENTS_PATH,
-    },
-    {
-      key: 'settings',
-      to: ADMIN_SETTINGS_PATH,
-      label: settingsLabel,
+      key: 'billing',
+      to: ADMIN_BILLING_PATH,
+      label: billingLabel,
      icon: Settings,
-      prefetchKey: ADMIN_SETTINGS_PATH,
+      prefetchKey: ADMIN_BILLING_PATH,
    },
-  ], [eventsLabel, eventsPath, photosPath, photosLabel, settingsLabel, singleEvent, events.length, t]);
+  ], [eventsLabel, eventsPath, billingLabel, singleEvent, events.length, t]);

  const { user } = useAuth();
  const isMember = user?.role === 'member';
@@ -114,7 +105,7 @@ export function AdminLayout({ title, subtitle, actions, children, disableCommand
      if (!isMember) {
        return true;
      }
-      return !['dashboard', 'settings'].includes(item.key);
+      return !['dashboard', 'billing'].includes(item.key);
    }),
    [baseNavItems, isMember],
  );
@@ -251,6 +242,17 @@ function PageTabsNav({ tabs, currentKey }: { tabs: PageTab[]; currentKey?: strin

  const activeTab = React.useMemo(() => tabs.find((tab) => isActive(tab)), [tabs, location.pathname, currentKey]);

+  const handleTabClick = React.useCallback(
+    (tab: PageTab) => {
+      setMobileOpen(false);
+      const [path, hash] = tab.href.split('#');
+      if (location.pathname === path && hash) {
+        window.location.hash = `#${hash}`;
+      }
+    },
+    [location.pathname],
+  );
+
  return (
    <div className="border-t border-slate-200/70 bg-white/80 backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
      <div className="mx-auto flex w-full max-w-6xl flex-col gap-2 px-4 py-2 sm:px-6">
@@ -261,6 +263,7 @@ function PageTabsNav({ tabs, currentKey }: { tabs: PageTab[]; currentKey?: strin
              <Link
                key={tab.key}
                to={tab.href}
+                onClick={() => handleTabClick(tab)}
                className={cn(
                  'flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/60',
                  active
@@ -318,7 +321,10 @@ function PageTabsNav({ tabs, currentKey }: { tabs: PageTab[]; currentKey?: strin
                    <Link
                      key={`sheet-${tab.key}`}
                      to={tab.href}
-                      onClick={() => setMobileOpen(false)}
+                      onClick={() => {
+                        handleTabClick(tab);
+                        setMobileOpen(false);
+                      }}
                      className={cn(
                        'flex items-center justify-between rounded-2xl border px-4 py-3 text-sm font-medium shadow-sm transition',
                        active
--- a/resources/js/admin/components/CommandShelf.tsx
+++ b/resources/js/admin/components/CommandShelf.tsx
@@ -56,7 +56,7 @@ function formatNumber(value?: number | null): string {
 }

 export function CommandShelf() {
-  const { events, activeEvent, isLoading } = useEventContext();
+  const { events, activeEvent, isLoading, isError, refetch } = useEventContext();
  const { t, i18n } = useTranslation('common');
  const navigate = useNavigate();
  const [mobileShelfOpen, setMobileShelfOpen] = React.useState(false);
@@ -85,25 +85,30 @@ export function CommandShelf() {
    );
  }

-  if (!events.length) {
+  if (isError) {
    return (
      <section className="border-b border-slate-200/80 bg-white/80 px-4 py-4 backdrop-blur-sm dark:border-white/10 dark:bg-slate-950/70">
-        <div className="mx-auto flex w-full max-w-6xl flex-col gap-3 rounded-3xl border border-dashed border-rose-200/60 bg-white/70 p-5 text-center dark:border-white/10 dark:bg-white/5">
-          <Sparkles className="mx-auto h-6 w-6 text-rose-500 dark:text-rose-200" />
-          <p className="text-sm font-semibold text-slate-800 dark:text-white">
-            {t('commandShelf.empty.title', 'Starte mit deinem ersten Event')}
-          </p>
-          <p className="text-xs text-slate-500 dark:text-slate-300">
-            {t('commandShelf.empty.hint', 'Erstelle ein Event, dann bündeln wir hier deine wichtigsten Tools.')}
-          </p>
-          <div className="flex justify-center">
+        <div className="mx-auto flex w-full max-w-6xl flex-col gap-3 rounded-3xl border border-amber-200/70 bg-amber-50/70 p-5 dark:border-amber-200/20 dark:bg-amber-500/10">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="h-5 w-5 text-amber-500" />
+            <div className="space-y-1">
+              <p className="text-sm font-semibold text-slate-800 dark:text-white">
+                {t('commandShelf.error.title', 'Events konnten nicht geladen werden')}
+              </p>
+              <p className="text-xs text-slate-600 dark:text-slate-200">
+                {t('commandShelf.error.hint', 'Bitte versuche es erneut oder lade die Seite neu.')}
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-wrap justify-between gap-3">
+            <EventSwitcher compact />
            <Button
              size="sm"
+              variant="outline"
              className="rounded-full"
-              onClick={() => navigate(ADMIN_EVENT_CREATE_PATH)}
+              onClick={() => refetch()}
            >
-              <PlusCircle className="mr-2 h-4 w-4" />
-              {t('commandShelf.empty.cta', 'Event anlegen')}
+              {t('commandShelf.error.retry', 'Erneut laden')}
            </Button>
          </div>
        </div>
@@ -111,6 +116,11 @@ export function CommandShelf() {
    );
  }

+  if (!events.length) {
+    // Hide the empty hero entirely; dashboard content already handles the zero-events case.
+    return null;
+  }
+
  if (!activeEvent) {
    return (
      <section className="border-b border-slate-200/80 bg-white/80 px-4 py-4 backdrop-blur-sm dark:border-white/10 dark:bg-slate-950/70">
--- a/resources/js/admin/components/DevTenantSwitcher.tsx
+++ b/resources/js/admin/components/DevTenantSwitcher.tsx
@@ -4,10 +4,10 @@ import { Loader2, PanelLeftClose, PanelRightOpen } from 'lucide-react';
 import { Button } from '@/components/ui/button';

 const DEV_TENANT_KEYS = [
-  { key: 'lumen', label: 'Lumen Moments' },
-  { key: 'storycraft', label: 'Storycraft Weddings' },
-  { key: 'viewfinder', label: 'Viewfinder Studios' },
-  { key: 'pixel', label: 'Pixel & Co (dormant)' },
+  { key: 'cust-standard-empty', label: 'Endkunde – Standard (kein Event)' },
+  { key: 'cust-starter-wedding', label: 'Endkunde – Starter (Hochzeit)' },
+  { key: 'reseller-s-active', label: 'Reseller S – 3 aktive Events' },
+  { key: 'reseller-s-full', label: 'Reseller S – voll belegt (5/5)' },
 ] as const;

 declare global {
--- a/resources/js/admin/constants.ts
+++ b/resources/js/admin/constants.ts
@@ -17,6 +17,7 @@ export const buildEngagementTabPath = (tab: 'tasks' | 'collections' | 'emotions'
  `${ADMIN_ENGAGEMENT_PATH}?tab=${encodeURIComponent(tab)}`;
 export const ADMIN_BILLING_PATH = adminPath('/billing');
 export const ADMIN_PHOTOS_PATH = adminPath('/photos');
+export const ADMIN_LIVE_PATH = adminPath('/live');
 export const ADMIN_WELCOME_BASE_PATH = adminPath('/welcome');
 export const ADMIN_WELCOME_PACKAGES_PATH = adminPath('/welcome/packages');
 export const ADMIN_WELCOME_SUMMARY_PATH = adminPath('/welcome/summary');
@@ -31,3 +32,4 @@ export const ADMIN_EVENT_TASKS_PATH = (slug: string): string => adminPath(`/even
 export const ADMIN_EVENT_TOOLKIT_PATH = (slug: string): string => adminPath(`/events/${encodeURIComponent(slug)}/toolkit`);
 export const ADMIN_EVENT_INVITES_PATH = (slug: string): string => adminPath(`/events/${encodeURIComponent(slug)}/invites`);
 export const ADMIN_EVENT_PHOTOBOOTH_PATH = (slug: string): string => adminPath(`/events/${encodeURIComponent(slug)}/photobooth`);
+export const ADMIN_EVENT_RECAP_PATH = (slug: string): string => adminPath(`/events/${encodeURIComponent(slug)}/recap`);
--- a/resources/js/admin/context/EventContext.tsx
+++ b/resources/js/admin/context/EventContext.tsx
@@ -9,8 +9,10 @@ const STORAGE_KEY = 'tenant-admin.active-event';
 export interface EventContextValue {
  events: TenantEvent[];
  isLoading: boolean;
+  isError: boolean;
  activeEvent: TenantEvent | null;
  selectEvent: (slug: string | null) => void;
+  refetch: () => void;
 }

 const EventContext = React.createContext<EventContextValue | undefined>(undefined);
@@ -29,11 +31,13 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
  const {
    data: fetchedEvents = [],
    isLoading: queryLoading,
+    isError,
+    refetch,
  } = useQuery<TenantEvent[]>({
    queryKey: ['tenant-events'],
    queryFn: async () => {
      try {
-        return await getEvents();
+        return await getEvents({ force: true });
      } catch (error) {
        console.warn('[EventContext] Failed to fetch events', error);
        throw error;
@@ -48,9 +52,17 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
  const isLoading = authReady ? queryLoading : status === 'loading';

  React.useEffect(() => {
-    if (!storedSlug && events.length === 1 && events[0]?.slug && typeof window !== 'undefined') {
-      setStoredSlug(events[0].slug);
-      window.localStorage.setItem(STORAGE_KEY, events[0].slug);
+    if (!events.length || typeof window === 'undefined') {
+      return;
+    }
+
+    const hasStored = Boolean(storedSlug);
+    const slugExists = hasStored && events.some((event) => event.slug === storedSlug);
+    const fallbackSlug = events[0]?.slug;
+
+    if (!slugExists && fallbackSlug) {
+      setStoredSlug(fallbackSlug);
+      window.localStorage.setItem(STORAGE_KEY, fallbackSlug);
    }
  }, [events, storedSlug]);

@@ -64,11 +76,8 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
      return matched;
    }

-    if (!storedSlug && events.length === 1) {
-      return events[0];
-    }
-
-    return null;
+    // Fallback to the first event if the stored slug is missing or stale.
+    return events[0];
  }, [events, storedSlug]);

  const selectEvent = React.useCallback((slug: string | null) => {
@@ -86,10 +95,12 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
    () => ({
      events,
      isLoading,
+      isError,
      activeEvent,
      selectEvent,
+      refetch,
    }),
-    [events, isLoading, activeEvent, selectEvent]
+    [events, isLoading, isError, activeEvent, selectEvent, refetch]
  );

  return <EventContext.Provider value={value}>{children}</EventContext.Provider>;
--- a/resources/js/admin/dev-tools.ts
+++ b/resources/js/admin/dev-tools.ts
@@ -1,9 +1,9 @@
 if (import.meta.env.DEV || import.meta.env.VITE_ENABLE_TENANT_SWITCHER === 'true') {
  const CREDENTIALS: Record<string, { login: string; password: string }> = {
-    lumen: { login: 'hello@lumen-moments.demo', password: 'Demo1234!' },
-    storycraft: { login: 'storycraft-owner@demo.fotospiel', password: 'Demo1234!' },
-    viewfinder: { login: 'team@viewfinder.demo', password: 'Demo1234!' },
-    pixel: { login: 'support@pixelco.demo', password: 'Demo1234!' },
+    'cust-standard-empty': { login: 'standard-empty@demo.fotospiel', password: 'Demo1234!' },
+    'cust-starter-wedding': { login: 'starter-wedding@demo.fotospiel', password: 'Demo1234!' },
+    'reseller-s-active': { login: 'reseller-active@demo.fotospiel', password: 'Demo1234!' },
+    'reseller-s-full': { login: 'reseller-full@demo.fotospiel', password: 'Demo1234!' },
  };

  async function loginAs(key: string): Promise<void> {
--- a/resources/js/admin/i18n/locales/de/common.json
+++ b/resources/js/admin/i18n/locales/de/common.json
@@ -16,12 +16,13 @@
    "event": "Event",
    "events": "Events",
    "photos": "Fotos",
+    "live": "Live",
    "tasks": "Aufgaben",
-    "collections": "Aufgabenvorlagen",
+    "collections": "Aufgabensammlungen",
    "emotions": "Emotionen",
-    "engagement": "Aufgaben & Co.",
+    "engagement": "Aufgaben-Bibliothek",
    "toolkit": "Toolkit",
-    "billing": "Abrechnung",
+    "billing": "Paket",
    "settings": "Einstellungen",
    "tabs": {
      "open": "Tabs",
@@ -36,7 +37,8 @@
    "guests": "Team & Gäste",
    "tasks": "Aufgaben",
    "invites": "Einladungen",
-    "toolkit": "Toolkit"
+    "toolkit": "Toolkit",
+    "recap": "Nachbereitung"
  },
  "eventSwitcher": {
    "title": "Event auswählen",
@@ -91,6 +93,11 @@
      "sheetDescription": "Moderation, Aufgaben und Einladungen an einem Ort.",
      "tip": "Tipp: Öffne hier deine wichtigsten Aktionen am Eventtag.",
      "tipCta": "Verstanden"
+    },
+    "error": {
+      "title": "Events konnten nicht geladen werden",
+      "hint": "Bitte versuche es erneut oder lade die Seite neu.",
+      "retry": "Erneut laden"
    }
  }
 }
--- a/resources/js/admin/i18n/locales/de/management.json
+++ b/resources/js/admin/i18n/locales/de/management.json
@@ -208,6 +208,20 @@
      }
    }
  },
+  "galleryStatus": {
+    "badge": "Laufzeit",
+    "title": "Galerie-Laufzeit & Verfügbarkeit",
+    "subtitle": "Halte im Blick, wie lange Gäste noch auf die Galerie zugreifen können.",
+    "stateLabel": "Status",
+    "stateExpired": "Galerie abgelaufen",
+    "stateWarning": "Galerie läuft bald ab",
+    "stateOk": "Galerie aktiv",
+    "noExpiry": "Kein Ablaufdatum gesetzt",
+    "expiresAt": "Ablaufdatum: {{date}}",
+    "daysLabel": "Verbleibende Tage",
+    "expiredHint": "Gäste haben keinen Zugriff mehr – verlängere das Paket, um die Galerie zu öffnen.",
+    "hint": "Bei Bedarf kannst du im Paketbereich die Laufzeit verlängern."
+  },
  "members": {
    "title": "Event-Mitglieder",
    "subtitle": "Verwalte Moderatoren, Admins und Helfer für dieses Event.",
--- a/resources/js/admin/i18n/locales/en/common.json
+++ b/resources/js/admin/i18n/locales/en/common.json
@@ -16,12 +16,13 @@
    "event": "Event",
    "events": "Events",
    "photos": "Photos",
+    "live": "Live",
    "tasks": "Tasks",
-    "collections": "Collections",
+    "collections": "Task collections",
    "emotions": "Emotions",
-    "engagement": "Tasks & More",
+    "engagement": "Task library",
    "toolkit": "Toolkit",
-    "billing": "Billing",
+    "billing": "Package",
    "settings": "Settings",
    "tabs": {
      "open": "Tabs",
@@ -36,7 +37,8 @@
    "guests": "Members",
    "tasks": "Tasks",
    "invites": "Invites",
-    "toolkit": "Toolkit"
+    "toolkit": "Toolkit",
+    "recap": "Recap"
  },
  "eventSwitcher": {
    "title": "Select event",
@@ -91,6 +93,11 @@
      "sheetDescription": "Moderation, tasks, and invites in one place.",
      "tip": "Tip: Access your key event-day actions here.",
      "tipCta": "Got it"
+    },
+    "error": {
+      "title": "Events could not be loaded",
+      "hint": "Please try again or refresh the page.",
+      "retry": "Retry"
    }
  }
 }
--- a/resources/js/admin/i18n/locales/en/management.json
+++ b/resources/js/admin/i18n/locales/en/management.json
@@ -204,6 +204,20 @@
      }
    }
  },
+  "galleryStatus": {
+    "badge": "Runtime",
+    "title": "Gallery runtime & availability",
+    "subtitle": "Keep track of how long guests can still access the gallery.",
+    "stateLabel": "Status",
+    "stateExpired": "Gallery expired",
+    "stateWarning": "Gallery expiring soon",
+    "stateOk": "Gallery active",
+    "noExpiry": "No expiry date set",
+    "expiresAt": "Expiry date: {{date}}",
+    "daysLabel": "Days remaining",
+    "expiredHint": "Guests can no longer access the gallery – extend your package to reopen it.",
+    "hint": "If needed, extend the runtime in your package settings."
+  },
  "members": {
    "title": "Event members",
    "subtitle": "Manage moderators, admins, and helpers for this event.",
--- a/resources/js/admin/lib/eventTabs.ts
+++ b/resources/js/admin/lib/eventTabs.ts
@@ -5,6 +5,7 @@ import {
  ADMIN_EVENT_PHOTOS_PATH,
  ADMIN_EVENT_TASKS_PATH,
  ADMIN_EVENT_VIEW_PATH,
+  ADMIN_EVENT_RECAP_PATH,
 } from '../constants';

 export type EventTabCounts = Partial<{
@@ -56,5 +57,10 @@ export function buildEventTabs(event: TenantEvent, translate: Translator, counts
      label: translate('eventMenu.photobooth', 'Photobooth'),
      href: ADMIN_EVENT_PHOTOBOOTH_PATH(event.slug),
    },
+    {
+      key: 'recap',
+      label: translate('eventMenu.recap', 'Nachbereitung'),
+      href: ADMIN_EVENT_RECAP_PATH(event.slug),
+    },
  ];
 }
--- a/resources/js/admin/pages/DashboardPage.tsx
+++ b/resources/js/admin/pages/DashboardPage.tsx
@@ -40,6 +40,7 @@ import {
 } from '../api';
 import { isAuthError } from '../auth/tokens';
 import { useAuth } from '../auth/context';
+import { useEventContext } from '../context/EventContext';
 import {
  adminPath,
  ADMIN_HOME_PATH,
@@ -82,6 +83,7 @@ export default function DashboardPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const { user } = useAuth();
+  const { events: ctxEvents, activeEvent: ctxActiveEvent } = useEventContext();
  const { progress, markStep } = useOnboardingProgress();
  const { t, i18n } = useTranslation('dashboard', { keyPrefix: 'dashboard' });
  const { t: tc } = useTranslation('common');
@@ -132,7 +134,7 @@ export default function DashboardPage() {
      try {
        const [summary, events, packages] = await Promise.all([
          getDashboardSummary().catch(() => null),
-          getEvents().catch(() => [] as TenantEvent[]),
+          getEvents({ force: true }).catch(() => [] as TenantEvent[]),
          getTenantPackagesOverview().catch(() => ({ packages: [], activePackage: null })),
        ]);

@@ -141,11 +143,12 @@ export default function DashboardPage() {
        }

        const fallbackSummary = buildSummaryFallback(events, packages.activePackage);
-        const primaryEvent = events[0] ?? null;
+        const eventPool = events.length ? events : ctxEvents;
+        const primaryEvent = ctxActiveEvent ?? eventPool[0] ?? null;
        const primaryEventName = primaryEvent ? resolveEventName(primaryEvent.name, primaryEvent.slug) : null;

        setReadiness({
-          hasEvent: events.length > 0,
+          hasEvent: eventPool.length > 0,
          hasTasks: primaryEvent ? (Number(primaryEvent.tasks_count ?? 0) > 0) : false,
          hasQrInvites: primaryEvent
            ? Number(
@@ -162,7 +165,7 @@ export default function DashboardPage() {

        setState({
          summary: summary ?? fallbackSummary,
-          events,
+          events: eventPool,
          activePackage: packages.activePackage,
          loading: false,
          errorKey: null,
@@ -217,12 +220,21 @@ export default function DashboardPage() {
  const subtitle = translate('welcome.subtitle');
  const errorMessage = errorKey ? translate(`errors.${errorKey}`) : null;
  const dateLocale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
+  const canCreateEvent = React.useMemo(() => {
+    if (!activePackage) {
+      return true;
+    }
+    if (activePackage.remaining_events === null || activePackage.remaining_events === undefined) {
+      return true;
+    }
+    return activePackage.remaining_events > 0;
+  }, [activePackage]);

-  const upcomingEvents = getUpcomingEvents(events);
-  const publishedEvents = events.filter((event) => event.status === 'published');
-  const primaryEvent = events[0] ?? null;
+  const upcomingEvents = getUpcomingEvents(ctxEvents.length ? ctxEvents : events);
+  const publishedEvents = (ctxEvents.length ? ctxEvents : events).filter((event) => event.status === 'published');
+  const primaryEvent = ctxActiveEvent ?? (ctxEvents[0] ?? events[0] ?? null);
  const primaryEventName = primaryEvent ? resolveEventName(primaryEvent.name, primaryEvent.slug) : null;
-  const singleEvent = events.length === 1 ? events[0] : null;
+  const singleEvent = ctxEvents.length === 1 ? ctxEvents[0] : (events.length === 1 ? events[0] : null);
  const singleEventName = singleEvent ? resolveEventName(singleEvent.name, singleEvent.slug) : null;
  const singleEventDateLabel = singleEvent?.event_date ? formatDate(singleEvent.event_date, dateLocale) : null;
  const primaryEventLimits = primaryEvent?.limits ?? null;
@@ -468,7 +480,15 @@ export default function DashboardPage() {
        label: translate('quickActions.createEvent.label'),
        description: translate('quickActions.createEvent.description'),
        icon: <Plus className="h-5 w-5" />,
-        onClick: () => navigate(ADMIN_EVENT_CREATE_PATH),
+        onClick: () => {
+          if (!canCreateEvent) {
+            toast.error(tc('errors.eventLimit', 'Dein aktuelles Paket enthält keine freien Event-Slots mehr.'));
+            navigate(ADMIN_BILLING_PATH);
+            return;
+          }
+          navigate(ADMIN_EVENT_CREATE_PATH);
+        },
+        disabled: !canCreateEvent,
      },
      {
        key: 'photos',
@@ -559,7 +579,7 @@ export default function DashboardPage() {
  );

  return (
-    <AdminLayout title={adminTitle} subtitle={adminSubtitle} actions={layoutActions} tabs={dashboardTabs} currentTabKey={currentDashboardTab}>
+    <AdminLayout title={adminTitle} subtitle={adminSubtitle} tabs={dashboardTabs} currentTabKey={currentDashboardTab}>
      {errorMessage && (
        <Alert variant="destructive">
          <AlertTitle>{t('dashboard.alerts.errorTitle')}</AlertTitle>
--- a/resources/js/admin/pages/EventDetailPage.tsx
+++ b/resources/js/admin/pages/EventDetailPage.tsx
@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
  AlertTriangle,
@@ -94,6 +94,7 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
  const { slug: slugParam } = useParams<{ slug?: string }>();
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
+  const location = useLocation();
  const { t } = useTranslation('management');
  const { t: tCommon } = useTranslation('common');

@@ -217,19 +218,53 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
    ? t('events.workspace.toolkitSubtitle', 'Moderation, Aufgaben und Einladungen für deinen Eventtag bündeln.')
    : t('events.workspace.detailSubtitle', 'Behalte Status, Aufgaben und Einladungen deines Events im Blick.');

-  const tabLabels = React.useMemo(
-    () => ({
-      overview: t('events.workspace.tabs.overview', 'Überblick'),
-      live: t('events.workspace.tabs.live', 'Live'),
-      setup: t('events.workspace.tabs.setup', 'Vorbereitung'),
-      recap: t('events.workspace.tabs.recap', 'Nachbereitung'),
-    }),
-    [t],
-  );
  const limitWarnings = React.useMemo(
    () => (event?.limits ? buildLimitWarnings(event.limits, (key, options) => tCommon(`limits.${key}`, options)) : []),
    [event?.limits, tCommon],
  );
+  const [dismissedWarnings, setDismissedWarnings] = React.useState<Set<string>>(new Set());
+
+  React.useEffect(() => {
+    const slug = event?.slug;
+    if (!slug || typeof window === 'undefined') {
+      setDismissedWarnings(new Set());
+      return;
+    }
+    try {
+      const raw = window.localStorage.getItem(`tenant-admin:dismissed-limit-warnings:${slug}`);
+      if (!raw) {
+        setDismissedWarnings(new Set());
+        return;
+      }
+      const parsed = JSON.parse(raw) as string[];
+      setDismissedWarnings(new Set(parsed));
+    } catch {
+      setDismissedWarnings(new Set());
+    }
+  }, [event?.slug]);
+
+  const visibleWarnings = React.useMemo(
+    () => limitWarnings.filter((warning) => !dismissedWarnings.has(warning.id)),
+    [limitWarnings, dismissedWarnings],
+  );
+
+  const dismissWarning = React.useCallback(
+    (id: string) => {
+      const slug = event?.slug;
+      setDismissedWarnings((prev) => {
+        const next = new Set(prev);
+        next.add(id);
+        if (slug && typeof window !== 'undefined') {
+          window.localStorage.setItem(
+            `tenant-admin:dismissed-limit-warnings:${slug}`,
+            JSON.stringify(Array.from(next)),
+          );
+        }
+        return next;
+      });
+    },
+    [event?.slug],
+  );

  const eventTabs = React.useMemo(() => {
    if (!event) {
@@ -243,6 +278,11 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
    });
  }, [event, toolkitData?.photos?.pending?.length, toolkitData?.tasks?.summary.total, toolkitData?.invites?.summary.active, t]);

+  const isRecapRoute = React.useMemo(
+    () => location.pathname.endsWith('/recap'),
+    [location.pathname],
+  );
+
 const shownWarningToasts = React.useRef<Set<string>>(new Set());
  //const [addonBusyId, setAddonBusyId] = React.useState<string | null>(null);

@@ -336,7 +376,12 @@ const shownWarningToasts = React.useRef<Set<string>>(new Set());
  }

  return (
-    <AdminLayout title={eventName} subtitle={subtitle} tabs={eventTabs} currentTabKey="overview">
+    <AdminLayout
+      title={eventName}
+      subtitle={subtitle}
+      tabs={eventTabs}
+      currentTabKey={isRecapRoute ? 'recap' : 'overview'}
+    >
      {error && (
        <Alert variant="destructive">
          <AlertTitle>{t('events.alerts.failedTitle', 'Aktion fehlgeschlagen')}</AlertTitle>
@@ -344,9 +389,9 @@ const shownWarningToasts = React.useRef<Set<string>>(new Set());
        </Alert>
      )}

-      {limitWarnings.length > 0 && (
+      {visibleWarnings.length > 0 && (
        <div className="mb-6 space-y-2">
-          {limitWarnings.map((warning) => (
+          {visibleWarnings.map((warning) => (
            <Alert
              key={warning.id}
              variant={warning.tone === 'danger' ? 'destructive' : 'default'}
@@ -357,33 +402,43 @@ const shownWarningToasts = React.useRef<Set<string>>(new Set());
                  <AlertTriangle className="h-4 w-4" />
                  {warning.message}
                </AlertDescription>
-                {(['photos', 'guests', 'gallery'] as const).includes(warning.scope) ? (
-                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => { void handleAddonPurchase(warning.scope as 'photos' | 'guests' | 'gallery'); }}
-                      disabled={addonBusyId === warning.scope}
-                      className="justify-start"
-                    >
-                      <ShoppingCart className="mr-2 h-4 w-4" />
-                      {warning.scope === 'photos'
-                        ? t('events.actions.buyMorePhotos', 'Mehr Fotos freischalten')
-                        : warning.scope === 'guests'
-                          ? t('events.actions.buyMoreGuests', 'Mehr Gäste freischalten')
-                          : t('events.actions.extendGallery', 'Galerie verlängern')}
-                    </Button>
-                    {addonsCatalog.length > 0 ? (
-                      <AddonsPicker
-                        addons={addonsCatalog}
-                        scope={warning.scope as 'photos' | 'guests' | 'gallery'}
-                        onCheckout={(key) => { void handleAddonPurchase(warning.scope as 'photos' | 'guests' | 'gallery', key); }}
-                        busy={addonBusyId === warning.scope}
-                        t={(key, fallback) => t(key, fallback)}
-                      />
-                    ) : null}
-                  </div>
-                ) : null}
+                <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+                  {(['photos', 'guests', 'gallery'] as const).includes(warning.scope) ? (
+                    <>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => { void handleAddonPurchase(warning.scope as 'photos' | 'guests' | 'gallery'); }}
+                        disabled={addonBusyId === warning.scope}
+                        className="justify-start"
+                      >
+                        <ShoppingCart className="mr-2 h-4 w-4" />
+                        {warning.scope === 'photos'
+                          ? t('events.actions.buyMorePhotos', 'Mehr Fotos freischalten')
+                          : warning.scope === 'guests'
+                            ? t('events.actions.buyMoreGuests', 'Mehr Gäste freischalten')
+                            : t('events.actions.extendGallery', 'Galerie verlängern')}
+                      </Button>
+                      {addonsCatalog.length > 0 ? (
+                        <AddonsPicker
+                          addons={addonsCatalog}
+                          scope={warning.scope as 'photos' | 'guests' | 'gallery'}
+                          onCheckout={(key) => { void handleAddonPurchase(warning.scope as 'photos' | 'guests' | 'gallery', key); }}
+                          busy={addonBusyId === warning.scope}
+                          t={(key, fallback) => t(key, fallback)}
+                        />
+                      ) : null}
+                    </>
+                  ) : null}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => dismissWarning(warning.id)}
+                    className="justify-start text-slate-600 hover:text-slate-900"
+                  >
+                    {tCommon('actions.dismiss', 'Hinweis ausblenden')}
+                  </Button>
+                </div>
              </div>
            </Alert>
          ))}
@@ -408,12 +463,11 @@ const shownWarningToasts = React.useRef<Set<string>>(new Set());
            navigate={navigate}
          />

-          <Tabs defaultValue="overview" className="space-y-6">
-            <TabsList className="grid gap-2 rounded-2xl bg-slate-100/80 p-1 dark:bg-white/5 sm:grid-cols-4">
-              <TabsTrigger value="overview">{tabLabels.overview}</TabsTrigger>
-              <TabsTrigger value="live">{tabLabels.live}</TabsTrigger>
-              <TabsTrigger value="setup">{tabLabels.setup}</TabsTrigger>
-              <TabsTrigger value="recap">{tabLabels.recap}</TabsTrigger>
+          <Tabs defaultValue={isRecapRoute ? 'recap' : 'overview'} className="space-y-6">
+            <TabsList className="grid gap-2 rounded-2xl bg-slate-100/80 p-1 dark:bg-white/5 sm:grid-cols-3">
+              <TabsTrigger value="overview">{t('events.workspace.tabs.overview', 'Überblick')}</TabsTrigger>
+              <TabsTrigger value="setup">{t('events.workspace.tabs.setup', 'Vorbereitung')}</TabsTrigger>
+              <TabsTrigger value="recap">{t('events.workspace.tabs.recap', 'Nachbereitung')}</TabsTrigger>
            </TabsList>

            <TabsContent value="overview" className="space-y-6">
@@ -424,31 +478,6 @@ const shownWarningToasts = React.useRef<Set<string>>(new Set());
              <MetricsGrid metrics={toolkitData?.metrics} stats={stats} />
            </TabsContent>

-            <TabsContent value="live" className="space-y-6">
-              {(toolkitData?.alerts?.length ?? 0) > 0 && <AlertList alerts={toolkitData?.alerts ?? []} />}
-
-              <SectionCard className="space-y-6">
-                <SectionHeader
-                  eyebrow={t('events.notifications.badge', 'Gästefeeds')}
-                  title={t('events.notifications.panelTitle', 'Nachrichten an Gäste')}
-                  description={t('events.notifications.panelDescription', 'Verschicke kurze Hinweise oder Hilfe an die Gästepwa. Links werden direkt im Notification-Center angezeigt.')}
-                />
-                <div className="grid gap-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
-                  <GuestNotificationStatsCard notifications={toolkitData?.notifications} />
-                  <GuestBroadcastCard eventSlug={event.slug} eventName={eventName} />
-                </div>
-              </SectionCard>
-
-              <div className="grid gap-6 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,0.8fr)]">
-                <PendingPhotosCard
-                  slug={event.slug}
-                  photos={toolkitData?.photos.pending ?? []}
-                  navigateToModeration={() => navigate(ADMIN_EVENT_PHOTOS_PATH(event.slug))}
-                />
-                <RecentUploadsCard slug={event.slug} photos={toolkitData?.photos.recent ?? []} />
-              </div>
-            </TabsContent>
-
            <TabsContent value="setup" className="space-y-6">
              <div className="grid gap-6 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,0.8fr)]">
                <TaskOverviewCard tasks={toolkitData?.tasks} navigateToTasks={() => navigate(ADMIN_EVENT_TASKS_PATH(event.slug))} />
@@ -480,7 +509,13 @@ const shownWarningToasts = React.useRef<Set<string>>(new Set());
            </TabsContent>

            <TabsContent value="recap" className="space-y-6">
-              <GalleryShareCard invites={toolkitData?.invites} onManageInvites={() => navigate(`${ADMIN_EVENT_INVITES_PATH(event.slug)}?tab=layout`)} />
+              <GalleryShareCard
+                invites={toolkitData?.invites}
+                onManageInvites={() => navigate(`${ADMIN_EVENT_INVITES_PATH(event.slug)}?tab=layout`)}
+              />
+              {event.limits?.gallery ? (
+                <GalleryStatusCard gallery={event.limits.gallery} />
+              ) : null}
              <FeedbackCard slug={event.slug} />
            </TabsContent>
          </Tabs>
@@ -1033,6 +1068,59 @@ function GalleryShareCard({
  );
 }

+function GalleryStatusCard({ gallery }: { gallery: GallerySummary }) {
+  const { t } = useTranslation('management');
+
+  const stateLabel =
+    gallery.state === 'expired'
+      ? t('events.galleryStatus.stateExpired', 'Galerie abgelaufen')
+      : gallery.state === 'warning'
+        ? t('events.galleryStatus.stateWarning', 'Galerie läuft bald ab')
+        : t('events.galleryStatus.stateOk', 'Galerie aktiv');
+
+  const expiresLabel =
+    gallery.expires_at && gallery.state !== 'unlimited'
+      ? formatDate(gallery.expires_at)
+      : t('events.galleryStatus.noExpiry', 'Kein Ablaufdatum gesetzt');
+
+  const daysRemaining =
+    typeof gallery.days_remaining === 'number' && gallery.days_remaining >= 0
+      ? gallery.days_remaining
+      : null;
+
+  return (
+    <SectionCard className="space-y-3">
+      <SectionHeader
+        eyebrow={t('events.galleryStatus.badge', 'Laufzeit')}
+        title={t('events.galleryStatus.title', 'Galerie-Laufzeit & Verfügbarkeit')}
+        description={t('events.galleryStatus.subtitle', 'Halte im Blick, wie lange Gäste noch auf die Galerie zugreifen können.')}
+      />
+      <div className="flex flex-col gap-3 rounded-2xl border border-slate-200 bg-white/90 p-4 text-sm text-slate-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 md:flex-row md:items-center md:justify-between">
+        <div className="space-y-1">
+          <p className="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">
+            {t('events.galleryStatus.stateLabel', 'Status')}
+          </p>
+          <p className="text-sm font-semibold text-slate-900 dark:text-white">{stateLabel}</p>
+          <p className="text-xs text-slate-600 dark:text-slate-300">
+            {t('events.galleryStatus.expiresAt', {
+              defaultValue: 'Ablaufdatum: {{date}}',
+              date: expiresLabel,
+            })}
+          </p>
+        </div>
+        <div className="space-y-1">
+          <p className="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">
+            {t('events.galleryStatus.daysLabel', 'Verbleibende Tage')}
+          </p>
+          <p className="text-2xl font-semibold text-slate-900 dark:text-white">
+            {daysRemaining !== null ? daysRemaining : '—'}
+          </p>
+        </div>
+      </div>
+    </SectionCard>
+  );
+}
+

 function extractBrandingPalette(
  settings: TenantEvent['settings'],
@@ -1068,133 +1156,7 @@ function extractBrandingPalette(
  return { colors, font };
 }

-function PendingPhotosCard({
-  slug,
-  photos,
-  navigateToModeration,
-}: {
-  slug: string;
-  photos: TenantPhoto[];
-  navigateToModeration: () => void;
-}) {
-  const { t } = useTranslation('management');
-  const [entries, setEntries] = React.useState(photos);
-  const [updatingId, setUpdatingId] = React.useState<number | null>(null);
-
-  React.useEffect(() => {
-    setEntries(photos);
-  }, [photos]);
-
-  const handleVisibility = async (photo: TenantPhoto, visible: boolean) => {
-    setUpdatingId(photo.id);
-    try {
-      const updated = await updatePhotoVisibility(slug, photo.id, visible);
-      setEntries((prev) => prev.map((item) => (item.id === photo.id ? updated : item)));
-      toast.success(
-        visible
-          ? t('events.photos.toastVisible', 'Foto wieder sichtbar gemacht.')
-          : t('events.photos.toastHidden', 'Foto ausgeblendet.'),
-      );
-    } catch (err) {
-      toast.error(
-        isAuthError(err)
-          ? t('events.photos.errorAuth', 'Session abgelaufen. Bitte erneut anmelden.')
-          : t('events.photos.errorVisibility', 'Sichtbarkeit konnte nicht geändert werden.'),
-      );
-    } finally {
-      setUpdatingId(null);
-    }
-  };
-
-  const handleFeature = async (photo: TenantPhoto, feature: boolean) => {
-    setUpdatingId(photo.id);
-    try {
-      const updated = feature ? await featurePhoto(slug, photo.id) : await unfeaturePhoto(slug, photo.id);
-      setEntries((prev) => prev.map((item) => (item.id === photo.id ? updated : item)));
-      toast.success(
-        feature
-          ? t('events.photos.toastFeatured', 'Foto als Highlight markiert.')
-          : t('events.photos.toastUnfeatured', 'Highlight entfernt.'),
-      );
-    } catch (err) {
-      toast.error(getApiErrorMessage(err, t('events.photos.errorFeature', 'Aktion fehlgeschlagen.')));
-    } finally {
-      setUpdatingId(null);
-    }
-  };
-
-  return (
-    <SectionCard className="space-y-3">
-      <SectionHeader
-        eyebrow={t('events.photos.pendingBadge', 'Moderation')}
-        title={t('events.photos.pendingTitle', 'Fotos in Moderation')}
-        description={t('events.photos.pendingSubtitle', 'Schnell prüfen, bevor Gäste live gehen.')}
-        endSlot={(
-          <Badge variant="outline" className="border-emerald-200 text-emerald-600 dark:border-emerald-500/30 dark:text-emerald-200">
-            {t('events.photos.pendingCount', { defaultValue: '{{count}} Fotos offen', count: entries.length })}
-          </Badge>
-        )}
-      />
-      <div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
-        {entries.length ? (
-          <div className="grid gap-3 sm:grid-cols-2">
-            {entries.slice(0, 4).map((photo) => {
-              const hidden = photo.status === 'hidden';
-              return (
-                <div key={photo.id} className="rounded-xl border border-slate-200 bg-white/90 p-2">
-                  <div className="relative overflow-hidden rounded-lg">
-                    <img
-                      src={photo.thumbnail_url ?? photo.url ?? undefined}
-                      alt={photo.caption ?? 'Foto'}
-                      className={`h-32 w-full object-cover ${hidden ? 'opacity-60' : ''}`}
-                    />
-                    {photo.is_featured ? (
-                      <span className="absolute left-2 top-2 rounded-full bg-pink-500/90 px-2 py-0.5 text-[10px] font-semibold text-white">
-                        Highlight
-                      </span>
-                    ) : null}
-                  </div>
-                  <div className="mt-2 flex flex-wrap gap-2 text-[11px] text-slate-500">
-                    <Badge variant="outline">{photo.uploader_name ?? 'Gast'}</Badge>
-                    <Badge variant="outline">♥ {photo.likes_count}</Badge>
-                  </div>
-                  <div className="mt-2 flex flex-wrap gap-2 text-xs">
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      disabled={updatingId === photo.id}
-                      onClick={() => handleVisibility(photo, hidden)}
-                    >
-                      {hidden
-                        ? t('events.photos.show', 'Einblenden')
-                        : t('events.photos.hide', 'Verstecken')}
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant={photo.is_featured ? 'secondary' : 'outline'}
-                      disabled={updatingId === photo.id}
-                      onClick={() => handleFeature(photo, !photo.is_featured)}
-                    >
-                      {photo.is_featured
-                        ? t('events.photos.unfeature', 'Highlight entfernen')
-                        : t('events.photos.feature', 'Als Highlight markieren')}
-                    </Button>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        ) : (
-          <p className="text-xs text-slate-500">{t('events.photos.pendingEmpty', 'Aktuell warten keine Fotos auf Freigabe.')}</p>
-        )}
-
-        <Button variant="outline" onClick={navigateToModeration} className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
-          <Camera className="mr-2 h-4 w-4" /> {t('events.photos.openModeration', 'Moderation öffnen')}
-        </Button>
-      </div>
-    </SectionCard>
-  );
-}
+// Pending photos summary moved to the dedicated Live/Photos view.

 function RecentUploadsCard({ slug, photos }: { slug: string; photos: TenantPhoto[] }) {
  const { t } = useTranslation('management');
--- a/resources/js/admin/pages/EventInvitesPage.tsx
+++ b/resources/js/admin/pages/EventInvitesPage.tsx
@@ -1205,9 +1205,6 @@ export default function EventInvitesPage(): React.ReactElement {
                                );
                              })}
                            </div>
-                            <p className="text-xs text-muted-foreground">
-                              {t('invites.export.actions.hint', 'PDF enthält Beschnittmarken, PNG ist für schnelle digitale Freigaben geeignet.')}
-                            </p>
                          </CardContent>
                        </Card>

@@ -1499,10 +1496,6 @@ function InviteShareSummaryCard({ invite, onCopy, onCreate, onOpenLayout, onOpen
            </Button>
          </div>
        </div>
-        <p className="text-xs text-muted-foreground">
-          <Mail className="mr-1 inline h-3.5 w-3.5 text-primary" />
-          {t('invites.share.hint', 'Teile den Link direkt im Team oder binde ihn im Newsletter ein.')}
-        </p>
      </CardContent>
    </Card>
  );
--- a/resources/js/admin/pages/EventPhotosPage.tsx
+++ b/resources/js/admin/pages/EventPhotosPage.tsx
@@ -278,18 +278,6 @@ export default function EventPhotosPage() {

      <LimitWarningsBanner limits={limits} translate={translateLimits} eventSlug={slug} addons={addons} />

-      {eventAddons.length > 0 && (
-        <Card className="mb-6 border-0 bg-white/85 shadow-lg shadow-slate-100/50">
-          <CardHeader>
-            <CardTitle className="text-base font-semibold text-slate-900">{t('events.sections.addons.title', 'Add-ons & Upgrades')}</CardTitle>
-            <CardDescription>{t('events.sections.addons.description', 'Zusätzliche Kontingente für dieses Event.')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <AddonSummaryList addons={eventAddons} t={(key, fallback) => t(key, fallback)} />
-          </CardContent>
-        </Card>
-      )}
-
      <Card className="border-0 bg-white/85 shadow-xl shadow-sky-100/60">
        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div>
@@ -351,6 +339,22 @@ export default function EventPhotosPage() {
          )}
        </CardContent>
      </Card>
+
+      {eventAddons.length > 0 && (
+        <Card className="mt-6 border-0 bg-white/85 shadow-lg shadow-slate-100/50">
+          <CardHeader>
+            <CardTitle className="text-base font-semibold text-slate-900">
+              {t('events.sections.addons.title', 'Add-ons & Upgrades')}
+            </CardTitle>
+            <CardDescription>
+              {t('events.sections.addons.description', 'Zusätzliche Kontingente für dieses Event.')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AddonSummaryList addons={eventAddons} t={(key, fallback) => t(key, fallback)} />
+          </CardContent>
+        </Card>
+      )}
    </AdminLayout>
  );
 }
--- a/resources/js/admin/pages/EventTasksPage.tsx
+++ b/resources/js/admin/pages/EventTasksPage.tsx
@@ -259,7 +259,10 @@ export default function EventTasksPage() {
    }
  }, [event, hydrateTasks, slug, t]);

-  const isPhotoOnlyMode = event?.engagement_mode === 'photo_only';
+  const isPhotoOnlyMode = React.useMemo(() => {
+    const mode = event?.engagement_mode ?? (event?.settings as any)?.engagement_mode;
+    return mode === 'photo_only';
+  }, [event?.engagement_mode, event?.settings]);

  async function handleModeChange(checked: boolean) {
    if (!event || !slug) return;
@@ -271,10 +274,20 @@ export default function EventTasksPage() {
      const nextMode = checked ? 'photo_only' : 'tasks';
      const updated = await updateEvent(slug, {
        settings: {
+          ...(event.settings ?? {}),
          engagement_mode: nextMode,
        },
      });
-      setEvent(updated);
+      setEvent((prev) => ({
+        ...(prev ?? updated),
+        ...(updated ?? {}),
+        engagement_mode: updated?.engagement_mode ?? nextMode,
+        settings: {
+          ...(prev?.settings ?? {}),
+          ...(updated?.settings ?? {}),
+          engagement_mode: nextMode,
+        },
+      }));
    } catch (err) {
      if (!isAuthError(err)) {
        setError(
@@ -297,8 +310,8 @@ export default function EventTasksPage() {

  return (
    <AdminLayout
-      title={t('management.tasks.title', 'Event-Tasks')}
-      subtitle={t('management.tasks.subtitle', 'Verwalte Aufgaben, die diesem Event zugeordnet sind.')}
+      title={t('management.tasks.title', 'Aufgaben & Missionen')}
+      subtitle={t('management.tasks.subtitle', 'Stelle Mission Cards und Aufgaben für dieses Event zusammen.')}
      actions={actions}
      tabs={eventTabs}
      currentTabKey="tasks"
@@ -387,6 +400,30 @@ export default function EventTasksPage() {
                    </div>
                  </div>
                </CardHeader>
+                <CardContent className="pb-0">
+                  <Alert variant="default" className="rounded-2xl border border-dashed border-emerald-200 bg-emerald-50/60 text-xs text-slate-700">
+                    <AlertTitle className="text-sm font-semibold text-slate-900">
+                      {t('management.tasks.library.hintTitle', 'Weitere Vorlagen in der Aufgaben-Bibliothek')}
+                    </AlertTitle>
+                    <AlertDescription className="mt-1 flex flex-wrap items-center gap-2">
+                      <span>
+                        {t(
+                          'management.tasks.library.hintCopy',
+                          'Lege eigene Aufgaben, Emotionen oder Mission Packs zentral an und nutze sie in mehreren Events.',
+                        )}
+                      </span>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="mt-1 rounded-full border-emerald-300 text-emerald-700 hover:bg-emerald-100"
+                        onClick={() => navigate(buildEngagementTabPath('tasks'))}
+                      >
+                        {t('management.tasks.library.open', 'Aufgaben-Bibliothek öffnen')}
+                      </Button>
+                    </AlertDescription>
+                  </Alert>
+                </CardContent>
                <CardContent className="grid gap-4 lg:grid-cols-2">
                  <section className="space-y-3">
                    <div className="flex flex-wrap items-center justify-between gap-2">
--- a/resources/js/admin/pages/LiveRedirectPage.tsx
+++ b/resources/js/admin/pages/LiveRedirectPage.tsx
@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useEventContext } from '../context/EventContext';
+import { ADMIN_EVENTS_PATH, ADMIN_EVENT_PHOTOS_PATH } from '../constants';
+
+export default function LiveRedirectPage(): React.ReactElement {
+  const navigate = useNavigate();
+  const { activeEvent, events, isLoading, refetch } = useEventContext();
+
+  React.useEffect(() => {
+    if (!isLoading && !events.length) {
+      void refetch();
+    }
+  }, [isLoading, events.length, refetch]);
+
+  React.useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+    const targetEvent = activeEvent ?? events[0] ?? null;
+    if (targetEvent) {
+      navigate(ADMIN_EVENT_PHOTOS_PATH(targetEvent.slug), { replace: true });
+    } else {
+      navigate(ADMIN_EVENTS_PATH, { replace: true });
+    }
+  }, [isLoading, activeEvent, events, navigate]);
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
+        Lade Events ...
+      </div>
+    );
+  }
+  return null;
+}
--- a/resources/js/admin/router.tsx
+++ b/resources/js/admin/router.tsx
@@ -31,6 +31,7 @@ const WelcomeTeaserPage = React.lazy(() => import('./pages/WelcomeTeaserPage'));
 const LoginStartPage = React.lazy(() => import('./pages/LoginStartPage'));
 const ProfilePage = React.lazy(() => import('./pages/ProfilePage'));
 const LogoutPage = React.lazy(() => import('./pages/LogoutPage'));
+const LiveRedirectPage = React.lazy(() => import('./pages/LiveRedirectPage'));
 const WelcomeLandingPage = React.lazy(() => import('./onboarding/pages/WelcomeLandingPage'));
 const WelcomePackagesPage = React.lazy(() => import('./onboarding/pages/WelcomePackagesPage'));
 const WelcomeEventSetupPage = React.lazy(() => import('./onboarding/pages/WelcomeEventSetupPage'));
@@ -98,9 +99,11 @@ export const router = createBrowserRouter([
        element: <RequireAuth />,
        children: [
          { path: 'dashboard', element: <RequireAdminAccess><DashboardPage /></RequireAdminAccess> },
+          { path: 'live', element: <RequireAdminAccess><LiveRedirectPage /></RequireAdminAccess> },
          { path: 'events', element: <EventsPage /> },
          { path: 'events/new', element: <RequireAdminAccess><EventFormPage /></RequireAdminAccess> },
          { path: 'events/:slug', element: <EventDetailPage /> },
+          { path: 'events/:slug/recap', element: <EventDetailPage /> },
          { path: 'events/:slug/edit', element: <RequireAdminAccess><EventFormPage /></RequireAdminAccess> },
          { path: 'events/:slug/photos', element: <EventPhotosPage /> },
          { path: 'events/:slug/members', element: <RequireAdminAccess><EventMembersPage /></RequireAdminAccess> },