Chore/mobile/final changes

frontend/occupi-mobile4/components/BarGraph.tsx

@@ -11,7 +11,7 @@ import { convertValues, convertValuesHour } from '@/utils/occupancy';
 
 
 const BarGraph = ({data,tab}) => {
-  console.log('tab',data)
+  console.log('hah',data)
   const colorscheme = useColorScheme();
   const { theme } = useTheme();
   const currentTheme = theme === "system" ? colorscheme : theme;
@@ -56,7 +56,7 @@ const BarGraph = ({data,tab}) => {
           // barBorderTopLeftRadius={5}
           // barBorderTopRightRadius={5}
           spacing={12}
-          backgroundColor={currentTheme === 'dark' ? "transparent" : "white"}
+          backgroundColor={"transparent"}
           // showVerticalLines
           // verticalLinesColor="rgba(14,164,164,0.5)"
           // rulesColor="gray"

frontend/occupi-mobile4/components/NavBar.tsx

@@ -83,8 +83,8 @@ const NavBar = () => {
     <View style={styles.container}>
       <View style={styles.navbar}>
         <View style={styles.leftButtons}>
-          {renderTabButton('Book', 'book', '/bookings')}
-          {renderTabButton('Bookings', 'search', '/viewbookings')}
+          {/* {renderTabButton('Book', 'book', '/bookings')} */}
+          {renderTabButton('Bookings', 'book', '/viewbookings')}
         </View>
         {renderTabButton('Home', 'home', '/home', true)}
         <View style={styles.rightButtons}>

frontend/occupi-mobile4/screens/Booking/BookRoom.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, useColorScheme, TouchableOpacity, Image } from 'react-native';
-import { Ionicons, Octicons } from '@expo/vector-icons';
+import { Ionicons, Octicons, Feather } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
 import {
   useToast,
   Text,
-  View
+  View,
+  Icon
 } from '@gluestack-ui/themed';
 
 import Navbar from '../../components/NavBar';
@@ -118,7 +119,8 @@ const BookRoom = () => {
     <>
       <View style={{ flex: 1, backgroundColor, paddingTop: 60, top: 0 }}>
         <View style={{ flexDirection: 'column', backgroundColor }}>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16 }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', paddingHorizontal: 16 }}>
+            <Icon right="$4" as={Feather} name="chevron-left" size="xl" color={currentTheme === 'dark' ? 'white' : 'black'} onPress={() => router.back()} />
             <Text style={{ fontWeight: 'bold', fontSize: 24, color: textColor }}>Book</Text>
           </View>
           <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16 }}>

frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { ScrollView, useColorScheme, TouchableOpacity, RefreshControl } from 'react-native';
 import { View, Text, Input, InputField, Image } from '@gluestack-ui/themed';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import RNPickerSelect from 'react-native-picker-select';
 import { Octicons } from '@expo/vector-icons';
-import { Ionicons } from '@expo/vector-icons';
+import { Ionicons, Feather } from '@expo/vector-icons';
 import Navbar from '../../components/NavBar';
 import * as SecureStore from 'expo-secure-store';
 import { useRouter } from 'expo-router';
 import { Skeleton } from 'moti/skeleton';
 import { Booking } from '@/models/data';
 import { fetchUserBookings } from '@/utils/bookings';
 import { useTheme } from '@/components/ThemeContext';
 import Tooltip from '@/components/Tooltip';
 import { getHistoricalBookings, getCurrentBookings } from '@/utils/analytics';
@@ -41,8 +41,8 @@
     const currentTheme = theme === "system" ? colorscheme : theme;
     const isDarkMode = currentTheme === "dark";
     const [layout, setLayout] = useState("row");
     const [roomData, setRoomData] = useState<Booking[]>();
     const [selectedSort, setSelectedSort] = useState("newest");
     const router = useRouter();
     const [loading, setLoading] = useState(true);
     const [refreshing, setRefreshing] = useState(false);
@@ -147,25 +147,30 @@
 
 
     const onRefresh = React.useCallback(() => {
-        const getRoomData = async () => {
+        setRefreshing(true);
+        const fetchBookings = async () => {
             try {
-                const roomData = await fetchUserBookings(selectedSort);
-                if (roomData) {
-                    // console.log(roomData);
-                    setRoomData(roomData);
-                } else {
-                    setRoomData([]); // Default value if no username is found
+                const currentData = await getCurrentBookings();
+                const historicalData = await getHistoricalBookings();
+
+                if (currentData && currentData.data) {
+                    setCurrentBookings(currentData.data);
+                }
+                if (historicalData && historicalData.data) {
+                    setPastBookings(historicalData.data);
                 }
             } catch (error) {
                 console.error('Error fetching bookings:', error);
+            } finally {
+                setRefreshing(false);
             }
-            setLoading(false);
         };
-        setRefreshing(true);
+
+        // fetchBookings();
         setTimeout(() => {
             setRefreshing(false);
-            getRoomData();
-        }, 2000);
+            fetchBookings();
+        }, 1500);
     }, []);
 
     const toggleLayout = () => {
@@ -354,7 +359,7 @@
                                     { label: 'Recent', value: 'Recent' },
                                     { label: 'Oldest', value: 'Oldest' },
                                 ]}
-                                placeholder={{ label: 'Recent', value: 'Recent' }}
+                                placeholder={{ label: 'Sort By:', value: 'Recent' }}
                                 // backgroundColor={cardBackgroundColor}
                                 style={{
                                     inputIOS: {
@@ -395,6 +400,13 @@
                 </View>
             </View>
 
+            <TouchableOpacity 
+                style={{ width: wp('80%'), backgroundColor: accentColour, alignItems: 'center', alignSelf: 'center', height: hp('6%'), justifyContent: 'center', borderRadius: 10 }}
+                onPress={() => router.push('/bookings')}
+            >
+                <View flexDirection='row' alignItems='center'><Text fontSize={25} fontWeight={'$medium'} color={textColor}>Create Booking  </Text><Feather name="plus" size={24} color={textColor} /></View>
+            </TouchableOpacity>
+
             {loading === true ? (
                 <>
                     <View mt='$4'>

frontend/occupi-mobile4/screens/Dashboard/Dashboard.tsx

@@ -59,7 +59,7 @@ const Dashboard: React.FC = () => {
   const toast = useToast();
   const [currentData, setCurrentData] = useState();
   const pagerRef = useRef<PagerView>(null);
-  const [activeTab, setActiveTab] = useState(1);
+  const [activeTab, setActiveTab] = useState(2);
   const [weeklyData, setWeeklyData] = useState();
   const [hourlyData, setHourlyData] = useState();
   const counter = useCentrifugeCounter();
@@ -193,7 +193,7 @@ const Dashboard: React.FC = () => {
       try {
         const prediction = await getFormattedPredictionData();
         if (prediction) {
-          // console.log(prediction);
+          console.log('hhahah',prediction);
           setCurrentData(prediction);
           setWeeklyData(prediction);
         }
@@ -224,7 +224,7 @@ const Dashboard: React.FC = () => {
   }, []);
 
   const getPredictionsFromWeek = async (date: string) => {
-    console.log(activeTab);
+    // console.log(activeTab);
     try {
       if (activeTab === 2) {
         const prediction = await getFormattedPredictionWeekData(date);
@@ -404,7 +404,7 @@ const Dashboard: React.FC = () => {
 
   const handleConfirm = (date: Date) => {
     const selectedDate: string = date.toString();
-    console.log('selected', extractDateFromTimestamp(selectedDate));
+    // console.log('selected', extractDateFromTimestamp(selectedDate));
     setDate(extractDateFromTimestamp(selectedDate));
     getPredictionsFromWeek(extractDateFromTimestamp(selectedDate));
     hideDatePicker();
@@ -548,7 +548,7 @@ const Dashboard: React.FC = () => {
               justifyContent: 'center',
               alignItems: 'center'
             }}
-            onPress={() => router.push('/loadingscreen')}
+            onPress={() => router.push('/stats')}
           >
             <View flexDirection="row" alignItems="center" justifyContent='space-between'>
               <View flexDirection='row' alignItems='center'>
@@ -571,7 +571,7 @@ const Dashboard: React.FC = () => {
               borderRadius: 8,
               marginTop: 18,
               height: 60,
-              backgroundColor: recommendationColor,
+              backgroundColor: cardBackgroundColor,
               justifyContent: 'center',
               alignItems: 'center'
             }}

frontend/occupi-mobile4/screens/Dashboard/Recommendations.tsx

@@ -291,7 +291,7 @@ const Recommendations = ({ onClose }) => {
                 </Text>
               </Box>
             ))}
-            <TouchableOpacity
+            {/* <TouchableOpacity
               onPress={speakRecommendation}
               style={{
                 flexDirection: "row",
@@ -313,7 +313,7 @@ const Recommendations = ({ onClose }) => {
               >
                 {isSpeaking ? "Stop" : "Listen to Recommendations"}
               </Text>
-            </TouchableOpacity>
+            </TouchableOpacity> */}
           </Box>
         </VStack>
       </ScrollView>

frontend/occupi-mobile4/screens/Notifications/Notifications.tsx

@@ -158,8 +158,9 @@ const Notifications = () => {
     fetchNotifications();
   }
 
-  const renderNotificationItem = ({ item }) => (
+  const renderNotificationItem = ({ item, index }) => (
     <NotificationItem
+      key={index}
       notification={item}
       accentColour={accentColour}
       isDarkMode={isDarkMode}
@@ -202,9 +203,9 @@ const Notifications = () => {
             </Input>
             <View flexDirection="row" justifyContent="space-between" alignItems="center" mb="$4">
               <HStack space="sm">
-                {['All', 'Invitations', 'Updates'].map((tab) => (
+                {['All', 'Invitations', 'Updates'].map((tab, index) => (
                   <Button
-                    key={tab}
+                    key={index}
                     onPress={() => setActiveTab(tab.toLowerCase())}
                     variant={activeTab === tab.toLowerCase() ? "solid" : "outline"}
                     backgroundColor={activeTab === tab.toLowerCase() ? accentColour : 'transparent'}
@@ -240,15 +241,16 @@ const Notifications = () => {
           ) : (
             <FlatList
               data={filteredNotifications}
-              renderItem={({ item }) => (
+              renderItem={({ item, index }) => (
                 <NotificationItem
+                  key = { item}
                   notification={item}
                   accentColour={accentColour}
                   isDarkMode={isDarkMode}
                   onSwipeLeft={handleSwipeLeft}
                 />
               )}
-              keyExtractor={(item) => item.id}
+              // keyExtractor={(item) => item.id}
               contentContainerStyle={{ paddingBottom: 84 }}
               refreshControl={
                 <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={accentColour} />

frontend/occupi-mobile4/screens/Office/BookingDetails.tsx

@@ -549,10 +549,28 @@ const BookingDetails = () => {
 
           </View>
           {/* </Text> */}
-          <TouchableOpacity style={{ paddingHorizontal: 0, marginBottom: 50, width: wp('80%') }} onPress={() => router.push('/home')}>
-            <View flexDirection="row" mt="$8" borderRadius="$lg" alignItems="center" justifyContent="center" backgroundColor={isDark ? '#2C2C2E' : '#F3F3F3'} h="$11">
-              <Text fontWeight="$bold" color="black">Home</Text>
-            </View>
+          <TouchableOpacity style={{ paddingHorizontal: 0, marginVertical: 50, width: wp('80%') }} onPress={() => router.push('/home')}>
+          <LinearGradient
+                colors={["#614DC8", "#86EBCC", "#B2FC3A", "#EEF060"]}
+                locations={[0.02, 0.31, 0.67, 0.97]}
+                start={[0, 1]}
+                end={[1, 0]}
+                style={{
+                  padding: 15,
+                  alignItems: "center",
+                  borderRadius: 15,
+                }}
+              >
+                <Text
+                  style={{
+                    color: isDark ? "#000" : "#fff",
+                    fontSize: 16,
+                    fontWeight: "bold",
+                  }}
+                >
+                  Home
+                </Text>
+              </LinearGradient>
           </TouchableOpacity>
         </View>
       )}

frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx

@@ -160,7 +160,7 @@ const OfficeDetails = () => {
   return (
     <>
       {/* Top Section */}
-      <View pt="$12" px="$8" pb="$4" backgroundColor={isDarkMode ? 'black' : 'white'} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+      <View pt="$12" px="$8" pb="$4" backgroundColor={isDarkMode ? 'black' : 'white'} style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
         <Icon right="$4" as={Feather} name="chevron-left" size="xl" color={currentTheme === 'dark' ? 'white' : 'black'} onPress={() => navigation.goBack()} />
         <Text right="$2" fontWeight="$bold" fontSize={22} style={{ color: isDarkMode ? '#fff' : '#000' }}>{room?.roomName}</Text>
         {/* <View alignItems="center" flexDirection="row" w="$24" justifyContent="space-between">