created transaction list show and create a custom card

src/screens/home/UserProfileStatus.tsx

@@ -10,8 +10,10 @@ import {
 } from "react-native";
 import * as Keychain from "react-native-keychain";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
-import {  PUT_USER_STATUS } from "../../utils/ApiUrls";
+import { PUT_USER_STATUS } from "../../utils/ApiUrls";
 import colors from "../../components/colors";
+import LinearGradient from "react-native-linear-gradient";
+import Ionicons from "@react-native-vector-icons/ionicons";
 
 export type ApiResponse = {
     message: string;
@@ -107,14 +109,23 @@ const UserProfileStatus: React.FC = () => {
         <View style={styles.container}>
             {/* <Text style={styles.title}>Welcome Back 👋</Text> */}
 
-            <View style={styles.card}>
+            <LinearGradient
-                <Text style={styles.cardTitle}>Profile Status</Text>
+                colors={[colors.primary, colors.Home]}
-                <Text>Role: {statusData?.role}</Text>
+                start={{ x: 0, y: 0 }}
-                <Text>Organizer: {statusData?.organizerStatus}</Text>
+                end={{ x: 1, y: 1 }}
-                <Text>
+                style={styles.card}
-                    Profile Completed: {statusData?.profileStatus ? "Yes ✅" : "No ❌"}
+            >
-                </Text>
+                <View>
-            </View>
+                    <Text style={styles.cardTitle}>Profile Status</Text>
+                    <Text style={{ color: '#fff' }}>Role: {statusData?.role}</Text>
+                    <Text style={{ color: '#fff' }}>Organizer: {statusData?.organizerStatus}</Text>
+                    <Text style={{ color: '#fff' }}>
+                        Profile Completed: {statusData?.profileStatus ? "Yes ✅" : "No ❌"}
+                    </Text>
+                </View>
+                <Ionicons name="person-circle" color={'#fff'} size={100}/>
+            </LinearGradient>
+
 
             {/* Custom Modal */}
             {showModal && (
@@ -182,12 +193,15 @@ const styles = StyleSheet.create({
         elevation: 3,
         shadowOpacity: 0.1,
         shadowRadius: 6,
-        // marginBottom: 20,
+        marginBottom: 10,
+        justifyContent:'space-between',
+        flexDirection:'row'
     },
     cardTitle: {
         fontSize: 18,
         fontWeight: "600",
         marginBottom: 10,
+        color: '#fff'
     },
     button: {
         backgroundColor: "#007AFF",

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

@@ -122,9 +122,27 @@ const UserHome = () => {
     };
 
     return (
-        <>
+        <ScrollView>
             {/* Stats */}
-            <View style={[styles.statsRow, { marginTop:12 }]}>
+
+            {/* <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>
@@ -134,10 +152,7 @@ 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>
@@ -149,7 +164,7 @@ const UserHome = () => {
                 onRefresh={onRefresh}
                 refreshing={refreshing}
             />
-        </>
+        </ScrollView>
     );
 };
 
@@ -171,6 +186,8 @@ const styles = StyleSheet.create({
         shadowOffset: { width: 0, height: 2 },
         shadowRadius: 6,
         elevation: 2,
+        borderWidth:1,
+        borderColor:colors.Home
     },
     statValue: {
         fontSize: 18,
@@ -187,6 +204,7 @@ const styles = StyleSheet.create({
         fontWeight: "600",
         color: colors.Home,
         marginBottom: 12,
+        marginTop:15
     },
     card: {
         backgroundColor: "#ffffff",