Implemented a shared mobile shell and navigation aligned to the new architecture, plus refactored the dashboard and

tab flows.

  - Added a dynamic MobileShell with sticky header (notification bell with badge, quick QR when an event is
    active, event switcher for multi-event users) and stabilized bottom tabs (home, tasks, uploads, profile)
    driven by useMobileNav (resources/js/admin/mobile/components/MobileShell.tsx, components/BottomNav.tsx, hooks/
    useMobileNav.ts).
  - Centralized event handling now supports 0/1/many-event states without auto-selecting in multi-tenant mode and
    exposes helper flags/activeSlug for consumers (resources/js/admin/context/EventContext.tsx).
  - Rebuilt the mobile dashboard into explicit states: onboarding/no-event, single-event focus, and multi-event picker
    with featured/secondary actions, KPI strip, and alerts (resources/js/admin/mobile/DashboardPage.tsx).
  - Introduced tab entry points that respect event context and prompt selection when needed (resources/js/admin/
    mobile/TasksTabPage.tsx, UploadsTabPage.tsx). Refreshed tasks/uploads detail screens to use the new shell and sync
    event selection (resources/js/admin/mobile/EventTasksPage.tsx, EventPhotosPage.tsx).
  - Updated mobile routes and existing screens to the new tab keys and header/footer behavior (resources/js/admin/
    router.tsx, mobile/* pages, i18n nav/header strings).

resources/js/admin/context/EventContext.tsx

@@ -11,6 +11,9 @@ export interface EventContextValue {
   isLoading: boolean;
   isError: boolean;
   activeEvent: TenantEvent | null;
+  activeSlug: string | null;
+  hasEvents: boolean;
+  hasMultipleEvents: boolean;
   selectEvent: (slug: string | null) => void;
   refetch: () => void;
 }
@@ -58,11 +61,16 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
 
     const hasStored = Boolean(storedSlug);
     const slugExists = hasStored && events.some((event) => event.slug === storedSlug);
-    const fallbackSlug = events[0]?.slug;
 
-    if (!slugExists && fallbackSlug) {
+    if (!slugExists) {
+      const shouldAutoselect = events.length === 1;
+      const fallbackSlug = shouldAutoselect ? events[0]?.slug : null;
       setStoredSlug(fallbackSlug);
-      window.localStorage.setItem(STORAGE_KEY, fallbackSlug);
+      if (fallbackSlug) {
+        window.localStorage.setItem(STORAGE_KEY, fallbackSlug);
+      } else {
+        window.localStorage.removeItem(STORAGE_KEY);
+      }
     }
   }, [events, storedSlug]);
 
@@ -76,10 +84,20 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
       return matched;
     }
 
-    // Fallback to the first event if the stored slug is missing or stale.
+    // Only auto-select the single available event. When multiple events exist and
-    return events[0];
+    // no stored slug is present we intentionally return null to let the UI prompt
+    // for a selection.
+    if (events.length === 1) {
+      return events[0];
+    }
+
+    return null;
   }, [events, storedSlug]);
 
+  const hasEvents = events.length > 0;
+  const hasMultipleEvents = events.length > 1;
+  const activeSlug = activeEvent?.slug ?? null;
+
   const selectEvent = React.useCallback((slug: string | null) => {
     setStoredSlug(slug);
     if (typeof window !== 'undefined') {
@@ -97,10 +115,13 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
       isLoading,
       isError,
       activeEvent,
+      activeSlug,
+      hasEvents,
+      hasMultipleEvents,
       selectEvent,
       refetch,
     }),
-    [events, isLoading, isError, activeEvent, selectEvent, refetch]
+    [events, isLoading, isError, activeEvent, activeSlug, hasEvents, hasMultipleEvents, selectEvent, refetch]
   );
 
   return <EventContext.Provider value={value}>{children}</EventContext.Provider>;

resources/js/admin/i18n/locales/de/mobile.json

@@ -1,14 +1,28 @@
 {
   "nav": {
-    "dashboard": "Übersicht",
+    "home": "Start",
-    "events": "Events",
     "tasks": "Aufgaben",
+    "uploads": "Uploads",
+    "profile": "Profil",
     "alerts": "Alerts",
-    "profile": "Profil"
+    "events": "Events"
   },
   "actions": {
     "back": "Zurück",
     "close": "Schließen",
     "refresh": "Aktualisieren"
+  },
+  "header": {
+    "appName": "Event Admin",
+    "selectEvent": "Wähle ein Event, um fortzufahren",
+    "empty": "Lege dein erstes Event an, um zu starten",
+    "eventSwitcher": "Event auswählen",
+    "noEventsTitle": "Erstes Event erstellen",
+    "noEventsBody": "Starte ein Event, um Aufgaben, Uploads und QR-Poster zu nutzen.",
+    "createEvent": "Event erstellen",
+    "noDate": "Datum folgt",
+    "active": "Aktiv",
+    "quickQr": "QR öffnen",
+    "clearSelection": "Auswahl entfernen"
   }
 }

resources/js/admin/i18n/locales/en/mobile.json

@@ -1,14 +1,28 @@
 {
   "nav": {
-    "dashboard": "Dashboard",
+    "home": "Home",
-    "events": "Events",
     "tasks": "Tasks",
+    "uploads": "Uploads",
+    "profile": "Profile",
     "alerts": "Alerts",
-    "profile": "Profile"
+    "events": "Events"
   },
   "actions": {
     "back": "Back",
     "close": "Close",
     "refresh": "Refresh"
+  },
+  "header": {
+    "appName": "Event Admin",
+    "selectEvent": "Select an event to continue",
+    "empty": "Create your first event to get started",
+    "eventSwitcher": "Choose an event",
+    "noEventsTitle": "Create your first event",
+    "noEventsBody": "Start an event to access tasks, uploads, QR posters and more.",
+    "createEvent": "Create event",
+    "noDate": "Date tbd",
+    "active": "Active",
+    "quickQr": "Quick QR",
+    "clearSelection": "Clear selection"
   }
 }

resources/js/admin/mobile/AlertsPage.tsx

@@ -93,7 +93,7 @@ export default function MobileAlertsPage() {
         </Pressable>
       }
       footer={
-        <BottomNav active="alerts" onNavigate={go} />
+        <BottomNav active="home" onNavigate={go} />
       }
     >
       {error ? (

resources/js/admin/mobile/BrandingPage.tsx

@@ -117,7 +117,7 @@ export default function MobileBrandingPage() {
         </Pressable>
       }
       footer={
-        <BottomNav active="events" onNavigate={go} />
+        <BottomNav active="home" onNavigate={go} />
       }
     >
       {error ? (

resources/js/admin/mobile/DashboardPage.tsx

@@ -1,204 +1,365 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { CalendarDays, MapPin, Settings, Plus, Bell, ListTodo, Image as ImageIcon } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { CalendarDays, Image as ImageIcon, ListTodo, QrCode, Settings, Users, Sparkles } 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 { MobileScaffold } from './components/Scaffold';
+import { MobileShell, renderEventLocation } from './components/MobileShell';
-import { MobileCard, PillBadge, CTAButton, KpiTile, ActionTile } from './components/Primitives';
+import { MobileCard, CTAButton, KpiTile, ActionTile, PillBadge } from './components/Primitives';
-import { BottomNav } from './components/BottomNav';
-import { getEvents, TenantEvent } from '../api';
 import { adminPath } from '../constants';
-import { isAuthError } from '../auth/tokens';
+import { useEventContext } from '../context/EventContext';
-import { getApiErrorMessage } from '../lib/apiError';
+import { getEventStats, EventStats, TenantEvent } from '../api';
-import { useMobileNav } from './hooks/useMobileNav';
+import { formatEventDate, resolveEventDisplayName } from '../lib/events';
-import { getEventStats, EventStats } from '../api';
 
 export default function MobileDashboardPage() {
   const navigate = useNavigate();
-  const { t } = useTranslation('management');
+  const { t, i18n } = useTranslation('management');
-  const [events, setEvents] = React.useState<TenantEvent[]>([]);
+  const { events, activeEvent, hasEvents, hasMultipleEvents, isLoading } = useEventContext();
-  const [stats, setStats] = React.useState<Record<string, EventStats>>({});
-  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState<string | null>(null);
-  const { go } = useMobileNav();
 
-  React.useEffect(() => {
+  const { data: stats, isLoading: statsLoading } = useQuery<EventStats | null>({
-    (async () => {
+    queryKey: ['mobile', 'dashboard', 'stats', activeEvent?.slug],
-      try {
+    enabled: Boolean(activeEvent?.slug),
-        setEvents(await getEvents());
+    queryFn: async () => {
-        const fetched: Record<string, EventStats> = {};
+      if (!activeEvent?.slug) return null;
-        const list = await getEvents();
+      return await getEventStats(activeEvent.slug);
-        await Promise.all(
+    },
-          (list || []).map(async (ev) => {
+  });
-            if (!ev.slug) return;
-            try {
-              fetched[ev.slug] = await getEventStats(ev.slug);
-            } catch {
-              // ignore per-event stat failures
-            }
-          })
-        );
-        setStats(fetched);
-        setError(null);
-      } catch (err) {
-        if (!isAuthError(err)) {
-          setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Events konnten nicht geladen werden.')));
-        }
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, [t]);
 
-  return (
+  const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
-    <MobileScaffold
-      title={t('events.list.dashboardTitle', 'All Events Dashboard')}
-      onBack={() => navigate(-1)}
-      rightSlot={
-        <Pressable onPress={() => navigate(adminPath('/settings'))}>
-          <Settings size={18} color="#0f172a" />
-        </Pressable>
-      }
-      footer={
-        <BottomNav active="events" onNavigate={go} />
-      }
-    >
-      {error ? (
-        <MobileCard>
-          <Text fontWeight="700" color="#b91c1c">
-            {error}
-          </Text>
-        </MobileCard>
-      ) : null}
 
-      <CTAButton label={t('events.actions.create', 'Create New Event')} onPress={() => navigate(adminPath('/mobile/events/new'))} />
+  if (isLoading) {
-
+    return (
-      {loading ? (
+      <MobileShell activeTab="home" title={t('events.list.dashboardTitle', 'Dashboard')}>
         <YStack space="$2">
           {Array.from({ length: 3 }).map((_, idx) => (
-            <MobileCard key={`sk-${idx}`} height={90} opacity={0.6} />
+            <MobileCard key={`sk-${idx}`} height={110} opacity={0.6} />
           ))}
         </YStack>
-      ) : events.length === 0 ? (
+      </MobileShell>
-        <MobileCard alignItems="center" justifyContent="center" space="$2">
+    );
-          <Text fontSize="$md" fontWeight="700" color="#111827">
+  }
-            {t('events.list.empty.title', 'Noch kein Event angelegt')}
-          </Text>
-          <Text fontSize="$sm" color="#4b5563" textAlign="center">
-            {t('events.list.empty.description', 'Starte jetzt mit deinem ersten Event.')}
-          </Text>
-          <CTAButton label={t('events.actions.create', 'Create New Event')} onPress={() => navigate(adminPath('/mobile/events/new'))} />
-        </MobileCard>
-      ) : (
-        <YStack space="$3">
-          <MobileCard space="$3">
-            <Text fontSize="$md" fontWeight="800" color="#111827">
-              {t('dashboard.kpis', 'Key Performance Indicators')}
-            </Text>
-            <XStack space="$2" flexWrap="wrap">
-              <KpiTile icon={ListTodo} label={t('events.detail.kpi.tasks', 'Tasks Completed')} value="—" />
-              <KpiTile icon={Bell} label={t('events.detail.kpi.guests', 'Guests Registered')} value="—" />
-              <KpiTile icon={ImageIcon} label={t('events.detail.kpi.photos', 'Images Uploaded')} value="—" />
-            </XStack>
-          </MobileCard>
-          {events.map((event) => (
-            <MobileCard key={event.id} borderColor="#e2e8f0" space="$2">
-              <XStack justifyContent="space-between" alignItems="flex-start" space="$2">
-                <YStack space="$1.5">
-                  <Text fontSize="$lg" fontWeight="800" color="#111827">
-                    {renderName(event.name)}
-                  </Text>
-                  <XStack alignItems="center" space="$2">
-                    <CalendarDays size={14} color="#6b7280" />
-                    <Text fontSize="$sm" color="#4b5563">
-                      {formatDate(event.event_date)}
-                    </Text>
-                  </XStack>
-                  <XStack alignItems="center" space="$2">
-                    <MapPin size={14} color="#6b7280" />
-                    <Text fontSize="$sm" color="#4b5563">
-                      {resolveLocation(event)}
-                    </Text>
-                  </XStack>
-                  <PillBadge tone={resolveTone(event)}>{resolveStatus(event, t)}</PillBadge>
-                </YStack>
-                <Pressable onPress={() => navigate(adminPath(`/mobile/events/${event.slug}`))}>
-                  <Text fontSize="$xl" color="#9ca3af">
-                    ˅
-                  </Text>
-                </Pressable>
-              </XStack>
 
-              <XStack marginTop="$2" space="$2" flexWrap="wrap">
+  if (!hasEvents) {
-                <ActionTile
+    return (
-                  icon={ListTodo}
+      <MobileShell activeTab="home" title={t('events.list.dashboardTitle', 'Dashboard')}>
-                  label={t('events.quick.tasks', 'Tasks')}
+        <OnboardingEmptyState />
-                  color="#60a5fa"
+      </MobileShell>
-                  onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/tasks`))}
+    );
-                  width="32%"
+  }
-                />
+
-                <ActionTile
+  if (hasMultipleEvents && !activeEvent) {
-                  icon={ImageIcon}
+    return (
-                  label={t('events.quick.images', 'Images')}
+      <MobileShell activeTab="home" title={t('events.list.dashboardTitle', 'Dashboard')}>
-                  color="#a855f7"
+        <EventPickerList events={events} locale={locale} />
-                  onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/photos`))}
+      </MobileShell>
-                  width="32%"
+    );
-                />
+  }
-                <ActionTile
+
-                  icon={Bell}
+  return (
-                  label={t('alerts.title', 'Alerts')}
+    <MobileShell
-                  color="#fbbf24"
+      activeTab="home"
-                  onPress={() => navigate(adminPath(`/mobile/alerts?event=${event.slug}`))}
+      title={resolveEventDisplayName(activeEvent ?? undefined)}
-                  width="32%"
+      subtitle={formatEventDate(activeEvent?.event_date, locale) ?? undefined}
-                />
+    >
-              </XStack>
+      <FeaturedActions
-            </MobileCard>
+        onReviewPhotos={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/photos`))}
-          ))}
+        onManageTasks={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/tasks`))}
-        </YStack>
+        onShowQr={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/qr`))}
-      )}
+      />
-    </MobileScaffold>
+
+      <SecondaryGrid
+        event={activeEvent}
+        onGuests={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/members`))}
+        onPrint={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/qr`))}
+        onInvites={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/members`))}
+        onSettings={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}`))}
+      />
+
+      <KpiStrip event={activeEvent} stats={stats} loading={statsLoading} locale={locale} />
+
+      <AlertsAndHints event={activeEvent} stats={stats} />
+    </MobileShell>
   );
 }
 
-function renderName(name: TenantEvent['name']): string {
+function OnboardingEmptyState() {
-  if (typeof name === 'string') return name;
+  const { t } = useTranslation('management');
-  if (name && typeof name === 'object') {
+  const navigate = useNavigate();
-    return name.de ?? name.en ?? Object.values(name)[0] ?? 'Unbenanntes Event';
+  return (
+    <YStack space="$3">
+      <MobileCard alignItems="flex-start" space="$3">
+        <Text fontSize="$lg" fontWeight="800" color="#111827">
+          {t('events.list.empty.title', 'Create your first event')}
+        </Text>
+        <Text fontSize="$sm" color="#4b5563">
+          {t('events.list.empty.description', 'Start an event to manage tasks, QR posters and uploads.')}
+        </Text>
+        <CTAButton label={t('events.actions.create', 'Create Event')} onPress={() => navigate(adminPath('/mobile/events/new'))} />
+        <CTAButton label={t('events.actions.preview', 'View Demo')} tone="ghost" onPress={() => navigate(adminPath('/mobile/events'))} />
+      </MobileCard>
+      <MobileCard space="$2">
+        <Text fontSize="$sm" fontWeight="800" color="#111827">
+          {t('events.list.empty.highlights', 'What you can do')}
+        </Text>
+        <YStack space="$1.5">
+          {[
+            t('events.quick.images', 'Review photos & uploads'),
+            t('events.quick.tasks', 'Assign tasks & challenges'),
+            t('events.quick.qr', 'Share QR posters'),
+            t('events.quick.guests', 'Invite helpers & guests'),
+          ].map((item) => (
+            <XStack key={item} alignItems="center" space="$2">
+              <PillBadge tone="muted">{item}</PillBadge>
+            </XStack>
+          ))}
+        </YStack>
+      </MobileCard>
+    </YStack>
+  );
+}
+
+function EventPickerList({ events, locale }: { events: TenantEvent[]; locale: string }) {
+  const { t } = useTranslation('management');
+  const { selectEvent } = useEventContext();
+
+  return (
+    <YStack space="$2">
+      <Text fontSize="$sm" color="#111827" fontWeight="700">
+        {t('events.detail.pickEvent', 'Select an event')}
+      </Text>
+      {events.map((event) => (
+        <Pressable
+          key={event.slug}
+          onPress={() => selectEvent(event.slug ?? null)}
+        >
+          <MobileCard borderColor="#e5e7eb" space="$2">
+            <XStack alignItems="center" justifyContent="space-between">
+              <YStack space="$1">
+                <Text fontSize="$md" fontWeight="800" color="#111827">
+                  {resolveEventDisplayName(event)}
+                </Text>
+                <Text fontSize="$xs" color="#6b7280">
+                  {formatEventDate(event.event_date, locale) ?? t('events.status.draft', 'Draft')}
+                </Text>
+              </YStack>
+              <PillBadge tone={event.status === 'published' ? 'success' : 'warning'}>
+                {event.status === 'published' ? t('events.status.published', 'Live') : t('events.status.draft', 'Draft')}
+              </PillBadge>
+            </XStack>
+          </MobileCard>
+        </Pressable>
+      ))}
+    </YStack>
+  );
+}
+
+function FeaturedActions({
+  onReviewPhotos,
+  onManageTasks,
+  onShowQr,
+}: {
+  onReviewPhotos: () => void;
+  onManageTasks: () => void;
+  onShowQr: () => void;
+}) {
+  const { t } = useTranslation('management');
+  const cards = [
+    {
+      key: 'photos',
+      label: t('events.quick.images', 'Review Photos'),
+      desc: t('events.quick.images.desc', 'Moderate uploads and highlights'),
+      icon: ImageIcon,
+      color: '#0ea5e9',
+      action: onReviewPhotos,
+    },
+    {
+      key: 'tasks',
+      label: t('events.quick.tasks', 'Manage Tasks & Challenges'),
+      desc: t('events.quick.tasks.desc', 'Assign and track progress'),
+      icon: ListTodo,
+      color: '#22c55e',
+      action: onManageTasks,
+    },
+    {
+      key: 'qr',
+      label: t('events.quick.qr', 'Show / Share QR Code'),
+      desc: t('events.quick.qr.desc', 'Posters, cards, and links'),
+      icon: QrCode,
+      color: '#f59e0b',
+      action: onShowQr,
+    },
+  ];
+
+  return (
+    <YStack space="$2">
+      {cards.map((card) => (
+        <Pressable key={card.key} onPress={card.action}>
+          <MobileCard borderColor={`${card.color}44`} backgroundColor={`${card.color}0f`} space="$2.5">
+            <XStack alignItems="center" space="$3">
+              <XStack width={44} height={44} borderRadius={14} backgroundColor={card.color} alignItems="center" justifyContent="center">
+                <card.icon size={20} color="white" />
+              </XStack>
+              <YStack space="$1" flex={1}>
+                <Text fontSize="$md" fontWeight="800" color="#111827">
+                  {card.label}
+                </Text>
+                <Text fontSize="$xs" color="#334155">
+                  {card.desc}
+                </Text>
+              </YStack>
+              <Text fontSize="$xl" color="#94a3b8">
+                ˃
+              </Text>
+            </XStack>
+          </MobileCard>
+        </Pressable>
+      ))}
+    </YStack>
+  );
+}
+
+function SecondaryGrid({
+  event,
+  onGuests,
+  onPrint,
+  onInvites,
+  onSettings,
+}: {
+  event: TenantEvent | null;
+  onGuests: () => void;
+  onPrint: () => void;
+  onInvites: () => void;
+  onSettings: () => void;
+}) {
+  const { t } = useTranslation('management');
+  const tiles = [
+    {
+      icon: Users,
+      label: t('events.quick.guests', 'Guest management'),
+      color: '#60a5fa',
+      action: onGuests,
+    },
+    {
+      icon: QrCode,
+      label: t('events.quick.prints', 'Print & poster downloads'),
+      color: '#fbbf24',
+      action: onPrint,
+    },
+    {
+      icon: Sparkles,
+      label: t('events.quick.invites', 'Team / helper invites'),
+      color: '#a855f7',
+      action: onInvites,
+    },
+    {
+      icon: Settings,
+      label: t('events.quick.settings', 'Event settings'),
+      color: '#10b981',
+      action: onSettings,
+    },
+  ];
+
+  return (
+    <YStack space="$2" marginTop="$2">
+      <Text fontSize="$sm" fontWeight="800" color="#111827">
+        {t('events.quick.more', 'Shortcuts')}
+      </Text>
+      <XStack flexWrap="wrap" space="$2">
+        {tiles.map((tile) => (
+          <ActionTile key={tile.label} icon={tile.icon} label={tile.label} color={tile.color} onPress={tile.action} />
+        ))}
+      </XStack>
+      {event ? (
+        <MobileCard backgroundColor="#f8fafc" borderColor="#e2e8f0" space="$1.5">
+          <Text fontSize="$sm" fontWeight="700" color="#0f172a">
+            {resolveEventDisplayName(event)}
+          </Text>
+          <Text fontSize="$xs" color="#475569">
+            {renderEventLocation(event)}
+          </Text>
+        </MobileCard>
+      ) : null}
+    </YStack>
+  );
+}
+
+function KpiStrip({ event, stats, loading, locale }: { event: TenantEvent | null; stats: EventStats | null | undefined; loading: boolean; locale: string }) {
+  const { t } = useTranslation('management');
+  if (!event) return null;
+
+  const kpis = [
+    {
+      label: t('events.detail.kpi.tasks', 'Open tasks'),
+      value: event.tasks_count ?? '—',
+      icon: ListTodo,
+    },
+    {
+      label: t('events.detail.kpi.photos', 'Photos'),
+      value: stats?.uploads_total ?? event.photo_count ?? '—',
+      icon: ImageIcon,
+    },
+    {
+      label: t('events.detail.kpi.guests', 'Guests'),
+      value: event.active_invites_count ?? event.total_invites_count ?? '—',
+      icon: Users,
+    },
+  ];
+
+  return (
+    <YStack space="$2">
+      <Text fontSize="$sm" fontWeight="800" color="#111827">
+        {t('dashboard.kpis', 'Key Performance Indicators')}
+      </Text>
+      {loading ? (
+        <XStack space="$2" flexWrap="wrap">
+          {Array.from({ length: 3 }).map((_, idx) => (
+            <MobileCard key={`kpi-${idx}`} height={90} width="32%" />
+          ))}
+        </XStack>
+      ) : (
+        <XStack space="$2" flexWrap="wrap">
+          {kpis.map((kpi) => (
+            <KpiTile key={kpi.label} icon={kpi.icon} label={kpi.label} value={kpi.value ?? '—'} />
+          ))}
+        </XStack>
+      )}
+      <Text fontSize="$xs" color="#94a3b8">
+        {formatEventDate(event.event_date, locale) ?? ''}
+      </Text>
+    </YStack>
+  );
+}
+
+function AlertsAndHints({ event, stats }: { event: TenantEvent | null; stats: EventStats | null | undefined }) {
+  const { t } = useTranslation('management');
+  if (!event) return null;
+
+  const alerts: string[] = [];
+  if (stats?.pending_photos) {
+    alerts.push(t('events.alerts.pendingPhotos', '{{count}} new uploads awaiting moderation', { count: stats.pending_photos }));
   }
-  return 'Unbenanntes Event';
+  if (event.tasks_count) {
-}
+    alerts.push(t('events.alerts.tasksOpen', '{{count}} tasks due or open', { count: event.tasks_count }));
-
-function formatDate(iso: string | null): string {
-  if (!iso) return 'Date tbd';
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) {
-    return 'Date tbd';
   }
-  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
-}
 
-function resolveLocation(event: TenantEvent): string {
+  if (alerts.length === 0) {
-  const settings = (event.settings ?? {}) as Record<string, unknown>;
+    return null;
-  const candidate =
-    (settings.location as string | undefined) ??
-    (settings.address as string | undefined) ??
-    (settings.city as string | undefined);
-  if (candidate && candidate.trim()) {
-    return candidate;
   }
-  return 'Location';
-}
 
-function resolveStatus(event: TenantEvent, t: ReturnType<typeof useTranslation>['t']): string {
+  return (
-  if (event.status === 'published') return t('events.status.published', 'Upcoming');
+    <YStack space="$1.5">
-  if (event.status === 'draft') return t('events.status.draft', 'Draft');
+      <Text fontSize="$sm" fontWeight="800" color="#111827">
-  return t('events.status.archived', 'Past');
+        {t('alerts.title', 'Alerts')}
-}
+      </Text>
-
+      {alerts.map((alert) => (
-function resolveTone(event: TenantEvent): 'success' | 'warning' | 'muted' {
+        <MobileCard key={alert} backgroundColor="#fff7ed" borderColor="#fed7aa" space="$2">
-  if (event.status === 'published') return 'success';
+          <Text fontSize="$sm" color="#9a3412">
-  if (event.status === 'draft') return 'warning';
+            {alert}
-  return 'muted';
+          </Text>
+        </MobileCard>
+      ))}
+    </YStack>
+  );
 }

resources/js/admin/mobile/EventDetailPage.tsx

@@ -92,7 +92,7 @@ export default function MobileEventDetailPage() {
         </XStack>
       }
       footer={
-        <BottomNav active="events" onNavigate={go} />
+        <BottomNav active="home" onNavigate={go} />
       }
     >
       {error ? (

resources/js/admin/mobile/EventFormPage.tsx

@@ -106,7 +106,7 @@ export default function MobileEventFormPage() {
       title={isEdit ? t('events.form.editTitle', 'Edit Event') : t('events.form.createTitle', 'Create New Event')}
       onBack={() => navigate(-1)}
       footer={
-        <BottomNav active="events" onNavigate={go} />
+        <BottomNav active="home" onNavigate={go} />
       }
     >
       {error ? (

resources/js/admin/mobile/EventMembersPage.tsx

@@ -105,7 +105,7 @@ export default function MobileEventMembersPage() {
         </Pressable>
       }
       footer={
-        <BottomNav active="events" onNavigate={go} />
+        <BottomNav active="home" onNavigate={go} />
       }
     >
       {error ? (

resources/js/admin/mobile/EventPhotosPage.tsx

@@ -5,21 +5,21 @@ import { Image as ImageIcon, RefreshCcw, Search, Filter } 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 { MobileScaffold } from './components/Scaffold';
+import { MobileShell } from './components/MobileShell';
 import { MobileCard, PillBadge, CTAButton } from './components/Primitives';
-import { BottomNav } from './components/BottomNav';
 import { getEventPhotos, updatePhotoVisibility, featurePhoto, unfeaturePhoto, TenantPhoto } from '../api';
 import toast from 'react-hot-toast';
 import { isAuthError } from '../auth/tokens';
 import { getApiErrorMessage } from '../lib/apiError';
-import { useMobileNav } from './hooks/useMobileNav';
 import { MobileSheet } from './components/Sheet';
+import { useEventContext } from '../context/EventContext';
 
 type FilterKey = 'all' | 'featured' | 'hidden';
 
 export default function MobileEventPhotosPage() {
   const { slug: slugParam } = useParams<{ slug?: string }>();
-  const slug = slugParam ?? null;
+  const { activeEvent, selectEvent } = useEventContext();
+  const slug = slugParam ?? activeEvent?.slug ?? null;
   const navigate = useNavigate();
   const { t } = useTranslation('management');
 
@@ -31,13 +31,17 @@ export default function MobileEventPhotosPage() {
   const [busyId, setBusyId] = React.useState<number | null>(null);
   const [totalCount, setTotalCount] = React.useState<number>(0);
   const [hasMore, setHasMore] = React.useState(false);
-  const { go } = useMobileNav(slug);
   const [search, setSearch] = React.useState('');
   const [showFilters, setShowFilters] = React.useState(false);
   const [uploaderFilter, setUploaderFilter] = React.useState('');
   const [onlyFeatured, setOnlyFeatured] = React.useState(false);
   const [onlyHidden, setOnlyHidden] = React.useState(false);
   const [lightbox, setLightbox] = React.useState<TenantPhoto | null>(null);
+  React.useEffect(() => {
+    if (slugParam && activeEvent?.slug !== slugParam) {
+      selectEvent(slugParam);
+    }
+  }, [slugParam, activeEvent?.slug, selectEvent]);
 
   const load = React.useCallback(async () => {
     if (!slug) return;
@@ -117,10 +121,11 @@ export default function MobileEventPhotosPage() {
   }
 
   return (
-    <MobileScaffold
+    <MobileShell
+      activeTab="uploads"
       title={t('events.photos.title', 'Photo Moderation')}
       onBack={() => navigate(-1)}
-      rightSlot={
+      headerActions={
         <XStack space="$3">
           <Pressable onPress={() => setShowFilters(true)}>
             <Filter size={18} color="#0f172a" />
@@ -130,9 +135,6 @@ export default function MobileEventPhotosPage() {
           </Pressable>
         </XStack>
       }
-      footer={
-        <BottomNav active="events" onNavigate={go} />
-      }
     >
       {error ? (
         <MobileCard>
@@ -334,6 +336,6 @@ export default function MobileEventPhotosPage() {
           />
         </YStack>
       </MobileSheet>
-    </MobileScaffold>
+    </MobileShell>
   );
 }

resources/js/admin/mobile/EventTasksPage.tsx

@@ -6,9 +6,8 @@ import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { ListItem } from '@tamagui/list-item';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { MobileScaffold } from './components/Scaffold';
+import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton } from './components/Primitives';
-import { BottomNav } from './components/BottomNav';
 import {
   getEvent,
   getEventTasks,
@@ -33,7 +32,7 @@ import { getApiErrorMessage } from '../lib/apiError';
 import toast from 'react-hot-toast';
 import { MobileSheet } from './components/Sheet';
 import { Tag } from './components/Tag';
-import { useMobileNav } from './hooks/useMobileNav';
+import { useEventContext } from '../context/EventContext';
 
 const inputStyle: React.CSSProperties = {
   width: '100%',
@@ -51,7 +50,8 @@ function InlineSeparator() {
 
 export default function MobileEventTasksPage() {
   const { slug: slugParam } = useParams<{ slug?: string }>();
-  const slug = slugParam ?? null;
+  const { activeEvent, selectEvent } = useEventContext();
+  const slug = slugParam ?? activeEvent?.slug ?? null;
   const navigate = useNavigate();
   const { t } = useTranslation('management');
 
@@ -67,7 +67,6 @@ export default function MobileEventTasksPage() {
   const [busyId, setBusyId] = React.useState<number | null>(null);
   const [assigningId, setAssigningId] = React.useState<number | null>(null);
   const [eventId, setEventId] = React.useState<number | null>(null);
-  const { go } = useMobileNav(slug);
   const [searchTerm, setSearchTerm] = React.useState('');
   const [emotionFilter, setEmotionFilter] = React.useState<string>('');
   const [expandedLibrary, setExpandedLibrary] = React.useState(false);
@@ -79,6 +78,11 @@ export default function MobileEventTasksPage() {
   const [editingEmotion, setEditingEmotion] = React.useState<TenantEmotion | null>(null);
   const [emotionForm, setEmotionForm] = React.useState({ name: '', color: '#e5e7eb' });
   const [savingEmotion, setSavingEmotion] = React.useState(false);
+  React.useEffect(() => {
+    if (slugParam && activeEvent?.slug !== slugParam) {
+      selectEvent(slugParam);
+    }
+  }, [slugParam, activeEvent?.slug, selectEvent]);
 
   const load = React.useCallback(async () => {
     if (!slug) {
@@ -273,10 +277,11 @@ export default function MobileEventTasksPage() {
   }
 
   return (
-    <MobileScaffold
+    <MobileShell
+      activeTab="tasks"
       title={t('events.tasks.title', 'Tasks & Checklists')}
       onBack={() => navigate(-1)}
-      rightSlot={
+      headerActions={
         <XStack space="$2">
           <Pressable onPress={() => load()}>
             <RefreshCcw size={18} color="#0f172a" />
@@ -286,9 +291,6 @@ export default function MobileEventTasksPage() {
           </Pressable>
         </XStack>
       }
-      footer={
-        <BottomNav active="tasks" onNavigate={go} />
-      }
     >
       {error ? (
         <MobileCard>
@@ -734,7 +736,7 @@ export default function MobileEventTasksPage() {
       >
         <Plus size={20} color="#ffffff" />
       </Pressable>
-    </MobileScaffold>
+    </MobileShell>
   );
 }
 

resources/js/admin/mobile/EventsPage.tsx

@@ -47,7 +47,7 @@ export default function MobileEventsPage() {
         </Pressable>
       }
       footer={
-        <BottomNav active="events" onNavigate={go} />
+        <BottomNav active="home" onNavigate={go} />
       }
     >
       {error ? (

resources/js/admin/mobile/QrPrintPage.tsx

@@ -68,7 +68,7 @@ export default function MobileQrPrintPage() {
         </Pressable>
       }
       footer={
-        <BottomNav active="events" onNavigate={go} />
+        <BottomNav active="home" onNavigate={go} />
       }
     >
       {error ? (

resources/js/admin/mobile/TasksTabPage.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Pressable } from '@tamagui/react-native-web-lite';
+import { MobileShell } from './components/MobileShell';
+import { MobileCard, CTAButton } from './components/Primitives';
+import { useEventContext } from '../context/EventContext';
+import { formatEventDate, resolveEventDisplayName } from '../lib/events';
+import { adminPath } from '../constants';
+
+export default function MobileTasksTabPage() {
+  const { events, activeEvent, hasEvents, selectEvent } = useEventContext();
+  const { t, i18n } = useTranslation('management');
+  const navigate = useNavigate();
+
+  if (activeEvent?.slug) {
+    return <Navigate to={adminPath(`/mobile/events/${activeEvent.slug}/tasks`)} replace />;
+  }
+
+  if (!hasEvents) {
+    return (
+      <MobileShell activeTab="tasks" title={t('events.tasks.title', 'Tasks')}>
+        <MobileCard alignItems="flex-start" space="$3">
+          <Text fontSize="$lg" fontWeight="800" color="#111827">
+            {t('events.tasks.emptyTitle', 'Create an event first')}
+          </Text>
+          <Text fontSize="$sm" color="#4b5563">
+            {t('events.tasks.emptyBody', 'Start an event to add tasks, challenges, and checklists.')}
+          </Text>
+          <CTAButton
+            label={t('events.actions.create', 'Create Event')}
+            onPress={() => navigate(adminPath('/mobile/events/new'))}
+          />
+        </MobileCard>
+      </MobileShell>
+    );
+  }
+
+  const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
+
+  return (
+    <MobileShell activeTab="tasks" title={t('events.tasks.title', 'Tasks')}>
+      <YStack space="$2">
+        <Text fontSize="$sm" color="#111827" fontWeight="700">
+          {t('events.tasks.pickEvent', 'Pick an event to manage tasks')}
+        </Text>
+        {events.map((event) => (
+          <Pressable
+            key={event.slug}
+            onPress={() => {
+              selectEvent(event.slug ?? null);
+              if (event.slug) {
+                navigate(adminPath(`/mobile/events/${event.slug}/tasks`));
+              }
+            }}
+          >
+            <MobileCard borderColor="#e5e7eb" space="$2">
+              <XStack alignItems="center" justifyContent="space-between">
+                <YStack space="$1">
+                  <Text fontSize="$md" fontWeight="800" color="#111827">
+                    {resolveEventDisplayName(event)}
+                  </Text>
+                  <Text fontSize="$xs" color="#6b7280">
+                    {formatEventDate(event.event_date, locale) ?? t('events.status.draft', 'Draft')}
+                  </Text>
+                </YStack>
+                <Text fontSize="$sm" color="#007AFF" fontWeight="700">
+                  {t('events.actions.open', 'Open')}
+                </Text>
+              </XStack>
+            </MobileCard>
+          </Pressable>
+        ))}
+      </YStack>
+    </MobileShell>
+  );
+}

resources/js/admin/mobile/UploadsTabPage.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Pressable } from '@tamagui/react-native-web-lite';
+import { MobileShell } from './components/MobileShell';
+import { MobileCard, CTAButton } from './components/Primitives';
+import { useEventContext } from '../context/EventContext';
+import { formatEventDate, resolveEventDisplayName } from '../lib/events';
+import { adminPath } from '../constants';
+
+export default function MobileUploadsTabPage() {
+  const { events, activeEvent, hasEvents, selectEvent } = useEventContext();
+  const { t, i18n } = useTranslation('management');
+  const navigate = useNavigate();
+
+  if (activeEvent?.slug) {
+    return <Navigate to={adminPath(`/mobile/events/${activeEvent.slug}/photos`)} replace />;
+  }
+
+  if (!hasEvents) {
+    return (
+      <MobileShell activeTab="uploads" title={t('events.photos.title', 'Uploads')}>
+        <MobileCard alignItems="flex-start" space="$3">
+          <Text fontSize="$lg" fontWeight="800" color="#111827">
+            {t('events.photos.emptyTitle', 'Create an event first')}
+          </Text>
+          <Text fontSize="$sm" color="#4b5563">
+            {t('events.photos.emptyBody', 'Add your first event to review uploads and manage QR sharing.')}
+          </Text>
+          <CTAButton
+            label={t('events.actions.create', 'Create Event')}
+            onPress={() => navigate(adminPath('/mobile/events/new'))}
+          />
+        </MobileCard>
+      </MobileShell>
+    );
+  }
+
+  const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
+
+  return (
+    <MobileShell activeTab="uploads" title={t('events.photos.title', 'Uploads')}>
+      <YStack space="$2">
+        <Text fontSize="$sm" color="#111827" fontWeight="700">
+          {t('events.photos.pickEvent', 'Pick an event to manage uploads')}
+        </Text>
+        {events.map((event) => (
+          <Pressable
+            key={event.slug}
+            onPress={() => {
+              selectEvent(event.slug ?? null);
+              if (event.slug) {
+                navigate(adminPath(`/mobile/events/${event.slug}/photos`));
+              }
+            }}
+          >
+            <MobileCard borderColor="#e5e7eb" space="$2">
+              <XStack alignItems="center" justifyContent="space-between">
+                <YStack space="$1">
+                  <Text fontSize="$md" fontWeight="800" color="#111827">
+                    {resolveEventDisplayName(event)}
+                  </Text>
+                  <Text fontSize="$xs" color="#6b7280">
+                    {formatEventDate(event.event_date, locale) ?? t('events.status.draft', 'Draft')}
+                  </Text>
+                </YStack>
+                <Text fontSize="$sm" color="#007AFF" fontWeight="700">
+                  {t('events.actions.open', 'Open')}
+                </Text>
+              </XStack>
+            </MobileCard>
+          </Pressable>
+        ))}
+      </YStack>
+    </MobileShell>
+  );
+}

resources/js/admin/mobile/components/BottomNav.tsx

@@ -2,21 +2,19 @@ import React from 'react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { Home, CheckSquare, Bell, User } from 'lucide-react';
+import { Home, CheckSquare, Image as ImageIcon, User } from 'lucide-react';
 import { useTheme } from '@tamagui/core';
 import { useTranslation } from 'react-i18next';
-import { useAlertsBadge } from '../hooks/useAlertsBadge';
 
-export type NavKey = 'events' | 'tasks' | 'alerts' | 'profile';
+export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';
 
 export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
   const { t } = useTranslation('mobile');
   const theme = useTheme();
-  const { count: alertCount } = useAlertsBadge();
   const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
-    { key: 'events', icon: Home, label: t('nav.events', 'Events') },
+    { key: 'home', icon: Home, label: t('nav.home', 'Home') },
     { key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
-    { key: 'alerts', icon: Bell, label: t('nav.alerts', 'Alerts') },
+    { key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
     { key: 'profile', icon: User, label: t('nav.profile', 'Profile') },
   ];
 
@@ -50,24 +48,6 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
                 <Text fontSize="$xs" color={activeState ? '$primary' : '#6b7280'}>
                   {item.label}
                 </Text>
-                {item.key === 'alerts' && alertCount > 0 ? (
-                  <XStack
-                    position="absolute"
-                    top={-6}
-                    right={-12}
-                    minWidth={18}
-                    height={18}
-                    paddingHorizontal={6}
-                    borderRadius={999}
-                    backgroundColor="#ef4444"
-                    alignItems="center"
-                    justifyContent="center"
-                  >
-                    <Text fontSize={10} color="white" fontWeight="700">
-                      {alertCount > 9 ? '9+' : alertCount}
-                    </Text>
-                  </XStack>
-                ) : null}
               </YStack>
             </Pressable>
           );

resources/js/admin/mobile/components/MobileShell.tsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ChevronDown, ChevronLeft, Bell, QrCode } 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 { useTranslation } from 'react-i18next';
+import { useEventContext } from '../../context/EventContext';
+import { BottomNav, NavKey } from './BottomNav';
+import { useMobileNav } from '../hooks/useMobileNav';
+import { adminPath } from '../../constants';
+import { MobileSheet } from './Sheet';
+import { MobileCard, PillBadge } from './Primitives';
+import { useAlertsBadge } from '../hooks/useAlertsBadge';
+import { formatEventDate, resolveEventDisplayName } from '../../lib/events';
+import { TenantEvent } from '../../api';
+
+type MobileShellProps = {
+  title?: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  activeTab: NavKey;
+  onBack?: () => void;
+  headerActions?: React.ReactNode;
+};
+
+export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) {
+  const { events, activeEvent, hasMultipleEvents, hasEvents, selectEvent } = useEventContext();
+  const { go } = useMobileNav(activeEvent?.slug);
+  const navigate = useNavigate();
+  const { t, i18n } = useTranslation('mobile');
+  const { count: alertCount } = useAlertsBadge();
+  const [pickerOpen, setPickerOpen] = React.useState(false);
+
+  const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
+  const eventTitle = title ?? (activeEvent ? resolveEventDisplayName(activeEvent) : t('header.appName', 'Event Admin'));
+  const subtitleText =
+    subtitle ??
+    (activeEvent?.event_date
+      ? formatEventDate(activeEvent.event_date, locale) ?? ''
+      : hasEvents
+        ? t('header.selectEvent', 'Select an event to continue')
+        : t('header.empty', 'Create your first event to get started'));
+
+  const showEventSwitcher = hasMultipleEvents;
+  const showQr = Boolean(activeEvent?.slug);
+
+  return (
+    <YStack backgroundColor="#f7f8fb" minHeight="100vh">
+      <YStack
+        backgroundColor="white"
+        borderBottomWidth={1}
+        borderColor="#e5e7eb"
+        paddingHorizontal="$4"
+        paddingTop="$4"
+        paddingBottom="$3"
+        shadowColor="#0f172a"
+        shadowOpacity={0.06}
+        shadowRadius={10}
+        shadowOffset={{ width: 0, height: 4 }}
+      >
+        <XStack alignItems="center" justifyContent="space-between" space="$3">
+          <XStack alignItems="center" space="$2">
+            {onBack ? (
+              <Pressable onPress={onBack}>
+                <XStack alignItems="center" space="$1.5">
+                  <ChevronLeft size={18} color="#007AFF" />
+                  <Text fontSize="$sm" color="#007AFF" fontWeight="600">
+                    {t('actions.back', 'Back')}
+                  </Text>
+                </XStack>
+              </Pressable>
+            ) : null}
+            <Pressable
+              disabled={!showEventSwitcher}
+              onPress={() => setPickerOpen(true)}
+              style={{ alignItems: 'flex-start' }}
+            >
+              <Text fontSize="$lg" fontWeight="800" color="#111827">
+                {eventTitle}
+              </Text>
+              {subtitleText ? (
+                <Text fontSize="$xs" color="#6b7280">
+                  {subtitleText}
+                </Text>
+              ) : null}
+            </Pressable>
+            {showEventSwitcher ? <ChevronDown size={14} color="#111827" /> : null}
+          </XStack>
+          <XStack alignItems="center" space="$2.5">
+            <Pressable onPress={() => navigate(adminPath('/mobile/alerts'))}>
+              <XStack
+                width={34}
+                height={34}
+                borderRadius={12}
+                backgroundColor="#f4f5f7"
+                alignItems="center"
+                justifyContent="center"
+                position="relative"
+              >
+                <Bell size={16} color="#111827" />
+                {alertCount > 0 ? (
+                  <YStack
+                    position="absolute"
+                    top={-4}
+                    right={-4}
+                    minWidth={18}
+                    height={18}
+                    paddingHorizontal={6}
+                    borderRadius={999}
+                    backgroundColor="#ef4444"
+                    alignItems="center"
+                    justifyContent="center"
+                  >
+                    <Text fontSize={10} color="white" fontWeight="700">
+                      {alertCount > 9 ? '9+' : alertCount}
+                    </Text>
+                  </YStack>
+                ) : null}
+              </XStack>
+            </Pressable>
+            {showQr ? (
+              <Pressable onPress={() => navigate(adminPath(`/mobile/events/${activeEvent?.slug}/qr`))}>
+                <XStack
+                  height={34}
+                  paddingHorizontal="$3"
+                  borderRadius={12}
+                  backgroundColor="#0ea5e9"
+                  alignItems="center"
+                  justifyContent="center"
+                  space="$1.5"
+                >
+                  <QrCode size={16} color="white" />
+                  <Text fontSize="$xs" fontWeight="800" color="white">
+                    {t('header.quickQr', 'Quick QR')}
+                  </Text>
+                </XStack>
+              </Pressable>
+            ) : null}
+            {headerActions ?? null}
+          </XStack>
+        </XStack>
+      </YStack>
+
+      <YStack flex={1} padding="$4" paddingBottom="$10" space="$3">
+        {children}
+      </YStack>
+
+      <BottomNav active={activeTab} onNavigate={go} />
+
+      <MobileSheet
+        open={pickerOpen}
+        onClose={() => setPickerOpen(false)}
+        title={t('header.eventSwitcher', 'Choose an event')}
+        footer={null}
+        bottomOffsetPx={110}
+      >
+        <YStack space="$2">
+          {events.length === 0 ? (
+            <MobileCard alignItems="flex-start" space="$2">
+              <Text fontSize="$sm" color="#111827" fontWeight="700">
+                {t('header.noEventsTitle', 'Create your first event')}
+              </Text>
+              <Text fontSize="$xs" color="#4b5563">
+                {t('header.noEventsBody', 'Start an event to access tasks, uploads, QR posters and more.')}
+              </Text>
+              <Pressable onPress={() => navigate(adminPath('/mobile/events/new'))}>
+                <XStack alignItems="center" space="$2">
+                  <Text fontSize="$sm" color="#007AFF" fontWeight="700">
+                    {t('header.createEvent', 'Create event')}
+                  </Text>
+                </XStack>
+              </Pressable>
+            </MobileCard>
+          ) : (
+            events.map((event) => (
+              <Pressable
+                key={event.slug}
+                onPress={() => {
+                  selectEvent(event.slug ?? null);
+                  setPickerOpen(false);
+                }}
+              >
+                <XStack alignItems="center" justifyContent="space-between" paddingVertical="$2">
+                  <YStack space="$0.5">
+                    <Text fontSize="$sm" fontWeight="700" color="#111827">
+                      {resolveEventDisplayName(event)}
+                    </Text>
+                    <Text fontSize="$xs" color="#6b7280">
+                      {formatEventDate(event.event_date, locale) ?? t('header.noDate', 'Date tbd')}
+                    </Text>
+                  </YStack>
+                  <PillBadge tone={event.slug === activeEvent?.slug ? 'success' : 'muted'}>
+                    {event.slug === activeEvent?.slug
+                      ? t('header.active', 'Active')
+                      : (event.status ?? '—')}
+                  </PillBadge>
+                </XStack>
+              </Pressable>
+            ))
+          )}
+          {activeEvent ? (
+            <Pressable
+              onPress={() => {
+                selectEvent(null);
+                setPickerOpen(false);
+              }}
+            >
+              <Text fontSize="$xs" color="#6b7280" textAlign="center">
+                {t('header.clearSelection', 'Clear selection')}
+              </Text>
+            </Pressable>
+          ) : null}
+        </YStack>
+      </MobileSheet>
+    </YStack>
+  );
+}
+
+export function renderEventLocation(event?: TenantEvent | null): string {
+  if (!event) return 'Location';
+  const settings = (event.settings ?? {}) as Record<string, unknown>;
+  const candidate =
+    (settings.location as string | undefined) ??
+    (settings.address as string | undefined) ??
+    (settings.city as string | undefined);
+  if (candidate && candidate.trim()) {
+    return candidate;
+  }
+  return 'Location';
+}

resources/js/admin/mobile/hooks/useMobileNav.ts

@@ -11,20 +11,24 @@ export function useMobileNav(currentSlug?: string | null) {
 
   const go = React.useCallback(
     (key: NavKey) => {
-      if (key === 'events') {
-        navigate(adminPath('/mobile/events'));
-        return;
-      }
       if (key === 'tasks') {
         if (slug) {
           navigate(adminPath(`/mobile/events/${slug}/tasks`));
         } else {
-          navigate(adminPath('/mobile/events'));
+          navigate(adminPath('/mobile/tasks'));
         }
         return;
       }
-      if (key === 'alerts') {
+      if (key === 'uploads') {
-        navigate(adminPath('/mobile/alerts'));
+        if (slug) {
+          navigate(adminPath(`/mobile/events/${slug}/photos`));
+        } else {
+          navigate(adminPath('/mobile/uploads'));
+        }
+        return;
+      }
+      if (key === 'home') {
+        navigate(adminPath('/mobile/dashboard'));
         return;
       }
       if (key === 'profile') {

resources/js/admin/router.tsx

@@ -35,6 +35,8 @@ const MobileAlertsPage = React.lazy(() => import('./mobile/AlertsPage'));
 const MobileProfilePage = React.lazy(() => import('./mobile/ProfilePage'));
 const MobileLoginPage = React.lazy(() => import('./mobile/LoginPage'));
 const MobileDashboardPage = React.lazy(() => import('./mobile/DashboardPage'));
+const MobileTasksTabPage = React.lazy(() => import('./mobile/TasksTabPage'));
+const MobileUploadsTabPage = React.lazy(() => import('./mobile/UploadsTabPage'));
 const EngagementPage = React.lazy(() => import('./pages/EngagementPage'));
 const BillingPage = React.lazy(() => import('./pages/BillingPage'));
 const TasksPage = React.lazy(() => import('./pages/TasksPage'));
@@ -137,6 +139,8 @@ export const router = createBrowserRouter([
           { path: 'mobile/alerts', element: <MobileAlertsPage /> },
           { path: 'mobile/profile', element: <RequireAdminAccess><MobileProfilePage /></RequireAdminAccess> },
           { path: 'mobile/dashboard', element: <MobileDashboardPage /> },
+          { path: 'mobile/tasks', element: <MobileTasksTabPage /> },
+          { path: 'mobile/uploads', element: <MobileUploadsTabPage /> },
           { path: 'engagement', element: <EngagementPage /> },
           { path: 'tasks', element: <TasksPage /> },
           { path: 'task-collections', element: <TaskCollectionsPage /> },