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
2026-01-17 16:35:30 +01:00
parent 40bed1e44e
commit d905ba8e6c
4 changed files with 63 additions and 47 deletions
--- a/resources/js/admin/mobile/DashboardPage.tsx
+++ b/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>
   );
-}
+}
--- a/resources/js/admin/mobile/hooks/useEventReadiness.ts
+++ b/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
    });
  }