Merge branch 'ComleteModule' into 'master'

done

See merge request !1

MyCardio_MedCare/.gitignore

+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

MyCardio_MedCare/App.js

+import { Image } from 'react-native';
+import LoginScreen from './LoginScreen';
+import RegisterScreen from './RegisterScreen';
+import HomeScreen from './HomeScreen';
+import ProfileScreen from './ProfileScreen';
+import Predict from './Predict';
+import UserForm from './UserForm';
+import ECGScreen from './ECGScreen';
+import StressPredict from './StressPredict';
+import MyComponent from './MyComponent';
+import PredictHomeScreen from './PredictHomeScreen';
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import SplashScreen from './SplashScreen';
+
+const Stack = createStackNavigator();
+const Tab = createBottomTabNavigator();
+
+const App = () => {
+  const HomeTabNavigator = () => (
+    <Tab.Navigator
+      screenOptions={{
+        tabBarStyle: {
+          backgroundColor: '#FF3939',
+        },
+      }}
+    >
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={() => ({
+          tabBarIcon: () => (
+            <Image
+              source={require('./assets/HomeBlack.png')}
+              style={{ width: 35, height: 35 }}
+            />
+          ),
+          headerShown: false,
+          headerLeft: null,
+        })}
+      />
+
+      <Tab.Screen
+        name="Profile"
+        component={ProfileScreen}
+        options={() => ({
+          tabBarIcon: () => (
+            <Image
+              source={require('./assets/profile.png')}
+              style={{ width: 25, height: 25 }}
+            />
+          ),
+          headerShown: false,
+          headerLeft: null,
+        })}
+      />
+
+      <Tab.Screen
+        name="PredictHome"
+        component={PredictHomeScreen}
+        options={() => ({
+          tabBarIcon: () => (
+            <Image
+              source={require('./assets/predict.png')}
+              style={{ width: 25, height: 25 }}
+            />
+          ),
+          title: 'Get Predictions', headerTitleAlign: 'center', headerTintColor: '#ffff', headerStyle: { backgroundColor: '#FF3939' }
+        })}
+        
+      />
+    </Tab.Navigator>
+  );
+
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Splash" component={SplashScreen}
+          options={() => ({
+            headerShown: false,
+            headerLeft: null,
+          })} />
+        <Stack.Screen
+          name="Login"
+          component={LoginScreen}
+          options={() => ({
+            headerShown: false,
+            headerLeft: null,
+          })}
+        />
+        <Stack.Screen
+          name="Register"
+          component={RegisterScreen}
+          options={() => ({
+            headerShown: false,
+            headerLeft: null,
+          })}
+        />
+        <Stack.Screen
+          name="UserForm"
+          component={UserForm}
+          options={{ title: 'Heart Disease Prediction', headerTitleAlign: 'center', headerTintColor: '#ffff', headerStyle: { backgroundColor: '#FF3939' } }}
+        />
+        <Stack.Screen
+          name="MyComp"
+          component={MyComponent}
+          options={() => ({
+            headerShown: false,
+            headerLeft: null,
+          })}
+        />
+        <Stack.Screen
+          name="Stress"
+          component={StressPredict}
+          options={{ title: 'Stress Prediction', headerTitleAlign: 'center', headerTintColor: '#ffff', headerStyle: { backgroundColor: '#FF3939' } }}
+        />
+        <Stack.Screen
+          name="Predict"
+          component={Predict}
+          options={{ title: 'Wound Healing Stage Predictions', headerTitleAlign: 'center', headerTintColor: '#ffff', headerStyle: { backgroundColor: '#FF3939' } }}
+        />
+        <Stack.Screen
+          name="ECG"
+          component={ECGScreen}
+          options={() => ({
+            headerShown: false,
+            headerLeft: null, // Remove the back button
+          })}
+        />
+
+        <Stack.Screen
+          name="Homes"
+          component={HomeTabNavigator}
+          options={() => ({
+            headerShown: false,
+            headerLeft: null, // Remove the back button
+          })}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default App;
\ No newline at end of file

MyCardio_MedCare/ConfirmationDialog.js

+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Modal } from 'react-native';
+
+const ConfirmationDialog = ({ isVisible, message, onCancel, onConfirm }) => {
+    return (
+        <Modal transparent={true} animationType="slide" visible={isVisible}>
+            <View style={styles.container}>
+                <View style={styles.dialog}>
+                    <Text style={styles.message}>{message}</Text>
+                    <View style={styles.buttonContainer}>
+                        <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+                            <Text style={styles.buttonTextCancel}>Cancel</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={styles.confirmButton} onPress={onConfirm}>
+                            <Text style={styles.buttonText}>Logout</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    dialog: {
+        width: 350,
+        height: 150,
+        backgroundColor: '#FF8691',
+        borderRadius: 40,
+        top: 260
+    },
+    message: {
+        width: 202,
+        height: 35,
+        fontSize: 16,
+        lineHeight: 17,
+        color: '#000000',
+        // fontFamily: 'Inter',
+        fontWeight: '400',
+        alignSelf: 'center',
+        marginTop: 20,
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+    cancelButton: {
+        width: 100,
+        height: 40,
+        backgroundColor: '#FF8691',
+        borderColor: '#FF3939',
+        borderWidth: 2,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 20,
+        marginRight: 20,
+    },
+    confirmButton: {
+        width: 100,
+        height: 40,
+        borderColor: '#FF3939',
+        backgroundColor: '#FF3939',
+        borderWidth: 2,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 20,
+        marginLeft: 20,
+    },
+    buttonText: {
+        color: '#FFFFFF',
+        // fontFamily: 'Inter',
+        fontWeight: '600',
+        fontSize: 14,
+        lineHeight: 17,
+    },
+    buttonTextCancel: {
+        color: '#FFFFFF',
+        fontWeight: '600',
+        fontSize: 14,
+        lineHeight: 17,
+    }
+});
+
+export default ConfirmationDialog;

MyCardio_MedCare/ECGScreen.js

+import { useState } from "react";
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, View, Image, Alert, ActivityIndicator } from "react-native";
+import * as ImagePicker from "expo-image-picker";
+import Button from "./components/Button";
+import ImageViewer from "./components/ImageViewer";
+import Header from "./components/Header";
+import axios from "axios";
+import { Baseurl } from './components/baseUrl';
+
+const PlaceholderImage = require("./assets/images/sample ecg 3.jpg");
+
+export default function App() {
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    const pickImageAsync = async () => {
+        let result = await ImagePicker.launchImageLibraryAsync({
+            allowsEditing: false,
+            quality: 1,
+        });
+
+        console.log("Image Picker Result:", result);
+
+        if (!result.canceled && result.assets.length > 0) {
+            const selectedImageUri = result.assets[0].uri;
+            console.log("Selected Image URI:", selectedImageUri);
+
+            setSelectedImage(selectedImageUri);
+        } else {
+            alert("You did not select any image.");
+        }
+    };
+
+    const submitImage = async () => {
+        console.log("1");
+        if (selectedImage) {
+            setLoading(true);
+            try {
+                const formData = new FormData();
+                formData.append("file", {
+                    uri: selectedImage,
+                    name: "image.jpg",
+                    type: "image/jpeg",
+                });
+                const response = await axios.post(`${Baseurl}/ecgPredict`, formData, {
+                    headers: {
+                        "Content-Type": "multipart/form-data",
+                    },
+                });
+                if (response.status === 200) {
+                    const data = response.data;
+                    alert("Prediction: " + data.prediction);
+                } else {
+                    alert("Failed to get prediction from server.");
+                }
+            } catch (error) {
+                if (error.response) {
+                    console.error("Server responded with error:", error.response.data);
+                    alert("Server responded with error: " + error.response.data);
+                } else if (error.request) {
+                    console.error("No response received from server:", error.request);
+                    alert("No response received from server.");
+                } else {
+                    console.error("Error setting up request:", error.message);
+                    alert("Error setting up request: " + error.message);
+                }
+            } finally {
+                setLoading(false);
+            }
+        } else {
+            alert("Please choose an image first.");
+        }
+    };
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.headerContainer}>
+                <Header title="ECG Classifier" />
+            </View>
+            <View style={styles.imageContainer}>
+                <ImageViewer
+                    placeholderImageSource={PlaceholderImage}
+                    selectedImage={selectedImage}
+                />
+            </View>
+            <View style={styles.footerContainer}>
+                <Button
+                    theme="primary"
+                    label="Choose a ECG Image"
+                    onPress={pickImageAsync}
+                />
+                <Button label="Predict" onPress={submitImage} />
+                {loading && <ActivityIndicator size="large" color="#F81414" />}
+            </View>
+            <StatusBar style="auto" />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#ffffff",
+    },
+    imageContainer: {
+        flex: 1,
+        paddingTop: 60,
+        alignItems: "center",
+    },
+    image: {
+        width: 320,
+        height: 440,
+        borderRadius: 18,
+        alignItems: "center",
+    },
+    footerContainer: {
+        paddingBottom: 60,
+        alignItems: "center",
+    },
+});

MyCardio_MedCare/HomeScreen.js

+import React, { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, Image, StyleSheet, Modal, ScrollView, TouchableHighlight } from 'react-native';
+import { BackHandler } from 'react-native';
+import { getAuth, signOut } from 'firebase/auth';
+import { auth } from './firebase';
+import ConfirmationDialog from './ConfirmationDialog';
+
+const SupportDetailsModal = ({ isVisible, onClose }) => {
+    return (
+        <Modal
+            animationType="slide"
+            transparent={true}
+            visible={isVisible}
+            onRequestClose={onClose}
+        >
+            <View style={styles.modalContainer}>
+                <View style={styles.modalContent}>
+                    <Text style={styles.modalTitle}>About Us</Text>
+                    <ScrollView contentContainerStyle={styles.modalTextContainer}>
+                        <Text style={styles.modalText}>
+                            Welcome to [MyCardio MedCare] – your companion in postoperative care. 
+                            We're dedicated to supporting heart bypass patients on their journey to recovery. 
+                            With predictive analytics and personalized insights, 
+                            we're here to help you monitor surgical wound healing with ease and confidence. 
+                            Join us and experience peace of mind in your recovery process.
+                        </Text>
+                    </ScrollView>
+                    <TouchableHighlight style={styles.modalCloseButton} onPress={onClose}>
+                        <Text style={styles.modalCloseButtonText}>Close</Text>
+                    </TouchableHighlight>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const HomeScreen = ({ navigation }) => {
+    const [username, setUsername] = useState(null);
+    const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
+    const [showSupportDetails, setShowSupportDetails] = useState(false);
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('focus', () => {
+            console.log('HomeScreen focused, refreshing data...');
+
+            const user = getAuth().currentUser;
+
+            if (user) {
+                setUsername(user.displayName);
+            }
+
+            const backAction = () => {
+                if (navigation.isFocused()) {
+                    BackHandler.exitApp();
+                    return true;
+                }
+                return false;
+            };
+
+            const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+        });
+
+        return unsubscribe;
+    }, [navigation]);
+
+
+    const handleButtonPress = () => {
+        navigation.navigate('PredictHome');
+    };
+
+    const handleProfileButtonPress = () => {
+        navigation.navigate('Profile');
+        // navigation.navigate('UserForm');
+    };
+
+    const handleAboutUsButtonPress = () => {
+        setShowSupportDetails(true);
+    };
+    const handleSupportDetailsClose = () => {
+        setShowSupportDetails(false);
+    };
+
+    const handleLogoutButtonPress = () => {
+        setShowConfirmationDialog(true);
+    };
+
+
+    const handleLogoutCancelled = () => {
+        setShowConfirmationDialog(false);
+    };
+
+    const handleLogoutConfirmed = () => {
+        setShowConfirmationDialog(false);
+        signOut(auth)
+            .then(() => {
+                navigation.navigate('Login');
+            })
+            .catch((error) => {
+                console.error('Error logging out:', error);
+            });
+    };
+
+    
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.rectangle25}>
+                <Image
+                    style={styles.homePic}
+                    source={require('./assets/homeCover.jpg')}
+                />
+            </View>
+            <Text style={styles.welcomeText}>Hi {username},</Text>
+            <Text style={styles.welcomeText}>Welcome to MyCardio MedCare!</Text>
+
+            <TouchableOpacity
+                style={styles.button}
+                onPress={handleProfileButtonPress}
+            >
+                <Image source={require('./assets/profile.png')} style={styles.vectorIcon} />
+                <Text style={styles.buttonText}>Profile</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+                style={styles.buttonPredict}
+                onPress={handleButtonPress}
+            >
+                <Image source={require('./assets/p.png')} style={styles.vectorIcon} />
+                <Text style={styles.buttonTextPredict}>Get Predict</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+                style={styles.buttonAbout}
+                onPress={handleAboutUsButtonPress}
+            >
+                <Image source={require('./assets/aboutUs.png')} style={styles.vectorIconUs} />
+                <Text style={styles.buttonTextPredict}>About Us</Text>
+            </TouchableOpacity>
+            <SupportDetailsModal
+                isVisible={showSupportDetails}
+                onClose={handleSupportDetailsClose}
+            />
+            <TouchableOpacity
+                style={styles.buttonLogout}
+                onPress={handleLogoutButtonPress}
+            >
+                <Image source={require('./assets/logout.png')} style={styles.vectorIcon} />
+                <Text style={styles.buttonTextPredict}>Logout</Text>
+            </TouchableOpacity>
+
+            <ConfirmationDialog
+                isVisible={showConfirmationDialog}
+                message="Are you sure you want to logout?"
+                onCancel={handleLogoutCancelled}
+                onConfirm={handleLogoutConfirmed}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        backgroundColor: '#ffffff',
+        borderTopColor: '#FF3939',
+        borderTopWidth: 50,
+        width: 'auto',
+        height: '100%'
+    },
+    homePic: {
+        position: 'relative',
+        width: 430,
+        height: 337,
+    },
+    welcomeText: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginBottom: 20,
+    },
+    button: {
+        position: 'absolute',
+        width: 150,
+        height: 80,
+        left: 20,
+        top: 480,
+        backgroundColor: '#FF3939',
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#F81414',
+        shadowOffset: {
+            width: 0,
+            height: 1,
+        },
+        shadowOpacity: 6,
+        elevation: 6,
+    },
+
+    buttonPredict: {
+        position: 'absolute',
+        width: 150,
+        height: 80,
+        left: 210,
+        top: 480,
+        backgroundColor: '#FF3939',
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#F81414',
+        shadowOffset: {
+            width: 0,
+            height: 1,
+        },
+        shadowOpacity: 6,
+        elevation: 6,
+    },
+    buttonAbout: {
+        position: 'absolute',
+        width: 150,
+        height: 80,
+        left: 20,
+        top: 580,
+        backgroundColor: '#FF3939',
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#F81414',
+        shadowOffset: {
+            width: 0,
+            height: 1,
+        },
+        shadowOpacity: 6,
+        elevation: 6,
+    },
+    buttonLogout: {
+        position: 'absolute',
+        width: 150,
+        height: 80,
+        left: 210,
+        top: 580,
+        backgroundColor: '#FF3939',
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#F81414',
+        shadowOffset: {
+            width: 0,
+            height: 1,
+        },
+        shadowOpacity: 6,
+        elevation: 6,
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
+    buttonTextPredict: {
+        color: 'white',
+        fontSize: 18,
+        fontWeight: 'bold',
+        left: 5,
+    },
+    vectorIcon: {
+        position: 'absolute',
+        left: 10,
+        top: 10,
+        width: 25,
+        height: 25,
+    },
+    vectorIconUs: {
+        position: 'absolute',
+        left: 5,
+        top: 5,
+        width: 40,
+        height: 40,
+    },
+    modalContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: 350,
+        borderRadius: 40,
+    },
+    modalContent: {
+        backgroundColor: "rgba(255, 134, 145, 1)",
+        borderTopLeftRadius: 40,
+        borderTopRightRadius: 40,
+        padding: 20,
+        borderRadius: 10,
+        elevation: 5,
+    },
+    modalTitle: {
+        fontSize: 30,
+        fontWeight: "bold",
+        marginBottom: 10,
+        color: "black",
+    },
+    modalTextContainer: {
+        paddingBottom: 40,
+    },
+    modalText: {
+        fontSize: 20,
+        marginBottom: 10,
+        color: '#000',
+        fontWeight: '600',
+    },
+    modalCloseButton: {
+        height: 40,
+        borderColor: '#FF3939',
+        backgroundColor: '#FF3939',
+        borderWidth: 2,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 20,
+    },
+    modalCloseButtonText: {
+        color: "white",
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+});
+
+export default HomeScreen;

MyCardio_MedCare/MyComponent.js

+// // MyComponent.js
+
+// import React, { useState, useEffect } from 'react';
+// // import axios from 'axios';
+// import { View, Text, Image } from 'react-native';
+
+// const MyComponent = () => {
+//   // State to store fetched data
+//   const [postData, setPostData] = useState(null);
+
+//   // useEffect to make API call when component mounts
+//   useEffect(() => {
+//     // Function to fetch data
+//     const fetchData = async () => {
+//       try {
+//         // API call using Axios
+//         const response = await axios.get(
+//           'https://graph.facebook.com/v12.0/me?fields=id,name,posts{full_picture,name,object_id,parent_id},feed&access_token=EAAK7BoOU7uUBO1GGge77KPHeFna8Ce21hJSaIZAvB4EWaKLCINpwR4rtIu4bbowNJxuHhZA2leBUYSkHsnZBoBwD5CNeqVMW2tNY2jUZBADEJUxnYgH54oBj7I0pmAZB4h0k6UMRc5xaZBWU48ENkZAhx95lCI5S68cdELZANLQpz4J9eDu4EDH390teiXRhWdil'
+//         );
+
+//         // Update state with the fetched data
+//         setPostData(response.data);
+//       } catch (error) {
+//         // Handle errors
+//         console.error('Error fetching data:', error);
+//       }
+//     };
+
+//     // Call the fetchData function
+//     fetchData();
+//   }, []); // Empty dependency array ensures the effect runs once when the component mounts
+
+//   // If data is still being fetched, show a loading message
+//   if (!postData) {
+//     return <Text>Loading...</Text>;
+//   }
+
+//   return (
+//     <View>
+//       <Text>User ID: {postData.id}</Text>
+//       <Text>User Name: {postData.name}</Text>
+//       <Text>Posts:</Text>
+//       {postData.posts &&
+//         postData.posts.data.map((post) => (
+//           <View key={post.id}>
+//             <Text>Post Name: {post.name}</Text>
+//             <Text>Object ID: {post.object_id}</Text>
+//             <Text>Parent ID: {post.parent_id}</Text>
+//             {post.full_picture && <Image source={{ uri: post.full_picture }} style={{ width: 200, height: 200 }} />}
+//           </View>
+//         ))}
+      
+//       <Text>Feed:</Text>
+//       {postData.feed &&
+//         postData.feed.data.map((feedItem) => (
+//           <View key={feedItem.id}>
+//             <Text>Feed Message: {feedItem.message}</Text>
+//             <Text>Created Time: {feedItem.created_time}</Text>
+//           </View>
+//         ))}
+//     </View>
+//   );
+// };
+
+// export default MyComponent;
+
+// MyComponent.js
+
+import React, { useState, useEffect } from 'react';
+// import axios from 'axios';
+import { View, Text, Image, StyleSheet } from 'react-native';
+
+const MyComponent = () => {
+  // State to store fetched data
+  const [postData, setPostData] = useState(null);
+
+  // useEffect to make API call when component mounts
+  useEffect(() => {
+    // Function to fetch data
+    const fetchData = async () => {
+      try {
+        // API call using Axios
+        const response = await axios.get(
+          'https://graph.facebook.com/v12.0/me?fields=id,name,posts{full_picture,name,object_id,parent_id},feed&access_token=EAAK7BoOU7uUBO1GGge77KPHeFna8Ce21hJSaIZAvB4EWaKLCINpwR4rtIu4bbowNJxuHhZA2leBUYSkHsnZBoBwD5CNeqVMW2tNY2jUZBADEJUxnYgH54oBj7I0pmAZB4h0k6UMRc5xaZBWU48ENkZAhx95lCI5S68cdELZANLQpz4J9eDu4EDH390teiXRhWdil'
+        );
+
+        // Update state with the fetched data
+        setPostData(response.data);
+      } catch (error) {
+        // Handle errors
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    // Call the fetchData function
+    fetchData();
+  }, []); // Empty dependency array ensures the effect runs once when the component mounts
+
+  // If data is still being fetched, show a loading message
+  if (!postData) {
+    return <Text style={styles.loading}>Loading...</Text>;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.userInfo}>User ID: {postData.id}</Text>
+      <Text style={styles.userInfo}>User Name: {postData.name}</Text>
+      <Text style={styles.sectionTitle}>Posts:</Text>
+      {postData.posts &&
+        postData.posts.data.map((post) => (
+          <View key={post.id} style={styles.postContainer}>
+            <Text style={styles.postText}>Post Name: {post.name}</Text>
+            <Text style={styles.postText}>Object ID: {post.object_id}</Text>
+            <Text style={styles.postText}>Parent ID: {post.parent_id}</Text>
+            {post.full_picture && (
+              <Image source={{ uri: post.full_picture }} style={styles.postImage} />
+            )}
+          </View>
+        ))}
+
+      <Text style={styles.sectionTitle}>Feed:</Text>
+      {postData.feed &&
+        postData.feed.data.map((feedItem) => (
+          <View key={feedItem.id} style={styles.feedContainer}>
+            <Text style={styles.feedText}>Feed Message: {feedItem.message}</Text>
+            <Text style={styles.feedText}>Created Time: {feedItem.created_time}</Text>
+          </View>
+        ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#fff',
+  },
+  loading: {
+    fontSize: 20,
+    textAlign: 'center',
+    marginTop: 20,
+  },
+  userInfo: {
+    fontSize: 16,
+    marginBottom: 10,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginTop: 20,
+    marginBottom: 10,
+  },
+  postContainer: {
+    marginBottom: 20,
+    padding: 10,
+    backgroundColor: '#f9f9f9',
+    borderRadius: 5,
+  },
+  postText: {
+    fontSize: 14,
+    marginBottom: 5,
+  },
+  postImage: {
+    width: 200,
+    height: 200,
+    marginTop: 10,
+  },
+  feedContainer: {
+    marginBottom: 20,
+    padding: 10,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 5,
+  },
+  feedText: {
+    fontSize: 14,
+    marginBottom: 5,
+  },
+});
+
+export default MyComponent;

MyCardio_MedCare/Predict.js

+import React, { useState, useCallback } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  ScrollView,
+  TouchableOpacity,
+  RefreshControl,
+  Alert,
+  ActivityIndicator,
+  TextInput,
+} from "react-native";
+import { Picker } from "@react-native-picker/picker";
+import { Baseurl } from "./components/baseUrl";
+
+const Predict = ({ navigation }) => {
+  const [age, setAge] = useState("");
+  const [sex, setSex] = useState("");
+  const [sys, setSys] = useState("");
+  const [dia, setDia] = useState("");
+  const [week, setWeek] = useState("");
+  const [cut, setCut] = useState("");
+  const [blister, setBlister] = useState("");
+  const [rub, setRub] = useState("");
+  const [swollen, setSwollen] = useState("");
+  const [round, setRound] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setAge("");
+    setSys("");
+    setDia("");
+    setWeek("");
+
+    setSex("");
+    setCut("");
+    setBlister("");
+    setRub("");
+    setSwollen("");
+    setRound("");
+
+    setRefreshing(false);
+  }, []);
+
+  const GetPredict = () => {
+    if (
+      age === "" ||
+      sex === "" ||
+      sys === "" ||
+      dia === "" ||
+      week === "" ||
+      cut === "" ||
+      blister === "" ||
+      rub === "" ||
+      swollen === "" ||
+      round === ""
+    ) {
+      Alert.alert("Error", "Please fill and select values for all dropdowns.");
+    } else {
+      setIsLoading(true);
+
+      const requestBody = {
+        age: age,
+        sex: sex,
+        sysBP: sys,
+        diaBP: dia,
+        apro_weeks: week,
+        typeof_cut: cut,
+        are_there_blisters: blister,
+        do_you_rub_the_wound: rub,
+        is_it_swollen: swollen,
+        colour_around_the_wound: round,
+      };
+
+      fetch(`${Baseurl}/wondHealPredict`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(requestBody),
+      })
+        .then((response) => {
+          // Handle response
+          if (!response.ok) {
+            throw new Error("Network response was not ok");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          setIsLoading(false);
+          Alert.alert(
+            "State of your wound",
+            `Percentage of Heal: ${data.Precentage_of_heal}\nStage: ${data.stage}`
+          );
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+          Alert.alert("Error", "Failed to process. Please try again later.");
+          setIsLoading(false);
+        });
+    }
+  };
+
+  return (
+    <ScrollView
+      contentContainerStyle={styles.scrollViewContent}
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }
+    >
+      <View style={styles.container}>
+        <Image
+          style={styles.homePic}
+          source={require("./assets/homeCover.jpg")}
+        />
+        <View style={styles.rectangle81}></View>
+        <Text style={styles.predictText}>Get Predict for Your Wound</Text>
+        <View style={styles.rectangle49}></View>
+
+        <View style={styles.redBox}>
+          <Text style={styles.selectLocationText}>
+            Select All Dropdowns and Enter all Value
+          </Text>
+          <Text style={styles.question}> Age</Text>
+          <TextInput
+            style={styles.textInput}
+            keyboardType="number-pad"
+            placeholder="Enter your Age"
+            value={age}
+            onChangeText={(text) => setAge(text)}
+          />
+
+          <Text style={styles.question}>Sex</Text>
+          <Picker
+            selectedValue={sex}
+            style={styles.dropdown}
+            onValueChange={(itemValue, itemIndex) => setSex(itemValue)}
+          >
+            <Picker.Item label="Select One" value="" />
+            <Picker.Item label="Male" value="1" />
+            <Picker.Item label="Female" value="0" />
+          </Picker>
+
+          <Text style={styles.question}> SysBP</Text>
+          <TextInput
+            style={styles.textInput}
+            keyboardType="number-pad"
+            placeholder="Enter SysBP"
+            value={sys}
+            onChangeText={(text) => setSys(text)}
+          />
+
+          <Text style={styles.question}> DiaBP</Text>
+          <TextInput
+            style={styles.textInput}
+            keyboardType="number-pad"
+            placeholder="Enter DiaBP"
+            value={dia}
+            onChangeText={(text) => setDia(text)}
+          />
+
+          <Text style={styles.question}> Approximate Weeks </Text>
+          <TextInput
+            style={styles.textInput}
+            keyboardType="number-pad"
+            placeholder="Enter Number of Weeks"
+            value={week}
+            onChangeText={(text) => setWeek(text)}
+          />
+
+          <Text style={styles.question}>Type of Cut</Text>
+          <Picker
+            selectedValue={cut}
+            style={styles.dropdown}
+            onValueChange={(itemValue, itemIndex) => setCut(itemValue)}
+          >
+            <Picker.Item label="Select One" value="" />
+            <Picker.Item label="Double bypass surgery" value="1" />
+            <Picker.Item label="Traditional CABG" value="2" />
+            <Picker.Item label=" Triple bypass surgery" value="3" />
+            <Picker.Item label="Quintuple bypass surgery" value="4" />
+          </Picker>
+          <Text style={styles.question}>Are there Blister?</Text>
+          <Picker
+            selectedValue={blister}
+            style={styles.dropdown}
+            onValueChange={(itemValue, itemIndex) => setBlister(itemValue)}
+          >
+            <Picker.Item label="Select One" value="" />
+            <Picker.Item label="Yes" value="1" />
+            <Picker.Item label="No" value="0" />
+          </Picker>
+          <Text style={styles.question}>Do you rub the wound?</Text>
+          <Picker
+            selectedValue={rub}
+            style={styles.dropdown}
+            onValueChange={(itemValue, itemIndex) => setRub(itemValue)}
+          >
+            <Picker.Item label="Select One" value="" />
+            <Picker.Item label="Yes" value="1" />
+            <Picker.Item label="No" value="0" />
+          </Picker>
+          <Text style={styles.question}>Is it swollen?</Text>
+          <Picker
+            selectedValue={swollen}
+            style={styles.dropdown}
+            onValueChange={(itemValue, itemIndex) => setSwollen(itemValue)}
+          >
+            <Picker.Item label="Select One" value="" />
+            <Picker.Item label="Yes" value="1" />
+            <Picker.Item label="No" value="2" />
+          </Picker>
+          <Text style={styles.question}>Color round the wound</Text>
+          <Picker
+            selectedValue={round}
+            style={styles.dropdown}
+            onValueChange={(itemValue, itemIndex) => setRound(itemValue)}
+          >
+            <Picker.Item label="Select One" value="" />
+            <Picker.Item label="Yellow" value="1" />
+            <Picker.Item label="Red" value="2" />
+            <Picker.Item label="Brown" value="3" />
+            <Picker.Item label="Dark Red" value="4" />
+          </Picker>
+        </View>
+
+        <TouchableOpacity style={styles.rectangle84} onPress={GetPredict}>
+          {isLoading && <ActivityIndicator size="large" color="#000" />}
+          <Text style={styles.processText}>Process</Text>
+        </TouchableOpacity>
+        <View style={styles.rectangle93}></View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollViewContent: {
+    flexGrow: 1,
+  },
+  container: {
+    position: "relative",
+    width: "auto",
+    height: 1350,
+    backgroundColor: "#FFFFFF",
+  },
+  predictText: {
+    position: "absolute",
+    width: "auto",
+    height: 24,
+    left: "2.5%",
+    top: "16%",
+    fontStyle: "normal",
+    fontWeight: "700",
+    fontSize: 20,
+    lineHeight: 24,
+    textAlign: "center",
+    color: "#000000",
+  },
+  rectangle81: {
+    position: "absolute",
+    width: 430,
+    height: 165,
+    left: 0,
+    top: 0,
+  },
+  rectangle49: {
+    position: "absolute",
+    width: 23,
+    height: 23,
+    left: 108,
+    top: 887,
+    backgroundColor: "url(48)",
+  },
+  redBox: {
+    position: "absolute",
+    width: "85%",
+    height: "auto",
+    alignSelf: "center",
+    top: "20%",
+    backgroundColor: "#FF3939",
+    borderRadius: 10,
+    padding: 20,
+  },
+  selectLocationText: {
+    marginBottom: 10,
+    fontStyle: "normal",
+    fontWeight: "600",
+    fontSize: 17,
+    lineHeight: 19,
+    textAlign: "center",
+    color: "#fff",
+  },
+  rectangle84: {
+    position: "absolute",
+    width: 131,
+    height: 37,
+    left: "30%",
+    top: 1305,
+    backgroundColor: "#FF3939",
+    borderWidth: 1,
+    borderColor: "#000000",
+    borderRadius: 15,
+  },
+  processText: {
+    position: "absolute",
+    width: 80,
+    height: 24,
+    left: "20%",
+    top: "12%",
+    fontStyle: "normal",
+    fontWeight: "700",
+    fontSize: 20,
+    lineHeight: 24,
+    textAlign: "center",
+    color: "rgba(0, 0, 0, 0.89)",
+  },
+  rectangle93: {
+    position: "absolute",
+    width: 10,
+    height: 10,
+    left: 368,
+    top: 285,
+    backgroundColor: "url(Inputs (22))",
+  },
+
+  homePic: {
+    position: "absolute",
+    width: "100%",
+    height: "15%",
+    left: 0,
+    top: "0%",
+  },
+  question: {
+    fontSize: 15,
+    marginBottom: 12,
+    color: "#FFFF",
+  },
+  dropdown: {
+    height: 50,
+    width: "100%",
+    marginBottom: 20,
+    backgroundColor: "#fafafa",
+  },
+  textInput: {
+    backgroundColor: "#FFFF",
+    height: 45,
+    fontSize: 15,
+    textAlign: "auto",
+    paddingHorizontal: 16,
+  },
+});
+
+export default Predict;

MyCardio_MedCare/PredictHomeScreen.js

+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+
+const PredictHomeScreen = ({ navigation }) => {
+
+    const updateProfile = () => {
+        navigation.navigate('Stress');
+    };
+
+    const handleWound = () => {
+        navigation.navigate('Predict');
+    };
+    const handleUserForm = () => {
+        navigation.navigate('UserForm');
+    };
+    const handleECG = () => {
+        navigation.navigate('ECG');
+    };
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>Predict Home Screen</Text>
+            <TouchableOpacity style={styles.predictButton} onPress={updateProfile}>
+                <Text style={styles.predictButtonText}>Stress Prediction</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.predictButton} onPress={handleUserForm}>
+                <Text style={styles.predictButtonText}>Heart Disease Prediction</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.predictButton} onPress={handleWound}>
+                <Text style={styles.predictButtonText}>Heart Wound Healing Stage Prediction</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.predictButton} onPress={handleECG}>
+                <Text style={styles.predictButtonText}>ECG Prediction</Text>
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 16,
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: '500',
+        bottom: '25%'
+    },
+    predictButton: {
+        backgroundColor: '#F81414',
+        borderRadius: 5,
+        paddingVertical: 10,
+        alignItems: 'center',
+        marginVertical: 20,
+        width: '82%',
+        bottom: '15%'
+    },
+    predictButtonText: {
+        color: 'white',
+        fontSize: 15,
+        fontWeight: 'bold',
+    },
+});
+
+export default PredictHomeScreen;

MyCardio_MedCare/ProfileScreen.js

+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Text, TextInput, StyleSheet, Image, TouchableOpacity, ScrollView, RefreshControl, ActivityIndicator, ToastAndroid } from 'react-native';
+import { getAuth, updateProfile as updateAuthProfile, updateEmail as updateAuthEmail } from 'firebase/auth';
+import { doc, getDoc, setDoc } from 'firebase/firestore';
+import { getDownloadURL, ref, uploadBytes, getStorage } from 'firebase/storage';
+import Constants from 'expo-constants';
+import * as ImagePicker from 'expo-image-picker';
+import { db, app } from './firebase';
+
+const UpdateProfileScreen = () => {
+    const [username, setUsername] = useState(null);
+    const [contact, setContact] = useState(null);
+    const [emails, setEmail] = useState(null);
+    const [profileImageUrl, setProfileImageUrl] = useState(null);
+    const [imageUri, setImageUri] = useState(null);
+    const [refreshing, setRefreshing] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const onRefresh = useCallback(() => {
+        setRefreshing(true);
+        fetchData();
+        setRefreshing(false);
+    }, []);
+
+    const fetchData = async () => {
+        const user = getAuth().currentUser;
+        if (user) {
+            setUsername(user.displayName);
+            setEmail(user.email);
+
+            const storage = getStorage(app);
+            const storageRef = ref(storage, `user_images/${user.uid}.jpeg`);
+
+            try {
+                const url = await getDownloadURL(storageRef);
+                setProfileImageUrl(url);
+            } catch (error) {
+                console.error('Error fetching profile picture:', error);
+            }
+
+            const userRef = doc(db, 'users', user.uid);
+
+            try {
+                const docSnapshot = await getDoc(userRef);
+
+                if (docSnapshot.exists()) {
+                    setContact(docSnapshot.data().contactNumber);
+                } else {
+                    console.warn('Volunteer ID not found in Firestore for the user.');
+                }
+            } catch (error) {
+                console.error('Error fetching user document:', error);
+            }
+        }
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const updateProfile = async () => {
+        if (!contact || !username || !emails) {
+            const value = 'Please fill in all fields.';
+            ToastAndroid.showWithGravityAndOffset(
+                value,
+                ToastAndroid.SHORT,
+                ToastAndroid.BOTTOM,
+                25,
+                50
+            );
+            return;
+        }
+        setLoading(true);
+        const user = getAuth().currentUser;
+        console.log('Details', user);
+
+        try {
+            // Update Firestore data
+            const userRef = doc(db, 'users', user.uid);
+
+            const dataToUpdate = {};
+
+            if (imageUri) {
+                // If a new image is selected, upload it to storage
+                const storage = getStorage(app);
+                const storageRef = ref(storage, `user_images/${user.uid}.jpeg`);
+
+                // Upload the image
+                const response = await fetch(imageUri);
+                const blob = await response.blob();
+                await uploadBytes(storageRef, blob);
+
+                // Get the download URL of the uploaded image
+                const imageUrl = await getDownloadURL(storageRef);
+                dataToUpdate.profileImageUrl = imageUrl;
+            }
+
+            if (contact !== null) {
+                dataToUpdate.contactNumber = contact;
+            }
+
+            if (username !== null && user.displayName !== username) {
+                await updateAuthProfile(user, { displayName: username });
+            }
+
+            if (emails !== null && user.email !== emails) {
+                await updateAuthEmail(user, emails);
+                console.log("Email updated successfully. Verification email sent.");
+            }
+
+
+            await setDoc(userRef, dataToUpdate, { merge: true });
+
+            console.log('Profile updated successfully!');
+            const value = 'Profile updated successfully!';
+            ToastAndroid.showWithGravityAndOffset(
+                value,
+                ToastAndroid.SHORT,
+                ToastAndroid.BOTTOM,
+                25,
+                50
+            );
+        } catch (error) {
+            console.error('Error updating profile:', error);
+        } finally {
+            setLoading(false); // Set loading back to false, whether the update was successful or not
+        }
+    };
+
+
+    const handleImageUpload = async () => {
+        if (Constants.platform.android) {
+            const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+            if (status !== 'granted') {
+                alert('Sorry, we need media library permissions to make this work!');
+                return;
+            }
+
+            const result = await ImagePicker.launchImageLibraryAsync({
+                mediaTypes: ImagePicker.MediaTypeOptions.Images,
+                allowsEditing: true,
+                aspect: [1, 1],
+                quality: 1,
+            });
+
+            if (!result.canceled) {
+                setImageUri(result.assets[0].uri);
+                setProfileImageUrl(result.assets[0].uri);
+            } else {
+                console.log('Image selection canceled');
+            }
+        }
+    };
+
+    return (
+        <ScrollView
+            style={styles.container}
+            contentContainerStyle={styles.contentContainer}
+            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        >
+            <View style={styles.container}>
+                <Text style={styles.option}>Profile</Text>
+                {profileImageUrl ? (
+                    <Image source={{ uri: profileImageUrl }} style={styles.profileImage} />
+                ) : (
+                    <Image source={require('./assets/users.png')} style={styles.profileImage} />
+                )}
+
+                <TouchableOpacity onPress={handleImageUpload}>
+                    <Image source={require('./assets/camVector.png')} style={styles.camera} />
+                </TouchableOpacity>
+                <Text style={styles.texts}>Email:</Text>
+                <TextInput
+                    style={styles.input}
+                    value={emails}
+                    onChangeText={(text) => setEmail(text)}
+                />
+                <Text style={styles.texts}>Name:</Text>
+                <TextInput
+                    style={styles.input}
+                    value={username}
+                    onChangeText={(text) => setUsername(text)}
+                    placeholder="Enter your Name"
+                />
+                <Text style={styles.texts}>Contact No:</Text>
+                <TextInput
+                    style={styles.input}
+                    value={contact}
+                    onChangeText={(Number) => setContact(Number)}
+                    placeholder="Enter your Contact"
+                    keyboardType="number-pad"
+                />
+                {loading && (
+                    <ActivityIndicator size="large" color="#F81414" style={styles.loadingIndicator} />
+                )}
+
+                <TouchableOpacity style={styles.signupButton} onPress={updateProfile} disabled={loading}>
+                    <Text style={styles.signupButtonText}>Update Profile</Text>
+                </TouchableOpacity>
+            </View>
+        </ScrollView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#EBB0B0',
+    },
+    contentContainer: {
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        paddingTop: 100,
+    },
+    input: {
+        height: 40,
+        borderColor: 'gray',
+        borderWidth: 1,
+        borderRadius: 5,
+        margin: 10,
+        padding: 10,
+        width: 300,
+    },
+    signupButton: {
+        backgroundColor: '#F81414',
+        borderRadius: 5,
+        paddingVertical: 15,
+        alignItems: 'center',
+        marginVertical: 20,
+    },
+    signupButtonText: {
+        color: 'white',
+        fontSize: 15,
+        fontWeight: 'bold',
+    },
+    profileImage: {
+        width: 120,
+        height: 120,
+        borderRadius: 60,
+        top: -30,
+        left: 100,
+    },
+    texts: {
+        fontSize: 15,
+        fontWeight: 'bold',
+    },
+    camera: {
+        top: -145,
+        left: 200,
+    },
+    option: {
+        fontSize: 35,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        top: -50,
+        right: 0,
+    },
+});
+
+export default UpdateProfileScreen;
\ No newline at end of file

MyCardio_MedCare/SplashScreen.js

+// SplashScreen.js
+import React, { useEffect } from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+
+const SplashScreen = ({ navigation }) => {
+    // Use useEffect to navigate to the main screen after a delay
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            navigation.replace('Login'); // Replace with your main screen name
+        }, 2000); // Set the duration for how long the splash screen should be displayed (in milliseconds)
+        return () => clearTimeout(timer); // Clear the timer if the component unmounts
+    }, []);
+
+    return (
+        <View style={styles.container}>
+            <Image
+                source={require('./assets/logo.jpg')}
+                style={styles.logo}
+            />
+            <Text style={styles.textTop}>MY CARDIO MED CARE</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+    },
+    logo: {
+        width: 900,
+        height: 170,
+        resizeMode: 'contain',
+    },
+    textTop: {
+        fontWeight: 'bold',
+        fontStyle: 'italic',
+        color: '#FF3939',
+        fontSize: 25,
+    },
+});
+
+export default SplashScreen;

MyCardio_MedCare/StressPredict.js

+import React, { useState } from 'react';
+import { StyleSheet, View, Text, TextInput, TouchableOpacity, Alert, ActivityIndicator } from 'react-native';
+import { Baseurl } from './components/baseUrl';
+
+export default function App() {
+    const [jobSatisfaction, setJobSatisfaction] = useState(null);
+    const [sleepHours, setSleepHours] = useState(null);
+    const [entryText, setEntryText] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleAddData = async () => {
+        setLoading(true);
+        const body = {
+            text: entryText,
+            sleep_hours: sleepHours,
+            job_satisfaction: jobSatisfaction === 'yes' ? 1 : 0,
+        };
+
+        try {
+            const response = await fetch(`${ Baseurl }/stressPredict`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(body),
+            });
+
+            const result = await response.json();
+            Alert.alert('Prediction Result', `Prediction: ${result.prediction}\nProbability: ${result.probability}`);
+        } catch (error) {
+            Alert.alert('Error', 'Failed to get prediction. Please try again later.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClear = () => {
+        setJobSatisfaction(null);
+        setSleepHours(null);
+        setEntryText('');
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>Select Your Job Satisfaction</Text>
+            <View style={styles.satisfactionContainer}>
+                <TouchableOpacity
+                    style={[styles.iconButton, jobSatisfaction === 'yes' && styles.selected]}
+                    onPress={() => setJobSatisfaction('yes')}
+                >
+                    <Text style={styles.iconText}>😊</Text>
+                    <Text style={styles.buttonText}>Yes</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                    style={[styles.iconButton, jobSatisfaction === 'no' && styles.selected]}
+                    onPress={() => setJobSatisfaction('no')}
+                >
+                    <Text style={styles.iconText}>😞</Text>
+                    <Text style={styles.buttonText}>No</Text>
+                </TouchableOpacity>
+            </View>
+
+            <Text style={styles.title}>Select Your Sleep Hours</Text>
+            <View style={styles.sleepHoursContainer}>
+                {[5, 6, 7, 8, 9].map(hour => (
+                    <TouchableOpacity
+                        key={hour}
+                        style={[styles.sleepButton, sleepHours === hour && styles.selected]}
+                        onPress={() => setSleepHours(hour)}
+                    >
+                        <Text style={styles.buttonText}>{hour}</Text>
+                    </TouchableOpacity>
+                ))}
+            </View>
+
+            <Text style={styles.title}>Write Your Entry</Text>
+            <TextInput
+                style={styles.textInput}
+                placeholder="Enter Text ..."
+                placeholderTextColor="#aaa"
+                value={entryText}
+                onChangeText={setEntryText}
+                multiline
+            />
+
+            <View style={styles.buttonContainer}>
+                <TouchableOpacity style={styles.addButton} onPress={handleAddData} disabled={loading}>
+                    {loading ? (
+                        <ActivityIndicator size="small" color="#fff" />
+                    ) : (
+                        <Text style={styles.buttonText}>PREDICT DATA</Text>
+                    )}
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.closeButton} onPress={handleClear}>
+                    <Text style={styles.buttonText}>CLEAR</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F4F4F4',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 20,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginVertical: 10,
+    },
+    satisfactionContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        width: '100%',
+        marginBottom: 20,
+    },
+    iconButton: {
+        alignItems: 'center',
+        padding: 10,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: '#ccc',
+    },
+    iconText: {
+        fontSize: 30,
+    },
+    sleepHoursContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        width: '100%',
+        marginBottom: 20,
+    },
+    sleepButton: {
+        alignItems: 'center',
+        padding: 10,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: '#ccc',
+    },
+    textInput: {
+        height: 100,
+        width: '100%',
+        borderColor: '#ccc',
+        borderWidth: 1,
+        borderRadius: 10,
+        padding: 10,
+        backgroundColor: '#ff0000',
+        color: '#fff',
+        marginBottom: 20,
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    addButton: {
+        backgroundColor: '#ff0000',
+        padding: 15,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '45%',
+    },
+    closeButton: {
+        backgroundColor: '#00ff00',
+        padding: 15,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '45%',
+    },
+    buttonText: {
+        color: '#000',
+        fontWeight: 'bold',
+    },
+    selected: {
+        borderColor: '#000',
+        borderWidth: 2,
+    },
+});

MyCardio_MedCare/UserForm.js

+import React, { useState } from 'react';
+import { StatusBar, StyleSheet, View, TextInput, Text, Pressable, Alert, ActivityIndicator } from 'react-native';
+import { ref, set } from "firebase/database";
+// import { db } from './config';
+import { Picker } from '@react-native-picker/picker';
+import axios from 'axios';
+import { Baseurl } from './components/baseUrl';
+
+export default function App() {
+  const [age, setAge] = useState("");
+  const [sex, setSex] = useState("");
+  const [cp, setCp] = useState("");
+  const [trestbps, setTrestbps] = useState("");
+  const [chol, setChol] = useState("");
+  const [restecg, setRestecg] = useState("");
+  const [thalach, setThalach] = useState("");
+  const [thal, setThal] = useState("");
+  const [predictionResult, setPredictionResult] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  function create() {
+    // try {
+    //   const databaseRef = ref(db, 'users/');
+    //   set(databaseRef, {
+    //     age: age !== "" ? parseInt(age) : 0,
+    //     sex: sex !== "" ? parseInt(sex) : 0,
+    //     cp: cp !== "" ? parseInt(cp) : 0,
+    //     trestbps: trestbps !== "" ? parseInt(trestbps) : 0,
+    //     chol: chol !== "" ? parseInt(chol) : 0,
+    //     restecg: restecg !== "" ? parseInt(restecg) : 0,
+    //     thalach: thalach !== "" ? parseInt(thalach) : 0,
+    //     thal: thal !== "" ? parseInt(thal) : 0,
+    //   }).then(() => {
+    //     alert('Your Data updated successfully');
+    //   }).catch((error) => {
+    //     console.error('Error writing data:', error);
+    //     alert('Failed to update data. Please check the console for details.');
+    //   });
+    // } catch (error) {
+    //   console.error('Error:', error);
+    //   alert('Failed to update data');
+    // }
+  }
+
+  async function predict() {
+    try {
+      setLoading(true);
+      const response = await axios.post(`${Baseurl}/heartPredict`, {
+        age: age !== "" ? parseInt(age) : 0,
+        sex: sex !== "" ? parseInt(sex) : 0,
+        cp: cp !== "" ? parseInt(cp) : 0,
+        trestbps: trestbps !== "" ? parseInt(trestbps) : 0,
+        chol: chol !== "" ? parseInt(chol) : 0,
+        restecg: restecg !== "" ? parseInt(restecg) : 0,
+        thalach: thalach !== "" ? parseInt(thalach) : 0,
+        thal: thal !== "" ? parseInt(thal) : 0,
+      });
+      console.log('Prediction response:', response.data);
+      const prediction = response.data.prediction_text;
+      if (prediction.includes("Heart problem")) {
+        Alert.alert('Prediction Result', "Patient has heart disease risk detected. Please consult a doctor.");
+      } else {
+        Alert.alert('Prediction Result', "Heart disease risk not detected. You're doing good!");
+      }
+    } catch (error) {
+      console.error('Prediction failed:', error.response ? error.response.data : error.message);
+      Alert.alert('Failed to make prediction', 'Please check the console for details.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function clearDetails() {
+    Alert.alert(
+      "Clear Data",
+      "Are you sure you want to clear all data?",
+      [
+        {
+          text: "Cancel",
+          style: "cancel"
+        },
+        {
+          text: "OK",
+          onPress: () => {
+            setAge("");
+            setSex("");
+            setCp("");
+            setTrestbps("");
+            setChol("");
+            setRestecg("");
+            setThalach("");
+            setThal("");
+          }
+        }
+      ]
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Patient Information</Text>
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>Age</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setAge}
+          value={age}
+          placeholder="Enter Your Age"
+          keyboardType="numeric"
+        />
+      </View>
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>Sex</Text>
+        <View style={styles.pickerContainer}>
+          <Picker
+            style={styles.input}
+            selectedValue={sex}
+            onValueChange={(itemValue) => setSex(itemValue)}
+          >
+            <Picker.Item label="Female" value="0" />
+            <Picker.Item label="Male" value="1" />
+          </Picker>
+        </View>
+      </View>
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>Chest Pain Type</Text>
+        <View style={styles.pickerContainer}>
+          <Picker
+            style={styles.input}
+            selectedValue={cp}
+            onValueChange={(itemValue) => setCp(itemValue)}
+          >
+            <Picker.Item label="Typical angina" value="0" />
+            <Picker.Item label="Atypical angina" value="1" />
+            <Picker.Item label="Non-anginal pain" value="2" />
+            <Picker.Item label="Asymptomatic" value="3" />
+          </Picker>
+        </View>
+      </View>
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>Resting Blood Pressure</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setTrestbps}
+          value={trestbps}
+          placeholder="Enter Resting BP in mmHg"
+          keyboardType="numeric"
+        />
+      </View>
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>Cholesterol</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setChol}
+          value={chol}
+          placeholder="Enter Cholesterol in mg/dl"
+          keyboardType="numeric"
+        />
+      </View>
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>Resting ECG</Text>
+        <View style={styles.pickerContainer}>
+          <Picker
+            style={styles.input}
+            selectedValue={restecg}
+            onValueChange={(itemValue) => setRestecg(itemValue)}
+          >
+            <Picker.Item label="Nothing to note" value="0" />
+            <Picker.Item label="ST-T Wave abnormality" value="1" />
+            <Picker.Item label="Possible" value="2" />
+          </Picker>
+        </View>
+      </View>
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>Maximum Heart Rate</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setThalach}
+          value={thalach}
+          placeholder="Enter maximum heart rate"
+          keyboardType="numeric"
+        />
+      </View>
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>Thalium stress result</Text>
+        <View style={styles.pickerContainer}>
+          <Picker
+            style={styles.input}
+            selectedValue={thal}
+            onValueChange={(itemValue) => setThal(itemValue)}
+          >
+            <Picker.Item label="Normal" value="1" />
+            <Picker.Item label="Fixed defect" value="2" />
+            <Picker.Item label="Reversible defect" value="3" />
+          </Picker>
+        </View>
+      </View>
+      <View style={styles.buttonContainer}>
+        <Pressable style={styles.saveButton} onPress={create}>
+          <Text style={styles.saveButtonText}>SAVE</Text>
+        </Pressable>
+        <Pressable style={styles.predictButton} onPress={predict} disabled={loading}>
+          {loading ? (
+            <ActivityIndicator size="small" color="#fff" />
+          ) : (
+            <Text style={styles.predictButtonText}>Predict</Text>
+          )}
+        </Pressable>
+        <Pressable style={styles.clearButton} onPress={clearDetails}>
+          <Text style={styles.clearButtonText}>CLEAR</Text>
+        </Pressable>
+      </View>
+      <StatusBar style="auto" />
+      {predictionResult ? <Text style={styles.predictionResult}>{predictionResult}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F4F4F4',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  label: {
+    width: 120,
+    marginRight: 5,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  input: {
+    flex: 1,
+    height: 30,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+  },
+  pickerContainer: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 4,
+    height: 30,
+    paddingHorizontal: 10,
+    justifyContent: 'center',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    marginTop: 6,
+  },
+  predictButton: {
+    backgroundColor: '#FF3131',
+    paddingVertical: 8,
+    paddingHorizontal: 30,
+    borderRadius: 8,
+    elevation: 2,
+  },
+  predictButtonText: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  saveButton: {
+    backgroundColor: '#008CBA',
+    paddingVertical: 8,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    elevation: 2,
+  },
+  saveButtonText: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  title: {
+    color: '#888',
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    color: '#333',
+    top: 5,
+    left: 0.01,
+  },
+  predictionResult: {
+    marginTop: 20,
+    fontWeight: 'bold',
+    fontSize: 16,
+    textAlign: 'center',
+    color: '#333',
+  },
+  clearButton: {
+    backgroundColor: '#4CAF50',
+    paddingVertical: 8,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    elevation: 2,
+  },
+});

MyCardio_MedCare/app.json

+{
+  "expo": {
+    "name": "MyCardio_MedCare",
+    "slug": "MyCardio_MedCare",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

MyCardio_MedCare/babel.config.js

+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

MyCardio_MedCare/components/Button.js

+import { StyleSheet, View, Pressable, Text } from 'react-native';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+
+export default function Button({ label, theme, onPress }) {
+    if (theme === "primary") {
+      return (
+        <View style={[styles.buttonContainer, { borderWidth: 4, borderColor: "#cc0000", borderRadius: 18 }]}>
+          <Pressable
+            style={[styles.button, { backgroundColor: "#ff4d4d" }]}
+            onPress={onPress}
+          >
+            <FontAwesome
+              name="picture-o"
+              size={18}
+              color="#25292e"
+              style={styles.buttonIcon}
+            />
+            <Text style={[styles.buttonLabel, { color: "#25292e" }]}>{label}</Text>
+          </Pressable>
+        </View>
+      );
+    }
+
+
+  return (
+    <View style={styles.buttonContainer}>
+        <Pressable style={styles.button} onPress={onPress}>
+          <Text style={styles.buttonLabel}>{label}</Text>
+        </Pressable>
+      </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    width: 320,
+    height: 68,
+    marginHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 3,
+  },
+  button: {
+    borderRadius: 10,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  buttonIcon: {
+    paddingRight: 8,
+  },
+  buttonLabel: {
+    color: 'red',
+    fontSize: 20,
+  },
+});

MyCardio_MedCare/components/Header.js

+// Header.js
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const Header = ({ title }) => {
+  return (
+    <View style={styles.header}>
+      <Text style={styles.headerText}>{title}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    marginTop: 20,
+    backgroundColor: 'red',
+    paddingVertical: 10,
+    paddingHorizontal: 120,
+    alignItems: 'center',
+  },
+  headerText: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#fff',
+  },
+});
+
+export default Header;

MyCardio_MedCare/components/ImageViewer.js

+import { StyleSheet, Image } from 'react-native';
+
+export default function ImageViewer({ placeholderImageSource, selectedImage }) {
+    const imageSource = selectedImage  ? { uri: selectedImage } : placeholderImageSource;
+  
+    return <Image source={imageSource} style={styles.image} resizeMode="contain" />;
+  }
+
+const styles = StyleSheet.create({
+  image: {
+    width: 320,
+    height: 440,
+    borderRadius: 18,
+  },
+});

MyCardio_MedCare/components/baseUrl.js

+export const Baseurl = "http://16.171.154.30";
\ No newline at end of file

MyCardio_MedCare/components/config.js

+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getDatabase, set, ref } from "firebase/database";
+
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyBt1scIzPa-BsjSpdkTbm-JJeedTw4t2GI",
+  authDomain: "ecg-classification-148c2.firebaseapp.com",
+  projectId: "ecg-classification-148c2",
+  storageBucket: "ecg-classification-148c2.appspot.com",
+  messagingSenderId: "456499086876",
+  appId: "1:456499086876:web:7f6da6faa8ccf8700401d9",
+  measurementId: "G-4VQTWD2931",
+  databaseURL: "https://ecg-classification-148c2-default-rtdb.firebaseio.com/"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const db = getDatabase(app); // Get the database instance
+
+export { db }; // Export the database instance
\ No newline at end of file

MyCardio_MedCare/firebase.js

+import { initializeApp } from 'firebase/app';
+import { getAuth, initializeAuth, getReactNativePersistence } from 'firebase/auth';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { getFirestore } from 'firebase/firestore';
+import { getStorage } from 'firebase/storage';
+
+const firebaseConfig = {
+    apiKey: "AIzaSyBQ205Feck1kc940z8q7RActby_xz7IPGk",
+    authDomain: "medcare-63b18.firebaseapp.com",
+    projectId: "medcare-63b18",
+    storageBucket: "medcare-63b18.appspot.com",
+    messagingSenderId: "1057524522978",
+    appId: "1:1057524522978:web:6dfa36b74f51b8933da3bb"
+};
+
+// Initialize Firebase if it's not already initialized
+const app = initializeApp(firebaseConfig);
+
+// Get the Firebase Authentication instance
+const auth = initializeAuth(app, {
+    persistence: getReactNativePersistence(AsyncStorage),
+});
+
+// Initialize Firebase Storage
+const storage = getStorage(app);
+
+const db = getFirestore(app);
+
+export { auth, db, storage };
\ No newline at end of file

MyCardio_MedCare/package.json

+{
+  "name": "mycardio_medcare",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.23.1",
+    "@react-native-picker/picker": "^2.7.5",
+    "@react-navigation/bottom-tabs": "^6.5.11",
+    "@react-navigation/stack": "^6.3.20",
+    "axios": "^0.21.1",
+    "expo": "~51.0.7",
+    "expo-av": "~14.0.5",
+    "expo-image-picker": "~15.0.5",
+    "expo-secure-store": "~13.0.1",
+    "expo-speech": "~12.0.2",
+    "expo-status-bar": "~1.12.1",
+    "firebase": "^10.5.2",
+    "react": "18.2.0",
+    "react-native": "^0.74.1",
+    "react-native-gesture-handler": "~2.16.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0"
+  },
+  "private": true
+}