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}>
-                <Text style={styles.cardTitle}>Profile Status</Text>
-                <Text>Role: {statusData?.role}</Text>
-                <Text>Organizer: {statusData?.organizerStatus}</Text>
-                <Text>
-                    Profile Completed: {statusData?.profileStatus ? "Yes ✅" : "No ❌"}
-                </Text>
-            </View>
+            <LinearGradient
+                colors={[colors.primary, colors.Home]}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}
+                style={styles.card}
+            >
+                <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",