Unify setup status block

resources/js/admin/mobile/DashboardPage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from '@tanstack/react-query';
-import { AlertCircle, Bell, CalendarDays, Camera, CheckCircle2, ChevronRight, Download, Image as ImageIcon, Layout, ListTodo, Megaphone, QrCode, Settings, ShieldCheck, Sparkles, TrendingUp, Tv, Users } from 'lucide-react';
+import { AlertCircle, Bell, CalendarDays, Camera, CheckCircle2, ChevronRight, Circle, Download, Image as ImageIcon, Layout, ListTodo, Megaphone, QrCode, Settings, ShieldCheck, Sparkles, TrendingUp, Tv, Users } from 'lucide-react';
 import { Button } from '@tamagui/button';
 import { Card } from '@tamagui/card';
 import { YGroup } from '@tamagui/group';
@@ -218,15 +218,6 @@ export default function MobileDashboardPage() {
             variant="embedded"
           />
 
-          {/* 1b. SETUP CHECKLIST */}
-          {phase === 'setup' && (
-            <SetupChecklist
-              steps={readiness.steps}
-              title={t('dashboard:readiness.title', 'Bereit für den Eventstart')}
-              variant="embedded"
-            />
-          )}
-
           {/* 2. PULSE STRIP */}
           <Separator backgroundColor={theme.border} opacity={0.6} />
           <PulseStrip event={activeEvent} stats={stats} />
@@ -398,9 +389,7 @@ function LifecycleHero({ event, stats, locale, navigate, readiness, variant = 'd
 
   // SETUP
   const nextStep = readiness.nextStep;
-  const ctaLabel = nextStep ? nextStep.ctaLabel : t('dashboard:onboarding.hero.cta', 'Setup Complete');
-  const ctaAction = nextStep ? () => navigate(adminPath(nextStep.targetPath)) : undefined;
-  const showCta = Boolean(nextStep);
+  const showNextStep = Boolean(nextStep);
   
   return (
     <YStack space="$2">
@@ -424,24 +413,52 @@ function LifecycleHero({ event, stats, locale, navigate, readiness, variant = 'd
             </YStack>
           </XStack>
 
-          {showCta ? <Separator backgroundColor={theme.border} opacity={0.6} /> : null}
-
-          {showCta ? (
-            <Button
-              onPress={ctaAction}
-              backgroundColor={theme.primary}
-              borderColor="transparent"
-              height={48}
-              borderRadius={16}
-            >
-              <XStack alignItems="center" space="$2">
-                <Text fontSize="$sm" fontWeight="800" color="white">
-                  {ctaLabel}
-                </Text>
-                <ChevronRight size={16} color="white" />
-              </XStack>
-            </Button>
+          {showNextStep ? (
+            <YStack space="$2">
+              <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
+                {t('dashboard:readiness.nextStepTitle', 'Next step')}
+              </Text>
+              <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: theme.border, overflow: "hidden" } as any)}>
+                <YGroup.Item>
+                  <ListItem
+                    hoverTheme
+                    pressTheme
+                    paddingVertical="$2"
+                    paddingHorizontal="$3"
+                    onPress={() => navigate(adminPath(nextStep.targetPath))}
+                    title={
+                      <XStack alignItems="center" space="$2">
+                        <Circle size={18} color={theme.primary} strokeWidth={2.5} />
+                        <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
+                          {nextStep.label}
+                        </Text>
+                      </XStack>
+                    }
+                    subTitle={
+                      nextStep.description ? (
+                        <Text fontSize="$xs" color={theme.muted}>
+                          {nextStep.description}
+                        </Text>
+                      ) : undefined
+                    }
+                    iconAfter={
+                      <XStack alignItems="center" space="$1">
+                        <PillBadge tone="success">{nextStep.ctaLabel}</PillBadge>
+                        <ChevronRight size={16} color={theme.muted} />
+                      </XStack>
+                    }
+                  />
+                </YGroup.Item>
+              </YGroup>
+            </YStack>
           ) : null}
+
+          <Separator backgroundColor={theme.border} opacity={0.6} />
+          <SetupChecklist
+            steps={readiness.steps}
+            title={t('dashboard:readiness.title', 'Bereit für den Eventstart')}
+            variant="inline"
+          />
         </YStack>
       </DashboardCard>
     </YStack>