homePage update

src/screens/management/EditGroupScreen.tsx

@@ -338,6 +338,7 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
         {renderCard('Financial Rules', [
             { field: 'contributionAmount', label: 'Contribution', displayValue: () => `₹${groupDetails.contributionAmount.toLocaleString('en-IN')}` },
             { field: 'maxParticipants', label: 'Max Participants', displayValue: () => `${groupDetails.totalParticipants} / ${groupDetails.maxParticipants}` },
+            { field: 'minParticipants', label: 'Min Participants', displayValue: () => `${groupDetails.minParticipants}` },
             { field: 'latePaymentCharge', label: 'Late Fee', displayValue: () => `₹${(groupDetails.latePaymentCharge ?? 0).toLocaleString('en-IN')}` },
         ], 'financialRules')}
 
@@ -403,7 +404,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 16,
     paddingBottom: 8,
-    backgroundColor: 'white', // Changed for a cleaner header look
     borderBottomWidth: 1,
     borderBottomColor: '#E5E7EB',
   },
@@ -436,7 +436,7 @@ const styles = StyleSheet.create({
   saveButton: { backgroundColor: colors.pastelOrange },
   cancelButton: { backgroundColor: '#E5E7EB' },
   inviteButton: { backgroundColor: colors.primary },
-  buttonText: { color: '#000000ff', fontSize: 15, fontWeight: '600' },
+  buttonText: { color: '#ffffffff', fontSize: 15, fontWeight: '600' },
 
   // --- FLOATING BUTTON STYLES ---
   floatingButtonContainer: {

src/screens/management/ManagementScreen.tsx

@@ -1,6 +1,6 @@
 // src/screens/ManagementScreen.tsx
 
-import React, { useState, useCallback, FC } from "react";
+import React, { useState, useCallback, FC, useEffect } from "react";
 import {
   View,
   Text,
@@ -9,69 +9,74 @@ import {
   TouchableOpacity,
   ActivityIndicator,
   Alert,
-  ListRenderItemInfo,
 } from "react-native";
-import { useNavigation, useFocusEffect } from "@react-navigation/native";
+import { useNavigation, useFocusEffect, useRoute, RouteProp } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
-import { RootStackParamList } from "../../navigation/AppNavigator";
-import { APPROVE_REQUEST_URL, BASE_URL, DECLINE_REQUEST_URL, GET_JOINED_GROUP_URL, JOIN_GROUP_URL, MY_GROUPS_URL, REQUESTS_URL, USER_REQUEST } from "../../utils/ApiUrls";
+import { APPROVE_REQUEST_URL, DECLINE_REQUEST_URL, GET_JOINED_GROUP_URL, MY_GROUPS_URL, REQUESTS_URL, USER_REQUEST } from "../../utils/ApiUrls";
 import colors from "../../components/colors";
 import AppView from "../../components/AppView";
 import { apiCall } from "../../utils/ApiHelper";
-import * as Keychain from "react-native-keychain";
-import { MyGroup, JoinedGroup, JoinRequest, ApiResponse, UserJoinRequest } from '../../types';
+import { MyGroup, JoinedGroup, JoinRequest, ApiResponse, UserJoinRequest } from '../../types'; // Adjust import path
 import { MyGroupCard } from "../../components/MyGroupCard";
 import { JoinedGroupCard } from "../../components/JoinedGroupCard";
 import { RequestCard } from "../../components/RequestCard";
 import { useSelector } from "react-redux";
-import Ionicons from "@react-native-vector-icons/ionicons";
 import { UserRequested } from "../../components/UserRequested";
+import { RootTabParamList } from "../../navigation/BottomTabs"; // Adjust import path
 
-type GroupManagementNavProp = StackNavigationProp<RootStackParamList>;
+// --- TYPE DEFINITIONS ---
+type GroupManagementNavProp = StackNavigationProp<RootTabParamList, 'Management'>;
+type ManagementRouteProp = RouteProp<RootTabParamList, 'Management'>;
 type ActiveTab = "My Groups" | "Joined Groups" | "Requests" | "Your Requests";
 
 const ManagementScreen: FC = () => {
-  const userRole = useSelector((state: any) => state.user)
-  const [activeTab, setActiveTab] = useState<ActiveTab>(userRole.role === "USER" ? "Joined Groups" : "My Groups");
+  const user = useSelector((state: any) => state.user);
   const navigation = useNavigation<GroupManagementNavProp>();
+  const route = useRoute<ManagementRouteProp>();
+
+  const [activeTab, setActiveTab] = useState<ActiveTab>(user.role === "USER" ? "Joined Groups" : "My Groups");
   const [myGroups, setMyGroups] = useState<MyGroup[]>([]);
   const [joinedGroups, setJoinedGroups] = useState<JoinedGroup[]>([]);
   const [requests, setRequests] = useState<JoinRequest[]>([]);
+  const [userRequest, setUserRequest] = useState<UserJoinRequest[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
-  const [userRequest, setUserRequest] = useState<UserJoinRequest[]>([])
+
+  // --- HOOKS ---
+
+  // Effect to set the initial tab from route params
+  useEffect(() => {
+    const passedTab = route.params?.actionTab;
+    if (passedTab) {
+      const availableTabs = user.role === 'ORGANIZER' ? ["My Groups", "Joined Groups", "Requests"] : ["Joined Groups", "Your Requests"];
+      if (availableTabs.includes(passedTab)) {
+        setActiveTab(passedTab);
+      }
+    }
+  }, [route.params?.actionTab, user.role]);
+
+  // --- FIXED: fetchData dependency array is corrected ---
   const fetchData = useCallback(async () => {
+    // Check for loading state at the start to prevent multiple simultaneous fetches
     if (loading) return;
 
     setLoading(true);
     setError(null);
-
     try {
-      if (userRole.role === "ORGANIZER") {
-        // Fetch all data concurrently for organizers
+      if (user.role === "ORGANIZER") {
         const [myGroupsRes, joinedGroupsRes, requestsRes] = await Promise.all([
           apiCall(MY_GROUPS_URL, "GET") as Promise<ApiResponse<MyGroup[]>>,
           apiCall(GET_JOINED_GROUP_URL, "GET") as Promise<ApiResponse<JoinedGroup[]>>,
           apiCall(REQUESTS_URL, "GET") as Promise<ApiResponse<JoinRequest[]>>,
         ]);
-
-        console.log("My Groups:", myGroupsRes.data);
-        console.log("Joined Groups:", joinedGroupsRes.data);
-        console.log("Requests:", requestsRes.data);
-
         setMyGroups(myGroupsRes.data || []);
         setJoinedGroups(joinedGroupsRes.data || []);
         setRequests(requestsRes.data || []);
       } else {
-        // Fetch only joined groups and user requests for non-organizers
         const [joinedGroupsRes, userRequestRes] = await Promise.all([
           apiCall(GET_JOINED_GROUP_URL, "GET") as Promise<ApiResponse<JoinedGroup[]>>,
           apiCall(USER_REQUEST, "GET") as Promise<ApiResponse<UserJoinRequest[]>>,
         ]);
-
-        console.log("Joined Groups:", joinedGroupsRes.data);
-        console.log("User Requests:", userRequestRes.data);
-
         setJoinedGroups(joinedGroupsRes.data || []);
         setUserRequest(userRequestRes.data || []);
       }
@@ -81,113 +86,64 @@ const ManagementScreen: FC = () => {
     } finally {
       setLoading(false);
     }
-  }, [userRole, loading]);
+  // The only external dependency that should trigger a re-fetch is the user's role.
+  }, [user.role]); // **FIXED**: Removed `loading` from the dependency array
 
-  useFocusEffect(useCallback(() => { fetchData(); }, []));
+  // --- FIXED: useFocusEffect now has a stable dependency ---
+  useFocusEffect(
+    useCallback(() => {
+      fetchData();
+    }, [fetchData]) // This will now only re-run if fetchData (and thus user.role) changes.
+  );
+
+  // --- HANDLERS (No changes needed here) ---
   const handleViewGroup = (item: JoinedGroup) => {
-    console.log("PPP",item)
-    navigation.navigate('Invite', { groupId: item.id } as any);
-  }
-
-  const handleAction = async (url: string, body: object, successMessage: string, failureMessage: string, action: string) => {
-    // ... (logic remains the same)
-    console.log(url)
+    // Assuming you have an 'Invite' screen in your RootTabParamList or another navigator
+    // navigation.navigate('Invite' as any, { groupId: item.id });
+  };
+  
+  const handleAction = async (url: string, successMessage: string, failureMessage: string) => {
     try {
-      setLoading(true); // Optionally show a loading state during the action
-      // Make the POST request with an empty body
+      // No need to set loading here if the whole screen is already loading
       const res = await apiCall(url, "PUT", {}) as ApiResponse<null> | null;
-
       if (res && res.statusCode === 200) {
-        // Use the success message from the API response
-        Alert.alert("Success", res.message || `Request ${action}d successfully.`);
-        fetchData(); // Refresh the list of requests
+        Alert.alert("Success", res.message || successMessage);
+        fetchData(); // Refresh data after action
       } else {
         throw new Error(res?.message || failureMessage);
       }
     } catch (err: any) {
       Alert.alert("Error", err.message || "An unexpected error occurred.");
-    } finally {
-      setLoading(false);
     }
   };
 
-  const handleApprove = (req: JoinRequest) => handleAction(APPROVE_REQUEST_URL + req.requestId + "/approve", { requestId: req.requestId }, `${req.userName} has been added.`, "Failed to approve request.", "Approve");
-  const handleDecline = (req: JoinRequest) => handleAction(DECLINE_REQUEST_URL + req.requestId + "/reject?reason=/" + " ", { requestId: req.requestId }, `Request from ${req.userName} has been declined.`, "Failed to decline request.", "Decline");
+  const handleApprove = (req: JoinRequest) => handleAction(APPROVE_REQUEST_URL + req.requestId + "/approve", `${req.userName} has been added.`, "Failed to approve request.");
+  const handleDecline = (req: JoinRequest) => handleAction(DECLINE_REQUEST_URL + req.requestId + "/reject?reason=/", `Request from ${req.userName} has been declined.`, "Failed to decline request.");
   const handleManageGroup = (group: MyGroup) => navigation.navigate('ManagementTabs', { groupId: group.id });
 
+  // --- RENDER LOGIC ---
   const renderContent = () => {
-    if (error) {
-      return <Text style={styles.emptyText}>{error}</Text>;
+    if (error) return <Text style={styles.emptyText}>{error}</Text>;
+    // Improved loading logic to avoid hiding existing data during a refresh
+    if (loading && myGroups.length === 0 && joinedGroups.length === 0 && requests.length === 0) {
+      return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
     }
 
     switch (activeTab) {
       case "My Groups":
-        if (loading) {
-          return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
-        }
-        return (
-          <FlatList
-            data={myGroups}
-            renderItem={({ item }: ListRenderItemInfo<MyGroup>) => <MyGroupCard item={item} onManage={handleManageGroup} />}
-            keyExtractor={(item) => item.id}
-            ListEmptyComponent={<Text style={styles.emptyText}>You haven't created any groups yet.</Text>}
-            onRefresh={fetchData}
-            refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
-            contentContainerStyle={{ paddingBottom: 100 }}
-          />
-        );
+        return <FlatList data={myGroups} renderItem={({ item }) => <MyGroupCard item={item} onManage={handleManageGroup} />} keyExtractor={(item) => item.id} ListEmptyComponent={<Text style={styles.emptyText}>You haven't created any groups yet.</Text>} onRefresh={fetchData} refreshing={loading} contentContainerStyle={{ paddingBottom: 100 }} />;
       case "Joined Groups":
-        if (loading && joinedGroups.length === 0) {
-          return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
-        }
-        return (
-          <FlatList
-            data={joinedGroups}
-            renderItem={({ item }: ListRenderItemInfo<JoinedGroup>) => <JoinedGroupCard item={item} onViewPress={() => handleViewGroup(item)} />}
-            keyExtractor={(item) => item.id}
-            ListEmptyComponent={<Text style={styles.emptyText}>You haven't joined any groups yet.</Text>}
-            onRefresh={fetchData}
-            refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
-            contentContainerStyle={{ paddingBottom: 100 }}
-          />
-        );
+        return <FlatList data={joinedGroups} renderItem={({ item }) => <JoinedGroupCard item={item} onViewPress={() => handleViewGroup(item)} />} keyExtractor={(item) => item.id} ListEmptyComponent={<Text style={styles.emptyText}>You haven't joined any groups yet.</Text>} onRefresh={fetchData} refreshing={loading} contentContainerStyle={{ paddingBottom: 100 }} />;
       case "Requests":
-        if (loading && requests.length === 0) {
-          return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
-        }
-        return (
-          <FlatList
-            data={requests}
-            renderItem={({ item }: ListRenderItemInfo<JoinRequest>) => <RequestCard item={item} onApprove={handleApprove} onDecline={handleDecline} />}
-            keyExtractor={(item) => item.requestId}
-            ListEmptyComponent={<Text style={styles.emptyText}>No pending join requests.</Text>}
-            onRefresh={fetchData}
-            refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
-            contentContainerStyle={{ paddingBottom: 100 }}
-          />
-        );
+        return <FlatList data={requests} renderItem={({ item }) => <RequestCard item={item} onApprove={handleApprove} onDecline={handleDecline} />} keyExtractor={(item) => item.requestId} ListEmptyComponent={<Text style={styles.emptyText}>No pending join requests.</Text>} onRefresh={fetchData} refreshing={loading} contentContainerStyle={{ paddingBottom: 100 }} />;
       case "Your Requests":
-        if (loading && requests.length === 0) {
-          return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
-        }
-        return (
-          <FlatList
-            data={userRequest}
-            renderItem={({ item }: ListRenderItemInfo<UserJoinRequest>) => <UserRequested item={item} />}
-            keyExtractor={(item) => item.requestId}
-            ListEmptyComponent={<Text style={styles.emptyText}>No pending join requests.</Text>}
-            onRefresh={fetchData}
-            refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
-            contentContainerStyle={{ paddingBottom: 100 }}
-          />
-        );
+        return <FlatList data={userRequest} renderItem={({ item }) => <UserRequested item={item} />} keyExtractor={(item) => item.requestId} ListEmptyComponent={<Text style={styles.emptyText}>You haven't sent any join requests.</Text>} onRefresh={fetchData} refreshing={loading} contentContainerStyle={{ paddingBottom: 100 }} />;
       default: return null;
     }
   };
 
-  const tabs: ActiveTab[] = userRole.role === 'ORGANIZER' ? ["My Groups", "Joined Groups", "Requests"] : ["Joined Groups", "Your Requests"];
+  const tabs: ActiveTab[] = user.role === 'ORGANIZER' ? ["My Groups", "Joined Groups", "Requests"] : ["Joined Groups", "Your Requests"];
 
-  console.log("user request : ", userRequest)
   return (
     <AppView style={styles.container} paddingHorizontal={0}>
       <View style={styles.header}>
@@ -201,32 +157,6 @@ const ManagementScreen: FC = () => {
         ))}
       </View>
       <View style={styles.contentArea}>
-        {
-          activeTab === "Requests" && userRole === "ORGANIZER" ? (
-            <TouchableOpacity
-              style={{
-                position: "absolute",
-                bottom: 85,
-                right: 20,
-                backgroundColor: colors.pastelOrange,
-                width: 60,
-                height: 60,
-                borderRadius: 30,
-                justifyContent: "center",
-                alignItems: "center",
-                shadowColor: "#000",
-                shadowOpacity: 0.2,
-                shadowRadius: 5,
-                shadowOffset: { width: 0, height: 3 },
-                elevation: 5, // for Android shadow
-              }}
-              onPress={() => navigation.navigate("YourContacts" as never)}
-            >
-              <Ionicons name="person-add" size={28} color={colors.textDark} />
-            </TouchableOpacity>
-          ) : null
-        }
-
         {renderContent()}
       </View>
     </AppView>
@@ -234,59 +164,17 @@ const ManagementScreen: FC = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f6fa'
-  },
-  header: {
-    paddingHorizontal: 20,
-    paddingBottom: 15,
-  },
-  title: {
-    fontSize: 22, fontWeight: "600", color: colors.Settings
-  },
-  segmentedControl: {
-    flexDirection: 'row',
-    backgroundColor: '#e9ecef',
-    borderRadius: 10,
-    marginHorizontal: 20,
-    marginBottom: 20,
-    padding: 3,
-  },
-  segmentButton: {
-    flex: 1,
-    paddingVertical: 12,
-    alignItems: 'center',
-    borderRadius: 8,
-  },
-  segmentActive: {
-    backgroundColor: colors.pastelOrange, // Example color
-    elevation: 3,
-    shadowColor: '#000',
-    shadowOpacity: 0.1,
-    shadowRadius: 5,
-  },
-  segmentText: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#6c757d',
-  },
-  segmentTextActive: {
-    color: colors.textDark, // Example color
-  },
-  contentArea: {
-    flex: 1,
-    paddingHorizontal: 20,
-  },
-  loader: {
-    marginTop: 50,
-  },
-  emptyText: {
-    textAlign: 'center',
-    marginTop: 60,
-    fontSize: 16,
-    color: '#6c757d',
-  },
+  container: { flex: 1, backgroundColor: '#f5f6fa' },
+  header: { paddingHorizontal: 20, paddingBottom: 15, paddingTop: 10 },
+  title: { fontSize: 22, fontWeight: "600", color: colors.Settings },
+  segmentedControl: { flexDirection: 'row', backgroundColor: '#e9ecef', borderRadius: 10, marginHorizontal: 20, marginBottom: 20, padding: 3 },
+  segmentButton: { flex: 1, paddingVertical: 12, alignItems: 'center', borderRadius: 8 },
+  segmentActive: { backgroundColor: colors.pastelOrange, elevation: 3, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 5 },
+  segmentText: { fontSize: 14, fontWeight: '600', color: '#6c757d' },
+  segmentTextActive: { color: colors.textDark },
+  contentArea: { flex: 1, paddingHorizontal: 20 },
+  loader: { marginTop: 50 },
+  emptyText: { textAlign: 'center', marginTop: 60, fontSize: 16, color: '#6c757d' },
 });
 
 export default ManagementScreen;

src/screens/management/Member.tsx

@@ -14,6 +14,7 @@ import { Ionicons } from "@react-native-vector-icons/ionicons"; // Assuming you
 import { apiCall } from '../../utils/ApiHelper'; // Adjust path to your apiCall utility
 import AppView from '../../components/AppView';
 import colors from '../../components/colors';
+import { useRoute } from '@react-navigation/native';
 
 // --- Type Definitions ---
 interface Member {
@@ -38,8 +39,8 @@ interface ApiResponse {
 
 // --- Main Screen Component ---
 // This assumes the component receives `groupId` from a navigator (e.g., Tab Navigator)
-const MemberScreen = () => {
-    const route = use
+const MemberScreen = ({ route }) => {
+
   const { groupId } = route.params;
   const [members, setMembers] = useState<Member[]>([]);
   const [loading, setLoading] = useState<boolean>(true);

src/screens/management/Payments.tsx

@@ -1,12 +1,246 @@
-import { View, Text } from 'react-native'
-import React from 'react'
-
-const Payments = () => {
-  return (
-    <View>
-      <Text>Payments</Text>
-    </View>
-  )
+import React, { useEffect, useState, useCallback } from 'react';
+import { View, Text, StyleSheet, ActivityIndicator, ScrollView, RefreshControl, Alert, TouchableOpacity } from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
+import * as Keychain from 'react-native-keychain';
+import { Ionicons } from "@react-native-vector-icons/ionicons";
+import colors from '../../components/colors'; // Assuming you have a colors file
+import AppView from '../../components/AppView';
+import { apiCall } from '../../utils/ApiHelper';
+interface ApiResponse<T> {
+  status: 'success' | 'error';
+  data: T;
+  message?: string;
+  statusCode: number;
 }
 
-export default Payments
+// Define the shape of your payment details data
+interface PaymentDetails {
+  // Add properties based on your API response, for example:
+  amount: number;
+  currency: string;
+  dueDate: string;
+  paidBy: string[];
+}
+const Payments = () => {
+    const route = useRoute<any>();
+    const navigation = useNavigation<any>();
+    const { groupId } = route.params;
+
+    const [paymentDetails, setPaymentDetails] = useState<any>(null);
+    const [loading, setLoading] = useState(true);
+    const [refreshing, setRefreshing] = useState(false);
+
+const fetchPaymentDetails = useCallback(async () => {
+    setLoading(true);
+    try {
+        // The apiCall function likely handles tokens internally, so we call it directly.
+        const response = await apiCall(
+            `https://exotic-humpback-mistakenly.ngrok-free.app/api/payments/current/payment/details/${groupId}`,
+            'GET'
+        ) as ApiResponse<PaymentDetails>; // Cast the response to the correct type
+
+        console.log("Payment Details Response:", response);
+
+        // Check the response and status property for success
+        if (response && response.statusCode === 200) {
+            setPaymentDetails(response.data);
+        } else {
+            // Use the message from the response object
+            Alert.alert("Error", response?.message || "Failed to fetch payment details.");
+        }
+    } catch (error: any) {
+        console.error("Fetch payment details error:", error);
+        Alert.alert("Error", error.message || "An unexpected error occurred while fetching payment details.");
+    } finally {
+        setLoading(false);
+        setRefreshing(false);
+    }
+}, [groupId]);
+
+    useEffect(() => {
+        fetchPaymentDetails();
+    }, [fetchPaymentDetails]);
+
+    const onRefresh = () => {
+        setRefreshing(true);
+        fetchPaymentDetails();
+    };
+
+    const renderParticipant = (participant: any) => (
+        <View key={participant.userId} style={styles.participantCard}>
+            <View style={styles.participantInfo}>
+                <Text style={styles.participantName}>{participant.firstName} {participant.lastName}</Text>
+                <Text style={styles.participantMobile}>{participant.mobile}</Text>
+            </View>
+            <View style={styles.paymentStatus}>
+                <Text style={[
+                    styles.statusText,
+                    { color: participant.status === 'PENDING' ? colors.warning : colors.success }
+                ]}>
+                    {participant.status}
+                </Text>
+                <Text style={styles.amountText}>
+                    ₹{participant.paidAmount} / ₹{participant.contributionAmount}
+                </Text>
+                {/* {participant.status === 'PENDING' && (
+                    <TouchableOpacity style={styles.payButton}>
+                        <Text style={styles.payButtonText}>Pay Now</Text>
+                    </TouchableOpacity>
+                )} */}
+            </View>
+        </View>
+    );
+
+    if (loading) {
+        return <ActivityIndicator style={styles.centered} size="large" color={colors.primary} />;
+    }
+
+    if (!paymentDetails) {
+        return (
+            <View style={styles.centered}>
+                <Text>No payment details found.</Text>
+                <TouchableOpacity onPress={fetchPaymentDetails} style={styles.retryButton}>
+                    <Text style={styles.retryButtonText}>Tap to retry</Text>
+                </TouchableOpacity>
+            </View>
+        );
+    }
+
+    return (
+      <AppView>
+        <ScrollView
+            style={styles.container}
+            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        >
+            <View style={styles.header}>
+                <Text style={styles.headerTitle}>{paymentDetails.groupName}</Text>
+            </View>
+
+            <View style={styles.summaryContainer}>
+                <View style={styles.summaryBox}>
+                    <Text style={styles.summaryLabel}>Current Cycle</Text>
+                    <Text style={styles.summaryValue}>{paymentDetails.currentCycle}</Text>
+                </View>
+                <View style={styles.summaryBox}>
+                    <Text style={styles.summaryLabel}>Contribution</Text>
+                    <Text style={styles.summaryValue}>₹{paymentDetails.contributionAmount}</Text>
+                </View>
+                <View style={styles.summaryBox}>
+                    <Text style={styles.summaryLabel}>Total Due</Text>
+                    <Text style={[styles.summaryValue, { color: colors.danger }]}>₹{paymentDetails.totalDueWithLateFee}</Text>
+                </View>
+            </View>
+
+            <Text style={styles.sectionTitle}>Participants</Text>
+            {paymentDetails.participants.map(renderParticipant)}
+        </ScrollView>
+</AppView>
+    );
+};
+
+const styles = StyleSheet.create({
+    centered: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    container: {
+        flex: 1,
+        backgroundColor: '#f4f6f8',
+    },
+    header: {
+
+        padding: 20,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderBottomLeftRadius: 20,
+        borderBottomRightRadius: 20,
+    },
+    backButton: {
+        marginRight: 15,
+    },
+    headerTitle: {
+        color: '#000000ff',
+        fontSize: 22,
+        fontWeight: 'bold',
+    },
+    summaryContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        padding: 20,
+        backgroundColor: '#fff',
+        margin: 15,
+        borderRadius: 10,
+    },
+    summaryBox: {
+        alignItems: 'center',
+    },
+    summaryLabel: {
+        fontSize: 14,
+        color: '#666',
+    },
+    summaryValue: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: colors.primary,
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginLeft: 20,
+        marginBottom: 10,
+    },
+    participantCard: {
+        backgroundColor: '#fff',
+        marginHorizontal: 15,
+        marginBottom: 10,
+        borderRadius: 10,
+        padding: 15,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    participantInfo: {
+        flex: 1,
+    },
+    participantName: {
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    participantMobile: {
+        fontSize: 14,
+        color: '#888',
+    },
+    paymentStatus: {
+        alignItems: 'flex-end',
+    },
+    statusText: {
+        fontSize: 14,
+        fontWeight: 'bold',
+    },
+    amountText: {
+        fontSize: 14,
+    },
+    payButton: {
+        marginTop: 5,
+        backgroundColor: colors.primary,
+        paddingVertical: 5,
+        paddingHorizontal: 10,
+        borderRadius: 5,
+    },
+    payButtonText: {
+        color: '#fff',
+        fontSize: 12,
+    },
+    retryButton: {
+        marginTop: 10,
+        padding: 10,
+    },
+    retryButtonText: {
+        color: colors.primary,
+        fontSize: 16,
+    },
+});
+
+export default Payments;
+