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

resources/js/admin/i18n/locales/de/management.json

@@ -203,7 +203,8 @@
     "processing": "Verarbeite …",
     "select": "Auswählen",
     "close": "Schließen",
-    "reset": "Zurücksetzen"
+    "reset": "Zurücksetzen",
+    "actionNeeded": "Prüfen"
   },
   "photos": {
     "moderation": {

resources/js/admin/i18n/locales/en/management.json

@@ -199,7 +199,8 @@
     "processing": "Processing…",
     "select": "Select",
     "close": "Close",
-    "reset": "Reset"
+    "reset": "Reset",
+    "actionNeeded": "Review"
   },
   "photos": {
     "moderation": {

resources/js/admin/mobile/DashboardPage.tsx

@@ -20,6 +20,7 @@ import { buildLimitWarnings } from '../lib/limitWarnings';
 import { withAlpha } from './components/colors';
 import { useEventReadiness } from './hooks/useEventReadiness';
 import { SetupChecklist } from './components/SetupChecklist';
+import { KpiStrip } from './components/Primitives';
 
 // --- HELPERS ---
 
@@ -386,27 +387,29 @@ function PulseStrip({ event, stats }: any) {
   const pendingCount = stats?.pending_photos ?? event?.pending_photo_count ?? 0;
 
   return (
-    <XStack space="$3" paddingVertical="$1">
-      <PulseItem icon={ImageIcon} value={uploadCount} label={t('management:events.list.stats.photos', 'Fotos')} />
-      <YStack width={1} backgroundColor={theme.border} marginVertical={4} />
-      <PulseItem icon={Users} value={guestCount} label={t('management:events.list.stats.guests', 'Gäste')} />
-      <YStack width={1} backgroundColor={theme.border} marginVertical={4} />
-      <PulseItem icon={Bell} value={pendingCount} label={t('management:photos.filters.pending', 'Pending')} tone={pendingCount > 0 ? 'warning' : 'neutral'} />
-    </XStack>
-  );
+    <YStack paddingVertical="$1">
+       <KpiStrip items={[
+         {
+            icon: ImageIcon,
+            value: uploadCount,
+            label: t('management:events.list.stats.photos', 'Photos'),
+            color: theme.primary
+         },
+         {
+            icon: Users,
+            value: guestCount,
+            label: t('management:events.list.stats.guests', 'Guests'),
+            color: theme.textStrong
+         },
+         {
+            icon: ShieldCheck,
+            value: pendingCount,
+            label: t('management:photos.filters.pending', 'Pending'),
+            note: pendingCount > 0 ? t('management:common.actionNeeded', 'Review') : undefined,
+            color: pendingCount > 0 ? '#8B5CF6' : theme.textMuted
          }
-
-function PulseItem({ icon: Icon, value, label, tone = 'neutral' }: any) {
-  const theme = useAdminTheme();
-  const color = tone === 'warning' ? theme.warningText : theme.textStrong;
-  return (
-    <XStack alignItems="center" space="$2" flex={1} justifyContent="center">
-      <Icon size={16} color={theme.muted} />
-      <YStack>
-         <Text fontSize="$md" fontWeight="800" color={color} lineHeight="$xs">{value}</Text>
-         <Text fontSize={10} color={theme.muted} textTransform="uppercase" fontWeight="600">{label}</Text>
+       ]} />
     </YStack>
-    </XStack>
   );
 }
 

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">
+    <MobileCard borderRadius={14} padding="$2.5" width="31%" minWidth={100} space="$1.5">
       <XStack
-          width={32}
-          height={32}
-          borderRadius={12}
-          backgroundColor={accentSoft}
+        width={28}
+        height={28}
+        borderRadius={8}
+        backgroundColor={iconBg}
         alignItems="center"
         justifyContent="center"
       >
-          <IconCmp size={16} color={primary} />
+        <IconCmp size={14} color={iconColor} />
       </XStack>
-        <Text fontSize="$xs" color={text}>
-          {label}
-        </Text>
-      </XStack>
-      <Text fontSize="$xl" fontWeight="800" color={text}>
+
+      <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>
+      </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} />