manage user credancial

src/components/JoinedGroupCard.tsx

@@ -2,6 +2,7 @@
 
 import React, { FC } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
+import colors from './colors';
 
 // Update the type to match the full data structure
 interface JoinedGroup {
@@ -151,7 +152,7 @@ const styles = StyleSheet.create({
     paddingVertical: 16,
     borderTopWidth: 1,
     borderBottomWidth: 1,
-    borderColor: '#F3F4F6',
+    borderColor: colors.pastelOrange,
     marginBottom: 16,
   },
   infoItem: {
@@ -193,7 +194,7 @@ const styles = StyleSheet.create({
   },
   progressBarFill: {
     height: '100%',
-    backgroundColor: '#4F46E5',
+    backgroundColor: colors.Settings,
     borderRadius: 4,
   },
   footer: {

src/components/RequestCard.tsx

@@ -50,16 +50,7 @@ export const RequestCard: FC<RequestCardProps> = ({ item, onApprove, onDecline }
   );
 };
 
-// Assuming a colors object like this for context:
-// const colors = {
-//   white: '#FFFFFF',
-//   textPrimary: '#212121',
-//   textSecondary: '#757575',
-//   border: '#EEEEEE',
-//   danger: '#C62828',
-//   lightDanger: '#FFEBEE',
-//   pastelOrange: '#FFDAB9', // The requested color
-// };
+
 
 const styles = StyleSheet.create({
   card: {

src/components/UserRequested.tsx

@@ -0,0 +1,154 @@
+// src/components/UserRequested.tsx
+
+import React, { FC } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import {Ionicons} from "@react-native-vector-icons/ionicons";
+import colors from "./colors";
+import { UserJoinRequest } from "../types";
+import { formatDate } from "../utils/HelperFunction";
+
+interface UserRequestedProps {
+  item: UserJoinRequest;
+}
+
+const getStatusStyle = (status: UserJoinRequest["status"]) => {
+  switch (status) {
+    case "APPROVED":
+      return {
+        backgroundColor: "#D1FAE5", // light green
+        textColor: "#065F46", // dark green
+        label: "Approved",
+        icon: "checkmark-circle-outline",
+        
+      };
+    case "PENDING":
+      return {
+        backgroundColor: "#FEF3C7", // light yellow
+        textColor: "#92400E", // dark yellow/brown
+        label: "Pending",
+        icon: "time-outline",
+      };
+    case "REJECT":
+      return {
+        backgroundColor: "#E5E7EB", // light gray
+        textColor: "#4B5563", // dark gray
+        label: "Reject",
+        icon: "close-circle-outline",
+      };
+    default:
+      return {
+        backgroundColor: "#E5E7EB",
+        textColor: "#4B5563",
+        label: "Unknown",
+        icon: "help-outline",
+      };
+  }
+};
+
+export const UserRequested: FC<UserRequestedProps> = ({ item }) => {
+  const { backgroundColor, textColor, label, icon } = getStatusStyle(item.status);
+
+  return (
+    <View style={styles.card}>
+      {/* Top row: User info + Status */}
+      <View style={styles.topRow}>
+        <View style={styles.userInfoSection}>
+          
+          <Text style={styles.groupName}>{item.groupName}</Text>
+
+          <Text style={styles.userMeta}>
+            <Ionicons name="time-outline" size={14} color={colors.textLight} />{" "}
+            {formatDate(item.requestDate)}
+          </Text>
+        </View>
+
+        {/* Status Badge */}
+        <View style={[styles.statusBadge, { backgroundColor }]}>
+          <Ionicons name={icon as any} size={16} color={textColor} />
+          <Text style={[styles.statusText, { color: textColor }]}>{label}</Text>
+        </View>
+      </View>
+
+      {/* Group Info */}
+      <View style={styles.groupInfoSection}>
+        <Text style={styles.requestText}>
+          Group Created By :{" "}
+          <Text style={styles.userName} numberOfLines={1}>
+            {item.createdBy}
+          </Text>
+        </Text>
+        {item.reason ? (
+          <Text style={styles.reasonText} numberOfLines={2}>
+            Reason: {item.reason}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: colors.white,
+    borderRadius: 16,
+    marginVertical: 8,
+    elevation: 3,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 3 },
+    padding: 12,
+  },
+  topRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    borderBottomWidth: 1,
+    borderBottomColor: colors.Settings,
+    paddingBottom: 8,
+  },
+  userInfoSection: {
+    flex: 1,
+    paddingRight: 8,
+  },
+  userName: {
+    // fontSize: 16,
+    fontWeight: "bold",
+    color: colors.textDark,
+  },
+  userMeta: {
+    fontSize: 13,
+    color: colors.textLight,
+    marginTop: 2,
+  },
+  groupInfoSection: {
+    paddingVertical: 12,
+  },
+  requestText: {
+    // fontSize: 15,
+    color: colors.textDark,
+    lineHeight: 20,
+  },
+  groupName: {
+    fontWeight: "600",
+    color: colors.Settings,
+    fontSize:18
+  },
+  reasonText: {
+    fontSize: 13,
+    color: colors.textLight,
+    marginTop: 4,
+  },
+  statusBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 12,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  statusText: {
+    fontSize: 13,
+    fontWeight: "600",
+    marginLeft: 4,
+  },
+});