botton navi...

src/screens/management/Member.tsx

@@ -0,0 +1,296 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  FlatList,
+  ActivityIndicator,
+  SafeAreaView,
+  Image,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
+import { Ionicons } from "@react-native-vector-icons/ionicons"; // Assuming you use Expo or have vector icons installed
+import { apiCall } from '../../utils/ApiHelper'; // Adjust path to your apiCall utility
+import AppView from '../../components/AppView';
+import colors from '../../components/colors';
+
+// --- Type Definitions ---
+interface Member {
+  id: string;
+  userId: number;
+  firstName: string;
+  lastName: string | null;
+  mobile: string;
+  gender: string;
+  email: string;
+  username: string;
+  address: string;
+  role: 'USER' | 'ORGANIZER';
+}
+
+interface ApiResponse {
+  message: string;
+  status: string;
+  statusCode: number;
+  data: Member[];
+}
+
+// --- Main Screen Component ---
+// This assumes the component receives `groupId` from a navigator (e.g., Tab Navigator)
+const MemberScreen = () => {
+    const route = use
+  const { groupId } = route.params;
+  const [members, setMembers] = useState<Member[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchMembers = useCallback(async () => {
+    if (!groupId) {
+      setError('Group ID is missing.');
+      setLoading(false);
+      return;
+    } 
+
+    setLoading(true);
+    try {
+      const response = await apiCall<ApiResponse>(
+        `https://exotic-humpback-mistakenly.ngrok-free.app/api/fund/group/all/member?groupId=${groupId}`,
+        'GET'
+      );
+
+      if (response && response.status === 'success') {
+        setMembers(response.data);
+        setError(null);
+      } else {
+        throw new Error(response?.message || 'Failed to fetch members.');
+      }
+    } catch (e: any) {
+      setError(e.message || 'An unexpected network error occurred.');
+    } finally {
+      setLoading(false);
+    }
+  }, [groupId]);
+
+  useEffect(() => {
+    fetchMembers();
+  }, [fetchMembers]);
+
+  // --- Render Functions ---
+  const renderItem = ({ item }: { item: Member }) => {
+    const fullName = `${item.firstName} ${item.lastName || ''}`.trim();
+    const initial = item.firstName ? item.firstName.charAt(0).toUpperCase() : '?';
+    const isOrganizer = item.role === 'ORGANIZER';
+
+    return (
+
+      <TouchableOpacity style={styles.card}>
+        <View style={styles.avatarPlaceholder}>
+          <Text style={styles.avatarText}>{initial}</Text>
+        </View>
+        <View style={styles.infoContainer}>
+            <View style={{flexDirection:"row",justifyContent:"space-between"}}>
+          <Text style={styles.name}>{fullName}</Text>
+            {isOrganizer && (
+            <View style={styles.organizerIcon}>
+              <Text>Orginzer</Text>
+            </View>
+          )}
+          </View>
+          <Text style={styles.username}>@{item.username}</Text>
+
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <View style={styles.centered}>
+          <ActivityIndicator size="large" color="#4F46E5" />
+          <Text style={styles.loadingText}>Loading Members...</Text>
+        </View>
+      );
+    }
+
+    if (error) {
+      return (
+        <View style={styles.centered}>
+          <Ionicons name="cloud-offline-outline" size={60} color="#EF4444" />
+          <Text style={styles.errorTitle}>Oops!</Text>
+          <Text style={styles.errorText}>{error}</Text>
+          <TouchableOpacity style={styles.retryButton} onPress={fetchMembers}>
+            <Text style={styles.retryButtonText}>Try Again</Text>
+          </TouchableOpacity>
+        </View>
+      );
+    }
+
+    if (members.length === 0) {
+      return (
+        <View style={styles.centered}>
+            <Ionicons name="people-outline" size={60} color="#9CA3AF" />
+            <Text style={styles.emptyTitle}>No Members Yet</Text>
+            <Text style={styles.emptyText}>Invite people to join your group.</Text>
+        </View>
+      )
+    }
+
+    return (
+      <FlatList
+        data={members}
+        renderItem={renderItem}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.listContainer}
+        showsVerticalScrollIndicator={false}
+      />
+    );
+  };
+
+  return (
+   <AppView>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Group Members</Text>
+        <Text style={styles.headerSubtitle}>{members.length} member(s)</Text>
+      </View>
+      {renderContent()}
+    </AppView>
+  );
+};
+
+// --- Styles ---
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F3F4F6',
+  },
+  header: {
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    paddingBottom: 12,
+    backgroundColor: 'white',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+  },
+  headerTitle: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#111827',
+  },
+  headerSubtitle: {
+    fontSize: 16,
+    color: '#6B7280',
+    marginTop: 4,
+  },
+  listContainer: {
+    padding: 16,
+  },
+  card: {
+    flexDirection: 'row',
+    backgroundColor: '#FFFFFF',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 16,
+    alignItems: 'center',
+    shadowColor: '#374151',
+    shadowOpacity: 0.08,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 3,
+  },
+  avatarPlaceholder: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    backgroundColor: '#D1D5DB',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  avatarText: {
+    color: '#4B5563',
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  organizerIcon: {
+    borderRadius: 10,
+    padding: 2,
+    borderWidth: 2,
+    borderColor: colors.pastelOrange
+  },
+  infoContainer: {
+    flex: 1,
+  },
+  name: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827',
+  },
+  username: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginBottom: 8,
+  },
+  contactRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  contactText: {
+    marginLeft: 8,
+    fontSize: 14,
+    color: '#374151',
+  },
+  menuButton: {
+    padding: 8,
+    marginLeft: 8,
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  loadingText: {
+    marginTop: 10,
+    fontSize: 16,
+    color: '#6B7280',
+  },
+  errorTitle: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    color: '#EF4444',
+    marginBottom: 8,
+  },
+  errorText: {
+    fontSize: 16,
+    color: '#374151',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  retryButton: {
+    backgroundColor: '#4F46E5',
+    paddingVertical: 12,
+    paddingHorizontal: 30,
+    borderRadius: 8,
+  },
+  retryButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  emptyTitle: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    color: '#374151',
+    marginBottom: 8,
+  },
+  emptyText: {
+    fontSize: 16,
+    color: '#6B7280',
+    textAlign: 'center',
+  }
+});
+
+export default MemberScreen;