feat(admin): modernize tenant admin PWA with cockpit layout and slate theme

- Replaced rainbow grid with phase-aware cockpit layout
- Implemented smart lifecycle hero with readiness logic
- Introduced dark command bar header with context pill and search placeholder
- Updated global Tamagui theme to slate/indigo palette
- Refined bottom navigation with minimalist spotlight style

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

@@ -5,27 +5,28 @@ import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { Home, CheckSquare, Image as ImageIcon, User, LayoutDashboard } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { withAlpha } from './colors';
 import { useAdminTheme } from '../theme';
 import { adminPath } from '../../constants';
 
-const ICON_SIZE = 20;
+const ICON_SIZE = 24;
 
 export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';
 
 export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
   const { t } = useTranslation('mobile');
   const location = useLocation();
-  const { surface, border, primary, accent, muted, subtle, shadow, glassSurfaceStrong, glassBorder, glassShadow } = useAdminTheme();
-  const surfaceColor = glassSurfaceStrong ?? surface;
-  const navSurface = glassSurfaceStrong ?? withAlpha(surfaceColor, 0.92);
-  const navBorder = glassBorder ?? border;
-  const navShadow = glassShadow ?? shadow;
+  const theme = useAdminTheme();
+  
+  // Modern Glass Background
+  const navSurface = 'rgba(255, 255, 255, 0.85)';
+  const navBorder = theme.border;
+  const navShadow = theme.shadow;
+  
   const [pressedKey, setPressedKey] = React.useState<NavKey | null>(null);
 
   const isDeepHome = active === 'home' && location.pathname !== adminPath('/mobile/dashboard');
 
-  const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
+  const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string; strokeWidth?: number }>; label: string }> = [
     { key: 'home', icon: isDeepHome ? LayoutDashboard : Home, label: t('nav.home', 'Home') },
     { key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
     { key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
@@ -41,27 +42,29 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
       backgroundColor={navSurface}
       borderTopWidth={1}
       borderColor={navBorder}
-      paddingVertical="$2"
+      paddingVertical="$2.5"
       paddingHorizontal="$4"
       zIndex={50}
       shadowColor={navShadow}
-      shadowOpacity={0.12}
-      shadowRadius={16}
-      shadowOffset={{ width: 0, height: -6 }}
-      // allow for safe-area inset on modern phones
+      shadowOpacity={0.08}
+      shadowRadius={20}
+      shadowOffset={{ width: 0, height: -8 }}
       style={{
         paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)',
-        backdropFilter: 'blur(14px)',
-        WebkitBackdropFilter: 'blur(14px)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
       }}
     >
-      <XStack width="100%" maxWidth={800} marginHorizontal="auto" justifyContent="space-between" alignItems="center">
+      <XStack width="100%" maxWidth={800} marginHorizontal="auto" justifyContent="space-around" alignItems="center">
         {items.map((item) => {
           const activeState = item.key === active;
           const isPressed = pressedKey === item.key;
           const IconCmp = item.icon;
-          const activeBg = primary;
-          const activeShadow = withAlpha(primary, 0.4);
+          
+          // Dynamic Styles
+          const color = activeState ? theme.primary : theme.subtle;
+          const strokeWidth = activeState ? 2.5 : 2;
+          
           return (
             <Pressable
               key={item.key}
@@ -69,48 +72,36 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
               onPressIn={() => setPressedKey(item.key)}
               onPressOut={() => setPressedKey(null)}
               onPointerLeave={() => setPressedKey(null)}
+              style={{ flex: 1 }}
             >
               <YStack
-                flexGrow={1}
-                flexBasis="0%"
                 alignItems="center"
                 justifyContent="center"
                 space="$1"
-                position="relative"
-                minWidth={88}
-                minHeight={64}
-                paddingHorizontal="$3"
-                paddingVertical="$2"
-                borderRadius={12}
-                backgroundColor={activeState ? activeBg : 'transparent'}
-                gap="$1"
+                minHeight={50}
                 style={{
-                  boxShadow: activeState ? `0 10px 22px ${activeShadow}` : undefined,
-                  transform: isPressed ? 'scale(0.96)' : 'scale(1)',
-                  opacity: isPressed ? 0.9 : 1,
-                  transition: 'transform 140ms ease, background-color 140ms ease, opacity 140ms ease',
+                  transform: isPressed ? 'scale(0.92)' : (activeState ? 'scale(1.05)' : 'scale(1)'),
+                  transition: 'transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
                 }}
               >
-                {activeState ? (
-                  <YStack
-                    position="absolute"
-                    top={6}
-                    width={28}
-                    height={3}
-                    borderRadius={999}
-                    backgroundColor={accent}
-                  />
-                ) : null}
-                <YStack width={ICON_SIZE} height={ICON_SIZE} alignItems="center" justifyContent="center" shrink={0}>
-                  <IconCmp size={ICON_SIZE} color={activeState ? 'white' : subtle} />
-                </YStack>
+                {activeState && (
+                   <YStack 
+                      position="absolute" 
+                      top={-12} 
+                      width={4} 
+                      height={4} 
+                      borderRadius={2} 
+                      backgroundColor={theme.primary} 
+                   />
+                )}
+                
+                <IconCmp size={ICON_SIZE} color={color} strokeWidth={strokeWidth} />
+                
                 <Text
-                  fontSize="$xs"
-                  fontWeight="700"
-                  fontFamily="$body"
-                  color={activeState ? 'white' : muted}
+                  fontSize={10}
+                  fontWeight={activeState ? "700" : "500"}
+                  color={color}
                   textAlign="center"
-                  flexShrink={1}
                 >
                   {item.label}
                 </Text>
@@ -121,4 +112,4 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
       </XStack>
     </YStack>
   );
-}
+}

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

@@ -1,9 +1,10 @@
 import React, { Suspense } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { ChevronLeft, Bell, QrCode, ChevronsUpDown } from 'lucide-react';
+import { ChevronLeft, Bell, QrCode, ChevronsUpDown, Search } from 'lucide-react';
 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 { useTranslation } from 'react-i18next';
 import { useEventContext } from '../../context/EventContext';
 import { BottomNav, NavKey } from './BottomNav';
@@ -39,37 +40,21 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
   const { t } = useTranslation('mobile');
   const { count: notificationCount } = useNotificationsBadge();
   const online = useOnlineStatus();
-  const {
-    background,
-    surface,
-    border,
-    text,
-    muted,
-    warningBg,
-    warningText,
-    primary,
-    danger,
-    shadow,
-    glassSurfaceStrong,
-    glassBorder,
-    glassShadow,
-    appBackground,
-  } = useAdminTheme();
-  const backgroundColor = background;
-  const surfaceColor = surface;
-  const borderColor = border;
-  const textColor = text;
-  const mutedText = muted;
-  const headerSurface = glassSurfaceStrong ?? withAlpha(surfaceColor, 0.94);
-  const headerBorder = glassBorder ?? borderColor;
-  const actionSurface = glassSurfaceStrong ?? surfaceColor;
-  const actionBorder = glassBorder ?? borderColor;
-  const actionShadow = glassShadow ?? shadow;
+  
+  const theme = useAdminTheme();
+  
+  const backgroundColor = theme.background;
+  
+  // --- DARK HEADER ---
+  const headerSurface = '#0F172A'; // Slate 900
+  const actionSurface = 'rgba(255, 255, 255, 0.1)';
+  const actionBorder = 'rgba(255, 255, 255, 0.05)';
+  const textColor = 'white';
+  
   const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
   const [loadingEvents, setLoadingEvents] = React.useState(false);
   const [attemptedFetch, setAttemptedFetch] = React.useState(false);
   const [queuedPhotoCount, setQueuedPhotoCount] = React.useState(0);
-  const [isCompactHeader, setIsCompactHeader] = React.useState(false);
 
   const effectiveEvents = events.length ? events : fallbackEvents;
   const effectiveActive = activeEvent ?? (effectiveEvents.length === 1 ? effectiveEvents[0] : null);
@@ -93,13 +78,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
 
   React.useEffect(() => {
     const path = `${location.pathname}${location.search}${location.hash}`;
-    
-    // Blacklist transient paths from being saved in tab history
-    const isBlacklisted = 
-      location.pathname.includes('/billing/shop') || 
-      location.pathname.includes('/welcome');
-
-    if (!isBlacklisted) {
+    if (!location.pathname.includes('/billing/shop') && !location.pathname.includes('/welcome')) {
       setTabHistory(activeTab, path);
     }
   }, [activeTab, location.hash, location.pathname, location.search]);
@@ -116,44 +95,18 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
   React.useEffect(() => {
     const handleFocus = () => refreshQueuedActions();
     window.addEventListener('focus', handleFocus);
-    return () => {
-      window.removeEventListener('focus', handleFocus);
-    };
+    return () => window.removeEventListener('focus', handleFocus);
   }, [refreshQueuedActions]);
 
-  React.useEffect(() => {
-    if (typeof window === 'undefined' || !window.matchMedia) {
-      return;
-    }
-    const query = window.matchMedia('(max-width: 520px)');
-    const handleChange = (event: MediaQueryListEvent) => {
-      setIsCompactHeader(event.matches);
-    };
-    setIsCompactHeader(query.matches);
-    query.addEventListener?.('change', handleChange);
-    return () => {
-      query.removeEventListener?.('change', handleChange);
-    };
-  }, []);
-
   const pageTitle = title ?? t('header.appName', 'Event Admin');
-  const eventContext = !isCompactHeader
-    ? effectiveActive
-      ? resolveEventDisplayName(effectiveActive)
-      : hasMultipleEvents
-        ? t('header.selectEvent', 'Select an event')
-        : null
-    : null;
-  const subtitleText = subtitle ?? eventContext ?? '';
+  const isEventsIndex = location.pathname === ADMIN_EVENTS_PATH;
+  const canSwitchEvents = hasMultipleEvents && !isEventsIndex;
   const isMember = user?.role === 'member';
   const memberPermissions = Array.isArray(effectiveActive?.member_permissions) ? effectiveActive?.member_permissions ?? [] : [];
+  
   const allowPermission = (permission: string) => {
-    if (!isMember) {
-      return true;
-    }
-    if (memberPermissions.includes('*') || memberPermissions.includes(permission)) {
-      return true;
-    }
+    if (!isMember) return true;
+    if (memberPermissions.includes('*') || memberPermissions.includes(permission)) return true;
     if (permission.includes(':')) {
       const [prefix] = permission.split(':');
       return memberPermissions.includes(`${prefix}:*`);
@@ -161,85 +114,107 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
     return false;
   };
   const showQr = Boolean(effectiveActive?.slug) && allowPermission('join-tokens:manage');
+
+  // --- CONTEXT PILL ---
+  const EventContextPill = () => {
+    if (!effectiveActive || isEventsIndex) {
+       return (
+         <Text fontSize="$md" fontWeight="800" fontFamily="$display" color="white">
+            {pageTitle}
+         </Text>
+       );
+    }
+
+    const displayName = resolveEventDisplayName(effectiveActive);
+
+    if (!canSwitchEvents) {
+       return (
+         <Text fontSize="$sm" fontWeight="800" color="white" numberOfLines={1} ellipsizeMode="tail">
+            {displayName}
+         </Text>
+       );
+    }
+
+    return (
+      <Pressable onPress={() => navigate(ADMIN_EVENTS_PATH)}>
+        <XStack 
+           backgroundColor="rgba(255, 255, 255, 0.12)" 
+           paddingHorizontal="$3" 
+           paddingVertical="$1.5" 
+           borderRadius={999}
+           alignItems="center"
+           space="$1.5"
+           maxWidth={220}
+           borderWidth={1}
+           borderColor="rgba(255, 255, 255, 0.08)"
+           pressStyle={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
+        >
+           <Text 
+              fontSize="$sm" 
+              fontWeight="700" 
+              color="white" 
+              numberOfLines={1} 
+              ellipsizeMode="tail"
+              flexShrink={1}
+           >
+              {displayName}
+           </Text>
+           <ChevronsUpDown size={14} color="rgba(255,255,255,0.6)" />
+        </XStack>
+      </Pressable>
+    );
+  };
+
   const headerBackButton = onBack ? (
     <HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
       <XStack alignItems="center" space="$1.5">
-        <ChevronLeft size={28} color={primary} strokeWidth={2.5} />
+        <ChevronLeft size={28} color="white" strokeWidth={2.5} />
       </XStack>
     </HeaderActionButton>
   ) : (
-    <XStack width={28} />
+    <HeaderActionButton onPress={() => {}} ariaLabel="Search">
+       <XStack width={36} height={36} borderRadius={10} alignItems="center" justifyContent="center">
+          <Search size={22} color="rgba(255,255,255,0.8)" strokeWidth={2.5} />
+       </XStack>
+    </HeaderActionButton>
   );
-  const headerTitleRight = (
-    <YStack alignItems="flex-end" maxWidth="100%">
-      <Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}>
-        {pageTitle}
-      </Text>
-      {subtitleText ? (
-        <Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body">
-          {subtitleText}
-        </Text>
-      ) : null}
-    </YStack>
-  );
-  const headerTitleCenter = (
-    <YStack alignItems="center" maxWidth="100%">
-      <Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="center" numberOfLines={1}>
-        {pageTitle}
-      </Text>
-      {subtitleText ? (
-        <Text fontSize="$xs" color={mutedText} textAlign="center" numberOfLines={1} fontFamily="$body">
-          {subtitleText}
-        </Text>
-      ) : null}
-    </YStack>
-  );
-  const isEventsIndex = location.pathname === ADMIN_EVENTS_PATH;
-  const canSwitchEvents = hasMultipleEvents && !isEventsIndex;
+  
   const headerActionsRow = (
-    <XStack alignItems="center" space="$2">
-      {canSwitchEvents ? (
-        <HeaderActionButton onPress={() => navigate(ADMIN_EVENTS_PATH)} ariaLabel={t('header.switchEvent', 'Switch event')}>
+    <XStack alignItems="center" space="$2.5">
+      {showQr ? (
+        <HeaderActionButton
+          onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
+          ariaLabel={t('header.quickQr', 'Quick QR')}
+        >
           <XStack
-            width={34}
-            height={34}
-            borderRadius={12}
-            backgroundColor={actionSurface}
-            borderWidth={1}
-            borderColor={actionBorder}
+            width={36}
+            height={36}
+            borderRadius={10}
+            backgroundColor="rgba(255, 255, 255, 0.15)"
             alignItems="center"
             justifyContent="center"
-            style={{
-              boxShadow: `0 10px 18px ${actionShadow}`,
-              backdropFilter: 'blur(12px)',
-              WebkitBackdropFilter: 'blur(12px)',
-            }}
           >
-            <ChevronsUpDown size={16} color={textColor} />
+            <QrCode size={18} color="white" />
           </XStack>
         </HeaderActionButton>
       ) : null}
+
       <HeaderActionButton
         onPress={() => navigate(adminPath('/mobile/notifications'))}
         ariaLabel={t('mobile.notifications', 'Notifications')}
       >
         <XStack
-          width={34}
-          height={34}
-          borderRadius={12}
+          width={36}
+          height={36}
+          borderRadius={10}
           backgroundColor={actionSurface}
           borderWidth={1}
           borderColor={actionBorder}
           alignItems="center"
           justifyContent="center"
           position="relative"
-          style={{
-            boxShadow: `0 10px 18px ${actionShadow}`,
-            backdropFilter: 'blur(12px)',
-            WebkitBackdropFilter: 'blur(12px)',
-          }}
         >
-          <Bell size={16} color={textColor} />
+          <Bell size={18} color="white" />
           {notificationCount > 0 ? (
             <YStack
               position="absolute"
@@ -249,9 +224,11 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
               height={18}
               paddingHorizontal={6}
               borderRadius={999}
-              backgroundColor={danger}
+              backgroundColor={theme.accent}
               alignItems="center"
               justifyContent="center"
+              borderWidth={2}
+              borderColor={headerSurface} 
             >
               <Text fontSize={10} color="white" fontWeight="700">
                 {notificationCount > 9 ? '9+' : notificationCount}
@@ -260,24 +237,26 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
           ) : null}
         </XStack>
       </HeaderActionButton>
-      {showQr ? (
-        <HeaderActionButton
-          onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
-          ariaLabel={t('header.quickQr', 'Quick QR')}
+
+      {/* User Avatar */}
+      <Pressable onPress={() => navigate(adminPath('/mobile/profile'))}>
+        <XStack 
+           width={36} height={36} borderRadius={18} 
+           backgroundColor={actionSurface} 
+           overflow="hidden" 
+           alignItems="center" justifyContent="center"
+           borderWidth={1} borderColor={actionBorder}
         >
-          <XStack
-            width={34}
-            height={34}
-            borderRadius={12}
-            backgroundColor={primary}
-            alignItems="center"
-            justifyContent="center"
-            style={{ boxShadow: `0 10px 18px ${withAlpha(primary, 0.32)}` }}
-          >
-            <QrCode size={16} color="white" />
-          </XStack>
-        </HeaderActionButton>
-      ) : null}
+           {user?.avatar_url ? (
+              <Image source={{ uri: user.avatar_url }} width={36} height={36} resizeMode="cover" />
+           ) : (
+              <Text fontSize="$xs" fontWeight="700" color="white">
+                 {user?.name?.charAt(0).toUpperCase() ?? 'U'}
+              </Text>
+           )}
+        </XStack>
+      </Pressable>
+
       {headerActions ?? null}
     </XStack>
   );
@@ -287,19 +266,12 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
       backgroundColor={backgroundColor}
       minHeight="100vh"
       alignItems="center"
-      style={{ background: appBackground }}
     >
       <YStack
         backgroundColor={headerSurface}
-        borderBottomWidth={1}
-        borderColor={headerBorder}
         paddingHorizontal="$4"
         paddingTop="$4"
         paddingBottom="$3"
-        shadowColor={actionShadow}
-        shadowOpacity={0.08}
-        shadowRadius={14}
-        shadowOffset={{ width: 0, height: 8 }}
         width="100%"
         maxWidth={800}
         position="sticky"
@@ -307,37 +279,19 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
         zIndex={60}
         style={{
           paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
-          backdropFilter: 'blur(12px)',
-          WebkitBackdropFilter: 'blur(12px)',
         }}
       >
-        {isCompactHeader ? (
-          <XStack
-            alignItems="center"
-            justifyContent="space-between"
-            minHeight={48}
-            space="$3"
-            flexWrap="wrap"
-          >
+        <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$2">
             {headerBackButton}
-            <XStack flex={1} minWidth={120} justifyContent="center">
-              {headerTitleCenter}
+            
+            <XStack flex={1} justifyContent="center" alignItems="center">
+               <EventContextPill />
             </XStack>
-            <XStack justifyContent="flex-end" flexShrink={0} style={{ marginLeft: 'auto' }}>
+
+            <XStack justifyContent="flex-end" minWidth={28}>
               {headerActionsRow}
             </XStack>
-          </XStack>
-        ) : (
-          <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
-            {headerBackButton}
-            <XStack alignItems="center" space="$2.5" flex={1} justifyContent="flex-end" minWidth={0}>
-              <XStack flex={1} minWidth={0} justifyContent="flex-end">
-                {headerTitleRight}
-              </XStack>
-              {headerActionsRow}
-            </XStack>
-          </XStack>
-        )}
+        </XStack>
       </YStack>
 
       <YStack
@@ -350,25 +304,18 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
         style={{ paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)' }}
       >
         {!online ? (
-          <XStack
-            alignItems="center"
-            justifyContent="center"
-            borderRadius={12}
-            backgroundColor={warningBg}
-            paddingVertical="$2"
-            paddingHorizontal="$3"
-          >
-            <Text fontSize="$xs" fontWeight="700" color={warningText}>
+          <XStack alignItems="center" justifyContent="center" borderRadius={12} backgroundColor={theme.warningBg} paddingVertical="$2" paddingHorizontal="$3">
+            <Text fontSize="$xs" fontWeight="700" color={theme.warningText}>
               {t('status.offline', 'Offline mode: changes will sync when you are back online.')}
             </Text>
           </XStack>
         ) : null}
         {queuedPhotoCount > 0 ? (
           <MobileCard space="$2">
-            <Text fontSize="$sm" fontWeight="700" color={textColor}>
+            <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
               {t('status.queueTitle', 'Photo actions pending')}
             </Text>
-            <Text fontSize="$xs" color={mutedText}>
+            <Text fontSize="$xs" color={theme.muted}>
               {online
                 ? t('status.queueBodyOnline', '{{count}} actions ready to sync.', { count: queuedPhotoCount })
                 : t('status.queueBodyOffline', '{{count}} actions saved offline.', { count: queuedPhotoCount })}
@@ -387,7 +334,6 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
       </YStack>
 
       <BottomNav active={activeTab} onNavigate={go} />
-
     </YStack>
   );
 }
@@ -418,17 +364,4 @@ export function HeaderActionButton({
       {children}
     </Pressable>
   );
-}
-
-export function renderEventLocation(event?: TenantEvent | null): string {
-  if (!event) return 'Location';
-  const settings = (event.settings ?? {}) as Record<string, unknown>;
-  const candidate =
-    (settings.location as string | undefined) ??
-    (settings.address as string | undefined) ??
-    (settings.city as string | undefined);
-  if (candidate && candidate.trim()) {
-    return candidate;
-  }
-  return 'Location';
-}
+}