created transaction list show and create a custom card

src/screens/home/Home.tsx

@@ -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

@@ -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

@@ -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

@@ -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" },
+});