handle user profile session

src/screens/home/GroupList.tsx

@@ -85,7 +85,7 @@ const GroupList = () => {
         const res = await fetch(`${BASE_URL}fund/getAll/my/groups`, {
           headers: { Accept: "*/*", Authorization: `Bearer ${token}` },
         });
-        console.log("my groups response", res);
+        console.log("my groups response : ", res);
         const data = await res.json();
         setGroups(data.data || []);
         setFilteredGroups(data.data || []);

src/screens/home/Home.tsx

@@ -11,10 +11,10 @@ import {
 import AppView from "../../components/AppView";
 import UserProfileStatus from "./UserProfileStatus";
 import colors from "../../components/colors";
-import { Ionicons } from "@react-native-vector-icons/ionicons";
 import GroupsTabs from "./GroupsTabs";
 import { useSelector } from "react-redux";
 import { useNavigation } from "@react-navigation/native";
+import UserHome from "./user-home/UserHome";
 // Enable animation for Android
 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -29,11 +29,7 @@ const Home = () => {
       <View style={styles.header}>
         <Text style={styles.greeting}>Hello, {user.firstName} {user.lastName}👋</Text>
         <TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
-          {/* <Ionicons
-            name="person-circle-outline"
-            size={40}
-            color={colors.primary}
-          /> */}
+         
           <Image
             source={
               user.imageBlob
@@ -45,7 +41,8 @@ const Home = () => {
       </View>
       {/* Status */}
       <UserProfileStatus />
-      <GroupsTabs />
+      {user?.role === "USER" ? <UserHome /> :
+      <GroupsTabs />}
     </AppView>
   );
 };

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

@@ -0,0 +1,248 @@
+import React, { useRef, useEffect } from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+    TouchableOpacity,
+    FlatList,
+    Animated,
+} from "react-native";
+import { useRoute } from "@react-navigation/native";
+import AppView from "../../../components/AppView";
+import colors from "../../../components/colors";
+import Ionicons from "@react-native-vector-icons/ionicons";
+
+const GroupDetails = () => {
+    const route = useRoute();
+    const { groupId } = route.params as { groupId: string };
+
+    const group = {
+        id: groupId,
+        name: "Wedding Fund",
+        collected: 12000,
+        goal: 20000,
+        description:
+            "This group is created to collect contributions for the wedding celebration. Everyone can contribute as per their convenience.",
+        members: [
+            { id: "1", name: "Alice", contribution: 3000, role: "Organizer" },
+            { id: "2", name: "Bob", contribution: 2500, role: "Member" },
+            { id: "3", name: "Charlie", contribution: 4000, role: "Member" },
+            { id: "4", name: "David", contribution: 2500, role: "Member" },
+        ],
+    };
+
+    const progress = Math.min(group.collected / group.goal, 1);
+
+    // Animation refs
+    const animatedValues = useRef(group.members.map(() => new Animated.Value(0))).current;
+
+    useEffect(() => {
+        const animations = group.members.map((_, i) =>
+            Animated.timing(animatedValues[i], {
+                toValue: 1,
+                duration: 400,
+                delay: i * 100,
+                useNativeDriver: true,
+            })
+        );
+        Animated.stagger(100, animations).start();
+    }, []);
+
+    const renderMember = ({ item, index }: { item: typeof group.members[0]; index: number }) => {
+        return (
+            <Animated.View
+                style={[
+                    styles.memberCard,
+                    {
+                        opacity: animatedValues[index],
+                        transform: [
+                            {
+                                translateY: animatedValues[index].interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [20, 0], // slide up effect
+                                }),
+                            },
+                        ],
+                    },
+                ]}
+            >
+                <View style={{ flexDirection: 'row', gap: 10 }}>
+                    <Ionicons
+                        name="person-circle-outline"
+                        size={40}
+                        color={colors.primary}
+                    />
+                    <View>
+                        <Text style={styles.memberName}>
+                            {item.name} {item.role === "Organizer" ? "(Organizer)" : "(Member)"}
+                        </Text>
+                        <Text style={styles.memberDetail}>Contribution: ₹{item.contribution}</Text>
+                    </View>
+
+                </View>
+
+            </Animated.View>
+        );
+    };
+
+    return (
+        <AppView>
+            {/* Group Title */}
+            <Text style={styles.groupName}>{group.name}</Text>
+            <Text style={styles.description}>{group.description}</Text>
+
+            {/* Progress Bar */}
+            <View style={styles.progressContainer}>
+                <View style={styles.progressBar}>
+                    <View style={[styles.progressFill, { flex: progress }]} />
+                    <View style={{ flex: 1 - progress }} />
+                </View>
+                <Text style={styles.amount}>
+                    ₹{group.collected} / ₹{group.goal}
+                </Text>
+            </View>
+
+            {/* Stats */}
+            <View style={styles.statsRow}>
+                <View style={styles.statBox}>
+                    <Text style={styles.statValue}>{group.members.length}</Text>
+                    <Text style={styles.statLabel}>Members</Text>
+                </View>
+                <View style={styles.statBox}>
+                    <Text style={styles.statValue}>₹{group.collected}</Text>
+                    <Text style={styles.statLabel}>Collected</Text>
+                </View>
+                <View style={styles.statBox}>
+                    <Text style={styles.statValue}>₹{group.goal}</Text>
+                    <Text style={styles.statLabel}>Goal</Text>
+                </View>
+            </View>
+
+            {/* Members List */}
+            <Text style={styles.sectionTitle}>Members</Text>
+            <FlatList
+                data={group.members}
+                keyExtractor={(item) => item.id}
+                renderItem={({ item, index }) => renderMember({ item, index })}
+                contentContainerStyle={styles.membersListContainer}
+            />
+
+            {/* Actions */}
+            <View style={styles.actions}>
+                <TouchableOpacity style={styles.button}>
+                    <Text style={styles.buttonText}>Contribute</Text>
+                </TouchableOpacity>
+            </View>
+        </AppView>
+    );
+};
+
+export default GroupDetails;
+
+const styles = StyleSheet.create({
+    groupName: {
+        fontSize: 22,
+        fontWeight: "700",
+        color: "#0f172a",
+        marginBottom: 6,
+    },
+    description: {
+        fontSize: 14,
+        color: "#475569",
+        marginBottom: 20,
+        lineHeight: 20,
+    },
+    progressContainer: {
+        marginBottom: 24,
+    },
+    progressBar: {
+        flexDirection: "row",
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: "#e2e8f0",
+        overflow: "hidden",
+        marginBottom: 6,
+    },
+    progressFill: {
+        backgroundColor: colors.Home,
+    },
+    amount: {
+        fontSize: 13,
+        color: "#64748b",
+    },
+    statsRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginBottom: 20,
+    },
+    statBox: {
+        flex: 1,
+        backgroundColor: "#fff",
+        marginHorizontal: 4,
+        padding: 16,
+        borderRadius: 12,
+        alignItems: "center",
+        shadowColor: "#000",
+        shadowOpacity: 0.05,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 6,
+        elevation: 2,
+    },
+    statValue: {
+        fontSize: 18,
+        fontWeight: "700",
+        color: "#1e293b",
+    },
+    statLabel: {
+        fontSize: 12,
+        color: "#64748b",
+        marginTop: 4,
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: "600",
+        color: "#0f172a",
+        marginBottom: 12,
+    },
+    membersListContainer: {
+        paddingBottom: 20,
+    },
+    memberCard: {
+        backgroundColor: "#fff",
+        padding: 16,
+        borderRadius: 12,
+        marginBottom: 10,
+        // shadowColor: "#000",
+        // shadowOpacity: 0.05,
+        // shadowOffset: { width: 0, height: 2 },
+        // shadowRadius: 4,
+        // elevation: 2,
+        borderLeftWidth:5,
+        borderColor:colors.primary
+    },
+    memberName: {
+        fontSize: 15,
+        fontWeight: "600",
+        color: "#1e293b",
+        marginBottom: 4,
+    },
+    memberDetail: {
+        fontSize: 13,
+        color: "#475569",
+    },
+    actions: {
+        marginTop: 16,
+    },
+    button: {
+        backgroundColor: colors.Home,
+        paddingVertical: 14,
+        borderRadius: 10,
+        alignItems: "center",
+        marginBottom: 12,
+    },
+    buttonText: {
+        fontSize: 15,
+        fontWeight: "600",
+        color: "#fff",
+    },
+});

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

@@ -0,0 +1,168 @@
+import React from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+    FlatList,
+    TouchableOpacity,
+} 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 colors from "../../../components/colors";
+import Ionicons from "@react-native-vector-icons/ionicons";
+
+type NavigationProp = NativeStackNavigationProp<RootStackParamList, "GroupDetails">;
+
+type Group = {
+    id: string;
+    name: string;
+    members: number;
+    collected: number;
+    goal: number;
+};
+
+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 totalGroups = groups.length;
+    const totalCollected = groups.reduce((sum, g) => sum + g.collected, 0);
+
+    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>
+                <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}%` }]} />
+                </View>
+
+                <Text style={styles.amount}>
+                    ₹{item.collected} / ₹{item.goal}
+                </Text>
+            </TouchableOpacity>
+        );
+    };
+
+    return (
+        <View>
+            {/* Stats */}
+            <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>
+                </View>
+            </View>
+
+            {/* Groups List */}
+            <Text style={styles.sectionTitle}>Your Groups</Text>
+            <FlatList
+                data={groups}
+                keyExtractor={(item) => item.id}
+                renderItem={renderItem}
+                contentContainerStyle={{ paddingBottom: 20 }}
+            />
+        </View>
+    );
+};
+
+export default UserHome;
+
+const styles = StyleSheet.create({
+
+
+    statsRow: {
+        flexDirection: "row",
+        gap: 10
+    },
+    statBox: {
+        flex: 1,
+        backgroundColor: "#fff",
+        // marginHorizontal: 6,
+        padding: 16,
+        borderRadius: 12,
+        alignItems: "center",
+        shadowColor: "#000",
+        shadowOpacity: 0.05,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 6,
+        elevation: 2,
+    },
+    statValue: {
+        fontSize: 18,
+        fontWeight: "700",
+        color: colors.Home,
+    },
+    statLabel: {
+        fontSize: 12,
+        color: "#64748b",
+        marginTop: 4,
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: "600",
+        color: colors.Home,
+        marginBottom: 12,
+    },
+    card: {
+        backgroundColor: "#ffffff",
+        padding: 16,
+        marginBottom: 12,
+        borderRadius: 12,
+        shadowColor: "#000",
+        shadowOpacity: 0.05,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 6,
+        elevation: 2,
+    },
+    groupName: {
+        fontSize: 16,
+        fontWeight: "600",
+        color: colors.Home,
+        marginBottom: 6,
+    },
+    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",
+    },
+});