weiterer fortschritt mit tamagui und dem neuen mobile event admin

resources/js/admin/mobile/ProfilePage.tsx

@@ -4,12 +4,11 @@ import { useTranslation } from 'react-i18next';
 import { LogOut, User, Settings, Shield, Globe, Moon } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
-import { MobileScaffold } from './components/Scaffold';
+import { Pressable } from '@tamagui/react-native-web-lite';
+import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton } from './components/Primitives';
-import { BottomNav } from './components/BottomNav';
 import { useAuth } from '../auth/context';
 import { fetchTenantProfile } from '../api';
-import { useMobileNav } from './hooks/useMobileNav';
 import { adminPath } from '../constants';
 import i18n from '../i18n';
 
@@ -17,7 +16,6 @@ export default function MobileProfilePage() {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
   const { t } = useTranslation('management');
-  const { go } = useMobileNav();
 
   const [name, setName] = React.useState(user?.name ?? 'Guest');
   const [email, setEmail] = React.useState(user?.email ?? '');
@@ -39,12 +37,10 @@ export default function MobileProfilePage() {
   }, [email, name, role]);
 
   return (
-    <MobileScaffold
+    <MobileShell
+      activeTab="profile"
       title={t('profile.title', 'Profile')}
       onBack={() => navigate(-1)}
-      footer={
-        <BottomNav active="profile" onNavigate={go} />
-      }
     >
       <MobileCard space="$3" alignItems="center">
         <XStack
@@ -74,7 +70,7 @@ export default function MobileProfilePage() {
         <Text fontSize="$md" fontWeight="800" color="#111827">
           {t('profile.settings', 'Settings')}
         </Text>
-        <Pressable onPress={() => navigate(adminPath('/settings'))}>
+        <Pressable onPress={() => navigate(adminPath('/mobile/settings'))}>
           <XStack alignItems="center" justifyContent="space-between" paddingVertical="$2" borderBottomWidth={1} borderColor="#e5e7eb">
             <Text fontSize="$sm" color="#111827">
               {t('profile.account', 'Account & Security')}
@@ -82,6 +78,22 @@ export default function MobileProfilePage() {
             <Settings size={18} color="#9ca3af" />
           </XStack>
         </Pressable>
+        <Pressable onPress={() => navigate(adminPath('/mobile/billing#packages'))}>
+          <XStack alignItems="center" justifyContent="space-between" paddingVertical="$2" borderBottomWidth={1} borderColor="#e5e7eb">
+            <Text fontSize="$sm" color="#111827">
+              {t('billing.sections.packages.title', 'Packages & Billing')}
+            </Text>
+            <Settings size={18} color="#9ca3af" />
+          </XStack>
+        </Pressable>
+        <Pressable onPress={() => navigate(adminPath('/mobile/billing#invoices'))}>
+          <XStack alignItems="center" justifyContent="space-between" paddingVertical="$2">
+            <Text fontSize="$sm" color="#111827">
+              {t('billing.sections.invoices.title', 'Invoices & Payments')}
+            </Text>
+            <Settings size={18} color="#9ca3af" />
+          </XStack>
+        </Pressable>
         <XStack alignItems="center" justifyContent="space-between" paddingVertical="$2" borderBottomWidth={1} borderColor="#e5e7eb">
           <XStack space="$2" alignItems="center">
             <Globe size={16} color="#6b7280" />
@@ -127,6 +139,6 @@ export default function MobileProfilePage() {
           navigate(adminPath('/logout'));
         }}
       />
-    </MobileScaffold>
+    </MobileShell>
   );
 }