botton navi...

src/components/JoinedGroupCard.tsx

@@ -1,7 +1,8 @@
 // src/components/JoinedGroupCard.tsx
 
 import React, { FC } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import colors from './colors';
 
 // Update the type to match the full data structure
 interface JoinedGroup {
@@ -23,6 +24,7 @@ interface JoinedGroup {
 
 interface JoinedGroupCardProps {
   item: JoinedGroup | any;
+  onViewPress: () => void; // Function prop for the View button
 }
 
 // Helper function to format dates
@@ -58,7 +60,7 @@ const getStatusStyle = (status: JoinedGroup['status']) => {
     }
 };
 
-export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => {
+export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress }) => {
   const progress = (item.currentParticipants / item.maxParticipants) * 100;
   const statusStyle = getStatusStyle(item.status);
 
@@ -96,11 +98,14 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => {
         </View>
       </View>
 
-      {/* Dates */}
+      {/* Footer with Dates and View Button */}
       <View style={styles.footer}>
         <Text style={styles.dateText}>
             {formatDate(item.startDate)} - {formatDate(item.endDate)}
         </Text>
+        <TouchableOpacity style={styles.viewButton} onPress={onViewPress}>
+            <Text style={styles.viewButtonText}>View</Text>
+        </TouchableOpacity>
       </View>
     </View>
   );
@@ -151,7 +156,7 @@ const styles = StyleSheet.create({
     paddingVertical: 16,
     borderTopWidth: 1,
     borderBottomWidth: 1,
-    borderColor: '#F3F4F6',
+    borderColor: colors.pastelOrange,
     marginBottom: 16,
   },
   infoItem: {
@@ -193,16 +198,33 @@ const styles = StyleSheet.create({
   },
   progressBarFill: {
     height: '100%',
-    backgroundColor: '#4F46E5',
+    backgroundColor: colors.Settings,
     borderRadius: 4,
   },
   footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
     marginTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: '#F3F4F6',
+    paddingTop: 16,
   },
   dateText: {
     fontSize: 14,
     color: '#4B5563',
     fontWeight: '500',
   },
+  // --- NEW STYLES for the View Button ---
+  viewButton: {
+    backgroundColor: colors.pastelOrange,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 10,
+  },
+  viewButtonText: {
+    color: '#000000ff',
+    fontSize: 14,
+    fontWeight: '600',
+  },
 });

src/components/MyGroupCard.tsx

@@ -50,7 +50,7 @@ export const MyGroupCard: React.FC<Props> = ({ item, onManage }) => {
             {item.groupName}
           </Text>
           <View style={[styles.statusBadge, { backgroundColor: getStatusColor() }]}>
-            <Text style={styles.statusBadgeText}>{item.status === "ACTIVE" ? "Active" : "Not Active"}</Text>
+            <Text style={styles.statusBadgeText}>{item.status}</Text>
           </View>
         </View>
 

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

src/components/common/Header.tsx

@@ -1,18 +1,24 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
-import { Ionicons } from  "@react-native-vector-icons/ionicons"
+import {Ionicons} from "@react-native-vector-icons/ionicons";
 
 type HeaderProps = {
   title: string;
   showBack?: boolean; // optional, default true
   onBackPress?: () => void; // optional custom back action
+  rightAction?: React.ReactNode; // allow passing JSX for right side
+  titleColor?:string;
+  arrowColor?:string
 };
 
 const Header: React.FC<HeaderProps> = ({
   title,
   showBack = true,
   onBackPress,
+  rightAction,
+  titleColor = 'pink',
+  arrowColor='pink'
 }) => {
   const navigation = useNavigation();
 
@@ -26,12 +32,15 @@ const Header: React.FC<HeaderProps> = ({
 
   return (
     <View style={styles.header}>
-      {showBack && (
-        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
-          <Ionicons name="arrow-back" size={24} color="#000" />
+      {showBack ? (
+        <TouchableOpacity onPress={handleBack}>
+          <Ionicons name="arrow-back" size={24} color={arrowColor} />
         </TouchableOpacity>
+      ) : (
+        <View style={{ width: 24 }} /> // placeholder to keep spacing
       )}
-      <Text style={styles.headerTitle}>{title}</Text>
+      <Text style={[styles.headerTitle, {color:titleColor}]}>{title}</Text>
+      <View>{rightAction}</View>
     </View>
   );
 };
@@ -42,21 +51,11 @@ const styles = StyleSheet.create({
   header: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 16,
+    justifyContent: "space-between",
     paddingVertical: 12,
-    backgroundColor: "#fff",
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 6,
-    elevation: 3,
-  },
-  backButton: {
-    marginRight: 12,
   },
   headerTitle: {
     fontSize: 18,
     fontWeight: "600",
-    color: "#000",
   },
 });