some bug fixed

src/components/JoinedGroupCard.tsx

@@ -29,12 +29,15 @@ interface JoinedGroupCardProps {
   hasPaid?: boolean;              // whether user has already paid
 }
 
-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' });
+const formatDate = (dateStr: string | null): string => {
+  if (!dateStr) return 'N/A';
+
+  const [year, month, day] = dateStr.split('-');
+  return `${day}-${month}-${year}`;
 };
 
+
+
 const getStatusStyle = (status: JoinedGroup['status']) => {
   switch (status) {
     case 'ACTIVE':
@@ -67,6 +70,9 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, h
   const [loading, setLoading] = React.useState(false);
   const [payable, setPayable] = React.useState<any>();
 
+
+
+
   const onPayPress = async () => {
     // Navigate to payment screen or handle payment logic
     // navigation.navigate('PaymentScreen', { groupId: item.id, amount: item.contributionAmount });
@@ -126,18 +132,29 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, h
       {/* Footer with Dates & Buttons */}
       <View style={styles.footer}>
         <Text style={styles.dateText}>
-          {formatDate(item.startDate)} - {formatDate(item.endDate)}
+          {formatDate(item.startDate)} to {formatDate(item.endDate)}
         </Text>
         {/* Add Pay / Paid button here */}
-        {hasPaid ? (
+        {/* {hasPaid ? (
           <View style={styles.paidButton}>
             <Text style={styles.paidButtonText}>Paid</Text>
           </View>
         ) : (
+          
           <TouchableOpacity style={styles.payButton} onPress={onPayPress}>
-            <Text style={styles.payButtonText}>{loading ? 'Loading...' : 'Pay'}</Text>
+            <Text style={styles.payButtonText}>{loading ? 'Loading...' : ' Pay'}</Text>
           </TouchableOpacity>
-        )}
+        )} */}
+        {
+          hasPaid && <View style={styles.paidButton}>
+            <Text style={styles.paidButtonText}>Paid</Text>
+          </View>
+        }
+        {
+          item.status !== 'COMPLETED' && <TouchableOpacity style={styles.payButton} onPress={onPayPress}>
+            <Text style={styles.payButtonText}>{loading ? 'Loading...' : ' Pay'}</Text>
+          </TouchableOpacity>
+        }
       </View>
     </TouchableOpacity>
   );

src/components/common/Header.tsx

@@ -37,7 +37,7 @@ const Header: React.FC<HeaderProps> = ({
         <TouchableOpacity onPress={handleBack} style={{padding:6}}>
           <Ionicons name="arrow-back" size={24} color={arrowColor} />
         </TouchableOpacity>
-      )}
+     )}
       <Text style={[styles.headerTitle, {color:titleColor}]}>{title}</Text>
       <View>{rightAction}</View>
     </View>
@@ -49,14 +49,15 @@ export default Header;
 const styles = StyleSheet.create({
   header: {
     flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
+    // alignItems: "center",
+    // justifyContent: "space-between",
     paddingVertical: 12,
     paddingHorizontal:12
   },
   headerTitle: {
-    fontSize: 18,
+    fontSize: 22,
     fontWeight: "600",
-    textTransform: "capitalize",
+    // textTransform: "capitalize",
   },
+  
 });