home changes

src/components/JoinedGroupCard.tsx

@@ -1,17 +1,15 @@
-// src/components/JoinedGroupCard.tsx
-
 import React, { FC } from 'react';
 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 {
   id: string;
   groupName: string;
   description: string;
   visibility: 'PUBLIC' | 'PRIVATE';
   createdByUserId: number;
-  createdByName: string; // Renamed from createdBy for clarity
+  createdByName: string;
   startDate: [number, number, number] | null;
   endDate: [number, number, number] | null;
   minParticipants: number;
@@ -24,33 +22,33 @@ interface JoinedGroup {
 
 interface JoinedGroupCardProps {
   item: JoinedGroup | any;
-  onViewPress: () => void; // Function prop for the View button
+  onViewPress: () => void;
+  onPayPress: () => void;         // function for Pay button
+  hasPaid?: boolean;              // whether user has already paid
 }
 
-// Helper function to format dates
 const formatDate = (dateArray: [number, number, number] | null): string => {
   if (!dateArray) return 'N/A';
   const date = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
   return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
 };
 
-// Helper to determine status color
 const getStatusStyle = (status: JoinedGroup['status']) => {
     switch (status) {
         case 'ACTIVE':
             return {
-                backgroundColor: '#D1FAE5', // Green tint
-                textColor: '#065F46',       // Dark Green
+                backgroundColor: '#D1FAE5',
+                textColor: '#065F46',
             };
         case 'PENDING':
             return {
-                backgroundColor: '#FEF3C7', // Yellow tint
-                textColor: '#92400E',       // Dark Yellow/Brown
+                backgroundColor: '#FEF3C7',
+                textColor: '#92400E',
             };
         case 'COMPLETED':
             return {
-                backgroundColor: '#E5E7EB', // Gray tint
-                textColor: '#4B5563',       // Dark Gray
+                backgroundColor: '#E5E7EB',
+                textColor: '#4B5563',
             };
         default:
             return {
@@ -60,13 +58,13 @@ const getStatusStyle = (status: JoinedGroup['status']) => {
     }
 };
 
-export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress }) => {
+export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, onPayPress, hasPaid }) => {
   const progress = (item.currentParticipants / item.maxParticipants) * 100;
   const statusStyle = getStatusStyle(item.status);
-  const navigation = useNavigation<any>()
+  const navigation = useNavigation<any>();
 
   return (
-    <TouchableOpacity style={styles.card} onPress={()=> navigation.navigate("GroupDetails", {item, color:colors.black})}>
+    <TouchableOpacity style={styles.card} onPress={() => navigation.navigate("GroupDetails", {item, color:colors.black})}>
       {/* Header */}
       <View style={styles.header}>
         <Text style={styles.groupName}>{item.groupName}</Text>
@@ -75,27 +73,32 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress })
         </View>
       </View>
       <Text style={styles.createdBy}>Created by {item.createdByName}</Text>
-      
       {/* Financial Info */}
       <View style={styles.infoRow}>
         <View style={styles.infoItem}>
-
-              <Text style={styles.infoLabel}>Contribution</Text>
-              <Text style={styles.infoValue}>₹{item.contributionAmount.toLocaleString('en-IN')}</Text>
-     
+          <Text style={styles.infoLabel}>Contribution</Text>
+          <Text style={styles.infoValue}>₹{item.contributionAmount.toLocaleString('en-IN')}</Text>
         </View>
         <View style={styles.infoItem}>
           <Text style={styles.infoLabel}>Cycle</Text>
           <Text style={styles.infoValue}>{item.cycleType}</Text>
         </View>
       </View>
-
-      {/* Footer with Dates and View Button */}
+      {/* Footer with Dates & Buttons */}
       <View style={styles.footer}>
         <Text style={styles.dateText}>
             {formatDate(item.startDate)} - {formatDate(item.endDate)}
         </Text>
-
+        {/* Add Pay / Paid button here */}
+        {hasPaid ? (
+          <View style={styles.paidButton}>
+            <Text style={styles.paidButtonText}>Paid</Text>
+          </View>
+        ) : (
+          <TouchableOpacity style={styles.payButton} onPress={onPayPress}>
+            <Text style={styles.payButtonText}>Pay</Text>
+          </TouchableOpacity>
+        )}
       </View>
     </TouchableOpacity>
   );
@@ -149,13 +152,12 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderColor: colors.pastelOrange,
     marginBottom: 16,
-     backgroundColor:colors.white,
-        borderRadius:15,
+    backgroundColor: colors.white,
+    borderRadius:15,
   },
   infoItem: {
     padding:5,
     paddingHorizontal:10,
- 
     backgroundColor:colors.white,
     alignItems: 'flex-start',
   },
@@ -202,14 +204,37 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-
   },
   dateText: {
     fontSize: 14,
     color: '#4B5563',
     fontWeight: '500',
   },
-  // --- NEW STYLES for the View Button ---
+  // Pay button
+  payButton: {
+    elevation:5,
+    backgroundColor: colors.white,
+    paddingHorizontal: 25,
+    paddingVertical: 10,
+    borderRadius: 10,
+  },
+  payButtonText: {
+    color: colors.black,
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  // Paid button
+  paidButton: {
+    backgroundColor: '#D1FAE5',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 10,
+  },
+  paidButtonText: {
+    color: '#065F46',
+    fontSize: 14,
+    fontWeight: '600',
+  },
   viewButton: {
     backgroundColor: colors.pastelOrange,
     paddingHorizontal: 20,