This commit introduces a new "Friends" page to the application.

- A "Friends" tab has been added to the main navigation.
- The new screen displays a list of friends (users from shared groups).
- For each friend, it shows the net balance aggregated across all shared groups.
- Each friend item can be expanded to show a breakdown of balances per group.
- The client-side logic fetches all group data and calculates these balances.

Author: google-labs-jules[bot]

frontend/api/groups.js

@@ -37,17 +37,10 @@ export const createExpense = (token, groupId, expenseData) => {
 };
 
 export const getGroupDetails = (token, groupId) => {
-    // Note: The backend doesn't seem to have a dedicated group details endpoint.
-    // The POC reuses the group object from the list. We will do the same for now,
-    // but in a real app, a dedicated endpoint would be better.
-    // This is a placeholder for if we had one.
-    // For now, we will fetch members and expenses separately.
-    // This function can be used to get the group's basic info if needed.
-    // However, the /groups endpoint already provides this.
-    // We will simulate fetching details by combining other calls.
-    // A single /groups/:id endpoint would be more efficient.
-    // For now, let's assume we don't need this function and will get group name from navigation params.
-    return Promise.resolve(null); // Placeholder
+    return Promise.all([
+        getGroupMembers(token, groupId),
+        getGroupExpenses(token, groupId),
+    ]);
 };
 
 export const getGroupMembers = (token, groupId) => {

frontend/navigation/GroupsStackNavigator.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HomeScreen from '../screens/HomeScreen';
+import GroupDetailsScreen from '../screens/GroupDetailsScreen';
+import AddExpenseScreen from '../screens/AddExpenseScreen';
+import JoinGroupScreen from '../screens/JoinGroupScreen';
+
+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="JoinGroup" component={JoinGroupScreen} options={{ headerShown: false }} />
+    </Stack.Navigator>
+  );
+};
+
+export default GroupsStackNavigator;

frontend/navigation/MainNavigator.js

@@ -1,20 +1,33 @@
 import React from 'react';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import HomeScreen from '../screens/HomeScreen';
-import GroupDetailsScreen from '../screens/GroupDetailsScreen';
-import AddExpenseScreen from '../screens/AddExpenseScreen';
-import JoinGroupScreen from '../screens/JoinGroupScreen';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import GroupsStackNavigator from './GroupsStackNavigator';
+import FriendsScreen from '../screens/FriendsScreen';
 
-const Stack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator();
 
 const MainNavigator = () => {
   return (
-    <Stack.Navigator>
-      <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }}/>
-      <Stack.Screen name="GroupDetails" component={GroupDetailsScreen} />
-      <Stack.Screen name="AddExpense" component={AddExpenseScreen} options={{ title: 'Add Expense' }} />
-      <Stack.Screen name="JoinGroup" component={JoinGroupScreen} options={{ headerShown: false }} />
-    </Stack.Navigator>
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen
+        name="Groups"
+        component={GroupsStackNavigator}
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons name="account-group" color={color} size={size} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Friends"
+        component={FriendsScreen}
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons name="account-multiple" color={color} size={size} />
+          ),
+        }}
+      />
+    </Tab.Navigator>
   );
 };