This commit introduces several improvements to the expense creation and group details screens based on your feedback.

- **Equal Split Member Selection:** You can now select which members to include when splitting an expense equally.
- **Optimized Settlements Summary:** The group details page now displays a summary of optimized settlements for you, showing who you need to pay and how much.
- **Transaction-level Balance Display:** Each expense in the group details now shows your financial relationship to it (e.g., "You borrowed $30").

Author: google-labs-jules[bot]

frontend/api/groups.js

@@ -20,6 +20,14 @@ export const getGroups = (token) => {
   });
 };
 
+export const getOptimizedSettlements = (token, groupId) => {
+  return apiClient.post(`/groups/${groupId}/settlements/optimize`, {}, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+};
+
 export const createExpense = (token, groupId, expenseData) => {
   return apiClient.post(`/groups/${groupId}/expenses`, expenseData, {
     headers: {

frontend/screens/AddExpenseScreen.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { View, StyleSheet, Alert, ScrollView } from 'react-native';
-import { Button, TextInput, ActivityIndicator, Appbar, Title, SegmentedButtons, Text, Paragraph } from 'react-native-paper';
+import { Button, TextInput, ActivityIndicator, Appbar, Title, SegmentedButtons, Text, Paragraph, Checkbox } from 'react-native-paper';
 import { AuthContext } from '../context/AuthContext';
 import { getGroupMembers, createExpense } from '../api/groups';
 
@@ -18,6 +18,7 @@ const AddExpenseScreen = ({ route, navigation }) => {
   const [percentages, setPercentages] = useState({});
   const [shares, setShares] = useState({});
   const [exactAmounts, setExactAmounts] = useState({});
+  const [selectedMembers, setSelectedMembers] = useState({}); // For equal split
 
   useEffect(() => {
     const fetchMembers = async () => {
@@ -28,15 +29,18 @@ const AddExpenseScreen = ({ route, navigation }) => {
         const initialShares = {};
         const initialPercentages = {};
         const initialExactAmounts = {};
+        const initialSelectedMembers = {};
         const numMembers = response.data.length;
         response.data.forEach(member => {
           initialShares[member.userId] = '1';
           initialPercentages[member.userId] = numMembers > 0 ? (100 / numMembers).toFixed(2) : '0';
           initialExactAmounts[member.userId] = '0.00';
+          initialSelectedMembers[member.userId] = true; // Select all by default
         });
         setShares(initialShares);
         setPercentages(initialPercentages);
         setExactAmounts(initialExactAmounts);
+        setSelectedMembers(initialSelectedMembers);
       } catch (error) {
         console.error('Failed to fetch members:', error);
         Alert.alert('Error', 'Failed to fetch group members.');
@@ -68,8 +72,12 @@ const AddExpenseScreen = ({ route, navigation }) => {
         let splitType = splitMethod;
 
         if (splitMethod === 'equal') {
-            const splitAmount = numericAmount / members.length;
-            splits = members.map(member => ({ userId: member.userId, amount: splitAmount }));
+            const includedMembers = Object.keys(selectedMembers).filter(userId => selectedMembers[userId]);
+            if (includedMembers.length === 0) {
+                throw new Error('You must select at least one member for the split.');
+            }
+            const splitAmount = numericAmount / includedMembers.length;
+            splits = includedMembers.map(userId => ({ userId, amount: splitAmount }));
         } else if (splitMethod === 'exact') {
             const total = Object.values(exactAmounts).reduce((sum, val) => sum + parseFloat(val || '0'), 0);
             if (Math.abs(total - numericAmount) > 0.01) {
@@ -114,12 +122,25 @@ const AddExpenseScreen = ({ route, navigation }) => {
     }
   };
 
+  const handleMemberSelect = (userId) => {
+    setSelectedMembers(prev => ({...prev, [userId]: !prev[userId]}));
+  };
+
   const renderSplitInputs = () => {
     const handleSplitChange = (setter, userId, value) => {
         setter(prev => ({ ...prev, [userId]: value }));
     };
 
     switch (splitMethod) {
+      case 'equal':
+        return members.map(member => (
+            <Checkbox.Item
+                key={member.userId}
+                label={member.user.name}
+                status={selectedMembers[member.userId] ? 'checked' : 'unchecked'}
+                onPress={() => handleMemberSelect(member.userId)}
+            />
+        ));
       case 'exact':
         return members.map(member => (
           <TextInput
@@ -153,9 +174,8 @@ const AddExpenseScreen = ({ route, navigation }) => {
             style={styles.splitInput}
           />
         ));
-      case 'equal':
       default:
-        return <Paragraph>The expense will be split equally among all {members.length} members.</Paragraph>;
+        return null;
     }
   };
 

frontend/screens/GroupDetailsScreen.js

@@ -1,26 +1,29 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { View, StyleSheet, FlatList, Alert } from 'react-native';
+import { View, StyleSheet, FlatList, Alert, ScrollView } from 'react-native';
 import { Button, Text, Card, ActivityIndicator, Appbar, FAB, Title, Paragraph } from 'react-native-paper';
 import { AuthContext } from '../context/AuthContext';
-import { getGroupMembers, getGroupExpenses } from '../api/groups';
+import { getGroupMembers, getGroupExpenses, getOptimizedSettlements } from '../api/groups';
 
 const GroupDetailsScreen = ({ route, navigation }) => {
   const { groupId, groupName } = route.params;
-  const { token } = useContext(AuthContext);
+  const { token, user } = useContext(AuthContext);
   const [members, setMembers] = useState([]);
   const [expenses, setExpenses] = useState([]);
+  const [settlements, setSettlements] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
 
   const fetchData = async () => {
     try {
       setIsLoading(true);
-      // Fetch members and expenses in parallel
-      const [membersResponse, expensesResponse] = await Promise.all([
+      // Fetch members, expenses, and settlements in parallel
+      const [membersResponse, expensesResponse, settlementsResponse] = await Promise.all([
         getGroupMembers(token, groupId),
         getGroupExpenses(token, groupId),
+        getOptimizedSettlements(token, groupId),
       ]);
       setMembers(membersResponse.data);
       setExpenses(expensesResponse.data.expenses);
+      setSettlements(settlementsResponse.data.optimizedSettlements || []);
     } catch (error) {
       console.error('Failed to fetch group details:', error);
       Alert.alert('Error', 'Failed to fetch group details.');
@@ -36,22 +39,66 @@ const GroupDetailsScreen = ({ route, navigation }) => {
     }
   }, [token, groupId]);
 
-  const renderExpense = ({ item }) => (
-    <Card style={styles.card}>
-      <Card.Content>
-        <Title>{item.description}</Title>
-        <Paragraph>Amount: ${item.amount.toFixed(2)}</Paragraph>
-        {/* The API doesn't provide the payer's name directly in the expense object */}
-        {/* We would need to match the createdBy id with the members list */}
-        {/* <Paragraph>Paid by: {getMemberName(item.createdBy)}</Paragraph> */}
-      </Card.Content>
-    </Card>
-  );
+  const getMemberName = (userId) => {
+    const member = members.find(m => m.userId === userId);
+    return member ? member.user.name : 'Unknown';
+  };
+
+  const renderExpense = ({ item }) => {
+    const userSplit = item.splits.find(s => s.userId === user._id);
+    const userShare = userSplit ? userSplit.amount : 0;
+    const paidByMe = item.createdBy === user._id;
+    const net = paidByMe ? item.amount - userShare : -userShare;
+
+    let balanceText;
+    let balanceColor = 'black';
+
+    if (net > 0) {
+      balanceText = `You are owed $${net.toFixed(2)}`;
+      balanceColor = 'green';
+    } else if (net < 0) {
+      balanceText = `You borrowed $${Math.abs(net).toFixed(2)}`;
+      balanceColor = 'red';
+    } else {
+      balanceText = "You are settled for this expense.";
+    }
+
+    return (
+        <Card style={styles.card}>
+        <Card.Content>
+            <Title>{item.description}</Title>
+            <Paragraph>Amount: ${item.amount.toFixed(2)}</Paragraph>
+            <Paragraph>Paid by: {getMemberName(item.createdBy)}</Paragraph>
+            <Paragraph style={{ color: balanceColor }}>{balanceText}</Paragraph>
+        </Card.Content>
+        </Card>
+    );
+  };
 
   const renderMember = ({ item }) => (
       <Paragraph style={styles.memberText}>• {item.user.name}</Paragraph>
   );
 
+  const renderSettlementSummary = () => {
+    const userSettlements = settlements.filter(s => s.fromUserId === user._id);
+    const totalOwed = userSettlements.reduce((sum, s) => sum + s.amount, 0);
+
+    if (userSettlements.length === 0) {
+      return <Paragraph>You are all settled up in this group!</Paragraph>;
+    }
+
+    return (
+      <>
+        <Title>You owe ${totalOwed.toFixed(2)} overall</Title>
+        {userSettlements.map((s, index) => (
+          <Paragraph key={index}>
+            - You owe {getMemberName(s.toUserId)} ${s.amount.toFixed(2)}
+          </Paragraph>
+        ))}
+      </>
+    );
+  };
+
   if (isLoading) {
     return (
       <View style={styles.loaderContainer}>
@@ -67,7 +114,14 @@ const GroupDetailsScreen = ({ route, navigation }) => {
             <Appbar.Content title={groupName} />
         </Appbar.Header>
 
-        <View style={styles.contentContainer}>
+        <ScrollView style={styles.contentContainer}>
+            <Card style={styles.card}>
+                <Card.Content>
+                    <Title>Settlement Summary</Title>
+                    {renderSettlementSummary()}
+                </Card.Content>
+            </Card>
+
             <Card style={styles.card}>
                 <Card.Content>
                     <Title>Members</Title>
@@ -87,7 +141,7 @@ const GroupDetailsScreen = ({ route, navigation }) => {
                 ListEmptyComponent={<Text>No expenses recorded yet.</Text>}
                 contentContainerStyle={{ paddingBottom: 80 }} // To avoid FAB overlap
             />
-        </View>
+        </ScrollView>
 
         <FAB
             style={styles.fab}