Mobile/feat/analytics

frontend/occupi-mobile4/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +1,2 @@
-#Thu Jul 04 00:58:00 SAST 2024
-gradle.version=8.1.1
+#Thu Sep 26 13:00:57 CAT 2024
+gradle.version=8.9

frontend/occupi-mobile4/app.json

@@ -7,6 +7,9 @@
     "icon": "./assets/images/icon.png",
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",
@@ -46,7 +49,13 @@
       "expo-secure-store",
       "expo-location",
       "expo-notifications",
-      "expo-sensors"
+      "expo-sensors",
+      [
+        "expo-av",
+        {
+          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true

frontend/occupi-mobile4/app/_layout.tsx

@@ -8,9 +8,9 @@
 import { GluestackUIProvider } from "@gluestack-ui/themed";
 import { ThemeProvider } from '@/components/ThemeContext';
 import { NavBarProvider } from '@/components/NavBarProvider';
-import { config } from "@gluestack-ui/config"; // Optional if you want to use default theme
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { config } from "@gluestack-ui/config";
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
@@ -29,43 +29,49 @@
     return null;
   }
 
   const theme = colorScheme === 'dark' ? DarkTheme : DefaultTheme;
 
   return (
-    <GluestackUIProvider config={config} theme={theme}>
-      <ThemeProvider>
-        <NavBarProvider>
-          <Stack>
-            <Stack.Screen name="index" options={{ headerShown: false }} />
-            <Stack.Screen name="login" options={{ headerShown: false }} />
-            <Stack.Screen name="signup" options={{ headerShown: false }} />
-            <Stack.Screen name="forgot-password" options={{ headerShown: false }} />
-            <Stack.Screen name="verify-otp" options={{ headerShown: false }} />
-            <Stack.Screen name="create-password" options={{ headerShown: false }} />
-            <Stack.Screen name="home" options={{ headerShown: false }} />
-            <Stack.Screen name="bookings" options={{ headerShown: false }} />
-            <Stack.Screen name="viewbookings" options={{ headerShown: false }} />
-            <Stack.Screen name="notifications" options={{ headerShown: false }} />
-            <Stack.Screen name="onboarding1" options={{ headerShown: false }} />
-            <Stack.Screen name="onboarding2" options={{ headerShown: false }} />
-            <Stack.Screen name="onboarding3" options={{ headerShown: false }} />
-            <Stack.Screen name="profile" options={{ headerShown: false }} />
-            <Stack.Screen name="welcome" options={{ headerShown: false }} />
-            <Stack.Screen name="settings" options={{ headerShown: false }} />
-            <Stack.Screen name="office-details" options={{ headerShown: false }} />
-            <Stack.Screen name="booking-details" options={{ headerShown: false }} />
-            <Stack.Screen name="viewbookingdetails" options={{ headerShown: false }} />
-            <Stack.Screen name="faqpage" options={{ headerShown: false }} />
-            <Stack.Screen name="set-details" options={{ headerShown: false }} />
-            <Stack.Screen name="set-notifications" options={{ headerShown: false }} />
-            <Stack.Screen name="set-security" options={{ headerShown: false }} />
-            <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>
-    </GluestackUIProvider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <GluestackUIProvider config={config}>
+        <ThemeProvider>
+          <NavBarProvider>
+            <Stack>
+              <Stack.Screen name="index" options={{ headerShown: false }} />
+              <Stack.Screen name="login" options={{ headerShown: false }} />
+              <Stack.Screen name="signup" options={{ headerShown: false }} />
+              <Stack.Screen name="forgot-password" options={{ headerShown: false }} />
+              <Stack.Screen name="verify-otp" options={{ headerShown: false }} />
+              <Stack.Screen name="create-password" options={{ headerShown: false }} />
+              <Stack.Screen name="home" options={{ headerShown: false }} />
+              <Stack.Screen name="bookings" options={{ headerShown: false }} />
+              <Stack.Screen name="viewbookings" options={{ headerShown: false }} />
+              <Stack.Screen name="notifications" options={{ headerShown: false }} />
+              <Stack.Screen name="onboarding1" options={{ headerShown: false }} />
+              <Stack.Screen name="onboarding2" options={{ headerShown: false }} />
+              <Stack.Screen name="onboarding3" options={{ headerShown: false }} />
+              <Stack.Screen name="profile" options={{ headerShown: false }} />
+              <Stack.Screen name="welcome" options={{ headerShown: false }} />
+              <Stack.Screen name="settings" options={{ headerShown: false }} />
+              <Stack.Screen name="office-details" options={{ headerShown: false }} />
+              <Stack.Screen name="booking-details" options={{ headerShown: false }} />
+              <Stack.Screen name="viewbookingdetails" options={{ headerShown: false }} />
+              <Stack.Screen name="faqpage" options={{ headerShown: false }} />
+              <Stack.Screen name="set-details" options={{ headerShown: false }} />
+              <Stack.Screen name="set-notifications" options={{ headerShown: false }} />
+              <Stack.Screen name="set-security" options={{ headerShown: false }} />
+              <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.Screen name="loadingscreen" options={{ headerShown: false }} />
+              <Stack.Screen name="occubot" options={{ headerShown: false }} />
+              <Stack.Screen name="stats" options={{ headerShown: false }} />
+              <Stack.Screen name="recommendations" options={{ headerShown: false }} />
+            </Stack>
+          </NavBarProvider>
+        </ThemeProvider>
+      </GluestackUIProvider>
+    </GestureHandlerRootView>
   );
 }

frontend/occupi-mobile4/app/loadingscreen.tsx

@@ -0,0 +1,7 @@
+import LoadingScreen from "../screens/Dashboard/LoadingScreen";
+
+export default function Home() {
+    return (
+        <LoadingScreen />
+    );
+}

frontend/occupi-mobile4/app/occubot.tsx

@@ -0,0 +1,7 @@
+import OccuBot from "../screens/Dashboard/OccuBot";
+
+export default function Home() {
+    return (
+        <OccuBot />
+    );
+}

frontend/occupi-mobile4/app/recommendations.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Recommendations from "../screens/Dashboard/Recommendations";
+
+export default function Home() {
+    const handleClose = () => {
+        // Add your close logic here
+
+        console.log('Recommendations closed');
+    };
+
+    return (
+        <Recommendations onClose={handleClose} />
+    );
+}

frontend/occupi-mobile4/app/stats.tsx

@@ -0,0 +1,7 @@
+import Stats from "../screens/Dashboard/Stats";
+
+export default function Home() {
+    return (
+        <Stats />
+    );
+}

frontend/occupi-mobile4/components/AnalyticsGraph.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import { widthPercentageToDP as wp } from 'react-native-responsive-screen';
+import {
+  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 AnalyticsGraph = ({data,title,x_axis}) => {
+  const colorscheme = useColorScheme();
+  const { theme } = useTheme();
+  const currentTheme = theme === "system" ? colorscheme : theme;
+    // console.log(data);
+    const labels = currentTheme === 'dark' ? "lightgray" : "#242424";
+    const [accentColour, setAccentColour] = useState<string>('greenyellow');
+    useEffect(() => {
+        const getAccentColour = async () => {
+          let accentcolour = await SecureStore.getItemAsync('accentColour');
+          setAccentColour(accentcolour);
+        };
+        getAccentColour();
+      }, []);
+
+  return (
+    <View  my="$2" w="$full" flexDirection='column' alignItems='center' justifyContent='space-around'>
+        <Text underline color={currentTheme === 'dark' ? "$white" : "$black"}>{title}</Text>
+        <LineChart
+          isAnimated
+          width={wp('85%')}
+          thickness={3}
+          color={accentColour}
+          maxValue={10}
+          noOfSections={10}
+          hideRules
+          animateOnDataChange
+          animationDuration={1000}
+          onDataChangeAnimationDuration={300}
+          areaChart
+          focusEnabled
+          showDataPointOnFocus
+          textColor1={currentTheme === 'dark' ? "white" : "black"}
+          focusedDataPointColor={'white'}
+          showStripOnFocus
+          showTextOnFocus
+          endSpacing={20}
+          yAxisTextStyle={{color: labels}}
+          xAxisLabelTextStyle={{color: labels, fontSize: 8.5}}
+          data={data}
+          // hideDataPoints
+          curved
+          startFillColor={accentColour}
+          endFillColor={accentColour}
+          startOpacity={0.5}
+          endOpacity={0.1}
+          spacing={data.length > 30 ? 30 : data.length*2}
+          // rotateLabel
+          backgroundColor="transparent"
+          // showVerticalLines
+          // verticalLinesColor="rgba(14,164,164,0.5)"
+          // rulesColor="gray"
+          // rulesType="dashed"
+          xAxisColor="transparent"
+          yAxisColor="transparent"
+          initialSpacing={2}
+          // yAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
+          // xAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
+        />
+        <Text color={currentTheme === 'dark' ? "$white" : "$black"}>{x_axis}</Text>
+      </View>
+  )
+}
+
+export default AnalyticsGraph;

frontend/occupi-mobile4/components/BarGraph.tsx

@@ -1,16 +1,17 @@
-import React, { useEffect, useState } from 'react'
-import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
+import React, { useEffect, useState } from 'react';
+import { widthPercentageToDP as wp } 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"
+  View
+} 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';
+import { convertValues, convertValuesHour } from '@/utils/occupancy';
 
 
-const BarGraph = (data) => {
+const BarGraph = ({data,tab}) => {
+  console.log('tab',data)
   const colorscheme = useColorScheme();
   const { theme } = useTheme();
   const currentTheme = theme === "system" ? colorscheme : theme;
@@ -27,14 +28,13 @@ const BarGraph = (data) => {
       }, []);
   return (
     <View
-        style={{ width: wp('100%'), height: hp('35%'), flexDirection: 'column' }}
+        style={{ width: wp('100%'), 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%')}
@@ -48,21 +48,22 @@ const BarGraph = (data) => {
           endSpacing={0}
           yAxisTextStyle={{color: labels}}
           xAxisLabelTextStyle={{color: labels}}
-          data={convertValues(data.data)}
+          data={tab === 3 ? convertValues(data) : convertValuesHour(data)}
           showGradient
+          hideRules
           frontColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
           gradientColor={accentColour}
         //   barBorderTopLeftRadius={5}
         //   barBorderTopRightRadius={5}
-          spacing={20}
-          backgroundColor={currentTheme === 'dark' ? "#414141" : "white"}
+          spacing={12}
+          backgroundColor={currentTheme === 'dark' ? "transparent" : "white"}
           // showVerticalLines
           // verticalLinesColor="rgba(14,164,164,0.5)"
           // rulesColor="gray"
-          rulesType="dashed"
+          // rulesType="dashed"
+          xAxisColor="transparent"
+          yAxisColor="transparent"
           initialSpacing={16}
-          yAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
-          xAxisColor={currentTheme === 'dark' ? "lightgray" : "darkgrey"}
         />
       </View>
   )