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>
   );
-}
+}