created transaction list show and create a custom card

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",