bd sync: 2026-01-12 17:07:55

.beads/issues.jsonl

@@ -9,6 +9,7 @@
 {"id":"fotospiel-app-1we","title":"Live Show: define trusted uploader rules \u0026 default retention window","description":"# Decision: Trusted uploader rules \u0026 default retention window\n\n## Context\nModeration is required for many events, but we also want a fast “auto-approve trusted sources” mode.\n\nWe currently track photo ingestion sources in `photos.ingest_source` (e.g. `tenant_admin`, `photobooth`, `sparkbooth`, `guest_pwa`). Guest uploads are token-based and do not have strong identity guarantees.\n\n## Definitions\n- **Trusted uploader**: uploads that can bypass Live Show manual moderation.\n- **Retention window**: time window for which approved photos remain eligible for rotation in the Live Show.\n\n## Options (trusted rules)\n### A) Trust by ingestion source only (recommended for V1)\nAuto-approve for Live Show only when `ingest_source` is one of:\n- `tenant_admin` (authenticated staff actions)\n- `photobooth` / `sparkbooth` (controlled integrations)\n\nAll `guest_pwa` uploads require manual approval when moderation is enabled.\n\n**Pros**\n- Harder to spoof; aligns with real security boundaries.\n- Simple to explain and operate.\n\n**Cons**\n- Guests never auto-approve; more moderator work.\n\n### B) Trust by guest device id (not recommended without stronger proof)\nUse `created_by_device_id` / `X-Device-Id` to whitelist devices.\n\n**Risk**\n- Device IDs are not cryptographically bound; a motivated guest could spoof the header.\n\nIf we want this later, we should introduce a **server-issued signed device token** (pairing flow) and validate it on upload.\n\n### C) Trust by invitation/QR (future)\nGuests who joined with a special “staff QR/pairing token” become trusted.\n\n## Recommended decision\nChoose **Option A** for V1.\n\n### Moderation mode semantics (proposed)\n- `off`: all photos with “submit to live show” become `approved` immediately *except* photos that are already flagged/removed by other moderation pipelines.\n- `manual`: all guest PWA photos become `pending`; trusted sources auto-approve.\n- `trusted_only`: same as manual, but UI copy emphasises that only booth/staff are automatic.\n\n## Retention window (defaults)\n### Recommendation\nDefault `retention_window_hours = 12` (configurable per event).\n\nRationale:\n- Keeps the “eligible set” bounded for performance.\n- Fits most event durations; avoids showing very old photos late in the night.\n\n### Notes\n- Even with a retention window, we can still show older photos via “curated” mode (e.g. featured/top-liked) if product wants.\n\n## Edge cases\n- **High-volume**: moderators may not keep up → allow temporary switch to “trusted_only” + announce to guests.\n- **Abuse**: if a trusted integration misbehaves, operator can disable trusted auto-approve.\n- **Reversal**: approving a previously rejected photo must be tracked with audit info (who/when).\n\n## Decision needed from product\n- Confirm the default retention window: 12h vs 6h vs “entire event”.\n- Confirm whether “trusted_only” should auto-approve `tenant_admin` uploads (recommended: yes).\n- Confirm whether guest auto-approve is desired in V1 (recommended: no, unless we build pairing).\n","acceptance_criteria":"- Trusted rules options listed, with security risk called out for device-id trust\\n- Clear V1 recommendation (trust by ingest_source only)\\n- Moderation mode semantics defined\\n- Default retention window recommendation + product decision questions","notes":"Decision: V1 trusted auto-approve uses ingest_source only (tenant_admin/photobooth/sparkbooth). Default retention_window_hours = 12.","status":"closed","priority":2,"issue_type":"task","created_at":"2026-01-05T11:43:32.455339503+01:00","created_by":"soeren","updated_at":"2026-01-05T12:06:45.973092473+01:00","closed_at":"2026-01-05T12:06:45.973092473+01:00","close_reason":"Closed","dependencies":[{"issue_id":"fotospiel-app-1we","depends_on_id":"fotospiel-app-vro","type":"blocks","created_at":"2026-01-05T11:44:02.062725386+01:00","created_by":"soeren"}]}
 {"id":"fotospiel-app-25q","title":"Security review: payments/webhooks code audit (signatures, idempotency, linkage)","status":"open","priority":2,"issue_type":"task","created_at":"2026-01-01T16:05:25.747336642+01:00","created_by":"soeren","updated_at":"2026-01-01T16:05:25.747336642+01:00"}
 {"id":"fotospiel-app-29o","title":"Paddle catalog sync: PackageResource sync status badges + timestamp","status":"closed","priority":2,"issue_type":"task","created_at":"2026-01-01T16:01:10.009385187+01:00","created_by":"soeren","updated_at":"2026-01-01T16:01:15.639525807+01:00","closed_at":"2026-01-01T16:01:15.639525807+01:00","close_reason":"Completed in codebase (verified)"}
+{"id":"fotospiel-app-29r","title":"Photobooth uploader: add watch-folder upload pipeline + persist creds","status":"closed","priority":2,"issue_type":"task","owner":"codex-agent@example.com","created_at":"2026-01-12T16:51:27.198056063+01:00","created_by":"Codex Agent","updated_at":"2026-01-12T17:07:04.06719869+01:00","closed_at":"2026-01-12T17:07:04.06719869+01:00","close_reason":"Closed"}
 {"id":"fotospiel-app-2hq","title":"Security review: marketing/API controller+validation review","status":"open","priority":2,"issue_type":"task","created_at":"2026-01-01T16:05:08.862737923+01:00","created_by":"soeren","updated_at":"2026-01-01T16:05:08.862737923+01:00"}
 {"id":"fotospiel-app-2yn","title":"Event-Admin: Reset link routing + notifications + tests","description":"Point password reset emails to event-admin reset page; add rate limiting and tests for the new flow.","status":"closed","priority":2,"issue_type":"task","created_at":"2026-01-06T10:45:09.279245468+01:00","created_by":"soeren","updated_at":"2026-01-06T11:01:49.083154811+01:00","closed_at":"2026-01-06T11:01:49.083154811+01:00","close_reason":"Closed"}
 {"id":"fotospiel-app-33m","title":"Security review checklist: Guest PWA dynamic tests","status":"open","priority":2,"issue_type":"task","created_at":"2026-01-01T16:04:40.730459361+01:00","created_by":"soeren","updated_at":"2026-01-01T16:04:40.730459361+01:00"}

.gitignore

@@ -23,11 +23,6 @@ Homestead.yaml
 npm-debug.log
 yarn-error.log
 /auth.json
-/.fleet
-/.idea
-/.nova
 /.vscode
-/.zed
-tools/git-askpass.ps1
-podman-compose.dev.yml
 test-results
+GEMINI.md

GEMINI.md

@@ -0,0 +1 @@
+/mnt/c/wwwroot/fotospiel-app/AGENTS.md

app/Filament/SuperAdmin/Pages/Auth/Login.php

@@ -40,7 +40,7 @@ class Login extends BaseLogin implements HasForms
         }
 
         // SuperAdmin-spezifisch: Prüfe auf SuperAdmin-Rolle, keine Tenant-Prüfung
-        if ($user->role !== 'super_admin') {
+        if (! $user->isSuperAdmin()) {
             $authGuard->logout();
 
             throw ValidationException::withMessages([

app/Filament/SuperAdmin/Pages/GuestPolicySettingsPage.php

@@ -45,11 +45,11 @@ class GuestPolicySettingsPage extends Page
 
     public int $join_token_failure_decay_minutes = 5;
 
-    public int $join_token_access_limit = 120;
+    public int $join_token_access_limit = 300;
 
     public int $join_token_access_decay_minutes = 1;
 
-    public int $join_token_download_limit = 60;
+    public int $join_token_download_limit = 120;
 
     public int $join_token_download_decay_minutes = 1;
 
@@ -69,9 +69,9 @@ class GuestPolicySettingsPage extends Page
         $this->per_device_upload_limit = (int) ($settings->per_device_upload_limit ?? 50);
         $this->join_token_failure_limit = (int) ($settings->join_token_failure_limit ?? 10);
         $this->join_token_failure_decay_minutes = (int) ($settings->join_token_failure_decay_minutes ?? 5);
-        $this->join_token_access_limit = (int) ($settings->join_token_access_limit ?? 120);
+        $this->join_token_access_limit = (int) ($settings->join_token_access_limit ?? 300);
         $this->join_token_access_decay_minutes = (int) ($settings->join_token_access_decay_minutes ?? 1);
-        $this->join_token_download_limit = (int) ($settings->join_token_download_limit ?? 60);
+        $this->join_token_download_limit = (int) ($settings->join_token_download_limit ?? 120);
         $this->join_token_download_decay_minutes = (int) ($settings->join_token_download_decay_minutes ?? 1);
         $this->join_token_ttl_hours = (int) ($settings->join_token_ttl_hours ?? 168);
         $this->share_link_ttl_hours = (int) ($settings->share_link_ttl_hours ?? 48);

app/Http/Controllers/Api/Tenant/EventController.php

@@ -16,6 +16,7 @@ use App\Models\Package;
 use App\Models\PackagePurchase;
 use App\Models\Photo;
 use App\Models\Tenant;
+use App\Models\User;
 use App\Services\EventJoinTokenService;
 use App\Support\ApiError;
 use Illuminate\Http\JsonResponse;
@@ -88,12 +89,15 @@ class EventController extends Controller
             $tenant = Tenant::findOrFail($tenantId);
         }
 
+        $actor = $request->user();
+        $isSuperAdmin = $actor instanceof User && $actor->isSuperAdmin();
+
         // Package check is now handled by middleware
 
         $validated = $request->validated();
         $tenantId = $tenant->id;
 
-        $requestedPackageId = $validated['package_id'] ?? null;
+        $requestedPackageId = $isSuperAdmin ? $request->integer('package_id') : null;
         unset($validated['package_id']);
 
         $tenantPackage = $tenant->tenantPackages()
@@ -108,6 +112,10 @@ class EventController extends Controller
             $package = Package::query()->find($requestedPackageId);
         }
 
+        if (! $package && $isSuperAdmin) {
+            $package = $this->resolveOwnerPackage();
+        }
+
         if (! $package && $tenantPackage) {
             $package = $tenantPackage->package ?? Package::query()->find($tenantPackage->package_id);
         }
@@ -121,7 +129,7 @@ class EventController extends Controller
         $requiresWaiver = $package->isEndcustomer();
         $latestPurchase = $requiresWaiver ? $this->resolveLatestPackagePurchase($tenant, $package) : null;
         $existingWaiver = $latestPurchase ? data_get($latestPurchase->metadata, 'consents.digital_content_waiver_at') : null;
-        $needsWaiver = $requiresWaiver && ! $existingWaiver;
+        $needsWaiver = ! $isSuperAdmin && $requiresWaiver && ! $existingWaiver;
 
         if ($needsWaiver && ! $request->boolean('accepted_waiver')) {
             throw ValidationException::withMessages([
@@ -182,7 +190,7 @@ class EventController extends Controller
 
         $eventData = Arr::only($eventData, $allowed);
 
-        $event = DB::transaction(function () use ($tenant, $eventData, $package) {
+        $event = DB::transaction(function () use ($tenant, $eventData, $package, $isSuperAdmin) {
             $event = Event::create($eventData);
 
             EventPackage::create([
@@ -193,7 +201,7 @@ class EventController extends Controller
                 'gallery_expires_at' => $package->gallery_days ? now()->addDays($package->gallery_days) : null,
             ]);
 
-            if ($package->isReseller()) {
+            if ($package->isReseller() && ! $isSuperAdmin) {
                 $note = sprintf('Event #%d created (%s)', $event->id, $event->name);
 
                 if (! $tenant->consumeEventAllowance(1, 'event.create', $note)) {
@@ -229,6 +237,15 @@ class EventController extends Controller
             ->first();
     }
 
+    private function resolveOwnerPackage(): ?Package
+    {
+        $ownerPackage = Package::query()
+            ->where('slug', 'pro')
+            ->first();
+
+        return $ownerPackage ?? Package::query()->find(3);
+    }
+
     private function recordEventStartWaiver(Tenant $tenant, Package $package, ?PackagePurchase $purchase): void
     {
         $timestamp = now();

app/Http/Controllers/Api/Tenant/EventMemberController.php

@@ -135,7 +135,7 @@ class EventMemberController extends Controller
             $user->password = Hash::make(Str::random(32));
         }
 
-        if ($user->tenant_id && (int) $user->tenant_id !== (int) $tenant->id && $user->role !== 'super_admin') {
+        if ($user->tenant_id && (int) $user->tenant_id !== (int) $tenant->id && ! $user->isSuperAdmin()) {
             throw ValidationException::withMessages([
                 'email' => __('Dieser Benutzer ist einem anderen Mandanten zugeordnet.'),
             ]);
@@ -143,9 +143,9 @@ class EventMemberController extends Controller
 
         $user->tenant_id = $tenant->id;
 
-        if ($role === 'tenant_admin' && $user->role !== 'super_admin') {
+        if ($role === 'tenant_admin' && ! $user->isSuperAdmin()) {
             $user->role = 'tenant_admin';
-        } elseif (! in_array($user->role, ['tenant_admin', 'super_admin'], true)) {
+        } elseif (! in_array($user->role, ['tenant_admin', 'super_admin', 'superadmin'], true)) {
             $user->role = 'member';
         }
 

app/Http/Controllers/Api/Tenant/TenantAdminTokenController.php

@@ -193,11 +193,11 @@ class TenantAdminTokenController extends Controller
             $abilities[] = 'tenant:'.$user->tenant_id;
         }
 
-        if (in_array($user->role, ['tenant_admin', 'admin', 'super_admin'], true)) {
+        if (in_array($user->role, ['tenant_admin', 'admin', 'super_admin', 'superadmin'], true)) {
             $abilities[] = 'tenant-admin';
         }
 
-        if ($user->role === 'super_admin') {
+        if ($user->isSuperAdmin()) {
             $abilities[] = 'super-admin';
         }
 
@@ -219,7 +219,7 @@ class TenantAdminTokenController extends Controller
 
     private function ensureUserCanAccessPanel(User $user): void
     {
-        if (in_array($user->role, ['tenant_admin', 'admin', 'super_admin'], true)) {
+        if (in_array($user->role, ['tenant_admin', 'admin', 'super_admin', 'superadmin'], true)) {
             return;
         }
 

app/Http/Controllers/Api/Tenant/TenantFeedbackController.php

@@ -9,8 +9,8 @@ use App\Models\User;
 use App\Notifications\TenantFeedbackSubmitted;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
-use Illuminate\Validation\Rule;
 use Illuminate\Support\Facades\Notification;
+use Illuminate\Validation\Rule;
 
 class TenantFeedbackController extends Controller
 {
@@ -56,7 +56,7 @@ class TenantFeedbackController extends Controller
         ]);
 
         $recipients = User::query()
-            ->where('role', 'super_admin')
+            ->whereIn('role', ['super_admin', 'superadmin'])
             ->whereNotNull('email')
             ->get();
 

app/Http/Controllers/Api/TenantAuth/TenantAdminPasswordResetController.php

@@ -80,7 +80,7 @@ class TenantAdminPasswordResetController extends Controller
 
     private function canAccessEventAdmin(User $user): bool
     {
-        if (in_array($user->role, ['tenant_admin', 'admin', 'super_admin'], true)) {
+        if (in_array($user->role, ['tenant_admin', 'admin', 'super_admin', 'superadmin'], true)) {
             return true;
         }
 

app/Http/Controllers/Auth/AuthenticatedSessionController.php

@@ -155,7 +155,7 @@ class AuthenticatedSessionController extends Controller
         }
 
         // Super admins go to Filament superadmin panel
-        if ($user && $user->role === 'super_admin') {
+        if ($user && $user->isSuperAdmin()) {
             return '/super-admin';
         }
 

app/Http/Controllers/TenantAdminAuthController.php

@@ -12,7 +12,7 @@ class TenantAdminAuthController extends Controller
         $user = Auth::user();
 
         // Allow only tenant_admin and super_admin
-        if ($user && in_array($user->role, ['tenant_admin', 'super_admin'])) {
+        if ($user && in_array($user->role, ['tenant_admin', 'super_admin', 'superadmin'], true)) {
             return view('admin');
         }
 

app/Http/Controllers/TenantAdminGoogleController.php

@@ -46,7 +46,7 @@ class TenantAdminGoogleController extends Controller
         /** @var User|null $user */
         $user = User::query()->where('email', $email)->first();
 
-        if (! $user || ! in_array($user->role, ['tenant_admin', 'super_admin'], true)) {
+        if (! $user || ! in_array($user->role, ['tenant_admin', 'super_admin', 'superadmin'], true)) {
             return $this->sendBackWithError($request, 'google_no_match', 'No tenant admin account is linked to this Google address.');
         }
 

app/Http/Middleware/CreditCheckMiddleware.php

@@ -3,6 +3,7 @@
 namespace App\Http\Middleware;
 
 use App\Models\Tenant;
+use App\Models\User;
 use App\Services\Packages\PackageLimitEvaluator;
 use App\Support\ApiError;
 use Closure;
@@ -26,7 +27,7 @@ class CreditCheckMiddleware
             ]);
         }
 
-        if ($this->requiresCredits($request)) {
+        if ($this->requiresCredits($request) && ! $this->shouldBypassCreditCheck($request, $tenant)) {
             $violation = $this->limitEvaluator->assessEventCreation($tenant);
 
             if ($violation !== null) {
@@ -43,6 +44,24 @@ class CreditCheckMiddleware
         return $next($request);
     }
 
+    private function shouldBypassCreditCheck(Request $request, Tenant $tenant): bool
+    {
+        $user = $request->user();
+        if (! $user instanceof User) {
+            return false;
+        }
+
+        if (! $user->isSuperAdmin()) {
+            return false;
+        }
+
+        if (! $user->tenant_id) {
+            return false;
+        }
+
+        return (int) $user->tenant_id === (int) $tenant->id;
+    }
+
     private function requiresCredits(Request $request): bool
     {
         return $request->isMethod('post')

app/Http/Middleware/EnsureTenantAdminToken.php

@@ -42,7 +42,7 @@ class EnsureTenantAdminToken
         /** @var Tenant|null $tenant */
         $tenant = $user->tenant;
 
-        if (! $tenant && $user->role === 'super_admin') {
+        if (! $tenant && $user->isSuperAdmin()) {
             $requestedTenantId = $this->resolveRequestedTenantId($request);
 
             if ($requestedTenantId !== null) {
@@ -50,14 +50,14 @@ class EnsureTenantAdminToken
             }
         }
 
-        if (! $tenant && $user->role !== 'super_admin') {
+        if (! $tenant && ! $user->isSuperAdmin()) {
             return $this->forbiddenResponse('Tenant context missing for user.');
         }
 
         if ($tenant) {
             $request->attributes->set('tenant_id', $tenant->id);
             $request->attributes->set('tenant', $tenant);
-        } elseif ($user->role === 'super_admin') {
+        } elseif ($user->isSuperAdmin()) {
             $requestedTenantId = $this->resolveRequestedTenantId($request);
             if ($requestedTenantId !== null) {
                 $request->attributes->set('tenant_id', $requestedTenantId);
@@ -96,7 +96,7 @@ class EnsureTenantAdminToken
      */
     protected function allowedRoles(): array
     {
-        return ['tenant_admin', 'super_admin', 'admin'];
+        return ['tenant_admin', 'super_admin', 'superadmin', 'admin'];
     }
 
     protected function forbiddenRoleMessage(): string

app/Http/Middleware/EnsureTenantCollaboratorToken.php

@@ -9,7 +9,7 @@ class EnsureTenantCollaboratorToken extends EnsureTenantAdminToken
 {
     protected function allowedRoles(): array
     {
-        return ['tenant_admin', 'super_admin', 'admin', 'member'];
+        return ['tenant_admin', 'super_admin', 'superadmin', 'admin', 'member'];
     }
 
     protected function forbiddenRoleMessage(): string

app/Http/Middleware/PackageMiddleware.php

@@ -3,6 +3,7 @@
 namespace App\Http\Middleware;
 
 use App\Models\Tenant;
+use App\Models\User;
 use App\Services\Packages\PackageLimitEvaluator;
 use App\Support\ApiError;
 use Closure;
@@ -26,7 +27,7 @@ class PackageMiddleware
             ]);
         }
 
-        if ($this->requiresPackageCheck($request)) {
+        if ($this->requiresPackageCheck($request) && ! $this->shouldBypassPackageCheck($request, $tenant)) {
             $violation = $this->detectViolation($request, $tenant);
 
             if ($violation !== null) {
@@ -43,6 +44,24 @@ class PackageMiddleware
         return $next($request);
     }
 
+    private function shouldBypassPackageCheck(Request $request, Tenant $tenant): bool
+    {
+        $user = $request->user();
+        if (! $user instanceof User) {
+            return false;
+        }
+
+        if (! $user->isSuperAdmin()) {
+            return false;
+        }
+
+        if (! $user->tenant_id) {
+            return false;
+        }
+
+        return (int) $user->tenant_id === (int) $tenant->id;
+    }
+
     private function requiresPackageCheck(Request $request): bool
     {
         return $request->isMethod('post') && (

app/Http/Middleware/RedirectIfAuthenticated.php

@@ -112,7 +112,7 @@ class RedirectIfAuthenticated extends BaseMiddleware
             return '/event-admin/dashboard';
         }
 
-        if ($user && $user->role === 'super_admin') {
+        if ($user && $user->isSuperAdmin()) {
             return '/super-admin';
         }
 

app/Http/Middleware/SuperAdminAuth.php

@@ -4,9 +4,9 @@ namespace App\Http\Middleware;
 
 use Closure;
 use Illuminate\Http\Request;
-use Symfony\Component\HttpFoundation\Response;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Log;
+use Symfony\Component\HttpFoundation\Response;
 
 class SuperAdminAuth
 {
@@ -21,17 +21,17 @@ class SuperAdminAuth
             return $next($request);
         }
 
-        if (!Auth::check()) {
+        if (! Auth::check()) {
             abort(403, 'Nicht angemeldet.');
         }
 
         $user = Auth::user();
-        Log::info('SuperAdminAuth: User ID ' . $user->id . ', role: ' . $user->role);
+        Log::info('SuperAdminAuth: User ID '.$user->id.', role: '.$user->role);
 
-        if ($user->role !== 'super_admin') {
-            abort(403, 'Zugriff nur für SuperAdmin. User ID: ' . $user->id . ', Role: ' . $user->role);
+        if (! $user->isSuperAdmin()) {
+            abort(403, 'Zugriff nur für SuperAdmin. User ID: '.$user->id.', Role: '.$user->role);
         }
 
         return $next($request);
     }
-}
+}

app/Http/Requests/Tenant/EventStoreRequest.php

@@ -30,6 +30,7 @@ class EventStoreRequest extends FormRequest
             'event_date' => ['required', 'date', 'after_or_equal:today'],
             'location' => ['nullable', 'string', 'max:255'],
             'event_type_id' => ['required', 'exists:event_types,id'],
+            'package_id' => ['nullable', 'integer', 'exists:packages,id'],
             'max_participants' => ['nullable', 'integer', 'min:1', 'max:10000'],
             'public_url' => ['nullable', 'url', 'max:500'],
             'custom_domain' => ['nullable', 'string', 'max:255'],

app/Models/GuestPolicySetting.php

@@ -41,9 +41,9 @@ class GuestPolicySetting extends Model
                 'per_device_upload_limit' => 50,
                 'join_token_failure_limit' => (int) config('join_tokens.failure_limit', 10),
                 'join_token_failure_decay_minutes' => (int) config('join_tokens.failure_decay_minutes', 5),
-                'join_token_access_limit' => (int) config('join_tokens.access_limit', 120),
+                'join_token_access_limit' => (int) config('join_tokens.access_limit', 300),
                 'join_token_access_decay_minutes' => (int) config('join_tokens.access_decay_minutes', 1),
-                'join_token_download_limit' => (int) config('join_tokens.download_limit', 60),
+                'join_token_download_limit' => (int) config('join_tokens.download_limit', 120),
                 'join_token_download_decay_minutes' => (int) config('join_tokens.download_decay_minutes', 1),
                 'join_token_ttl_hours' => 168,
                 'share_link_ttl_hours' => (int) config('share-links.ttl_hours', 48),

app/Models/User.php

@@ -69,6 +69,16 @@ class User extends Authenticatable implements FilamentHasTenants, FilamentUser,
         ];
     }
 
+    public function isSuperAdmin(): bool
+    {
+        return self::isSuperAdminRole($this->role);
+    }
+
+    public static function isSuperAdminRole(?string $role): bool
+    {
+        return in_array($role, ['super_admin', 'superadmin'], true);
+    }
+
     /**
      * Retrieve the user by the given credentials.
      */
@@ -127,12 +137,12 @@ class User extends Authenticatable implements FilamentHasTenants, FilamentUser,
 
     public function canAccessPanel(Panel $panel): bool
     {
-        if (! $this->email_verified_at && $this->role !== 'super_admin') {
+        if (! $this->email_verified_at && ! $this->isSuperAdmin()) {
             return false;
         }
 
         return match ($panel->getId()) {
-            'superadmin' => $this->role === 'super_admin',
+            'superadmin' => $this->isSuperAdmin(),
             'admin' => $this->role === 'tenant_admin',
             default => false,
         };
@@ -140,7 +150,7 @@ class User extends Authenticatable implements FilamentHasTenants, FilamentUser,
 
     public function canAccessTenant(Model $tenant): bool
     {
-        if ($this->role === 'super_admin') {
+        if ($this->isSuperAdmin()) {
             return true;
         }
 
@@ -155,7 +165,7 @@ class User extends Authenticatable implements FilamentHasTenants, FilamentUser,
 
     public function getTenants(Panel $panel): array|Collection
     {
-        if ($this->role === 'super_admin') {
+        if ($this->isSuperAdmin()) {
             return Tenant::query()->orderBy('name')->get();
         }
 

app/Policies/PurchaseHistoryPolicy.php

@@ -12,12 +12,11 @@ class PurchaseHistoryPolicy
 
     public function viewAny(User $user): bool
     {
-        return $user->role === 'super_admin';
+        return $user->isSuperAdmin();
     }
 
     public function view(User $user, PurchaseHistory $purchaseHistory): bool
     {
-        return $user->role === 'super_admin';
+        return $user->isSuperAdmin();
     }
 }
-

app/Policies/TenantPolicy.php

@@ -15,7 +15,7 @@ class TenantPolicy
      */
     public function viewAny(User $user): bool
     {
-        return $user->role === 'super_admin';
+        return $user->isSuperAdmin();
     }
 
     /**
@@ -35,7 +35,7 @@ class TenantPolicy
      */
     public function create(User $user): bool
     {
-        return $user->role === 'super_admin';
+        return $user->isSuperAdmin();
     }
 
     /**
@@ -43,7 +43,7 @@ class TenantPolicy
      */
     public function update(User $user, Tenant $tenant): bool
     {
-        return $user->role === 'super_admin';
+        return $user->isSuperAdmin();
     }
 
     /**
@@ -51,7 +51,7 @@ class TenantPolicy
      */
     public function delete(User $user, Tenant $tenant): bool
     {
-        return $user->role === 'super_admin';
+        return $user->isSuperAdmin();
     }
 
     /**
@@ -59,6 +59,6 @@ class TenantPolicy
      */
     public function suspend(User $user, Tenant $tenant): bool
     {
-        return $user->role === 'super_admin';
+        return $user->isSuperAdmin();
     }
 }

app/Providers/AppServiceProvider.php

@@ -155,7 +155,11 @@ class AppServiceProvider extends ServiceProvider
 
             $key = $tenantId ? 'tenant:'.$tenantId : ('ip:'.($request->ip() ?? 'unknown'));
 
-            return Limit::perMinute(100)->by($key);
+            return Limit::perMinute(600)->by($key);
+        });
+
+        RateLimiter::for('guest-api', function (Request $request) {
+            return Limit::perMinute(300)->by('guest-api:'.($request->ip() ?? 'unknown'));
         });
 
         RateLimiter::for('tenant-auth', function (Request $request) {

app/Providers/AuthServiceProvider.php

@@ -46,7 +46,7 @@ class AuthServiceProvider extends ServiceProvider
         });
 
         Gate::before(function (User $user): ?bool {
-            return $user->role === 'super_admin' ? true : null;
+            return $user->isSuperAdmin() ? true : null;
         });
     }
 }

app/Services/Audit/SuperAdminAuditLogger.php

@@ -83,7 +83,7 @@ class SuperAdminAuditLogger
 
     private function shouldLog(?User $actor): bool
     {
-        if (! $actor || $actor->role !== 'super_admin') {
+        if (! $actor || ! $actor->isSuperAdmin()) {
             return false;
         }
 

app/Services/Paddle/PaddleDiscountService.php

@@ -17,6 +17,11 @@ class PaddleDiscountService
      */
     public function createDiscount(Coupon $coupon): array
     {
+        $existing = $this->findExistingDiscount($coupon->code);
+        if ($existing !== null) {
+            return $existing;
+        }
+
         $payload = $this->buildDiscountPayload($coupon);
 
         $response = $this->client->post('/discounts', $payload);
@@ -82,6 +87,35 @@ class PaddleDiscountService
         return Arr::get($response, 'data', $response);
     }
 
+    /**
+     * @return array<string, mixed>|null
+     */
+    protected function findExistingDiscount(?string $code): ?array
+    {
+        $normalized = Str::upper(trim((string) $code));
+        if ($normalized === '') {
+            return null;
+        }
+
+        $response = $this->client->get('/discounts', [
+            'code' => $normalized,
+            'per_page' => 1,
+        ]);
+
+        $items = Arr::get($response, 'data', []);
+        if (! is_array($items) || $items === []) {
+            return null;
+        }
+
+        $match = Collection::make($items)->first(static function ($item) use ($normalized) {
+            $codeValue = Str::upper((string) Arr::get($item, 'code', ''));
+
+            return $codeValue === $normalized ? $item : null;
+        });
+
+        return is_array($match) ? $match : null;
+    }
+
     /**
      * @return array<string, mixed>
      */

app/Support/TenantAuth.php

@@ -24,15 +24,15 @@ class TenantAuth
         }
 
         $user = $request->user();
-        if ($user && in_array($user->role, ['tenant_admin', 'admin', 'super_admin', 'member'], true)) {
-            if ($user->role !== 'super_admin' || (int) $user->tenant_id === (int) $tenantId) {
+        if ($user && in_array($user->role, ['tenant_admin', 'admin', 'super_admin', 'superadmin', 'member'], true)) {
+            if (! $user->isSuperAdmin() || (int) $user->tenant_id === (int) $tenantId) {
                 return $user;
             }
         }
 
         $user = User::query()
             ->where('tenant_id', $tenantId)
-            ->whereIn('role', ['tenant_admin', 'admin', 'member'])
+            ->whereIn('role', ['tenant_admin', 'admin', 'super_admin', 'superadmin', 'member'])
             ->orderByDesc('email_verified_at')
             ->orderBy('id')
             ->first();

config/join_tokens.php

@@ -4,9 +4,9 @@ return [
     'failure_limit' => (int) env('JOIN_TOKEN_FAILURE_LIMIT', 10),
     'failure_decay_minutes' => (int) env('JOIN_TOKEN_FAILURE_DECAY', 5),
 
-    'access_limit' => (int) env('JOIN_TOKEN_ACCESS_LIMIT', 120),
+    'access_limit' => (int) env('JOIN_TOKEN_ACCESS_LIMIT', 300),
     'access_decay_minutes' => (int) env('JOIN_TOKEN_ACCESS_DECAY', 1),
 
-    'download_limit' => (int) env('JOIN_TOKEN_DOWNLOAD_LIMIT', 60),
+    'download_limit' => (int) env('JOIN_TOKEN_DOWNLOAD_LIMIT', 120),
     'download_decay_minutes' => (int) env('JOIN_TOKEN_DOWNLOAD_DECAY', 1),
 ];

database/seeders/SuperAdminSeeder.php

@@ -2,9 +2,11 @@
 
 namespace Database\Seeders;
 
+use App\Models\Tenant;
+use App\Models\User;
 use Illuminate\Database\Seeder;
 use Illuminate\Support\Facades\Hash;
-use App\Models\User;
+use Illuminate\Support\Str;
 
 class SuperAdminSeeder extends Seeder
 {
@@ -12,12 +14,49 @@ class SuperAdminSeeder extends Seeder
     {
         $email = env('ADMIN_EMAIL', 'admin@example.com');
         $password = env('ADMIN_PASSWORD', 'ChangeMe123!');
-        User::updateOrCreate(['email'=>$email], [
+        $user = User::updateOrCreate(['email' => $email], [
             'first_name' => 'Super',
             'last_name' => 'Admin',
             'password' => Hash::make($password),
             'role' => 'super_admin',
         ]);
+
+        $tenantSlug = env('OWNER_TENANT_SLUG', 'owner-tenant');
+        $tenantName = env('OWNER_TENANT_NAME', 'Owner Tenant');
+
+        $tenant = Tenant::query()->firstOrCreate(
+            ['slug' => $tenantSlug],
+            [
+                'name' => $tenantName,
+                'email' => $email,
+                'contact_email' => $email,
+                'user_id' => $user->id,
+                'is_active' => true,
+                'is_suspended' => false,
+                'settings' => [
+                    'contact_email' => $email,
+                ],
+            ],
+        );
+
+        if (! $tenant->slug) {
+            $tenant->forceFill(['slug' => Str::slug($tenantName)])->save();
+        }
+
+        if (! $tenant->user_id) {
+            $tenant->forceFill(['user_id' => $user->id])->save();
+        }
+
+        if (! $tenant->email) {
+            $tenant->forceFill(['email' => $email])->save();
+        }
+
+        if (! $tenant->contact_email) {
+            $tenant->forceFill(['contact_email' => $email])->save();
+        }
+
+        if ($user->tenant_id !== $tenant->id) {
+            $user->forceFill(['tenant_id' => $tenant->id])->save();
+        }
     }
 }
-

public/lang/de/auth.json

@@ -1 +1,80 @@
-{}
+{
+  "login_failed": "Diese Anmeldedaten wurden nicht gefunden.",
+  "login_success": "Sie sind nun eingeloggt.",
+  "registration_failed": "Registrierung fehlgeschlagen.",
+  "registration_success": "Registrierung erfolgreich – bitte mit dem Kauf fortfahren.",
+  "already_logged_in": "Sie sind bereits eingeloggt.",
+  "failed_credentials": "Diese Anmeldedaten wurden nicht gefunden.",
+  "header": {
+    "login": "Anmelden",
+    "register": "Registrieren",
+    "home": "Startseite",
+    "packages": "Pakete",
+    "blog": "Blog",
+    "occasions": {
+      "wedding": "Hochzeit",
+      "birthday": "Geburtstag",
+      "corporate": "Firmenevent"
+    },
+    "contact": "Kontakt"
+  },
+  "login": {
+    "title": "Die Fotospiel App",
+    "description": "Melde dich mit deinem Fotospiel-Zugang an und steuere deine Events zentral in einem Dashboard.",
+    "brand": "Die Fotospiel App",
+    "logo_alt": "Logo Die Fotospiel App",
+    "identifier": "E-Mail oder Username",
+    "identifier_placeholder": "z. B. name@beispiel.de oder hochzeit_julia",
+    "username_or_email": "Username oder E-Mail",
+    "email": "E-Mail-Adresse",
+    "email_placeholder": "ihre@email.de",
+    "password": "Passwort",
+    "password_placeholder": "Ihr Passwort",
+    "remember": "Angemeldet bleiben",
+    "forgot": "Passwort vergessen?",
+    "submit": "Anmelden",
+    "oauth_divider": "oder",
+    "google_cta": "Mit Google anmelden",
+    "google_helper": "Nutze dein Google-Konto, um dich sicher bei der Eventverwaltung anzumelden.",
+    "no_account": "Noch keinen Zugang?",
+    "sign_up": "Jetzt registrieren"
+  },
+  "register": {
+    "title": "Registrieren",
+    "name": "Vollständiger Name",
+    "username": "Username",
+    "email": "E-Mail-Adresse",
+    "password": "Passwort",
+    "password_confirmation": "Passwort bestätigen",
+    "first_name": "Vorname",
+    "last_name": "Nachname",
+    "address": "Adresse",
+    "phone": "Telefonnummer",
+    "privacy_consent": "Ich stimme der Datenschutzerklärung zu und akzeptiere die Verarbeitung meiner persönlichen Daten.",
+    "privacy_policy_link": "Datenschutzerklärung",
+    "submit": "Registrieren",
+    "first_name_placeholder": "Vorname",
+    "last_name_placeholder": "Nachname",
+    "email_placeholder": "beispiel@email.de",
+    "address_placeholder": "Straße Hausnummer, PLZ Ort",
+    "phone_placeholder": "+49 170 1234567",
+    "username_placeholder": "z. B. hochzeit_julia",
+    "password_placeholder": "Mindestens 8 Zeichen",
+    "password_confirmation_placeholder": "Passwort erneut eingeben",
+    "server_error_title": "Registrierung konnte nicht abgeschlossen werden",
+    "server_error_message": "Auf unserer Seite ist ein Fehler aufgetreten. Bitte versuche es später erneut oder kontaktiere support@fotospiel.de.",
+    "session_expired_title": "Sicherheitsprüfung abgelaufen",
+    "session_expired_message": "Deine Sitzung ist abgelaufen. Lade die Seite neu und versuche es erneut."
+  },
+  "verification": {
+    "notice": "Bitte bestätigen Sie Ihre E-Mail-Adresse.",
+    "resend": "E-Mail erneut senden",
+    "success_title": "E-Mail bestätigt",
+    "success_message": "Deine E-Mail ist bestätigt. Du kannst dich jetzt anmelden.",
+    "checkout_success_message": "E-Mail bestätigt. Du kannst mit dem Checkout fortfahren.",
+    "toast_success": "E-Mail erfolgreich bestätigt.",
+    "expired_title": "Bestätigungslink abgelaufen",
+    "expired_message": "Dieser Bestätigungslink ist nicht mehr gültig. Fordere unten einen neuen Link an.",
+    "toast_error": "Bestätigungslink abgelaufen. Bitte fordere einen neuen Link an."
+  }
+}

public/lang/en/auth.json

@@ -1 +1,80 @@
-{}
+{
+  "login_failed": "Invalid email or password.",
+  "login_success": "You are now logged in.",
+  "registration_failed": "Registration failed.",
+  "registration_success": "Registration successful – proceed with purchase.",
+  "already_logged_in": "You are already logged in.",
+  "failed_credentials": "Wrong credentials.",
+  "header": {
+    "login": "Login",
+    "register": "Register",
+    "home": "Home",
+    "packages": "Packages",
+    "blog": "Blog",
+    "occasions": {
+      "wedding": "Wedding",
+      "birthday": "Birthday",
+      "corporate": "Corporate Event"
+    },
+    "contact": "Contact"
+  },
+  "login": {
+    "title": "Die Fotospiel App",
+    "description": "Sign in with your Fotospiel account to manage every event in one place.",
+    "brand": "Die Fotospiel App",
+    "logo_alt": "Fotospiel App logo",
+    "identifier": "Email or Username",
+    "identifier_placeholder": "you@example.com or username",
+    "username_or_email": "Username or Email",
+    "email": "Email Address",
+    "email_placeholder": "your@email.com",
+    "password": "Password",
+    "password_placeholder": "Your password",
+    "remember": "Stay logged in",
+    "forgot": "Forgot password?",
+    "submit": "Login",
+    "oauth_divider": "or",
+    "google_cta": "Continue with Google",
+    "google_helper": "Use your Google account to access the event dashboard securely.",
+    "no_account": "Don't have access yet?",
+    "sign_up": "Create an account"
+  },
+  "register": {
+    "title": "Register",
+    "name": "Full Name",
+    "username": "Username",
+    "email": "Email Address",
+    "password": "Password",
+    "password_confirmation": "Confirm password",
+    "first_name": "First Name",
+    "last_name": "Last Name",
+    "address": "Address",
+    "phone": "Phone Number",
+    "privacy_consent": "I agree to the privacy policy and accept the processing of my personal data.",
+    "privacy_policy_link": "Privacy Policy",
+    "submit": "Register",
+    "first_name_placeholder": "First name",
+    "last_name_placeholder": "Last name",
+    "email_placeholder": "you@example.com",
+    "address_placeholder": "Street, ZIP, City",
+    "phone_placeholder": "+1 555 123 4567",
+    "username_placeholder": "e.g. wedding_julia",
+    "password_placeholder": "At least 8 characters",
+    "password_confirmation_placeholder": "Repeat your password",
+    "server_error_title": "We couldn't finish your registration",
+    "server_error_message": "Something went wrong on our side. Please try again in a moment or contact support@fotospiel.de.",
+    "session_expired_title": "Security check expired",
+    "session_expired_message": "Your session expired. Refresh the page and try again."
+  },
+  "verification": {
+    "notice": "Please verify your email address.",
+    "resend": "Resend email",
+    "success_title": "Email verified",
+    "success_message": "Your email is confirmed. You can sign in now.",
+    "checkout_success_message": "Email confirmed. Continue your checkout to finish the order.",
+    "toast_success": "Email verified successfully.",
+    "expired_title": "Verification link expired",
+    "expired_message": "That verification link is no longer valid. Request a new email below.",
+    "toast_error": "Verification link expired. Request a new one."
+  }
+}

resources/js/admin/api.ts

@@ -2,6 +2,7 @@
 import { authorizedFetch } from './auth/tokens';
 import { ApiError, emitApiErrorEvent } from './lib/apiError';
 import type { EventLimitSummary } from './lib/limitWarnings';
+export type { EventLimitSummary };
 import i18n from './i18n';
 
 type JsonValue = Record<string, unknown>;

resources/js/admin/lib/eventTabs.ts

@@ -14,7 +14,7 @@ export type EventTabCounts = Partial<{
   tasks: number;
 }>;
 
-type Translator = (key: string, fallback: string) => string;
+type Translator = any;
 
 export function buildEventTabs(event: TenantEvent, translate: Translator, counts: EventTabCounts = {}) {
   if (!event.slug) {

resources/js/admin/mobile/BillingPage.tsx

@@ -8,16 +8,6 @@ import { Pressable } from '@tamagui/react-native-web-lite';
 import toast from 'react-hot-toast';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
-import React from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { Package, Receipt, RefreshCcw, 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 toast from 'react-hot-toast';
-import { MobileShell, HeaderActionButton } from './components/MobileShell';
-import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
 import {
   createTenantBillingPortalSession,
   getTenantPackagesOverview,
@@ -235,7 +225,6 @@ export default function MobileBillingPage() {
             ))}
           </YStack>
         )}
-        {null}
       </MobileCard>
 
       <MobileCard space="$2">
@@ -263,7 +252,6 @@ export default function MobileBillingPage() {
             ))}
           </YStack>
         )}
-        {null}
       </MobileCard>
     </MobileShell>
   );
@@ -547,156 +535,4 @@ function formatDate(value: string | null | undefined): string {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return '—';
   return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' });
-}
-
-function renderFeatureBadge(pkg: TenantPackageSummary, t: any, key: string, label: string) {
-  const value = (pkg.package_limits as any)?.[key] ?? (pkg as any)[key];
-  if (value === undefined || value === null) return null;
-  const enabled = value !== false;
-  return <PillBadge tone={enabled ? 'success' : 'muted'}>{enabled ? label : `${label} off`}</PillBadge>;
-}
-
-function UsageBar({ metric }: { metric: PackageUsageMetric }) {
-  const { t } = useTranslation('management');
-  const { muted, textStrong, border, primary, subtle, warningText, danger } = useAdminTheme();
-  const labelMap: Record<PackageUsageMetric['key'], string> = {
-    events: t('mobileBilling.usage.events', 'Events'),
-    guests: t('mobileBilling.usage.guests', 'Guests'),
-    photos: t('mobileBilling.usage.photos', 'Photos'),
-    gallery: t('mobileBilling.usage.gallery', 'Gallery days'),
-  };
-
-  if (!metric.limit) {
-    return null;
-  }
-
-  const status = getUsageState(metric);
-  const hasUsage = metric.used !== null;
-  const valueText = hasUsage
-    ? t('mobileBilling.usage.value', { used: metric.used, limit: metric.limit })
-    : t('mobileBilling.usage.limit', { limit: metric.limit });
-  const remainingText = metric.remaining !== null
-    ? t('mobileBilling.usage.remainingOf', {
-      remaining: metric.remaining,
-      limit: metric.limit,
-      defaultValue: 'Remaining {{remaining}} of {{limit}}',
-    })
-    : null;
-  const fill = usagePercent(metric);
-  const statusLabel =
-    status === 'danger'
-      ? t('mobileBilling.usage.statusDanger', 'Limit reached')
-      : status === 'warning'
-        ? t('mobileBilling.usage.statusWarning', 'Low')
-        : null;
-  const fillColor = status === 'danger' ? danger : status === 'warning' ? warningText : primary;
-
-  return (
-    <YStack space="$1.5">
-      <XStack alignItems="center" justifyContent="space-between">
-        <Text fontSize="$xs" color={muted}>
-          {labelMap[metric.key]}
-        </Text>
-        <XStack alignItems="center" space="$1.5">
-          {statusLabel ? <PillBadge tone={status === 'danger' ? 'danger' : 'warning'}>{statusLabel}</PillBadge> : null}
-          <Text fontSize="$xs" color={textStrong} fontWeight="700">
-            {valueText}
-          </Text>
-        </XStack>
-      </XStack>
-      <YStack height={6} borderRadius={999} backgroundColor={border} overflow="hidden">
-        <YStack height="100%" width={`${fill}%`} backgroundColor={hasUsage ? fillColor : subtle} />
-      </YStack>
-      {remainingText ? (
-        <Text fontSize="$xs" color={muted}>
-          {remainingText}
-        </Text>
-      ) : null}
-    </YStack>
-  );
-}
-
-function formatAmount(value: number | null | undefined, currency: string | null | undefined): string {
-  if (value === null || value === undefined) {
-    return '—';
-  }
-  const cur = currency ?? 'EUR';
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency: cur }).format(value);
-  } catch {
-    return `${value} ${cur}`;
-  }
-}
-
-function AddonRow({ addon }: { addon: TenantAddonHistoryEntry }) {
-  const { t } = useTranslation('management');
-  const navigate = useNavigate();
-  const { border, textStrong, text, muted, subtle, primary } = useAdminTheme();
-  const labels: Record<TenantAddonHistoryEntry['status'], { tone: 'success' | 'warning' | 'muted'; text: string }> = {
-    completed: { tone: 'success', text: t('mobileBilling.status.completed', 'Completed') },
-    pending: { tone: 'warning', text: t('mobileBilling.status.pending', 'Pending') },
-    failed: { tone: 'muted', text: t('mobileBilling.status.failed', 'Failed') },
-  };
-  const status = labels[addon.status];
-  const eventName =
-    (addon.event?.name && typeof addon.event.name === 'string' && addon.event.name) ||
-    (addon.event?.name && typeof addon.event.name === 'object' ? addon.event.name?.en ?? addon.event.name?.de ?? Object.values(addon.event.name)[0] : null) ||
-    null;
-  const eventPath = addon.event?.slug ? ADMIN_EVENT_VIEW_PATH(addon.event.slug) : null;
-  const hasImpact = Boolean(addon.extra_photos || addon.extra_guests || addon.extra_gallery_days);
-  const impactBadges = hasImpact ? (
-    <XStack space="$2" marginTop="$1.5" flexWrap="wrap">
-      {addon.extra_photos ? (
-        <PillBadge tone="muted">{t('mobileBilling.extra.photos', '+{{count}} photos', { count: addon.extra_photos })}</PillBadge>
-      ) : null}
-      {addon.extra_guests ? (
-        <PillBadge tone="muted">{t('mobileBilling.extra.guests', '+{{count}} guests', { count: addon.extra_guests })}</PillBadge>
-      ) : null}
-      {addon.extra_gallery_days ? (
-        <PillBadge tone="muted">{t('mobileBilling.extra.days', '+{{count}} days', { count: addon.extra_gallery_days })}</PillBadge>
-      ) : null}
-    </XStack>
-  ) : null;
-
-  return (
-    <MobileCard borderColor={border} padding="$3" space="$1.5">
-      <XStack alignItems="center" justifyContent="space-between">
-        <Text fontSize="$sm" fontWeight="700" color={textStrong}>
-          {addon.label ?? addon.addon_key}
-        </Text>
-        <PillBadge tone={status.tone}>{status.text}</PillBadge>
-      </XStack>
-      {eventName ? (
-        eventPath ? (
-          <Pressable onPress={() => navigate(eventPath)}>
-            <XStack alignItems="center" justifyContent="space-between">
-              <Text fontSize="$xs" color={textStrong} fontWeight="600">
-                {eventName}
-              </Text>
-              <Text fontSize="$xs" color={primary} fontWeight="700">
-                {t('mobileBilling.openEvent', 'Open event')}
-              </Text>
-            </XStack>
-          </Pressable>
-        ) : (
-          <Text fontSize="$xs" color={subtle}>
-            {eventName}
-          </Text>
-        )
-      ) : null}
-      {impactBadges}
-      <Text fontSize="$sm" color={text} marginTop="$1.5">
-        {formatAmount(addon.amount, addon.currency)}
-      </Text>
-      <Text fontSize="$xs" color={muted}>
-        {formatDate(addon.purchased_at)}
-      </Text>
-    </MobileCard>
-  );
-}
-function formatDate(value: string | null | undefined): string {
-  if (!value) return '—';
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return '—';
-  return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' });
-}
+}

resources/js/admin/mobile/DashboardPage.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from '@tanstack/react-query';
-import { Bell, CheckCircle2, Download, Image as ImageIcon, ListTodo, MessageCircle, QrCode, Settings, ShieldCheck, Smartphone, Users, Sparkles, TrendingUp } from 'lucide-react';
+import { Bell, CalendarDays, Camera, CheckCircle2, ChevronDown, Download, Image as ImageIcon, Layout, ListTodo, MapPin, Megaphone, MessageCircle, Pencil, QrCode, Settings, ShieldCheck, Smartphone, Sparkles, TrendingUp, Tv, Users } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { MobileShell, renderEventLocation } from './components/MobileShell';
+import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton, KpiTile, ActionTile, PillBadge, SkeletonCard } from './components/Primitives';
 import { MobileSheet } from './components/Sheet';
 import { adminPath, ADMIN_WELCOME_BASE_PATH } from '../constants';
@@ -21,6 +21,7 @@ import { collectPackageFeatures, formatPackageLimit, getPackageFeatureLabel, get
 import { trackOnboarding } from '../api';
 import { useAuth } from '../auth/context';
 import { ADMIN_ACTION_COLORS, ADMIN_MOTION, useAdminTheme } from './theme';
+import { isPastEvent } from './eventDate';
 
 type DeviceSetupProps = {
   installPrompt: ReturnType<typeof useInstallPrompt>;
@@ -32,6 +33,7 @@ type DeviceSetupProps = {
 export default function MobileDashboardPage() {
   const navigate = useNavigate();
   const location = useLocation();
+  const { slug: slugParam } = useParams<{ slug?: string }>();
   const { t, i18n } = useTranslation('management');
   const { events, activeEvent, hasEvents, hasMultipleEvents, isLoading, selectEvent } = useEventContext();
   const { status } = useAuth();
@@ -42,11 +44,12 @@ export default function MobileDashboardPage() {
   const [tourStep, setTourStep] = React.useState(0);
   const [summaryOpen, setSummaryOpen] = React.useState(false);
   const [summarySeenOverride, setSummarySeenOverride] = React.useState<number | null>(null);
+  const [eventSwitcherOpen, setEventSwitcherOpen] = React.useState(false);
   const onboardingTrackedRef = React.useRef(false);
   const installPrompt = useInstallPrompt();
   const pushState = useAdminPushSubscription();
   const devicePermissions = useDevicePermissions();
-  const { textStrong, muted, border, surface, accentSoft, primary } = useAdminTheme();
+  const { textStrong, muted, accentSoft, primary } = useAdminTheme();
   const text = textStrong;
   const accentText = primary;
 
@@ -84,6 +87,14 @@ export default function MobileDashboardPage() {
   const tourTargetSlug = activeEvent?.slug ?? effectiveEvents[0]?.slug ?? null;
   const tourStepKeys = React.useMemo(() => resolveTourStepKeys(effectiveHasEvents), [effectiveHasEvents]);
 
+  React.useEffect(() => {
+    if (!slugParam || slugParam === activeEvent?.slug) {
+      return;
+    }
+
+    selectEvent(slugParam);
+  }, [activeEvent?.slug, selectEvent, slugParam]);
+
   React.useEffect(() => {
     if (status !== 'authenticated' || onboardingTrackedRef.current) {
       return;
@@ -424,7 +435,7 @@ export default function MobileDashboardPage() {
             onOpen={() => setSummaryOpen(true)}
           />
         ) : null}
-        <EventPickerList events={effectiveEvents} locale={locale} text={text} muted={muted} border={border} />
+        <EventPickerList events={effectiveEvents} locale={locale} navigateOnSelect={false} />
         {tourSheet}
         {packageSummarySheet}
       </MobileShell>
@@ -434,8 +445,7 @@ export default function MobileDashboardPage() {
   return (
     <MobileShell
       activeTab="home"
-      title={resolveEventDisplayName(activeEvent ?? undefined)}
-      subtitle={formatEventDate(activeEvent?.event_date, locale) ?? undefined}
+      title={t('mobileDashboard.title', 'Dashboard')}
     >
       {showPackageSummaryBanner ? (
         <PackageSummaryBanner
@@ -443,28 +453,18 @@ export default function MobileDashboardPage() {
           onOpen={() => setSummaryOpen(true)}
         />
       ) : null}
-      <DeviceSetupCard
-        installPrompt={installPrompt}
-        pushState={pushState}
-        devicePermissions={devicePermissions}
-        onOpenSettings={() => navigate(adminPath('/mobile/settings'))}
-      />
-      <FeaturedActions
-        tasksEnabled={tasksEnabled}
-        onReviewPhotos={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/photos`))}
-        onManageTasks={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/tasks`))}
-        onShowQr={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/qr`))}
-      />
-
-      <SecondaryGrid
+      <EventHeaderCard
         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}`))}
-        onAnalytics={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/analytics`))}
+        locale={locale}
+        canSwitch={effectiveMultiple}
+        onSwitch={() => setEventSwitcherOpen(true)}
+        onEdit={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/edit`))}
+      />
+      <EventManagementGrid
+        event={activeEvent}
+        tasksEnabled={tasksEnabled}
+        onNavigate={(path) => navigate(path)}
       />
-
       <KpiStrip
         event={activeEvent}
         stats={stats}
@@ -474,8 +474,20 @@ export default function MobileDashboardPage() {
       />
 
       <AlertsAndHints event={activeEvent} stats={stats} tasksEnabled={tasksEnabled} />
+      <DeviceSetupCard
+        installPrompt={installPrompt}
+        pushState={pushState}
+        devicePermissions={devicePermissions}
+        onOpenSettings={() => navigate(adminPath('/mobile/settings'))}
+      />
       {tourSheet}
       {packageSummarySheet}
+      <EventSwitcherSheet
+        open={eventSwitcherOpen}
+        onClose={() => setEventSwitcherOpen(false)}
+        events={effectiveEvents}
+        locale={locale}
+      />
     </MobileShell>
   );
 }
@@ -976,8 +988,20 @@ function OnboardingEmptyState({ installPrompt, pushState, devicePermissions, onO
   );
 }
 
-function EventPickerList({ events, locale, text, muted, border }: { events: TenantEvent[]; locale: string; text: string; muted: string; border: string }) {
+function EventPickerList({
+  events,
+  locale,
+  onPick,
+  navigateOnSelect = true,
+}: {
+  events: TenantEvent[];
+  locale: string;
+  onPick?: (event: TenantEvent) => void;
+  navigateOnSelect?: boolean;
+}) {
   const { t } = useTranslation('management');
+  const { textStrong, muted, border } = useAdminTheme();
+  const text = textStrong;
   const { selectEvent } = useEventContext();
   const navigate = useNavigate();
   const [localEvents, setLocalEvents] = React.useState<TenantEvent[]>(events);
@@ -1008,7 +1032,8 @@ function EventPickerList({ events, locale, text, muted, border }: { events: Tena
           key={event.slug}
           onPress={() => {
             selectEvent(event.slug ?? null);
-            if (event.slug) {
+            onPick?.(event);
+            if (navigateOnSelect && event.slug) {
               navigate(adminPath(`/mobile/events/${event.slug}`));
             }
           }}
@@ -1036,140 +1061,232 @@ function EventPickerList({ events, locale, text, muted, border }: { events: Tena
   );
 }
 
-function FeaturedActions({
-  tasksEnabled,
-  onReviewPhotos,
-  onManageTasks,
-  onShowQr,
+function EventSwitcherSheet({
+  open,
+  onClose,
+  events,
+  locale,
 }: {
-  tasksEnabled: boolean;
-  onReviewPhotos: () => void;
-  onManageTasks: () => void;
-  onShowQr: () => void;
+  open: boolean;
+  onClose: () => void;
+  events: TenantEvent[];
+  locale: string;
 }) {
   const { t } = useTranslation('management');
-  const { textStrong, muted, subtle } = useAdminTheme();
-  const text = textStrong;
-  const cards = [
-    {
-      key: 'photos',
-      label: t('mobileDashboard.photosLabel', 'Review photos'),
-      desc: t('mobileDashboard.photosDesc', 'Moderate uploads and highlights'),
-      icon: ImageIcon,
-      color: ADMIN_ACTION_COLORS.images,
-      action: onReviewPhotos,
-    },
-    {
-      key: 'tasks',
-      label: t('mobileDashboard.tasksLabel', 'Manage tasks & challenges'),
-      desc: tasksEnabled
-        ? t('mobileDashboard.tasksDesc', 'Assign and track progress')
-        : t('mobileDashboard.tasksDisabledDesc', 'Guests do not see tasks (task mode off)'),
-      icon: ListTodo,
-      color: ADMIN_ACTION_COLORS.tasks,
-      action: onManageTasks,
-    },
-    {
-      key: 'qr',
-      label: t('mobileDashboard.qrLabel', 'Show / share QR code'),
-      desc: t('mobileDashboard.qrDesc', 'Posters, cards, and links'),
-      icon: QrCode,
-      color: ADMIN_ACTION_COLORS.qr,
-      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={text}>
-                  {card.label}
-                </Text>
-                <Text fontSize="$xs" color={muted}>
-                  {card.desc}
-                </Text>
-              </YStack>
-              <Text fontSize="$xl" color={subtle}>
-                ˃
-              </Text>
-            </XStack>
-          </MobileCard>
-        </Pressable>
-      ))}
-    </YStack>
+    <MobileSheet open={open} title={t('mobileDashboard.pickEvent', 'Select an event')} onClose={onClose}>
+      <EventPickerList events={events} locale={locale} navigateOnSelect={false} onPick={onClose} />
+    </MobileSheet>
   );
 }
 
-function SecondaryGrid({
+function resolveLocation(event: TenantEvent | null, t: (key: string, fallback: string) => string): string {
+  if (!event) return t('events.detail.locationPlaceholder', 'Location');
+  const settings = (event.settings ?? {}) as Record<string, unknown>;
+  const candidate =
+    (settings.location as string | undefined) ??
+    (settings.address as string | undefined) ??
+    (settings.city as string | undefined);
+  if (candidate && candidate.trim()) {
+    return candidate;
+  }
+  return t('events.detail.locationPlaceholder', 'Location');
+}
+
+function EventHeaderCard({
   event,
-  onGuests,
-  onPrint,
-  onInvites,
-  onSettings,
-  onAnalytics,
+  locale,
+  canSwitch,
+  onSwitch,
+  onEdit,
 }: {
   event: TenantEvent | null;
-  onGuests: () => void;
-  onPrint: () => void;
-  onInvites: () => void;
-  onSettings: () => void;
-  onAnalytics: () => void;
+  locale: string;
+  canSwitch: boolean;
+  onSwitch: () => void;
+  onEdit: () => void;
 }) {
   const { t } = useTranslation('management');
   const { textStrong, muted, border, surface, accentSoft, primary } = useAdminTheme();
-  const text = textStrong;
+
+  if (!event) {
+    return null;
+  }
+
+  const dateLabel = formatEventDate(event.event_date, locale) ?? t('events.detail.dateTbd', 'Date tbd');
+  const locationLabel = resolveLocation(event, t);
+
+  return (
+    <MobileCard space="$3" borderColor={border} backgroundColor={surface} position="relative">
+      <XStack alignItems="center" justifyContent="space-between" space="$2">
+        {canSwitch ? (
+          <Pressable onPress={onSwitch} aria-label={t('mobileDashboard.pickEvent', 'Select an event')}>
+            <XStack alignItems="center" space="$2">
+              <Text fontSize="$lg" fontWeight="800" color={textStrong}>
+                {resolveEventDisplayName(event)}
+              </Text>
+              <ChevronDown size={16} color={muted} />
+            </XStack>
+          </Pressable>
+        ) : (
+          <Text fontSize="$lg" fontWeight="800" color={textStrong}>
+            {resolveEventDisplayName(event)}
+          </Text>
+        )}
+        <PillBadge tone={event.status === 'published' ? 'success' : 'warning'}>
+          {event.status === 'published'
+            ? t('events.status.published', 'Live')
+            : t('events.status.draft', 'Draft')}
+        </PillBadge>
+      </XStack>
+
+      <XStack alignItems="center" space="$2">
+        <CalendarDays size={16} color={muted} />
+        <Text fontSize="$sm" color={muted}>
+          {dateLabel}
+        </Text>
+        <MapPin size={16} color={muted} />
+        <Text fontSize="$sm" color={muted}>
+          {locationLabel}
+        </Text>
+      </XStack>
+
+      <Pressable
+        aria-label={t('mobileEvents.edit', 'Edit event')}
+        onPress={onEdit}
+        style={{
+          position: 'absolute',
+          right: 16,
+          top: 16,
+          width: 44,
+          height: 44,
+          borderRadius: 22,
+          backgroundColor: accentSoft,
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxShadow: '0 6px 16px rgba(0,0,0,0.12)',
+        }}
+      >
+        <Pencil size={18} color={primary} />
+      </Pressable>
+    </MobileCard>
+  );
+}
+
+function EventManagementGrid({
+  event,
+  tasksEnabled,
+  onNavigate,
+}: {
+  event: TenantEvent | null;
+  tasksEnabled: boolean;
+  onNavigate: (path: string) => void;
+}) {
+  const { t } = useTranslation('management');
+  const { textStrong } = useAdminTheme();
+  const slug = event?.slug ?? null;
   const brandingAllowed = isBrandingAllowed(event ?? null);
+
+  if (!event) {
+    return null;
+  }
   const tiles = [
+    {
+      icon: Pencil,
+      label: t('mobileDashboard.shortcutSettings', 'Event settings'),
+      color: ADMIN_ACTION_COLORS.settings,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/edit`)) : undefined,
+      disabled: !slug,
+    },
+    {
+      icon: Sparkles,
+      label: tasksEnabled
+        ? t('events.quick.tasks', 'Tasks & Checklists')
+        : `${t('events.quick.tasks', 'Tasks & Checklists')} (${t('common:states.disabled', 'Disabled')})`,
+      color: ADMIN_ACTION_COLORS.tasks,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/tasks`)) : undefined,
+      disabled: !tasksEnabled || !slug,
+    },
+    {
+      icon: QrCode,
+      label: t('events.quick.qr', 'QR Code Layouts'),
+      color: ADMIN_ACTION_COLORS.qr,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/qr`)) : undefined,
+      disabled: !slug,
+    },
+    {
+      icon: ImageIcon,
+      label: t('events.quick.images', 'Image Management'),
+      color: ADMIN_ACTION_COLORS.images,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/photos`)) : undefined,
+      disabled: !slug,
+    },
+    {
+      icon: Tv,
+      label: t('events.quick.liveShow', 'Live Show queue'),
+      color: ADMIN_ACTION_COLORS.images,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/live-show`)) : undefined,
+      disabled: !slug,
+    },
+    {
+      icon: Settings,
+      label: t('events.quick.liveShowSettings', 'Live Show settings'),
+      color: ADMIN_ACTION_COLORS.images,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/live-show/settings`)) : undefined,
+      disabled: !slug,
+    },
     {
       icon: Users,
-      label: t('mobileDashboard.shortcutGuests', 'Guest management'),
+      label: t('events.quick.guests', 'Guest Management'),
       color: ADMIN_ACTION_COLORS.guests,
-      action: onGuests,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/members`)) : undefined,
+      disabled: !slug,
+    },
+    {
+      icon: Megaphone,
+      label: t('events.quick.guestMessages', 'Guest messages'),
+      color: ADMIN_ACTION_COLORS.guestMessages,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/guest-notifications`)) : undefined,
+      disabled: !slug,
+    },
+    {
+      icon: Layout,
+      label: t('events.quick.branding', 'Branding & Theme'),
+      color: ADMIN_ACTION_COLORS.branding,
+      onPress: slug && brandingAllowed ? () => onNavigate(adminPath(`/mobile/events/${slug}/branding`)) : undefined,
+      disabled: !brandingAllowed || !slug,
+    },
+    {
+      icon: Camera,
+      label: t('events.quick.photobooth', 'Photobooth'),
+      color: ADMIN_ACTION_COLORS.photobooth,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/photobooth`)) : undefined,
+      disabled: !slug,
     },
     {
       icon: TrendingUp,
       label: t('mobileDashboard.shortcutAnalytics', 'Analytics'),
       color: ADMIN_ACTION_COLORS.analytics,
-      action: onAnalytics,
-    },
-    {
-      icon: QrCode,
-      label: t('mobileDashboard.shortcutPrints', 'Print & poster downloads'),
-      color: ADMIN_ACTION_COLORS.qr,
-      action: onPrint,
-    },
-    {
-      icon: Sparkles,
-      label: t('mobileDashboard.shortcutInvites', 'Team / helper invites'),
-      color: ADMIN_ACTION_COLORS.invites,
-      action: onInvites,
-    },
-    {
-      icon: Settings,
-      label: t('mobileDashboard.shortcutSettings', 'Event settings'),
-      color: ADMIN_ACTION_COLORS.success,
-      action: onSettings,
-    },
-    {
-      icon: Sparkles,
-      label: t('mobileDashboard.shortcutBranding', 'Branding & moderation'),
-      color: ADMIN_ACTION_COLORS.branding,
-      action: brandingAllowed ? onSettings : undefined,
-      disabled: !brandingAllowed,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/analytics`)) : undefined,
+      disabled: !slug,
     },
   ];
 
+  if (event && isPastEvent(event.event_date)) {
+    tiles.push({
+      icon: Sparkles,
+      label: t('events.quick.recap', 'Recap & Archive'),
+      color: ADMIN_ACTION_COLORS.recap,
+      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/recap`)) : undefined,
+      disabled: !slug,
+    });
+  }
+
   return (
-    <YStack space="$2" marginTop="$2">
-      <Text fontSize="$sm" fontWeight="800" color={text}>
-        {t('mobileDashboard.shortcutsTitle', 'Shortcuts')}
+    <YStack space="$2">
+      <Text fontSize="$sm" fontWeight="800" color={textStrong}>
+        {t('events.detail.managementTitle', 'Event management')}
       </Text>
       <XStack flexWrap="wrap" space="$2">
         {tiles.map((tile, index) => (
@@ -1178,22 +1295,12 @@ function SecondaryGrid({
             icon={tile.icon}
             label={tile.label}
             color={tile.color}
-            onPress={tile.action}
+            onPress={tile.onPress}
             disabled={tile.disabled}
             delayMs={index * ADMIN_MOTION.tileStaggerMs}
           />
         ))}
       </XStack>
-      {event ? (
-        <MobileCard backgroundColor={surface} borderColor={border} space="$1.5">
-          <Text fontSize="$sm" fontWeight="700" color={text}>
-            {resolveEventDisplayName(event)}
-          </Text>
-          <Text fontSize="$xs" color={muted}>
-            {renderEventLocation(event)}
-          </Text>
-        </MobileCard>
-      ) : null}
     </YStack>
   );
 }

resources/js/admin/mobile/EventAnalyticsPage.tsx

@@ -14,13 +14,11 @@ import { getEventAnalytics, EventAnalytics } from '../api';
 import { ApiError } from '../lib/apiError';
 import { useAdminTheme } from './theme';
 import { adminPath } from '../constants';
-import { useEventContext } from '../context/EventContext';
 
 export default function MobileEventAnalyticsPage() {
   const { slug } = useParams<{ slug: string }>();
   const { t, i18n } = useTranslation('management');
   const navigate = useNavigate();
-  const { activeEvent } = useEventContext();
   const { textStrong, muted, border, surface, primary, accentSoft } = useAdminTheme();
   
   const dateLocale = i18n.language.startsWith('de') ? de : enGB;
@@ -36,7 +34,7 @@ export default function MobileEventAnalyticsPage() {
 
   if (isFeatureLocked) {
     return (
-      <MobileShell title={t('analytics.title', 'Analytics')} activeTab="events">
+      <MobileShell title={t('analytics.title', 'Analytics')} activeTab="home">
         <MobileCard
           space="$4"
           padding="$6"
@@ -75,7 +73,7 @@ export default function MobileEventAnalyticsPage() {
 
   if (isLoading) {
     return (
-      <MobileShell title={t('analytics.title', 'Analytics')} activeTab="events">
+      <MobileShell title={t('analytics.title', 'Analytics')} activeTab="home">
         <YStack space="$3">
           <SkeletonCard height={200} />
           <SkeletonCard height={150} />
@@ -87,7 +85,7 @@ export default function MobileEventAnalyticsPage() {
 
   if (error || !data) {
     return (
-      <MobileShell title={t('analytics.title', 'Analytics')} activeTab="events">
+      <MobileShell title={t('analytics.title', 'Analytics')} activeTab="home">
         <MobileCard borderColor={border} padding="$4">
           <Text color={muted}>{t('common.error', 'Something went wrong')}</Text>
         </MobileCard>
@@ -106,9 +104,8 @@ export default function MobileEventAnalyticsPage() {
   return (
     <MobileShell
       title={t('analytics.title', 'Analytics')}
-      subtitle={activeEvent?.name as string}
-      activeTab="events"
-      showBack
+      activeTab="home"
+      onBack={() => navigate(-1)}
     >
       <YStack space="$4">
         {/* Activity Timeline */}

resources/js/admin/mobile/EventDetailPage.tsx

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

resources/js/admin/mobile/EventFormPage.tsx

@@ -9,15 +9,16 @@ import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton } from './components/Primitives';
 import { MobileField, MobileInput, MobileSelect, MobileTextArea } from './components/FormControls';
 import { LegalConsentSheet } from './components/LegalConsentSheet';
-import { createEvent, getEvent, updateEvent, getEventTypes, TenantEvent, TenantEventType, trackOnboarding } from '../api';
+import { createEvent, getEvent, updateEvent, getEventTypes, getPackages, Package, TenantEvent, TenantEventType, trackOnboarding } from '../api';
 import { resolveEventSlugAfterUpdate } from './eventFormNavigation';
 import { adminPath } from '../constants';
 import { isAuthError } from '../auth/tokens';
-import { getApiValidationMessage, isApiError } from '../lib/apiError';
+import { getApiErrorMessage, getApiValidationMessage, isApiError } from '../lib/apiError';
 import toast from 'react-hot-toast';
 import { useBackNavigation } from './hooks/useBackNavigation';
 import { useAdminTheme } from './theme';
 import { withAlpha } from './components/colors';
+import { useAuth } from '../auth/context';
 
 type FormState = {
   name: string;
@@ -28,6 +29,7 @@ type FormState = {
   published: boolean;
   autoApproveUploads: boolean;
   tasksEnabled: boolean;
+  packageId: number | null;
 };
 
 export default function MobileEventFormPage() {
@@ -36,7 +38,9 @@ export default function MobileEventFormPage() {
   const isEdit = Boolean(slug);
   const navigate = useNavigate();
   const { t } = useTranslation(['management', 'common']);
+  const { user } = useAuth();
   const { text, muted, subtle, danger, border, surface, primary } = useAdminTheme();
+  const isSuperAdmin = user?.role === 'super_admin' || user?.role === 'superadmin';
 
   const [form, setForm] = React.useState<FormState>({
     name: '',
@@ -47,9 +51,12 @@ export default function MobileEventFormPage() {
     published: false,
     autoApproveUploads: true,
     tasksEnabled: true,
+    packageId: null,
   });
   const [eventTypes, setEventTypes] = React.useState<TenantEventType[]>([]);
   const [typesLoading, setTypesLoading] = React.useState(false);
+  const [packages, setPackages] = React.useState<Package[]>([]);
+  const [packagesLoading, setPackagesLoading] = React.useState(false);
   const [loading, setLoading] = React.useState(isEdit);
   const [saving, setSaving] = React.useState(false);
   const [consentOpen, setConsentOpen] = React.useState(false);
@@ -76,6 +83,7 @@ export default function MobileEventFormPage() {
           tasksEnabled:
             (data.settings?.engagement_mode as string | undefined) !== 'photo_only' &&
             (data.engagement_mode as string | undefined) !== 'photo_only',
+          packageId: null,
         });
         setError(null);
       } catch (err) {
@@ -106,6 +114,31 @@ export default function MobileEventFormPage() {
     })();
   }, []);
 
+  React.useEffect(() => {
+    if (!isSuperAdmin || isEdit) {
+      return;
+    }
+
+    (async () => {
+      setPackagesLoading(true);
+      try {
+        const data = await getPackages('endcustomer');
+        setPackages(data);
+        setForm((prev) => {
+          if (prev.packageId) {
+            return prev;
+          }
+          const preferred = data.find((pkg) => pkg.id === 3) ?? data[0] ?? null;
+          return { ...prev, packageId: preferred?.id ?? null };
+        });
+      } catch {
+        setPackages([]);
+      } finally {
+        setPackagesLoading(false);
+      }
+    })();
+  }, [isSuperAdmin, isEdit]);
+
   async function handleSubmit() {
     setSaving(true);
     setError(null);
@@ -130,7 +163,8 @@ export default function MobileEventFormPage() {
           slug: `${Date.now()}`,
           event_type_id: form.eventTypeId ?? undefined,
           event_date: form.date || undefined,
-          status: (form.published ? 'published' : 'draft') as const,
+          status: form.published ? 'published' : 'draft',
+          package_id: isSuperAdmin ? form.packageId ?? undefined : undefined,
           settings: {
             location: form.location,
             guest_upload_visibility: form.autoApproveUploads ? 'immediate' : 'review',
@@ -152,7 +186,8 @@ export default function MobileEventFormPage() {
           slug: `${Date.now()}`,
           event_type_id: form.eventTypeId ?? undefined,
           event_date: form.date || undefined,
-          status: (form.published ? 'published' : 'draft') as const,
+          status: form.published ? 'published' : 'draft',
+          package_id: isSuperAdmin ? form.packageId ?? undefined : undefined,
           settings: {
             location: form.location,
             guest_upload_visibility: form.autoApproveUploads ? 'immediate' : 'review',
@@ -223,6 +258,31 @@ export default function MobileEventFormPage() {
           />
         </MobileField>
 
+        {isSuperAdmin && !isEdit ? (
+          <MobileField label={t('eventForm.fields.package.label', 'Package')}>
+            {packagesLoading ? (
+              <Text fontSize="$sm" color={muted}>{t('eventForm.fields.package.loading', 'Loading packages…')}</Text>
+            ) : packages.length === 0 ? (
+              <Text fontSize="$sm" color={muted}>{t('eventForm.fields.package.empty', 'No packages available yet.')}</Text>
+            ) : (
+              <MobileSelect
+                value={form.packageId ?? ''}
+                onChange={(e) => setForm((prev) => ({ ...prev, packageId: Number(e.target.value) }))}
+              >
+                <option value="">{t('eventForm.fields.package.placeholder', 'Select package')}</option>
+                {packages.map((pkg) => (
+                  <option key={pkg.id} value={pkg.id}>
+                    {pkg.name || `#${pkg.id}`}
+                  </option>
+                ))}
+              </MobileSelect>
+            )}
+            <Text fontSize="$xs" color={muted}>
+              {t('eventForm.fields.package.help', 'This controls the event’s premium limits.')}
+            </Text>
+          </MobileField>
+        ) : null}
+
         <MobileField label={t('eventForm.fields.date.label', 'Date & time')}>
           <XStack alignItems="center" space="$2">
             <NativeDateTimeInput

resources/js/admin/mobile/EventLiveShowQueuePage.tsx

@@ -6,7 +6,7 @@ import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
-import { MobileSelect } from './components/FormControls';
+import { MobileSelect, MobileField } from './components/FormControls';
 import { useEventContext } from '../context/EventContext';
 import {
   approveAndLiveShowPhoto,
@@ -216,17 +216,18 @@ export default function MobileEventLiveShowQueuePage() {
       </MobileCard>
 
       <MobileCard>
-        <MobileSelect
-          label={t('liveShowQueue.filterLabel', 'Live status')}
-          value={statusFilter}
-          onChange={(event) => setStatusFilter(event.target.value as LiveShowQueueStatus)}
-        >
-          {STATUS_OPTIONS.map((option) => (
-            <option key={option.value} value={option.value}>
-              {t(option.labelKey, option.fallback)}
-            </option>
-          ))}
-        </MobileSelect>
+        <MobileField label={t('liveShowQueue.filterLabel', 'Live status')}>
+          <MobileSelect
+            value={statusFilter}
+            onChange={(event) => setStatusFilter(event.target.value as LiveShowQueueStatus)}
+          >
+            {STATUS_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {t(option.labelKey, option.fallback)}
+              </option>
+            ))}
+          </MobileSelect>
+        </MobileField>
       </MobileCard>
 
       {error ? (

resources/js/admin/mobile/EventLiveShowSettingsPage.tsx

@@ -12,7 +12,7 @@ import { MobileField, MobileInput, MobileSelect } from './components/FormControl
 import { getEvent, getLiveShowLink, rotateLiveShowLink, updateEvent, LiveShowLink, LiveShowSettings, TenantEvent } from '../api';
 import { isAuthError } from '../auth/tokens';
 import { getApiErrorMessage } from '../lib/apiError';
-import { formatEventDate, resolveEventDisplayName } from '../lib/events';
+import { resolveEventDisplayName } from '../lib/events';
 import { adminPath } from '../constants';
 import { useBackNavigation } from './hooks/useBackNavigation';
 import { useAdminTheme } from './theme';
@@ -262,8 +262,7 @@ export default function MobileEventLiveShowSettingsPage() {
   return (
     <MobileShell
       activeTab="home"
-      title={event ? resolveEventDisplayName(event) : t('liveShowSettings.title', 'Live Show settings')}
-      subtitle={event?.event_date ? formatEventDate(event.event_date, locale) ?? undefined : undefined}
+      title={t('liveShowSettings.title', 'Live Show settings')}
       onBack={back}
       headerActions={
         <HeaderActionButton onPress={() => load()} ariaLabel={t('common.refresh', 'Refresh')}>
@@ -341,7 +340,7 @@ export default function MobileEventLiveShowSettingsPage() {
             {liveShowLink?.qr_code_data_url ? (
               <XStack space="$2" alignItems="center" marginTop="$2" flexWrap="wrap">
                 <Pressable
-                  onPress={() => downloadQr(liveShowLink.qr_code_data_url, 'live-show-qr.png')}
+                  onPress={() => downloadQr(liveShowLink.qr_code_data_url!, 'live-show-qr.png')}
                   title={t('liveShowSettings.link.downloadQr', 'Download QR')}
                   aria-label={t('liveShowSettings.link.downloadQr', 'Download QR')}
                   style={{ borderRadius: 12, cursor: 'pointer' }}
@@ -578,14 +577,14 @@ function resolveName(name: TenantEvent['name']): string {
   return 'Event';
 }
 
-function copyToClipboard(value: string, t: (key: string, fallback?: string) => string) {
+function copyToClipboard(value: string, t: any) {
   navigator.clipboard
     .writeText(value)
     .then(() => toast.success(t('liveShowSettings.link.copySuccess', 'Link copied')))
     .catch(() => toast.error(t('liveShowSettings.link.copyFailed', 'Link could not be copied')));
 }
 
-async function shareLink(value: string, event: TenantEvent | null, t: (key: string, fallback?: string) => string) {
+async function shareLink(value: string, event: TenantEvent | null, t: any) {
   if (navigator.share) {
     try {
       await navigator.share({
@@ -713,7 +712,7 @@ function IconAction({
       }}
     >
       <XStack alignItems="center" justifyContent="center">
-        {React.isValidElement(children) ? React.cloneElement(children, { color }) : children}
+        {React.isValidElement(children) ? React.cloneElement(children as any, { color }) : children}
       </XStack>
     </Pressable>
   );

resources/js/admin/mobile/EventPhotoboothPage.tsx

@@ -19,7 +19,7 @@ import {
 } from '../api';
 import { isAuthError } from '../auth/tokens';
 import { getApiErrorMessage } from '../lib/apiError';
-import { formatEventDate, resolveEventDisplayName } from '../lib/events';
+import { formatEventDate } from '../lib/events';
 import toast from 'react-hot-toast';
 import { adminPath } from '../constants';
 import { useBackNavigation } from './hooks/useBackNavigation';
@@ -146,9 +146,7 @@ export default function MobileEventPhotoboothPage() {
       : t('photobooth.credentials.heading', 'FTP (Classic)');
 
   const isActive = Boolean(status?.enabled);
-  const title = event ? resolveEventDisplayName(event) : t('management.header.appName', 'Event Admin');
-  const subtitle =
-    event?.event_date ? formatEventDate(event.event_date, locale) : t('header.selectEvent', 'Select an event to continue');
+  const title = t('photobooth.title', 'Photobooth');
 
   const handleToggle = (checked: boolean) => {
     if (!slug || updating) return;
@@ -163,7 +161,6 @@ export default function MobileEventPhotoboothPage() {
     <MobileShell
       activeTab="home"
       title={title}
-      subtitle={subtitle ?? undefined}
       onBack={back}
       headerActions={
         <HeaderActionButton onPress={() => load()} ariaLabel={t('common.refresh', 'Refresh')}>

resources/js/admin/mobile/EventPhotosPage.tsx

@@ -453,7 +453,7 @@ export default function MobileEventPhotosPage() {
           toast.error(t('mobilePhotos.loadFailed', 'Fotos konnten nicht geladen werden.'));
         }
         if (active) {
-          setLightboxWithUrl(null, { replace: true });
+          setLightboxWithUrl(null);
         }
       } finally {
         if (active) {
@@ -616,7 +616,7 @@ export default function MobileEventPhotosPage() {
   function startAddonCheckout(scopeOrKey: 'photos' | 'gallery' | 'guests' | string) {
     if (!slug) return;
     const { scope, addonKey } = resolveScopeAndAddonKey(scopeOrKey);
-    setConsentTarget({ scope, addonKey });
+    setConsentTarget({ scope: scope as any, addonKey });
     setConsentOpen(true);
   }
 
@@ -635,7 +635,7 @@ export default function MobileEventPhotosPage() {
         cancel_url: currentUrl,
         accepted_terms: consents.acceptedTerms,
         accepted_waiver: consents.acceptedWaiver,
-      });
+      } as any);
       if (checkout.checkout_url) {
         window.location.href = checkout.checkout_url;
       } else {
@@ -710,7 +710,7 @@ export default function MobileEventPhotosPage() {
       <XStack space="$2">
         <CTAButton
           label={selectionMode ? t('common.done', 'Done') : t('common.select', 'Select')}
-          tone={selectionMode ? 'solid' : 'ghost'}
+          tone={selectionMode ? 'primary' : 'ghost'}
           fullWidth={false}
           onPress={() => {
             if (selectionMode) {
@@ -768,7 +768,7 @@ export default function MobileEventPhotosPage() {
           addons={catalogAddons}
           onCheckout={startAddonCheckout}
           busyScope={busyScope}
-          translate={translateLimits(t)}
+          translate={translateLimits(t as any)}
           textColor={text}
           borderColor={border}
         />
@@ -1343,7 +1343,7 @@ function PhotoQuickActions({ photo, disabled = false, muted, surface, onAction }
           key={action.key}
           disabled={disabled}
           aria-label={action.label}
-          onPress={(event) => {
+          onPress={(event: any) => {
             event.stopPropagation();
             if (!disabled) {
               onAction(action.key);

resources/js/admin/mobile/EventRecapPage.tsx

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

resources/js/admin/mobile/EventTasksPage.tsx

@@ -183,7 +183,7 @@ export default function MobileEventTasksPage() {
     setSearchTerm('');
   }, [slug]);
 
-  const scrollToSection = (ref: React.RefObject<HTMLDivElement>) => {
+  const scrollToSection = (ref: React.RefObject<HTMLDivElement | null>) => {
     if (ref.current) {
       ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
@@ -561,8 +561,8 @@ export default function MobileEventTasksPage() {
               />
             </XStack>
           </MobileCard>
-          <YGroup borderWidth={1} borderColor={border} borderRadius="$4" overflow="hidden">
-            <YGroup.Item bordered>
+          <YGroup {...({ borderWidth: 1, borderColor: border, borderRadius: "$4", overflow: "hidden" } as any)}>
+            <YGroup.Item>
               <ListItem
                 hoverTheme
                 pressTheme
@@ -661,9 +661,9 @@ export default function MobileEventTasksPage() {
           <Text fontSize="$sm" color={muted}>
             {t('events.tasks.count', '{{count}} Tasks', { count: filteredTasks.length })}
           </Text>
-          <YGroup borderWidth={1} borderColor={border} borderRadius="$4" overflow="hidden">
+          <YGroup {...({ borderWidth: 1, borderColor: border, borderRadius: "$4", overflow: "hidden" } as any)}>
             {filteredTasks.map((task, idx) => (
-              <YGroup.Item key={task.id} bordered={idx < filteredTasks.length - 1}>
+              <YGroup.Item key={task.id}>
                 <ListItem
                   hoverTheme
                   pressTheme
@@ -694,7 +694,7 @@ export default function MobileEventTasksPage() {
                         icon={<Trash2 size={14} color={dangerText} />}
                         aria-label={t('events.tasks.remove', 'Remove task')}
                         disabled={busyId === task.id}
-                        onPress={(event) => {
+                        onPress={(event: any) => {
                           event?.stopPropagation?.();
                           setDeleteCandidate(task);
                         }}
@@ -729,9 +729,9 @@ export default function MobileEventTasksPage() {
               {t('events.tasks.libraryEmpty', 'Keine weiteren Aufgaben verfügbar.')}
             </Text>
           ) : (
-            <YGroup borderWidth={1} borderColor={border} borderRadius="$4" overflow="hidden">
+            <YGroup {...({ borderWidth: 1, borderColor: border, borderRadius: "$4", overflow: "hidden" } as any)}>
               {(expandedLibrary ? library : library.slice(0, 6)).map((task, idx, arr) => (
-                <YGroup.Item key={`lib-${task.id}`} bordered={idx < arr.length - 1}>
+                <YGroup.Item key={`lib-${task.id}`}>
                   <ListItem
                     hoverTheme
                     pressTheme
@@ -786,9 +786,9 @@ export default function MobileEventTasksPage() {
               {t('events.tasks.collectionsEmpty', 'Keine Pakete vorhanden.')}
             </Text>
           ) : (
-            <YGroup borderWidth={1} borderColor={border} borderRadius="$4" overflow="hidden">
+            <YGroup {...({ borderWidth: 1, borderColor: border, borderRadius: "$4", overflow: "hidden" } as any)}>
               {(expandedCollections ? collections : collections.slice(0, 6)).map((collection, idx, arr) => (
-                <YGroup.Item key={collection.id} bordered={idx < arr.length - 1}>
+                <YGroup.Item key={collection.id}>
                   <ListItem
                     hoverTheme
                     pressTheme
@@ -917,9 +917,9 @@ export default function MobileEventTasksPage() {
               style={{ padding: 0 }}
             />
           </MobileField>
-          <YGroup borderWidth={1} borderColor={border} borderRadius="$4" overflow="hidden">
+          <YGroup {...({ borderWidth: 1, borderColor: border, borderRadius: "$4", overflow: "hidden" } as any)}>
             {emotions.map((em, idx) => (
-              <YGroup.Item key={`emo-${em.id}`} bordered={idx < emotions.length - 1}>
+              <YGroup.Item key={`emo-${em.id}`}>
                 <ListItem
                   hoverTheme
                   pressTheme
@@ -1000,9 +1000,9 @@ export default function MobileEventTasksPage() {
         }}
       >
         <AlertDialog.Portal>
-          <AlertDialog.Overlay backgroundColor={`${overlay}66`} />
+          <AlertDialog.Overlay backgroundColor={`${overlay}66` as any} />
           <AlertDialog.Content
-            borderRadius={20}
+            {...({ borderRadius: 20 } as any)}
             borderWidth={1}
             borderColor={border}
             backgroundColor={surface}
@@ -1058,8 +1058,8 @@ export default function MobileEventTasksPage() {
         title={t('events.tasks.actions', 'Aktionen')}
         footer={null}
       >
-        <YGroup borderWidth={1} borderColor={border} borderRadius="$4" overflow="hidden">
-          <YGroup.Item bordered>
+        <YGroup {...({ borderWidth: 1, borderColor: border, borderRadius: "$4", overflow: "hidden" } as any)}>
+          <YGroup.Item>
             <ListItem
               hoverTheme
               pressTheme
@@ -1077,7 +1077,7 @@ export default function MobileEventTasksPage() {
               iconAfter={<ChevronRight size={14} color={subtle} />}
             />
           </YGroup.Item>
-          <YGroup.Item bordered>
+          <YGroup.Item>
             <ListItem
               hoverTheme
               pressTheme

resources/js/admin/mobile/NotificationsPage.tsx

@@ -334,7 +334,7 @@ export default function MobileNotificationsPage() {
   const reload = React.useCallback(async () => {
     setLoading(true);
     try {
-      const data = await loadNotifications(t, events, { scope: scopeParam, status: statusParam, eventSlug: slug });
+      const data = await loadNotifications(t as any, events, { scope: scopeParam, status: statusParam, eventSlug: slug });
       setNotifications(data);
       setError(null);
     } catch (err) {
@@ -691,6 +691,7 @@ export default function MobileNotificationsPage() {
           }
         }}
         title={selectedNotification?.title ?? t('mobileNotifications.title', 'Notifications')}
+        snapPoints={[94]}
         footer={
           selectedNotification && !selectedNotification.is_read ? (
             <CTAButton label={t('notificationLogs.markRead', 'Mark as read')} onPress={() => markSelectedRead()} />
@@ -705,7 +706,7 @@ export default function MobileNotificationsPage() {
             <Text fontSize="$sm" color={muted}>
               {selectedNotification.body}
             </Text>
-            <XStack space="$2">
+            <XStack space="$2" flexWrap="wrap" style={{ rowGap: 8 }}>
               <PillBadge tone={selectedNotification.tone === 'warning' ? 'warning' : 'muted'}>
                 {selectedNotification.scope}
               </PillBadge>

resources/js/admin/mobile/PackageShopPage.tsx

@@ -39,7 +39,7 @@ export default function MobilePackageShopPage() {
 
   if (isLoading) {
     return (
-      <MobileShell title={t('shop.title', 'Upgrade Package')} showBack activeTab="profile">
+      <MobileShell title={t('shop.title', 'Upgrade Package')} onBack={() => navigate(-1)} activeTab="profile">
         <YStack space="$3">
           <SkeletonCard height={150} />
           <SkeletonCard height={150} />
@@ -71,7 +71,7 @@ export default function MobilePackageShopPage() {
   });
 
   return (
-    <MobileShell title={t('shop.title', 'Upgrade Package')} showBack activeTab="profile">
+    <MobileShell title={t('shop.title', 'Upgrade Package')} onBack={() => navigate(-1)} activeTab="profile">
       <YStack space="$4">
         {recommendedFeature && (
             <MobileCard borderColor={primary} backgroundColor={accentSoft} space="$2" padding="$3">
@@ -156,7 +156,7 @@ function PackageShopCard({
             <Text fontSize="$lg" fontWeight="800" color={textStrong}>
                 {pkg.name}
             </Text>
-            {isRecommended && <PillBadge tone="primary">{t('shop.badges.recommended', 'Recommended')}</PillBadge>}
+            {isRecommended && <PillBadge tone="warning">{t('shop.badges.recommended', 'Recommended')}</PillBadge>}
             {isActive && <PillBadge tone="success">{t('shop.badges.active', 'Active')}</PillBadge>}
           </XStack>
           
@@ -171,7 +171,9 @@ function PackageShopCard({
             )}
           </XStack>
         </YStack>
-        <ChevronRight size={20} color={muted} marginTop="$2" />
+        <YStack marginTop="$2">
+          <ChevronRight size={20} color={muted} />
+        </YStack>
       </XStack>
 
       <YStack space="$1.5">
@@ -238,7 +240,7 @@ function CheckoutConfirmation({ pkg, onCancel }: { pkg: Package; onCancel: () =>
   };
 
   return (
-    <MobileShell title={t('shop.confirmTitle', 'Confirm Purchase')} onBack={onCancel}>
+    <MobileShell title={t('shop.confirmTitle', 'Confirm Purchase')} onBack={onCancel} activeTab="profile">
       <YStack space="$4">
         <MobileCard space="$2" borderColor={border}>
             <Text fontSize="$sm" color={muted}>{t('shop.confirmSubtitle', 'You are upgrading to:')}</Text>

resources/js/admin/mobile/ProfilePage.tsx

@@ -82,127 +82,129 @@ export default function MobileProfilePage() {
         <Text fontSize="$md" fontWeight="800" color={textColor}>
           {t('mobileProfile.settings', 'Settings')}
         </Text>
-        <YGroup borderRadius="$4" borderWidth={1} borderColor={borderColor} overflow="hidden">
-          <YGroup.Item bordered>
-            <Pressable onPress={() => navigate(adminPath('/mobile/settings'))}>
+        <YStack space="$4">
+          <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: borderColor, overflow: "hidden" } as any)}>
+            <YGroup.Item>
+              <Pressable onPress={() => navigate(adminPath('/mobile/profile/security'))}>
+                <ListItem
+                  hoverTheme
+                  pressTheme
+                  paddingVertical="$2"
+                  paddingHorizontal="$3"
+                  title={
+                    <Text fontSize="$sm" color={textColor}>
+                      {t('mobileProfile.account', 'Account & security')}
+                    </Text>
+                  }
+                  iconAfter={<Settings size={18} color={subtle} />}
+                />
+              </Pressable>
+            </YGroup.Item>
+            <YGroup.Item>
+              <Pressable onPress={() => navigate(adminPath('/mobile/billing#packages'))}>
+                <ListItem
+                  hoverTheme
+                  pressTheme
+                  paddingVertical="$2"
+                  paddingHorizontal="$3"
+                  title={
+                    <Text fontSize="$sm" color={textColor}>
+                      {t('billing.sections.packages.title', 'Packages & Billing')}
+                    </Text>
+                  }
+                  iconAfter={<Settings size={18} color={subtle} />}
+                />
+              </Pressable>
+            </YGroup.Item>
+            <YGroup.Item>
+              <Pressable onPress={() => navigate(adminPath('/mobile/billing#invoices'))}>
+                <ListItem
+                  hoverTheme
+                  pressTheme
+                  paddingVertical="$2"
+                  paddingHorizontal="$3"
+                  title={
+                    <Text fontSize="$sm" color={textColor}>
+                      {t('billing.sections.invoices.title', 'Invoices & Payments')}
+                    </Text>
+                  }
+                  iconAfter={<Settings size={18} color={subtle} />}
+                />
+              </Pressable>
+            </YGroup.Item>
+            <YGroup.Item>
+              <Pressable onPress={() => navigate(ADMIN_DATA_EXPORTS_PATH)}>
+                <ListItem
+                  hoverTheme
+                  pressTheme
+                  paddingVertical="$2"
+                  paddingHorizontal="$3"
+                  title={
+                    <Text fontSize="$sm" color={textColor}>
+                      {t('dataExports.title', 'Data exports')}
+                    </Text>
+                  }
+                  iconAfter={<Download size={18} color={subtle} />}
+                />
+              </Pressable>
+            </YGroup.Item>
+            <YGroup.Item>
               <ListItem
-                hoverTheme
-                pressTheme
                 paddingVertical="$2"
                 paddingHorizontal="$3"
                 title={
-                  <Text fontSize="$sm" color={textColor}>
-                    {t('mobileProfile.account', 'Account & security')}
-                  </Text>
+                  <XStack space="$2" alignItems="center">
+                    <Globe size={16} color={muted} />
+                    <Text fontSize="$sm" color={textColor}>
+                      {t('mobileProfile.language', 'Language')}
+                    </Text>
+                  </XStack>
+                }
+                iconAfter={
+                  <MobileSelect
+                    value={language}
+                    onChange={(e) => {
+                      const lng = e.target.value;
+                      setLanguage(lng);
+                      void i18n.changeLanguage(lng);
+                    }}
+                    compact
+                    style={{ minWidth: 130 }}
+                  >
+                    <option value="de">{t('mobileProfile.languageDe', 'Deutsch')}</option>
+                    <option value="en">{t('mobileProfile.languageEn', 'English')}</option>
+                  </MobileSelect>
                 }
-                iconAfter={<Settings size={18} color={subtle} />}
               />
-            </Pressable>
-          </YGroup.Item>
-          <YGroup.Item bordered>
-            <Pressable onPress={() => navigate(adminPath('/mobile/billing#packages'))}>
+            </YGroup.Item>
+            <YGroup.Item>
               <ListItem
-                hoverTheme
-                pressTheme
                 paddingVertical="$2"
                 paddingHorizontal="$3"
                 title={
-                  <Text fontSize="$sm" color={textColor}>
-                    {t('billing.sections.packages.title', 'Packages & Billing')}
-                  </Text>
+                  <XStack space="$2" alignItems="center">
+                    <Moon size={16} color={muted} />
+                    <Text fontSize="$sm" color={textColor}>
+                      {t('mobileProfile.theme', 'Theme')}
+                    </Text>
+                  </XStack>
                 }
-                iconAfter={<Settings size={18} color={subtle} />}
-              />
-            </Pressable>
-          </YGroup.Item>
-          <YGroup.Item bordered>
-            <Pressable onPress={() => navigate(adminPath('/mobile/billing#invoices'))}>
-              <ListItem
-                hoverTheme
-                pressTheme
-                paddingVertical="$2"
-                paddingHorizontal="$3"
-                title={
-                  <Text fontSize="$sm" color={textColor}>
-                    {t('billing.sections.invoices.title', 'Invoices & Payments')}
-                  </Text>
+                iconAfter={
+                  <MobileSelect
+                    value={appearance}
+                    onChange={(e) => updateAppearance(e.target.value as 'light' | 'dark' | 'system')}
+                    compact
+                    style={{ minWidth: 130 }}
+                  >
+                    <option value="light">{t('mobileProfile.themeLight', 'Light')}</option>
+                    <option value="dark">{t('mobileProfile.themeDark', 'Dark')}</option>
+                    <option value="system">{t('mobileProfile.themeSystem', 'System')}</option>
+                  </MobileSelect>
                 }
-                iconAfter={<Settings size={18} color={subtle} />}
               />
-            </Pressable>
-          </YGroup.Item>
-          <YGroup.Item bordered>
-            <Pressable onPress={() => navigate(ADMIN_DATA_EXPORTS_PATH)}>
-              <ListItem
-                hoverTheme
-                pressTheme
-                paddingVertical="$2"
-                paddingHorizontal="$3"
-                title={
-                  <Text fontSize="$sm" color={textColor}>
-                    {t('dataExports.title', 'Data exports')}
-                  </Text>
-                }
-                iconAfter={<Download size={18} color={subtle} />}
-              />
-            </Pressable>
-          </YGroup.Item>
-          <YGroup.Item bordered>
-            <ListItem
-              paddingVertical="$2"
-              paddingHorizontal="$3"
-              title={
-                <XStack space="$2" alignItems="center">
-                  <Globe size={16} color={muted} />
-                  <Text fontSize="$sm" color={textColor}>
-                    {t('mobileProfile.language', 'Language')}
-                  </Text>
-                </XStack>
-              }
-              iconAfter={
-                <MobileSelect
-                  value={language}
-                  onChange={(e) => {
-                    const lng = e.target.value;
-                    setLanguage(lng);
-                    void i18n.changeLanguage(lng);
-                  }}
-                  compact
-                  style={{ minWidth: 130 }}
-                >
-                  <option value="de">{t('mobileProfile.languageDe', 'Deutsch')}</option>
-                  <option value="en">{t('mobileProfile.languageEn', 'English')}</option>
-                </MobileSelect>
-              }
-            />
-          </YGroup.Item>
-          <YGroup.Item>
-            <ListItem
-              paddingVertical="$2"
-              paddingHorizontal="$3"
-              title={
-                <XStack space="$2" alignItems="center">
-                  <Moon size={16} color={muted} />
-                  <Text fontSize="$sm" color={textColor}>
-                    {t('mobileProfile.theme', 'Theme')}
-                  </Text>
-                </XStack>
-              }
-              iconAfter={
-                <MobileSelect
-                  value={appearance}
-                  onChange={(e) => updateAppearance(e.target.value as 'light' | 'dark' | 'system')}
-                  compact
-                  style={{ minWidth: 130 }}
-                >
-                  <option value="light">{t('mobileProfile.themeLight', 'Light')}</option>
-                  <option value="dark">{t('mobileProfile.themeDark', 'Dark')}</option>
-                  <option value="system">{t('mobileProfile.themeSystem', 'System')}</option>
-                </MobileSelect>
-              }
-            />
-          </YGroup.Item>
-        </YGroup>
+            </YGroup.Item>
+          </YGroup>
+        </YStack>
       </MobileCard>
 
       <CTAButton
@@ -214,4 +216,4 @@ export default function MobileProfilePage() {
       />
     </MobileShell>
   );
-}
+}

resources/js/admin/mobile/QrLayoutCustomizePage.tsx

@@ -69,7 +69,7 @@ export default function MobileQrLayoutCustomizePage() {
   const layoutParam = searchParams.get('layout');
   const navigate = useNavigate();
   const { t } = useTranslation('management');
-  const { textStrong, danger } = useAdminTheme();
+  const { textStrong, danger, muted, border, primary, surface, surfaceMuted, overlay, shadow } = useAdminTheme();
 
   const [event, setEvent] = React.useState<TenantEvent | null>(null);
   const [invite, setInvite] = React.useState<EventQrInvite | null>(null);
@@ -420,9 +420,9 @@ function renderEventName(name: TenantEvent['name'] | null | undefined): string |
 
 function getDefaultSlots(): Record<string, SlotDefinition> {
   return {
-    headline: { x: 0.08, y: 0.12, w: 0.84, fontSize: 90, fontWeight: 800, fontFamily: DEFAULT_DISPLAY_FONT, align: 'center' },
-    subtitle: { x: 0.1, y: 0.21, w: 0.8, fontSize: 37, fontWeight: 600, fontFamily: DEFAULT_BODY_FONT, align: 'center' },
-    description: { x: 0.1, y: 0.66, w: 0.8, fontSize: 26, fontFamily: DEFAULT_BODY_FONT, lineHeight: 1.4, align: 'center' },
+    headline: { x: 0.08, y: 0.12, w: 0.84, fontSize: 90, fontWeight: 800, fontFamily: DEFAULT_DISPLAY_FONT, align: 'center' as const },
+    subtitle: { x: 0.1, y: 0.21, w: 0.8, fontSize: 37, fontWeight: 600, fontFamily: DEFAULT_BODY_FONT, align: 'center' as const },
+    description: { x: 0.1, y: 0.66, w: 0.8, fontSize: 26, fontFamily: DEFAULT_BODY_FONT, lineHeight: 1.4, align: 'center' as const },
     instructions: { x: 0.1, y: 0.7, w: 0.8, fontSize: 24, fontFamily: DEFAULT_BODY_FONT, lineHeight: 1.5 },
     qr: { x: 0.39, y: 0.37, w: 0.27 },
   };
@@ -453,9 +453,9 @@ function resolveSlots(layout: EventQrInviteLayout | null, isFoldable: boolean, o
 
   const baseSlots = isFoldable
     ? {
-        headline: { x: 0.08, y: 0.15, w: 0.84, fontSize: 50, fontWeight: 800, fontFamily: DEFAULT_DISPLAY_FONT, align: 'center' },
-        subtitle: { x: 0.1, y: 0.21, w: 0.8, fontSize: 37, fontWeight: 600, fontFamily: DEFAULT_BODY_FONT, align: 'center' },
-        description: { x: 0.1, y: 0.66, w: 0.8, fontSize: 13, fontFamily: DEFAULT_BODY_FONT, lineHeight: 1.4, align: 'center' },
+        headline: { x: 0.08, y: 0.15, w: 0.84, fontSize: 50, fontWeight: 800, fontFamily: DEFAULT_DISPLAY_FONT, align: 'center' as const },
+        subtitle: { x: 0.1, y: 0.21, w: 0.8, fontSize: 37, fontWeight: 600, fontFamily: DEFAULT_BODY_FONT, align: 'center' as const },
+        description: { x: 0.1, y: 0.66, w: 0.8, fontSize: 13, fontFamily: DEFAULT_BODY_FONT, lineHeight: 1.4, align: 'center' as const },
         instructions: { x: 0.12, y: 0.36, w: 0.76, fontSize: 13, fontFamily: DEFAULT_BODY_FONT, lineHeight: 1.3 },
         qr: { x: 0.3, y: 0.3, w: 0.28 },
       }
@@ -520,8 +520,8 @@ function buildFabricOptions({
   const elements: LayoutElement[] = [];
   const textColor = layout?.preview?.text ?? ADMIN_COLORS.backdrop;
   const accentColor = layout?.preview?.accent ?? ADMIN_COLORS.primary;
-  const secondaryColor = layout?.preview?.secondary ?? ADMIN_COLORS.text;
-  const badgeColor = layout?.preview?.badge ?? accentColor;
+  const secondaryColor = (layout?.preview as any)?.secondary ?? ADMIN_COLORS.text;
+  const badgeColor = (layout?.preview as any)?.badge ?? accentColor;
 
   const rotatePoint = (cx: number, cy: number, x: number, y: number, angleDeg: number) => {
     const rad = (angleDeg * Math.PI) / 180;
@@ -862,15 +862,18 @@ function TextStep({
   textFields,
   onChange,
   onSave,
+  onBulkAdd,
   saving,
 }: {
   onBack: () => void;
   textFields: { headline: string; subtitle: string; description: string; instructions: string[] };
   onChange: (fields: { headline: string; subtitle: string; description: string; instructions: string[] }) => void;
   onSave: () => void;
+  onBulkAdd?: () => void;
   saving: boolean;
 }) {
   const { t } = useTranslation('management');
+  const { textStrong, border, surface, muted } = useAdminTheme();
 
   const updateField = (key: 'headline' | 'subtitle' | 'description', value: string) => {
     onChange({ ...textFields, [key]: value });
@@ -941,7 +944,7 @@ function TextStep({
               onChangeText={(val) => updateInstruction(idx, val)}
               placeholder={t('events.qr.instructionsPlaceholder', 'Schritt hinzufügen')}
               numberOfLines={2}
-              flex={1}
+              {...({ flex: 1 } as any)}
               size="$4"
             />
             <Pressable onPress={() => removeInstruction(idx)} disabled={textFields.instructions.length === 1}>
@@ -1096,7 +1099,8 @@ function PreviewStep({
 
   const aspectRatio = `${canvasBase.width}/${canvasBase.height}`;
   const paper = resolvePaper(layout);
-  const isLandscape = ((layout?.orientation ?? (isFoldable ? 'landscape' : 'portrait')) || '').toLowerCase() === 'landscape';
+  const orientation = ((layout?.orientation ?? (isFoldable ? 'landscape' : 'portrait')) || '').toString().toLowerCase();
+  const isLandscape = orientation === 'landscape';
   const orientationLabel = isLandscape
     ? t('events.qr.orientation.landscape', 'Landscape')
     : t('events.qr.orientation.portrait', 'Portrait');
@@ -1157,14 +1161,14 @@ function PreviewStep({
             try {
               await loadFonts();
               const pdfBytes = await generatePdfBytes(exportOptions, paper, orientation);
-              const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+              const blob = new Blob([pdfBytes as any], { type: 'application/pdf' });
               triggerDownloadFromBlob(blob, 'qr-layout.pdf');
             } catch (err) {
               toast.error(t('events.qr.exportFailed', 'Export fehlgeschlagen'));
               console.error(err);
             }
           }}
-          style={{ flex: 1, minWidth: 0 }}
+          style={{ flex: 1, minWidth: 0 } as any}
         />
         <CTAButton
           label={t('events.qr.exportPng', 'Export PNG')}
@@ -1178,7 +1182,7 @@ function PreviewStep({
               console.error(err);
             }
           }}
-          style={{ flex: 1, minWidth: 0 }}
+          style={{ flex: 1, minWidth: 0 } as any}
         />
       </XStack>
     </YStack>
@@ -1315,7 +1319,7 @@ function LayoutControls({
 
     return (
       <Accordion.Item value={slotKey} key={slotKey}>
-        <Accordion.Trigger padding="$2" borderWidth={1} borderColor={border} borderRadius={12} backgroundColor={surfaceMuted}>
+        <Accordion.Trigger {...({ padding: "$2", borderWidth: 1, borderColor: border, borderRadius: 12, backgroundColor: surfaceMuted } as any)}>
           <XStack justifyContent="space-between" alignItems="center" flex={1}>
             <Text fontSize="$sm" fontWeight="700" color={textStrong}>
               {label}
@@ -1323,7 +1327,7 @@ function LayoutControls({
             <ChevronDown size={16} color={muted} />
           </XStack>
         </Accordion.Trigger>
-        <Accordion.Content paddingTop="$2">
+        <Accordion.Content {...({ paddingTop: "$2" } as any)}>
           <YStack space="$2" padding="$2" borderWidth={1} borderColor={border} borderRadius={12}>
             <XStack space="$3">
               <YStack flex={1} space="$1">
@@ -1546,7 +1550,7 @@ function LayoutControls({
 
         {qrSlot ? (
           <Accordion.Item value="qr">
-            <Accordion.Trigger padding="$2" borderWidth={1} borderColor={border} borderRadius={12} backgroundColor={surfaceMuted}>
+            <Accordion.Trigger {...({ padding: "$2", borderWidth: 1, borderColor: border, borderRadius: 12, backgroundColor: surfaceMuted } as any)}>
               <XStack justifyContent="space-between" alignItems="center" flex={1}>
                 <Text fontSize="$sm" fontWeight="700" color={textStrong}>
                   {t('events.qr.qr_code_label', 'QR‑Code')}
@@ -1554,7 +1558,7 @@ function LayoutControls({
                 <ChevronDown size={16} color={muted} />
               </XStack>
             </Accordion.Trigger>
-            <Accordion.Content paddingTop="$2">
+            <Accordion.Content {...({ paddingTop: "$2" } as any)}>
               <YStack space="$2" padding="$2" borderWidth={1} borderColor={border} borderRadius={12}>
                 <XStack space="$2">
                   <YStack flex={1} space="$1">

resources/js/admin/mobile/QrPrintPage.tsx

@@ -544,6 +544,7 @@ function PreviewStep({
   presets,
   textFields,
   qrUrl,
+  qrImage,
   onExport,
 }: {
   onBack: () => void;
@@ -552,6 +553,7 @@ function PreviewStep({
   presets: { id: string; src: string; label: string }[];
   textFields: { headline: string; subtitle: string; description: string; instructions: string[] };
   qrUrl: string;
+  qrImage: string;
   onExport: (format: 'pdf' | 'png') => void;
 }) {
   const { t } = useTranslation('management');

resources/js/admin/mobile/SettingsPage.tsx

@@ -241,8 +241,8 @@ export default function MobileSettingsPage() {
             {t('mobileSettings.notificationsLoading', 'Loading settings ...')}
           </Text>
         ) : (
-          <YGroup borderRadius="$4" borderWidth={1} borderColor={border} overflow="hidden">
-            <YGroup.Item bordered>
+          <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: border, overflow: "hidden" } as any)}>
+            <YGroup.Item>
               <ListItem
                 hoverTheme
                 pressTheme
@@ -280,7 +280,7 @@ export default function MobileSettingsPage() {
               />
             </YGroup.Item>
             {AVAILABLE_PREFS.map((key, index) => (
-              <YGroup.Item key={key} bordered={index < AVAILABLE_PREFS.length - 1}>
+              <YGroup.Item key={key}>
                 <ListItem
                   hoverTheme
                   pressTheme

resources/js/admin/mobile/__tests__/EventFormPage.test.tsx

@@ -19,6 +19,7 @@ vi.mock('../../api', () => ({
   getEvent: vi.fn(),
   updateEvent: vi.fn(),
   getEventTypes: vi.fn().mockResolvedValue([]),
+  getPackages: vi.fn().mockResolvedValue([]),
   trackOnboarding: vi.fn(),
 }));
 
@@ -81,6 +82,10 @@ vi.mock('../theme', () => ({
   }),
 }));
 
+vi.mock('../../auth/context', () => ({
+  useAuth: () => ({ user: { role: 'tenant_admin' } }),
+}));
+
 import { getEventTypes } from '../../api';
 import MobileEventFormPage from '../EventFormPage';
 

resources/js/admin/mobile/__tests__/LimitWarnings.test.tsx

@@ -71,7 +71,7 @@ describe('LimitWarnings', () => {
         used: 100,
         remaining: 0,
         percentage: 100,
-        state: 'limit_reached',
+        state: 'limit_reached' as const,
         threshold_reached: null,
         next_threshold: null,
         thresholds: [],

resources/js/admin/mobile/__tests__/qrLayoutUtils.test.ts

@@ -39,9 +39,9 @@ describe('buildInitialTextFields', () => {
 });
 
 describe('resolveLayoutForFormat', () => {
-  const layouts: EventQrInviteLayout[] = [
-    { id: 'portrait-a4', paper: 'a4', orientation: 'portrait', panel_mode: 'single', format_hint: 'poster-a4' } as EventQrInviteLayout,
-    { id: 'foldable', paper: 'a4', orientation: 'landscape', panel_mode: 'double-mirror', format_hint: 'foldable-a5' } as EventQrInviteLayout,
+  const layouts = [
+    { id: 'portrait-a4', paper: 'a4', orientation: 'portrait', panel_mode: 'single', format_hint: 'poster-a4' } as any as EventQrInviteLayout,
+    { id: 'foldable', paper: 'a4', orientation: 'landscape', panel_mode: 'double-mirror', format_hint: 'foldable-a5' } as any as EventQrInviteLayout,
   ];
 
   it('returns portrait layout for A4 poster', () => {

resources/js/admin/mobile/billingUsage.ts

@@ -96,10 +96,10 @@ export const buildPackageUsageMetrics = (pkg: TenantPackageSummary): PackageUsag
   const resolvedGalleryUsed = normalizeCount(galleryUsed);
 
   return [
-    { key: 'events', limit: eventLimit, used: eventUsed, remaining: resolvedEventRemaining },
-    { key: 'guests', limit: guestLimit, used: guestUsed, remaining: resolvedGuestRemaining },
-    { key: 'photos', limit: photoLimit, used: photoUsed, remaining: resolvedPhotoRemaining },
-    { key: 'gallery', limit: galleryLimit, used: resolvedGalleryUsed, remaining: resolvedGalleryRemaining },
+    { key: 'events' as const, limit: eventLimit, used: eventUsed, remaining: resolvedEventRemaining },
+    { key: 'guests' as const, limit: guestLimit, used: guestUsed, remaining: resolvedGuestRemaining },
+    { key: 'photos' as const, limit: photoLimit, used: photoUsed, remaining: resolvedPhotoRemaining },
+    { key: 'gallery' as const, limit: galleryLimit, used: resolvedGalleryUsed, remaining: resolvedGalleryRemaining },
   ].filter((metric) => metric.limit !== null);
 };
 

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

@@ -1,11 +1,13 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { Home, CheckSquare, Image as ImageIcon, User } from 'lucide-react';
+import { Home, CheckSquare, Image as ImageIcon, User, LayoutDashboard } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { withAlpha } from './colors';
 import { useAdminTheme } from '../theme';
+import { adminPath } from '../../constants';
 
 const ICON_SIZE = 20;
 
@@ -13,12 +15,16 @@ export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';
 
 export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
   const { t } = useTranslation('mobile');
+  const location = useLocation();
   const { surface, border, primary, accentSoft, muted, subtle, shadow } = useAdminTheme();
   const surfaceColor = surface;
   const navSurface = withAlpha(surfaceColor, 0.92);
   const [pressedKey, setPressedKey] = React.useState<NavKey | null>(null);
+
+  const isDeepHome = active === 'home' && location.pathname !== adminPath('/mobile/dashboard');
+
   const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
-    { key: 'home', icon: Home, label: t('nav.home', 'Home') },
+    { key: 'home', icon: isDeepHome ? LayoutDashboard : Home, label: t('nav.home', 'Home') },
     { key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
     { key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
     { key: 'profile', icon: User, label: t('nav.profile', 'Profile') },

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

@@ -58,7 +58,7 @@ export const MobileInput = React.forwardRef<HTMLInputElement, React.ComponentPro
       <Input
         ref={ref as React.Ref<any>}
         {...props}
-        type={type}
+        {...({ type } as any)}
         secureTextEntry={isPassword}
         onChangeText={(value) => {
           onChange?.({ target: { value } } as React.ChangeEvent<HTMLInputElement>);
@@ -75,11 +75,11 @@ export const MobileInput = React.forwardRef<HTMLInputElement, React.ComponentPro
         focusStyle={{
           borderColor: hasError ? danger : primary,
           boxShadow: `0 0 0 3px ${ringColor}`,
-        }}
+        } as any}
         hoverStyle={{
           borderColor,
-        }}
-        style={style}
+        } as any}
+        style={style as any}
       />
     );
   },
@@ -97,11 +97,11 @@ export const MobileTextArea = React.forwardRef<
     <TextArea
       ref={ref as React.Ref<any>}
       {...props}
+      {...({ minHeight: compact ? 72 : 96 } as any)}
       onChangeText={(value) => {
         onChange?.({ target: { value } } as React.ChangeEvent<HTMLTextAreaElement>);
       }}
       size={compact ? '$3' : '$4'}
-      minHeight={compact ? 72 : 96}
       borderRadius={12}
       padding="$3"
       width="100%"
@@ -112,11 +112,11 @@ export const MobileTextArea = React.forwardRef<
       focusStyle={{
         borderColor: hasError ? danger : primary,
         boxShadow: `0 0 0 3px ${ringColor}`,
-      }}
+      } as any}
       hoverStyle={{
         borderColor,
-      }}
-      style={{ resize: 'vertical', ...style }}
+      } as any}
+      style={{ resize: 'vertical', ...style } as any}
     />
   );
 });
@@ -173,36 +173,36 @@ export function MobileSelect({
           width="100%"
           borderRadius={12}
           borderWidth={1}
-          borderColor={borderColor}
-          backgroundColor={surface}
+          borderColor={borderColor as any}
+          backgroundColor={surface as any}
           paddingVertical={compact ? 6 : 10}
           paddingHorizontal="$3"
           disabled={props.disabled}
-          onFocus={props.onFocus}
-          onBlur={props.onBlur}
+          onFocus={props.onFocus as any}
+          onBlur={props.onBlur as any}
           iconAfter={<ChevronDown size={16} color={subtle} />}
           focusStyle={{
-            borderColor: hasError ? danger : primary,
+            borderColor: (hasError ? danger : primary) as any,
             boxShadow: `0 0 0 3px ${ringColor}`,
           }}
           hoverStyle={{
-            borderColor,
+            borderColor: borderColor as any,
           }}
-          style={style}
+          style={style as any}
         >
-          <Select.Value placeholder={props.placeholder ?? emptyOption?.label ?? ''} color={text} />
+          <Select.Value placeholder={props.placeholder ?? (emptyOption?.label as any) ?? ''} {...({ color: text } as any)} />
         </Select.Trigger>
         <Select.Content
           zIndex={200000}
-          borderRadius={14}
+          {...({ borderRadius: 14 } as any)}
           borderWidth={1}
           borderColor={border}
-          backgroundColor={surface}
+          backgroundColor={surface as any}
         >
-          <Select.Viewport padding="$2">
+          <Select.Viewport {...({ padding: "$2" } as any)}>
             <Select.Group>
               {options.map((option, index) => (
-                <Select.Item key={`${option.value}-${index}`} value={option.value} disabled={option.disabled}>
+                <Select.Item index={index} key={`${option.value}-${index}`} value={option.value} disabled={option.disabled}>
                   <Select.ItemText>{option.label}</Select.ItemText>
                 </Select.Item>
               ))}

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

@@ -5,7 +5,7 @@ import { MobileSheet } from './Sheet';
 import { CTAButton } from './Primitives';
 import { useAdminTheme } from '../theme';
 
-type Translator = (key: string, defaultValue?: string) => string;
+type Translator = any;
 
 type LegalConsentSheetProps = {
   open: boolean;
@@ -51,7 +51,7 @@ export function LegalConsentSheet({
     borderRadius: 4,
     appearance: 'auto',
     WebkitAppearance: 'auto',
-  } as const;
+  } as any;
 
   React.useEffect(() => {
     if (open) {

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

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { ChevronDown, ChevronLeft, Bell, QrCode } from 'lucide-react';
+import { 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';
@@ -9,11 +9,10 @@ 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, CTAButton } from './Primitives';
+import { MobileCard, CTAButton } from './Primitives';
 import { useNotificationsBadge } from '../hooks/useNotificationsBadge';
 import { useOnlineStatus } from '../hooks/useOnlineStatus';
-import { formatEventDate, resolveEventDisplayName } from '../../lib/events';
+import { resolveEventDisplayName } from '../../lib/events';
 import { TenantEvent, getEvents } from '../../api';
 import { withAlpha } from './colors';
 import { setTabHistory } from '../lib/tabHistory';
@@ -31,11 +30,11 @@ type MobileShellProps = {
 };
 
 export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) {
-  const { events, activeEvent, hasMultipleEvents, hasEvents, selectEvent } = useEventContext();
-  const { go } = useMobileNav(activeEvent?.slug);
+  const { events, activeEvent, selectEvent } = useEventContext();
+  const { go } = useMobileNav(activeEvent?.slug, activeTab);
   const navigate = useNavigate();
   const location = useLocation();
-  const { t, i18n } = useTranslation('mobile');
+  const { t } = useTranslation('mobile');
   const { count: notificationCount } = useNotificationsBadge();
   const online = useOnlineStatus();
   const { background, surface, border, text, muted, warningBg, warningText, primary, danger, shadow } = useAdminTheme();
@@ -45,16 +44,13 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
   const textColor = text;
   const mutedText = muted;
   const headerSurface = withAlpha(surfaceColor, 0.94);
-  const [pickerOpen, setPickerOpen] = React.useState(false);
   const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
   const [loadingEvents, setLoadingEvents] = React.useState(false);
   const [attemptedFetch, setAttemptedFetch] = React.useState(false);
   const [queuedPhotoCount, setQueuedPhotoCount] = React.useState(0);
+  const [isCompactHeader, setIsCompactHeader] = React.useState(false);
 
-  const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
   const effectiveEvents = events.length ? events : fallbackEvents;
-  const effectiveHasMultiple = hasMultipleEvents || effectiveEvents.length > 1;
-  const effectiveHasEvents = hasEvents || effectiveEvents.length > 0;
   const effectiveActive = activeEvent ?? (effectiveEvents.length === 1 ? effectiveEvents[0] : null);
 
   React.useEffect(() => {
@@ -74,19 +70,17 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
       .finally(() => setLoadingEvents(false));
   }, [events.length, loadingEvents, attemptedFetch, activeEvent, selectEvent]);
 
-  React.useEffect(() => {
-    if (!pickerOpen) return;
-    if (effectiveEvents.length) return;
-    setLoadingEvents(true);
-    getEvents({ force: true })
-      .then((list) => setFallbackEvents(list ?? []))
-      .catch(() => setFallbackEvents([]))
-      .finally(() => setLoadingEvents(false));
-  }, [pickerOpen, effectiveEvents.length]);
-
   React.useEffect(() => {
     const path = `${location.pathname}${location.search}${location.hash}`;
-    setTabHistory(activeTab, path);
+    
+    // Blacklist transient paths from being saved in tab history
+    const isBlacklisted = 
+      location.pathname.includes('/billing/shop') || 
+      location.pathname.includes('/welcome');
+
+    if (!isBlacklisted) {
+      setTabHistory(activeTab, path);
+    }
   }, [activeTab, location.hash, location.pathname, location.search]);
 
   const refreshQueuedActions = React.useCallback(() => {
@@ -106,17 +100,104 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
     };
   }, [refreshQueuedActions]);
 
-  const eventTitle = title ?? (effectiveActive ? resolveEventDisplayName(effectiveActive) : t('header.appName', 'Event Admin'));
-  const subtitleText =
-    subtitle ??
-    (effectiveActive?.event_date
-      ? formatEventDate(effectiveActive.event_date, locale) ?? ''
-      : effectiveHasEvents
-        ? t('header.selectEvent', 'Select an event to continue')
-        : t('header.empty', 'Create your first event to get started'));
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+      return;
+    }
+    const query = window.matchMedia('(max-width: 520px)');
+    const handleChange = (event: MediaQueryListEvent) => {
+      setIsCompactHeader(event.matches);
+    };
+    setIsCompactHeader(query.matches);
+    query.addEventListener?.('change', handleChange);
+    return () => {
+      query.removeEventListener?.('change', handleChange);
+    };
+  }, []);
 
-  const showEventSwitcher = effectiveHasMultiple;
+  const pageTitle = title ?? t('header.appName', 'Event Admin');
+  const eventContext = !isCompactHeader && effectiveActive ? resolveEventDisplayName(effectiveActive) : null;
+  const subtitleText = subtitle ?? eventContext ?? '';
   const showQr = Boolean(effectiveActive?.slug);
+  const headerBackButton = onBack ? (
+    <HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
+      <XStack alignItems="center" space="$1.5">
+        <ChevronLeft size={28} color={primary} strokeWidth={2.5} />
+      </XStack>
+    </HeaderActionButton>
+  ) : (
+    <XStack width={28} />
+  );
+  const headerTitle = (
+    <XStack alignItems="center" space="$1" flex={1} minWidth={0} justifyContent="flex-end">
+      <YStack alignItems="flex-end" maxWidth="100%">
+        <Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}>
+          {pageTitle}
+        </Text>
+        {subtitleText ? (
+          <Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body">
+            {subtitleText}
+          </Text>
+        ) : null}
+      </YStack>
+    </XStack>
+  );
+  const headerActionsRow = (
+    <XStack alignItems="center" space="$2">
+      <HeaderActionButton
+        onPress={() => navigate(adminPath('/mobile/notifications'))}
+        ariaLabel={t('mobile.notifications', 'Notifications')}
+      >
+        <XStack
+          width={34}
+          height={34}
+          borderRadius={12}
+          backgroundColor={surfaceColor}
+          alignItems="center"
+          justifyContent="center"
+          position="relative"
+        >
+          <Bell size={16} color={textColor} />
+          {notificationCount > 0 ? (
+            <YStack
+              position="absolute"
+              top={-4}
+              right={-4}
+              minWidth={18}
+              height={18}
+              paddingHorizontal={6}
+              borderRadius={999}
+              backgroundColor={danger}
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text fontSize={10} color="white" fontWeight="700">
+                {notificationCount > 9 ? '9+' : notificationCount}
+              </Text>
+            </YStack>
+          ) : null}
+        </XStack>
+      </HeaderActionButton>
+      {showQr ? (
+        <HeaderActionButton
+          onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
+          ariaLabel={t('header.quickQr', 'Quick QR')}
+        >
+          <XStack
+            width={34}
+            height={34}
+            borderRadius={12}
+            backgroundColor={primary}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <QrCode size={16} color="white" />
+          </XStack>
+        </HeaderActionButton>
+      ) : null}
+      {headerActions ?? null}
+    </XStack>
+  );
 
   return (
     <YStack backgroundColor={backgroundColor} minHeight="100vh" alignItems="center">
@@ -142,96 +223,27 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
           WebkitBackdropFilter: 'blur(12px)',
         }}
       >
-        <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
-          {onBack ? (
-            <HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
-              <XStack alignItems="center" space="$1.5">
-                <ChevronLeft size={28} color={primary} strokeWidth={2.5} />
+        {isCompactHeader ? (
+          <YStack space="$2">
+            <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
+              {headerBackButton}
+              <XStack flex={1} minWidth={0} justifyContent="flex-end">
+                {headerTitle}
               </XStack>
-            </HeaderActionButton>
-          ) : (
-            <XStack width={28} />
-          )}
-
-          <XStack alignItems="center" space="$2.5" flex={1} justifyContent="flex-end">
-            <XStack alignItems="center" space="$1" maxWidth="55%">
-              <Pressable
-                disabled={!showEventSwitcher}
-                onPress={() => setPickerOpen(true)}
-                style={{ alignItems: 'flex-end' }}
-              >
-                <Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}>
-                  {eventTitle}
-                </Text>
-                {subtitleText ? (
-                  <Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body">
-                    {subtitleText}
-                  </Text>
-                ) : null}
-              </Pressable>
-              {showEventSwitcher ? <ChevronDown size={14} color={textColor} /> : null}
             </XStack>
-
-            <XStack alignItems="center" space="$2">
-              <HeaderActionButton
-                onPress={() => navigate(adminPath('/mobile/notifications'))}
-                ariaLabel={t('mobile.notifications', 'Notifications')}
-              >
-                <XStack
-                  width={34}
-                  height={34}
-                  borderRadius={12}
-                  backgroundColor={surfaceColor}
-                  alignItems="center"
-                  justifyContent="center"
-                  position="relative"
-                >
-                  <Bell size={16} color={textColor} />
-                  {notificationCount > 0 ? (
-                    <YStack
-                      position="absolute"
-                      top={-4}
-                      right={-4}
-                      minWidth={18}
-                      height={18}
-                      paddingHorizontal={6}
-                      borderRadius={999}
-                      backgroundColor={danger}
-                      alignItems="center"
-                      justifyContent="center"
-                    >
-                      <Text fontSize={10} color="white" fontWeight="700">
-                        {notificationCount > 9 ? '9+' : notificationCount}
-                      </Text>
-                    </YStack>
-                  ) : null}
-                </XStack>
-              </HeaderActionButton>
-              {showQr ? (
-                <HeaderActionButton
-                  onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
-                  ariaLabel={t('header.quickQr', 'Quick QR')}
-                >
-                  <XStack
-                    height={34}
-                    paddingHorizontal="$3"
-                    borderRadius={12}
-                    backgroundColor={primary}
-                    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>
-                </HeaderActionButton>
-              ) : null}
-              {headerActions ?? null}
+            <XStack alignItems="center" justifyContent="flex-end">
+              {headerActionsRow}
+            </XStack>
+          </YStack>
+        ) : (
+          <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
+            {headerBackButton}
+            <XStack alignItems="center" space="$2.5" flex={1} justifyContent="flex-end" minWidth={0}>
+              {headerTitle}
+              {headerActionsRow}
             </XStack>
           </XStack>
-        </XStack>
+        )}
       </YStack>
 
       <YStack
@@ -282,75 +294,6 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
 
       <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">
-          {effectiveEvents.length === 0 ? (
-            <MobileCard alignItems="flex-start" space="$2">
-              <Text fontSize="$sm" color={textColor} fontWeight="700">
-                {t('header.noEventsTitle', 'Create your first event')}
-              </Text>
-              <Text fontSize="$xs" color={mutedText}>
-                {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={primary} fontWeight="700">
-                    {t('header.createEvent', 'Create event')}
-                  </Text>
-                </XStack>
-              </Pressable>
-            </MobileCard>
-          ) : (
-            effectiveEvents.map((event) => (
-              <Pressable
-                key={event.slug}
-                onPress={() => {
-                  const targetSlug = event.slug ?? null;
-                  selectEvent(targetSlug);
-                  setPickerOpen(false);
-                  if (targetSlug) {
-                    navigate(adminPath(`/mobile/events/${targetSlug}`));
-                  }
-                }}
-              >
-                <XStack alignItems="center" justifyContent="space-between" paddingVertical="$2">
-                  <YStack space="$0.5">
-                    <Text fontSize="$sm" fontWeight="700" color={textColor}>
-                      {resolveEventDisplayName(event)}
-                    </Text>
-                    <Text fontSize="$xs" color={mutedText}>
-                      {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={mutedText} textAlign="center">
-                {t('header.clearSelection', 'Clear selection')}
-              </Text>
-            </Pressable>
-          ) : null}
-        </YStack>
-      </MobileSheet>
     </YStack>
   );
 }

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

@@ -85,6 +85,9 @@ export function CTAButton({
   fullWidth = true,
   disabled = false,
   loading = false,
+  style,
+  iconLeft,
+  iconRight,
 }: {
   label: string;
   onPress: () => void;
@@ -92,6 +95,9 @@ export function CTAButton({
   fullWidth?: boolean;
   disabled?: boolean;
   loading?: boolean;
+  style?: any;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
 }) {
   const { primary, surface, border, text, danger } = useAdminTheme();
   const isPrimary = tone === 'primary';
@@ -108,6 +114,7 @@ export function CTAButton({
         width: fullWidth ? '100%' : undefined,
         flex: fullWidth ? undefined : 1,
         opacity: isDisabled ? 0.6 : 1,
+        ...style,
       }}
     >
       <XStack
@@ -118,10 +125,13 @@ export function CTAButton({
         backgroundColor={backgroundColor}
         borderWidth={isPrimary || isDanger ? 0 : 1}
         borderColor={borderColor}
+        space="$2"
       >
+        {iconLeft}
         <Text fontSize="$sm" fontWeight="800" color={labelColor}>
           {label}
         </Text>
+        {iconRight}
       </XStack>
     </Pressable>
   );

resources/js/admin/mobile/components/Sheet.test.tsx

@@ -50,7 +50,7 @@ describe('MobileSheet', () => {
     const onClose = vi.fn();
 
     render(
-      <MobileSheet open title="Test Sheet" onClose={onClose}>
+      <MobileSheet open title="Test Sheet" onClose={onClose} snapPoints={[94]} contentSpacing="$2" padding="$3" paddingBottom="$6">
         <div>Body</div>
       </MobileSheet>,
     );

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

@@ -12,11 +12,26 @@ type SheetProps = {
   onClose: () => void;
   children: React.ReactNode;
   footer?: React.ReactNode;
+  snapPoints?: number[];
+  contentSpacing?: string;
+  padding?: string;
+  paddingBottom?: string;
   /** Optional bottom offset so content sits above the bottom nav/safe-area. */
   bottomOffsetPx?: number;
 };
 
-export function MobileSheet({ open, title, onClose, children, footer, bottomOffsetPx = 88 }: SheetProps) {
+export function MobileSheet({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  snapPoints = [82],
+  contentSpacing = '$3',
+  padding = '$4',
+  paddingBottom = '$7',
+  bottomOffsetPx = 88,
+}: SheetProps) {
   const { t } = useTranslation('mobile');
   const { surface, textStrong, muted, overlay, shadow, border } = useAdminTheme();
   const bottomOffset = `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)`;
@@ -28,39 +43,41 @@ export function MobileSheet({ open, title, onClose, children, footer, bottomOffs
     <Sheet
       modal
       open={open}
-      onOpenChange={(next) => {
+      onOpenChange={(next: boolean) => {
         if (!next) {
           onClose();
         }
       }}
-      snapPoints={[82]}
+      snapPoints={snapPoints}
       snapPointsMode="percent"
       dismissOnOverlayPress
       dismissOnSnapToBottom
       zIndex={100000}
     >
-      <Sheet.Overlay backgroundColor={`${overlay}66`} />
+      <Sheet.Overlay {...({ backgroundColor: `${overlay}66` } as any)} />
       <Sheet.Frame
-        width="100%"
-        maxWidth={520}
-        alignSelf="center"
-        borderTopLeftRadius={24}
-        borderTopRightRadius={24}
-        backgroundColor={surface}
-        padding="$4"
-        paddingBottom="$7"
-        shadowColor={shadow}
-        shadowOpacity={0.12}
-        shadowRadius={18}
-        shadowOffset={{ width: 0, height: -8 }}
+        {...({
+          width: '100%',
+          maxWidth: 520,
+          alignSelf: 'center',
+          borderTopLeftRadius: 24,
+          borderTopRightRadius: 24,
+          backgroundColor: surface,
+          padding,
+          paddingBottom,
+          shadowColor: shadow,
+          shadowOpacity: 0.12,
+          shadowRadius: 18,
+          shadowOffset: { width: 0, height: -8 },
+        } as any)}
         style={{ marginBottom: bottomOffset }}
       >
         <Sheet.Handle height={5} width={48} backgroundColor={border} borderRadius={999} marginBottom="$3" />
         <Sheet.ScrollView
           showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ paddingBottom: 6 }}
+          {...({ contentContainerStyle: { paddingBottom: 6 } } as any)}
         >
-          <YStack space="$3">
+          <YStack space={contentSpacing}>
             <XStack alignItems="center" justifyContent="space-between">
               <Text fontSize="$md" fontWeight="800" color={textStrong}>
                 {title}

resources/js/admin/mobile/components/__tests__/LegalConsentSheet.test.tsx

@@ -38,10 +38,10 @@ describe('LegalConsentSheet', () => {
   it('renders the required consent checkboxes when open', () => {
     const { getAllByRole } = render(
       <LegalConsentSheet
-        open
+        open={true}
         onClose={vi.fn()}
         onConfirm={vi.fn()}
-        t={(key, fallback) => fallback ?? key}
+        t={(key: string, fallback?: string) => fallback ?? key}
       />
     );
 

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

@@ -1,20 +1,28 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useEventContext } from '../../context/EventContext';
 import { NavKey } from '../components/BottomNav';
-import { resolveTabTarget } from '../lib/tabHistory';
+import { resolveTabTarget, resolveDefaultTarget } from '../lib/tabHistory';
+import { adminPath } from '../../constants';
 
-export function useMobileNav(currentSlug?: string | null) {
+export function useMobileNav(currentSlug?: string | null, activeTab?: NavKey) {
   const navigate = useNavigate();
+  const location = useLocation();
   const { activeEvent } = useEventContext();
   const slug = currentSlug ?? activeEvent?.slug ?? null;
 
   const go = React.useCallback(
     (key: NavKey) => {
+      // Tap-to-reset: If the user taps the tab they are already on, reset to root.
+      if (key === activeTab) {
+        navigate(resolveDefaultTarget(key, slug));
+        return;
+      }
+
       const target = resolveTabTarget(key, slug);
       navigate(target);
     },
-    [navigate, slug]
+    [navigate, activeTab, slug]
   );
 
   return { go, slug };

resources/js/admin/mobile/lib/eventFilters.test.ts

@@ -15,6 +15,8 @@ const baseEvent = (overrides: Partial<TenantEvent>): TenantEvent => ({
   photo_count: overrides.photo_count ?? 0,
   likes_sum: overrides.likes_sum ?? 0,
   engagement_mode: overrides.engagement_mode ?? 'tasks',
+  event_type_id: overrides.event_type_id ?? null,
+  event_type: overrides.event_type ?? null,
 });
 
 describe('resolveEventStatusKey', () => {

resources/js/admin/mobile/lib/eventListStats.test.ts

@@ -15,6 +15,8 @@ const baseEvent = (overrides: Partial<TenantEvent>): TenantEvent => ({
   photo_count: overrides.photo_count ?? 0,
   likes_sum: overrides.likes_sum ?? 0,
   engagement_mode: overrides.engagement_mode ?? 'tasks',
+  event_type_id: overrides.event_type_id ?? null,
+  event_type: overrides.event_type ?? null,
 });
 
 describe('buildEventListStats', () => {

resources/js/admin/mobile/lib/onboardingGuard.ts

@@ -34,7 +34,7 @@ export function resolveOnboardingRedirect({
     return null;
   }
 
-  if (!hasEvents && (!hasActivePackage || (remainingEvents !== null && remainingEvents <= 0))) {
+  if (!hasEvents && (!hasActivePackage || (remainingEvents !== undefined && remainingEvents !== null && remainingEvents <= 0))) {
     return ADMIN_BILLING_PATH;
   }
 

resources/js/admin/mobile/lib/packageSummary.ts

@@ -1,6 +1,6 @@
 import type { TenantPackageSummary } from '../../api';
 
-type Translate = (key: string, options?: Record<string, unknown> | string) => string;
+type Translate = any;
 
 type LimitUsageOverrides = {
   remainingEvents?: number | null;

resources/js/admin/mobile/lib/tabHistory.ts

@@ -1,24 +1,35 @@
 import { adminPath } from '../../constants';
 import type { NavKey } from '../components/BottomNav';
 
-const STORAGE_KEY = 'admin-mobile-tab-history-v1';
+const STORAGE_KEY = 'admin-mobile-tab-history-v2';
+const EXPIRY_MS = 1000 * 60 * 60 * 2; // 2 hours
 
-type TabHistory = Partial<Record<NavKey, string>>;
+type TabHistory = {
+  paths: Partial<Record<NavKey, string>>;
+  updatedAt: number;
+};
 
 function readHistory(): TabHistory {
   if (typeof window === 'undefined') {
-    return {};
+    return { paths: {}, updatedAt: 0 };
   }
 
   try {
     const raw = window.localStorage.getItem(STORAGE_KEY);
     if (!raw) {
-      return {};
+      return { paths: {}, updatedAt: 0 };
     }
     const parsed = JSON.parse(raw) as TabHistory;
-    return parsed ?? {};
+    
+    // Check for expiry
+    if (Date.now() - parsed.updatedAt > EXPIRY_MS) {
+      window.localStorage.removeItem(STORAGE_KEY);
+      return { paths: {}, updatedAt: 0 };
+    }
+
+    return parsed ?? { paths: {}, updatedAt: 0 };
   } catch {
-    return {};
+    return { paths: {}, updatedAt: 0 };
   }
 }
 
@@ -36,15 +47,16 @@ function writeHistory(history: TabHistory): void {
 
 export function setTabHistory(key: NavKey, path: string): void {
   const history = readHistory();
-  history[key] = path;
+  history.paths[key] = path;
+  history.updatedAt = Date.now();
   writeHistory(history);
 }
 
-export function getTabHistory(): TabHistory {
-  return readHistory();
+export function getTabHistory(): Partial<Record<NavKey, string>> {
+  return readHistory().paths;
 }
 
-function resolveDefaultTarget(key: NavKey, slug?: string | null): string {
+export function resolveDefaultTarget(key: NavKey, slug?: string | null): string {
   if (key === 'tasks') {
     return slug ? adminPath(`/mobile/events/${slug}/tasks`) : adminPath('/mobile/tasks');
   }
@@ -81,7 +93,7 @@ function resolveEventScopedTarget(path: string, slug: string | null | undefined,
 
 export function resolveTabTarget(key: NavKey, slug?: string | null): string {
   const history = readHistory();
-  const stored = history[key];
+  const stored = history.paths[key];
   const fallback = resolveDefaultTarget(key, slug);
 
   if (!stored) {

resources/js/admin/mobile/prefetch.ts

@@ -3,16 +3,15 @@ export function prefetchMobileRoutes() {
 
   const schedule = (callback: () => void) => {
     if ('requestIdleCallback' in window) {
-      (window as Window & { requestIdleCallback: (cb: () => void) => number }).requestIdleCallback(callback);
+      (window as any).requestIdleCallback(callback);
       return;
     }
-    window.setTimeout(callback, 1200);
+    (window as any).setTimeout(callback, 1200);
   };
 
   schedule(() => {
     void import('./DashboardPage');
     void import('./EventsPage');
-    void import('./EventDetailPage');
     void import('./EventPhotosPage');
     void import('./EventTasksPage');
     void import('./NotificationsPage');

resources/js/admin/mobile/theme.ts

@@ -30,6 +30,7 @@ export const ADMIN_ACTION_COLORS = {
   recap: ADMIN_COLORS.warning,
   packages: ADMIN_COLORS.primary,
   analytics: '#8b5cf6',
+  settings: ADMIN_COLORS.success,
 };
 
 export const ADMIN_GRADIENTS = {

resources/js/admin/mobile/welcome/WelcomePackagesPage.tsx

@@ -136,9 +136,9 @@ function PackageCard({
   const { t } = useTranslation('onboarding');
   const { primary, border, accentSoft, muted } = useAdminTheme();
   const badges = [
-    t('packages.card.badges.photos', { count: pkg.max_photos ?? t('summary.details.infinity', '∞') }),
-    t('packages.card.badges.guests', { count: pkg.max_guests ?? t('summary.details.infinity', '∞') }),
-    t('packages.card.badges.days', { count: pkg.gallery_days ?? t('summary.details.infinity', '∞') }),
+    t('packages.card.badges.photos', { count: pkg.max_photos ?? 0, defaultValue: 'Unlimited photos' } as any),
+    t('packages.card.badges.guests', { count: pkg.max_guests ?? 0, defaultValue: 'Unlimited guests' } as any),
+    t('packages.card.badges.days', { count: pkg.gallery_days ?? 0, defaultValue: 'Unlimited days' } as any),
   ];
 
   return (
@@ -164,8 +164,8 @@ function PackageCard({
         </XStack>
         <XStack flexWrap="wrap" space="$2">
           {badges.map((badge) => (
-            <PillBadge key={badge} tone="muted">
-              {badge}
+            <PillBadge key={badge as any} tone="muted">
+              {badge as any}
             </PillBadge>
           ))}
         </XStack>

resources/js/admin/mobile/welcome/WelcomeSummaryPage.tsx

@@ -127,15 +127,17 @@ export default function WelcomeSummaryPage() {
             <SummaryRow
               label={t('summary.details.section.photosTitle', 'Photos & gallery')}
               value={t('summary.details.section.photosValue', {
-                count: resolvedPackage.max_photos ?? t('summary.details.infinity', '∞'),
-                days: resolvedPackage.gallery_days ?? t('summary.details.infinity', '∞'),
-              })}
+                count: resolvedPackage.max_photos ?? 0,
+                days: resolvedPackage.gallery_days ?? 0,
+                defaultValue: 'Unlimited photos for {{days}} days',
+              } as any) as string}
             />
             <SummaryRow
               label={t('summary.details.section.guestsTitle', 'Guests & team')}
               value={t('summary.details.section.guestsValue', {
-                count: resolvedPackage.max_guests ?? t('summary.details.infinity', '∞'),
-              })}
+                count: resolvedPackage.max_guests ?? 0,
+                defaultValue: 'Unlimited guests',
+              } as any) as string}
             />
             {resolvedPackage.remaining_events !== undefined && resolvedPackage.remaining_events !== null ? (
               <SummaryRow

resources/js/admin/router.tsx

@@ -20,7 +20,6 @@ const AuthCallbackPage = React.lazy(() => import('./mobile/AuthCallbackPage'));
 const LoginStartPage = React.lazy(() => import('./mobile/LoginStartPage'));
 const LogoutPage = React.lazy(() => import('./mobile/LogoutPage'));
 const MobileEventsPage = React.lazy(() => import('./mobile/EventsPage'));
-const MobileEventDetailPage = React.lazy(() => import('./mobile/EventDetailPage'));
 const MobileEventPhotoboothPage = React.lazy(() => import('./mobile/EventPhotoboothPage'));
 const MobileBrandingPage = React.lazy(() => import('./mobile/BrandingPage'));
 const MobileEventFormPage = React.lazy(() => import('./mobile/EventFormPage'));
@@ -195,7 +194,7 @@ export const router = createBrowserRouter([
           { path: 'events/:slug/guest-notifications', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/guest-notifications`} /> },
           { path: 'events/:slug/toolkit', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}`} /> },
           { path: 'mobile/events', element: <MobileEventsPage /> },
-          { path: 'mobile/events/:slug', element: <MobileEventDetailPage /> },
+          { path: 'mobile/events/:slug', element: <MobileDashboardPage /> },
           { path: 'mobile/events/:slug/branding', element: <RequireAdminAccess><MobileBrandingPage /></RequireAdminAccess> },
           { path: 'mobile/events/new', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> },
           { path: 'mobile/events/:slug/edit', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> },

resources/js/app.tsx

@@ -22,6 +22,12 @@ const InertiaFallback: React.FC = () => (
     </div>
 );
 
+const LoadingFallback: React.FC = () => (
+    <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
+        Lade...
+    </div>
+);
+
 initSentry('inertia');
 
 const LocaleSync: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -75,11 +81,13 @@ createInertiaApp({
                 <AppearanceProvider>
                     <ConsentProvider>
                         <I18nextProvider i18n={i18n}>
-                            <LocaleSync>
-                                <App {...props} />
-                            </LocaleSync>
-                            <CookieBanner />
-                            <Toaster position="top-right" toastOptions={{ duration: 4000 }} />
+                            <React.Suspense fallback={<LoadingFallback />}>
+                                <LocaleSync>
+                                    <App {...props} />
+                                </LocaleSync>
+                                <CookieBanner />
+                                <Toaster position="top-right" toastOptions={{ duration: 4000 }} />
+                            </React.Suspense>
                         </I18nextProvider>
                     </ConsentProvider>
                 </AppearanceProvider>

resources/js/guest/components/Header.tsx

@@ -509,7 +509,7 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
             t={t}
           />
         </div>,
-        typeof document !== 'undefined' ? document.body : undefined
+        (typeof document !== 'undefined' ? document.body : null) as any
       )}
     </div>
   );

resources/js/guest/components/RouteTransition.tsx

@@ -90,7 +90,7 @@ export default function RouteTransition({ children }: { children?: React.ReactNo
         initial="enter"
         animate="center"
         exit="exit"
-        transition={transition}
+        transition={transition as any}
         style={{ willChange: 'transform, opacity' }}
       >
         {content}

resources/js/guest/components/__tests__/HeaderNotificationToggle.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import Header from '../Header';
 
 vi.mock('../settings-sheet', () => ({
@@ -87,7 +88,11 @@ vi.mock('../../i18n/useTranslation', () => ({
 
 describe('Header notifications toggle', () => {
   it('closes the panel when clicking the bell again', () => {
-    render(<Header eventToken="demo" title="Demo" />);
+    render(
+      <MemoryRouter>
+        <Header eventToken="demo" title="Demo" />
+      </MemoryRouter>,
+    );
 
     const bellButton = screen.getByLabelText('Benachrichtigungen anzeigen');
     fireEvent.click(bellButton);

resources/js/guest/guest-sw.ts

@@ -9,7 +9,7 @@ import { registerRoute } from 'workbox-routing';
 import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
 
 declare const self: ServiceWorkerGlobalScope & {
-  __WB_MANIFEST: Array<import('workbox-precaching').ManifestEntry>;
+  __WB_MANIFEST: Array<any>;
 };
 
 clientsClaim();
@@ -97,7 +97,7 @@ self.addEventListener('message', (event) => {
   }
 });
 
-self.addEventListener('sync', (event) => {
+self.addEventListener('sync', (event: any) => {
   if (event.tag === 'upload-queue') {
     event.waitUntil(
       (async () => {

resources/js/guest/pages/__tests__/BadgesGrid.test.tsx

@@ -11,20 +11,20 @@ describe('BadgesGrid', () => {
       <BadgesGrid
         badges={[
           {
-            id: 1,
-            title: 'First Badge',
-            description: 'Earned badge',
+            id: '1',
+            title: 'First Upload',
+            description: 'Uploaded your first photo',
             earned: true,
             progress: 1,
             target: 1,
           },
           {
-            id: 2,
-            title: 'Second Badge',
-            description: 'Pending badge',
+            id: '2',
+            title: 'Social Star',
+            description: 'Received 10 likes',
             earned: false,
-            progress: 0,
-            target: 5,
+            progress: 3,
+            target: 10,
           },
         ]}
         t={t}

resources/js/i18n.ts

@@ -32,7 +32,7 @@ i18n
       loadPath: '/lang/{{lng}}/{{ns}}.json?v=20251222',
     },
     react: {
-      useSuspense: false,
+      useSuspense: true,
     },
   });
 

routes/api.php

@@ -88,7 +88,7 @@ Route::prefix('v1')->name('api.v1.')->group(function () {
         });
     });
 
-    Route::middleware('throttle:100,1')->group(function () {
+    Route::middleware('throttle:guest-api')->group(function () {
         Route::get('/help', [HelpController::class, 'index'])->name('help.index');
         Route::get('/help/{slug}', [HelpController::class, 'show'])->name('help.show');
         Route::get('/legal/{slug}', [LegalController::class, 'show'])->name('legal.show');

tests/Feature/EventControllerTest.php

@@ -11,6 +11,7 @@ use App\Models\TenantPackage;
 use App\Services\EventJoinTokenService;
 use Illuminate\Http\UploadedFile;
 use Illuminate\Support\Carbon;
+use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Storage;
 use Tests\Feature\Tenant\TenantTestCase;
 
@@ -77,6 +78,55 @@ class EventControllerTest extends TenantTestCase
             ->assertJsonPath('error.code', 'event_limit_missing');
     }
 
+    public function test_superadmin_can_create_event_without_tenant_package(): void
+    {
+        $tenant = $this->tenant;
+        $eventType = EventType::factory()->create();
+        $package = Package::factory()->create([
+            'type' => 'endcustomer',
+            'slug' => 'pro',
+            'max_photos' => 100,
+        ]);
+
+        $superadmin = \App\Models\User::factory()->create([
+            'tenant_id' => $tenant->id,
+            'role' => 'superadmin',
+            'password' => Hash::make('password'),
+            'email_verified_at' => now(),
+        ]);
+
+        $login = $this->postJson('/api/v1/tenant-auth/login', [
+            'login' => $superadmin->email,
+            'password' => 'password',
+        ]);
+
+        $login->assertOk();
+        $token = (string) $login->json('token');
+
+        $response = $this->withHeader('Authorization', 'Bearer '.$token)
+            ->postJson('/api/v1/tenant/events', [
+                'name' => 'Owner Event',
+                'slug' => 'owner-event',
+                'event_date' => Carbon::now()->addDays(10)->toDateString(),
+                'event_type_id' => $eventType->id,
+                'package_id' => $package->id,
+            ]);
+
+        $response->assertStatus(201);
+
+        $event = Event::latest()->first();
+
+        $this->assertDatabaseHas('events', [
+            'tenant_id' => $tenant->id,
+            'slug' => 'owner-event',
+        ]);
+
+        $this->assertDatabaseHas('event_packages', [
+            'event_id' => $event->id,
+            'package_id' => $package->id,
+        ]);
+    }
+
     public function test_create_event_requires_waiver_for_endcustomer_package(): void
     {
         $tenant = $this->tenant;

tsconfig.json

@@ -81,6 +81,7 @@
         "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
         // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
         "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+        "types": ["vitest/globals", "@testing-library/jest-dom"],
 
         /* Type Checking */
         "strict": true /* Enable all strict type-checking options. */,
@@ -129,6 +130,7 @@
         "resources/js/guest/**/*.d.ts"
     ],
     "exclude": [
-        "resources/js/actions/**"
+        "resources/js/actions/**",
+        "resources/js/routes/**"
     ]
 }