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
+    <XStack flexWrap="wrap" gap="$1.5">
-      backgroundColor={glassSurface}
+      {items.map((item, index) => {
-      borderRadius={16}
+        const isNeutral = item.tone === 'neutral';
-      borderWidth={1}
+        const iconColor = isNeutral ? textStrong : item.color || primary;
-      borderColor={border}
+        const iconBg = isNeutral ? surfaceMuted : withAlpha(iconColor, 0.12);
-      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);
 
-          return (
+        return (
-            <React.Fragment key={index}>
+          <Card
-              <YStack flex={1} alignItems="center" space="$1.5">
+            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}
+                  width={28}
-                  height={32}
+                  height={28}
                   borderRadius={10}
                   backgroundColor={iconBg}
                   alignItems="center"
                   justifyContent="center"
-                  marginBottom="$0.5"
                 >
                   <item.icon size={16} color={iconColor} />
                 </XStack>
-
+                <Text
-                <YStack alignItems="center" space="$0">
+                  fontSize={9}
-                  <Text fontSize="$2xl" fontWeight="900" color={textStrong} letterSpacing={-0.5} lineHeight="$2xl">
+                  fontWeight="700"
-                    {item.value}
+                  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">
+                ) : null}
-                    {item.label}
-                  </Text>
-                </YStack>
-                
-                {item.note && (
-                   <Text fontSize={9} fontWeight="800" color={iconColor} opacity={0.9} textTransform="uppercase" marginTop="$0.5">
-                      {item.note}
-                   </Text>
-                )}
               </YStack>
-              
+            </XStack>
-              {!isLast && (
+          </Card>
-                <YStack width={1} height={40} backgroundColor={border} alignSelf="center" opacity={0.6} />
+        );
-              )}
+      })}
-            </React.Fragment>
+    </XStack>
-          );
-        })}
-      </XStack>
-    </YStack>
   );
 }
 
@@ -462,4 +473,4 @@ export function ContentTabs({
       ))}
     </Tabs>
   );
-}
+}