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

created transaction list show and create a custom card

Browse Source
This commit is contained in:
Jaanu423
2025-09-25 15:44:58 +05:30
parent 7f95ae73a0
commit fb55686724
10 changed files with 569 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/AnimatedCard.tsx
+188
View File
@@ -0,0 +1,188 @@
import React, { useRef } from "react";
import {
View,
Text,
StyleSheet,
TouchableWithoutFeedback,
Animated,
} from "react-native";
import LinearGradient from "react-native-linear-gradient";
import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
type CardProps = {
title: string;
subtitle?: string;
iconName?: IoniconsIconName;
onPress?: () => void;
backOne?: string;
backTwo?: string
};
const AnimatedCard: React.FC<CardProps> = ({
title,
subtitle,
iconName = "ellipse",
onPress,
backOne = '#4facfe',
backTwo = '#00f2fe'
}) => {
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(() => onPress && onPress());
};
return (
<TouchableWithoutFeedback
onPressIn={handlePressIn}
onPressOut={handlePressOut}
>
<Animated.View style={[styles.card, { 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.graphicCircleMedium} />
<View style={styles.graphicCircleSmall} />
<View style={styles.graphicTriangleTop} />
<View style={styles.graphicTriangleBottom} />
{/* Content */}
<View style={styles.content}>
{iconName && (
<Ionicons
name={iconName}
size={32}
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>
);
};
const styles = StyleSheet.create({
card: {
// marginHorizontal: 16,
marginVertical: 10,
borderRadius: 20,
overflow: "hidden",
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.25,
shadowRadius: 8,
elevation: 8,
},
gradient: {
minHeight: 120,
position: "relative",
},
// Graphics
graphicCircleLarge: {
position: "absolute",
top: -20,
right: -20,
width: 80,
height: 80,
borderRadius: 40,
backgroundColor: "rgba(124, 80, 80, 0.42)",
},
graphicCircleMedium: {
position: "absolute",
bottom: 30,
left: -15,
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: "rgba(122, 41, 41, 0.39)",
},
graphicCircleSmall: {
position: "absolute",
bottom: -10,
right: 40,
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: "rgba(207, 110, 80, 0.25)",
},
graphicTriangleTop: {
position: "absolute",
top: 0,
left: 0,
width: 0,
height: 0,
borderStyle: "solid",
borderRightWidth: 60,
borderTopWidth: 60,
borderRightColor: "transparent",
borderTopColor: "rgba(143, 62, 62, 0.31)",
},
graphicTriangleBottom: {
position: "absolute",
bottom: 0,
right: 0,
width: 0,
height: 0,
borderStyle: "solid",
borderLeftWidth: 40,
borderBottomWidth: 40,
borderLeftColor: "transparent",
borderBottomColor: "rgba(172, 51, 51, 0.27)",
},
content: {
flexDirection: "row", // stack vertically
alignItems: "center", // center horizontally
justifyContent: "center", // center vertically
padding: 20,
position: "relative",
zIndex: 1,
alignSelf: "center",
flex:1
}
,
icon: {
marginRight: 12,
},
textContainer: {
// alignItems: "center", // centers title and subtitle
},
title: {
fontSize: 18,
fontWeight: "700",
color: "#fff",
marginBottom: 4,
textTransform:'uppercase'
// textAlign: "center",
},
subtitle: {
fontSize: 14,
color: "rgba(255, 255, 255, 0.8)",
fontWeight: "500",
textAlign: "center",
},
});
export default AnimatedCard;
src/navigation/AppNavigator.tsx
+3
View File
@@ -15,6 +15,7 @@ import Transaction from "../screens/profile/Transaction";
import GroupDetails from "../screens/home/user-home/GroupDetails";
import EditGroupScreen from "../screens/management/EditGroupScreen";
import EditBankDetails from "../screens/profile/EditBankDetails";
import TransactionsList from "../screens/transaction/TransactionList";
export type RootStackParamList = {
Splash: undefined;
@@ -32,6 +33,7 @@ export type RootStackParamList = {
YourContacts: undefined;
Transaction: undefined;
EditBankDetails: { currentBankName: string | null; currentAccountNumber: string | null; currentBranchCode: string | null };
TransactionList:undefined
};
const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -66,6 +68,7 @@ export default function AppNavigator() {
<Stack.Screen name="GroupDetails" component={GroupDetails} options={{ headerShown: false }} />
<Stack.Screen name="EditGroup" component={EditGroupScreen} options={{ headerShown: false }} />
<Stack.Screen name="EditBankDetails" component={EditBankDetails} options={{ headerShown: false }} />
<Stack.Screen name="TransactionList" component={TransactionsList} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
);
src/screens/home/Home.tsx
+1 -2
View File
@@ -67,7 +67,7 @@ const Home = () => {
console.log("👤 Profile Response:", result);
if (result.status === "success") {
setApiUser(result.data);
dispatch(
dispatch(
setUserData({
id: result.data.id,
userId: result.data.userId,
@@ -106,7 +106,6 @@ const Home = () => {
<View style={styles.header}>
<Text style={styles.greeting}>Hello, {user.firstName || apiUser?.firstName} {user.lastName || apiUser?.lastName}👋</Text>
<TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
<Image
source={
user.imageBlob
src/screens/home/user-home/GroupDetails.tsx
+12 -2
View File
@@ -15,7 +15,7 @@ import colors from "../../../components/colors";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import Header from "../../../components/common/Header";
import { apiCall } from "../../../utils/ApiHelper";
import { CONTRIBUTE, GROUP_ALL_MEMBER } from "../../../utils/ApiUrls";
import { BASE_URL, CONTRIBUTE, GROUP_ALL_MEMBER } from "../../../utils/ApiUrls";
import ContributionScreen from "../../ContributionScreen";
// Define type for a member
@@ -108,10 +108,20 @@ const GroupDetails = () => {
const confirmPayment = async () => {
try {
const res = await apiCall(`${BASE_URL}payments/contribute/${group?.id}?amount=${group?.collected}`, 'POST') as any
console.log("payment response : ", res)
if (res.status) {
ToastAndroid.show('Payment done!', ToastAndroid.SHORT)
}
if (res.status === 400) {
ToastAndroid.show(res?.data?.message || 'Payment done!', ToastAndroid.SHORT)
}
} catch (error) {
console.log("payment error : ", error)
}
}
const renderMember = ({ item, index }: { item: any; index: number }) => (
<View
src/screens/home/user-home/UserHome.tsx
+9 -4
View File
@@ -7,6 +7,8 @@ import {
TouchableOpacity,
Alert,
RefreshControl,
ScrollView,
Button,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
@@ -15,6 +17,7 @@ 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,
@@ -47,13 +50,12 @@ const UserHome = () => {
0
);
const onRefresh = async () => {
setRefreshing(true)
await handleGroup()
setRefreshing(false)
}
const handleGroup = async () => {
try {
setLoading(true)
@@ -120,7 +122,7 @@ const UserHome = () => {
};
return (
<View>
<>
{/* Stats */}
<View style={[styles.statsRow, { marginVertical: 24 }]}>
<View style={styles.statBox}>
@@ -132,6 +134,9 @@ const UserHome = () => {
<Text style={styles.statLabel}>Cycle Contribution</Text>
</View>
</View>
{/* <Button title="Transaction List" onPress={()=>navigation.navigate('TransactionList')}/> */}
<AnimatedCard
onPress={() => navigation.navigate("TransactionList")} title={"transaction list"} iconName="calculator-outline" subtitle="View your transaction history" />
{/* Groups List */}
<Text style={styles.sectionTitle}>Your Groups</Text>
@@ -143,7 +148,7 @@ const UserHome = () => {
onRefresh={onRefresh}
refreshing={refreshing}
/>
</View>
</>
);
};
src/screens/transaction/TransactionList.tsx
+193
View File
@@ -0,0 +1,193 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import {
View,
Text,
StyleSheet,
FlatList,
RefreshControl,
TouchableOpacity,
SafeAreaView,
} from "react-native";
import { apiCall } from "../../utils/ApiHelper";
import { TRANSACTION } from "../../utils/ApiUrls";
import colors from "../../components/colors";
import AppView from "../../components/AppView";
import Header from "../../components/common/Header";
type Transaction = {
id: string;
fundGroupId: string;
fundGroupName: string;
amount: number;
status: string;
payerMobile?: string;
transactionDate: number[];
};
type ApiResponse = {
message: string;
status: string;
statusCode: number;
data: Transaction[];
};
// Helper: convert the array-style date into a JS Date
const parseTransactionDate = (arr: number[] | undefined): Date | null => {
if (!arr || arr.length < 6) return null;
const [year, month, day, hour = 0, minute = 0, second = 0, sub = 0] = arr;
let milli = 0;
if (sub > 999999999) {
milli = Math.floor(sub / 1e6);
} else if (sub > 1000) {
milli = Math.floor(sub / 1e6);
} else {
milli = sub;
}
return new Date(year, month - 1, day, hour, minute, second, milli);
};
const formatINR = (amount: number) => {
try {
return new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR" }).format(amount);
} catch (e) {
return `₹${amount.toFixed(2)}`;
}
};
const StatusBadge: React.FC<{ status?: string }> = ({ status }) => {
const text = status ?? "UNKNOWN";
const color =
text === "SUCCESS" ? styles.statusSuccess : text === "PENDING" ? styles.statusPending : styles.statusFailed;
return (
<View style={[styles.statusBadge, color]}>
<Text style={styles.statusText}>{text}</Text>
</View>
);
};
const TransactionItem: React.FC<{ item: Transaction }> = ({ item }) => {
const date = useMemo(() => parseTransactionDate(item.transactionDate), [item.transactionDate]);
const dateStr = date ? date.toLocaleString("en-IN") : "-";
return (
<TouchableOpacity activeOpacity={0.8} style={styles.card}>
<View style={styles.cardLeft}>
<Text style={styles.fundName}>{item.fundGroupName}</Text>
<Text style={styles.payer}>Payer: {item.payerMobile ?? "-"}</Text>
<Text style={styles.date}>{dateStr}</Text>
</View>
<View style={styles.cardRight}>
<Text style={styles.amount}>{formatINR(item.amount)}</Text>
<StatusBadge status={item.status} />
</View>
</TouchableOpacity>
);
};
const TransactionsList: React.FC = () => {
const [refreshing, setRefreshing] = useState(false);
const [transactions, setTransactions] = useState<Transaction[]>([]);
const [message, setMessage] = useState("");
const handleTransactionList = async () => {
try {
const res = (await apiCall(TRANSACTION, "GET")) as ApiResponse;
console.log("transaction list response : ", res);
if (res.statusCode === 200) {
setTransactions(res.data);
setMessage(res.message);
}
} catch (error) {
console.error("Error fetching transactions:", error);
}
};
useEffect(() => {
handleTransactionList();
}, []);
const handleRefresh = useCallback(async () => {
try {
setRefreshing(true);
await handleTransactionList();
} catch (e) {
console.warn("Refresh failed", e);
} finally {
setRefreshing(false);
}
}, []);
const renderEmpty = () => (
<View style={styles.emptyContainer}>
<Text style={styles.emptyTitle}>No transactions</Text>
<Text style={styles.emptySubtitle}>Transactions will appear here when available.</Text>
</View>
);
return (
<AppView>
<Header title="transactions" titleColor={colors.Home} arrowColor={colors.Home}/>
<Text style={styles.headerTitle}>{message}</Text>
<FlatList
data={transactions}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <TransactionItem item={item} />}
ListEmptyComponent={renderEmpty}
contentContainerStyle={transactions.length === 0 ? { flex: 1 } : undefined}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}
/>
</AppView>
);
};
export default TransactionsList;
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: "#f7f7fb" },
headerTitle: { fontSize: 18, fontWeight: "500", color: colors.primary },
headerSubtitle: { marginTop: 4, color: "#6b7280" },
card: {
flexDirection: "row",
justifyContent: "space-between",
padding: 16,
// marginHorizontal: 12,
marginVertical: 8,
backgroundColor: "#fff",
borderRadius: 12,
shadowColor: "#000",
shadowOpacity: 0.03,
shadowRadius: 8,
elevation: 2,
},
cardLeft: { flex: 1 },
fundName: { fontSize: 16, fontWeight: "600" },
payer: { marginTop: 6, color: "#6b7280" },
date: { marginTop: 6, color: "#9ca3af" },
cardRight: { alignItems: "flex-end", justifyContent: "space-between" },
amount: { fontSize: 16, fontWeight: "700" },
statusBadge: {
marginTop: 8,
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 999,
},
statusText: { fontSize: 12, fontWeight: "600", color: "#fff" },
statusSuccess: { backgroundColor: "#10b981" },
statusPending: { backgroundColor: "#f59e0b" },
statusFailed: { backgroundColor: "#ef4444" },
emptyContainer: { alignItems: "center", justifyContent: "center", },
emptyTitle: { fontSize: 18, fontWeight: "600", color: "#374151" },
emptySubtitle: { marginTop: 8, color: "#6b7280" },
});
src/utils/ApiHelper.tsx
+7 -2
View File
@@ -1,4 +1,5 @@
import axios, { AxiosRequestConfig } from "axios";
import { Alert, ToastAndroid } from "react-native";
import * as Keychain from "react-native-keychain";
/**
@@ -12,7 +13,8 @@ export async function apiCall<T>(
url: string,
method: "GET" | "POST" | "PUT" | "DELETE" = "GET",
data?: any,
config?: AxiosRequestConfig
config?: AxiosRequestConfig,
responseErrorMessage?:string
): Promise<T | null > {
try {
// Get saved credentials from Keychain
@@ -41,12 +43,15 @@ export async function apiCall<T>(
`Status: ${error.response.status}`,
`Data: ${JSON.stringify(error.response.data)}`
);
if(error.response.status === 400){
ToastAndroid.show(error.response.data.message || responseErrorMessage, ToastAndroid.SHORT)
}
} else if (error.request) {
// Request was made but no response received
console.error("API Error: No response received", error.request);
} else {
// Something else went wrong while setting up the request
console.error("API Error:", error.message);
console.error("API Error:", error);
}
return null; // return null so the caller can handle it
}
src/utils/ApiUrls.tsx
+1
View File
@@ -19,3 +19,4 @@ 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`;
export const CONTRIBUTE = `${BASE_URL}payments/groups/`;
export const TRANSACTION = `${BASE_URL}payments/my-transactions`;