Enforce tenant member permissions

2026-01-16 13:33:36 +01:00
parent df60be826d
commit 7aa0a4c847
22 changed files with 592 additions and 112 deletions
--- a/resources/js/admin/api.ts
+++ b/resources/js/admin/api.ts
@@ -116,6 +116,7 @@ export type TenantEvent = {
  } | null;
  limits?: EventLimitSummary | null;
  addons?: EventAddonSummary[];
+  member_permissions?: string[] | null;
  [key: string]: unknown;
 };

@@ -933,6 +934,11 @@ function normalizeEvent(event: JsonValue): TenantEvent {
    settings,
    package: event.package ?? null,
    limits: (event.limits ?? null) as EventLimitSummary | null,
+    member_permissions: Array.isArray(event.member_permissions)
+      ? (event.member_permissions as string[])
+      : event.member_permissions
+        ? String(event.member_permissions).split(',').map((entry) => entry.trim())
+        : null,
  };

  return normalized;
--- a/resources/js/admin/mobile/DashboardPage.tsx
+++ b/resources/js/admin/mobile/DashboardPage.tsx
@@ -33,13 +33,37 @@ type DeviceSetupProps = {
  onOpenSettings: () => void;
 };

+function allowPermission(permissions: string[], permission: string): boolean {
+  if (permissions.includes('*') || permissions.includes(permission)) {
+    return true;
+  }
+
+  if (permission.includes(':')) {
+    const [prefix] = permission.split(':');
+    return permissions.includes(`${prefix}:*`);
+  }
+
+  return false;
+}
+
 export default function MobileDashboardPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const { slug: slugParam } = useParams<{ slug?: string }>();
  const { t, i18n } = useTranslation('management');
  const { events, activeEvent, hasEvents, hasMultipleEvents, isLoading, selectEvent } = useEventContext();
-  const { status } = useAuth();
+  const { status, user } = useAuth();
+  const isMember = user?.role === 'member';
+  const memberPermissions = React.useMemo(() => {
+    if (!isMember) {
+      return ['*'];
+    }
+    return Array.isArray(activeEvent?.member_permissions) ? activeEvent?.member_permissions ?? [] : [];
+  }, [activeEvent?.member_permissions, isMember]);
+  const canManageEvents = React.useMemo(
+    () => allowPermission(memberPermissions, 'events:manage'),
+    [memberPermissions]
+  );
  const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
  const [fallbackLoading, setFallbackLoading] = React.useState(false);
  const [fallbackAttempted, setFallbackAttempted] = React.useState(false);
@@ -150,6 +174,7 @@ export default function MobileDashboardPage() {
  const hasSummaryPackage =
    Boolean(activePackage?.id && activePackage.id !== summarySeenPackageId);
  const shouldRedirectToBilling =
+    !isMember &&
    !packagesLoading &&
    !packagesError &&
    !effectiveHasEvents &&
@@ -210,7 +235,7 @@ export default function MobileDashboardPage() {
          closeTour();
          navigate(adminPath('/mobile/events/new'));
        },
-        showAction: true,
+        showAction: canManageEvents,
      },
      qr: {
        key: 'qr',
@@ -257,7 +282,7 @@ export default function MobileDashboardPage() {
    };

    return tourStepKeys.map((key) => stepMap[key]);
-  }, [closeTour, navigate, t, tourStepKeys, tourTargetSlug]);
+  }, [canManageEvents, closeTour, navigate, t, tourStepKeys, tourTargetSlug]);

  const activeTourStep = tourSteps[tourStep] ?? tourSteps[0];
  const totalTourSteps = tourSteps.length;
@@ -356,6 +381,7 @@ export default function MobileDashboardPage() {
        handleSummaryClose();
        navigate(adminPath('/mobile/events/new'));
      }}
+      showContinue={canManageEvents}
      packageName={activePackage.package_name ?? t('mobileDashboard.packageSummary.fallbackTitle', 'Package summary')}
      packageType={activePackage.package_type ?? null}
      remainingEvents={remainingEvents}
@@ -462,11 +488,18 @@ export default function MobileDashboardPage() {
        locale={locale}
        canSwitch={effectiveMultiple}
        onSwitch={() => setEventSwitcherOpen(true)}
-        onEdit={() => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/edit`))}
+        canEdit={canManageEvents}
+        onEdit={
+          canManageEvents
+            ? () => activeEvent?.slug && navigate(adminPath(`/mobile/events/${activeEvent.slug}/edit`))
+            : undefined
+        }
      />
      <EventManagementGrid
        event={activeEvent}
        tasksEnabled={tasksEnabled}
+        isMember={isMember}
+        permissions={memberPermissions}
        onNavigate={(path) => navigate(path)}
      />
      <KpiStrip
@@ -500,6 +533,7 @@ function PackageSummarySheet({
  open,
  onClose,
  onContinue,
+  showContinue,
  packageName,
  packageType,
  remainingEvents,
@@ -512,6 +546,7 @@ function PackageSummarySheet({
  open: boolean;
  onClose: () => void;
  onContinue: () => void;
+  showContinue: boolean;
  packageName: string;
  packageType: string | null;
  remainingEvents: number | null | undefined;
@@ -600,7 +635,9 @@ function PackageSummarySheet({
        </MobileCard>

        <XStack space="$2">
-          <CTAButton label={t('mobileDashboard.packageSummary.continue', 'Continue to event setup')} onPress={onContinue} fullWidth={false} />
+          {showContinue ? (
+            <CTAButton label={t('mobileDashboard.packageSummary.continue', 'Continue to event setup')} onPress={onContinue} fullWidth={false} />
+          ) : null}
          <CTAButton label={t('mobileDashboard.packageSummary.dismiss', 'Close')} tone="ghost" onPress={onClose} fullWidth={false} />
        </XStack>
      </YStack>
@@ -919,12 +956,19 @@ function OnboardingEmptyState({ installPrompt, pushState, devicePermissions, onO
          <Text fontSize="$sm" color={text} opacity={0.9}>
            {t('mobileDashboard.emptyBody', 'Print a QR, collect uploads, and start moderating in minutes.')}
          </Text>
-          <CTAButton label={t('mobileDashboard.ctaCreate', 'Create event')} onPress={() => navigate(adminPath('/mobile/events/new'))} />
-          <CTAButton
-            label={t('mobileDashboard.ctaWelcome', 'Start welcome journey')}
-            tone="ghost"
-            onPress={() => navigate(ADMIN_WELCOME_BASE_PATH)}
-          />
+          {canManageEvents ? (
+            <>
+              <CTAButton
+                label={t('mobileDashboard.ctaCreate', 'Create event')}
+                onPress={() => navigate(adminPath('/mobile/events/new'))}
+              />
+              <CTAButton
+                label={t('mobileDashboard.ctaWelcome', 'Start welcome journey')}
+                tone="ghost"
+                onPress={() => navigate(ADMIN_WELCOME_BASE_PATH)}
+              />
+            </>
+          ) : null}
        </YStack>
      </MobileCard>

@@ -1156,13 +1200,15 @@ function EventHeaderCard({
  locale,
  canSwitch,
  onSwitch,
+  canEdit,
  onEdit,
 }: {
  event: TenantEvent | null;
  locale: string;
  canSwitch: boolean;
  onSwitch: () => void;
-  onEdit: () => void;
+  canEdit: boolean;
+  onEdit?: () => void;
 }) {
  const { t } = useTranslation('management');
  const { textStrong, muted, border, surface, accentSoft, primary, shadow } = useAdminTheme();
@@ -1222,24 +1268,26 @@ function EventHeaderCard({
        </XStack>
      </YStack>

-      <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>
+      {canEdit && onEdit ? (
+        <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>
+      ) : null}
    </Card>
  );
 }
@@ -1247,10 +1295,14 @@ function EventHeaderCard({
 function EventManagementGrid({
  event,
  tasksEnabled,
+  isMember,
+  permissions,
  onNavigate,
 }: {
  event: TenantEvent | null;
  tasksEnabled: boolean;
+  isMember: boolean;
+  permissions: string[];
  onNavigate: (path: string) => void;
 }) {
  const { t } = useTranslation('management');
@@ -1263,81 +1315,103 @@ function EventManagementGrid({
  }
  const tiles = [
    {
+      key: 'settings',
      icon: Pencil,
      label: t('mobileDashboard.shortcutSettings', 'Event settings'),
      color: ADMIN_ACTION_COLORS.settings,
+      requiredPermission: 'events:manage',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/edit`)) : undefined,
      disabled: !slug,
    },
    {
+      key: 'tasks',
      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,
+      requiredPermission: 'tasks:manage',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/tasks`)) : undefined,
      disabled: !tasksEnabled || !slug,
    },
    {
+      key: 'qr',
      icon: QrCode,
      label: t('events.quick.qr', 'QR Code Layouts'),
      color: ADMIN_ACTION_COLORS.qr,
+      requiredPermission: 'join-tokens:manage',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/qr`)) : undefined,
      disabled: !slug,
    },
    {
+      key: 'images',
      icon: ImageIcon,
      label: t('events.quick.images', 'Image Management'),
      color: ADMIN_ACTION_COLORS.images,
+      requiredPermission: 'photos:moderate',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/control-room`)) : undefined,
      disabled: !slug,
    },
    {
+      key: 'controlRoom',
      icon: Tv,
      label: t('events.quick.controlRoom', 'Moderation & Live Show'),
      color: ADMIN_ACTION_COLORS.liveShow,
+      requiredPermission: 'photos:moderate',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/control-room`)) : undefined,
      disabled: !slug,
    },
    {
+      key: 'liveShowSettings',
      icon: Settings,
      label: t('events.quick.liveShowSettings', 'Live Show settings'),
      color: ADMIN_ACTION_COLORS.liveShowSettings,
+      requiredPermission: 'live-show:manage',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/live-show/settings`)) : undefined,
      disabled: !slug,
    },
    {
+      key: 'members',
      icon: Users,
      label: t('events.quick.guests', 'Guest Management'),
      color: ADMIN_ACTION_COLORS.guests,
+      requiredPermission: 'members:manage',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/members`)) : undefined,
      disabled: !slug,
    },
    {
+      key: 'guestMessages',
      icon: Megaphone,
      label: t('events.quick.guestMessages', 'Guest messages'),
      color: ADMIN_ACTION_COLORS.guestMessages,
+      requiredPermission: 'guest-notifications:manage',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/guest-notifications`)) : undefined,
      disabled: !slug,
    },
    {
+      key: 'branding',
      icon: Layout,
      label: t('events.quick.branding', 'Branding & Theme'),
      color: ADMIN_ACTION_COLORS.branding,
+      requiredPermission: 'events:manage',
      onPress: slug && brandingAllowed ? () => onNavigate(adminPath(`/mobile/events/${slug}/branding`)) : undefined,
      disabled: !brandingAllowed || !slug,
    },
    {
+      key: 'photobooth',
      icon: Camera,
      label: t('events.quick.photobooth', 'Photobooth'),
      color: ADMIN_ACTION_COLORS.photobooth,
+      requiredPermission: 'events:manage',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/photobooth`)) : undefined,
      disabled: !slug,
    },
    {
+      key: 'analytics',
      icon: TrendingUp,
      label: t('mobileDashboard.shortcutAnalytics', 'Analytics'),
      color: ADMIN_ACTION_COLORS.analytics,
+      requiredPermission: 'events:manage',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/analytics`)) : undefined,
      disabled: !slug,
    },
@@ -1345,16 +1419,22 @@ function EventManagementGrid({

  if (event && isPastEvent(event.event_date)) {
    tiles.push({
+      key: 'recap',
      icon: Sparkles,
      label: t('events.quick.recap', 'Recap & Archive'),
      color: ADMIN_ACTION_COLORS.recap,
+      requiredPermission: 'events:manage',
      onPress: slug ? () => onNavigate(adminPath(`/mobile/events/${slug}/recap`)) : undefined,
      disabled: !slug,
    });
  }

+  const visibleTiles = isMember
+    ? tiles.filter((tile) => !tile.requiredPermission || allowPermission(permissions, tile.requiredPermission))
+    : tiles;
+
  const rows: typeof tiles[] = [];
-  tiles.forEach((tile, index) => {
+  visibleTiles.forEach((tile, index) => {
    const rowIndex = Math.floor(index / 2);
    if (!rows[rowIndex]) {
      rows[rowIndex] = [];
--- a/resources/js/admin/mobile/EventControlRoomPage.tsx
+++ b/resources/js/admin/mobile/EventControlRoomPage.tsx
@@ -36,6 +36,7 @@ import toast from 'react-hot-toast';
 import { useBackNavigation } from './hooks/useBackNavigation';
 import { useAdminTheme } from './theme';
 import { useOnlineStatus } from './hooks/useOnlineStatus';
+import { useAuth } from '../auth/context';
 import {
  enqueuePhotoAction,
  loadPhotoQueue,
@@ -91,6 +92,8 @@ export default function MobileEventControlRoomPage() {
  const location = useLocation();
  const { t } = useTranslation('management');
  const { activeEvent, selectEvent } = useEventContext();
+  const { user } = useAuth();
+  const isMember = user?.role === 'member';
  const slug = slugParam ?? activeEvent?.slug ?? null;
  const online = useOnlineStatus();
  const { textStrong, text, muted, border, accentSoft, accent, danger } = useAdminTheme();
@@ -574,7 +577,7 @@ export default function MobileEventControlRoomPage() {
      >
        <RefreshCcw size={18} color={textStrong} />
      </HeaderActionButton>
-      {slug ? (
+      {slug && !isMember ? (
        <HeaderActionButton
          onPress={() => navigate(adminPath(`/mobile/events/${slug}/live-show/settings`))}
          ariaLabel={t('events.quick.liveShowSettings', 'Live Show settings')}
--- a/resources/js/admin/mobile/EventsPage.tsx
+++ b/resources/js/admin/mobile/EventsPage.tsx
@@ -20,10 +20,13 @@ import { useBackNavigation } from './hooks/useBackNavigation';
 import { buildEventStatusCounts, filterEventsByStatus, resolveEventStatusKey, type EventStatusKey } from './lib/eventFilters';
 import { buildEventListStats } from './lib/eventListStats';
 import { useAdminTheme } from './theme';
+import { useAuth } from '../auth/context';

 export default function MobileEventsPage() {
  const { t } = useTranslation('management');
  const navigate = useNavigate();
+  const { user } = useAuth();
+  const isMember = user?.role === 'member';
  const [events, setEvents] = React.useState<TenantEvent[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
@@ -139,7 +142,9 @@ export default function MobileEventsPage() {
            <Text fontSize="$sm" color={muted} textAlign="center">
              {t('events.list.empty.description', 'Starte jetzt mit deinem ersten Event.')}
            </Text>
-            <CTAButton label={t('events.actions.create', 'Create New Event')} onPress={() => navigate(adminPath('/events/new'))} />
+            {!isMember ? (
+              <CTAButton label={t('events.actions.create', 'Create New Event')} onPress={() => navigate(adminPath('/events/new'))} />
+            ) : null}
          </YStack>
        </Card>
      ) : (
@@ -149,15 +154,17 @@ export default function MobileEventsPage() {
          statusFilter={statusFilter}
          onStatusChange={setStatusFilter}
          onOpen={(slug) => navigate(adminPath(`/mobile/events/${slug}`))}
-          onEdit={(slug) => navigate(adminPath(`/mobile/events/${slug}/edit`))}
+          onEdit={!isMember ? (slug) => navigate(adminPath(`/mobile/events/${slug}/edit`)) : undefined}
        />
      )}

-      <FloatingActionButton
-        label={t('events.actions.create', 'Create New Event')}
-        icon={Plus}
-        onPress={() => navigate(adminPath('/mobile/events/new'))}
-      />
+      {!isMember ? (
+        <FloatingActionButton
+          label={t('events.actions.create', 'Create New Event')}
+          icon={Plus}
+          onPress={() => navigate(adminPath('/mobile/events/new'))}
+        />
+      ) : null}
    </MobileShell>
  );
 }
@@ -175,7 +182,7 @@ function EventsList({
  statusFilter: EventStatusKey;
  onStatusChange: (value: EventStatusKey) => void;
  onOpen: (slug: string) => void;
-  onEdit: (slug: string) => void;
+  onEdit?: (slug: string) => void;
 }) {
  const { t } = useTranslation('management');
  const { text, muted, subtle, border, primary, surface, surfaceMuted, accentSoft, accent, shadow } = useAdminTheme();
@@ -350,7 +357,7 @@ function EventRow({
  statusLabel: string;
  statusTone: 'success' | 'warning' | 'muted';
  onOpen: (slug: string) => void;
-  onEdit: (slug: string) => void;
+  onEdit?: (slug: string) => void;
 }) {
  const { t } = useTranslation('management');
  const stats = buildEventListStats(event);
@@ -386,11 +393,13 @@ function EventRow({
            </XStack>
            <PillBadge tone={statusTone}>{statusLabel}</PillBadge>
          </YStack>
-          <Pressable onPress={() => onEdit(event.slug)}>
-            <Text fontSize="$xl" color={muted}>
-              ˅
-            </Text>
-          </Pressable>
+          {onEdit ? (
+            <Pressable onPress={() => onEdit(event.slug)}>
+              <Text fontSize="$xl" color={muted}>
+                ˅
+              </Text>
+            </Pressable>
+          ) : null}
        </XStack>

        <XStack alignItems="center" space="$2" flexWrap="wrap">
--- a/resources/js/admin/mobile/ProfilePage.tsx
+++ b/resources/js/admin/mobile/ProfilePage.tsx
@@ -22,6 +22,7 @@ import { useAdminTheme } from './theme';

 export default function MobileProfilePage() {
  const { user, logout } = useAuth();
+  const isMember = user?.role === 'member';
  const navigate = useNavigate();
  const { t } = useTranslation('management');
  const { appearance, updateAppearance } = useAppearance();
@@ -130,51 +131,55 @@ export default function MobileProfilePage() {
                onPress={() => navigate(ADMIN_PROFILE_ACCOUNT_PATH)}
              />
            </YGroup.Item>
-            <YGroup.Item>
-              <ListItem
-                hoverTheme
-                pressTheme
-                paddingVertical="$2"
-                paddingHorizontal="$3"
-                title={
-                  <Text fontSize="$sm" color={textColor}>
-                    {t('billing.sections.packages.title', 'Packages & Billing')}
-                  </Text>
-                }
-                iconAfter={<Settings size={18} color={subtle} />}
-                onPress={() => navigate(adminPath('/mobile/billing#packages'))}
-              />
-            </YGroup.Item>
-            <YGroup.Item>
-              <ListItem
-                hoverTheme
-                pressTheme
-                paddingVertical="$2"
-                paddingHorizontal="$3"
-                title={
-                  <Text fontSize="$sm" color={textColor}>
-                    {t('billing.sections.invoices.title', 'Invoices & Payments')}
-                  </Text>
-                }
-                iconAfter={<Settings size={18} color={subtle} />}
-                onPress={() => navigate(adminPath('/mobile/billing#invoices'))}
-              />
-            </YGroup.Item>
-            <YGroup.Item>
-              <ListItem
-                hoverTheme
-                pressTheme
-                paddingVertical="$2"
-                paddingHorizontal="$3"
-                title={
-                  <Text fontSize="$sm" color={textColor}>
-                    {t('dataExports.title', 'Data exports')}
-                  </Text>
-                }
-                iconAfter={<Download size={18} color={subtle} />}
-                onPress={() => navigate(ADMIN_DATA_EXPORTS_PATH)}
-              />
-            </YGroup.Item>
+            {!isMember ? (
+              <>
+                <YGroup.Item>
+                  <ListItem
+                    hoverTheme
+                    pressTheme
+                    paddingVertical="$2"
+                    paddingHorizontal="$3"
+                    title={
+                      <Text fontSize="$sm" color={textColor}>
+                        {t('billing.sections.packages.title', 'Packages & Billing')}
+                      </Text>
+                    }
+                    iconAfter={<Settings size={18} color={subtle} />}
+                    onPress={() => navigate(adminPath('/mobile/billing#packages'))}
+                  />
+                </YGroup.Item>
+                <YGroup.Item>
+                  <ListItem
+                    hoverTheme
+                    pressTheme
+                    paddingVertical="$2"
+                    paddingHorizontal="$3"
+                    title={
+                      <Text fontSize="$sm" color={textColor}>
+                        {t('billing.sections.invoices.title', 'Invoices & Payments')}
+                      </Text>
+                    }
+                    iconAfter={<Settings size={18} color={subtle} />}
+                    onPress={() => navigate(adminPath('/mobile/billing#invoices'))}
+                  />
+                </YGroup.Item>
+                <YGroup.Item>
+                  <ListItem
+                    hoverTheme
+                    pressTheme
+                    paddingVertical="$2"
+                    paddingHorizontal="$3"
+                    title={
+                      <Text fontSize="$sm" color={textColor}>
+                        {t('dataExports.title', 'Data exports')}
+                      </Text>
+                    }
+                    iconAfter={<Download size={18} color={subtle} />}
+                    onPress={() => navigate(ADMIN_DATA_EXPORTS_PATH)}
+                  />
+                </YGroup.Item>
+              </>
+            ) : null}
          </YGroup>
        </YStack>
      </Card>
--- a/resources/js/admin/mobile/tests/DashboardPage.test.tsx
+++ b/resources/js/admin/mobile/tests/DashboardPage.test.tsx
@@ -14,6 +14,7 @@ const fixtures = vi.hoisted(() => ({
    photo_count: 12,
    active_invites_count: 3,
    total_invites_count: 5,
+    member_permissions: ['photos:moderate', 'tasks:manage', 'join-tokens:manage'],
  },
  activePackage: {
    id: 1,
@@ -36,6 +37,10 @@ const fixtures = vi.hoisted(() => ({
 }));

 const navigateMock = vi.fn();
+const authState = {
+  status: 'authenticated',
+  user: { role: 'tenant_admin' },
+};

 vi.mock('react-router-dom', () => ({
  useNavigate: () => navigateMock,
@@ -103,7 +108,7 @@ vi.mock('../../context/EventContext', () => ({
 }));

 vi.mock('../../auth/context', () => ({
-  useAuth: () => ({ status: 'unauthenticated' }),
+  useAuth: () => authState,
 }));

 vi.mock('../hooks/useInstallPrompt', () => ({
@@ -232,4 +237,16 @@ describe('MobileDashboardPage', () => {
    expect(screen.getByText('2 of 5 events used')).toBeInTheDocument();
    expect(screen.getByText('3 remaining')).toBeInTheDocument();
  });
+
+  it('hides admin-only shortcuts for members', () => {
+    authState.user = { role: 'member' };
+
+    render(<MobileDashboardPage />);
+
+    expect(screen.getByText('Moderation & Live Show')).toBeInTheDocument();
+    expect(screen.queryByText('Event settings')).not.toBeInTheDocument();
+    expect(screen.queryByText('Live Show settings')).not.toBeInTheDocument();
+
+    authState.user = { role: 'tenant_admin' };
+  });
 });
--- a/resources/js/admin/mobile/tests/EventsPage.test.tsx
+++ b/resources/js/admin/mobile/tests/EventsPage.test.tsx
@@ -3,6 +3,9 @@ import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';

 const navigateMock = vi.fn();
+const authState = {
+  user: { role: 'tenant_admin' },
+};

 vi.mock('react-router-dom', () => ({
  useNavigate: () => navigateMock,
@@ -38,6 +41,10 @@ vi.mock('../../auth/tokens', () => ({
  isAuthError: () => false,
 }));

+vi.mock('../../auth/context', () => ({
+  useAuth: () => authState,
+}));
+
 vi.mock('../../lib/apiError', () => ({
  getApiErrorMessage: () => 'error',
 }));
@@ -133,4 +140,15 @@ describe('MobileEventsPage', () => {
    expect(screen.getByText('Status')).toBeInTheDocument();
    expect(screen.getByText('Demo Event')).toBeInTheDocument();
  });
+
+  it('hides create actions for members', async () => {
+    authState.user = { role: 'member' };
+
+    render(<MobileEventsPage />);
+
+    expect(await screen.findByText('Demo Event')).toBeInTheDocument();
+    expect(screen.queryByText('Create New Event')).not.toBeInTheDocument();
+
+    authState.user = { role: 'tenant_admin' };
+  });
 });
--- a/resources/js/admin/mobile/components/MobileShell.tsx
+++ b/resources/js/admin/mobile/components/MobileShell.tsx
@@ -19,6 +19,7 @@ import { setTabHistory } from '../lib/tabHistory';
 import { loadPhotoQueue } from '../lib/photoModerationQueue';
 import { countQueuedPhotoActions } from '../lib/queueStatus';
 import { useAdminTheme } from '../theme';
+import { useAuth } from '../../auth/context';

 type MobileShellProps = {
  title?: string;
@@ -31,6 +32,7 @@ type MobileShellProps = {

 export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) {
  const { events, activeEvent, selectEvent } = useEventContext();
+  const { user } = useAuth();
  const { go } = useMobileNav(activeEvent?.slug, activeTab);
  const navigate = useNavigate();
  const location = useLocation();
@@ -137,7 +139,22 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
  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 isMember = user?.role === 'member';
+  const memberPermissions = Array.isArray(effectiveActive?.member_permissions) ? effectiveActive?.member_permissions ?? [] : [];
+  const allowPermission = (permission: string) => {
+    if (!isMember) {
+      return true;
+    }
+    if (memberPermissions.includes('*') || memberPermissions.includes(permission)) {
+      return true;
+    }
+    if (permission.includes(':')) {
+      const [prefix] = permission.split(':');
+      return memberPermissions.includes(`${prefix}:*`);
+    }
+    return false;
+  };
+  const showQr = Boolean(effectiveActive?.slug) && allowPermission('join-tokens:manage');
  const headerBackButton = onBack ? (
    <HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
      <XStack alignItems="center" space="$1.5">
--- a/resources/js/admin/mobile/components/tests/MobileShell.test.tsx
+++ b/resources/js/admin/mobile/components/tests/MobileShell.test.tsx
@@ -52,6 +52,10 @@ vi.mock('../../../context/EventContext', () => ({
  }),
 }));

+vi.mock('../../../auth/context', () => ({
+  useAuth: () => ({ user: { role: 'tenant_admin' } }),
+}));
+
 vi.mock('../../hooks/useMobileNav', () => ({
  useMobileNav: () => ({ go: vi.fn(), slug: 'event-1' }),
 }));
--- a/resources/js/admin/router.tsx
+++ b/resources/js/admin/router.tsx
@@ -198,9 +198,9 @@ export const router = createBrowserRouter([
          { path: 'mobile/events/:slug/branding', element: <RequireAdminAccess><MobileBrandingPage /></RequireAdminAccess> },
          { path: 'mobile/events/new', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> },
          { path: 'mobile/events/:slug/edit', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> },
-          { path: 'mobile/events/:slug/qr', element: <RequireAdminAccess><MobileQrPrintPage /></RequireAdminAccess> },
-          { path: 'mobile/events/:slug/qr/customize/:tokenId?', element: <RequireAdminAccess><MobileQrLayoutCustomizePage /></RequireAdminAccess> },
-          { path: 'mobile/events/:slug/control-room', element: <RequireAdminAccess><MobileEventControlRoomPage /></RequireAdminAccess> },
+          { path: 'mobile/events/:slug/qr', element: <MobileQrPrintPage /> },
+          { path: 'mobile/events/:slug/qr/customize/:tokenId?', element: <MobileQrLayoutCustomizePage /> },
+          { path: 'mobile/events/:slug/control-room', element: <MobileEventControlRoomPage /> },
          { path: 'mobile/events/:slug/photos/:photoId?', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/control-room`} /> },
          { path: 'mobile/events/:slug/live-show', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/control-room`} /> },
          { path: 'mobile/events/:slug/live-show/settings', element: <RequireAdminAccess><MobileEventLiveShowSettingsPage /></RequireAdminAccess> },
@@ -212,8 +212,8 @@ export const router = createBrowserRouter([
          { path: 'mobile/events/:slug/guest-notifications', element: <RequireAdminAccess><MobileEventGuestNotificationsPage /></RequireAdminAccess> },
          { path: 'mobile/notifications', element: <MobileNotificationsPage /> },
          { path: 'mobile/notifications/:notificationId', element: <MobileNotificationsPage /> },
-          { path: 'mobile/profile', element: <RequireAdminAccess><MobileProfilePage /></RequireAdminAccess> },
-          { path: 'mobile/profile/account', element: <RequireAdminAccess><MobileProfileAccountPage /></RequireAdminAccess> },
+          { path: 'mobile/profile', element: <MobileProfilePage /> },
+          { path: 'mobile/profile/account', element: <MobileProfileAccountPage /> },
          { path: 'mobile/billing', element: <RequireAdminAccess><MobileBillingPage /></RequireAdminAccess> },
          { path: 'mobile/billing/shop', element: <RequireAdminAccess><MobilePackageShopPage /></RequireAdminAccess> },
          { path: 'mobile/settings', element: <RequireAdminAccess><MobileSettingsPage /></RequireAdminAccess> },