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;
@@ -34,37 +36,55 @@ const formatDate = (dateArray: [number, number, number] | null): string => {
 };
 
 const getStatusStyle = (status: JoinedGroup['status']) => {
-    switch (status) {
+  switch (status) {
-        case 'ACTIVE':
+    case 'ACTIVE':
-            return {
+      return {
-                backgroundColor: '#D1FAE5',
+        backgroundColor: '#D1FAE5',
-                textColor: '#065F46',
+        textColor: '#065F46',
-            };
+      };
-        case 'PENDING':
+    case 'PENDING':
-            return {
+      return {
-                backgroundColor: '#FEF3C7',
+        backgroundColor: '#FEF3C7',
-                textColor: '#92400E',
+        textColor: '#92400E',
-            };
+      };
-        case 'COMPLETED':
+    case 'COMPLETED':
-            return {
+      return {
-                backgroundColor: '#E5E7EB',
+        backgroundColor: '#E5E7EB',
-                textColor: '#4B5563',
+        textColor: '#4B5563',
-            };
+      };
-        default:
+    default:
-            return {
+      return {
-                backgroundColor: '#E5E7EB',
+        backgroundColor: '#E5E7EB',
-                textColor: '#4B5563',
+        textColor: '#4B5563',
-            };
+      };
-    }
+  }
 };
 
-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>
@@ -87,7 +107,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, o
       {/* Footer with Dates & Buttons */}
       <View style={styles.footer}>
         <Text style={styles.dateText}>
-            {formatDate(item.startDate)} - {formatDate(item.endDate)}
+          {formatDate(item.startDate)} - {formatDate(item.endDate)}
         </Text>
         {/* Add Pay / Paid button here */}
         {hasPaid ? (
@@ -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 }}
+          <Text style={styles.title}>{title}</Text>
-          end={{ x: 1, y: 1 }}
+          {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
-          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,117 +44,123 @@ 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);
+        }
+
+  const fetchUserProfile = async () => {
+    try {
+      const result = (await apiCall(PROFILE_URL, "GET")) as any;
+      console.log("profile data", result);
+      if (result.status === "success") {
+        setApiUser(result.data);
+        dispatch(setUserData({ ...result.data, profileStatus: true }));
+      }
+    } catch (error) {
+      console.error("❌ Error fetching profile:", error);
+    }
+  };
+
+  const fetchData = useCallback(async () => {
+    await Promise.all([fetchUserProfile(), getDashboardData(), getUserStatus()]);
+  }, []);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await fetchData();
+    setRefreshing(false);
+  }, [fetchData]);
 
   useEffect(() => {
-    const fetchUserProfile = async () => {
+    const unsubscribe = navigation.addListener("focus", fetchData);
-      try {
+    fetchData();
-        const result = await apiCall(PROFILE_URL, "GET") as any;
-        console.log(PROFILE_URL, result)
-        if (result.status === "success") {
-          setApiUser(result.data);
-          dispatch(setUserData({ ...result.data, profileStatus: true }));
-        }
-      } catch (error) {
-        console.error("❌ Error fetching profile:", error);
-      }
-    };
-    const unsubscribe = navigation.addListener('focus', fetchUserProfile);
-    fetchUserProfile();
     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,55 +169,81 @@ const Home: React.FC = () => {
   const unreadCount = notifications.filter((item: any) => !item.read).length;
 
   const renderGridItem: ListRenderItem<ActionItem> = ({ item }) => (
-    <View style={styles.cardWrapper}>
+    <AnimatedCard
-      <AnimatedCard
+      key={item.id}
-        key={item.id}
+      title={item.title}
-        title={item.title}
+      subtitle={item.subtitle}
-        subtitle={item.subtitle}
+      iconName={item.iconName}
-        iconName={item.iconName}
+      backOne={item.backOne}
-        backOne={item.backOne}
+      backTwo={item.backTwo}
-        backTwo={item.backTwo}
+      onPress={() => handleActionPress(item)}
-        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}>
-      <View style={styles.header}>
-        <View>
-          <Text style={styles.greeting}>Hello,</Text>
-          <Text style={styles.userName}>{user.firstName || apiUser?.firstName || 'User'}</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>
-          <Ionicons name="notifications-outline" size={30} color={colors.textDark} />
-        </TouchableOpacity>
-      </View>
-
-      <UserProfileStatus profileImage={getProfileImageUri()} />
-
-      <View style={{ justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center', marginTop: 20, marginBottom: 10 }}>
-        <Text style={styles.sectionTitle}>Quick Actions</Text>
-        <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}
+        numColumns={2}
         renderItem={renderGridItem}
         keyExtractor={(item) => item.id}
-        numColumns={2}
+        ListHeaderComponent={
-        contentContainerStyle={{ paddingHorizontal: 8 }}
+          <>
+            <View style={styles.header}>
+              <View>
+                <Text style={styles.greeting}>
+                  Hello, <Text style={{ fontWeight: 'bold' }}>{user.firstName || apiUser?.firstName || "User"}</Text>
+                </Text>
+              </View>
+              <TouchableOpacity onPress={() => navigation.navigate("Notification" as never)}>
+                {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()}
+              statusData={statusData}
+              userDashboard={userDashboard}
+            />
+
+            <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}
+          />
+        }
       />
-    </ScrollView>
+
+      {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/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`