Adjust KPI strip layout

resources/js/admin/mobile/DashboardPage.tsx

@@ -467,7 +467,7 @@ function PulseStrip({ event, stats }: any) {
         icon: Users,
         value: guestCount,
         label: t('management:events.list.stats.guests', 'Guests'),
-        color: theme.textStrong,
+        tone: 'neutral',
       },
       {
         icon: ShieldCheck,

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Card } from '@tamagui/card';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
@@ -206,64 +207,74 @@ export function KpiStrip({
     value: string | number;
     color?: string;
     note?: string;
+    tone?: 'accent' | 'neutral';
   }>
 }) {
-  const { glassSurface, border, textStrong, textMuted, primary } = useAdminTheme();
+  const { glassSurface, border, textStrong, textMuted, primary, surfaceMuted, surface } = useAdminTheme();
 
   return (
-    <YStack
-      backgroundColor={glassSurface}
-      borderRadius={16}
-      borderWidth={1}
-      borderColor={border}
-      paddingVertical="$3"
-      paddingHorizontal="$1"
-    >
-      <XStack alignItems="flex-start">
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          const iconColor = item.color || primary;
-          const iconBg = withAlpha(iconColor, 0.12);
+    <XStack flexWrap="wrap" gap="$1.5">
+      {items.map((item, index) => {
+        const isNeutral = item.tone === 'neutral';
+        const iconColor = isNeutral ? textStrong : item.color || primary;
+        const iconBg = isNeutral ? surfaceMuted : withAlpha(iconColor, 0.12);
 
-          return (
-            <React.Fragment key={index}>
-              <YStack flex={1} alignItems="center" space="$1.5">
+        return (
+          <Card
+            key={index}
+            backgroundColor={glassSurface ?? surface}
+            borderRadius={14}
+            borderWidth={1}
+            borderColor={border}
+            padding="$2"
+            flexGrow={1}
+            flexBasis="28%"
+            minWidth={96}
+            maxWidth={140}
+          >
+            <XStack alignItems="center" space="$1">
+              <Text
+                fontSize={32}
+                fontWeight="900"
+                color={textStrong}
+                letterSpacing={-1}
+                lineHeight={34}
+              >
+                {item.value}
+              </Text>
+              <Separator vertical backgroundColor={border} height={32} opacity={0.6} />
+              <YStack alignItems="center" space="$0.5">
                 <XStack
-                  width={32}
-                  height={32}
+                  width={28}
+                  height={28}
                   borderRadius={10}
                   backgroundColor={iconBg}
                   alignItems="center"
                   justifyContent="center"
-                  marginBottom="$0.5"
                 >
                   <item.icon size={16} color={iconColor} />
                 </XStack>
-
-                <YStack alignItems="center" space="$0">
-                  <Text fontSize="$2xl" fontWeight="900" color={textStrong} letterSpacing={-0.5} lineHeight="$2xl">
-                    {item.value}
+                <Text
+                  fontSize={9}
+                  fontWeight="700"
+                  color={textMuted}
+                  textTransform="uppercase"
+                  letterSpacing={0.5}
+                  textAlign="center"
+                >
+                  {item.label}
+                </Text>
+                {item.note ? (
+                  <Text fontSize={9} fontWeight="800" color={iconColor} opacity={0.9} textTransform="uppercase">
+                    {item.note}
                   </Text>
-                  <Text fontSize={9} fontWeight="700" color={textMuted} textTransform="uppercase" letterSpacing={0.5} textAlign="center">
-                    {item.label}
-                  </Text>
-                </YStack>
-                
-                {item.note && (
-                   <Text fontSize={9} fontWeight="800" color={iconColor} opacity={0.9} textTransform="uppercase" marginTop="$0.5">
-                      {item.note}
-                   </Text>
-                )}
+                ) : null}
               </YStack>
-              
-              {!isLast && (
-                <YStack width={1} height={40} backgroundColor={border} alignSelf="center" opacity={0.6} />
-              )}
-            </React.Fragment>
-          );
-        })}
-      </XStack>
-    </YStack>
+            </XStack>
+          </Card>
+        );
+      })}
+    </XStack>
   );
 }