CircleCollect/circle-collect
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pay indivisual

Browse Source
This commit is contained in:
Jaanu423
2025-10-27 15:00:59 +05:30
parent 459573bb9f c00c4aa519
commit e34b6fd165
9 changed files with 677 additions and 1002 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JoinedGroupCard.tsx
+55 -35
View File
@@ -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) {
case 'ACTIVE':
return {
backgroundColor: '#D1FAE5',
textColor: '#065F46',
};
case 'PENDING':
return {
backgroundColor: '#FEF3C7',
textColor: '#92400E',
};
case 'COMPLETED':
return {
backgroundColor: '#E5E7EB',
textColor: '#4B5563',
};
default:
return {
backgroundColor: '#E5E7EB',
textColor: '#4B5563',
};
}
switch (status) {
case 'ACTIVE':
return {
backgroundColor: '#D1FAE5',
textColor: '#065F46',
};
case 'PENDING':
return {
backgroundColor: '#FEF3C7',
textColor: '#92400E',
};
case 'COMPLETED':
return {
backgroundColor: '#E5E7EB',
textColor: '#4B5563',
};
default:
return {
backgroundColor: '#E5E7EB',
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,
paddingHorizontal:10,
backgroundColor:colors.white,
padding: 5,
paddingHorizontal: 10,
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
+23 -124
View File
@@ -1,86 +1,41 @@
import React, { useRef } from "react";
import {
View,
Text,
StyleSheet,
TouchableWithoutFeedback,
Animated,
ViewStyle,
StyleProp,
} from "react-native";
import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback } from "react-native";
import LinearGradient from "react-native-linear-gradient";
import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
import colors from "../colors"; // Assuming your pastel colors are defined here
import { Ionicons } from "@react-native-vector-icons/ionicons";
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
backTwo = colors.primary,
style,
backOne = colors.primary,
backTwo = colors.pastelPink,
}) => {
const scale = useRef(new Animated.Value(1)).current;
const handlePressIn = () => {
Animated.spring(scale, {
toValue: 0.96,
useNativeDriver: true,
friction: 4,
}).start();
};
const handlePressOut = () => {
Animated.spring(scale, {
toValue: 1,
useNativeDriver: true,
friction: 4,
}).start(() => {
if (onPress) {
onPress();
}
});
const handlePress = () => {
Animated.sequence([
Animated.spring(scale, { toValue: 0.95, useNativeDriver: true }),
]).start(() => onPress && onPress());
};
return (
<TouchableWithoutFeedback onPressIn={handlePressIn} onPressOut={handlePressOut}>
<Animated.View style={[styles.card, style, { transform: [{ scale }] }]}>
<LinearGradient
colors={[backOne, backTwo]}
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>
<TouchableWithoutFeedback onPress={handlePress}>
<Animated.View style={[styles.card, { transform: [{ scale }] }]}>
<LinearGradient colors={[backOne, backTwo]} style={styles.gradient}>
<Ionicons name={iconName} size={38} color="#fff" style={styles.icon} />
<Text style={styles.title}>{title}</Text>
{subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
</LinearGradient>
</Animated.View>
</TouchableWithoutFeedback>
@@ -89,77 +44,21 @@ const AnimatedCard: React.FC<CardProps> = ({
const styles = StyleSheet.create({
card: {
// minWidth: 170,
flex: 1,
height: 170,
marginHorizontal: 8,
marginVertical: 10,
borderRadius: 24,
height: 160,
margin: 8,
borderRadius: 20,
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: {
marginBottom: 12,
},
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,
},
icon: { marginBottom: 10 },
title: { fontSize: 18, fontWeight: "bold", color: "#fff" },
subtitle: { fontSize: 13, color: "#fff", opacity: 0.9 },
});
export default AnimatedCard;
src/screens/GroupScreen.tsx
+2 -2
View File
@@ -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
+172 -134
View File
@@ -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,
ScrollView,
Alert,
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: "2", title: "Joined Groups", subtitle: "View member 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: "4", title: "Create Group", subtitle: "Create a new group", action: "NAVIGATE_CREATE_GROUP", tab: "Requests", iconName: "people-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
{ 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 groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "people-outline", backOne: "#D7E9F7", backTwo: "#82AAE3" },
{ 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: "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: "2", title: "Your Requests", subtitle: "Track your 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: "4", title: "Create Group", subtitle: "Create a new group", action: "NAVIGATE_CREATE_GROUP", tab: "Requests", iconName: "people-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
{ 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 requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", iconName: "mail-open-outline", backOne: "#FFF4D2", backTwo: "#FFB344" },
{ id: "3", title: "Transactions", subtitle: "View history", action: "TRANSACTION", iconName: "receipt-outline", backOne: "#decbfcff", backTwo: "#B799FF" },
{ 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(
(state: any) => state.notifications.notifications
);
const notifications = useSelector((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 [alartAction, setAlartAction] = useState<CustomAlertProps | null>(null)
const [alertVisible, setAlertVisible] = useState(false);
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 () => {
try {
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();
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':
setalartVisible(true);
setAlartAction({
case "NOT_APPLIED":
setAlertAction({
visible: true,
title: "Become organizer",
message: "You have to become organizer for creating groups",
title: "Become an Organizer",
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',
onClose: () => setAlartAction(null),
alertType: "error",
onClose: () => setAlertAction(null),
});
setAlertVisible(true);
break;
case '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),
});
case "PENDING":
Alert.alert("Pending Approval", "Your organizer request is still pending.");
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
key={item.id}
title={item.title}
subtitle={item.subtitle}
iconName={item.iconName}
backOne={item.backOne}
backTwo={item.backTwo}
onPress={() => handleActionPress(item)}
/>
</View>
<AnimatedCard
key={item.id}
title={item.title}
subtitle={item.subtitle}
iconName={item.iconName}
backOne={item.backOne}
backTwo={item.backTwo}
onPress={() => handleActionPress(item)}
/>
);
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}>
<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>
<AppView barStyle="dark-content" style={styles.container}>
<FlatList
data={actions}
numColumns={2}
renderItem={renderGridItem}
keyExtractor={(item) => item.id}
numColumns={2}
contentContainerStyle={{ paddingHorizontal: 8 }}
ListHeaderComponent={
<>
<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
marginBottom: 100,
padding:10
backgroundColor: colors.white,
},
header: {
flexDirection: "row",
@@ -233,25 +262,34 @@ const styles = StyleSheet.create({
paddingTop: 24,
paddingBottom: 16,
},
greeting: {
fontSize: 22,
color: colors.textDark,
greeting: { fontSize: 22, color: colors.textDark },
sectionTitle: { fontSize: 20, fontWeight: "600", color: colors.textDark, flex: 1 },
actionHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginHorizontal: 20,
marginBottom: 10,
marginTop: 16
},
userName: {
fontSize: 28,
fontWeight: 'bold',
color: colors.textDark,
payAllButton: {
paddingHorizontal: 14,
paddingVertical: 6,
backgroundColor: colors.primary,
borderRadius: 8,
},
sectionTitle: {
fontSize: 20,
fontWeight: '600',
color: colors.textDark,
paddingHorizontal: 20,
marginBottom: 8,
},
cardWrapper: {
flex: 1,
// marginHorizontal: 8,
// backgroundColor:'red'
payAllText: { color: "#fff", fontWeight: "bold", fontSize: 14 },
badge: {
position: "absolute",
right: -6,
top: -4,
backgroundColor: colors.danger,
borderRadius: 8,
width: 16,
height: 16,
justifyContent: "center",
alignItems: "center",
zIndex: 1,
},
badgeText: { color: colors.white, fontSize: 10, fontWeight: "bold" },
});
src/screens/home/UserProfileStatus.tsx
+393 -423
View File
File diff suppressed because it is too large Load Diff
src/screens/home/user-home/UserHome.tsx
-253
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+2 -1
View File
@@ -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`