api integration for joined user

src/screens/home/user-home/GroupDetails.tsx

@@ -11,6 +11,7 @@ import { useRoute } from "@react-navigation/native";
 import AppView from "../../../components/AppView";
 import colors from "../../../components/colors";
 import Ionicons from "@react-native-vector-icons/ionicons";
+import Header from "../../../components/common/Header";
 
 const GroupDetails = () => {
     const route = useRoute();
@@ -88,7 +89,8 @@ const GroupDetails = () => {
     return (
         <AppView>
             {/* Group Title */}
-            <Text style={styles.groupName}>{group.name}</Text>
+            <Header title={group.name}/>
+            {/* <Text style={styles.groupName}>{group.name}</Text> */}
             <Text style={styles.description}>{group.description}</Text>
 
             {/* Progress Bar */}

src/screens/home/user-home/UserHome.tsx

@@ -1,65 +1,108 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
     StyleSheet,
     Text,
     View,
     FlatList,
     TouchableOpacity,
+    Alert,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
-import type { RootStackParamList } from "../../../navigation/AppNavigator"; // adjust path
+import type { RootStackParamList } from "../../../navigation/AppNavigator";
 import colors from "../../../components/colors";
-import Ionicons from "@react-native-vector-icons/ionicons";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
+import { GET_JOINED_GROUP_URL } from "../../../utils/ApiUrls";
+import * as Keychain from "react-native-keychain";
 
-type NavigationProp = NativeStackNavigationProp<RootStackParamList, "GroupDetails">;
+type NavigationProp = NativeStackNavigationProp<
+    RootStackParamList,
+    "GroupDetails"
+>;
 
 type Group = {
     id: string;
-    name: string;
-    members: number;
-    collected: number;
-    goal: number;
+    groupName: string;
+    description: string;
+    currentParticipants: number;
+    maxParticipants: number;
+    contributionAmount: number;
+    status: string;
 };
 
-const groups: Group[] = [
-    { id: "1", name: "Wedding Fund", members: 25, collected: 12000, goal: 20000 },
-    { id: "2", name: "Birthday Gift", members: 10, collected: 4500, goal: 6000 },
-    { id: "3", name: "Community Event", members: 50, collected: 22000, goal: 30000 },
-];
-
 const UserHome = () => {
     const navigation = useNavigation<NavigationProp>();
+    const [groups, setGroups] = useState<Group[]>([]);
+    const [loading, setLoading] = useState<boolean>(false)
 
     const totalGroups = groups.length;
-    const totalCollected = groups.reduce((sum, g) => sum + g.collected, 0);
+    const totalContribution = groups.reduce(
+        (sum, g) => sum + g.contributionAmount,
+        0
+    );
+
+    const handleGroup = async () => {
+        try {
+            setLoading(true)
+            const credentials = await Keychain.getGenericPassword();
+            if (!credentials) {
+                Alert.alert("Error", "You are not logged in");
+                return;
+            }
+            const token = credentials.password;
+
+            const response = await fetch(GET_JOINED_GROUP_URL, {
+                method: "GET",
+                headers: {
+                    Accept: "*/*",
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+
+            const result = await response.json();
+            if (result.status === "success") {
+                console.log("GET_JOINED_GROUP_URL res : ", result);
+                setGroups(result.data); // save API data
+                setLoading(false)
+            } else {
+                Alert.alert("Error", "Failed to fetch groups");
+            }
+        } catch (error) {
+            console.error("❌ Error fetching groups:", error);
+            Alert.alert("Error", "Could not connect to server");
+        }finally{
+            setLoading(false)
+        }
+    };
+
+    useEffect(() => {
+        handleGroup();
+    }, []);
 
     const renderItem = ({ item }: { item: Group }) => {
-        const progress = Math.min(item.collected / item.goal, 1) * 100;
-
         return (
             <TouchableOpacity
                 style={styles.card}
                 onPress={() => navigation.navigate("GroupDetails", { groupId: item.id })}
             >
-                <Text style={styles.groupName}>{item.name}</Text>
+                <Text style={styles.groupName}>{item.groupName}</Text>
+                <Text style={styles.description}>{item.description}</Text>
+
                 <View style={styles.statsRow}>
                     <Ionicons
                         name="person-circle-outline"
                         size={20}
                         color={colors.primary}
                     />
-                    <Text style={styles.detail}> {item.members} members</Text>
-                </View>
-
-                {/* Progress Bar */}
-                <View style={styles.progressBar}>
-                    <View style={[styles.progressFill, { width: `${progress}%` }]} />
+                    <Text style={styles.detail}>
+                        {item.currentParticipants}/{item.maxParticipants} members
+                    </Text>
                 </View>
 
                 <Text style={styles.amount}>
-                    ₹{item.collected} / ₹{item.goal}
+                    Contribution: ₹{item.contributionAmount}
                 </Text>
+                <Text style={styles.status}>Status: {item.status}</Text>
             </TouchableOpacity>
         );
     };
@@ -67,14 +110,14 @@ const UserHome = () => {
     return (
         <View>
             {/* Stats */}
-            <View style={[styles.statsRow, { marginVertical: 24, }]}>
+            <View style={[styles.statsRow, { marginVertical: 24 }]}>
                 <View style={styles.statBox}>
                     <Text style={styles.statValue}>{totalGroups}</Text>
                     <Text style={styles.statLabel}>Groups Joined</Text>
                 </View>
                 <View style={styles.statBox}>
-                    <Text style={styles.statValue}>₹{totalCollected}</Text>
-                    <Text style={styles.statLabel}>Total Contributed</Text>
+                    <Text style={styles.statValue}>₹{totalContribution}</Text>
+                    <Text style={styles.statLabel}>Total Contribution</Text>
                 </View>
             </View>
 
@@ -93,16 +136,13 @@ const UserHome = () => {
 export default UserHome;
 
 const styles = StyleSheet.create({
-
-
     statsRow: {
         flexDirection: "row",
-        gap: 10
+        gap: 10,
     },
     statBox: {
         flex: 1,
         backgroundColor: "#fff",
-        // marginHorizontal: 6,
         padding: 16,
         borderRadius: 12,
         alignItems: "center",
@@ -143,26 +183,27 @@ const styles = StyleSheet.create({
         fontSize: 16,
         fontWeight: "600",
         color: colors.Home,
-        marginBottom: 6,
+        marginBottom: 4,
+    },
+    description: {
+        fontSize: 13,
+        color: "#475569",
+        marginBottom: 8,
     },
     detail: {
         fontSize: 13,
         color: "#475569",
         marginBottom: 8,
     },
-    progressBar: {
-        height: 6,
-        borderRadius: 3,
-        backgroundColor: "#e2e8f0",
-        marginBottom: 6,
-        overflow: "hidden",
-    },
-    progressFill: {
-        backgroundColor: colors.primary,
-        height: "100%",
-    },
     amount: {
         fontSize: 13,
         color: "#64748b",
+        marginTop: 4,
+    },
+    status: {
+        fontSize: 12,
+        fontWeight: "500",
+        color: colors.primary,
+        marginTop: 2,
     },
 });