Refactor mobile dashboard layout

resources/js/admin/mobile/DashboardPage.tsx

@@ -2,11 +2,16 @@ import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from '@tanstack/react-query';
-import { Bell, CalendarDays, Camera, CheckCircle2, Download, Image as ImageIcon, Layout, ListTodo, Megaphone, QrCode, Settings, ShieldCheck, Sparkles, TrendingUp, Tv, Users, ArrowRight, AlertCircle } from 'lucide-react';
+import { AlertCircle, Bell, CalendarDays, Camera, CheckCircle2, ChevronRight, Download, Image as ImageIcon, Layout, ListTodo, Megaphone, QrCode, Settings, ShieldCheck, Sparkles, TrendingUp, Tv, Users } from 'lucide-react';
+import { Button } from '@tamagui/button';
+import { Card } from '@tamagui/card';
+import { YGroup } from '@tamagui/group';
+import { ListItem } from '@tamagui/list-item';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { Image } from '@tamagui/image';
+import { Separator } from 'tamagui';
 import { isSameDay, isPast, parseISO, differenceInDays, startOfDay } from 'date-fns';
 
 import { MobileShell } from './components/MobileShell';
@@ -20,7 +25,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';
+import { KpiStrip, PillBadge } from './components/Primitives';
 
 // --- HELPERS ---
 
@@ -28,89 +33,67 @@ function translateLimits(t: any) {
   return (key: string, options?: any) => t(`management:limits.${key}`, key, options);
 }
 
-// --- MODERN PRIMITIVES ---
+// --- TAMAGUI-ALIGNED PRIMITIVES ---
 
-function ModernCard({ children, style, ...rest }: any) {
+function DashboardCard({ children, style, ...rest }: React.ComponentProps<typeof Card>) {
   const theme = useAdminTheme();
   return (
-    <YStack
+    <Card
       backgroundColor={theme.surface}
-      borderRadius={theme.cardRadius || 16}
+      borderRadius={20}
       borderWidth={1}
       borderColor={theme.border}
       padding="$3.5"
-      space="$2"
-      style={{
-        boxShadow: `0 2px 8px ${theme.shadow}`,
-        ...style
-      }}
+      shadowColor={theme.shadow}
+      shadowOpacity={0.16}
+      shadowRadius={16}
+      shadowOffset={{ width: 0, height: 10 }}
+      style={style}
       {...rest}
     >
       {children}
+    </Card>
+  );
+}
+
+function SectionHeader({
+  title,
+  subtitle,
+  action,
+}: {
+  title: string;
+  subtitle?: string;
+  action?: React.ReactNode;
+}) {
+  const theme = useAdminTheme();
+  return (
+    <YStack space="$1.5">
+      <XStack alignItems="center" justifyContent="space-between">
+        <Text fontSize="$lg" fontWeight="800" color={theme.textStrong}>
+          {title}
+        </Text>
+        {action ?? null}
+      </XStack>
+      {subtitle ? (
+        <Text fontSize="$sm" color={theme.muted}>
+          {subtitle}
+        </Text>
+      ) : null}
+      <Separator backgroundColor={theme.border} opacity={0.6} />
     </YStack>
   );
 }
 
-function ModernButton({ label, onPress, tone = 'primary', fullWidth = true, icon, style }: any) {
-  const theme = useAdminTheme();
-  const isPrimary = tone === 'primary';
-  const isGhost = tone === 'ghost';
-  const isAccent = tone === 'accent';
-  
-  const bg = isPrimary ? theme.primary : isAccent ? theme.accent : isGhost ? 'transparent' : theme.surface;
-  const text = isPrimary || isAccent ? 'white' : isGhost ? theme.text : theme.textStrong;
-  const border = isPrimary || isAccent || isGhost ? 'transparent' : theme.border;
-
-  return (
-    <Pressable
-      onPress={onPress}
-      style={{
-        width: fullWidth ? '100%' : undefined,
-        flex: fullWidth ? undefined : 1,
-        ...style
-      }}
-    >
-      <XStack
-        height={48}
-        borderRadius={12}
-        alignItems="center"
-        justifyContent="center"
-        backgroundColor={bg}
-        borderWidth={1}
-        borderColor={border}
-        space="$2"
-      >
-        {icon}
-        <Text fontSize="$sm" fontWeight="700" color={text}>
-          {label}
-        </Text>
-      </XStack>
-    </Pressable>
-  );
-}
-
 function StatusBadge({ status }: { status: string }) {
-  const theme = useAdminTheme();
   const { t } = useTranslation('management');
+  const config =
+    {
+      published: { tone: 'success', label: t('events.status.published', 'Live') },
+      draft: { tone: 'warning', label: t('events.status.draft', 'Draft') },
+      archived: { tone: 'muted', label: t('events.status.archived', 'Archived') },
+    }[status] || { tone: 'muted', label: status };
 
-  const config = {
-    published: { bg: '#DCFCE7', text: '#166534', label: t('events.status.published', 'Live') }, 
-    draft: { bg: '#FEF3C7', text: '#92400E', label: t('events.status.draft', 'Draft') }, 
-    archived: { bg: '#F1F5F9', text: '#475569', label: t('events.status.archived', 'Archived') },
-  }[status] || { bg: theme.surfaceMuted, text: theme.muted, label: status };
-
-  return (
-    <XStack
-      paddingHorizontal="$2"
-      paddingVertical="$1"
-      borderRadius={6}
-      backgroundColor={config.bg}
-    >
-      <Text fontSize="$xs" fontWeight="700" color={config.text}>
-        {config.label}
-      </Text>
-    </XStack>
-  );
+  return <PillBadge tone={config.tone}>{config.label}</PillBadge>;
 }
 
 // --- MAIN PAGE COMPONENT ---
@@ -119,7 +102,7 @@ export default function MobileDashboardPage() {
   const navigate = useNavigate();
   const { slug: slugParam } = useParams<{ slug?: string }>();
   const { t, i18n } = useTranslation(['management', 'dashboard', 'mobile']);
-  const { events, activeEvent, hasEvents, hasMultipleEvents, isLoading, selectEvent } = useEventContext();
+  const { events, activeEvent, hasEvents, isLoading, selectEvent } = useEventContext();
   const { user } = useAuth();
   const isMember = user?.role === 'member';
 
@@ -181,7 +164,7 @@ export default function MobileDashboardPage() {
   if (isLoading) {
     return (
       <MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}>
-        <ModernCard height={120} />
+        <DashboardCard height={120} />
       </MobileShell>
     );
   }
@@ -201,6 +184,10 @@ export default function MobileDashboardPage() {
 
   return (
     <MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}>
+      <SectionHeader
+        title={t('dashboard:overview.title', 'At a glance')}
+        subtitle={t('dashboard:overview.description', 'Key customer metrics at a glance.')}
+      />
       
       {/* 1. LIFECYCLE HERO */}
       <LifecycleHero
@@ -208,8 +195,6 @@ export default function MobileDashboardPage() {
         stats={stats}
         locale={locale}
         navigate={navigate}
-        onSwitch={() => setEventSwitcherOpen(true)}
-        canSwitch={hasMultipleEvents}
         readiness={readiness}
       />
 
@@ -228,6 +213,10 @@ export default function MobileDashboardPage() {
       <AlertsSection event={activeEvent} stats={stats} t={t} />
 
       {/* 4. UNIFIED COMMAND GRID */}
+      <SectionHeader
+        title={t('dashboard:quickActions.title', 'Quick actions')}
+        subtitle={t('dashboard:quickActions.description', 'Jump straight to the most important actions.')}
+      />
       <UnifiedToolGrid 
          event={activeEvent} 
          navigate={navigate}
@@ -261,7 +250,7 @@ function getEventPhase(event: TenantEvent): EventPhase {
   return 'setup';
 }
 
-function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch, readiness }: any) {
+function LifecycleHero({ event, stats, locale, navigate, readiness }: any) {
   const theme = useAdminTheme();
   const { t } = useTranslation(['management', 'dashboard']);
   
@@ -271,48 +260,57 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch, re
   
   // Header Row
   const Header = () => (
-     <XStack alignItems="center" justifyContent="space-between" marginBottom="$3">
-        <YStack>
-           <Text fontSize="$xs" color={theme.muted} fontWeight="600" textTransform="uppercase" letterSpacing={1}>
-              {formatEventDate(event.event_date, locale)}
-           </Text>
-        </YStack>
-        <StatusBadge status={event.status} />
-     </XStack>
+    <XStack alignItems="center" justifyContent="space-between">
+      <YStack>
+        <Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase" letterSpacing={1}>
+          {formatEventDate(event.event_date, locale)}
+        </Text>
+      </YStack>
+      <StatusBadge status={event.status} />
+    </XStack>
   );
 
   if (phase === 'live') {
     return (
-      <YStack>
-         <Header />
-         <ModernCard 
-            backgroundColor={theme.primary} 
-            borderWidth={0} 
-            style={{ backgroundImage: 'linear-gradient(135deg, #4F46E5 0%, #4338CA 100%)' }}
-         >
+      <YStack space="$2">
+        <Header />
+        <DashboardCard
+          backgroundColor={theme.primary}
+          borderColor="transparent"
+          style={{ backgroundImage: 'linear-gradient(135deg, #4F46E5 0%, #4338CA 100%)' }}
+        >
+          <YStack space="$3">
             <XStack alignItems="center" justifyContent="space-between">
-               <YStack space="$1">
-                  <XStack alignItems="center" space="$2">
-                    <YStack width={8} height={8} borderRadius={4} backgroundColor="#22C55E" />
-                    <Text color="white" fontWeight="700" fontSize="$xs" textTransform="uppercase" letterSpacing={1}>
-                      {t('dashboard:liveNow.status', 'Happening Now')}
-                    </Text>
-                  </XStack>
-                  <Text color="white" fontSize="$lg" fontWeight="800">
-                     {pendingPhotos > 0 ? `${pendingPhotos} ${t('management:photos.filters.pending', 'Pending')}` : t('dashboard:liveNow.description', 'Event is Running')}
+              <YStack space="$1">
+                <XStack alignItems="center" space="$2">
+                  <YStack width={8} height={8} borderRadius={4} backgroundColor="#22C55E" />
+                  <Text color="white" fontWeight="700" fontSize="$xs" textTransform="uppercase" letterSpacing={1}>
+                    {t('dashboard:liveNow.status', 'Happening Now')}
                   </Text>
-               </YStack>
-               {pendingPhotos > 0 && (
-                 <Pressable onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/control-room`))}>
-                    <YStack backgroundColor="white" borderRadius={999} paddingHorizontal="$3" paddingVertical="$2">
-                       <Text fontSize="$xs" fontWeight="800" color={theme.primary}>
-                         {t('management:photos.openModeration', 'Review')}
-                       </Text>
-                    </YStack>
-                 </Pressable>
-               )}
+                </XStack>
+                <Text color="white" fontSize="$lg" fontWeight="800">
+                  {pendingPhotos > 0
+                    ? `${pendingPhotos} ${t('management:photos.filters.pending', 'Pending')}`
+                    : t('dashboard:liveNow.description', 'Event is Running')}
+                </Text>
+              </YStack>
+              {pendingPhotos > 0 ? (
+                <Button
+                  onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/control-room`))}
+                  backgroundColor="white"
+                  borderColor="transparent"
+                  height={36}
+                  borderRadius={999}
+                  paddingHorizontal="$3"
+                >
+                  <Text fontSize="$xs" fontWeight="800" color={theme.primary}>
+                    {t('management:photos.openModeration', 'Review')}
+                  </Text>
+                </Button>
+              ) : null}
             </XStack>
-         </ModernCard>
+          </YStack>
+        </DashboardCard>
       </YStack>
     );
   }
@@ -321,33 +319,54 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch, re
   
   if (phase === 'post') {
      return (
-        <YStack>
-           <Header />
-           <ModernCard space="$3">
+        <YStack space="$2">
+          <Header />
+          <DashboardCard>
+            <YStack space="$3">
               <XStack alignItems="center" space="$2.5">
-                 <YStack width={40} height={40} borderRadius={20} backgroundColor={theme.success} alignItems="center" justifyContent="center">
-                    <CheckCircle2 size={20} color="white" />
-                 </YStack>
-                 <YStack>
-                    <Text fontSize="$md" fontWeight="800" color={theme.textStrong}>
-                      {t('events.recap.completedTitle', 'Event completed')}
-                    </Text>
-                    <Text fontSize="$xs" color={theme.muted}>{t('events.recap.galleryOpen', 'Gallery online')}</Text>
-                 </YStack>
+                <YStack width={40} height={40} borderRadius={20} backgroundColor={theme.success} alignItems="center" justifyContent="center">
+                  <CheckCircle2 size={20} color="white" />
+                </YStack>
+                <YStack>
+                  <Text fontSize="$md" fontWeight="800" color={theme.textStrong}>
+                    {t('events.recap.completedTitle', 'Event completed')}
+                  </Text>
+                  <Text fontSize="$xs" color={theme.muted}>{t('events.recap.galleryOpen', 'Gallery online')}</Text>
+                </YStack>
               </XStack>
-              <ModernButton 
-                 label={t('events.recap.downloadAll', 'Download photos')}
-                 tone="primary" 
-                 icon={<Download size={16} color="white" />}
-                 onPress={() => navigate(adminPath(`/mobile/exports`))}
-              />
-              <ModernButton
-                label={t('events.recap.openRecap', 'Open recap')}
-                tone="ghost"
-                icon={<ArrowRight size={16} color={theme.text} />}
+
+              <Button
+                onPress={() => navigate(adminPath(`/mobile/exports`))}
+                backgroundColor={theme.primary}
+                borderColor="transparent"
+                height={48}
+                borderRadius={16}
+              >
+                <XStack alignItems="center" space="$2">
+                  <Download size={16} color="white" />
+                  <Text fontSize="$sm" fontWeight="800" color="white">
+                    {t('events.recap.downloadAll', 'Download photos')}
+                  </Text>
+                </XStack>
+              </Button>
+
+              <Button
                 onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/recap`))}
-              />
-           </ModernCard>
+                backgroundColor="transparent"
+                borderColor={theme.border}
+                borderWidth={1}
+                height={48}
+                borderRadius={16}
+              >
+                <XStack alignItems="center" space="$2">
+                  <Text fontSize="$sm" fontWeight="800" color={theme.textStrong}>
+                    {t('events.recap.openRecap', 'Open recap')}
+                  </Text>
+                  <ChevronRight size={16} color={theme.muted} />
+                </XStack>
+              </Button>
+            </YStack>
+          </DashboardCard>
         </YStack>
      );
   }
@@ -358,43 +377,54 @@ function LifecycleHero({ event, stats, locale, navigate, onSwitch, canSwitch, re
   const ctaAction = nextStep ? () => navigate(adminPath(nextStep.targetPath)) : undefined;
   
   return (
-    <YStack>
-       <Header />
-       <ModernCard space="$3">
+    <YStack space="$2">
+      <Header />
+      <DashboardCard>
+        <YStack space="$3">
           <XStack alignItems="center" justifyContent="space-between">
-             <YStack>
-                <Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase">
-                  {t('dashboard:upcoming.status.planning', 'Countdown')}
+            <YStack>
+              <Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase">
+                {t('dashboard:upcoming.status.planning', 'Countdown')}
+              </Text>
+              <Text fontSize="$2xl" fontWeight="900" color={theme.primary}>
+                {daysToGo}{' '}
+                <Text fontSize="$sm" color={theme.muted} fontWeight="500">
+                  {t('management:galleryStatus.daysLabel', 'days')}
                 </Text>
-                <Text fontSize="$2xl" fontWeight="900" color={theme.primary}>
-                   {daysToGo} <Text fontSize="$sm" color={theme.muted} fontWeight="500">{t('management:galleryStatus.daysLabel', 'days')}</Text>
-                </Text>
-             </YStack>
-             <YStack width={48} height={48} borderRadius={24} backgroundColor={theme.surfaceMuted} alignItems="center" justifyContent="center">
-                <CalendarDays size={24} color={theme.primary} />
-             </YStack>
+              </Text>
+            </YStack>
+            <YStack width={48} height={48} borderRadius={24} backgroundColor={theme.surfaceMuted} alignItems="center" justifyContent="center">
+              <CalendarDays size={24} color={theme.primary} />
+            </YStack>
           </XStack>
 
-          <YStack height={1} backgroundColor={theme.border} />
+          <Separator backgroundColor={theme.border} opacity={0.6} />
 
-          {/* Main CTA if not ready */}
-          {!readiness.isReady && (
-             <ModernButton 
-                label={ctaLabel} 
-                tone='primary'
-                icon={<ArrowRight size={16} color="white" />}
-                onPress={ctaAction}
-             />
-          )}
-          {readiness.isReady && (
-             <XStack alignItems="center" space="$2">
-                <CheckCircle2 size={18} color={theme.successText} />
-                <Text fontSize="$sm" color={theme.successText} fontWeight="700">
-                  {t('management:mobileDashboard.readyForLiftoff', 'Ready for Liftoff')}
+          {!readiness.isReady ? (
+            <Button
+              onPress={ctaAction}
+              backgroundColor={theme.primary}
+              borderColor="transparent"
+              height={48}
+              borderRadius={16}
+            >
+              <XStack alignItems="center" space="$2">
+                <Text fontSize="$sm" fontWeight="800" color="white">
+                  {ctaLabel}
                 </Text>
-             </XStack>
+                <ChevronRight size={16} color="white" />
+              </XStack>
+            </Button>
+          ) : (
+            <XStack alignItems="center" space="$2">
+              <CheckCircle2 size={18} color={theme.successText} />
+              <Text fontSize="$sm" color={theme.successText} fontWeight="700">
+                {t('management:mobileDashboard.readyForLiftoff', 'Ready for Liftoff')}
+              </Text>
+            </XStack>
           )}
-       </ModernCard>
+        </YStack>
+      </DashboardCard>
     </YStack>
   );
 }
@@ -407,7 +437,8 @@ function PulseStrip({ event, stats }: any) {
   const pendingCount = stats?.pending_photos ?? event?.pending_photo_count ?? 0;
 
   return (
-    <YStack paddingVertical="$1">
+    <YStack space="$2">
+       <SectionHeader title={t('management:eventMenu.summary', 'Overview')} />
        <KpiStrip items={[
          {
             icon: ImageIcon,
@@ -475,47 +506,50 @@ function UnifiedToolGrid({ event, navigate, permissions, isMember, isCompleted }
   ].filter((section) => section.items.length > 0);
 
   return (
-    <YStack space="$4">
+    <YStack space="$3">
       {sections.map((section) => (
-        <YStack key={section.title} space="$2">
-          <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
-            {section.title}
-          </Text>
-          <XStack flexWrap="wrap" gap="$2.5">
-             {section.items.map((item) => (
-                <Pressable 
-                   key={item.label} 
-                   onPress={() => navigate(adminPath(item.path))}
-                   style={{ width: '48%', flexGrow: 1 }}
-                >
-                   <YStack 
-                      backgroundColor={theme.surface} 
-                      borderRadius={14} 
-                      padding="$3" 
-                      space="$2.5" 
-                      borderWidth={1}
-                      borderColor={theme.border}
-                      height={90}
-                      justifyContent="space-between"
-                   >
-                      <XStack justifyContent="space-between" alignItems="flex-start">
-                         <YStack 
-                            width={32} height={32} 
-                            borderRadius={10} 
-                            backgroundColor={item.color ? withAlpha(item.color, 0.1) : theme.surfaceMuted} 
-                            alignItems="center" justifyContent="center"
-                         >
-                            <item.icon size={18} color={item.color || theme.textStrong} />
-                         </YStack>
+        <DashboardCard key={section.title} padding="$0">
+          <YStack padding="$3.5" paddingBottom="$2.5" space="$1">
+            <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
+              {section.title}
+            </Text>
+          </YStack>
+          <Separator backgroundColor={theme.border} opacity={0.6} />
+          <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: theme.border, overflow: "hidden" } as any)}>
+            {section.items.map((item) => {
+              const iconColor = item.color || theme.textStrong;
+              return (
+                <YGroup.Item key={item.label}>
+                  <ListItem
+                    hoverTheme
+                    pressTheme
+                    paddingVertical="$2"
+                    paddingHorizontal="$3"
+                    onPress={() => navigate(adminPath(item.path))}
+                    title={
+                      <XStack alignItems="center" space="$2.5">
+                        <XStack
+                          width={32}
+                          height={32}
+                          borderRadius={10}
+                          backgroundColor={withAlpha(iconColor, 0.12)}
+                          alignItems="center"
+                          justifyContent="center"
+                        >
+                          <item.icon size={18} color={iconColor} />
+                        </XStack>
+                        <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
+                          {item.label}
+                        </Text>
                       </XStack>
-                      <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
-                         {item.label}
-                      </Text>
-                   </YStack>
-                </Pressable>
-             ))}
-          </XStack>
-        </YStack>
+                    }
+                    iconAfter={<ChevronRight size={16} color={theme.muted} />}
+                  />
+                </YGroup.Item>
+              );
+            })}
+          </YGroup>
+        </DashboardCard>
       ))}
     </YStack>
   );
@@ -528,45 +562,52 @@ function RecentPhotosSection({ photos, navigate, slug }: { photos: TenantPhoto[]
   if (!photos.length) return null;
 
   return (
-    <YStack space="$2">
-       <XStack alignItems="center" justifyContent="space-between">
-         <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
-           {t('photos.recentTitle', 'Latest Uploads')}
-         </Text>
-         <Pressable onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}>
-           <Text fontSize="$xs" color={theme.primary} fontWeight="600">{t('common.all', 'See all')}</Text>
-         </Pressable>
-       </XStack>
+    <DashboardCard>
+      <YStack space="$2">
+        <XStack alignItems="center" justifyContent="space-between">
+          <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
+            {t('photos.recentTitle', 'Latest Uploads')}
+          </Text>
+          <Button
+            onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}
+            backgroundColor="transparent"
+            borderColor="transparent"
+            height={28}
+            paddingHorizontal={0}
+          >
+            <Text fontSize="$xs" color={theme.primary} fontWeight="700">
+              {t('common.all', 'See all')}
+            </Text>
+          </Button>
+        </XStack>
 
-       <XStack space="$2" overflow="scroll" paddingVertical="$1">
+        <Separator backgroundColor={theme.border} opacity={0.6} />
+
+        <XStack space="$2" overflow="scroll" paddingVertical="$1">
           {photos.map((photo) => (
-             <Pressable key={photo.id} onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}>
-               <YStack 
-                 width={80} 
-                 height={80} 
-                 borderRadius={12} 
-                 overflow="hidden" 
-                 backgroundColor={theme.surfaceMuted}
-                 borderWidth={1}
-                 borderColor={theme.border}
-               >
-                 {photo.thumbnail_url ? (
-                   <Image 
-                     source={{ uri: photo.thumbnail_url }} 
-                     width={80} 
-                     height={80} 
-                     resizeMode="cover" 
-                   />
-                 ) : (
-                   <YStack flex={1} alignItems="center" justifyContent="center">
-                     <ImageIcon size={20} color={theme.muted} />
-                   </YStack>
-                 )}
-               </YStack>
-             </Pressable>
+            <Pressable key={photo.id} onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}>
+              <YStack
+                width={80}
+                height={80}
+                borderRadius={12}
+                overflow="hidden"
+                backgroundColor={theme.surfaceMuted}
+                borderWidth={1}
+                borderColor={theme.border}
+              >
+                {photo.thumbnail_url ? (
+                  <Image source={{ uri: photo.thumbnail_url }} width={80} height={80} resizeMode="cover" />
+                ) : (
+                  <YStack flex={1} alignItems="center" justifyContent="center">
+                    <ImageIcon size={20} color={theme.muted} />
+                  </YStack>
+                )}
+              </YStack>
+            </Pressable>
           ))}
-       </XStack>
-    </YStack>
+        </XStack>
+      </YStack>
+    </DashboardCard>
   );
 }
 
@@ -577,33 +618,41 @@ function AlertsSection({ event, stats, t }: any) {
    if (!limitWarnings.length) return null;
 
    return (
-      <YStack space="$2">
-         {limitWarnings.map((w: any, idx: number) => {
-            const isDanger = w.tone === 'danger';
-            const bg = isDanger ? theme.dangerBg : theme.warningBg;
-            const border = isDanger ? theme.dangerText : theme.warningBorder;
-            const text = isDanger ? theme.dangerText : theme.warningText;
-            const Icon = isDanger ? AlertCircle : Bell;
+      <DashboardCard>
+        <YStack space="$2">
+          <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
+            {t('management:alertsTitle', 'Alerts')}
+          </Text>
+          <Separator backgroundColor={theme.border} opacity={0.6} />
+          <YStack space="$2">
+            {limitWarnings.map((w: any, idx: number) => {
+              const isDanger = w.tone === 'danger';
+              const bg = isDanger ? theme.dangerBg : theme.warningBg;
+              const border = isDanger ? theme.dangerText : theme.warningBorder;
+              const text = isDanger ? theme.dangerText : theme.warningText;
+              const Icon = isDanger ? AlertCircle : Bell;
 
-            return (
-            <XStack 
-               key={idx} 
-               backgroundColor={bg} 
-               padding="$3" 
-               borderRadius={12} 
-               borderWidth={1} 
-               borderColor={border}
-               alignItems="center"
-               space="$2"
-            >
-               <Icon size={16} color={text} />
-               <Text fontSize="$sm" color={text} fontWeight="600">
-                  {w.message}
-               </Text>
-            </XStack>
-            );
-         })}
-      </YStack>
+              return (
+                <XStack
+                  key={idx}
+                  backgroundColor={bg}
+                  padding="$3"
+                  borderRadius={12}
+                  borderWidth={1}
+                  borderColor={border}
+                  alignItems="center"
+                  space="$2"
+                >
+                  <Icon size={16} color={text} />
+                  <Text fontSize="$sm" color={text} fontWeight="600">
+                    {w.message}
+                  </Text>
+                </XStack>
+              );
+            })}
+          </YStack>
+        </YStack>
+      </DashboardCard>
    );
 }
 
@@ -619,7 +668,20 @@ function EmptyState({ canManage, onCreate }: any) {
          <Text fontSize="$sm" color={theme.muted} textAlign="center">
             {t('mobile:header.noEventsBody', 'Create your first event.')}
          </Text>
-         {canManage && <ModernButton label={t('management:events.list.actions.create', 'Create Event')} onPress={onCreate} />}
+         {canManage ? (
+           <Button
+             onPress={onCreate}
+             backgroundColor={theme.primary}
+             borderColor="transparent"
+             height={48}
+             borderRadius={16}
+             paddingHorizontal="$4"
+           >
+             <Text fontSize="$sm" fontWeight="800" color="white">
+               {t('management:events.list.actions.create', 'Create Event')}
+             </Text>
+           </Button>
+         ) : null}
       </YStack>
    );
 }

resources/js/admin/mobile/__tests__/DashboardPage.test.tsx

@@ -194,6 +194,38 @@ vi.mock('@tamagui/stacks', () => ({
   XStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }));
 
+vi.mock('@tamagui/button', () => ({
+  Button: ({ children, onPress }: { children: React.ReactNode; onPress?: () => void }) => (
+    <button type="button" onClick={onPress}>
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock('@tamagui/list-item', () => ({
+  ListItem: ({
+    title,
+    subTitle,
+    iconAfter,
+    onPress,
+  }: {
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    iconAfter?: React.ReactNode;
+    onPress?: () => void;
+  }) => (
+    <button type="button" onClick={onPress}>
+      {title}
+      {subTitle}
+      {iconAfter}
+    </button>
+  ),
+}));
+
+vi.mock('tamagui', () => ({
+  Separator: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+}));
+
 vi.mock('@tamagui/text', () => ({
   SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
 }));
@@ -226,6 +258,7 @@ vi.mock('../theme', () => ({
   },
   useAdminTheme: () => ({
     textStrong: '#0f172a',
+    text: '#0f172a',
     muted: '#64748b',
     border: '#e2e8f0',
     surface: '#ffffff',
@@ -233,6 +266,13 @@ vi.mock('../theme', () => ({
     primary: '#ff5a5f',
     surfaceMuted: '#f8fafc',
     shadow: 'rgba(15,23,42,0.12)',
+    success: '#16a34a',
+    successText: '#166534',
+    dangerBg: '#fee2e2',
+    dangerText: '#b91c1c',
+    warningBg: '#fef9c3',
+    warningBorder: '#fef08a',
+    warningText: '#92400e',
   }),
 }));