chat-bot-code-resolved-conflicts

android/app/src/main/AndroidManifest.xml

@@ -14,7 +14,8 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
-      android:theme="@style/AppTheme">
+      android:theme="@style/AppTheme"
+      android:usesCleartextTraffic="true">
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

android/gradle.properties

@@ -42,5 +42,5 @@ hermesEnabled=true
 
 MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
 MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
-MYAPP_UPLOAD_STORE_PASSWORD=midwife
-MYAPP_UPLOAD_KEY_PASSWORD=midwife
+MYAPP_UPLOAD_STORE_PASSWORD=password
+MYAPP_UPLOAD_KEY_PASSWORD=password
\ No newline at end of file

src/constants/colors.js

@@ -21,4 +21,12 @@ export default {
   purple_new: '#AC87C5',
   pink_new: '#FF8080',
   pastal_blue: '#7469B6',
+  red: '#DC143C',
+  cadmium_Green: '#5EAAA8',
+  main_blue: '#6096B4',
+  dark_Pink: '#D885A3',
+  light_yellow: '#FFDBA4',
+  orange: '#C7B198',
+  pink_dark: '#FFC4E1',
+  light_gray: '#D3DEDC',
 };

src/constants/imgs.js

@@ -16,7 +16,6 @@ export default {
   sk_15: require('../assets/sk_15.png'),
   sk_16: require('../assets/sk_16.png'),
 
-
   //games
   game_img_1: require('../assets/game_img_1.png'),
   game_img_2: require('../assets/game_img_2.png'),
@@ -66,4 +65,15 @@ export default {
   home_page: require('../assets/home_page.png'),
   well_being: require('../assets/games/wellBeing.jpg'),
   motherWithMidWife: require('../assets/games/motherAndMidWife.jpg'),
+  user_profile_image: require('../assets/user_profile.png'),
+  lip_stick: require('../assets/games/lipstick.png'),
+  ring: require('../assets/games/ring.png'),
+  play_pen: require('../assets/games/play_pen.png'),
+  milk_bottle: require('../assets/games/milk_bottle.png'),
+  high_chair: require('../assets/games/high_chair.png'),
+  home_exercises: require('../assets/running-pregnant-woman.png'),
+  home_mental_well_being: require('../assets/relaxing-mind.png'),
+  home_emotional_support: require('../assets/virtual-assistant.png'),
+  home_skin: require('../assets/home_skin.png'),
+  logo: require('../assets/foreground.png'),
 };

src/constants/routes.js

@@ -2,17 +2,13 @@ export default {
   LOGIN: 'Login',
   REGISTER: 'Register',
   FORGOT_PASSWORD: 'Forgot_Password',
-
+  PROFILE: 'UserProfile',
   HOME: 'Home',
   HOME_TAB: 'Home_Tab',
-
   WALLET: 'Wallet',
-
   NOTIFICATIONS: 'Notifications',
-
   SETTINGS: 'Settings',
   SETTINGS_NAVIGATOR: 'Welcome',
-
   SETTINGS_DETAIL: 'Settings_Detail',
 
   //EXERCISES
@@ -29,7 +25,6 @@ export default {
   EXERCISE_NEW_PROGRESS: 'Exercise_NEW_PROGRESS',
 
   //skin
-
   SKIN_WELCOME: 'Skin_Welcome',
   SKIN_UPLOAD: 'Skin_Upload',
   SKIN_RISK: 'Skin_Risk',
@@ -39,11 +34,9 @@ export default {
   SKIN_VIDEO3: 'Skin_Video3',
   SKIN_VIDEO4: 'Skin_Video4',
   SKIN_VIDEO5: 'Skin_Video5',
-
   SKIN_INFO: 'skin_info',
 
   //GAMES
-  GAME_HOME: 'Game_Home',
   GAME_WELCOME: 'Game_Welcome',
   GAME_FORM: 'Game_Form',
   GAME_MAIN_MENU: 'Game_Home_Menu',
@@ -69,6 +62,9 @@ export default {
   Game02Level05: 'Game02Level05',
   Game02Level06: 'Game02Level06',
   Game02Level07: 'Game02Level07',
+  Game02Level08: 'Game02Level08',
+  Game02Level09: 'Game02Level09',
+  Game02Level10: 'Game02Level10',
   GameLevelPage: 'GameLevelPage',
   MainDetailsFormInSinhala: 'MainDetailsFormInSinhala',
   Level01: 'Level01',
@@ -88,5 +84,8 @@ export default {
   CHAT_HOME: 'chat_home',
   CHAT_SCREEN: 'chat_screen',
 
+  Game02ProgressLevel10: 'Game02ProgressLevel10',
+  Game02ProgressLevel09: 'Game02ProgressLevel09',
+  Game02ProgressLevel08: 'Game02ProgressLevel08',
+  Game02ProgressLevel07: 'Game02ProgressLevel07',
 };
-

src/navigations/AuthNavigator.js

 import React, {useState, useEffect} from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import {createStackNavigator} from '@react-navigation/stack';
 import Login from '../screens/auth/Login';
 import Register from '../screens/auth/Register';
 import ForgotPassword from '../screens/auth/ForgotPassword';
 // import  { Login, Register, ForgotPassword}  from '../screens';
-import { ROUTES } from "../constants"
-import BottomTabNavigator from './BottomTabNavigator'
+import {ROUTES} from '../constants';
+import BottomTabNavigator from './BottomTabNavigator';
 const Stack = createStackNavigator();
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import ProfileNavigator from './ProfileNavigator';
 
 function AuthNavigator() {
-
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
   useEffect(() => {
@@ -60,23 +60,31 @@ function AuthNavigator() {
     // </Stack.Navigator>
     <Stack.Navigator
       screenOptions={{
-                headerBackTitleVisible: false
+        headerBackTitleVisible: false,
       }}
-            initialRouteName={ROUTES.LOGIN}
-        >
+      initialRouteName={ROUTES.LOGIN}>
       {isLoggedIn ? (
+        <>
           <Stack.Screen
             options={{
-                        headerShown: false
+              headerShown: false,
             }}
             name={ROUTES.HOME}
             component={BottomTabNavigator}
           />
+          <Stack.Screen
+            options={{
+              headerShown: false,
+            }}
+            name={ROUTES.PROFILE}
+            component={ProfileNavigator}
+          />
+        </>
       ) : (
         <>
           <Stack.Screen
             options={{
-                            headerShown: false
+              headerShown: false,
             }}
             name={ROUTES.LOGIN}
             component={Login}
@@ -84,7 +92,7 @@ function AuthNavigator() {
           <Stack.Screen
             options={{
               headerShown: false,
-                            headerBackTitleVisible: false
+              headerBackTitleVisible: false,
             }}
             name={ROUTES.REGISTER}
             component={Register}
@@ -95,11 +103,18 @@ function AuthNavigator() {
           />
           <Stack.Screen
             options={{
-                        headerShown: false
+              headerShown: false,
             }}
             name={ROUTES.HOME}
             component={BottomTabNavigator}
           />
+          <Stack.Screen
+            options={{
+              headerShown: false,
+            }}
+            name={ROUTES.PROFILE}
+            component={ProfileNavigator}
+          />
         </>
       )}
     </Stack.Navigator>

src/navigations/BottomTabNavigator.js

@@ -50,7 +50,7 @@ function BottomTabNavigator() {
             ) : (
               <Logo width={22} height={22} />
             );
-          } else if (route.name === ROUTES.GAME_HOME) {
+          } else if (route.name === ROUTES.GAME_WELCOME) {
             return focused ? (
               <Icon name="game-controller-sharp" size={22} color={color} />
             ) : (
@@ -80,7 +80,7 @@ function BottomTabNavigator() {
         }}
       />
       <Tab.Screen
-        name={ROUTES.GAME_HOME}
+        name={ROUTES.GAME_WELCOME}
         component={GameNavigator}
         options={{
           tabBarButton: props => <CustomTabBarButton {...props} />,

src/navigations/ExerciseNavigator.js

@@ -68,10 +68,10 @@ function ExerciseNavigator() {
         <>
           <Stack.Screen name={ROUTES.EXERCISE_WELCOME} component={WelcomeExercise} key="ExerciseWelcome" />
           <Stack.Screen name={ROUTES.EXERCISE_FORM} component={HealthFormExercise} key="ExerciseForm" />
-          <Stack.Screen name={ROUTES.EXERCISE_MAIN_NEW_MENU} component={MainMenuExercise} key="MainMenuNewExercise" />
-          <Stack.Screen name={ROUTES.EXERCISE_NEW_VIEW} component={ExerciseView} key="ExerciseNewView" />
-          <Stack.Screen name={ROUTES.EXERCISE_NEW_ACTION_VIEW} component={ExerciseActionView} key="ExerciseActionNewView" />
-          <Stack.Screen name={ROUTES.EXERCISE_NEW_PROGRESS} component={ExercisesProgress} key="ExercisesNewProgress" />
+          <Stack.Screen name={ROUTES.EXERCISE_MAIN_MENU} component={MainMenuExercise} key="MainMenuExercise" />
+          <Stack.Screen name={ROUTES.EXERCISE_VIEW} component={ExerciseView} key="ExerciseView" />
+          <Stack.Screen name={ROUTES.EXERCISE_ACTION_VIEW} component={ExerciseActionView} key="ExerciseActionView" />
+          <Stack.Screen name={ROUTES.EXERCISE_PROGRESS} component={ExercisesProgress} key="ExercisesProgress" />
         </>
       )}
     </Stack.Navigator>

src/navigations/GameNavigator.js

@@ -42,6 +42,13 @@ import Game02ProgressLevel04 from '../screens/home/game/game02/progress/Level04'
 import Game02ProgressLevel05 from '../screens/home/game/game02/progress/Level05';
 import Game02ProgressLevel06 from '../screens/home/game/game02/progress/Level06';
 import MentalWellBeingTypes from '../screens/home/game/MentalWellBeingTypes';
+import Game02ProgressLevel07 from '../screens/home/game/game02/progress/Level07';
+import Game02ProgressLevel08 from '../screens/home/game/game02/progress/Level08';
+import Game02ProgressLevel09 from '../screens/home/game/game02/progress/Level09';
+import Game02ProgressLevel10 from '../screens/home/game/game02/progress/Level10';
+import Game02Level10 from '../screens/home/game/game02/level10';
+import Game02Level09 from '../screens/home/game/game02/level09';
+import Game02Level08 from '../screens/home/game/game02/level08';
 const Stack = createStackNavigator();
 
 function GameNavigator() {
@@ -51,7 +58,7 @@ function GameNavigator() {
         headerBackTitleVisible: false,
         headerShown: false,
       }}
-      initialRouteName={ROUTES.EXERCISE_MAIN_MENU}>
+      initialRouteName={ROUTES.GAME_WELCOME}>
       <Stack.Screen name={ROUTES.GAME_WELCOME} component={WelcomePageGame} />
       <Stack.Screen
         name={ROUTES.GAME_QUIZ_OPTIONS}
@@ -106,6 +113,9 @@ function GameNavigator() {
       <Stack.Screen name={ROUTES.Game02Level05} component={Game02Level05} />
       <Stack.Screen name={ROUTES.Game02Level06} component={Game02Level06} />
       <Stack.Screen name={ROUTES.Game02Level07} component={Game02Level07} />
+      <Stack.Screen name={ROUTES.Game02Level08} component={Game02Level08} />
+      <Stack.Screen name={ROUTES.Game02Level09} component={Game02Level09} />
+      <Stack.Screen name={ROUTES.Game02Level10} component={Game02Level10} />
       <Stack.Screen
         name={ROUTES.GAME_MAIN_DETAILS}
         component={MainDetailsForm}
@@ -150,6 +160,22 @@ function GameNavigator() {
         name={ROUTES.Game02ProgressLevel06}
         component={Game02ProgressLevel06}
       />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel07}
+        component={Game02ProgressLevel07}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel08}
+        component={Game02ProgressLevel08}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel09}
+        component={Game02ProgressLevel09}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel10}
+        component={Game02ProgressLevel10}
+      />
     </Stack.Navigator>
   );
 }

src/navigations/ProfileNavigator.js

+import React from 'react';
+import {createStackNavigator} from '@react-navigation/stack';
+import {ROUTES} from '../constants';
+import UserProfile from '../screens/auth/ProfilePage';
+const Stack = createStackNavigator();
+
+function ProfileNavigator() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerBackTitleVisible: false,
+        headerShown: false,
+      }}
+      initialRouteName={ROUTES.HOME}>
+      <Stack.Screen name={ROUTES.PROFILE} component={UserProfile} />
+    </Stack.Navigator>
+  );
+}
+export default ProfileNavigator;

src/screens/auth/ProfilePage.js

+import React, {useState, useEffect} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {COLORS, IMGS, ROUTES} from '../../constants';
+import LinearGradient from 'react-native-linear-gradient';
+import {getUserDetails} from '../../services/auth/index';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const UserProfile = ({navigation}) => {
+  const [userDetails, setUserDetails] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const handleFetchDetails = async () => {
+    try {
+      setLoading(true);
+      const email = await AsyncStorage.getItem('userEmail');
+      if (!email) {
+        setError('Email not found');
+        setLoading(false);
+        return; // Early exit if email is not found in storage
+      }
+
+      const details = await getUserDetails(); // getUserDetails now internally gets the email from AsyncStorage
+      if (details && details.success) {
+        setUserDetails(details.data);
+      } else {
+        setError('Failed to fetch details');
+      }
+      setLoading(false);
+    } catch (err) {
+      setError('Failed to fetch details');
+      console.error('Error fetching user details:', err);
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleFetchDetails();
+  }, []);
+
+  if (loading) {
+    return (
+      <View style={styles.loaderContainer}>
+        <ActivityIndicator size={150} color={COLORS.dark_purple} />
+      </View>
+    );
+  }
+
+  return (
+    <LinearGradient
+      style={styles.container}
+      colors={[COLORS.dark_purple, COLORS.white, COLORS.pink]}>
+      <View style={styles.profileHeader}>
+        <Image source={IMGS.user_profile_image} style={styles.profileImage} />
+        <Text style={styles.name}>
+          {userDetails?.name ? userDetails?.name : 'Malsha Geethmi'}
+        </Text>
+      </View>
+
+      <View style={styles.infoContainer}>
+        <View style={styles.infoItem}>
+          <Text style={styles.infoLabel}>Email</Text>
+          <Text style={styles.infoContent}>
+            {userDetails?.email ? userDetails?.email : 'malsha@gmail.com'}
+          </Text>
+        </View>
+        <View style={styles.infoItem}>
+          <Text style={styles.infoLabel}>Age</Text>
+          <Text style={styles.infoContent}>
+            {userDetails?.age ? userDetails?.age : '24'}
+          </Text>
+        </View>
+        <View style={styles.infoItem}>
+          <Text style={styles.infoLabel}>Week</Text>
+          <Text style={styles.infoContent}>
+            {userDetails?.week ? userDetails?.week : '14'}
+          </Text>
+        </View>
+      </View>
+
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => navigation.navigate(ROUTES.FORGOT_PASSWORD)}>
+        <View style={styles.new}>
+          <Icon
+            name="key"
+            size={30}
+            color={COLORS.white}
+            style={styles.icon1}
+          />
+          <Text style={styles.buttonText}>Change Password</Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.button2}>
+        <Text style={styles.buttonText2}>LOGOUT</Text>
+      </TouchableOpacity>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  loaderContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.white,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.pastalBlue,
+    alignItems: 'center',
+    paddingTop: 50,
+  },
+  profileHeader: {
+    backgroundColor: 'white',
+    width: '90%',
+    borderRadius: 20,
+    alignItems: 'center',
+    marginBottom: 20,
+    paddingVertical: 20,
+  },
+  profileImage: {
+    width: 140,
+    height: 140,
+    borderRadius: 40,
+    marginBottom: 20,
+  },
+  name: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: COLORS.navyBlue,
+  },
+  phoneNumber: {
+    fontSize: 16,
+    color: 'gray',
+  },
+  infoContainer: {
+    width: '90%',
+    backgroundColor: 'white',
+    borderRadius: 20,
+    paddingVertical: 10,
+  },
+  infoItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+  },
+  infoLabel: {
+    fontWeight: 'bold',
+    color: 'gray',
+    fontSize: 16,
+  },
+  infoContent: {
+    color: 'black',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: COLORS.purple_new,
+    borderRadius: 20,
+    width: '90%',
+    padding: 15,
+    marginVertical: 5,
+    marginTop: 20,
+  },
+  button2: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: COLORS.red,
+    borderRadius: 20,
+    width: '90%',
+    padding: 15,
+    marginVertical: 5,
+    marginTop: 150,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontSize: 18,
+    color: COLORS.white,
+    fontWeight: 'bold',
+  },
+  buttonText2: {
+    textAlign: 'center',
+    fontSize: 20,
+    color: COLORS.white,
+    fontWeight: 'bold',
+  },
+  icon1: {
+    justifyContent: 'flex-start',
+    display: 'flex',
+  },
+  new: {
+    marginRight: 90,
+    flexDirection: 'row',
+    gap: 20,
+  },
+});
+
+export default UserProfile;

src/screens/home/Home.js

+/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import {Image, TouchableOpacity, Text, View} from 'react-native';
-import {COLORS, IMGS} from '../../constants';
+import {Image, TouchableOpacity, Text, View, FlatList} from 'react-native';
+import {COLORS, IMGS, ROUTES} from '../../constants';
 import LinearGradient from 'react-native-linear-gradient';
 
-const Home = () => {
+const Home = ({navigation}) => {
+  const cards = [
+    {
+      id: '1',
+      name: 'Reduce Skin Diseases',
+      image: IMGS.home_skin,
+      backgroundColor: COLORS.orange,
+      navigateTo: ROUTES.SKIN_WELCOME,
+    },
+    {
+      id: '2',
+      name: 'Improve Mental Well-Being',
+      image: IMGS.home_mental_well_being,
+      backgroundColor: COLORS.cadmium_Green,
+      navigateTo: ROUTES.GAME_WELCOME,
+    },
+    {
+      id: '3',
+      name: 'Exercises Recommendations',
+      image: IMGS.home_exercises,
+      backgroundColor: COLORS.dark_Pink,
+      navigateTo: ROUTES.EXERCISE_HOME,
+    },
+    {
+      id: '4',
+      name: 'Get Emotional Support',
+      image: IMGS.home_emotional_support,
+      backgroundColor: COLORS.main_blue,
+      navigateTo: ROUTES.HOME,
+    },
+  ];
   return (
     <LinearGradient
       style={{
         flex: 1,
       }}
-      colors={[COLORS.dark_purple, COLORS.white, COLORS.dark_purple]}>
+      colors={[COLORS.light_gray, COLORS.white, COLORS.light_gray]}>
       <View>
-        <View>
-          <Image
-            source={IMGS.home_page}
+        <TouchableOpacity
           style={{
-              height: 360,
-              width: '100%',
             position: 'absolute',
-              top: 100,
+            top: 20,
+            right: 20,
+            zIndex: 5,
+          }}
+          onPress={() => navigation.navigate(ROUTES.PROFILE)}>
+          <Image
+            source={IMGS.user_profile_image}
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 40,
+              marginBottom: 20,
             }}
           />
-        </View>
-
+        </TouchableOpacity>
         <View
           style={{
-            paddingHorizontal: 67,
-            position: 'absolute',
-            top: 510,
-            width: '100%',
+            marginTop: 70,
+            paddingHorizontal: 20,
+            paddingVertical: 10,
+            backgroundColor: COLORS.white,
+            borderRadius: 10,
+            flexDirection: 'row',
+            alignItems: 'center',
           }}>
+          <Image
+            source={IMGS.logo}
+            style={{width: 100, height: 120, marginRight: 50}}
+          />
+          <View>
             <Text
               style={{
-              fontSize: 45,
-              color: COLORS.black,
+                fontSize: 24,
+                color: COLORS.navyBlue,
                 fontWeight: 'bold',
-              textAlign: 'center',
+                textAlign: 'right',
                 fontFamily: 'monospace',
               }}>
               Welcome to
             </Text>
             <Text
               style={{
-              fontSize: 45,
-              color: COLORS.black,
+                fontSize: 24,
+                color: COLORS.navyBlue,
                 fontWeight: 'bold',
-              textAlign: 'center',
+                textAlign: 'right',
                 fontFamily: 'monospace',
               }}>
               e-MidWife
             </Text>
-
-          {/* <View style={{marginTop: 1}}>
+          </View>
+        </View>
+        <View>
+          <Text
+            style={{
+              fontSize: 18,
+              color: COLORS.black,
+              fontWeight: 'bold',
+              textAlign: 'left',
+              fontFamily: 'monospace',
+              marginTop: 60,
+              marginLeft: 25,
+            }}>
+            Features
+          </Text>
+          <FlatList
+            data={cards}
+            keyExtractor={item => item.id}
+            contentContainerStyle={{
+              paddingHorizontal: 20,
+              paddingTop: 20,
+            }}
+            renderItem={({item}) => (
               <TouchableOpacity
                 style={{
-                backgroundColor: COLORS.purple_new,
-                borderColor: COLORS.purple_new,
-                height: 50,
-                marginBottom: 50,
-                justifyContent: 'center',
+                  flexDirection: 'row',
+                  backgroundColor: item.backgroundColor,
+                  padding: 10,
+                  marginBottom: 10,
+                  borderRadius: 10,
                   alignItems: 'center',
-                borderRadius: 14,
-                width: '100%',
-                zIndex: 3,
-                elevation: 10,
+                  height: 90,
                 }}
-                onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}
-            >
+                onPress={() => navigation.navigate(item.navigateTo)}>
+                <Image
+                  source={item.image}
+                  style={{width: 50, height: 50, marginRight: 18}}
+                />
                 <Text
-                medium
-                center
-                style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}>
-                Start
+                  style={{
+                    fontSize: 18,
+                    color: COLORS.black,
+                    fontWeight: 'bold',
+                  }}>
+                  {item.name}
                 </Text>
               </TouchableOpacity>
-          </View> */}
+            )}
+          />
         </View>
       </View>
     </LinearGradient>

src/screens/home/exercise/HealthFormExercise.js

@@ -26,11 +26,9 @@ const HealthFormExercise = (props) => {
 
     useEffect(() => {
         if (isWearbleDevice) {
-            // Reference to your Firebase Realtime Database
             const databaseRef = database().ref('test');
             ToastAndroid.show('Data reading on device !', ToastAndroid.SHORT);
 
-            // Attach an asynchronous listener to read the data at our reference
             const onDataChange = (snapshot) => {
                 const data = snapshot.val();
                 setDataArray(data);
@@ -40,7 +38,6 @@ const HealthFormExercise = (props) => {
             
             databaseRef.on('value', onDataChange);
 
-            // Detach the listener when component unmounts or when isWearableDevice changes
             return () => {
                 databaseRef.off('value', onDataChange);
             };
@@ -70,12 +67,12 @@ const HealthFormExercise = (props) => {
             userData.riskLevel = respond.data.prediction;
             userData.risk_level_status = predictionStatus;
             userData.is_exercises_active = true;
-
+            ToastAndroid.show(`You at ${respond.data.prediction}`, ToastAndroid.SHORT);
             let responds = await addInitialExercises(userData._id, prediction);
             if (responds.data) {
                 try {
                     await AsyncStorage.setItem('userData', JSON.stringify(userData));
-                    navigation.navigate(ROUTES.EXERCISE_MAIN_NEW_MENU)
+                    navigation.navigate(ROUTES.EXERCISE_MAIN_MENU);
                     ToastAndroid.show('userData updated successfully !', ToastAndroid.SHORT); 
                 } catch (error) {
                     ToastAndroid.show('Error updating userData !', ToastAndroid.SHORT);

src/screens/home/exercise/MainMenuExercise.js

-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect,useCallback } from 'react';
 import {
     FlatList,
     SafeAreaView,
@@ -20,6 +20,8 @@ import { Cloudinary } from "@cloudinary/url-gen";
 import { getAllExerciseDay } from '../../../services/exercises/index';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 const moment = require('moment');
+import { useFocusEffect } from '@react-navigation/native';
+
 
 const Item = ({ item, onPress, backgroundColor, textColor }) => (
     <TouchableOpacity onPress={onPress} style={[styles.item, { backgroundColor, flexDirection: "row", width: '100%' }]}>
@@ -138,10 +140,31 @@ const MainMenuExercise = (props) => {
 
     }
 
+    // useEffect(() => {
+    //     retriveExerciseList()
+    //     setSelectedId(null)
+    // }, [])
+    
   useEffect(() => {
-        retriveExerciseList()
+    // Initial check when component mounts
+    retriveExerciseList();
     setSelectedId(null)
+  }, []);
+
+  useFocusEffect(
+    useCallback(() => {
+      const checkStatus = async () => {
+        await retriveExerciseList();
+        setSelectedId(null)
+      };
+
+      checkStatus();
+
+      return () => {
+        // Cleanup if necessary
+      };
     }, [])
+  );
 
     return (
         <SafeAreaView style={styles.container}>

src/screens/home/game/ChooseGame.js

@@ -28,16 +28,16 @@ const ChooseGame = ({navigation, route}) => {
             9: ROUTES.GameLevel4,
           }
         : {
-            0: ROUTES.PuzzleGame02Level03,
-            1: ROUTES.Game02Level01,
-            2: ROUTES.CravingsPuzzleGame02Level02,
-            3: ROUTES.PuzzleGame02Level03,
-            4: ROUTES.Game02Level04,
-            5: ROUTES.Game02Level05,
-            6: ROUTES.Game02Level06,
-            7: ROUTES.Game02Level07,
-            8: ROUTES.Game02Level04,
-            9: ROUTES.Game02Level06,
+            0: ROUTES.Game02Level01,
+            1: ROUTES.CravingsPuzzleGame02Level02,
+            2: ROUTES.PuzzleGame02Level03,
+            3: ROUTES.Game02Level04,
+            4: ROUTES.Game02Level05,
+            5: ROUTES.Game02Level06,
+            6: ROUTES.Game02Level07,
+            7: ROUTES.Game02Level08,
+            8: ROUTES.Game02Level09,
+            9: ROUTES.Game02Level10,
           };
 
     const routeName = gameLevelRoutes[predictedGameLevel];

src/screens/home/game/QuestionsInEnglish.js

@@ -46,7 +46,7 @@ const QuestionInEnglishPage = ({navigation, route}) => {
 
   const loadData = () => {
     axios
-      .get('http://emidwife-api.onrender.com/api/quiz/all_english')
+      .get('http://16.171.16.144/api/quiz/all_english')
       .then(response => {
         setQuestions(response.data.data);
         setIsLoading(false);

src/screens/home/game/QuestionsInShinhala.js

@@ -46,7 +46,7 @@ const QuestionInSinhalaPage = ({navigation, route}) => {
 
   const loadData = () => {
     axios
-      .get('http://emidwife-api.onrender.com/api/quiz/all_sinhala')
+      .get('http://16.171.16.144/api/quiz/all_sinhala')
       .then(response => {
         setQuestions(response.data.data);
         setIsLoading(false);

src/screens/home/game/QuizScore.js

@@ -98,7 +98,7 @@ const QuizScoreDisplayPage = ({route, navigation}) => {
                 style={styles.button}
                 onPress={handleChooseGamePress}>
                 <Text bold medium center style={styles.buttonText}>
-                  Let's Improve Mental Well-Being
+                  How to Improve Mental Well-Being
                 </Text>
               </TouchableOpacity>
             </View>

src/screens/home/game/game01/GameLevel04.js

@@ -8,6 +8,7 @@ import {
   Alert,
   Button,
   ImageBackground,
+  ScrollView,
 } from 'react-native';
 import {IMGS, ROUTES, COLORS} from '../../../../constants';
 import Sound from 'react-native-sound';
@@ -260,6 +261,9 @@ const CandyCrushGameLevel04 = ({navigation}) => {
   }
 
   return (
+    <ScrollView
+      style={styles.scrollContainer}
+      contentContainerStyle={styles.contentContainer}>
       <ImageBackground
         source={IMGS.game_img_7}
         style={styles.backgroundImage}
@@ -350,6 +354,7 @@ const CandyCrushGameLevel04 = ({navigation}) => {
           </TouchableOpacity>
         </View>
       </ImageBackground>
+    </ScrollView>
   );
 };
 
@@ -388,6 +393,12 @@ const styles = StyleSheet.create({
   candyText: {
     fontSize: 30,
   },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: 40, // Adds padding at the bottom
+  },
 });
 
 export default CandyCrushGameLevel04;

src/screens/home/game/game01/GameLevel3.js

@@ -7,6 +7,7 @@ import {
   Alert,
   Button,
   ImageBackground,
+  ScrollView,
 } from 'react-native';
 import {IMGS, ROUTES, COLORS} from '../../../../constants';
 import Sound from 'react-native-sound';
@@ -215,6 +216,9 @@ const CandyCrushGameLevel03 = ({navigation}) => {
     return true; // Matches were found and cleared
   }
   return (
+    <ScrollView
+      style={styles.scrollContainer}
+      contentContainerStyle={styles.contentContainer}>
       <ImageBackground
         source={IMGS.game_img_8}
         style={styles.backgroundImage}
@@ -286,6 +290,7 @@ const CandyCrushGameLevel03 = ({navigation}) => {
           </TouchableOpacity>
         </View>
       </ImageBackground>
+    </ScrollView>
   );
 };
 
@@ -323,6 +328,12 @@ const styles = StyleSheet.create({
   candyText: {
     fontSize: 30,
   },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: 40, // Adds padding at the bottom
+  },
 });
 
 export default CandyCrushGameLevel03;

src/screens/home/game/game01/GameLevel5.js

@@ -7,6 +7,7 @@ import {
   Image,
   StyleSheet,
   Alert,
+  ScrollView,
   ImageBackground,
 } from 'react-native';
 import {IMGS, COLORS, ROUTES} from '../../../../constants';
@@ -119,6 +120,9 @@ const GameLevel5 = ({navigation}) => {
   };
 
   return (
+    <ScrollView
+      style={styles.scrollContainer}
+      contentContainerStyle={styles.contentContainer}>
       <ImageBackground
         source={IMGS.game_img_9}
         style={styles.backgroundImage}
@@ -199,6 +203,7 @@ const GameLevel5 = ({navigation}) => {
           </View>
         </View>
       </ImageBackground>
+    </ScrollView>
   );
 };
 
@@ -308,6 +313,12 @@ const styles = StyleSheet.create({
     height: 100,
     borderRadius: 30,
   },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: 40, // Adds padding at the bottom
+  },
 });
 
 export default GameLevel5;

src/screens/home/game/game01/GameLevel6.js

@@ -8,6 +8,7 @@ import {
   StyleSheet,
   Alert,
   ImageBackground,
+  ScrollView,
 } from 'react-native';
 import {IMGS, ROUTES, COLORS} from '../../../../constants';
 import Sound from 'react-native-sound';
@@ -148,6 +149,9 @@ const GameLevel6 = () => {
   };
 
   return (
+    <ScrollView
+      style={styles.scrollContainer}
+      contentContainerStyle={styles.contentContainer}>
       <ImageBackground
         source={IMGS.game_img_15}
         style={styles.backgroundImage}
@@ -252,6 +256,7 @@ const GameLevel6 = () => {
           </View>
         </View>
       </ImageBackground>
+    </ScrollView>
   );
 };
 
@@ -359,6 +364,12 @@ const styles = StyleSheet.create({
     shadowRadius: 2,
     elevation: 5,
   },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: 40, // Adds padding at the bottom
+  },
 });
 
 export default GameLevel6;

src/screens/home/game/game02/level01.js

@@ -164,7 +164,7 @@ const Game02Level01 = ({navigation, route}) => {
           [
             {
               text: 'OK',
-              onPress: () => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS),
+              onPress: () => navigation.navigate(ROUTES.Game02Level01),
             },
           ]);
         } else if (healthyCost + item.cost > 2000) {  // ensure the current cost is added to total for the check
@@ -172,7 +172,7 @@ const Game02Level01 = ({navigation, route}) => {
           [
             {
               text: 'OK',
-              onPress: () => navigation.navigate(ROUTES.Game02ProgressLevel03),
+              onPress: () => navigation.navigate(ROUTES.Game02ProgressLevel07),
             },
           ]);
           backgroundMusic.current.setVolume(0.0);

src/screens/home/game/game02/level02.js

@@ -99,7 +99,7 @@ const CravingsPuzzleGame02Level02 = ({navigation}) => {
         Alert.alert('Game lost!', 'Choose essential items!', [
           {
             text: 'OK',
-            onPress: () => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS),
+            onPress: () => navigation.navigate(ROUTES.CravingsPuzzleGame02Level02),
           },
         ]);
       } else if (healthyCost + item.cost > 2000) {

src/screens/home/game/game02/level03.js

@@ -158,7 +158,7 @@ const PuzzleGame02Level03 = ({navigation}) => {
         {
           text: 'OK',
           onPress: () => {
-            navigation.navigate(ROUTES.Game02ProgressLevel01);
+            navigation.navigate(ROUTES.Game02ProgressLevel10);
           },
         },
       ]);

src/screens/home/game/game02/level04.js

@@ -108,7 +108,7 @@ const Game02Level04 = ({navigation}) => {
             {
               text: 'OK',
               onPress: () => {
-                navigation.navigate(ROUTES.Game02ProgressLevel02);
+                navigation.navigate(ROUTES.Game02ProgressLevel09);
                 backgroundMusic.current.setVolume(0.0);
               },
             },
@@ -125,7 +125,7 @@ const Game02Level04 = ({navigation}) => {
         {
           text: 'OK',
           onPress: () => {
-            navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+            navigation.navigate(ROUTES.Game02Level04);
           },
         },
       ]);

src/screens/home/game/game02/level05.js

@@ -107,7 +107,7 @@ const Game02Level05 = ({navigation}) => {
             {
               text: 'OK',
               onPress: () => {
-                navigation.navigate(ROUTES.Game02ProgressLevel04);
+                navigation.navigate(ROUTES.Game02ProgressLevel08);
                 backgroundMusic.current.setVolume(0.0);
               },
             },
@@ -127,7 +127,7 @@ const Game02Level05 = ({navigation}) => {
         {
           text: 'OK',
           onPress: () => {
-            navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+            navigation.navigate(ROUTES.Game02Level05);
           },
         },
       ]);

src/screens/home/game/game02/level06.js

@@ -126,7 +126,7 @@ const Game02Level06 = ({navigation}) => {
         {
           text: 'OK',
           onPress: () => {
-            navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+            navigation.navigate(ROUTES.Game02Level06);
           },
         },
       ]);

src/screens/home/game/game02/level07.js

@@ -111,7 +111,7 @@ const Game02Level07 = ({navigation}) => {
             {
               text: 'OK',
               onPress: () => {
-                navigation.navigate(ROUTES.Game02ProgressLevel02);
+                navigation.navigate(ROUTES.Game02ProgressLevel03);
                 backgroundMusic.current.setVolume(0.0);
               },
             },

src/screens/home/game/game02/level08.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  StyleSheet,
+  Image,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const gridSize = 9;
+const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
+
+const Game02Level08 = ({navigation}) => {
+  const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
+  const player = IMGS.game_img_43;
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [babyItems, setBabyItems] = useState([
+    {x: 3, y: 7, type: 'babyItem', image: IMGS.game_img_17},
+    {x: 8, y: 4, type: 'babyItem', image: IMGS.game_img_36},
+    {x: 1, y: 2, type: 'babyItem', image: IMGS.game_img_16},
+    {x: 4, y: 0, type: 'babyItem', image: IMGS.game_img_33},
+    {x: 5, y: 3, type: 'babyItem', image: IMGS.play_pen},
+    {x: 7, y: 1, type: 'babyItem', image: IMGS.milk_bottle},
+  ]);
+  const [ladyItems, setLadyItems] = useState([
+    {x: 8, y: 1, type: 'ladyItem', image: IMGS.game_img_24},
+    {x: 4, y: 3, type: 'ladyItem', image: IMGS.game_img_39},
+    {x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
+    {x: 2, y: 7, type: 'ladyItem', image: IMGS.game_img_29},
+    {x: 5, y: 4, type: 'ladyItem', image: IMGS.lip_stick},
+    {x: 1, y: 7, type: 'ladyItem', image: IMGS.ring},
+  ]);
+
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_a.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const movePlayer = direction => {
+    let newX = playerPosition.x;
+    let newY = playerPosition.y;
+
+    switch (direction) {
+      case 'up':
+        newY = Math.max(0, playerPosition.y - 1);
+        break;
+      case 'down':
+        newY = Math.min(gridSize - 1, playerPosition.y + 1);
+        break;
+      case 'left':
+        newX = Math.max(0, playerPosition.x - 1);
+        break;
+      case 'right':
+        newX = Math.min(gridSize - 1, playerPosition.x + 1);
+        break;
+    }
+
+    setPlayerPosition({x: newX, y: newY});
+    checkForItem(newX, newY);
+  };
+
+  const checkForItem = (x, y) => {
+    const foundBabyItemIndex = babyItems.findIndex(
+      item => item.x === x && item.y === y,
+    );
+    const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
+
+    if (foundBabyItemIndex !== -1) {
+      // Use position as a unique identifier and update the collected items
+      setCollectedItems(currentItems => {
+        const updatedItems = [...currentItems, `${x},${y}`];
+
+        // Remove the found baby item from the array to prevent recounting
+        const newBabyItems = [...babyItems];
+        newBabyItems.splice(foundBabyItemIndex, 1);
+        setBabyItems(newBabyItems);
+
+        // Check if all baby items have been collected (assuming total items needed to win is 3)
+        if (updatedItems.length >= 4) {
+          // Only show the congratulations message when the last item is collected
+          Alert.alert('Congratulations 🥳🥳! You won the game.', '', [
+            {
+              text: 'OK',
+              onPress: () => {
+                navigation.navigate(ROUTES.Game02ProgressLevel02);
+                backgroundMusic.current.setVolume(0.0);
+              },
+            },
+          ]);
+        } else {
+          // This alert is for collecting but not finishing the game
+          Alert.alert('Good job!', 'You found a baby item!');
+        }
+
+        return updatedItems;
+      });
+    } else if (foundLadyItem) {
+      Alert.alert('Oops!', "This is a lady's item. Try again!", [
+        {
+          text: 'OK',
+          // onPress: () => {
+          //   navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          // },
+        },
+      ]);
+    }
+  };
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_45}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginLeft: 300,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 8,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.mainText}>Select Suitable Baby Items</Text>
+        <View style={styles.gameBoard}>
+          {initialBoard.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.row}>
+              {row.map((cell, cellIndex) => (
+                <View key={`cell-${cellIndex}`} style={styles.cell}>
+                  {playerPosition.x === cellIndex &&
+                    playerPosition.y === rowIndex && (
+                      <Image source={player} style={styles.playerImage} />
+                    )}
+                  {babyItems.concat(ladyItems).map((item, index) => {
+                    const itemKey = `${item.x},${item.y}`;
+                    if (
+                      item.x === cellIndex &&
+                      item.y === rowIndex &&
+                      !collectedItems.includes(itemKey)
+                    ) {
+                      return (
+                        <Image
+                          key={index}
+                          source={item.image}
+                          style={styles.itemImage}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+        {/* Up Button */}
+        <TouchableOpacity
+          onPress={() => movePlayer('up')}
+          style={[styles.button, styles.buttonUp]}>
+          <Text style={styles.buttonText}>🔼</Text>
+        </TouchableOpacity>
+
+        <View style={styles.controls}>
+          <TouchableOpacity
+            onPress={() => movePlayer('right')}
+            style={[styles.button, styles.buttonLeft]}>
+            <Text style={styles.buttonText}>▶️</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => movePlayer('left')}
+            style={[styles.button, styles.buttonRight]}>
+            <Text style={styles.buttonText}>◀️</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          onPress={() => movePlayer('down')}
+          style={[styles.button, styles.buttonDown]}>
+          <Text style={styles.buttonText}>🔽</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gameBoard: {
+    width: 360,
+    height: 400,
+    borderWidth: 2,
+    marginBottom: 5,
+    backgroundColor: '#834333',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  cell: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    backgroundColor: '#add8e6',
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '50%',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#056676',
+    borderRadius: 5,
+  },
+  playerImage: {
+    width: '100%', // Adjust as needed
+    height: '100%', // Adjust as needed
+    resizeMode: 'contain', // This ensures the image scales correctly within the cell
+  },
+  itemImage: {
+    width: '80%', // Adjust based on your cell size
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 25,
+    fontSize: 22,
+    backgroundColor: '#990033',
+    width: '100%',
+    padding: 10,
+    borderRadius: 20,
+  },
+  buttonUp: {
+    top: 1,
+  },
+  buttonLeft: {
+    left: 130,
+  },
+  buttonRight: {
+    right: 130,
+  },
+  buttonDown: {
+    bottom: 1,
+  },
+});
+
+export default Game02Level08;

src/screens/home/game/game02/level09.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  StyleSheet,
+  Image,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const gridSize = 10;
+const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
+
+const Game02Level09 = ({navigation}) => {
+  const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
+  const player = IMGS.game_img_43;
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [babyItems, setBabyItems] = useState([
+    {x: 3, y: 7, type: 'babyItem', image: IMGS.milk_bottle},
+    {x: 8, y: 4, type: 'babyItem', image: IMGS.game_img_36},
+    {x: 1, y: 2, type: 'babyItem', image: IMGS.play_pen},
+    {x: 4, y: 0, type: 'babyItem', image: IMGS.game_img_33},
+    {x: 9, y: 5, type: 'babyItem', image: IMGS.game_img_16},
+    {x: 2, y: 4, type: 'babyItem', image: IMGS.game_img_17},
+  ]);
+  const [ladyItems, setLadyItems] = useState([
+    {x: 8, y: 1, type: 'ladyItem', image: IMGS.game_img_24},
+    {x: 4, y: 3, type: 'ladyItem', image: IMGS.ring},
+    {x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
+    {x: 2, y: 7, type: 'ladyItem', image: IMGS.lip_stick},
+  ]);
+
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_f.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const movePlayer = direction => {
+    let newX = playerPosition.x;
+    let newY = playerPosition.y;
+
+    switch (direction) {
+      case 'up':
+        newY = Math.max(0, playerPosition.y - 1);
+        break;
+      case 'down':
+        newY = Math.min(gridSize - 1, playerPosition.y + 1);
+        break;
+      case 'left':
+        newX = Math.max(0, playerPosition.x - 1);
+        break;
+      case 'right':
+        newX = Math.min(gridSize - 1, playerPosition.x + 1);
+        break;
+    }
+
+    setPlayerPosition({x: newX, y: newY});
+    checkForItem(newX, newY);
+  };
+
+  const checkForItem = (x, y) => {
+    const foundBabyItemIndex = babyItems.findIndex(
+      item => item.x === x && item.y === y,
+    );
+    const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
+
+    if (foundBabyItemIndex !== -1) {
+      // Use position as a unique identifier and update the collected items
+      setCollectedItems(currentItems => {
+        const updatedItems = [...currentItems, `${x},${y}`];
+
+        // Remove the found baby item from the array to prevent recounting
+        const newBabyItems = [...babyItems];
+        newBabyItems.splice(foundBabyItemIndex, 1);
+        setBabyItems(newBabyItems);
+
+        // Check if all baby items have been collected (assuming total items needed to win is 3)
+        if (updatedItems.length >= 4) {
+          // Only show the congratulations message when the last item is collected
+          Alert.alert('Congratulations 🥳🥳! You won the game.', '', [
+            {
+              text: 'OK',
+              onPress: () => {
+                navigation.navigate(ROUTES.Game02ProgressLevel04);
+                backgroundMusic.current.setVolume(0.0);
+              },
+            },
+          ]);
+        } else {
+          // This alert is for collecting but not finishing the game
+          Alert.alert('Good job!', 'You found a baby item!');
+        }
+
+        return updatedItems;
+      });
+    } else if (foundLadyItem) {
+      Alert.alert('Oops!', "This is a lady's item. Try again!", [
+        {
+          text: 'OK',
+          // onPress: () => {
+          //   navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          // },
+        },
+      ]);
+    }
+  };
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_45}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginLeft: 300,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 8,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.mainText}>Select Suitable Baby Items</Text>
+        <View style={styles.gameBoard}>
+          {initialBoard.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.row}>
+              {row.map((cell, cellIndex) => (
+                <View key={`cell-${cellIndex}`} style={styles.cell}>
+                  {playerPosition.x === cellIndex &&
+                    playerPosition.y === rowIndex && (
+                      <Image source={player} style={styles.playerImage} />
+                    )}
+                  {babyItems.concat(ladyItems).map((item, index) => {
+                    const itemKey = `${item.x},${item.y}`;
+                    if (
+                      item.x === cellIndex &&
+                      item.y === rowIndex &&
+                      !collectedItems.includes(itemKey)
+                    ) {
+                      return (
+                        <Image
+                          key={index}
+                          source={item.image}
+                          style={styles.itemImage}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+        {/* Up Button */}
+        <TouchableOpacity
+          onPress={() => movePlayer('up')}
+          style={[styles.button, styles.buttonUp]}>
+          <Text style={styles.buttonText}>🔼</Text>
+        </TouchableOpacity>
+
+        <View style={styles.controls}>
+          <TouchableOpacity
+            onPress={() => movePlayer('right')}
+            style={[styles.button, styles.buttonLeft]}>
+            <Text style={styles.buttonText}>▶️</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => movePlayer('left')}
+            style={[styles.button, styles.buttonRight]}>
+            <Text style={styles.buttonText}>◀️</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          onPress={() => movePlayer('down')}
+          style={[styles.button, styles.buttonDown]}>
+          <Text style={styles.buttonText}>🔽</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gameBoard: {
+    width: 360,
+    height: 400,
+    borderWidth: 2,
+    marginBottom: 5,
+    backgroundColor: '#097969',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  cell: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    backgroundColor: '#add8e6',
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '50%',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#056676',
+    borderRadius: 5,
+  },
+  playerImage: {
+    width: '100%', // Adjust as needed
+    height: '100%', // Adjust as needed
+    resizeMode: 'contain', // This ensures the image scales correctly within the cell
+  },
+  itemImage: {
+    width: '80%', // Adjust based on your cell size
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 25,
+    fontSize: 22,
+    backgroundColor: '#990033',
+    width: '100%',
+    padding: 10,
+    borderRadius: 20,
+  },
+  buttonUp: {
+    top: 1,
+  },
+  buttonLeft: {
+    left: 130,
+  },
+  buttonRight: {
+    right: 130,
+  },
+  buttonDown: {
+    bottom: 1,
+  },
+});
+
+export default Game02Level09;

src/screens/home/game/game02/level10.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  StyleSheet,
+  Image,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const gridSize = 10;
+const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
+
+const Game02Level10 = ({navigation}) => {
+  const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
+  const player = IMGS.game_img_43;
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [babyItems, setBabyItems] = useState([
+    {x: 3, y: 7, type: 'babyItem', image: IMGS.game_img_17},
+    {x: 8, y: 4, type: 'babyItem', image: IMGS.game_img_36},
+    {x: 1, y: 2, type: 'babyItem', image: IMGS.game_img_16},
+    {x: 4, y: 0, type: 'babyItem', image: IMGS.game_img_33},
+    {x: 5, y: 8, type: 'babyItem', image: IMGS.milk_bottle},
+    {x: 2, y: 9, type: 'babyItem', image: IMGS.play_pen},
+    {x: 10, y: 2, type: 'babyItem', image: IMGS.high_chair},
+  ]);
+  const [ladyItems, setLadyItems] = useState([
+    {x: 8, y: 1, type: 'ladyItem', image: IMGS.game_img_24},
+    {x: 4, y: 3, type: 'ladyItem', image: IMGS.game_img_39},
+    {x: 7, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
+    {x: 9, y: 5, type: 'ladyItem', image: IMGS.game_img_29},
+    {x: 3, y: 5, type: 'ladyItem', image: IMGS.lip_stick},
+    {x: 8, y: 8, type: 'ladyItem', image: IMGS.ring},
+  ]);
+
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_e.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const movePlayer = direction => {
+    let newX = playerPosition.x;
+    let newY = playerPosition.y;
+
+    switch (direction) {
+      case 'up':
+        newY = Math.max(0, playerPosition.y - 1);
+        break;
+      case 'down':
+        newY = Math.min(gridSize - 1, playerPosition.y + 1);
+        break;
+      case 'left':
+        newX = Math.max(0, playerPosition.x - 1);
+        break;
+      case 'right':
+        newX = Math.min(gridSize - 1, playerPosition.x + 1);
+        break;
+    }
+
+    setPlayerPosition({x: newX, y: newY});
+    checkForItem(newX, newY);
+  };
+
+  const checkForItem = (x, y) => {
+    const foundBabyItemIndex = babyItems.findIndex(
+      item => item.x === x && item.y === y,
+    );
+    const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
+
+    if (foundBabyItemIndex !== -1) {
+      // Use position as a unique identifier and update the collected items
+      setCollectedItems(currentItems => {
+        const updatedItems = [...currentItems, `${x},${y}`];
+
+        // Remove the found baby item from the array to prevent recounting
+        const newBabyItems = [...babyItems];
+        newBabyItems.splice(foundBabyItemIndex, 1);
+        setBabyItems(newBabyItems);
+
+        // Check if all baby items have been collected (assuming total items needed to win is 3)
+        if (updatedItems.length >= 4) {
+          // Only show the congratulations message when the last item is collected
+          Alert.alert('Congratulations 🥳🥳! You won the game.', '', [
+            {
+              text: 'OK',
+              onPress: () => {
+                navigation.navigate(ROUTES.Game02ProgressLevel01);
+                backgroundMusic.current.setVolume(0.0);
+              },
+            },
+          ]);
+        } else {
+          // This alert is for collecting but not finishing the game
+          Alert.alert('Good job!', 'You found a baby item!');
+        }
+
+        return updatedItems;
+      });
+    } else if (foundLadyItem) {
+      Alert.alert('Oops!', "This is a lady's item. Try again!", [
+        {
+          text: 'OK',
+          // onPress: () => {
+          //   navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          // },
+        },
+      ]);
+    }
+  };
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_45}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginLeft: 300,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 8,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.mainText}>Select Suitable Baby Items</Text>
+        <View style={styles.gameBoard}>
+          {initialBoard.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.row}>
+              {row.map((cell, cellIndex) => (
+                <View key={`cell-${cellIndex}`} style={styles.cell}>
+                  {playerPosition.x === cellIndex &&
+                    playerPosition.y === rowIndex && (
+                      <Image source={player} style={styles.playerImage} />
+                    )}
+                  {babyItems.concat(ladyItems).map((item, index) => {
+                    const itemKey = `${item.x},${item.y}`;
+                    if (
+                      item.x === cellIndex &&
+                      item.y === rowIndex &&
+                      !collectedItems.includes(itemKey)
+                    ) {
+                      return (
+                        <Image
+                          key={index}
+                          source={item.image}
+                          style={styles.itemImage}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+        {/* Up Button */}
+        <TouchableOpacity
+          onPress={() => movePlayer('up')}
+          style={[styles.button, styles.buttonUp]}>
+          <Text style={styles.buttonText}>🔼</Text>
+        </TouchableOpacity>
+
+        <View style={styles.controls}>
+          <TouchableOpacity
+            onPress={() => movePlayer('right')}
+            style={[styles.button, styles.buttonLeft]}>
+            <Text style={styles.buttonText}>▶️</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => movePlayer('left')}
+            style={[styles.button, styles.buttonRight]}>
+            <Text style={styles.buttonText}>◀️</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          onPress={() => movePlayer('down')}
+          style={[styles.button, styles.buttonDown]}>
+          <Text style={styles.buttonText}>🔽</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gameBoard: {
+    width: 360,
+    height: 400,
+    borderWidth: 2,
+    marginBottom: 5,
+    backgroundColor: '#8B4000',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  cell: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    backgroundColor: '#add8e6',
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '50%',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#056676',
+    borderRadius: 5,
+  },
+  playerImage: {
+    width: '100%', // Adjust as needed
+    height: '100%', // Adjust as needed
+    resizeMode: 'contain', // This ensures the image scales correctly within the cell
+  },
+  itemImage: {
+    width: '80%', // Adjust based on your cell size
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 25,
+    fontSize: 22,
+    backgroundColor: '#990033',
+    width: '100%',
+    padding: 10,
+    borderRadius: 20,
+  },
+  buttonUp: {
+    top: 1,
+  },
+  buttonLeft: {
+    left: 130,
+  },
+  buttonRight: {
+    right: 130,
+  },
+  buttonDown: {
+    bottom: 1,
+  },
+});
+
+export default Game02Level10;

src/screens/home/game/game02/progress/Level06.js

@@ -26,12 +26,12 @@ const Game02ProgressLevel06 = ({route, navigation}) => {
         </View>
         <View style={styles.diamondContainer}>
           <View style={styles.innerCircle}>
-            <Text style={styles.scoreText}>7</Text>
+            <Text style={styles.scoreText}>6</Text>
           </View>
         </View>
         <TouchableOpacity
           style={styles.button}
-          onPress={() => navigation.navigate(ROUTES.Game02Level07)}>
+          onPress={() => navigation.navigate(ROUTES.Game02Level06)}>
           <Text style={styles.buttonText}>Choose a Game</Text>
         </TouchableOpacity>
       </View>

src/screens/home/game/game02/progress/Level07.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel07 = ({route, navigation}) => {
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>7</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level07)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel07;

src/screens/home/game/game02/progress/Level08.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel08 = ({route, navigation}) => {
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>8</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level08)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel08;

src/screens/home/game/game02/progress/Level09.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel09 = ({route, navigation}) => {
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>9</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level09)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel09;

src/screens/home/game/game02/progress/Level10.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel10 = ({route, navigation}) => {
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>10</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level10)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel10;

src/screens/home/skin/information1.js

@@ -156,7 +156,7 @@ const Additionalinformation = ({ navigation }) => {
             </View>
             <View style={styles.qrCodeBox}>
                           <Image
-                            source={require('./skinassets/Vectorw.png')}  // Make sure the path is correct
+                            source={require('./skinassets/Vectorw.jpg')}  // Make sure the path is correct
                             style={styles.qrCodeImage1}
                         />
                         <Text style={styles.dscriptionText}>

src/services/auth/index.js

 import axios from 'axios';
-const BASE_PATH = 'https://emidwife-api.onrender.com/api/mother';
+const BASE_PATH = 'http://16.171.16.144:8070/api/mother';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 //signIn API Call
@@ -12,6 +12,8 @@ export let signin = async (email, password) => {
     console.log('data1', value.data);
     if (value.data.success === true) {
       await AsyncStorage.setItem('userData', JSON.stringify(value.data.data));
+      // After successful login
+      await AsyncStorage.setItem('userEmail', value.data.data.email);
       console.log('data');
     }
     return value;
@@ -33,6 +35,7 @@ export let signup = async (name, password, email, age, week) => {
     console.log('data1', value.data);
     if (value.data.success === true) {
       await AsyncStorage.setItem('userData', JSON.stringify(value.data.data));
+      await AsyncStorage.setItem('userEmail', email);
       console.log('data');
     }
     return value;
@@ -40,3 +43,31 @@ export let signup = async (name, password, email, age, week) => {
     return error;
   }
 };
+
+// getUserDetails API Call
+export const getUserDetails = async () => {
+  try {
+    const email = await AsyncStorage.getItem('userEmail');
+    if (!email) throw new Error('Email not found in storage');
+
+    const token = await AsyncStorage.getItem('userToken');
+    let response = await axios.post(
+      BASE_PATH + `/user-details?email=${encodeURIComponent(email)}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    );
+    if (response.data.success === true) {
+      await AsyncStorage.setItem(
+        'userDetails',
+        JSON.stringify(response.data.data),
+      );
+    }
+    return response.data;
+  } catch (error) {
+    console.error('Failed to fetch user details', error);
+    throw error;
+  }
+};

src/services/exercises/index.js

 import axios from "axios";
 let BASE_PATH = 'http://16.170.242.186:8080';
-let BASE_PATH2 = 'https://emidwife-api.onrender.com/api/mother';
+let SECOND_BASE_PATH = 'http://16.171.16.144:8070/api/mother';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 
@@ -23,7 +23,7 @@ export let meternalHealthPredict = async (Age,SystolicBP, DiastolicBP, Blood_glu
 
 export let addInitialExercises = async (id, riskLevel) => {
     try {
-        let value = await axios.post(BASE_PATH2 + '/initial_exercises', {
+        let value = await axios.post(SECOND_BASE_PATH + '/initial_exercises', {
             _id: id,
             riskLevel: riskLevel
         })
@@ -37,7 +37,7 @@ export let addInitialExercises = async (id, riskLevel) => {
 export let getAllExerciseDay = async (id, dateNum) => {
     try {
         console.log("id", id)
-        let value = await axios.post(BASE_PATH2 + '/get_all_exercise_day', {
+        let value = await axios.post(SECOND_BASE_PATH + '/get_all_exercise_day', {
             _id: id,
             day: dateNum
         })
@@ -49,7 +49,7 @@ export let getAllExerciseDay = async (id, dateNum) => {
 
 export let updateDeviceStatus = async (id, deviceStatus) => {
     try {
-        let value = await axios.post(BASE_PATH2 + '/update_device_status', {
+        let value = await axios.post(SECOND_BASE_PATH + '/update_device_status', {
             _id: id,
             deviceStatus: deviceStatus
         })

src/services/games/index.js

 import axios from 'axios';
 // const BASE_PATH = 'http://10.0.2.2:8000';
 const BASE_PATH = 'http://172.104.34.100:8000';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
 //initialize payment API Call
 export let gameLevelPredict = async (