Fix/mobile

frontend/occupi-mobile4/app.json

@@ -18,13 +18,16 @@
         "usesNonExemptEncryption": false
       },
       "infoPlist": {
-        "NSFaceIDUsageDescription": "This app uses Face ID or Touch ID to confirm bookings."
+        "NSFaceIDUsageDescription": "This app uses Face ID or Touch ID to confirm bookings.",
+        "NSLocationWhenInUseUsageDescription": "This app uses your location to provide relevant information."
       }
     },
     "android": {
       "permissions": [
         "USE_BIOMETRIC",
-        "USE_FINGERPRINT"
+        "USE_FINGERPRINT",
+        "ACCESS_COARSE_LOCATION",
+        "ACCESS_FINE_LOCATION"
       ],
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
@@ -40,12 +43,10 @@
     },
     "plugins": [
       "expo-router",
-      [
-        "expo-secure-store",
-        {
-          "faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data."
-        }
-      ]
+      "expo-secure-store",
+      "expo-location",
+      "expo-notifications",
+      "expo-sensors"
     ],
     "experiments": {
       "typedRoutes": true

frontend/occupi-mobile4/app/_layout.tsx

@@ -62,6 +62,7 @@ export default function RootLayout() {
             <Stack.Screen name="set-appearance" options={{ headerShown: false }} />
             <Stack.Screen name="notiftester" options={{ headerShown: false }} />
             <Stack.Screen name="changepassword" options={{ headerShown: false }} />
+            <Stack.Screen name="info" options={{ headerShown: false }} />
           </Stack>
         </NavBarProvider>
       </ThemeProvider>

frontend/occupi-mobile4/app/info.tsx

@@ -0,0 +1,5 @@
+import Info from '../screens/Settings/Info';
+
+export default function Home() {
+  return <Info />;
+}

frontend/occupi-mobile4/components/BarGraph.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react'
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
+import {
+    View, Text
+  } from '@gluestack-ui/themed';
+  import * as SecureStore from 'expo-secure-store';
+  import { BarChart } from "react-native-gifted-charts"
+import { useColorScheme } from 'react-native';
+import { useTheme } from './ThemeContext';
+import { convertValues } from '@/utils/occupancy';
+
+
+const BarGraph = (data) => {
+  const colorscheme = useColorScheme();
+  const { theme } = useTheme();
+  const currentTheme = theme === "system" ? colorscheme : theme;
+    // console.log(data.data);
+    const labels = currentTheme === 'dark' ? "lightgray" : "darkgrey";
+    const [accentColour, setAccentColour] = useState<string>('greenyellow');
+    // console.log(convertValues(data.data));
+    useEffect(() => {
+        const getAccentColour = async () => {
+          let accentcolour = await SecureStore.getItemAsync('accentColour');
+          setAccentColour(accentcolour);
+        };
+        getAccentColour();
+      }, []);
+  return (
+    <View
+        style={{ width: wp('100%'), height: hp('35%'), flexDirection: 'column' }}
+        // style={{
+        //   // marginVertical: 100,
+        //   paddingVertical: 20,
+        //   backgroundColor: '#414141',
+        // }}
+        >
+          <Text color={currentTheme === "dark" ? 'white' : 'black'} fontWeight="$medium" underline mb="$4" alignSelf='center'>Predicted Occupancy by Number</Text>
+        <BarChart
+          isAnimated
+          width={wp('80%')}
+          color={accentColour}
+          maxValue={1500}
+          noOfSections={5}
+          // hideRules
+        //   animateOnDataChange={true}
+          animationDuration={500}
+        //   onDataChangeAnimationDuration={100}
+          endSpacing={0}
+          yAxisTextStyle={{color: labels}}
+          xAxisLabelTextStyle={{color: labels}}
+          data={convertValues(data.data)}
+          showGradient
+          frontColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
+          gradientColor={accentColour}
+        //   barBorderTopLeftRadius={5}
+        //   barBorderTopRightRadius={5}
+          spacing={20}
+          backgroundColor={currentTheme === 'dark' ? "#414141" : "white"}
+          // showVerticalLines
+          // verticalLinesColor="rgba(14,164,164,0.5)"
+          // rulesColor="gray"
+          rulesType="dashed"
+          initialSpacing={16}
+          yAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
+          xAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
+        />
+      </View>
+  )
+}
+
+export default BarGraph

frontend/occupi-mobile4/components/LineGraph.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react'
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import {
-    View,
+    View, Text
   } from '@gluestack-ui/themed';
   import * as SecureStore from 'expo-secure-store';
   import { LineChart } from "react-native-gifted-charts"
 import { useColorScheme } from 'react-native';
 import { useTheme } from './ThemeContext';
 
+
 const LineGraph = (data) => {
   const colorscheme = useColorScheme();
   const { theme } = useTheme();
@@ -31,6 +32,7 @@ const LineGraph = (data) => {
         //   backgroundColor: '#414141',
         // }}
         >
+          <Text color={currentTheme === "dark" ? 'white' : 'black'} fontWeight="$medium" underline mb="$4" alignSelf='center'>Predicted Occupancy by level</Text>
         <LineChart
           isAnimated
           width={wp('80%')}
@@ -58,7 +60,7 @@ const LineGraph = (data) => {
           // verticalLinesColor="rgba(14,164,164,0.5)"
           // rulesColor="gray"
           rulesType="dashed"
-          initialSpacing={20}
+          initialSpacing={16}
           yAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
           xAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
         />

frontend/occupi-mobile4/components/SpinningLogo.tsx

@@ -0,0 +1,40 @@
+import { Keyboard, Animated, Easing } from 'react-native';
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
+import React, { useEffect, useRef } from 'react'
+import { HStack, Image } from '@gluestack-ui/themed';
+import Logo from '../screens/Login/assets/images/Occupi/Occupi-gradient.png';
+
+const SpinningLogo = () => {
+
+    const spinValue = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        Animated.loop(
+            Animated.timing(spinValue, {
+                toValue: 2,
+                duration: 10000,
+                easing: Easing.linear,
+                useNativeDriver: true,
+            })
+        ).start();
+    }, [spinValue]);
+
+    const spin = spinValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+
+    return (
+        <HStack space="md" alignItems="center" justifyContent="center">
+        <Animated.View style={{ transform: [{ rotate: spin }] }}>
+          <Image
+            alt="Occupi Logo"
+            source={Logo}
+            style={{ width: wp('40%'), height: wp('40%') }}
+          />
+           </Animated.View>
+        </HStack>
+    )
+}
+
+export default SpinningLogo