fix(admin): refine dashboard translations and label mapping

- Mapped 'Photobooth' and 'Guests' grid items to correct translation keys
- Localized pulse strip labels (Fotos, Gäste)
- Updated readiness hook to use translated CTAs

.beads/issues.jsonl

@@ -20,6 +20,7 @@
 {"id":"fotospiel-app-4en","title":"Add translations for Mobile Package Shop","description":"The new MobilePackageShopPage.tsx uses translation keys like 'shop.title', 'shop.legal.agb', etc. Ensure these are added to the management.json files for de and en.","status":"closed","priority":2,"issue_type":"task","created_at":"2026-01-06T18:05:50.469751088+01:00","created_by":"soeren","updated_at":"2026-01-06T18:14:19.984343737+01:00","closed_at":"2026-01-06T18:14:19.984346372+01:00"}
 {"id":"fotospiel-app-4i4","title":"Security review: map roles/data","status":"closed","priority":2,"issue_type":"task","created_at":"2026-01-01T16:02:58.370301875+01:00","created_by":"soeren","updated_at":"2026-01-01T16:03:03.997327414+01:00","closed_at":"2026-01-01T16:03:03.997327414+01:00","close_reason":"Completed in codebase (verified)"}
 {"id":"fotospiel-app-4zu","title":"SEC-IO-02 Refresh-token management UI + audit logs","status":"closed","priority":2,"issue_type":"task","created_at":"2026-01-01T15:51:50.24186222+01:00","created_by":"soeren","updated_at":"2026-01-04T16:10:39.752587431+01:00","closed_at":"2026-01-04T16:10:39.752587431+01:00","close_reason":"Obsolete: authentication now uses Sanctum PATs; OAuth/refresh-token tables removed and no refresh-token flow remains. See docs/archive/prp/13-backend-authentication.md and docs/archive/prp/marketing-checkout-payment-architecture.md."}
+{"id":"fotospiel-app-4zy","title":"Refine Dashboard Translations","description":"Fix missing translations in the modern dashboard UI and use proper i18n keys for stats and status labels.","status":"open","priority":2,"issue_type":"task","owner":"codex-agent@example.com","created_at":"2026-01-17T16:35:14.464529363+01:00","created_by":"Codex Agent","updated_at":"2026-01-17T16:35:14.464529363+01:00"}
 {"id":"fotospiel-app-539","title":"Live Show: public player view with effects engine","status":"closed","priority":1,"issue_type":"feature","created_at":"2026-01-05T11:11:36.821959901+01:00","created_by":"soeren","updated_at":"2026-01-05T18:30:13.318396255+01:00","closed_at":"2026-01-05T18:30:13.318396255+01:00","close_reason":"Closed","dependencies":[{"issue_id":"fotospiel-app-539","depends_on_id":"fotospiel-app-qne","type":"blocks","created_at":"2026-01-05T11:12:58.721858159+01:00","created_by":"soeren"},{"issue_id":"fotospiel-app-539","depends_on_id":"fotospiel-app-6zc","type":"blocks","created_at":"2026-01-05T11:13:07.289796993+01:00","created_by":"soeren"},{"issue_id":"fotospiel-app-539","depends_on_id":"fotospiel-app-h5d","type":"blocks","created_at":"2026-01-05T11:44:42.719445471+01:00","created_by":"soeren"}]}
 {"id":"fotospiel-app-539.2","title":"Live Show player shell + routing + data layer","description":"Add /show/{token} route + guest player page shell, Live Show API client, SSE/polling subscription and state model.","status":"closed","priority":1,"issue_type":"task","created_at":"2026-01-05T15:57:41.587003393+01:00","created_by":"soeren","updated_at":"2026-01-05T16:44:39.577762479+01:00","closed_at":"2026-01-05T16:44:39.577762479+01:00","close_reason":"Closed","dependencies":[{"issue_id":"fotospiel-app-539.2","depends_on_id":"fotospiel-app-539","type":"parent-child","created_at":"2026-01-05T15:57:41.641767879+01:00","created_by":"soeren"}]}
 {"id":"fotospiel-app-539.3","title":"Live Show playback engine (queue, pacing, layouts)","description":"Implement player playback scheduler, queue management, and layout rendering for single/split/grid.","status":"closed","priority":1,"issue_type":"task","created_at":"2026-01-05T15:57:56.531080931+01:00","created_by":"soeren","updated_at":"2026-01-05T17:40:45.929168571+01:00","closed_at":"2026-01-05T17:40:45.929168571+01:00","close_reason":"Closed","dependencies":[{"issue_id":"fotospiel-app-539.3","depends_on_id":"fotospiel-app-539","type":"parent-child","created_at":"2026-01-05T15:57:56.631147026+01:00","created_by":"soeren"},{"issue_id":"fotospiel-app-539.3","depends_on_id":"fotospiel-app-539.2","type":"blocks","created_at":"2026-01-05T15:57:56.655278463+01:00","created_by":"soeren"}]}

.beads/last-touched

@@ -1 +1 @@
-fotospiel-app-8iw
+fotospiel-app-4zy

resources/js/admin/mobile/DashboardPage.tsx

@@ -110,7 +110,7 @@ function StatusBadge({ status }: { status: string }) {
 export default function MobileDashboardPage() {
   const navigate = useNavigate();
   const { slug: slugParam } = useParams<{ slug?: string }>();
-  const { t, i18n } = useTranslation('management');
+  const { t, i18n } = useTranslation(['management', 'dashboard', 'mobile']);
   const { events, activeEvent, hasEvents, hasMultipleEvents, isLoading, selectEvent } = useEventContext();
   const { user } = useAuth();
   const isMember = user?.role === 'member';
@@ -230,7 +230,8 @@ function getEventPhase(event: TenantEvent): EventPhase {
 
 function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch }: any) {
   const theme = useAdminTheme();
-  const { completedSteps, totalSteps, nextStep } = useEventReadiness(event);
+  const { t } = useTranslation(['management', 'dashboard']);
+  const { completedSteps, totalSteps, nextStep } = useEventReadiness(event, t as any);
   
   if (!event) return null;
   const phase = getEventPhase(event);
@@ -261,16 +262,20 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch }:
                <YStack space="$1">
                   <XStack alignItems="center" space="$2">
                     <YStack width={8} height={8} borderRadius={4} backgroundColor="#22C55E" />
-                    <Text color="white" fontWeight="700" fontSize="$xs" textTransform="uppercase" letterSpacing={1}>Happening Now</Text>
+                    <Text color="white" fontWeight="700" fontSize="$xs" textTransform="uppercase" letterSpacing={1}>
+                      {t('dashboard:liveNow.status', 'Happening Now')}
+                    </Text>
                   </XStack>
                   <Text color="white" fontSize="$lg" fontWeight="800">
-                     {pendingPhotos > 0 ? `${pendingPhotos} Pending Photos` : 'Event is Running'}
+                     {pendingPhotos > 0 ? `${pendingPhotos} ${t('management:photos.filters.pending', 'Pending')}` : t('dashboard:liveNow.description', 'Event is Running')}
                   </Text>
                </YStack>
                {pendingPhotos > 0 && (
                  <Pressable onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/control-room`))}>
                     <YStack backgroundColor="white" borderRadius={999} paddingHorizontal="$3" paddingVertical="$2">
-                       <Text fontSize="$xs" fontWeight="800" color={theme.primary}>Review</Text>
+                       <Text fontSize="$xs" fontWeight="800" color={theme.primary}>
+                         {t('management:photos.openModeration', 'Review')}
+                       </Text>
                     </YStack>
                  </Pressable>
                )}
@@ -292,12 +297,14 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch }:
                     <CheckCircle2 size={20} color="white" />
                  </YStack>
                  <YStack>
-                    <Text fontSize="$md" fontWeight="800" color={theme.textStrong}>Event Completed</Text>
-                    <Text fontSize="$xs" color={theme.muted}>Gallery is online for guests.</Text>
+                    <Text fontSize="$md" fontWeight="800" color={theme.textStrong}>
+                      {t('management:status.archived', 'Event Completed')}
+                    </Text>
+                    <Text fontSize="$xs" color={theme.muted}>{t('management:recap.galleryOpen', 'Gallery online')}</Text>
                  </YStack>
               </XStack>
               <ModernButton 
-                 label="Download Photos" 
+                 label={t('management:recap.downloadAll', 'Download Photos')}
                  tone="primary" 
                  icon={<Download size={16} color="white" />}
                  onPress={() => navigate(adminPath(`/mobile/exports`))}
@@ -308,7 +315,7 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch }:
   }
 
   // SETUP
-  const ctaLabel = nextStep ? nextStep.ctaLabel : 'Setup Complete';
+  const ctaLabel = nextStep ? nextStep.ctaLabel : t('dashboard:onboarding.hero.cta', 'Setup Complete');
   const ctaAction = nextStep ? () => navigate(adminPath(nextStep.targetPath)) : undefined;
   
   return (
@@ -317,9 +324,11 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch }:
        <ModernCard space="$3">
           <XStack alignItems="center" justifyContent="space-between">
              <YStack>
-                <Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase">Countdown</Text>
+                <Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase">
+                  {t('dashboard:upcoming.status.planning', 'Countdown')}
+                </Text>
                 <Text fontSize="$2xl" fontWeight="900" color={theme.primary}>
-                   {daysToGo} <Text fontSize="$sm" color={theme.muted} fontWeight="500">days</Text>
+                   {daysToGo} <Text fontSize="$sm" color={theme.muted} fontWeight="500">{t('management:galleryStatus.daysLabel', 'days')}</Text>
                 </Text>
              </YStack>
              <YStack width={48} height={48} borderRadius={24} backgroundColor={theme.surfaceMuted} alignItems="center" justifyContent="center">
@@ -330,8 +339,10 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch }:
           <YStack height={1} backgroundColor={theme.border} />
           
           <XStack alignItems="center" justifyContent="space-between">
-             <Text fontSize="$sm" color={theme.textStrong} fontWeight="600">Setup Status</Text>
-             <Text fontSize="$xs" color={theme.muted}>{completedSteps}/{totalSteps} Steps</Text>
+             <Text fontSize="$sm" color={theme.textStrong} fontWeight="600">
+               {t('management:photobooth.checklist.title', 'Setup Status')}
+             </Text>
+             <Text fontSize="$xs" color={theme.muted}>{completedSteps}/{totalSteps} {t('steps', 'Schritte')}</Text>
           </XStack>
           
           <ModernButton 
@@ -348,17 +359,18 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch }:
 
 function PulseStrip({ event, stats }: any) {
   const theme = useAdminTheme();
+  const { t } = useTranslation('management');
   const uploadCount = stats?.uploads_total ?? event?.photo_count ?? 0;
   const guestCount = event?.active_invites_count ?? event?.total_invites_count ?? 0;
   const pendingCount = stats?.pending_photos ?? event?.pending_photo_count ?? 0;
 
   return (
     <XStack space="$3" paddingVertical="$1">
-      <PulseItem icon={ImageIcon} value={uploadCount} label="Photos" />
+      <PulseItem icon={ImageIcon} value={uploadCount} label={t('management:events.list.stats.photos', 'Fotos')} />
       <YStack width={1} backgroundColor={theme.border} marginVertical={4} />
-      <PulseItem icon={Users} value={guestCount} label="Guests" />
+      <PulseItem icon={Users} value={guestCount} label={t('management:events.list.stats.guests', 'Gäste')} />
       <YStack width={1} backgroundColor={theme.border} marginVertical={4} />
-      <PulseItem icon={Bell} value={pendingCount} label="Pending" tone={pendingCount > 0 ? 'warning' : 'neutral'} />
+      <PulseItem icon={Bell} value={pendingCount} label={t('management:photos.filters.pending', 'Pending')} tone={pendingCount > 0 ? 'warning' : 'neutral'} />
     </XStack>
   );
 }
@@ -379,34 +391,35 @@ function PulseItem({ icon: Icon, value, label, tone = 'neutral' }: any) {
 
 function UnifiedToolGrid({ event, navigate, permissions, isMember }: any) {
   const theme = useAdminTheme();
+  const { t } = useTranslation(['management', 'dashboard']);
   const slug = event?.slug;
   if (!slug) return null;
 
   const sections = [
     {
-      title: 'Experience',
+      title: t('management:branding.badge', 'Experience'), 
       items: [
-        { label: 'Photos', icon: ImageIcon, path: `/mobile/events/${slug}/control-room`, color: theme.primary },
-        { label: 'Slide Show', icon: Tv, path: `/mobile/events/${slug}/live-show/settings`, color: '#F59E0B' }, // Amber
-        { label: 'Tasks', icon: ListTodo, path: `/mobile/events/${slug}/tasks`, color: theme.accent },
-        { label: 'Photobooth', icon: Camera, path: `/mobile/events/${slug}/photobooth`, color: '#8B5CF6' }, // Violet
+        { label: t('management:photos.gallery.title', 'Photos'), icon: ImageIcon, path: `/mobile/events/${slug}/control-room`, color: theme.primary },
+        { label: t('management:events.quick.liveShowSettings', 'Slide Show'), icon: Tv, path: `/mobile/events/${slug}/live-show/settings`, color: '#F59E0B' },
+        { label: t('management:tasks.badge', 'Tasks'), icon: ListTodo, path: `/mobile/events/${slug}/tasks`, color: theme.accent },
+        { label: t('management:events.quick.photobooth', 'Photobooth'), icon: Camera, path: `/mobile/events/${slug}/photobooth`, color: '#8B5CF6' },
       ]
     },
     {
-      title: 'Operations',
+      title: t('management:workspace.hero.badge', 'Operations'), 
       items: [
-        { label: 'QR Codes', icon: QrCode, path: `/mobile/events/${slug}/qr`, color: '#10B981' }, // Emerald
-        { label: 'Guests', icon: Users, path: `/mobile/events/${slug}/members`, color: theme.text },
-        { label: 'Messages', icon: Megaphone, path: `/mobile/events/${slug}/guest-notifications`, color: theme.text },
-        { label: 'Branding', icon: Layout, path: `/mobile/events/${slug}/branding`, color: theme.text },
+        { label: t('management:invites.badge', 'QR Codes'), icon: QrCode, path: `/mobile/events/${slug}/qr`, color: '#10B981' },
+        { label: t('management:events.quick.guests', 'Guests'), icon: Users, path: `/mobile/events/${slug}/members`, color: theme.text },
+        { label: t('management:events.quick.guestMessages', 'Messages'), icon: Megaphone, path: `/mobile/events/${slug}/guest-notifications`, color: theme.text },
+        { label: t('management:branding.titleShort', 'Branding'), icon: Layout, path: `/mobile/events/${slug}/branding`, color: theme.text },
       ]
     },
     {
-       title: 'Admin',
+       title: t('management:settings.hero.badge', 'Admin'),
        items: [
-          { label: 'Analytics', icon: TrendingUp, path: `/mobile/events/${slug}/analytics` },
-          { label: 'Exports', icon: Download, path: `/mobile/exports` },
-          { label: 'Settings', icon: Settings, path: `/mobile/events/${slug}/edit` },
+          { label: t('management:events.fields.insights', 'Analytics'), icon: TrendingUp, path: `/mobile/events/${slug}/analytics` },
+          { label: t('management:recap.exportTitle', 'Exports'), icon: Download, path: `/mobile/exports` },
+          { label: t('management:events.actions.settings', 'Settings'), icon: Settings, path: `/mobile/events/${slug}/edit` },
        ]
     }
   ];
@@ -460,6 +473,7 @@ function UnifiedToolGrid({ event, navigate, permissions, isMember }: any) {
 
 function RecentPhotosSection({ photos, navigate, slug }: { photos: TenantPhoto[], navigate: any, slug: string }) {
   const theme = useAdminTheme();
+  const { t } = useTranslation('management');
   
   if (!photos.length) return null;
 
@@ -467,10 +481,10 @@ function RecentPhotosSection({ photos, navigate, slug }: { photos: TenantPhoto[]
     <YStack space="$2">
        <XStack alignItems="center" justifyContent="space-between">
          <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
-           Latest Uploads
+           {t('photos.recentTitle', 'Latest Uploads')}
          </Text>
          <Pressable onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}>
-           <Text fontSize="$xs" color={theme.primary} fontWeight="600">See all</Text>
+           <Text fontSize="$xs" color={theme.primary} fontWeight="600">{t('common.all', 'See all')}</Text>
          </Pressable>
        </XStack>
        
@@ -534,16 +548,17 @@ function AlertsSection({ event, stats }: any) {
 
 function EmptyState({ canManage, onCreate }: any) {
    const theme = useAdminTheme();
+   const { t } = useTranslation(['management', 'mobile']);
    return (
       <YStack flex={1} alignItems="center" justifyContent="center" space="$4">
          <Sparkles size={48} color={theme.primary} />
          <Text fontSize="$lg" fontWeight="800" color={theme.textStrong} textAlign="center">
-            Welcome to Fotospiel
+            {t('mobile:header.appName', 'Event Admin')}
          </Text>
          <Text fontSize="$sm" color={theme.muted} textAlign="center">
-            Create your first event to get started.
+            {t('mobile:header.noEventsBody', 'Create your first event.')}
          </Text>
-         {canManage && <ModernButton label="Create Event" onPress={onCreate} />}
+         {canManage && <ModernButton label={t('management:events.list.actions.create', 'Create Event')} onPress={onCreate} />}
       </YStack>
    );
 }

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

@@ -19,7 +19,8 @@ export type ReadinessStatus = {
   isReady: boolean;
 };
 
-export function useEventReadiness(event: TenantEvent | null): ReadinessStatus {
+// We pass `t` (translation function) to localise the return values
+export function useEventReadiness(event: TenantEvent | null, t: (key: string, fallback?: string) => string): ReadinessStatus {
   if (!event) {
     return { steps: [], totalSteps: 0, completedSteps: 0, progress: 0, nextStep: null, isReady: false };
   }
@@ -39,36 +40,35 @@ export function useEventReadiness(event: TenantEvent | null): ReadinessStatus {
   const hasTasks = (event.tasks_count ?? 0) > 0;
   
   // 3. Access: QR / Invites
-  // We consider it "done" if there is at least one active invite token (default is created on event creation usually, but let's check)
   const hasInvite = (event.active_invites_count ?? 0) > 0 || (event.total_invites_count ?? 0) > 0;
 
   const steps: ReadinessStep[] = [
     {
       id: 'basics',
-      label: 'Date & Location',
+      label: t('management:events.form.date', 'Date & Location'),
       isComplete: hasDate && hasLocation,
-      ctaLabel: 'Set Date & Location',
+      ctaLabel: t('management:events.actions.edit', 'Set Date & Location'),
       targetPath: `/mobile/events/${event.slug}/edit`,
       priority: 1
     },
     {
       id: 'access',
-      label: 'QR Codes',
+      label: t('management:invites.badge', 'QR Codes'),
+      ctaLabel: t('management:invites.actions.create', 'Get QR Code'),
       isComplete: hasInvite,
-      ctaLabel: 'Get QR Code',
       targetPath: `/mobile/events/${event.slug}/qr`,
-      priority: 3 // Access is usually needed after setup
+      priority: 3
     }
   ];
 
   if (tasksEnabled) {
     steps.push({
       id: 'tasks',
-      label: 'Photo Tasks',
+      label: t('management:tasks.badge', 'Photo Tasks'),
       isComplete: hasTasks,
-      ctaLabel: 'Add Photo Tasks',
+      ctaLabel: t('management:tasks.actions.assign', 'Add Photo Tasks'),
       targetPath: `/mobile/events/${event.slug}/tasks`,
-      priority: 2 // Content comes before distribution
+      priority: 2
     });
   }