From 64c9d7357a48633ef94d1fd80e8feb77491e3814 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Thu, 22 Jan 2026 16:31:46 +0100
Subject: [PATCH] Embed quick actions header

---
 resources/js/admin/mobile/DashboardPage.tsx | 96 +++++++++++----------
 1 file changed, 50 insertions(+), 46 deletions(-)

diff --git a/resources/js/admin/mobile/DashboardPage.tsx b/resources/js/admin/mobile/DashboardPage.tsx
index 73a3129..fc3bff8 100644
--- a/resources/js/admin/mobile/DashboardPage.tsx
+++ b/resources/js/admin/mobile/DashboardPage.tsx
@@ -237,10 +237,6 @@ 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}
@@ -532,52 +528,60 @@ function UnifiedToolGrid({ event, navigate, permissions, isMember, isCompleted }
   ].filter((section) => section.items.length > 0);
 
   return (
-    <YStack space="$3">
-      {sections.map((section) => (
-        <DashboardCard key={section.title} padding="$0">
-          <YStack padding="$3.5" paddingBottom="$2.5" space="$1">
+    <DashboardCard padding="$0">
+      <YStack padding="$3.5" space="$2">
+        <SectionHeader
+          title={t('dashboard:quickActions.title', 'Quick actions')}
+          subtitle={t('dashboard:quickActions.description', 'Jump straight to the most important actions.')}
+          showSeparator={false}
+          compact
+        />
+      </YStack>
+      <Separator backgroundColor={theme.border} opacity={0.6} />
+      <YStack padding="$3.5" 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>
-          </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} />
+            <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>
-                      </XStack>
-                    }
-                    iconAfter={<ChevronRight size={16} color={theme.muted} />}
-                  />
-                </YGroup.Item>
-              );
-            })}
-          </YGroup>
-        </DashboardCard>
-      ))}
-    </YStack>
+                      }
+                      iconAfter={<ChevronRight size={16} color={theme.muted} />}
+                    />
+                  </YGroup.Item>
+                );
+              })}
+            </YGroup>
+          </YStack>
+        ))}
+      </YStack>
+    </DashboardCard>
   );
 }