Compare commits

...

6 Commits

Author SHA1 Message Date
Codex Agent
3de1d3deab Misc unrelated updates
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled
tests / ui (push) Has been cancelled
2026-01-12 10:31:31 +01:00
Codex Agent
e9afbeb028 Unify admin home with event overview 2026-01-12 10:31:05 +01:00
Codex Agent
3e2b63f71f Paddle Coupon Sync prüft nun zuerst, ob der Discount schon existiert. 2026-01-08 13:36:58 +01:00
Codex Agent
cff014ede5 fix(i18n): restore missing translations and enable Suspense loading
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled
tests / ui (push) Has been cancelled
2026-01-07 20:50:09 +01:00
Codex Agent
8c5d3b93d5 feat: improve mobile navigation with tap-to-reset and history filtering
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled
tests / ui (push) Has been cancelled
2026-01-07 15:14:31 +01:00
Codex Agent
22cb7ed7ce fix: resolve typescript and build errors across admin and guest apps
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled
tests / ui (push) Has been cancelled
2026-01-07 13:25:30 +01:00
88 changed files with 3949 additions and 35538 deletions

7
.gitignore vendored
View File

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

File diff suppressed because it is too large Load Diff

1
GEMINI.md Symbolic link
View File

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

View File

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

View File

@@ -45,11 +45,11 @@ class GuestPolicySettingsPage extends Page
public int $join_token_failure_decay_minutes = 5; 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_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; 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->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_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_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_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_download_decay_minutes = (int) ($settings->join_token_download_decay_minutes ?? 1);
$this->join_token_ttl_hours = (int) ($settings->join_token_ttl_hours ?? 168); $this->join_token_ttl_hours = (int) ($settings->join_token_ttl_hours ?? 168);
$this->share_link_ttl_hours = (int) ($settings->share_link_ttl_hours ?? 48); $this->share_link_ttl_hours = (int) ($settings->share_link_ttl_hours ?? 48);

View File

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

View File

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

View File

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

View File

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

View File

@@ -80,7 +80,7 @@ class TenantAdminPasswordResetController extends Controller
private function canAccessEventAdmin(User $user): bool 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; return true;
} }

View File

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

View File

@@ -12,7 +12,7 @@ class TenantAdminAuthController extends Controller
$user = Auth::user(); $user = Auth::user();
// Allow only tenant_admin and super_admin // 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'); return view('admin');
} }

View File

@@ -46,7 +46,7 @@ class TenantAdminGoogleController extends Controller
/** @var User|null $user */ /** @var User|null $user */
$user = User::query()->where('email', $email)->first(); $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.'); return $this->sendBackWithError($request, 'google_no_match', 'No tenant admin account is linked to this Google address.');
} }

View File

@@ -3,6 +3,7 @@
namespace App\Http\Middleware; namespace App\Http\Middleware;
use App\Models\Tenant; use App\Models\Tenant;
use App\Models\User;
use App\Services\Packages\PackageLimitEvaluator; use App\Services\Packages\PackageLimitEvaluator;
use App\Support\ApiError; use App\Support\ApiError;
use Closure; 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); $violation = $this->limitEvaluator->assessEventCreation($tenant);
if ($violation !== null) { if ($violation !== null) {
@@ -43,6 +44,24 @@ class CreditCheckMiddleware
return $next($request); 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 private function requiresCredits(Request $request): bool
{ {
return $request->isMethod('post') return $request->isMethod('post')

View File

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

View File

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

View File

@@ -3,6 +3,7 @@
namespace App\Http\Middleware; namespace App\Http\Middleware;
use App\Models\Tenant; use App\Models\Tenant;
use App\Models\User;
use App\Services\Packages\PackageLimitEvaluator; use App\Services\Packages\PackageLimitEvaluator;
use App\Support\ApiError; use App\Support\ApiError;
use Closure; 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); $violation = $this->detectViolation($request, $tenant);
if ($violation !== null) { if ($violation !== null) {
@@ -43,6 +44,24 @@ class PackageMiddleware
return $next($request); 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 private function requiresPackageCheck(Request $request): bool
{ {
return $request->isMethod('post') && ( return $request->isMethod('post') && (

View File

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

View File

@@ -4,9 +4,9 @@ namespace App\Http\Middleware;
use Closure; use Closure;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Log; use Illuminate\Support\Facades\Log;
use Symfony\Component\HttpFoundation\Response;
class SuperAdminAuth class SuperAdminAuth
{ {
@@ -28,7 +28,7 @@ class SuperAdminAuth
$user = Auth::user(); $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') { if (! $user->isSuperAdmin()) {
abort(403, 'Zugriff nur für SuperAdmin. User ID: '.$user->id.', Role: '.$user->role); abort(403, 'Zugriff nur für SuperAdmin. User ID: '.$user->id.', Role: '.$user->role);
} }

View File

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

View File

@@ -41,9 +41,9 @@ class GuestPolicySetting extends Model
'per_device_upload_limit' => 50, 'per_device_upload_limit' => 50,
'join_token_failure_limit' => (int) config('join_tokens.failure_limit', 10), '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_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_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_download_decay_minutes' => (int) config('join_tokens.download_decay_minutes', 1),
'join_token_ttl_hours' => 168, 'join_token_ttl_hours' => 168,
'share_link_ttl_hours' => (int) config('share-links.ttl_hours', 48), 'share_link_ttl_hours' => (int) config('share-links.ttl_hours', 48),

View File

@@ -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. * Retrieve the user by the given credentials.
*/ */
@@ -127,12 +137,12 @@ class User extends Authenticatable implements FilamentHasTenants, FilamentUser,
public function canAccessPanel(Panel $panel): bool 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 false;
} }
return match ($panel->getId()) { return match ($panel->getId()) {
'superadmin' => $this->role === 'super_admin', 'superadmin' => $this->isSuperAdmin(),
'admin' => $this->role === 'tenant_admin', 'admin' => $this->role === 'tenant_admin',
default => false, default => false,
}; };
@@ -140,7 +150,7 @@ class User extends Authenticatable implements FilamentHasTenants, FilamentUser,
public function canAccessTenant(Model $tenant): bool public function canAccessTenant(Model $tenant): bool
{ {
if ($this->role === 'super_admin') { if ($this->isSuperAdmin()) {
return true; return true;
} }
@@ -155,7 +165,7 @@ class User extends Authenticatable implements FilamentHasTenants, FilamentUser,
public function getTenants(Panel $panel): array|Collection public function getTenants(Panel $panel): array|Collection
{ {
if ($this->role === 'super_admin') { if ($this->isSuperAdmin()) {
return Tenant::query()->orderBy('name')->get(); return Tenant::query()->orderBy('name')->get();
} }

View File

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

View File

@@ -15,7 +15,7 @@ class TenantPolicy
*/ */
public function viewAny(User $user): bool 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 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 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 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 public function suspend(User $user, Tenant $tenant): bool
{ {
return $user->role === 'super_admin'; return $user->isSuperAdmin();
} }
} }

View File

@@ -155,7 +155,11 @@ class AppServiceProvider extends ServiceProvider
$key = $tenantId ? 'tenant:'.$tenantId : ('ip:'.($request->ip() ?? 'unknown')); $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) { RateLimiter::for('tenant-auth', function (Request $request) {

View File

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

View File

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

View File

@@ -17,6 +17,11 @@ class PaddleDiscountService
*/ */
public function createDiscount(Coupon $coupon): array public function createDiscount(Coupon $coupon): array
{ {
$existing = $this->findExistingDiscount($coupon->code);
if ($existing !== null) {
return $existing;
}
$payload = $this->buildDiscountPayload($coupon); $payload = $this->buildDiscountPayload($coupon);
$response = $this->client->post('/discounts', $payload); $response = $this->client->post('/discounts', $payload);
@@ -82,6 +87,35 @@ class PaddleDiscountService
return Arr::get($response, 'data', $response); 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> * @return array<string, mixed>
*/ */

View File

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

View File

@@ -4,9 +4,9 @@ return [
'failure_limit' => (int) env('JOIN_TOKEN_FAILURE_LIMIT', 10), 'failure_limit' => (int) env('JOIN_TOKEN_FAILURE_LIMIT', 10),
'failure_decay_minutes' => (int) env('JOIN_TOKEN_FAILURE_DECAY', 5), '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), '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), 'download_decay_minutes' => (int) env('JOIN_TOKEN_DOWNLOAD_DECAY', 1),
]; ];

View File

@@ -2,9 +2,11 @@
namespace Database\Seeders; namespace Database\Seeders;
use App\Models\Tenant;
use App\Models\User;
use Illuminate\Database\Seeder; use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\Hash; use Illuminate\Support\Facades\Hash;
use App\Models\User; use Illuminate\Support\Str;
class SuperAdminSeeder extends Seeder class SuperAdminSeeder extends Seeder
{ {
@@ -12,12 +14,49 @@ class SuperAdminSeeder extends Seeder
{ {
$email = env('ADMIN_EMAIL', 'admin@example.com'); $email = env('ADMIN_EMAIL', 'admin@example.com');
$password = env('ADMIN_PASSWORD', 'ChangeMe123!'); $password = env('ADMIN_PASSWORD', 'ChangeMe123!');
User::updateOrCreate(['email'=>$email], [ $user = User::updateOrCreate(['email' => $email], [
'first_name' => 'Super', 'first_name' => 'Super',
'last_name' => 'Admin', 'last_name' => 'Admin',
'password' => Hash::make($password), 'password' => Hash::make($password),
'role' => 'super_admin', '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();
}
}
}

File diff suppressed because one or more lines are too long

View File

@@ -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."
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -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."
}
}

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

@@ -8,16 +8,6 @@ import { Pressable } from '@tamagui/react-native-web-lite';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { MobileShell, HeaderActionButton } from './components/MobileShell'; import { MobileShell, HeaderActionButton } from './components/MobileShell';
import { MobileCard, CTAButton, PillBadge } from './components/Primitives'; 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 { import {
createTenantBillingPortalSession, createTenantBillingPortalSession,
getTenantPackagesOverview, getTenantPackagesOverview,
@@ -235,7 +225,6 @@ export default function MobileBillingPage() {
))} ))}
</YStack> </YStack>
)} )}
{null}
</MobileCard> </MobileCard>
<MobileCard space="$2"> <MobileCard space="$2">
@@ -263,7 +252,6 @@ export default function MobileBillingPage() {
))} ))}
</YStack> </YStack>
)} )}
{null}
</MobileCard> </MobileCard>
</MobileShell> </MobileShell>
); );
@@ -548,155 +536,3 @@ function formatDate(value: string | null | undefined): string {
if (Number.isNaN(date.getTime())) return '—'; if (Number.isNaN(date.getTime())) return '—';
return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' }); 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' });
}

View File

@@ -1,12 +1,12 @@
import React from 'react'; 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 { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query'; 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 { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text'; import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite'; 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 { MobileCard, CTAButton, KpiTile, ActionTile, PillBadge, SkeletonCard } from './components/Primitives';
import { MobileSheet } from './components/Sheet'; import { MobileSheet } from './components/Sheet';
import { adminPath, ADMIN_WELCOME_BASE_PATH } from '../constants'; import { adminPath, ADMIN_WELCOME_BASE_PATH } from '../constants';
@@ -21,6 +21,7 @@ import { collectPackageFeatures, formatPackageLimit, getPackageFeatureLabel, get
import { trackOnboarding } from '../api'; import { trackOnboarding } from '../api';
import { useAuth } from '../auth/context'; import { useAuth } from '../auth/context';
import { ADMIN_ACTION_COLORS, ADMIN_MOTION, useAdminTheme } from './theme'; import { ADMIN_ACTION_COLORS, ADMIN_MOTION, useAdminTheme } from './theme';
import { isPastEvent } from './eventDate';
type DeviceSetupProps = { type DeviceSetupProps = {
installPrompt: ReturnType<typeof useInstallPrompt>; installPrompt: ReturnType<typeof useInstallPrompt>;
@@ -32,6 +33,7 @@ type DeviceSetupProps = {
export default function MobileDashboardPage() { export default function MobileDashboardPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const { slug: slugParam } = useParams<{ slug?: string }>();
const { t, i18n } = useTranslation('management'); const { t, i18n } = useTranslation('management');
const { events, activeEvent, hasEvents, hasMultipleEvents, isLoading, selectEvent } = useEventContext(); const { events, activeEvent, hasEvents, hasMultipleEvents, isLoading, selectEvent } = useEventContext();
const { status } = useAuth(); const { status } = useAuth();
@@ -42,11 +44,12 @@ export default function MobileDashboardPage() {
const [tourStep, setTourStep] = React.useState(0); const [tourStep, setTourStep] = React.useState(0);
const [summaryOpen, setSummaryOpen] = React.useState(false); const [summaryOpen, setSummaryOpen] = React.useState(false);
const [summarySeenOverride, setSummarySeenOverride] = React.useState<number | null>(null); const [summarySeenOverride, setSummarySeenOverride] = React.useState<number | null>(null);
const [eventSwitcherOpen, setEventSwitcherOpen] = React.useState(false);
const onboardingTrackedRef = React.useRef(false); const onboardingTrackedRef = React.useRef(false);
const installPrompt = useInstallPrompt(); const installPrompt = useInstallPrompt();
const pushState = useAdminPushSubscription(); const pushState = useAdminPushSubscription();
const devicePermissions = useDevicePermissions(); const devicePermissions = useDevicePermissions();
const { textStrong, muted, border, surface, accentSoft, primary } = useAdminTheme(); const { textStrong, muted, accentSoft, primary } = useAdminTheme();
const text = textStrong; const text = textStrong;
const accentText = primary; const accentText = primary;
@@ -84,6 +87,14 @@ export default function MobileDashboardPage() {
const tourTargetSlug = activeEvent?.slug ?? effectiveEvents[0]?.slug ?? null; const tourTargetSlug = activeEvent?.slug ?? effectiveEvents[0]?.slug ?? null;
const tourStepKeys = React.useMemo(() => resolveTourStepKeys(effectiveHasEvents), [effectiveHasEvents]); const tourStepKeys = React.useMemo(() => resolveTourStepKeys(effectiveHasEvents), [effectiveHasEvents]);
React.useEffect(() => {
if (!slugParam || slugParam === activeEvent?.slug) {
return;
}
selectEvent(slugParam);
}, [activeEvent?.slug, selectEvent, slugParam]);
React.useEffect(() => { React.useEffect(() => {
if (status !== 'authenticated' || onboardingTrackedRef.current) { if (status !== 'authenticated' || onboardingTrackedRef.current) {
return; return;
@@ -424,7 +435,7 @@ export default function MobileDashboardPage() {
onOpen={() => setSummaryOpen(true)} onOpen={() => setSummaryOpen(true)}
/> />
) : null} ) : null}
<EventPickerList events={effectiveEvents} locale={locale} text={text} muted={muted} border={border} /> <EventPickerList events={effectiveEvents} locale={locale} navigateOnSelect={false} />
{tourSheet} {tourSheet}
{packageSummarySheet} {packageSummarySheet}
</MobileShell> </MobileShell>
@@ -434,8 +445,7 @@ export default function MobileDashboardPage() {
return ( return (
<MobileShell <MobileShell
activeTab="home" activeTab="home"
title={resolveEventDisplayName(activeEvent ?? undefined)} title={t('mobileDashboard.title', 'Dashboard')}
subtitle={formatEventDate(activeEvent?.event_date, locale) ?? undefined}
> >
{showPackageSummaryBanner ? ( {showPackageSummaryBanner ? (
<PackageSummaryBanner <PackageSummaryBanner
@@ -443,28 +453,18 @@ export default function MobileDashboardPage() {
onOpen={() => setSummaryOpen(true)} onOpen={() => setSummaryOpen(true)}
/> />
) : null} ) : null}
<DeviceSetupCard <EventHeaderCard
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
event={activeEvent} event={activeEvent}
onGuests={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/members`))} locale={locale}
onPrint={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/qr`))} canSwitch={effectiveMultiple}
onInvites={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/members`))} onSwitch={() => setEventSwitcherOpen(true)}
onSettings={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}`))} onEdit={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/edit`))}
onAnalytics={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/analytics`))} />
<EventManagementGrid
event={activeEvent}
tasksEnabled={tasksEnabled}
onNavigate={(path) => navigate(path)}
/> />
<KpiStrip <KpiStrip
event={activeEvent} event={activeEvent}
stats={stats} stats={stats}
@@ -474,8 +474,20 @@ export default function MobileDashboardPage() {
/> />
<AlertsAndHints event={activeEvent} stats={stats} tasksEnabled={tasksEnabled} /> <AlertsAndHints event={activeEvent} stats={stats} tasksEnabled={tasksEnabled} />
<DeviceSetupCard
installPrompt={installPrompt}
pushState={pushState}
devicePermissions={devicePermissions}
onOpenSettings={() => navigate(adminPath('/mobile/settings'))}
/>
{tourSheet} {tourSheet}
{packageSummarySheet} {packageSummarySheet}
<EventSwitcherSheet
open={eventSwitcherOpen}
onClose={() => setEventSwitcherOpen(false)}
events={effectiveEvents}
locale={locale}
/>
</MobileShell> </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 { t } = useTranslation('management');
const { textStrong, muted, border } = useAdminTheme();
const text = textStrong;
const { selectEvent } = useEventContext(); const { selectEvent } = useEventContext();
const navigate = useNavigate(); const navigate = useNavigate();
const [localEvents, setLocalEvents] = React.useState<TenantEvent[]>(events); const [localEvents, setLocalEvents] = React.useState<TenantEvent[]>(events);
@@ -1008,7 +1032,8 @@ function EventPickerList({ events, locale, text, muted, border }: { events: Tena
key={event.slug} key={event.slug}
onPress={() => { onPress={() => {
selectEvent(event.slug ?? null); selectEvent(event.slug ?? null);
if (event.slug) { onPick?.(event);
if (navigateOnSelect && event.slug) {
navigate(adminPath(`/mobile/events/${event.slug}`)); navigate(adminPath(`/mobile/events/${event.slug}`));
} }
}} }}
@@ -1036,140 +1061,232 @@ function EventPickerList({ events, locale, text, muted, border }: { events: Tena
); );
} }
function FeaturedActions({ function EventSwitcherSheet({
tasksEnabled, open,
onReviewPhotos, onClose,
onManageTasks, events,
onShowQr, locale,
}: { }: {
tasksEnabled: boolean; open: boolean;
onReviewPhotos: () => void; onClose: () => void;
onManageTasks: () => void; events: TenantEvent[];
onShowQr: () => void; locale: string;
}) { }) {
const { t } = useTranslation('management'); 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 ( return (
<YStack space="$2"> <MobileSheet open={open} title={t('mobileDashboard.pickEvent', 'Select an event')} onClose={onClose}>
{cards.map((card) => ( <EventPickerList events={events} locale={locale} navigateOnSelect={false} onPick={onClose} />
<Pressable key={card.key} onPress={card.action}> </MobileSheet>
<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>
); );
} }
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, event,
onGuests, locale,
onPrint, canSwitch,
onInvites, onSwitch,
onSettings, onEdit,
onAnalytics,
}: { }: {
event: TenantEvent | null; event: TenantEvent | null;
onGuests: () => void; locale: string;
onPrint: () => void; canSwitch: boolean;
onInvites: () => void; onSwitch: () => void;
onSettings: () => void; onEdit: () => void;
onAnalytics: () => void;
}) { }) {
const { t } = useTranslation('management'); const { t } = useTranslation('management');
const { textStrong, muted, border, surface, accentSoft, primary } = useAdminTheme(); 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); const brandingAllowed = isBrandingAllowed(event ?? null);
if (!event) {
return null;
}
const tiles = [ 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, icon: Users,
label: t('mobileDashboard.shortcutGuests', 'Guest management'), label: t('events.quick.guests', 'Guest Management'),
color: ADMIN_ACTION_COLORS.guests, 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, icon: TrendingUp,
label: t('mobileDashboard.shortcutAnalytics', 'Analytics'), label: t('mobileDashboard.shortcutAnalytics', 'Analytics'),
color: ADMIN_ACTION_COLORS.analytics, color: ADMIN_ACTION_COLORS.analytics,
action: onAnalytics, onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/analytics`)) : undefined,
}, disabled: !slug,
{
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,
}, },
]; ];
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 ( return (
<YStack space="$2" marginTop="$2"> <YStack space="$2">
<Text fontSize="$sm" fontWeight="800" color={text}> <Text fontSize="$sm" fontWeight="800" color={textStrong}>
{t('mobileDashboard.shortcutsTitle', 'Shortcuts')} {t('events.detail.managementTitle', 'Event management')}
</Text> </Text>
<XStack flexWrap="wrap" space="$2"> <XStack flexWrap="wrap" space="$2">
{tiles.map((tile, index) => ( {tiles.map((tile, index) => (
@@ -1178,22 +1295,12 @@ function SecondaryGrid({
icon={tile.icon} icon={tile.icon}
label={tile.label} label={tile.label}
color={tile.color} color={tile.color}
onPress={tile.action} onPress={tile.onPress}
disabled={tile.disabled} disabled={tile.disabled}
delayMs={index * ADMIN_MOTION.tileStaggerMs} delayMs={index * ADMIN_MOTION.tileStaggerMs}
/> />
))} ))}
</XStack> </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> </YStack>
); );
} }

View File

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

View File

@@ -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');
}

View File

@@ -9,15 +9,16 @@ import { MobileShell } from './components/MobileShell';
import { MobileCard, CTAButton } from './components/Primitives'; import { MobileCard, CTAButton } from './components/Primitives';
import { MobileField, MobileInput, MobileSelect, MobileTextArea } from './components/FormControls'; import { MobileField, MobileInput, MobileSelect, MobileTextArea } from './components/FormControls';
import { LegalConsentSheet } from './components/LegalConsentSheet'; 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 { resolveEventSlugAfterUpdate } from './eventFormNavigation';
import { adminPath } from '../constants'; import { adminPath } from '../constants';
import { isAuthError } from '../auth/tokens'; 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 toast from 'react-hot-toast';
import { useBackNavigation } from './hooks/useBackNavigation'; import { useBackNavigation } from './hooks/useBackNavigation';
import { useAdminTheme } from './theme'; import { useAdminTheme } from './theme';
import { withAlpha } from './components/colors'; import { withAlpha } from './components/colors';
import { useAuth } from '../auth/context';
type FormState = { type FormState = {
name: string; name: string;
@@ -28,6 +29,7 @@ type FormState = {
published: boolean; published: boolean;
autoApproveUploads: boolean; autoApproveUploads: boolean;
tasksEnabled: boolean; tasksEnabled: boolean;
packageId: number | null;
}; };
export default function MobileEventFormPage() { export default function MobileEventFormPage() {
@@ -36,7 +38,9 @@ export default function MobileEventFormPage() {
const isEdit = Boolean(slug); const isEdit = Boolean(slug);
const navigate = useNavigate(); const navigate = useNavigate();
const { t } = useTranslation(['management', 'common']); const { t } = useTranslation(['management', 'common']);
const { user } = useAuth();
const { text, muted, subtle, danger, border, surface, primary } = useAdminTheme(); const { text, muted, subtle, danger, border, surface, primary } = useAdminTheme();
const isSuperAdmin = user?.role === 'super_admin' || user?.role === 'superadmin';
const [form, setForm] = React.useState<FormState>({ const [form, setForm] = React.useState<FormState>({
name: '', name: '',
@@ -47,9 +51,12 @@ export default function MobileEventFormPage() {
published: false, published: false,
autoApproveUploads: true, autoApproveUploads: true,
tasksEnabled: true, tasksEnabled: true,
packageId: null,
}); });
const [eventTypes, setEventTypes] = React.useState<TenantEventType[]>([]); const [eventTypes, setEventTypes] = React.useState<TenantEventType[]>([]);
const [typesLoading, setTypesLoading] = React.useState(false); 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 [loading, setLoading] = React.useState(isEdit);
const [saving, setSaving] = React.useState(false); const [saving, setSaving] = React.useState(false);
const [consentOpen, setConsentOpen] = React.useState(false); const [consentOpen, setConsentOpen] = React.useState(false);
@@ -76,6 +83,7 @@ export default function MobileEventFormPage() {
tasksEnabled: tasksEnabled:
(data.settings?.engagement_mode as string | undefined) !== 'photo_only' && (data.settings?.engagement_mode as string | undefined) !== 'photo_only' &&
(data.engagement_mode as string | undefined) !== 'photo_only', (data.engagement_mode as string | undefined) !== 'photo_only',
packageId: null,
}); });
setError(null); setError(null);
} catch (err) { } 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() { async function handleSubmit() {
setSaving(true); setSaving(true);
setError(null); setError(null);
@@ -130,7 +163,8 @@ export default function MobileEventFormPage() {
slug: `${Date.now()}`, slug: `${Date.now()}`,
event_type_id: form.eventTypeId ?? undefined, event_type_id: form.eventTypeId ?? undefined,
event_date: form.date || 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: { settings: {
location: form.location, location: form.location,
guest_upload_visibility: form.autoApproveUploads ? 'immediate' : 'review', guest_upload_visibility: form.autoApproveUploads ? 'immediate' : 'review',
@@ -152,7 +186,8 @@ export default function MobileEventFormPage() {
slug: `${Date.now()}`, slug: `${Date.now()}`,
event_type_id: form.eventTypeId ?? undefined, event_type_id: form.eventTypeId ?? undefined,
event_date: form.date || 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: { settings: {
location: form.location, location: form.location,
guest_upload_visibility: form.autoApproveUploads ? 'immediate' : 'review', guest_upload_visibility: form.autoApproveUploads ? 'immediate' : 'review',
@@ -223,6 +258,31 @@ export default function MobileEventFormPage() {
/> />
</MobileField> </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 events premium limits.')}
</Text>
</MobileField>
) : null}
<MobileField label={t('eventForm.fields.date.label', 'Date & time')}> <MobileField label={t('eventForm.fields.date.label', 'Date & time')}>
<XStack alignItems="center" space="$2"> <XStack alignItems="center" space="$2">
<NativeDateTimeInput <NativeDateTimeInput

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,74 +1,72 @@
import React from 'react'; 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 { useTranslation } from 'react-i18next';
import { Check, Copy, Download, Share2, Sparkles, Trophy, Users } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks'; import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text'; import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite'; import { Pressable } from '@tamagui/react-native-web-lite';
import { Sparkles, Camera, Link2, QrCode, RefreshCcw, Shield, Archive, ShoppingCart, Clock3, Share2 } from 'lucide-react'; import { MobileShell } from './components/MobileShell';
import toast from 'react-hot-toast'; import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
import { LegalConsentSheet } from './components/LegalConsentSheet';
import { import {
getEvent, getEvent,
getEventStats, getEventStats,
getEventQrInvites, getEventQrInvites,
toggleEvent,
updateEvent, updateEvent,
createEventAddonCheckout, TenantEvent,
EventStats,
EventQrInvite,
EventAddonCatalogItem,
getAddonCatalog, getAddonCatalog,
submitTenantFeedback, createEventAddonCheckout,
type TenantEvent,
type EventStats,
type EventQrInvite,
type EventAddonCatalogItem,
} from '../api'; } from '../api';
import { isAuthError } from '../auth/tokens'; import { isAuthError } from '../auth/tokens';
import { getApiErrorMessage } from '../lib/apiError'; import { getApiErrorMessage } from '../lib/apiError';
import { HeaderActionButton, MobileShell } from './components/MobileShell';
import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
import { adminPath } from '../constants'; import { adminPath } from '../constants';
import { selectAddonKeyForScope } from './addons'; import toast from 'react-hot-toast';
import { LegalConsentSheet } from './components/LegalConsentSheet';
import { useBackNavigation } from './hooks/useBackNavigation'; import { useBackNavigation } from './hooks/useBackNavigation';
import { useAdminTheme } from './theme'; import { useAdminTheme } from './theme';
type GalleryCounts = {
photos: number;
likes: number;
pending: number;
};
export default function MobileEventRecapPage() { export default function MobileEventRecapPage() {
const { slug } = useParams<{ slug?: string }>(); const { slug } = useParams<{ slug: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
const { t } = useTranslation('management'); 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 [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 [invites, setInvites] = React.useState<EventQrInvite[]>([]);
const [addons, setAddons] = React.useState<EventAddonCatalogItem[]>([]); const [addons, setAddons] = React.useState<EventAddonCatalogItem[]>([]);
const [loading, setLoading] = React.useState(true); const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState<string | null>(null); 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 [consentOpen, setConsentOpen] = React.useState(false);
const [consentBusy, setConsentBusy] = React.useState(false); const [busyScope, setBusyScope] = React.useState<string | null>(null);
const [consentAddonKey, setConsentAddonKey] = React.useState<string | null>(null);
const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events')); const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events'));
const load = React.useCallback(async () => { const load = React.useCallback(async () => {
if (!slug) return; if (!slug) return;
setLoading(true); setLoading(true);
try { try {
const [eventData, statsData, inviteData, addonData] = await Promise.all([ const [eventData, statsData, invitesData, addonsData] = await Promise.all([
getEvent(slug), getEvent(slug),
getEventStats(slug), getEventStats(slug),
getEventQrInvites(slug), getEventQrInvites(slug),
getAddonCatalog(), getAddonCatalog(),
]); ]);
setEvent(eventData); setEvent(eventData);
setStats(statsData); setEventStats(statsData);
setInvites(inviteData ?? []); setInvites(invitesData);
setAddons(addonData ?? []); setAddons(addonsData);
setError(null); setError(null);
} catch (err) { } catch (err) {
if (!isAuthError(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 { } finally {
setLoading(false); setLoading(false);
@@ -79,323 +77,242 @@ export default function MobileEventRecapPage() {
void load(); void load();
}, [load]); }, [load]);
React.useEffect(() => { const handleCheckout = async (addonKey: string) => {
if (!location.search) return; if (!slug || busyScope) return;
const params = new URLSearchParams(location.search); setBusyScope(addonKey);
if (params.get('addon_success')) { try {
toast.success(t('events.success.addonApplied', 'Add-on angewendet. Limits aktualisieren sich in Kürze.')); const { checkout_url } = await createEventAddonCheckout(slug, {
params.delete('addon_success'); addon_key: addonKey,
navigate({ pathname: location.pathname, search: params.toString() ? `?${params.toString()}` : '' }, { replace: true }); success_url: window.location.href,
void load(); cancel_url: window.location.href,
});
if (checkout_url) {
window.location.href = checkout_url;
} }
}, [location.search, location.pathname, t, navigate, load]); } catch (err) {
toast.error(getApiErrorMessage(err, t('events.errors.checkoutFailed', 'Bezahlvorgang konnte nicht gestartet werden.')));
setBusyScope(null);
}
};
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 ( 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> <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> </MobileCard>
</MobileShell> </MobileShell>
); );
} }
const activeInvite = invites.find((invite) => invite.is_active); const galleryCounts: GalleryCounts = {
const guestLink = event?.public_url ?? activeInvite?.url ?? (activeInvite?.token ? `/g/${activeInvite.token}` : null); photos: stats?.total ?? 0,
const galleryCounts = { likes: stats?.likes ?? 0,
photos: stats?.uploads_total ?? stats?.total ?? 0,
pending: stats?.pending_photos ?? 0, pending: stats?.pending_photos ?? 0,
likes: stats?.likes_total ?? stats?.likes ?? 0,
}; };
async function toggleGallery() { const activeInvite = invites.find((i) => i.is_active) ?? invites[0] ?? null;
if (!slug) return; const guestLink = activeInvite?.url ?? '';
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.')));
}
}
return ( return (
<MobileShell <MobileShell
activeTab="home" activeTab="home"
title={event ? resolveName(event.name) : t('events.placeholders.untitled', 'Unbenanntes Event')} title={t('events.recap.title', 'Event Recap')}
subtitle={event?.event_date ? formatDate(event.event_date) : undefined}
onBack={back} onBack={back}
headerActions={
<HeaderActionButton onPress={() => load()} ariaLabel={t('common.refresh', 'Refresh')}>
<RefreshCcw size={18} color={textStrong} />
</HeaderActionButton>
}
> >
{error ? ( <YStack space="$4">
<MobileCard> {/* Status & Summary */}
<Text color={danger}>{error}</Text> <MobileCard space="$3">
</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"> <XStack alignItems="center" justifyContent="space-between">
<YStack space="$1"> <YStack space="$1">
<Text fontSize="$xs" color={muted} fontWeight="700" letterSpacing={1.2}> <Text fontSize="$xl" fontWeight="800" color={textStrong}>
{t('events.recap.badge', 'Nachbereitung')} {t('events.recap.done', 'Event beendet')}
</Text> </Text>
<Text fontSize="$lg" fontWeight="800" color={textStrong}>{resolveName(event.name)}</Text>
<Text fontSize="$sm" color={muted}> <Text fontSize="$sm" color={muted}>
{t('events.recap.subtitle', 'Abschluss, Export und Galerie-Laufzeit verwalten.')} {formatDate(event.event_date)}
</Text> </Text>
</YStack> </YStack>
<PillBadge tone={event.is_active ? 'success' : 'muted'}> <PillBadge tone="success">{t('events.recap.statusClosed', 'Archiviert')}</PillBadge>
{event.is_active ? t('events.recap.galleryOpen', 'Galerie geöffnet') : t('events.recap.galleryClosed', 'Galerie geschlossen')}
</PillBadge>
</XStack> </XStack>
<XStack space="$2" marginTop="$2" flexWrap="wrap">
<CTAButton <XStack flexWrap="wrap" gap="$2" marginTop="$1">
label={event.is_active ? t('events.recap.closeGallery', 'Galerie schließen') : t('events.recap.openGallery', 'Galerie öffnen')} <Stat label={t('events.stats.uploads', 'Uploads')} value={String(galleryCounts.photos)} />
onPress={toggleGallery} <Stat label={t('events.stats.pending', 'Offen')} value={String(galleryCounts.pending)} />
loading={busy} <Stat label={t('events.stats.likes', 'Likes')} value={String(galleryCounts.likes)} />
/>
<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> </XStack>
</MobileCard> </MobileCard>
<MobileCard space="$2"> {/* Share Section */}
<XStack alignItems="center" justifyContent="space-between"> <MobileCard space="$3">
<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"> <XStack alignItems="center" space="$2">
<Link2 size={16} color={textStrong} /> <Share2 size={18} color={primary} />
<Text fontSize="$md" fontWeight="800" color={textStrong}> <Text fontSize="$md" fontWeight="800" color={textStrong}>
{t('events.recap.shareLink', 'Gäste-Link')} {t('events.recap.shareGallery', 'Galerie teilen')}
</Text> </Text>
</XStack> </XStack>
{guestLink ? ( <Text fontSize="$sm" color={text}>
<Text fontSize="$sm" color={text} selectable> {t('events.recap.shareBody', 'Deine Gäste können die Galerie auch nach dem Event weiterhin ansehen.')}
</Text>
<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} {guestLink}
</Text> </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)} /> <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)} /> <CTAButton label={t('events.recap.share', 'Teilen')} tone="ghost" onPress={() => shareLink(guestLink, event, t)} />
) : null} )}
</XStack> </YStack>
{activeInvite?.qr_code_data_url ? ( {activeInvite?.qr_code_data_url ? (
<XStack space="$2" alignItems="center" marginTop="$2"> <YStack alignItems="center" space="$2" marginTop="$2">
<img <YStack
src={activeInvite.qr_code_data_url} padding="$2"
alt={t('events.qr.qrAlt', 'QR code')} backgroundColor="white"
style={{ width: 96, height: 96 }} borderRadius={12}
/> borderWidth={1}
<CTAButton label={t('events.recap.downloadQr', 'QR herunterladen')} tone="ghost" onPress={() => downloadQr(activeInvite.qr_code_data_url)} /> borderColor={border}
</XStack> >
) : null} <img src={activeInvite.qr_code_data_url} alt="QR" style={{ width: 120, height: 120 }} />
</MobileCard> </YStack>
<CTAButton label={t('events.recap.downloadQr', 'QR herunterladen')} tone="ghost" onPress={() => downloadQr(activeInvite.qr_code_data_url!)} />
<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.')}
</Text>
<CTAButton
label={t('events.recap.extendGallery', 'Galerie verlängern')}
onPress={() => {
startAddonCheckout();
}}
loading={checkoutBusy}
/>
</MobileCard>
<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')}
value={Boolean(event.settings?.guest_downloads_enabled)}
onToggle={(value) => updateSetting(event, setEvent, slug, 'guest_downloads_enabled', value, setError, t)}
/>
<ToggleRow
label={t('events.recap.sharing', 'Sharing erlauben')}
value={Boolean(event.settings?.guest_sharing_enabled)}
onToggle={(value) => updateSetting(event, setEvent, slug, 'guest_sharing_enabled', value, setError, t)}
/>
</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.')}
</Text>
<CTAButton label={t('events.recap.archive', 'Archivieren')} onPress={() => archiveEvent()} loading={archiveBusy} />
</MobileCard>
<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> </YStack>
) : null} ) : 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>
</XStack>
<YStack space="$1.5">
<ToggleOption
label={t('events.recap.allowDownloads', 'Gäste dürfen Fotos laden')}
value={Boolean(event.settings?.guest_downloads_enabled)}
onToggle={(value) => updateSetting(event, setEvent, slug, 'guest_downloads_enabled', value, setError, t as any)}
/>
<ToggleOption
label={t('events.recap.allowSharing', 'Gäste dürfen Fotos teilen')}
value={Boolean(event.settings?.guest_sharing_enabled)}
onToggle={(value) => updateSetting(event, setEvent, slug, 'guest_sharing_enabled', value, setError, t as any)}
/>
</YStack>
</MobileCard>
{/* 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>
</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>
<LegalConsentSheet <LegalConsentSheet
open={consentOpen} open={consentOpen}
onClose={() => { onClose={() => {
if (consentBusy) return;
setConsentOpen(false); setConsentOpen(false);
setConsentAddonKey(null); setBusyScope(null);
}} }}
onConfirm={confirmAddonCheckout} onConfirm={handleConsentConfirm}
busy={consentBusy} busy={Boolean(busyScope)}
t={t} t={t as any}
/> />
</MobileShell> </MobileShell>
); );
} }
function Stat({ label, value }: { label: string; value: string }) { function Stat({ label, value, pill }: { label: string; value: string; pill?: boolean }) {
const { border, muted, textStrong } = useAdminTheme(); const { textStrong, muted, accentSoft, border } = useAdminTheme();
return ( 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}> <Text fontSize="$xs" color={muted}>
{label} {label}
</Text> </Text>
<Text fontSize="$md" fontWeight="800" color={textStrong}> <Text fontSize="$md" fontWeight="800" color={textStrong}>
{value} {value}
</Text> </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(); const { textStrong } = useAdminTheme();
return ( return (
<XStack alignItems="center" justifyContent="space-between" marginTop="$1.5"> <XStack alignItems="center" justifyContent="space-between" paddingVertical="$1">
<Text fontSize="$sm" color={textStrong}> <Text fontSize="$sm" color={textStrong} fontWeight="600">
{label} {label}
</Text> </Text>
<input <input
@@ -433,27 +350,25 @@ async function updateSetting(
} }
} }
function copyToClipboard(value: string, t: (key: string, fallback?: string) => string) { function copyToClipboard(value: string, t: any) {
navigator.clipboard if (typeof window !== 'undefined') {
.writeText(value) void window.navigator.clipboard.writeText(value);
.then(() => toast.success(t('events.recap.copySuccess', 'Link kopiert'))) toast.success(t('events.recap.copySuccess', 'Link kopiert'));
.catch(() => toast.error(t('events.recap.copyError', 'Link konnte nicht kopiert werden.'))); }
} }
async function shareLink(value: string, event: TenantEvent, t: (key: string, fallback?: string) => string) { async function shareLink(value: string, event: TenantEvent | null, t: any) {
if (navigator.share) { if (typeof window !== 'undefined' && navigator.share) {
try { try {
await navigator.share({ await navigator.share({
title: resolveName(event.name), title: resolveName(event?.name ?? ''),
text: t('events.recap.shareGuests', 'Gäste-Galerie teilen'), text: t('events.recap.shareText', 'Schau dir die Fotos von unserem Event an!'),
url: value, url: value,
}); });
return;
} catch { } catch {
// ignore // silently ignore or fallback to copy
} }
} }
copyToClipboard(value, t);
} }
function downloadQr(dataUrl: string) { function downloadQr(dataUrl: string) {

View File

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

View File

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

View File

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

View File

@@ -82,9 +82,10 @@ export default function MobileProfilePage() {
<Text fontSize="$md" fontWeight="800" color={textColor}> <Text fontSize="$md" fontWeight="800" color={textColor}>
{t('mobileProfile.settings', 'Settings')} {t('mobileProfile.settings', 'Settings')}
</Text> </Text>
<YGroup borderRadius="$4" borderWidth={1} borderColor={borderColor} overflow="hidden"> <YStack space="$4">
<YGroup.Item bordered> <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: borderColor, overflow: "hidden" } as any)}>
<Pressable onPress={() => navigate(adminPath('/mobile/settings'))}> <YGroup.Item>
<Pressable onPress={() => navigate(adminPath('/mobile/profile/security'))}>
<ListItem <ListItem
hoverTheme hoverTheme
pressTheme pressTheme
@@ -99,7 +100,7 @@ export default function MobileProfilePage() {
/> />
</Pressable> </Pressable>
</YGroup.Item> </YGroup.Item>
<YGroup.Item bordered> <YGroup.Item>
<Pressable onPress={() => navigate(adminPath('/mobile/billing#packages'))}> <Pressable onPress={() => navigate(adminPath('/mobile/billing#packages'))}>
<ListItem <ListItem
hoverTheme hoverTheme
@@ -115,7 +116,7 @@ export default function MobileProfilePage() {
/> />
</Pressable> </Pressable>
</YGroup.Item> </YGroup.Item>
<YGroup.Item bordered> <YGroup.Item>
<Pressable onPress={() => navigate(adminPath('/mobile/billing#invoices'))}> <Pressable onPress={() => navigate(adminPath('/mobile/billing#invoices'))}>
<ListItem <ListItem
hoverTheme hoverTheme
@@ -131,7 +132,7 @@ export default function MobileProfilePage() {
/> />
</Pressable> </Pressable>
</YGroup.Item> </YGroup.Item>
<YGroup.Item bordered> <YGroup.Item>
<Pressable onPress={() => navigate(ADMIN_DATA_EXPORTS_PATH)}> <Pressable onPress={() => navigate(ADMIN_DATA_EXPORTS_PATH)}>
<ListItem <ListItem
hoverTheme hoverTheme
@@ -147,7 +148,7 @@ export default function MobileProfilePage() {
/> />
</Pressable> </Pressable>
</YGroup.Item> </YGroup.Item>
<YGroup.Item bordered> <YGroup.Item>
<ListItem <ListItem
paddingVertical="$2" paddingVertical="$2"
paddingHorizontal="$3" paddingHorizontal="$3"
@@ -203,6 +204,7 @@ export default function MobileProfilePage() {
/> />
</YGroup.Item> </YGroup.Item>
</YGroup> </YGroup>
</YStack>
</MobileCard> </MobileCard>
<CTAButton <CTAButton

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -39,9 +39,9 @@ describe('buildInitialTextFields', () => {
}); });
describe('resolveLayoutForFormat', () => { describe('resolveLayoutForFormat', () => {
const layouts: EventQrInviteLayout[] = [ const layouts = [
{ id: 'portrait-a4', paper: 'a4', orientation: 'portrait', panel_mode: 'single', format_hint: 'poster-a4' } as EventQrInviteLayout, { 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 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', () => { it('returns portrait layout for A4 poster', () => {

View File

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

View File

@@ -1,11 +1,13 @@
import React from 'react'; import React from 'react';
import { useLocation } from 'react-router-dom';
import { YStack, XStack } from '@tamagui/stacks'; import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text'; import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite'; 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 { useTranslation } from 'react-i18next';
import { withAlpha } from './colors'; import { withAlpha } from './colors';
import { useAdminTheme } from '../theme'; import { useAdminTheme } from '../theme';
import { adminPath } from '../../constants';
const ICON_SIZE = 20; 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 }) { export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
const { t } = useTranslation('mobile'); const { t } = useTranslation('mobile');
const location = useLocation();
const { surface, border, primary, accentSoft, muted, subtle, shadow } = useAdminTheme(); const { surface, border, primary, accentSoft, muted, subtle, shadow } = useAdminTheme();
const surfaceColor = surface; const surfaceColor = surface;
const navSurface = withAlpha(surfaceColor, 0.92); const navSurface = withAlpha(surfaceColor, 0.92);
const [pressedKey, setPressedKey] = React.useState<NavKey | null>(null); 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 }> = [ 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: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
{ key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') }, { key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
{ key: 'profile', icon: User, label: t('nav.profile', 'Profile') }, { key: 'profile', icon: User, label: t('nav.profile', 'Profile') },

View File

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

View File

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

View File

@@ -1,6 +1,6 @@
import React, { Suspense } from 'react'; import React, { Suspense } from 'react';
import { useLocation, useNavigate } from 'react-router-dom'; 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 { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text'; import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite'; import { Pressable } from '@tamagui/react-native-web-lite';
@@ -9,11 +9,10 @@ import { useEventContext } from '../../context/EventContext';
import { BottomNav, NavKey } from './BottomNav'; import { BottomNav, NavKey } from './BottomNav';
import { useMobileNav } from '../hooks/useMobileNav'; import { useMobileNav } from '../hooks/useMobileNav';
import { adminPath } from '../../constants'; import { adminPath } from '../../constants';
import { MobileSheet } from './Sheet'; import { MobileCard, CTAButton } from './Primitives';
import { MobileCard, PillBadge, CTAButton } from './Primitives';
import { useNotificationsBadge } from '../hooks/useNotificationsBadge'; import { useNotificationsBadge } from '../hooks/useNotificationsBadge';
import { useOnlineStatus } from '../hooks/useOnlineStatus'; import { useOnlineStatus } from '../hooks/useOnlineStatus';
import { formatEventDate, resolveEventDisplayName } from '../../lib/events'; import { resolveEventDisplayName } from '../../lib/events';
import { TenantEvent, getEvents } from '../../api'; import { TenantEvent, getEvents } from '../../api';
import { withAlpha } from './colors'; import { withAlpha } from './colors';
import { setTabHistory } from '../lib/tabHistory'; import { setTabHistory } from '../lib/tabHistory';
@@ -31,11 +30,11 @@ type MobileShellProps = {
}; };
export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) { export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) {
const { events, activeEvent, hasMultipleEvents, hasEvents, selectEvent } = useEventContext(); const { events, activeEvent, selectEvent } = useEventContext();
const { go } = useMobileNav(activeEvent?.slug); const { go } = useMobileNav(activeEvent?.slug, activeTab);
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const { t, i18n } = useTranslation('mobile'); const { t } = useTranslation('mobile');
const { count: notificationCount } = useNotificationsBadge(); const { count: notificationCount } = useNotificationsBadge();
const online = useOnlineStatus(); const online = useOnlineStatus();
const { background, surface, border, text, muted, warningBg, warningText, primary, danger, shadow } = useAdminTheme(); 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 textColor = text;
const mutedText = muted; const mutedText = muted;
const headerSurface = withAlpha(surfaceColor, 0.94); const headerSurface = withAlpha(surfaceColor, 0.94);
const [pickerOpen, setPickerOpen] = React.useState(false);
const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]); const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
const [loadingEvents, setLoadingEvents] = React.useState(false); const [loadingEvents, setLoadingEvents] = React.useState(false);
const [attemptedFetch, setAttemptedFetch] = React.useState(false); const [attemptedFetch, setAttemptedFetch] = React.useState(false);
const [queuedPhotoCount, setQueuedPhotoCount] = React.useState(0); 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 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); const effectiveActive = activeEvent ?? (effectiveEvents.length === 1 ? effectiveEvents[0] : null);
React.useEffect(() => { React.useEffect(() => {
@@ -74,19 +70,17 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
.finally(() => setLoadingEvents(false)); .finally(() => setLoadingEvents(false));
}, [events.length, loadingEvents, attemptedFetch, activeEvent, selectEvent]); }, [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(() => { React.useEffect(() => {
const path = `${location.pathname}${location.search}${location.hash}`; const path = `${location.pathname}${location.search}${location.hash}`;
// 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); setTabHistory(activeTab, path);
}
}, [activeTab, location.hash, location.pathname, location.search]); }, [activeTab, location.hash, location.pathname, location.search]);
const refreshQueuedActions = React.useCallback(() => { const refreshQueuedActions = React.useCallback(() => {
@@ -106,44 +100,26 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
}; };
}, [refreshQueuedActions]); }, [refreshQueuedActions]);
const eventTitle = title ?? (effectiveActive ? resolveEventDisplayName(effectiveActive) : t('header.appName', 'Event Admin')); React.useEffect(() => {
const subtitleText = if (typeof window === 'undefined' || !window.matchMedia) {
subtitle ?? return;
(effectiveActive?.event_date }
? formatEventDate(effectiveActive.event_date, locale) ?? '' const query = window.matchMedia('(max-width: 520px)');
: effectiveHasEvents const handleChange = (event: MediaQueryListEvent) => {
? t('header.selectEvent', 'Select an event to continue') setIsCompactHeader(event.matches);
: t('header.empty', 'Create your first event to get started')); };
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 showQr = Boolean(effectiveActive?.slug);
const headerBackButton = onBack ? (
return (
<YStack backgroundColor={backgroundColor} minHeight="100vh" alignItems="center">
<YStack
backgroundColor={headerSurface}
borderBottomWidth={1}
borderColor={borderColor}
paddingHorizontal="$4"
paddingTop="$4"
paddingBottom="$3"
shadowColor={shadow}
shadowOpacity={0.06}
shadowRadius={10}
shadowOffset={{ width: 0, height: 4 }}
width="100%"
maxWidth={800}
position="sticky"
top={0}
zIndex={60}
style={{
paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
}}
>
<XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
{onBack ? (
<HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}> <HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
<XStack alignItems="center" space="$1.5"> <XStack alignItems="center" space="$1.5">
<ChevronLeft size={28} color={primary} strokeWidth={2.5} /> <ChevronLeft size={28} color={primary} strokeWidth={2.5} />
@@ -151,27 +127,22 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
</HeaderActionButton> </HeaderActionButton>
) : ( ) : (
<XStack width={28} /> <XStack width={28} />
)} );
const headerTitle = (
<XStack alignItems="center" space="$2.5" flex={1} justifyContent="flex-end"> <XStack alignItems="center" space="$1" flex={1} minWidth={0} justifyContent="flex-end">
<XStack alignItems="center" space="$1" maxWidth="55%"> <YStack alignItems="flex-end" maxWidth="100%">
<Pressable
disabled={!showEventSwitcher}
onPress={() => setPickerOpen(true)}
style={{ alignItems: 'flex-end' }}
>
<Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}> <Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}>
{eventTitle} {pageTitle}
</Text> </Text>
{subtitleText ? ( {subtitleText ? (
<Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body"> <Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body">
{subtitleText} {subtitleText}
</Text> </Text>
) : null} ) : null}
</Pressable> </YStack>
{showEventSwitcher ? <ChevronDown size={14} color={textColor} /> : null}
</XStack> </XStack>
);
const headerActionsRow = (
<XStack alignItems="center" space="$2"> <XStack alignItems="center" space="$2">
<HeaderActionButton <HeaderActionButton
onPress={() => navigate(adminPath('/mobile/notifications'))} onPress={() => navigate(adminPath('/mobile/notifications'))}
@@ -213,25 +184,66 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
ariaLabel={t('header.quickQr', 'Quick QR')} ariaLabel={t('header.quickQr', 'Quick QR')}
> >
<XStack <XStack
width={34}
height={34} height={34}
paddingHorizontal="$3"
borderRadius={12} borderRadius={12}
backgroundColor={primary} backgroundColor={primary}
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
space="$1.5"
> >
<QrCode size={16} color="white" /> <QrCode size={16} color="white" />
<Text fontSize="$xs" fontWeight="800" color="white">
{t('header.quickQr', 'Quick QR')}
</Text>
</XStack> </XStack>
</HeaderActionButton> </HeaderActionButton>
) : null} ) : null}
{headerActions ?? null} {headerActions ?? null}
</XStack> </XStack>
);
return (
<YStack backgroundColor={backgroundColor} minHeight="100vh" alignItems="center">
<YStack
backgroundColor={headerSurface}
borderBottomWidth={1}
borderColor={borderColor}
paddingHorizontal="$4"
paddingTop="$4"
paddingBottom="$3"
shadowColor={shadow}
shadowOpacity={0.06}
shadowRadius={10}
shadowOffset={{ width: 0, height: 4 }}
width="100%"
maxWidth={800}
position="sticky"
top={0}
zIndex={60}
style={{
paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
}}
>
{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> </XStack>
</XStack> </XStack>
<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>
)}
</YStack> </YStack>
<YStack <YStack
@@ -282,75 +294,6 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
<BottomNav active={activeTab} onNavigate={go} /> <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> </YStack>
); );
} }

View File

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

View File

@@ -50,7 +50,7 @@ describe('MobileSheet', () => {
const onClose = vi.fn(); const onClose = vi.fn();
render( 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> <div>Body</div>
</MobileSheet>, </MobileSheet>,
); );

View File

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

View File

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

View File

@@ -1,20 +1,28 @@
import React from 'react'; import React from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate, useLocation } from 'react-router-dom';
import { useEventContext } from '../../context/EventContext'; import { useEventContext } from '../../context/EventContext';
import { NavKey } from '../components/BottomNav'; 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 navigate = useNavigate();
const location = useLocation();
const { activeEvent } = useEventContext(); const { activeEvent } = useEventContext();
const slug = currentSlug ?? activeEvent?.slug ?? null; const slug = currentSlug ?? activeEvent?.slug ?? null;
const go = React.useCallback( const go = React.useCallback(
(key: NavKey) => { (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); const target = resolveTabTarget(key, slug);
navigate(target); navigate(target);
}, },
[navigate, slug] [navigate, activeTab, slug]
); );
return { go, slug }; return { go, slug };

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,24 +1,35 @@
import { adminPath } from '../../constants'; import { adminPath } from '../../constants';
import type { NavKey } from '../components/BottomNav'; 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 { function readHistory(): TabHistory {
if (typeof window === 'undefined') { if (typeof window === 'undefined') {
return {}; return { paths: {}, updatedAt: 0 };
} }
try { try {
const raw = window.localStorage.getItem(STORAGE_KEY); const raw = window.localStorage.getItem(STORAGE_KEY);
if (!raw) { if (!raw) {
return {}; return { paths: {}, updatedAt: 0 };
} }
const parsed = JSON.parse(raw) as TabHistory; 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 { } catch {
return {}; return { paths: {}, updatedAt: 0 };
} }
} }
@@ -36,15 +47,16 @@ function writeHistory(history: TabHistory): void {
export function setTabHistory(key: NavKey, path: string): void { export function setTabHistory(key: NavKey, path: string): void {
const history = readHistory(); const history = readHistory();
history[key] = path; history.paths[key] = path;
history.updatedAt = Date.now();
writeHistory(history); writeHistory(history);
} }
export function getTabHistory(): TabHistory { export function getTabHistory(): Partial<Record<NavKey, string>> {
return readHistory(); return readHistory().paths;
} }
function resolveDefaultTarget(key: NavKey, slug?: string | null): string { export function resolveDefaultTarget(key: NavKey, slug?: string | null): string {
if (key === 'tasks') { if (key === 'tasks') {
return slug ? adminPath(`/mobile/events/${slug}/tasks`) : adminPath('/mobile/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 { export function resolveTabTarget(key: NavKey, slug?: string | null): string {
const history = readHistory(); const history = readHistory();
const stored = history[key]; const stored = history.paths[key];
const fallback = resolveDefaultTarget(key, slug); const fallback = resolveDefaultTarget(key, slug);
if (!stored) { if (!stored) {

View File

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

View File

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

View File

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

View File

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

View File

@@ -20,7 +20,6 @@ const AuthCallbackPage = React.lazy(() => import('./mobile/AuthCallbackPage'));
const LoginStartPage = React.lazy(() => import('./mobile/LoginStartPage')); const LoginStartPage = React.lazy(() => import('./mobile/LoginStartPage'));
const LogoutPage = React.lazy(() => import('./mobile/LogoutPage')); const LogoutPage = React.lazy(() => import('./mobile/LogoutPage'));
const MobileEventsPage = React.lazy(() => import('./mobile/EventsPage')); const MobileEventsPage = React.lazy(() => import('./mobile/EventsPage'));
const MobileEventDetailPage = React.lazy(() => import('./mobile/EventDetailPage'));
const MobileEventPhotoboothPage = React.lazy(() => import('./mobile/EventPhotoboothPage')); const MobileEventPhotoboothPage = React.lazy(() => import('./mobile/EventPhotoboothPage'));
const MobileBrandingPage = React.lazy(() => import('./mobile/BrandingPage')); const MobileBrandingPage = React.lazy(() => import('./mobile/BrandingPage'));
const MobileEventFormPage = React.lazy(() => import('./mobile/EventFormPage')); 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/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: 'events/:slug/toolkit', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}`} /> },
{ path: 'mobile/events', element: <MobileEventsPage /> }, { 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/:slug/branding', element: <RequireAdminAccess><MobileBrandingPage /></RequireAdminAccess> },
{ path: 'mobile/events/new', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> }, { path: 'mobile/events/new', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> },
{ path: 'mobile/events/:slug/edit', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> }, { path: 'mobile/events/:slug/edit', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> },

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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', [HelpController::class, 'index'])->name('help.index');
Route::get('/help/{slug}', [HelpController::class, 'show'])->name('help.show'); Route::get('/help/{slug}', [HelpController::class, 'show'])->name('help.show');
Route::get('/legal/{slug}', [LegalController::class, 'show'])->name('legal.show'); Route::get('/legal/{slug}', [LegalController::class, 'show'])->name('legal.show');

View File

@@ -11,6 +11,7 @@ use App\Models\TenantPackage;
use App\Services\EventJoinTokenService; use App\Services\EventJoinTokenService;
use Illuminate\Http\UploadedFile; use Illuminate\Http\UploadedFile;
use Illuminate\Support\Carbon; use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Storage; use Illuminate\Support\Facades\Storage;
use Tests\Feature\Tenant\TenantTestCase; use Tests\Feature\Tenant\TenantTestCase;
@@ -77,6 +78,55 @@ class EventControllerTest extends TenantTestCase
->assertJsonPath('error.code', 'event_limit_missing'); ->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 public function test_create_event_requires_waiver_for_endcustomer_package(): void
{ {
$tenant = $this->tenant; $tenant = $this->tenant;

View File

@@ -81,6 +81,7 @@
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */, "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. */ // "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. */, "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
"types": ["vitest/globals", "@testing-library/jest-dom"],
/* Type Checking */ /* Type Checking */
"strict": true /* Enable all strict type-checking options. */, "strict": true /* Enable all strict type-checking options. */,
@@ -129,6 +130,7 @@
"resources/js/guest/**/*.d.ts" "resources/js/guest/**/*.d.ts"
], ],
"exclude": [ "exclude": [
"resources/js/actions/**" "resources/js/actions/**",
"resources/js/routes/**"
] ]
} }