added custom model for contriution screen

src/components/JoinedGroupCard.tsx

@@ -1,8 +1,9 @@
 // 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';
+import { useNavigation } from '@react-navigation/native';
 
 // Update the type to match the full data structure
 interface JoinedGroup {
@@ -62,9 +63,10 @@ const getStatusStyle = (status: JoinedGroup['status']) => {
 export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => {
   const progress = (item.currentParticipants / item.maxParticipants) * 100;
   const statusStyle = getStatusStyle(item.status);
+  const navigation = useNavigation<any>()
 
   return (
-    <View style={styles.card}>
+    <TouchableOpacity style={styles.card} onPress={()=> navigation.navigate("GroupDetails", {item, color:colors.Settings})}>
       {/* Header */}
       <View style={styles.header}>
         <Text style={styles.groupName}>{item.groupName}</Text>
@@ -103,7 +105,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => {
             {formatDate(item.startDate)} - {formatDate(item.endDate)}
         </Text>
       </View>
-    </View>
+    </TouchableOpacity>
   );
 };