handle user profile session

src/components/JoinedGroupCard.tsx

@@ -2,42 +2,207 @@
 
 import React, { FC } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { JoinedGroup } from '../types';
 
-interface JoinedGroupCardProps {
-  item: JoinedGroup;
+// 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
+  startDate: [number, number, number] | null;
+  endDate: [number, number, number] | null;
+  minParticipants: number;
+  maxParticipants: number;
+  currentParticipants: number;
+  contributionAmount: number;
+  cycleType: 'MONTHLY' | 'WEEKLY' | 'QUARTERLY' | 'CUSTOM';
+  status: 'ACTIVE' | 'PENDING' | 'COMPLETED';
 }
 
-export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => (
-  <View style={styles.card}>
-    <View>
-      <Text style={styles.cardTitle}>{item.groupName}</Text>
-      <Text style={styles.cardSubtitle}>Created by {item.createdBy}</Text>
+interface JoinedGroupCardProps {
+  item: JoinedGroup | any;
+}
+
+// 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
+            };
+        case 'PENDING':
+            return {
+                backgroundColor: '#FEF3C7', // Yellow tint
+                textColor: '#92400E',       // Dark Yellow/Brown
+            };
+        case 'COMPLETED':
+            return {
+                backgroundColor: '#E5E7EB', // Gray tint
+                textColor: '#4B5563',       // Dark Gray
+            };
+        default:
+            return {
+                backgroundColor: '#E5E7EB',
+                textColor: '#4B5563',
+            };
+    }
+};
+
+export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => {
+  const progress = (item.currentParticipants / item.maxParticipants) * 100;
+  const statusStyle = getStatusStyle(item.status);
+
+  return (
+    <View style={styles.card}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={styles.groupName}>{item.groupName}</Text>
+        <View style={[styles.statusBadge, { backgroundColor: statusStyle.backgroundColor }]}>
+          <Text style={[styles.statusText, { color: statusStyle.textColor }]}>{item.status}</Text>
+        </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>
+        </View>
+        <View style={styles.infoItem}>
+          <Text style={styles.infoLabel}>Cycle</Text>
+          <Text style={styles.infoValue}>{item.cycleType}</Text>
+        </View>
+      </View>
+
+      {/* Participants Progress */}
+      <View style={styles.progressContainer}>
+        <View style={styles.progressLabels}>
+          <Text style={styles.participantText}>Participants</Text>
+          <Text style={styles.participantCount}>{item.currentParticipants} / {item.maxParticipants}</Text>
+        </View>
+        <View style={styles.progressBarBackground}>
+          <View style={[styles.progressBarFill, { width: `${progress}%` }]} />
+        </View>
+      </View>
+
+      {/* Dates */}
+      <View style={styles.footer}>
+        <Text style={styles.dateText}>
+            {formatDate(item.startDate)} - {formatDate(item.endDate)}
+        </Text>
+      </View>
     </View>
-  </View>
-);
+  );
+};
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 12,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    padding: 20,
+    marginBottom: 16,
+    shadowColor: '#374151',
+    shadowOpacity: 0.08,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 3,
+  },
+  header: {
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'space-between',
-    elevation: 2,
-    shadowColor: '#000',
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
+    alignItems: 'flex-start',
+    marginBottom: 4,
   },
-  cardTitle: {
-    fontSize: 17,
+  groupName: {
+    fontSize: 20,
     fontWeight: 'bold',
-    color: '#343a40',
+    color: '#1F2937',
+    flexShrink: 1,
   },
-  cardSubtitle: {
+  createdBy: {
     fontSize: 14,
-    color: '#6c757d',
+    color: '#6B7280',
+    marginBottom: 16,
+  },
+  statusBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12,
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: '#F3F4F6',
+    marginBottom: 16,
+  },
+  infoItem: {
+    alignItems: 'flex-start',
+  },
+  infoLabel: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginBottom: 4,
+  },
+  infoValue: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#111827',
+    textTransform: 'capitalize',
+  },
+  progressContainer: {
+    marginBottom: 16,
+  },
+  progressLabels: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  participantText: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+  participantCount: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#111827',
+  },
+  progressBarBackground: {
+    height: 8,
+    backgroundColor: '#E5E7EB',
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  progressBarFill: {
+    height: '100%',
+    backgroundColor: '#4F46E5',
+    borderRadius: 4,
+  },
+  footer: {
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  dateText: {
+    fontSize: 14,
+    color: '#4B5563',
+    fontWeight: '500',
   },
 });

src/components/common/Custom.tsx

@@ -14,12 +14,14 @@ import colors from "../colors";
 type CustomInputProps = TextInputProps & {
   label?: string;
   icon?: IoniconsIconName;
+  error?:string
 };
 
 const CustomInput: React.FC<CustomInputProps> = ({
   label,
   icon,
   style,
+  error,
   ...rest
 }) => {
   return (

src/components/common/Header.tsx

@@ -0,0 +1,62 @@
+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"
+
+type HeaderProps = {
+  title: string;
+  showBack?: boolean; // optional, default true
+  onBackPress?: () => void; // optional custom back action
+};
+
+const Header: React.FC<HeaderProps> = ({
+  title,
+  showBack = true,
+  onBackPress,
+}) => {
+  const navigation = useNavigation();
+
+  const handleBack = () => {
+    if (onBackPress) {
+      onBackPress();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  return (
+    <View style={styles.header}>
+      {showBack && (
+        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
+          <Ionicons name="arrow-back" size={24} color="#000" />
+        </TouchableOpacity>
+      )}
+      <Text style={styles.headerTitle}>{title}</Text>
+    </View>
+  );
+};
+
+export default Header;
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    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",
+  },
+});