Guard App: Certifications chips open Documents Screen

guard_app/src/navigation/AppNavigator.tsx

@@ -9,6 +9,7 @@
 import ShiftDetailsScreen from '../screen/ShiftDetailsScreen';
 import SignupScreen from '../screen/signupscreen';
 import SplashScreen from '../screen/SplashScreen';
+import DocumentsScreen from '../screen/DocumentsScreen';
 
 export type RootStackParamList = {
   AppTabs: undefined;
@@ -20,18 +21,20 @@
   Messages: undefined;
 
   Notifications: undefined;
+  Documents: { docType?: string } | undefined;
   ShiftDetails: { shift: any; refresh?: () => void };
 };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
 export default function AppNavigator() {
   return (
-    <Stack.Navigator initialRouteName="Splash" screenOptions={{ headerShown: false }}>
+    <Stack.Navigator initialRouteName="AppTabs" screenOptions={{ headerShown: false }}>
       <Stack.Screen name="AppTabs" component={AppTabs} />
       <Stack.Screen name="Splash" component={SplashScreen} />
       <Stack.Screen name="Login" component={LoginScreen} />
       <Stack.Screen name="Signup" component={SignupScreen} />
+      <Stack.Screen name="Documents" component={DocumentsScreen} />
       <Stack.Screen
         name="Settings"
         component={SettingsScreen}

guard_app/src/screen/ProfileScreen.tsx

@@ -9,6 +9,7 @@ import {
   SafeAreaView,
   ScrollView,
   TouchableOpacity,
+  Pressable,
   Image,
 } from 'react-native';
 
@@ -197,10 +198,14 @@ export default function ProfileScreen({ navigation, route }: any) {
         <View style={styles.card}>
           <Text style={styles.cardTitle}>Certifications</Text>
           <View style={styles.badgesRow}>
-            {['Security License', 'CPR', 'First Aid'].map((badge, index) => (
-              <View key={index} style={styles.badge}>
+            {['Security License', 'CPR', 'First Aid'].map((badge) => (
+              <Pressable
+                key={badge}
+                style={({ pressed }) => [styles.badge, pressed && { opacity: 0.7 }]}
+                onPress={() => navigation.navigate('Documents', { docType: badge })}
+              >
                 <Text style={styles.badgeText}>{badge}</Text>
-              </View>
+              </Pressable>
             ))}
           </View>
         </View>