handle user profile session

2025-09-22 13:52:38 +05:30
parent e7158df0f8 5a9e80f56f
commit ff8c0439f6
18 changed files with 1537 additions and 711 deletions
@@ -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",
+    },
+});