feat(admin-pwa): modernize dashboard KPI section with unified glass strip

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

@@ -153,35 +153,42 @@ export function KpiTile({
   label,
   value,
   note,
+  color,
 }: {
   icon: React.ComponentType<{ size?: number; color?: string }>;
   label: string;
   value: string | number;
   note?: string;
+  color?: string;
 }) {
-  const { accentSoft, primary, text } = useAdminTheme();
+  const { surfaceMuted, textStrong, textMuted, primary, accentSoft } = useAdminTheme();
+  const iconBg = color ? withAlpha(color, 0.12) : accentSoft;
+  const iconColor = color || primary;
+
   return (
-    <MobileCard borderRadius={14} padding="$3" width="32%" minWidth={110} alignItems="flex-start">
-      <XStack alignItems="center" space="$2">
-        <XStack
-          width={32}
-          height={32}
-          borderRadius={12}
-          backgroundColor={accentSoft}
-          alignItems="center"
-          justifyContent="center"
-        >
-          <IconCmp size={16} color={primary} />
-        </XStack>
-        <Text fontSize="$xs" color={text}>
+    <MobileCard borderRadius={14} padding="$2.5" width="31%" minWidth={100} space="$1.5">
+      <XStack
+        width={28}
+        height={28}
+        borderRadius={8}
+        backgroundColor={iconBg}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <IconCmp size={14} color={iconColor} />
+      </XStack>
+
+      <YStack space="$0">
+        <Text fontSize="$xl" fontWeight="900" color={textStrong} letterSpacing={-0.5} lineHeight="$xl">
+          {value}
+        </Text>
+        <Text fontSize={9} fontWeight="700" color={textMuted} textTransform="uppercase" letterSpacing={0.4}>
           {label}
         </Text>
-      </XStack>
-      <Text fontSize="$xl" fontWeight="800" color={text}>
-        {value}
-      </Text>
+      </YStack>
+
       {note ? (
-        <Text fontSize="$xs" color={text} opacity={0.7}>
+        <Text fontSize={9} fontWeight="800" color={iconColor} opacity={0.9} textTransform="uppercase">
           {note}
         </Text>
       ) : null}
@@ -189,6 +196,76 @@ export function KpiTile({
   );
 }
 
+export function KpiStrip({
+  items
+}: {
+  items: Array<{
+    icon: React.ComponentType<{ size?: number; color?: string }>;
+    label: string;
+    value: string | number;
+    color?: string;
+    note?: string;
+  }>
+}) {
+  const { glassSurface, border, textStrong, textMuted, primary, accentSoft } = 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);
+
+          return (
+            <React.Fragment key={index}>
+              <YStack flex={1} alignItems="center" space="$1.5">
+                <XStack
+                  width={32}
+                  height={32}
+                  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>
+                  <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>
+                )}
+              </YStack>
+              
+              {!isLast && (
+                <YStack width={1} height={40} backgroundColor={border} alignSelf="center" opacity={0.6} />
+              )}
+            </React.Fragment>
+          );
+        })}
+      </XStack>
+    </YStack>
+  );
+}
+
 export function SkeletonCard({ height = 80 }: { height?: number }) {
   return (
     <MobileCard className="mobile-skeleton" height={height} />