Compact dashboard overview

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { Card } from '@tamagui/card';
 import { YGroup } from '@tamagui/group';
 import { ListItem } from '@tamagui/list-item';
+import { Progress } from '@tamagui/progress';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
@@ -23,12 +25,15 @@ export function SetupChecklist({
   variant?: 'card' | 'embedded';
 }) {
   const theme = useAdminTheme();
+  const { t } = useTranslation('dashboard');
   const navigate = useNavigate();
   const isAllComplete = steps.every(s => s.isComplete);
   const [collapsed, setCollapsed] = React.useState(isAllComplete);
   const isEmbedded = variant === 'embedded';
 
   const completedCount = steps.filter(s => s.isComplete).length;
+  const totalSteps = steps.length;
+  const progressValue = totalSteps > 0 ? Math.round((completedCount / totalSteps) * 100) : 0;
 
   return (
     <Card
@@ -44,23 +49,37 @@ export function SetupChecklist({
       shadowOffset={isEmbedded ? { width: 0, height: 0 } : { width: 0, height: 10 }}
     >
       <Pressable onPress={() => setCollapsed(!collapsed)}>
-        <XStack padding="$3" paddingVertical="$2.5" alignItems="center" justifyContent="space-between">
-           <XStack alignItems="center" space="$2">
-             <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
+        <YStack padding="$3" paddingVertical="$2.5" space="$2">
+          <XStack alignItems="center" justifyContent="space-between">
+            <XStack alignItems="center" space="$2">
+              <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
                 {title}
-             </Text>
-             {isAllComplete && (
-               <CheckCircle2 size={14} color={theme.successText} />
-             )}
-           </XStack>
-           
-           <XStack alignItems="center" space="$2">
-             <Text fontSize="$xs" color={theme.muted} fontWeight="600">
-               {completedCount}/{steps.length}
-             </Text>
-             {collapsed ? <ChevronDown size={16} color={theme.muted} /> : <ChevronUp size={16} color={theme.muted} />}
-           </XStack>
-        </XStack>
+              </Text>
+              <PillBadge tone={isAllComplete ? 'success' : 'warning'}>
+                {isAllComplete ? t('readiness.complete', 'Erledigt') : t('readiness.pending', 'Noch offen')}
+              </PillBadge>
+            </XStack>
+
+            <XStack alignItems="center" space="$2">
+              <Text fontSize="$xs" color={theme.muted} fontWeight="600">
+                {completedCount}/{steps.length}
+              </Text>
+              {collapsed ? <ChevronDown size={16} color={theme.muted} /> : <ChevronUp size={16} color={theme.muted} />}
+            </XStack>
+          </XStack>
+
+          <Progress
+            value={progressValue}
+            size="$1"
+            backgroundColor={theme.surfaceMuted}
+            height={6}
+          >
+            <Progress.Indicator
+              backgroundColor={isAllComplete ? theme.success : theme.primary}
+              animation="bouncy"
+            />
+          </Progress>
+        </YStack>
       </Pressable>
 
       {!collapsed && (