feat: Integrate modern screens and components for enhanced user experience in group management

Author: Devasy

frontend/navigation/GroupsStackNavigator.js

@@ -1,20 +1,20 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import AddExpenseScreen from '../screens/AddExpenseScreen';
-import GroupDetailsScreen from '../screens/GroupDetailsScreen';
 import GroupSettingsScreen from '../screens/GroupSettingsScreen';
 import HomeScreen from '../screens/HomeScreen';
 import JoinGroupScreen from '../screens/JoinGroupScreen';
+import ModernAddExpenseScreen from '../screens/ModernAddExpenseScreen';
+import ModernGroupDetailsScreen from '../screens/ModernGroupDetailsScreen';
 
 const Stack = createNativeStackNavigator();
 
 const GroupsStackNavigator = () => {
   return (
     <Stack.Navigator>
       <Stack.Screen name="GroupsList" component={HomeScreen} options={{ headerShown: false }}/>
-      <Stack.Screen name="GroupDetails" component={GroupDetailsScreen} />
-      <Stack.Screen name="AddExpense" component={AddExpenseScreen} options={{ title: 'Add Expense' }} />
+      <Stack.Screen name="GroupDetails" component={ModernGroupDetailsScreen} options={{ headerShown: false }} />
+      <Stack.Screen name="AddExpense" component={ModernAddExpenseScreen} options={{ headerShown: false }} />
       <Stack.Screen name="JoinGroup" component={JoinGroupScreen} options={{ headerShown: false }} />
-  <Stack.Screen name="GroupSettings" component={GroupSettingsScreen} options={{ title: 'Group Settings' }} />
+      <Stack.Screen name="GroupSettings" component={GroupSettingsScreen} options={{ title: 'Group Settings' }} />
     </Stack.Navigator>
   );
 };

frontend/navigation/MainNavigator.js

@@ -1,22 +1,29 @@
-import React from 'react';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import GroupsStackNavigator from './GroupsStackNavigator';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { ModernTabBar } from '../components/navigation/ModernNavigation';
 import FriendsScreen from '../screens/FriendsScreen';
 import AccountStackNavigator from './AccountStackNavigator';
+import GroupsStackNavigator from './GroupsStackNavigator';
 
 const Tab = createBottomTabNavigator();
 
 const MainNavigator = () => {
   return (
-    <Tab.Navigator screenOptions={{ headerShown: false }}>
+    <Tab.Navigator 
+      screenOptions={{ 
+        headerShown: false,
+        tabBarStyle: { display: 'none' } // Hide default tab bar, we'll use ModernTabBar
+      }}
+      tabBar={(props) => <ModernTabBar {...props} />}
+    >
       <Tab.Screen
         name="Groups"
         component={GroupsStackNavigator}
         options={{
           tabBarIcon: ({ color, size }) => (
             <MaterialCommunityIcons name="account-group" color={color} size={size} />
           ),
+          tabBarLabel: 'Groups'
         }}
       />
       <Tab.Screen
@@ -26,6 +33,7 @@ const MainNavigator = () => {
           tabBarIcon: ({ color, size }) => (
             <MaterialCommunityIcons name="account-multiple" color={color} size={size} />
           ),
+          tabBarLabel: 'Friends'
         }}
       />
       <Tab.Screen
@@ -35,6 +43,7 @@ const MainNavigator = () => {
           tabBarIcon: ({ color, size }) => (
             <MaterialCommunityIcons name="account-cog" color={color} size={size} />
           ),
+          tabBarLabel: 'Account'
         }}
       />
     </Tab.Navigator>

frontend/screens/HomeScreen.js

@@ -5,21 +5,21 @@ import * as Haptics from 'expo-haptics';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useContext, useEffect, useRef, useState } from "react";
 import {
-    Alert,
-    Animated,
-    Dimensions,
-    FlatList,
-    RefreshControl,
-    ScrollView,
-    StyleSheet,
-    TouchableOpacity,
-    View,
+  Alert,
+  Animated,
+  Dimensions,
+  FlatList,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
 } from "react-native";
 import {
-    ActivityIndicator,
-    Modal,
-    Portal,
-    Text,
+  ActivityIndicator,
+  Modal,
+  Portal,
+  Text,
 } from "react-native-paper";
 import { createGroup, getGroups, getOptimizedSettlements } from "../api/groups";
 import { AuthContext } from "../context/AuthContext";
@@ -65,8 +65,13 @@ const HomeScreen = ({ navigation }) => {
       }),
     ]).start();
 
-    fetchGroups();
-  }, []);
+    // Only fetch groups if user is authenticated
+    if (user && token) {
+      fetchGroups();
+    } else {
+      setIsLoading(false); // Stop loading if not authenticated
+    }
+  }, [user, token]); // Add dependencies
 
   // Calculate settlement status for a group
   const calculateSettlementStatus = async (groupId, userId) => {
@@ -104,22 +109,38 @@ const HomeScreen = ({ navigation }) => {
 
   const fetchGroups = async () => {
     try {
-      const response = await getGroups(token);
-      const groupsData = response.data;
+      const response = await getGroups(); // Remove token parameter
+      console.log('Groups API Response:', response); // Debug log
+      
+      // Handle different response structures
+      let groupsData = response.data;
+      if (!groupsData) {
+        groupsData = response; // Sometimes the response itself is the data
+      }
+      if (!Array.isArray(groupsData)) {
+        console.warn('Groups data is not an array:', groupsData);
+        groupsData = []; // Fallback to empty array
+      }
+      
       setGroups(groupsData);
 
       // Calculate settlement status for each group
-      const settlementPromises = groupsData.map(async (group) => {
-        const status = await calculateSettlementStatus(group._id, user._id);
-        return { groupId: group._id, status };
-      });
-
-      const settlementsData = await Promise.all(settlementPromises);
-      const settlementsMap = {};
-      settlementsData.forEach(({ groupId, status }) => {
-        settlementsMap[groupId] = status;
-      });
-      setGroupSettlements(settlementsMap);
+      if (groupsData.length > 0) {
+        const settlementPromises = groupsData.map(async (group) => {
+          const status = await calculateSettlementStatus(group._id, user._id);
+          return { groupId: group._id, status };
+        });
+
+        const settlementsData = await Promise.all(settlementPromises);
+        const settlementsMap = {};
+        settlementsData.forEach(({ groupId, status }) => {
+          settlementsMap[groupId] = status;
+        });
+        setGroupSettlements(settlementsMap);
+      } else {
+        // No groups, clear settlements
+        setGroupSettlements({});
+      }
 
       // Animate balance numbers
       Animated.timing(balanceAnim, {
@@ -161,7 +182,7 @@ const HomeScreen = ({ navigation }) => {
 
     setIsCreatingGroup(true);
     try {
-      await createGroup(newGroupName.trim(), token);
+      await createGroup(newGroupName.trim()); // Remove token parameter
       await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
       hideModal();
       fetchGroups();