I've added the Settle Up screen and its functionality.

Author: google-labs-jules[bot]

frontend/api/groups.js

@@ -45,3 +45,6 @@ export const updateMemberRole = (groupId, memberId, role) =>
 
 export const removeMember = (groupId, memberId) =>
   apiClient.delete(`/groups/${groupId}/members/${memberId}`);
+
+export const recordSettlement = (groupId, settlementData) =>
+  apiClient.post(`/groups/${groupId}/settlements`, settlementData);

frontend/navigation/GroupsStackNavigator.js

@@ -4,6 +4,7 @@ import GroupDetailsScreen from '../screens/GroupDetailsScreen';
 import GroupSettingsScreen from '../screens/GroupSettingsScreen';
 import HomeScreen from '../screens/HomeScreen';
 import JoinGroupScreen from '../screens/JoinGroupScreen';
+import SettleUpScreen from '../screens/SettleUpScreen';
 
 const Stack = createNativeStackNavigator();
 
@@ -15,6 +16,7 @@ const GroupsStackNavigator = () => {
       <Stack.Screen name="AddExpense" component={AddExpenseScreen} options={{ headerShown: false }} />
       <Stack.Screen name="JoinGroup" component={JoinGroupScreen} options={{ headerShown: false }} />
       <Stack.Screen name="GroupSettings" component={GroupSettingsScreen} options={{ headerShown: false }} />
+      <Stack.Screen name="SettleUp" component={SettleUpScreen} options={{ headerShown: false }} />
     </Stack.Navigator>
   );
 };

frontend/screens/GroupDetailsScreen.js

@@ -183,6 +183,18 @@ const GroupDetailsScreen = ({ route, navigation }) => {
                 </Text>
               </View>
             ))}
+            <TouchableOpacity
+              style={styles.settleUpButton}
+              onPress={() =>
+                navigation.navigate("SettleUp", {
+                  groupId,
+                  settlement: settlements[0],
+                  members,
+                })
+              }
+            >
+              <Text style={styles.settleUpButtonText}>Settle Up</Text>
+            </TouchableOpacity>
           </View>
         )}
       </TouchableOpacity>
@@ -355,6 +367,18 @@ const styles = StyleSheet.create({
     textAlign: "center",
     marginTop: spacing.lg,
   },
+  settleUpButton: {
+    backgroundColor: colors.primary,
+    padding: spacing.sm,
+    borderRadius: spacing.sm,
+    alignItems: "center",
+    marginTop: spacing.md,
+  },
+  settleUpButtonText: {
+    ...typography.body,
+    color: colors.white,
+    fontWeight: "bold",
+  },
 });
 
 export default GroupDetailsScreen;

frontend/screens/SettleUpScreen.js

@@ -0,0 +1,153 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useContext, useState } from "react";
+import {
+  Alert,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Button, TextInput } from "react-native-paper";
+import RNPickerSelect from "react-native-picker-select";
+import { recordSettlement } from "../api/groups";
+import { AuthContext } from "../context/AuthContext";
+import { colors, spacing, typography } from "../styles/theme";
+
+const SettleUpScreen = ({ route, navigation }) => {
+  const { groupId, settlement, members } = route.params;
+  const { token } = useContext(AuthContext);
+  const [fromUser, setFromUser] = useState(settlement.fromUserId);
+  const [toUser, setToUser] = useState(settlement.toUserId);
+  const [amount, setAmount] = useState(settlement.amount.toString());
+  const [isLoading, setIsLoading] = useState(false);
+
+  const memberOptions = members.map((member) => ({
+    label: member.user.name,
+    value: member.userId,
+  }));
+
+  const handleRecordPayment = async () => {
+    if (!fromUser || !toUser || !amount) {
+      Alert.alert("Error", "Please fill in all fields.");
+      return;
+    }
+
+    const settlementData = {
+      payer_id: fromUser,
+      payee_id: toUser,
+      amount: parseFloat(amount),
+    };
+
+    try {
+      setIsLoading(true);
+      await recordSettlement(groupId, settlementData);
+      Alert.alert("Success", "Payment recorded successfully.");
+      navigation.goBack();
+    } catch (error) {
+      console.error("Failed to record settlement:", error);
+      Alert.alert("Error", "Failed to record settlement.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => navigation.goBack()}>
+          <Ionicons name="arrow-back" size={24} color={colors.text} />
+        </TouchableOpacity>
+        <Text style={styles.title}>Settle Up</Text>
+      </View>
+      <Text style={styles.label}>From</Text>
+      <RNPickerSelect
+        onValueChange={(value) => setFromUser(value)}
+        items={memberOptions}
+        style={pickerSelectStyles}
+        value={fromUser}
+        placeholder={{ label: "Select a member", value: null }}
+      />
+      <Text style={styles.label}>To</Text>
+      <RNPickerSelect
+        onValueChange={(value) => setToUser(value)}
+        items={memberOptions}
+        style={pickerSelectStyles}
+        value={toUser}
+        placeholder={{ label: "Select a member", value: null }}
+      />
+      <TextInput
+        label="Amount"
+        value={amount}
+        onChangeText={setAmount}
+        keyboardType="numeric"
+        style={styles.input}
+      />
+      <Button
+        mode="contained"
+        onPress={handleRecordPayment}
+        loading={isLoading}
+        style={styles.button}
+      >
+        Record Payment
+      </Button>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.secondary,
+    padding: spacing.md,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: spacing.lg,
+  },
+  title: {
+    ...typography.h2,
+    color: colors.text,
+    marginLeft: spacing.md,
+  },
+  label: {
+    ...typography.body,
+    color: colors.textSecondary,
+    marginBottom: spacing.xs,
+  },
+  input: {
+    marginBottom: spacing.md,
+  },
+  button: {
+    marginTop: spacing.md,
+  },
+});
+
+const pickerSelectStyles = StyleSheet.create({
+  inputIOS: {
+    fontSize: 16,
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    borderColor: "gray",
+    borderRadius: 4,
+    color: "black",
+    paddingRight: 30,
+    backgroundColor: colors.white,
+    marginBottom: spacing.md,
+  },
+  inputAndroid: {
+    fontSize: 16,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderWidth: 0.5,
+    borderColor: "purple",
+    borderRadius: 8,
+    color: "black",
+    paddingRight: 30,
+    backgroundColor: colors.white,
+    marginBottom: spacing.md,
+  },
+});
+
+export default SettleUpScreen;

jules-scratch/verification/error.png

@@ -0,0 +1,44 @@
+from playwright.sync_api import sync_playwright, expect
+
+def run(playwright):
+    browser = playwright.chromium.launch(headless=True)
+    context = browser.new_context()
+    page = context.new_page()
+
+    try:
+        # 1. Log in
+        page.goto("http://localhost:8081", timeout=120000)
+
+        # Wait for the app to load
+        login_button = page.get_by_role("button", name="Login")
+        expect(login_button).to_be_visible(timeout=120000)
+
+        # Use more robust locators for React Native Web
+        email_input = page.get_by_placeholder("Email")
+        password_input = page.get_by_placeholder("Password")
+
+        expect(email_input).to_be_visible()
+        email_input.fill("alice@example.com")
+
+        expect(password_input).to_be_visible()
+        password_input.fill("password123")
+
+        login_button.click()
+
+        # 2. Navigate to the "House Share" group
+        house_share_group = page.get_by_text("House Share")
+        expect(house_share_group).to_be_visible(timeout=30000)
+
+        # 3. Take a screenshot
+        page.screenshot(path="jules-scratch/verification/groups_screen.png")
+        print("Screenshot taken successfully.")
+
+    except Exception as e:
+        print(f"An error occurred: {e}")
+        page.screenshot(path="jules-scratch/verification/error.png")
+
+    finally:
+        browser.close()
+
+with sync_playwright() as playwright:
+    run(playwright)