feat(dashboard): implement transparent setup roadmap and fix translations

- Added SetupChecklist component for clear progress visualization
- Refactored LifecycleHero to show readiness state
- Fixed remaining untranslated keys in tool grid and readiness hook

resources/js/admin/mobile/components/SetupChecklist.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Pressable } from '@tamagui/react-native-web-lite';
+import { CheckCircle2, Circle, ChevronRight, ArrowRight } from 'lucide-react';
+import { useAdminTheme } from '../theme';
+import { ReadinessStep } from '../hooks/useEventReadiness';
+import { adminPath } from '../../constants';
+
+export function SetupChecklist({ steps, title }: { steps: ReadinessStep[]; title: string }) {
+  const theme = useAdminTheme();
+  const navigate = useNavigate();
+
+  if (steps.every(s => s.isComplete)) {
+     return null; // Don't show if all done
+  }
+
+  return (
+    <YStack
+      backgroundColor={theme.surface}
+      borderRadius={16}
+      borderWidth={1}
+      borderColor={theme.border}
+      padding="$0"
+      overflow="hidden"
+      style={{ boxShadow: `0 2px 8px ${theme.shadow}` }}
+    >
+      <YStack padding="$3.5" paddingBottom="$2">
+         <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
+            {title}
+         </Text>
+      </YStack>
+
+      <YStack>
+        {steps.map((step, index) => {
+          const isNext = !step.isComplete && steps.slice(0, index).every(s => s.isComplete);
+          
+          return (
+            <Pressable 
+               key={step.id} 
+               onPress={() => navigate(adminPath(step.targetPath))}
+               style={{
+                  backgroundColor: isNext ? theme.surface : 'transparent',
+               }}
+            >
+               <XStack 
+                  paddingHorizontal="$3.5" 
+                  paddingVertical="$3" 
+                  alignItems="center" 
+                  space="$3"
+                  borderTopWidth={1}
+                  borderColor={theme.border}
+               >
+                  {step.isComplete ? (
+                     <CheckCircle2 size={20} color={theme.successText} />
+                  ) : isNext ? (
+                     <Circle size={20} color={theme.primary} strokeWidth={2.5} />
+                  ) : (
+                     <Circle size={20} color={theme.border} />
+                  )}
+
+                  <YStack flex={1} space="$0.5">
+                     <Text 
+                        fontSize="$sm" 
+                        fontWeight={isNext ? "700" : "500"} 
+                        color={step.isComplete ? theme.muted : theme.textStrong}
+                        textDecorationLine={step.isComplete ? 'line-through' : 'none'}
+                     >
+                        {step.label}
+                     </Text>
+                     {step.description && !step.isComplete && (
+                        <Text fontSize="$xs" color={theme.muted}>
+                           {step.description}
+                        </Text>
+                     )}
+                  </YStack>
+
+                  {isNext && (
+                     <YStack backgroundColor={theme.primary} borderRadius={999} paddingHorizontal="$2.5" paddingVertical="$1.5">
+                        <Text fontSize="$xs" color="white" fontWeight="700">Start</Text>
+                     </YStack>
+                  )}
+               </XStack>
+            </Pressable>
+          );
+        })}
+      </YStack>
+    </YStack>
+  );
+}