pay indivisual

src/components/JoinedGroupCard.tsx

@@ -1,7 +1,9 @@
 import React, { FC } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ToastAndroid } from 'react-native';
 import colors from './colors';
 import { useNavigation } from '@react-navigation/native';
+import { BASE_URL } from '../utils/ApiUrls';
+import { apiCall } from '../utils/ApiHelper';
 
 interface JoinedGroup {
   id: string;
@@ -58,13 +60,31 @@ const getStatusStyle = (status: JoinedGroup['status']) => {
   }
 };
 
-export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, onPayPress, hasPaid }) => {
+export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, hasPaid }) => {
   const progress = (item.currentParticipants / item.maxParticipants) * 100;
   const statusStyle = getStatusStyle(item.status);
   const navigation = useNavigation<any>();
+  const [loading, setLoading] = React.useState(false);
 
+  const onPayPress = async () => {
+    // Navigate to payment screen or handle payment logic
+    // navigation.navigate('PaymentScreen', { groupId: item.id, amount: item.contributionAmount });
+    setLoading(true);
+    try {
+      const res = await apiCall(`${BASE_URL}payments/contribute/${item?.id}?amount=${item?.contributionAmount}`, 'POST') as any;
+      console.log('payment res ', res)
+      if (res.status === 200 || res.status === 201 || res.statusCode === 200) {
+        ToastAndroid.show('Payment done!', ToastAndroid.SHORT);
+        setLoading(false);
+      }
+    } catch (error) {
+      ToastAndroid.show("An error occurred during payment.", ToastAndroid.SHORT);
+    } finally {
+      setLoading(false);
+    }
+  };
   return (
-    <TouchableOpacity style={styles.card} onPress={() => navigation.navigate("GroupDetails", {item, color:colors.black})}>
+    <TouchableOpacity style={styles.card} onPress={() => navigation.navigate("GroupDetails", { item, color: colors.black })}>
       {/* Header */}
       <View style={styles.header}>
         <Text style={styles.groupName}>{item.groupName}</Text>
@@ -96,7 +116,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, o
           </View>
         ) : (
           <TouchableOpacity style={styles.payButton} onPress={onPayPress}>
-            <Text style={styles.payButtonText}>Pay</Text>
+            <Text style={styles.payButtonText}>{loading ? 'Loading...' : 'Pay'}</Text>
           </TouchableOpacity>
         )}
       </View>
@@ -106,7 +126,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, o
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor:colors.pastelOrange,
+    backgroundColor: colors.pastelOrange,
     borderRadius: 16,
     padding: 20,
     marginBottom: 16,
@@ -115,7 +135,7 @@ const styles = StyleSheet.create({
     shadowRadius: 10,
     shadowOffset: { width: 0, height: 4 },
     elevation: 5,
-    marginHorizontal:12
+    marginHorizontal: 12
   },
   header: {
     flexDirection: 'row',
@@ -153,12 +173,12 @@ const styles = StyleSheet.create({
     borderColor: colors.pastelOrange,
     marginBottom: 16,
     backgroundColor: colors.white,
-    borderRadius:15,
+    borderRadius: 15,
   },
   infoItem: {
-    padding:5,
+    padding: 5,
-    paddingHorizontal:10,
+    paddingHorizontal: 10,
-    backgroundColor:colors.white,
+    backgroundColor: colors.white,
     alignItems: 'flex-start',
   },
   infoLabel: {
@@ -197,7 +217,7 @@ const styles = StyleSheet.create({
   },
   progressBarFill: {
     height: '100%',
-    backgroundColor: colors.Settings,
+    backgroundColor: colors.pastelOrange,
     borderRadius: 4,
   },
   footer: {
@@ -212,7 +232,7 @@ const styles = StyleSheet.create({
   },
   // Pay button
   payButton: {
-    elevation:5,
+    elevation: 5,
     backgroundColor: colors.white,
     paddingHorizontal: 25,
     paddingVertical: 10,

src/components/common/AnimatedCard.tsx

@@ -1,86 +1,41 @@
 import React, { useRef } from "react";
-import {
+import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback } from "react-native";
-  View,
-  Text,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  Animated,
-  ViewStyle,
-  StyleProp,
-} from "react-native";
 import LinearGradient from "react-native-linear-gradient";
-import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
-import colors from "../colors"; // Assuming your pastel colors are defined here
+import colors from "../colors";
 
 type CardProps = {
   title: string;
   subtitle?: string;
-  iconName?: IoniconsIconName;
+  iconName?: string;
   onPress?: () => void;
   backOne?: string;
   backTwo?: string;
-  style?: StyleProp<ViewStyle>;
 };
 
 const AnimatedCard: React.FC<CardProps> = ({
   title,
   subtitle,
-  iconName = "ellipse",
+  iconName = "ellipse-outline",
   onPress,
-  backOne = colors.pastelPink, // Defaulting to pastelPink from your preferences
+  backOne = colors.primary,
-  backTwo = colors.primary,
+  backTwo = colors.pastelPink,
-  style,
 }) => {
   const scale = useRef(new Animated.Value(1)).current;
 
-  const handlePressIn = () => {
+  const handlePress = () => {
-    Animated.spring(scale, {
+    Animated.sequence([
-      toValue: 0.96,
+      Animated.spring(scale, { toValue: 0.95, useNativeDriver: true }),
-      useNativeDriver: true,
+    ]).start(() => onPress && onPress());
-      friction: 4,
-    }).start();
-  };
-
-  const handlePressOut = () => {
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: true,
-      friction: 4,
-    }).start(() => {
-      if (onPress) {
-        onPress();
-      }
-    });
   };
 
   return (
-    <TouchableWithoutFeedback onPressIn={handlePressIn} onPressOut={handlePressOut}>
+    <TouchableWithoutFeedback onPress={handlePress}>
-      <Animated.View style={[styles.card, style, { transform: [{ scale }] }]}>
+      <Animated.View style={[styles.card, { transform: [{ scale }] }]}>
-        <LinearGradient
+        <LinearGradient colors={[backOne, backTwo]} style={styles.gradient}>
-          colors={[backOne, backTwo]}
+          <Ionicons name={iconName} size={38} color="#fff" style={styles.icon} />
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={styles.gradient}
-        >
-          {/* Decorative Graphics */}
-          <View style={styles.graphicCircleLarge} />
-          <View style={styles.graphicCircleSmall} />
-
-          {/* Content */}
-          <View style={styles.content}>
-            {iconName && (
-              <Ionicons
-                name={iconName}
-                size={38}
-                color="#fff"
-                style={styles.icon}
-              />
-            )}
-            <View style={styles.textContainer}>
           <Text style={styles.title}>{title}</Text>
           {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
-            </View>
-          </View>
         </LinearGradient>
       </Animated.View>
     </TouchableWithoutFeedback>
@@ -89,77 +44,21 @@ const AnimatedCard: React.FC<CardProps> = ({
 
 const styles = StyleSheet.create({
   card: {
-    // minWidth: 170,
     flex: 1,
-    height: 170,
+    height: 160,
-    marginHorizontal: 8,
+    margin: 8,
-    marginVertical: 10,
+    borderRadius: 20,
-    borderRadius: 24,
     overflow: "hidden",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 5 },
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
     elevation: 5,
   },
   gradient: {
-    position: "relative",
-    flex: 1,
-    // justifyContent: "center",
-    // alignItems: "center",
-    justifyContent: "space-between",
-    borderRadius: 24,
-    overflow: "hidden",
-    gap: 10,
-  },
-  graphicCircleLarge: {
-    position: "absolute",
-    top: -30,
-    right: -40,
-    width: 100,
-    height: 100,
-    borderRadius: 50,
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
-  },
-  graphicCircleSmall: {
-    position: "absolute",
-    bottom: -20,
-    left: -25,
-    width: 70,
-    height: 70,
-    borderRadius: 35,
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
-  },
-  content: {
-    padding: 20,
-    position: "relative",
-    zIndex: 1,
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
   },
-  icon: {
+  icon: { marginBottom: 10 },
-    marginBottom: 12,
+  title: { fontSize: 18, fontWeight: "bold", color: "#fff" },
-  },
+  subtitle: { fontSize: 13, color: "#fff", opacity: 0.9 },
-  textContainer: {
-    alignItems: "center",
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: "bold",
-    color: "#fff",
-    textTransform: "uppercase",
-    letterSpacing: 1,
-    textAlign: "center",
-  },
-  subtitle: {
-    fontSize: 13,
-    color: colors.white,
-    opacity: 0.9,
-    fontWeight: "500",
-    textAlign: "center",
-    marginTop: 4,
-  },
 });
 
 export default AnimatedCard;

src/screens/GroupScreen.tsx

@@ -22,7 +22,7 @@ import { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../navigation/AppNavigator";
 import AppView from "../components/AppView";
 import { apiCall } from "../utils/ApiHelper";
-import { BASE_URL, GET_JOINED_GROUP_URL, JOIN_GROUP_URL, PUBLIC_GROUPS_URL, PUT_USER_STATUS } from "../utils/ApiUrls";
+import { BASE_URL, GET_JOINED_GROUP_URL, JOIN_GROUP_URL, PUBLIC_GROUPS_URL, USER_STATUS } from "../utils/ApiUrls";
 import colors from "../components/colors";
 import { ApiResponse } from "./home/UserProfileStatus";
 import * as Keychain from "react-native-keychain";
@@ -214,7 +214,7 @@ export default function GroupScreen() {
 
       setLoading(true);
       setError(null);
-      const response = await fetch(PUT_USER_STATUS, {
+      const response = await fetch(USER_STATUS, {
         method: "GET",
         headers: {
           Accept: "*/*",

src/screens/home/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import {
   StyleSheet,
   Text,
@@ -6,23 +6,21 @@ import {
   TouchableOpacity,
   UIManager,
   Platform,
-  Image,
-  Alert,
   FlatList,
   ListRenderItem,
-  ToastAndroid,
+  Alert,
-  ScrollView,
+  RefreshControl,
 } from "react-native";
 import AppView from "../../components/AppView";
 import colors from "../../components/colors";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigation } from "@react-navigation/native";
-import { PROFILE_URL } from "../../utils/ApiUrls";
+import { DASHBOARD_URL, PROFILE_URL, USER_STATUS } from "../../utils/ApiUrls";
 import { setUserData } from "../../redux/userSlice";
 import { TabNavigationProp } from "../../navigation/BottomTabs";
 import UserProfileStatus from "./UserProfileStatus";
 import AnimatedCard from "../../components/common/AnimatedCard";
-import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
 import { apiCall } from "../../utils/ApiHelper";
 import CustomAlert, { CustomAlertProps } from "../../components/CostomAlart";
 
@@ -38,6 +36,7 @@ type UserProfile = {
   imageBlob: string | null;
   role?: string;
   organizerStatus?: string;
+  profileStatus?: boolean;
 };
 
 interface ActionItem {
@@ -45,45 +44,63 @@ interface ActionItem {
   title: string;
   action: string;
   tab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests";
-  iconName?: IoniconsIconName;
+  iconName?: any;
   backOne?: string;
   backTwo?: string;
   subtitle?: string;
 }
 
-// Updated action items with a prettier pastel palette
 const organizerActions: ActionItem[] = [
-  { id: "1", title: "My Groups", subtitle: "Manage your groups", action: "NAVIGATE_MANAGEMENT", tab: "My Groups", iconName: "people-circle-outline", backOne: '#decbfcff', backTwo: '#B799FF' },
+    { id: "1", title: "My Groups", subtitle: "Manage groups", action: "NAVIGATE_MANAGEMENT", tab: "My Groups", iconName: "people-circle-outline", backOne: "#decbfcff", backTwo: "#B799FF" },
-  { id: "2", title: "Joined Groups", subtitle: "View member groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "people-outline", backOne: '#D7E9F7', backTwo: '#82AAE3' },
+    { id: "2", title: "Joined Groups", subtitle: "View groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "people-outline", backOne: "#D7E9F7", backTwo: "#82AAE3" },
-  { id: "3", title: "Requests", subtitle: "Check new requests", action: "NAVIGATE_MANAGEMENT", tab: "Requests", iconName: "notifications-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
+    { id: "3", title: "Requests", subtitle: "Check requests", action: "NAVIGATE_MANAGEMENT", tab: "Requests", iconName: "notifications-outline", backOne: "#DFF6DD", backTwo: "#88D18A" },
-  { id: "4", title: "Create Group", subtitle: "Create a new group", action: "NAVIGATE_CREATE_GROUP", tab: "Requests", iconName: "people-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
+    { id: "4", title: "Create Group", subtitle: "Start new group", action: "NAVIGATE_CREATE_GROUP", iconName: "add-circle-outline", backOne: "#FFF4D2", backTwo: "#FFB344" },
+    { id: "5", title: "Your Requests", subtitle: "Track requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", iconName: "mail-open-outline", backOne: "#FFF4D2", backTwo: "#FFB344" },
+    { id: "6", title: "Transactions", subtitle: "View history", action: "TRANSACTION", iconName: "receipt-outline", backOne: "#decbfcff", backTwo: "#B799FF" },
 ];
 
 const userActions: ActionItem[] = [
-  { id: "1", title: "Joined Groups", subtitle: "See your groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "person-outline", backOne: '#D7E9F7', backTwo: '#82AAE3' },
+    { id: "1", title: "Joined Groups", subtitle: "See your groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "people-outline", backOne: "#D7E9F7", backTwo: "#82AAE3" },
-  { id: "2", title: "Your Requests", subtitle: "Track your requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", iconName: "mail-open-outline", backOne: '#FFF4D2', backTwo: '#FFB344' },
+    { id: "2", title: "Your Requests", subtitle: "Track requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", iconName: "mail-open-outline", backOne: "#FFF4D2", backTwo: "#FFB344" },
-  { id: "3", title: "Transactions", subtitle: "View your history", action: "TRANSACTION", iconName: "receipt-outline", backOne: '#decbfcff', backTwo: '#B799FF' },
+    { id: "3", title: "Transactions", subtitle: "View history", action: "TRANSACTION", iconName: "receipt-outline", backOne: "#decbfcff", backTwo: "#B799FF" },
-  { id: "4", title: "Create Group", subtitle: "Create a new group", action: "NAVIGATE_CREATE_GROUP", tab: "Requests", iconName: "people-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
+    { id: "4", title: "Create Group", subtitle: "Start new group", action: "NAVIGATE_CREATE_GROUP", iconName: "add-circle-outline", backOne: "#DFF6DD", backTwo: "#88D18A" },
 ];
 
+
 const Home: React.FC = () => {
   const user = useSelector((state: any) => state.user);
-  const notifications = useSelector(
+  const notifications = useSelector((state: any) => state.notifications.notifications);
-    (state: any) => state.notifications.notifications
-  );
   const navigation = useNavigation<TabNavigationProp>();
   const dispatch = useDispatch();
 
-  const actions = user.role === 'ORGANIZER' ? organizerActions : userActions;
+  const actions = user.role === "ORGANIZER" ? organizerActions : userActions;
   const [apiUser, setApiUser] = useState<UserProfile | null>(null);
-  const [alartVisible, setalartVisible] = useState<boolean>(false)
+  const [alertVisible, setAlertVisible] = useState(false);
-  const [alartAction, setAlartAction] = useState<CustomAlertProps | null>(null)
+  const [alertAction, setAlertAction] = useState<CustomAlertProps | null>(null);
+  const [userDashboard, setUserDashboard] = useState<any>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const [statusData, setStatusData] = useState<any>(null);
+  const getDashboardData = async () => {
+    try {
+      const result = (await apiCall(DASHBOARD_URL, "GET")) as any;
+      if (result.status === "success") {
+        console.log("dashboard -----",result)
+        setUserDashboard(result.data);
+      }
+    } catch (error) {
+      console.error("❌ Error fetching dashboard data:", error);
+    }
+  };
+
+  const getUserStatus = async () => {
+        const result =  await apiCall(USER_STATUS, "GET") as any;
+        setStatusData(result.data);
+        }
 
-  useEffect(() => {
   const fetchUserProfile = async () => {
     try {
-        const result = await apiCall(PROFILE_URL, "GET") as any;
+      const result = (await apiCall(PROFILE_URL, "GET")) as any;
-        console.log(PROFILE_URL, result)
+      console.log("profile data", result);
       if (result.status === "success") {
         setApiUser(result.data);
         dispatch(setUserData({ ...result.data, profileStatus: true }));
@@ -92,70 +109,58 @@ const Home: React.FC = () => {
       console.error("❌ Error fetching profile:", error);
     }
   };
-    const unsubscribe = navigation.addListener('focus', fetchUserProfile);
+
-    fetchUserProfile();
+  const fetchData = useCallback(async () => {
+    await Promise.all([fetchUserProfile(), getDashboardData(), getUserStatus()]);
+  }, []);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await fetchData();
+    setRefreshing(false);
+  }, [fetchData]);
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener("focus", fetchData);
+    fetchData();
     return unsubscribe;
-  }, [navigation, dispatch]);
+  }, [navigation, fetchData]);
 
   const handleActionPress = (item: ActionItem) => {
     if (item.action === "NAVIGATE_MANAGEMENT" && item.tab) {
-      navigation.navigate('Management', { actionTab: item.tab });
+      navigation.navigate("Management", { actionTab: item.tab });
     } else if (item.action === "TRANSACTION") {
       navigation.navigate("TransactionList" as never);
     } else if (item.action === "NAVIGATE_CREATE_GROUP") {
       switch (apiUser?.organizerStatus) {
-        case 'NOT_APPLIED':
+        case "NOT_APPLIED":
-          setalartVisible(true);
+          setAlertAction({
-          setAlartAction({
             visible: true,
-            title: "Become organizer",
+            title: "Become an Organizer",
-            message: "You have to become organizer for creating groups",
+            message: "You need to be an organizer to create groups.",
             buttons: [
               {
                 text: "Continue",
                 onPress: () => {
-                  setalartVisible(false);
+                  setAlertVisible(false);
                   navigation.navigate("BecomeOrg" as never);
                 },
-                style: "default",
-              },
-              {
-                text: "Close",
-                onPress: () => {
-                  setalartVisible(false);
-                },
-                style: "cancel",
               },
+              { text: "Close", onPress: () => setAlertVisible(false), style: "cancel" },
             ],
-            alertType: 'error',
+            alertType: "error",
-            onClose: () => setAlartAction(null),
+            onClose: () => setAlertAction(null),
           });
+          setAlertVisible(true);
           break;
-
+        case "PENDING":
-        case 'PENDING':
+          Alert.alert("Pending Approval", "Your organizer request is still pending.");
-          setalartVisible(true);
-          setAlartAction({
-            visible: true,
-            title: "Organizer Application Pending",
-            message: "Your application to become an organizer is pending approval. You cannot create groups until it's approved.",
-            buttons: [
-              {
-                text: "Close",
-                onPress: () => {
-                  setalartVisible(false);
-                },
-                style: "cancel",
-              },
-            ],
-            alertType: 'info',
-            onClose: () => setAlartAction(null),
-          });
           break;
-        case 'APPROVED':
+        case "APPROVED":
           navigation.navigate("GroupCreation" as never);
           break;
         default:
-          Alert.alert("Unknown action", item.title);
+          Alert.alert("Unknown Status", "Could not determine your organizer status.");
           break;
       }
     }
@@ -164,7 +169,6 @@ const Home: React.FC = () => {
   const unreadCount = notifications.filter((item: any) => !item.read).length;
 
   const renderGridItem: ListRenderItem<ActionItem> = ({ item }) => (
-    <View style={styles.cardWrapper}>
     <AnimatedCard
       key={item.id}
       title={item.title}
@@ -174,45 +178,72 @@ const Home: React.FC = () => {
       backTwo={item.backTwo}
       onPress={() => handleActionPress(item)}
     />
-    </View>
   );
 
   const getProfileImageUri = () => {
     const blob = user.imageBlob || apiUser?.imageBlob;
-    return blob ? { uri: `data:image/jpeg;base64,${blob}` } : require('../../assets/images/placeholder.png');
+    return blob ? { uri: `data:image/jpeg;base64,${blob}` } : undefined;
   };
 
   return (
-    // <AppView barStyle="dark-content" style={styles.container}>
+    <AppView barStyle="dark-content" style={styles.container}>
-    <ScrollView style={styles.container}>
+      <FlatList
+        data={actions}
+        numColumns={2}
+        renderItem={renderGridItem}
+        keyExtractor={(item) => item.id}
+        ListHeaderComponent={
+          <>
             <View style={styles.header}>
               <View>
-          <Text style={styles.greeting}>Hello,</Text>
+                <Text style={styles.greeting}>
-          <Text style={styles.userName}>{user.firstName || apiUser?.firstName || 'User'}</Text>
+                  Hello, <Text style={{ fontWeight: 'bold' }}>{user.firstName || apiUser?.firstName || "User"}</Text>
+                </Text>
               </View>
               <TouchableOpacity onPress={() => navigation.navigate("Notification" as never)}>
-          <Text style={{ position: 'absolute', right: -6, top: -4, backgroundColor: colors.danger, color: colors.white, borderRadius: 8, width: 16, height: 16, textAlign: 'center', fontSize: 10, fontWeight: 'bold', lineHeight: 16, zIndex: 1 }}>{unreadCount > 0 ? unreadCount : ''}</Text>
+                {unreadCount > 0 && (
+                  <View style={styles.badge}>
+                    <Text style={styles.badgeText}>{unreadCount}</Text>
+                  </View>
+                )}
                 <Ionicons name="notifications-outline" size={30} color={colors.textDark} />
               </TouchableOpacity>
             </View>
 
-      <UserProfileStatus profileImage={getProfileImageUri()} />
+            <UserProfileStatus
-
+              profileImage={getProfileImageUri()}
-      <View style={{ justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center', marginTop: 20, marginBottom: 10 }}>
+              statusData={statusData}
-        <Text style={styles.sectionTitle}>Quick Actions</Text>
+              userDashboard={userDashboard}
-        <TouchableOpacity style={{ padding: 8 , backgroundColor: colors.primary , marginRight: 15}} onPress={() => Alert.alert('Info', 'This will allow you to pay all pending contributions in your groups.')}>
-          <Text style={{ fontSize: 14, color: '#fff', fontWeight: 'bold' }}>Pay All</Text>
-        </TouchableOpacity>
-      </View>
-
-      <FlatList
-        data={actions}
-        renderItem={renderGridItem}
-        keyExtractor={(item) => item.id}
-        numColumns={2}
-        contentContainerStyle={{ paddingHorizontal: 8 }}
             />
-    </ScrollView>
+
+            <View style={styles.actionHeader}>
+              <Text style={styles.sectionTitle}>Quick Actions</Text>
+          
+            </View>
+          </>
+        }
+        contentContainerStyle={{ paddingBottom: 100 }}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            colors={[colors.primary]}
+            tintColor={colors.primary}
+          />
+        }
+      />
+
+      {alertAction && (
+        <CustomAlert
+          visible={alertVisible}
+          title={alertAction.title}
+          buttons={alertAction.buttons}
+          message={alertAction.message}
+          alertType={"error"}
+          onClose={() => setAlertVisible(false)}
+        />
+      )}
+    </AppView>
   );
 };
 
@@ -221,9 +252,7 @@ export default Home;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.white, // Set background to white
+    backgroundColor: colors.white,
-    marginBottom: 100,
-    padding:10
   },
   header: {
     flexDirection: "row",
@@ -233,25 +262,34 @@ const styles = StyleSheet.create({
     paddingTop: 24,
     paddingBottom: 16,
   },
-  greeting: {
+  greeting: { fontSize: 22, color: colors.textDark },
-    fontSize: 22,
+  sectionTitle: { fontSize: 20, fontWeight: "600", color: colors.textDark, flex: 1 },
-    color: colors.textDark,
+  actionHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginHorizontal: 20,
+    marginBottom: 10,
+    marginTop: 16
   },
-  userName: {
+  payAllButton: {
-    fontSize: 28,
+    paddingHorizontal: 14,
-    fontWeight: 'bold',
+    paddingVertical: 6,
-    color: colors.textDark,
+    backgroundColor: colors.primary,
+    borderRadius: 8,
   },
-  sectionTitle: {
+  payAllText: { color: "#fff", fontWeight: "bold", fontSize: 14 },
-    fontSize: 20,
+  badge: {
-    fontWeight: '600',
+    position: "absolute",
-    color: colors.textDark,
+    right: -6,
-    paddingHorizontal: 20,
+    top: -4,
-    marginBottom: 8,
+    backgroundColor: colors.danger,
-  },
+    borderRadius: 8,
-  cardWrapper: {
+    width: 16,
-    flex: 1,
+    height: 16,
-    // marginHorizontal: 8,
+    justifyContent: "center",
-    // backgroundColor:'red'
+    alignItems: "center",
+    zIndex: 1,
   },
+  badgeText: { color: colors.white, fontSize: 10, fontWeight: "bold" },
 });

src/screens/home/UserProfileStatus.tsx

@@ -1,4 +1,4 @@
-import React, { use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import {
   StyleSheet,
   Text,
@@ -7,54 +7,34 @@ import {
   Modal,
   ToastAndroid,
   Image,
-  Animated,
+  ScrollView,
+  ActivityIndicator,
 } from "react-native";
-import * as Keychain from "react-native-keychain";
+import { useNavigation } from "@react-navigation/native";
-import { useFocusEffect, useNavigation } from "@react-navigation/native";
-import { DASHBOARD_URL, PUT_USER_STATUS } from "../../utils/ApiUrls";
 import colors from "../../components/colors";
 import LinearGradient from "react-native-linear-gradient";
-import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
 import { apiCall } from "../../utils/ApiHelper";
+import { PAY_ALL_URL } from "../../utils/ApiUrls";
 
-export type ApiResponse = {
+type StatusData = {
-  message: string;
+  role?: string;
-  status: string;
+  organizerStatus?: string;
-  statusCode: number;
+  profileStatus?: boolean;
-  data: {
-    role: string;
-    organizerStatus: string;
-    profileStatus: boolean;
-  };
 };
 
-type DashboardResponse = {
+type DashboardData = {
-  message: string;
+  totalPaidAmountMonth?: number;
-  status: string;
+  multiplePayAmount?: number;
-  statusCode: number;
+  completeStatusMyGroupCount?: number;
-  data: {
+  activeStatusMyGroupCount?: number;
-    totalPaidAmountMonth: number;
+  createdGroupActiveCount?: number;
-    multiplePayAmount: number;
+  createdGroupCompleteCount?: number;
-    completeStatusMyGroupCount: number;
+  myCreatedGroups?: any[];
-    activeStatusMyGroupCount: number;
+  myJoinedGroups?: Array<any>;
-    myCreatedGroups: any[];
+  requestList?: any[];
-    myJoinedGroups: Array<{
+  myRequests?: Array<{ status: string }>;
-      groupId: string;
+  dueGroupDetails?: Array<{
-      groupName: string;
-      contributionAmount: number;
-      currentCycle: number;
-      createdDate: string;
-      status: string;
-    }>;
-    requestList: any[];
-    myRequests: Array<{
-      requestId: string;
-      groupName: string;
-      type: string;
-      status: string;
-      requestDate: string;
-    }>;
-    dueGroupDetails: Array<{
     groupId: string;
     groupName: string;
     baseAmount: number;
@@ -68,190 +48,209 @@ type DashboardResponse = {
     lateFeeValue: number;
     hasPaid: boolean;
   }>;
-  };
 };
 
 type UserProfileStatusProps = {
   profileImage?: { uri: string };
+  statusData: StatusData | null;
+  userDashboard: DashboardData | null;
 };
 
-const UserProfileStatus: React.FC<UserProfileStatusProps> = ({ profileImage }) => {
+const UserProfileStatus: React.FC<UserProfileStatusProps> = ({
+  profileImage,
+  statusData,
+  userDashboard,
+}) => {
   const navigation = useNavigation();
-  const [loading, setLoading] = useState(true);
-  const [statusData, setStatusData] = useState<ApiResponse["data"] | null>(null);
   const [showModal, setShowModal] = useState(false);
-  const [moreItem, setMoreItem] = useState(false);
-  const [userDashboard, setUserDashboard] = useState<DashboardResponse["data"] | null>(null);
 
-  // Animation refs to prevent re-creation on re-render
+  // Payment UI states
-  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const [showPayDialog, setShowPayDialog] = useState(false);
-  const scaleAnim = useRef(new Animated.Value(0.9)).current;
+  const [selectedGroupIds, setSelectedGroupIds] = useState<string[]>([]);
+  const [submitting, setSubmitting] = useState(false);
 
-  // Memoized icons list
+  // Preselect all due groups at mount and on change
-  const icons: IoniconsIconName[] = useMemo(
-    () => ["person", "people", "person-add", "create", "card", "checkmark-done"],
-    []
-  );
-
-  // Fetch user status
-  const userStatus = useCallback(async () => {
-    try {
-      const credentials = await Keychain.getGenericPassword();
-      if (!credentials) {
-        ToastAndroid.show("You are not logged in", ToastAndroid.SHORT);
-        return;
-      }
-
-      setLoading(true);
-      const token = credentials.password;
-
-      const response = await fetch(PUT_USER_STATUS, {
-        method: "GET",
-        headers: {
-          Accept: "*/*",
-          Authorization: `Bearer ${token}`,
-        },
-      });
-
-      const json: ApiResponse = await response.json();
-
-      console.log("profile json : ", json)
-      if (json.status === "success") {
-        setStatusData(json.data);
-        if (!json.data.profileStatus) setShowModal(true);
-      } else {
-        ToastAndroid.show("Failed to fetch status", ToastAndroid.SHORT);
-      }
-    } catch {
-      ToastAndroid.show("Something went wrong", ToastAndroid.SHORT);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useFocusEffect(
-    useCallback(() => {
-      userStatus();
-    }, [userStatus])
-  );
-
-  // Animation start
   useEffect(() => {
-    Animated.parallel([
+    if (userDashboard?.dueGroupDetails) {
-      Animated.timing(fadeAnim, { toValue: 1, duration: 600, useNativeDriver: true }),
+      setSelectedGroupIds(userDashboard.dueGroupDetails.map((g) => g.groupId));
-      Animated.timing(scaleAnim, { toValue: 1, duration: 600, useNativeDriver: true }),
+    }
-    ]).start();
+  }, [userDashboard?.dueGroupDetails]);
-  }, [fadeAnim, scaleAnim]);
 
-  const handleGoToProfile = useCallback(() => {
+  // Show profile completion modal only if profile is incomplete
-    setShowModal(false);
+  useEffect(() => {
-    navigation.navigate("Profile" as never);
+    if (statusData && !statusData.profileStatus) setShowModal(true);
-  }, [navigation]);
+  }, [statusData]);
 
-  const handlePress = useCallback((label: string) => {
+  // Top grid info items
-    ToastAndroid.show(`${label} clicked`, ToastAndroid.SHORT);
+  const infoItems = useMemo(
-  }, []);
+    () => [
+      { label: "Role", value: statusData?.role || "-" },
+      { label: "Active Groups", value: userDashboard?.activeStatusMyGroupCount?.toString() || "0" },
+      { label: "Joined Groups", value: userDashboard?.myJoinedGroups?.length?.toString() || "0" },
+      { label: "My Groups", value: userDashboard?.myCreatedGroups?.length?.toString() || "0" },
+      { label: "Total Due", value: `₹${userDashboard?.multiplePayAmount || 0}` },
+      { label: "Completed", value: userDashboard?.completeStatusMyGroupCount?.toString() || "0" },
+    ],
+    [userDashboard, statusData]
+  );
 
+  // Utility for info color
   const getValueColor = (value: string) => {
     if (value.includes("₹") || value === "Active" || value === "Yes ✅") return "#4CAF50";
     if (value === "Inactive" || value === "No ❌") return "#FF6B6B";
     return "#fff";
   };
 
-  // Dynamic info items based on dashboard data
+  // Dues and payment logic
-  const infoItems = useMemo(() => {
+  const dueGroups = userDashboard?.dueGroupDetails || [];
-    if (!userDashboard) {
+  const totalDue = dueGroups.reduce((sum, item) => sum + (item.totalDue || 0), 0);
-      return [
+  const totalDueSelected = useMemo(
-        { label: "Role", value: statusData?.role || "-" },
+    () =>
-        { label: "Active", value: "0" },
+      dueGroups
-        { label: "Joined", value: "0" },
+        .filter((g) => selectedGroupIds.includes(g.groupId))
-        { label: "Created", value: "0" },
+        .reduce((sum, item) => sum + (item.totalDue || 0), 0),
-        { label: "Due Pay", value: "₹0" },
+    [dueGroups, selectedGroupIds]
-        { label: "Completed", value: "0" },
+  );
-      ];
+
+  const handleToggleGroup = (groupId: string) => {
+    setSelectedGroupIds((prev) =>
+      prev.includes(groupId)
+        ? prev.filter((id) => id !== groupId)
+        : [...prev, groupId]
+    );
+  };
+
+  const handlePayAll = async () => {
+    if (selectedGroupIds.length === 0) {
+      ToastAndroid.show("Select at least one group", ToastAndroid.SHORT);
+      return;
     }
-
+    setSubmitting(true);
-    return [
-      { 
-        label: "Role", 
-        value: statusData?.role || "-" 
-      },
-      { 
-        label: "Active", 
-        value: userDashboard.activeStatusMyGroupCount.toString() 
-      },
-      { 
-        label: "Joined", 
-        value: userDashboard.myJoinedGroups.length.toString() 
-      },
-      { 
-        label: "Created", 
-        value: userDashboard.myCreatedGroups.length.toString() 
-      },
-      { 
-        label: "Due Pay", 
-        value: `₹${userDashboard.multiplePayAmount}` 
-      },
-      { 
-        label: "Completed", 
-        value: userDashboard.completeStatusMyGroupCount.toString() 
-      },
-    ];
-  }, [userDashboard, statusData]);
-
-  // Calculate total due amount
-  const getTotalDueAmount = useCallback(() => {
-    if (!userDashboard?.dueGroupDetails) return 0;
-    return userDashboard.dueGroupDetails.reduce((total, due) => total + due.totalDue, 0);
-  }, [userDashboard]);
-
-  // Calculate pending requests count
-  const getPendingRequestsCount = useCallback(() => {
-    if (!userDashboard?.myRequests) return 0;
-    return userDashboard.myRequests.filter(request => request.status === "PENDING").length;
-  }, [userDashboard]);
-
-  const getDashboardData = async () => {
     try {
-      const result = (await apiCall(DASHBOARD_URL, "GET")) as DashboardResponse;
+      const response = await apiCall(PAY_ALL_URL, 'POST',{ groupIds: selectedGroupIds, payAllDue: true }, undefined, "Payment failed. Try again.") as any;
-      console.log("DASHBOARD_URL-------", result)
+      console.log("-=-=-=-=-=-=-=-=-=-=-=",response)
-      if (result.status === "success") {
+      
-        setUserDashboard(result.data);
+      // const response = await fetch(
+      //   "https://api.godemo.in/FundCollect/api/payments/payments/bulk",
+      //   {
+      //     method: "POST",
+      //     headers: { "Content-Type": "application/json" },
+      //     body: JSON.stringify({ groupIds: selectedGroupIds, payAllDue: true }),
+      //   }
+      // );
+      if (response.status) {
+        ToastAndroid.show("Payment initiated!", ToastAndroid.LONG);
+        setShowPayDialog(false);
+      } else {
+        ToastAndroid.show("Payment failed. Try again.", ToastAndroid.SHORT);
       }
-    } catch (error) {
+    } catch {
-      console.error("❌ Error fetching dashboard data:", error);
+      ToastAndroid.show("Network error. Try again.", ToastAndroid.SHORT);
     }
+    setSubmitting(false);
   };
 
-  useEffect(() => {
+  // Bottom bar
-    getDashboardData();
+  const renderDueBar = () => (
-  }, []);
+    <View style={styles.dueBar}>
+      <Text style={styles.dueBarText}>
+        Total Due: <Text style={{ color: "#FFDE03", fontWeight: "bold" }}>₹{totalDue}</Text>
+      </Text>
+      <TouchableOpacity
+        style={styles.payAllButton}
+        onPress={() => setShowPayDialog(true)}
+        disabled={dueGroups.length === 0}
+        activeOpacity={0.8}
+      >
+        <Ionicons name="wallet-outline" size={20} color="#000000ff" />
+        <Text style={styles.payAllButtonText}>Pay All</Text>
+      </TouchableOpacity>
+    </View>
+  );
 
-  // Format currency
+  // Payment dialog modal
-  const formatCurrency = (amount: number) => {
+  const renderPayDialog = () => (
-    return `₹${amount.toLocaleString('en-IN')}`;
+    <Modal visible={showPayDialog} transparent animationType="fade" onRequestClose={() => setShowPayDialog(false)}>
-  };
+      <View style={styles.payModalOverlay}>
+        <LinearGradient
+          colors={[colors.white, colors.white]}
+          start={{ x: 0.2, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={styles.payModalBox}
+        >
+          <View style={styles.payDialogHeader}>
+            <Ionicons name="card-outline" color="#000000ff" size={22} />
+            <Text style={styles.payDialogTitle}>Select Groups to Pay</Text>
+            <TouchableOpacity onPress={() => setShowPayDialog(false)}>
+              <Ionicons name="close-circle" color="#000000ff" size={24} />
+            </TouchableOpacity>
+          </View>
+          <ScrollView 
+            style={{ maxHeight: 200, width: "100%" }}
+            contentContainerStyle={{ paddingVertical: 8, paddingHorizontal: 4 }}
+          >
+            {dueGroups.map((group) => (
+              <TouchableOpacity
+                key={group.groupId}
+                style={[
+                  styles.payGroupOption,
+                  selectedGroupIds.includes(group.groupId) && styles.payOptionSelected,
+                ]}
+                onPress={() => handleToggleGroup(group.groupId)}
+                activeOpacity={0.85}
+              >
+                <Ionicons
+                  name={selectedGroupIds.includes(group.groupId) ? "checkbox" : "square-outline"}
+                  size={22}
+                  color={selectedGroupIds.includes(group.groupId) ? colors.primary : "#000000ff"}
+                />
+                <View style={{ flex: 1 }}>
+                  <Text style={[styles.payGroupName, { color: "#000000ff" }]}>{group.groupName}</Text>
+                  <Text style={styles.payDueText}>
+                    ₹{group.baseAmount}
+                    {group.lateFee > 0 ? ` (Late: ₹${group.lateFee})` : ""}
+                  </Text>
+                </View>
+                <Text style={[styles.payAmount, { color: "#4CAF50" }]}>₹{group.totalDue}</Text>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+          <View style={styles.payDialogFooter}>
+            <Text style={styles.payDialogTotal}>
+              Total: <Text style={{ fontWeight: "bold", color: "#ff5f03ff" }}>₹{totalDueSelected}</Text>
+            </Text>
+            <TouchableOpacity
+              style={[styles.payConfirmButton, { opacity: submitting ? 0.7 : 1 }]}
+              onPress={handlePayAll}
+              disabled={submitting || selectedGroupIds.length === 0}
+              activeOpacity={0.8}
+            >
+              {submitting ? (
+                <ActivityIndicator color="#fff" />
+              ) : (
+                <>
+                  <Ionicons name="checkmark-circle" size={22} color="#ffffffff" />
+                  <Text style={styles.payButtonText}>Pay Selected</Text>
+                </>
+              )}
+            </TouchableOpacity>
+          </View>
+        </LinearGradient>
+      </View>
+    </Modal>
+  );
 
   return (
-    <Animated.View style={[styles.container, { opacity: fadeAnim, transform: [{ scale: scaleAnim }] }]}>
+    <View style={styles.container}>
-      {/* Decorative Background */}
-      <View style={styles.backgroundGraphics}>
-        {["circle1", "circle2", "circle3"].map((c, i) => (
-          <View key={i} style={[styles.floatingCircle, styles[c as keyof typeof styles]]} />
-        ))}
-      </View>
-
       <LinearGradient
         colors={[colors.primary, colors.pastelPink]}
         start={{ x: 0, y: 0 }}
         end={{ x: 1, y: 1 }}
         style={styles.card}
       >
-        {/* Header */}
         <View style={styles.headerSection}>
-          <View style={styles.headerContent}>
           <View style={styles.titleWithIcon}>
-              <Ionicons name="stats-chart" size={22} color="#fff" style={styles.headerIcon} />
+            <Ionicons name="stats-chart" size={24} color="#fff" style={styles.headerIcon} />
             <Text style={styles.header}>Profile Overview</Text>
           </View>
           <View style={styles.statusBadge}>
@@ -261,128 +260,73 @@ const UserProfileStatus: React.FC<UserProfileStatusProps> = ({ profileImage }) =
             </Text>
           </View>
         </View>
-        </View>
 
-        {/* Content Section */}
         <View style={styles.contentSection}>
-          {/* LEFT SIDE */}
           <View style={styles.leftSection}>
             <View style={styles.infoGrid}>
-              {infoItems.map((item, index) => (
+              {infoItems.map((item, idx) => (
-                <TouchableOpacity
+                <View key={item.label} style={styles.infoCard}>
-                  key={item.label}
-                  style={styles.infoCard}
-                  onPress={() => handlePress(item.label)}
-                >
                   <View style={styles.infoCardHeader}>
                     <View style={styles.iconContainer}>
-                      <Ionicons name={icons[index]} size={16} color={colors.primary} />
+                      <Ionicons name="information-circle-outline" size={16} color={colors.primary} />
                     </View>
-                    <Text style={styles.infoLabel}>{item.label}</Text>
+                    <Text style={styles.infoLabel} >
+                      {item.label}
+                    </Text>
                   </View>
-                  <Text style={[styles.infoValue, { color: getValueColor(item.value) }]}>
+                  <Text style={[styles.infoValue, { color: getValueColor(item.value) }]} numberOfLines={1}>
                     {item.value}
                   </Text>
-                </TouchableOpacity>
+                </View>
               ))}
             </View>
           </View>
-          {/* RIGHT SIDE */}
+
           <View style={styles.profileSection}>
-            <TouchableOpacity onPress={() => navigation.navigate("Profile" as never)} activeOpacity={0.8}>
+            <TouchableOpacity
-              <LinearGradient
+              onPress={() => navigation.navigate("Profile" as never)}
-                colors={["rgba(255,255,255,0.2)", "rgba(255,255,255,0.1)"]}
+              activeOpacity={0.8}
-                style={styles.profileContainer}
             >
+              <View style={styles.profileContainer}>
                 {profileImage ? (
                   <Image source={{ uri: profileImage.uri }} style={styles.avatar} />
                 ) : (
                   <View style={styles.avatarPlaceholder}>
-                    <Ionicons name="person" size={40} color="#fff" />
+                    <Ionicons name="person" size={45} color="#fff" />
                   </View>
                 )}
                 <View style={styles.profileBadge}>
-                  <Ionicons name="camera" size={16} color={colors.primary} />
+                  <Ionicons name="camera" size={18} color={colors.primary} />
+                </View>
               </View>
-                <Text style={styles.viewProfileText}>View Profile</Text>
-              </LinearGradient>
-            </TouchableOpacity>
-
-            <TouchableOpacity style={[styles.profileContainer, {marginVertical:15}]} onPress={() => setMoreItem(!moreItem)}>
-              <Ionicons name={moreItem ? "arrow-up" : "arrow-down"} color="#fff" size={22} />
             </TouchableOpacity>
           </View>
         </View>
-        
+        {renderDueBar()}
-        {moreItem && (
-          <>
-            <View style={styles.statusOverview}>
-              <View style={styles.statusHeader}>
-                <Ionicons name="information-circle" size={20} color="#fff" />
-                <Text style={styles.statusOverviewTitle}>Status Overview</Text>
-              </View>
-
-              <View style={styles.statusItems}>
-                <Text style={styles.statusItemText}>
-                  Organizer: {statusData?.organizerStatus || "-"}
-                </Text>
-                <Text style={styles.statusItemText}>
-                  Profile: {statusData?.profileStatus ? "Complete ✅" : "Incomplete ❌"}
-                </Text>
-                <Text style={styles.statusItemText}>
-                  Pending Requests: {getPendingRequestsCount()}
-                </Text>
-                <Text style={styles.statusItemText}>
-                  Total Due: {formatCurrency(getTotalDueAmount())}
-                </Text>
-                {userDashboard?.dueGroupDetails?.map((due, index) => (
-                  <Text key={index} style={[styles.statusItemText, { fontSize: 12, opacity: 0.8 }]}>
-                    • {due.groupName}: {formatCurrency(due.totalDue)} (Due: {due.dueDate})
-                  </Text>
-                ))}
-              </View>
-            </View>
-
-            <View style={styles.progressSection}>
-              <View style={styles.progressHeader}>
-                <Text style={styles.progressText}>Profile Completion</Text>
-                <Text style={styles.progressPercent}>
-                  {statusData?.profileStatus ? "100%" : "60%"}
-                </Text>
-              </View>
-              <View style={styles.progressBar}>
-                <Animated.View
-                  style={[
-                    styles.progressFill,
-                    {
-                      width: statusData?.profileStatus ? "100%" : "60%",
-                      backgroundColor: statusData?.profileStatus ? "#4CAF50" : "#FFA500",
-                    },
-                  ]}
-                />
-              </View>
-            </View>
-          </>
-        )}
       </LinearGradient>
 
-      {/* Modal */}
+      {renderPayDialog()}
+
       {showModal && (
         <Modal visible transparent animationType="fade">
           <View style={styles.modalOverlay}>
-            <Animated.View style={[styles.modalBox, { opacity: fadeAnim, transform: [{ scale: scaleAnim }] }]}>
+            <View style={styles.modalBox}>
               <Ionicons name="alert-circle" size={60} color={colors.primary} />
               <Text style={styles.modalTitle}>Complete Your Profile</Text>
               <Text style={styles.modalText}>
                 Your profile is incomplete. Update your details to unlock all features.
               </Text>
-
               <View style={styles.modalButtons}>
-                <TouchableOpacity style={[styles.button, styles.primaryButton]} onPress={handleGoToProfile}>
+                <TouchableOpacity 
+                  style={[styles.button, styles.primaryButton]} 
+                  onPress={() => {
+                    setShowModal(false);
+                    navigation.navigate("Profile" as never);
+                  }}
+                >
                   <Ionicons name="person" size={18} color="#fff" />
                   <Text style={styles.buttonText}>Complete Profile</Text>
                 </TouchableOpacity>
-
                 <TouchableOpacity 
                   style={[styles.button, styles.secondaryButton]} 
                   onPress={() => setShowModal(false)}
@@ -391,11 +335,11 @@ const UserProfileStatus: React.FC<UserProfileStatusProps> = ({ profileImage }) =
                   <Text style={[styles.buttonText, styles.secondaryText]}>Remind Later</Text>
                 </TouchableOpacity>
               </View>
-            </Animated.View>
+            </View>
           </View>
         </Modal>
       )}
-    </Animated.View>
+    </View>
   );
 };
 
@@ -403,66 +347,37 @@ export default UserProfileStatus;
 
 const styles = StyleSheet.create({
   container: {
-    // margin: 16,
+    marginHorizontal: 8,
-  },
+    marginBottom: 16,
-  backgroundGraphics: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    zIndex: -1,
-  },
-  floatingCircle: {
-    position: 'absolute',
-    borderRadius: 50,
-    backgroundColor: 'rgba(255,255,255,0.1)',
-  },
-  circle1: {
-    width: 80,
-    height: 80,
-    top: -20,
-    left: -20,
-  },
-  circle2: {
-    width: 60,
-    height: 60,
-    bottom: -10,
-    right: -10,
-  },
-  circle3: {
-    width: 40,
-    height: 40,
-    top: '40%',
-    right: '10%',
   },
   card: {
     borderRadius: 24,
-    padding: 20,
+    overflow: "hidden",
     elevation: 8,
     shadowColor: "#000",
     shadowOpacity: 0.3,
     shadowRadius: 10,
     shadowOffset: { width: 0, height: 4 },
-    overflow: 'hidden',
   },
   headerSection: {
-    marginBottom: 16,
-  },
-  headerContent: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
+    paddingTop: 16,
+    paddingHorizontal: 18,
+    marginBottom: 16,
   },
   titleWithIcon: { 
     flexDirection: 'row', 
-    alignItems: 'center',
+    alignItems: 'center' 
   },
   headerIcon: { 
-    marginRight: 8,
+    marginRight: 8 
   },
   header: { 
-    fontSize: 22,
+    fontSize: 20, 
     fontWeight: "700", 
-    color: "#fff",
+    color: "#fff" 
   },
   statusBadge: {
     flexDirection: 'row',
@@ -474,90 +389,68 @@ const styles = StyleSheet.create({
   },
   statusBadgeText: { 
     color: "#fff", 
-    fontSize: 12,
+    fontSize: 13, 
     fontWeight: '600', 
-    marginLeft: 4,
+    marginLeft: 4 
   },
   contentSection: { 
     flexDirection: 'row', 
-    justifyContent: 'space-between',
+    alignItems: 'flex-start', 
+    paddingHorizontal: 16,
+    paddingBottom: 16,
   },
   leftSection: { 
     flex: 1, 
-    marginRight: 16,
+    marginRight: 16 
   },
   infoGrid: { 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
-    justifyContent: 'space-between',
+    gap: 10 
   },
   infoCard: {
-    width: '48%',
     backgroundColor: 'rgba(255,255,255,0.15)',
-    borderRadius: 12,
+    borderRadius: 14,
-    padding: 5,
+    padding: 12,
-    marginBottom: 8,
     borderWidth: 1,
     borderColor: 'rgba(255,255,255,0.2)',
+    flex: 1,
+    minWidth: '45%',
+    marginBottom: 8,
   },
   infoCardHeader: { 
     flexDirection: 'row', 
     alignItems: 'center', 
-    marginBottom: 6,
+    marginBottom: 6 
   },
   iconContainer: {
-    width: 24,
+    width: 28,
-    height: 24,
+    height: 28,
     backgroundColor: '#fff',
-    borderRadius: 6,
+    borderRadius: 8,
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: 6,
+    marginRight: 8,
   },
   infoLabel: {
-    color: "rgba(255,255,255,0.8)",
+    color: "rgba(255,255,255,0.9)",
     fontSize: 12,
     fontWeight: '500',
+    flexShrink: 1,
   },
   infoValue: { 
     fontWeight: "700", 
     fontSize: 16, 
-  },
+    textAlign: 'left',
-  statusOverview: {
+    color: "#fff"
-    backgroundColor: 'rgba(255,255,255,0.15)',
-    padding: 16,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.2)',
-    marginTop: 16,
-  },
-  statusHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  statusOverviewTitle: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: '600',
-    marginLeft: 6,
-  },
-  statusItems: {
-    gap: 8,
-  },
-  statusItemText: {
-    color: "#fff",
-    fontSize: 14,
   },
   profileSection: {
+    width: 90,
     alignItems: 'center',
+    justifyContent: 'center',
   },
   profileContainer: { 
-    alignItems: 'center',
+    alignItems: 'center' 
-    padding: 16,
-    borderRadius: 20,
-    borderWidth: 2,
-    borderColor: 'rgba(255,255,255,0.3)',
   },
   avatar: {
     width: 80,
@@ -578,52 +471,134 @@ const styles = StyleSheet.create({
   },
   profileBadge: {
     position: 'absolute',
-    top: 12,
+    bottom: 0,
-    right: 12,
+    right: 0,
-    width: 24,
+    width: 26,
-    height: 24,
+    height: 26,
     backgroundColor: '#fff',
-    borderRadius: 12,
+    borderRadius: 13,
     justifyContent: 'center',
     alignItems: 'center',
   },
-  viewProfileText: {
+  dueBar: {
-    color: "#fff",
+    flexDirection: "row",
-    fontSize: 12,
+    justifyContent: "space-between",
-    fontWeight: '600',
+    alignItems: "center",
-    marginTop: 8,
+    padding: 16,
-  },
-  progressSection: {
-    marginTop: 16,
-    paddingTop: 16,
     borderTopWidth: 1,
-    borderTopColor: 'rgba(255,255,255,0.3)',
+    borderColor: "rgba(255,255,255,0.15)",
+    backgroundColor: "rgba(0,0,0,0.15)",
   },
-  progressHeader: {
+  dueBarText: { 
-    flexDirection: 'row',
+    color: "#fff", 
-    justifyContent: 'space-between',
+    fontSize: 16, 
-    alignItems: 'center',
+    fontWeight: "600" 
+  },
+  payAllButton: {
+    backgroundColor: "#ffffffff",
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 20,
+    gap: 6,
+  },
+  payAllButtonText: { 
+    color: "#000000ff", 
+    fontWeight: "bold", 
+    fontSize: 16 
+  },
+  payModalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.3)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  payModalBox: {
+    width: "92%",
+    borderRadius: 24,
+    overflow: "hidden",
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOpacity: 0.15,
+    shadowRadius: 24,
+    elevation: 12,
+  },
+  payDialogHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    justifyContent: "space-between",
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+    borderBottomWidth: 1,
+    borderColor: "rgba(255,255,255,0.1)",
+  },
+  payDialogTitle: { 
+    color: "#000000ff", 
+    fontSize: 18, 
+    fontWeight: "700" 
+  },
+  payGroupOption: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+   borderColor: colors.primary,
+    borderWidth: 1,
+    borderRadius: 12,
     marginBottom: 8,
   },
-  progressText: {
+  payOptionSelected: {
-    color: "#fff",
+    backgroundColor: "rgba(166, 49, 255, 0.2)",
-    fontSize: 14,
+    borderColor: colors.primary,
-    fontWeight: '600',
+    borderWidth: 1,
   },
-  progressPercent: {
+  payGroupName: { 
-    color: "#fff",
+    color: "#000000ff", 
-    fontSize: 14,
+    fontWeight: "700", 
-    fontWeight: '700',
+    fontSize: 16 
   },
-  progressBar: {
+  payDueText: { 
-    height: 6,
+    color: "rgba(0, 0, 0, 0.8)", 
-    backgroundColor: 'rgba(255,255,255,0.3)',
+    fontSize: 13, 
-    borderRadius: 3,
+    marginTop: 2 
-    overflow: 'hidden',
   },
-  progressFill: {
+  payAmount: { 
-    height: '100%',
+    fontWeight: "bold", 
-    borderRadius: 3,
+    fontSize: 16, 
+    color: "#4CAF50" 
+  },
+  payDialogFooter: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    justifyContent: "space-between",
+    paddingVertical: 16,
+    paddingHorizontal: 18,
+  },
+  payDialogTotal: { 
+    color: "#000000ff", 
+    fontWeight: "600", 
+    fontSize: 17 
+  },
+  payConfirmButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: colors.primary,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 20,
+    elevation: 4,
+    borderColor:colors.primary,
+    borderWidth:1,
+    gap: 8,
+  },
+  payButtonText: { 
+    color: "#ffffffff", 
+    fontWeight: "bold", 
+    fontSize: 16 
   },
   modalOverlay: {
     flex: 1,
@@ -638,10 +613,6 @@ const styles = StyleSheet.create({
     padding: 24,
     alignItems: "center",
     elevation: 12,
-    shadowColor: "#000",
-    shadowOpacity: 0.3,
-    shadowRadius: 15,
-    shadowOffset: { width: 0, height: 6 },
   },
   modalTitle: {
     fontSize: 22,
@@ -659,14 +630,13 @@ const styles = StyleSheet.create({
   },
   modalButtons: {
     width: '100%',
-    gap: 8,
+    gap: 10,
   },
   button: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: 12,
+    paddingVertical: 14,
-    paddingHorizontal: 24,
     borderRadius: 12,
     gap: 8,
   },
@@ -681,7 +651,7 @@ const styles = StyleSheet.create({
   buttonText: {
     color: "#fff",
     fontWeight: "600",
-    fontSize: 14,
+    fontSize: 16,
   },
   secondaryText: {
     color: "#666",

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

@@ -1,256 +1,3 @@
-// import React, { useEffect, useState } from "react";
-// import {
-//     StyleSheet,
-//     Text,
-//     View,
-//     FlatList,
-//     TouchableOpacity,
-//     Alert,
-//     RefreshControl,
-//     ScrollView,
-//     Button,
-//     ToastAndroid,
-// } from "react-native";
-// import { useNavigation } from "@react-navigation/native";
-// import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
-// import type { RootStackParamList } from "../../../navigation/AppNavigator";
-// import colors from "../../../components/colors";
-// import { Ionicons } from "@react-native-vector-icons/ionicons";
-// import { GET_JOINED_GROUP_URL } from "../../../utils/ApiUrls";
-// import * as Keychain from "react-native-keychain";
-// import AnimatedCard from "../../../components/common/AnimatedCard";
-
-// type NavigationProp = NativeStackNavigationProp<
-//     RootStackParamList,
-//     "GroupDetails"
-// >;
-
-// type Group = {
-//     id: string;
-//     groupName: string;
-//     description: string;
-//     currentParticipants: number;
-//     maxParticipants: number;
-//     contributionAmount: number;
-//     status: string;
-// };
-
-// const UserHome = () => {
-//     const navigation = useNavigation<NavigationProp>();
-//     const [groups, setGroups] = useState<Group[]>([]);
-//     const [loading, setLoading] = useState<boolean>(false)
-//     const [refreshing, setRefreshing] = useState<boolean>(false)
-
-
-//     const activeGroups = groups.filter((g) => g.status === "ACTIVE");
-
-//     const totalGroups = activeGroups.length;
-
-//     const totalContribution = activeGroups.reduce(
-//         (sum, g) => sum + g.contributionAmount,
-//         0
-//     );
-
-//     const onRefresh = async () => {
-//         setRefreshing(true)
-//         await handleGroup()
-//         setRefreshing(false)
-//     }
-
-//     const handleGroup = async () => {
-//         try {
-//             setLoading(true)
-//             const credentials = await Keychain.getGenericPassword();
-//             if (!credentials) {
-//                 ToastAndroid.show('You are not logged in', ToastAndroid.SHORT);
-//                 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 {
-//                 ToastAndroid.show("Failed to fetch groups", ToastAndroid.SHORT);
-//                 setLoading(false)
-//             }
-//         } catch (error) {
-//             console.error("❌ Error fetching groups:", error);
-//         } finally {
-//             setLoading(false)
-//         }
-//     };
-
-//     useEffect(() => {
-//         handleGroup();
-//     }, []);
-
-//     const renderItem = ({ item }: { item: Group }) => {
-//         return (
-//             <TouchableOpacity
-//                 style={styles.card}
-//                 onPress={() => navigation.navigate("GroupDetails", { item })}
-//             >
-//                 <Text style={styles.groupName}>{item.groupName}</Text>
-//                 <Text style={styles.description} numberOfLines={1}>{item.description}</Text>
-//                 <View style={styles.statsRow}>
-//                     <Ionicons
-//                         name="person-circle-outline"
-//                         size={20}
-//                         color={colors.primary}
-//                     />
-//                     <Text style={styles.detail}>
-//                         {item.currentParticipants}/{item.maxParticipants} members
-//                     </Text>
-//                 </View>
-
-//                 <Text style={styles.amount}>
-//                     Contribution: ₹{item.contributionAmount}
-//                 </Text>
-//                 <Text style={styles.status}>Status: {item.status}</Text>
-//             </TouchableOpacity>
-//         );
-//     };
-
-//     return (
-//         <ScrollView>
-//             {/* Stats */}
-
-//             {/* <Button title="Transaction List" onPress={()=>navigation.navigate('TransactionList')}/> */}
-//             <AnimatedCard
-//                 onPress={() => navigation.navigate("TransactionList")}
-//                 title={"transaction list"} iconName="calculator-outline"
-//                 subtitle="View your transaction history"
-//                 backOne={colors.Home}
-//                 backTwo={colors.pastelPink}
-//             />
-//             <AnimatedCard
-//                 onPress={() => navigation.navigate("Management" as never)}
-//                 title={"Group Management"}
-//                 iconName="person-outline"
-//                 subtitle="Manage your joined  &  requested groups"
-//                 backOne={colors.Settings}
-//                 backTwo={colors.pastelOrange}
-//             />
-
-//             <View style={[styles.statsRow, { marginTop: 12 }]}>
-//                 <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}>₹{totalContribution}</Text>
-//                     <Text style={styles.statLabel}>Cycle Contribution</Text>
-//                 </View>
-//             </View>
-
-
-//             {/* Groups List */}
-//             <Text style={styles.sectionTitle}>Your Groups</Text>
-//             <FlatList
-//                 data={groups.filter((status) => status.status === "ACTIVE")}
-//                 keyExtractor={(item) => item.id}
-//                 renderItem={renderItem}
-//                 contentContainerStyle={{ paddingBottom: 20 }}
-//                 onRefresh={onRefresh}
-//                 refreshing={refreshing}
-//             />
-//         </ScrollView>
-//     );
-// };
-
-// export default UserHome;
-
-// const styles = StyleSheet.create({
-//     statsRow: {
-//         flexDirection: "row",
-//         gap: 10,
-//     },
-//     statBox: {
-//         flex: 1,
-//         backgroundColor: "#fff",
-//         padding: 16,
-//         borderRadius: 12,
-//         alignItems: "center",
-//         shadowColor: "#000",
-//         shadowOpacity: 0.05,
-//         shadowOffset: { width: 0, height: 2 },
-//         shadowRadius: 6,
-//         elevation: 2,
-//         borderWidth:1,
-//         borderColor:colors.Home
-//     },
-//     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,
-//         marginTop:15
-//     },
-//     card: {
-//         backgroundColor: "#ffffff",
-//         padding: 16,
-//         marginBottom: 12,
-//         borderRadius: 12,
-//         shadowColor: "#000",
-//         shadowOpacity: 0.05,
-//         shadowOffset: { width: 0, height: 2 },
-//         shadowRadius: 6,
-//         elevation: 2,
-//         borderLeftWidth: 5,
-//         borderColor: colors.Home
-//     },
-//     groupName: {
-//         fontSize: 16,
-//         fontWeight: "600",
-//         color: colors.Home,
-//         marginBottom: 4,
-//     },
-//     description: {
-//         fontSize: 13,
-//         color: "#475569",
-//         marginBottom: 8,
-//     },
-//     detail: {
-//         fontSize: 13,
-//         color: "#475569",
-//         marginBottom: 8,
-//     },
-//     amount: {
-//         fontSize: 13,
-//         color: "#64748b",
-//         marginTop: 4,
-//     },
-//     status: {
-//         fontSize: 12,
-//         fontWeight: "500",
-//         color: colors.primary,
-//         marginTop: 2,
-//     },
-// });
-
-
-
 import { StyleSheet, Text, View } from 'react-native'
 import React from 'react'
 

src/screens/management/EditGroupScreen.tsx

@@ -863,7 +863,7 @@ const styles = StyleSheet.create({
   infoValue: { fontSize: 16, fontWeight: "600", color: "#111827", textTransform: "capitalize" },
   input: { backgroundColor: "#F9FAFB", borderWidth: 1, borderColor: "#D1D5DB", borderRadius: 10, padding: 14, fontSize: 16, color: "#111827" },
   textArea: { height: 100, textAlignVertical: "top" },
-  picker: { backgroundColor: "#F9FAFB", borderWidth: 1, borderColor: "#D1D5DB", borderRadius: 10 },
+  picker: { backgroundColor: "#F9FAFB", borderWidth: 1, borderColor: "#D1D5DB", borderRadius: 10 ,color:colors.black},
   participantRow: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: "#F3F4F6" },
   participantName: { fontSize: 16, fontWeight: "600", color: "#111827" },
   participantMobile: { fontSize: 14, color: "#6B7280", marginTop: 4 },

src/screens/profile/Profile.tsx

@@ -23,7 +23,7 @@ import colors from "../../components/colors";
 import SwitchNavigator from "./SwitchNavigator";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import { ApiResponse } from "../home/UserProfileStatus";
-import { BASE_URL, PUT_USER_PROFILE, PUT_USER_PROFILE_IMG, PUT_USER_STATUS } from "../../utils/ApiUrls";
+import { BASE_URL, PUT_USER_PROFILE, PUT_USER_PROFILE_IMG, USER_STATUS } from "../../utils/ApiUrls";
 import AppView from "../../components/AppView";
 import { useDispatch } from "react-redux";
 import { clearUser, setUserData } from "../../redux/userSlice";
@@ -265,7 +265,7 @@ const Profile = () => {
 
       setLoading(true);
       setError(null);
-      const response = await fetch(PUT_USER_STATUS, {
+      const response = await fetch(USER_STATUS, {
         method: "GET",
         headers: {
           Accept: "*/*",

src/utils/ApiUrls.tsx

@@ -15,7 +15,7 @@ export const DECLINE_REQUEST_URL = `${BASE_URL}fund/user/my/groups`
 export const GET_JOINED_GROUP_URL = `${BASE_URL}fund/my/join/groups`
 export const PUT_USER_PROFILE_IMG = `${BASE_URL}user/update/userImg`
 export const PUT_USER_PROFILE = `${BASE_URL}user/profile/update`
-export const PUT_USER_STATUS = `${BASE_URL}user/profile/status`
+export const USER_STATUS = `${BASE_URL}user/profile/status`
 export const USER_REQUEST = `${BASE_URL}fund/my-requests`
 export const GROUP_ALL_MEMBER = `${BASE_URL}fund/group/all/member`
 export const UPDATE_BANK_URL = `${BASE_URL}user/bank/update`;
@@ -25,3 +25,4 @@ export const UPLOAD_GROUP_IMAGE = `${BASE_URL}fund/groups/`;
 export const STORE_FCM_TOKEN = `${BASE_URL}token/store?fcmToken=`
 export const REMOVE_FCM_TOKEN = `${BASE_URL}token/remove?fcmToken=`
 export const DASHBOARD_URL = `${BASE_URL}fund/dashboard`
+export const PAY_ALL_URL =  `${BASE_URL}payments/payments/bulk`