refactor and update app navigator

mobile/src/navigation/AppNavigator.tsx

@@ -2,16 +2,20 @@ import React from 'react';
 import { View, ActivityIndicator } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import AuthScreen from '../screens/AuthScreen';
-import HomeScreen from '../screens/HomeScreen';
 import TabNavigator from './TabNavigator';
+import EditProfileScreen from '../screens/EditProfileScreen';
+import DocumentViewScreen from '../screens/DocumentViewScreen';
 import ForgotPasswordScreen from '../screens/ForgotPasswordScreen';
 import { useAuthStore } from '../store/useAuthStore';
 
-// Define the types for your stack
+// Define the types for the stack
 export type RootStackParamList = {
   Auth: undefined;
   Home: undefined; // This is now a nested navigator
-  Main: undefined; // The tab navigator 'Main'
+  Main: undefined; // The tab navigator
+  EditProfile: undefined;
+  DocumentView: { uri: string };
+  ForgotPassword: undefined;
 };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -29,20 +33,40 @@ export default function AppNavigator() {
   }
 
   return (
-    <Stack.Navigator screenOptions={{ headerShown: false }}>
+    <Stack.Navigator id="RootStack" screenOptions={{ headerShown: false }}>
       {user ? (
         // Screens for logged-in users
-                      <Stack.Screen name="Main" component={TabNavigator} options={{ headerShown: false }} />
+        <>
+          <Stack.Screen name="Main" component={TabNavigator} options={{ headerShown: false }} />
+          <Stack.Screen
+            name="EditProfile"
+            component={EditProfileScreen}
+            options={{
+              title: 'Edit Profile',
+              headerBackTitle: '',
+              headerShown: true,
+            }}
+          />
+          <Stack.Screen
+            name="DocumentView"
+            component={DocumentViewScreen}
+            options={{
+              title: 'Document',
+              headerBackTitle: '',
+              headerShown: true,
+            }}
+          />
+        </>
       ) : (
         // Screens for logged-out users
-        <Stack.Group>
+        <>
           <Stack.Screen name="Auth" component={AuthScreen} />
           <Stack.Screen 
             name="ForgotPassword" 
             component={ForgotPasswordScreen}
             options={{ presentation: 'fullScreenModal' }}
           />
-        </Stack.Group>
+        </>
       )}
     </Stack.Navigator>
   );