managment screen upadte

src/screens/GroupScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import {
   View,
   Text,
@@ -20,8 +20,10 @@ import { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../navigation/AppNavigator";
 import AppView from "../components/AppView";
 import { apiCall } from "../utils/ApiHelper";
-import { JOIN_GROUP_URL } from "../utils/ApiUrls";
-
+import { BASE_URL, JOIN_GROUP_URL } from "../utils/ApiUrls";
+import colors from "../components/colors";
+import { ApiResponse } from "./home/UserProfileStatus";
+import * as Keychain from "react-native-keychain";
 const { width } = Dimensions.get('window');
 const PUBLIC_GROUPS_URL = "https://api.godemo.in/FundCollect/api/fund/user/public";
 
@@ -89,6 +91,7 @@ export default function GroupScreen() {
   const [featuredGroups, setFeaturedGroups] = useState<Group[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [role, setRole] = useState<string | null>(null);
 
   const fetchGroups = async () => {
     if (loading) return;
@@ -137,7 +140,50 @@ export default function GroupScreen() {
       Alert.alert("Error", "An unexpected error occurred.");
     }
   };
+    const userStatus = async () => {
+        try {
+            const credentials = await Keychain.getGenericPassword();
+            if (!credentials) {
+                Alert.alert("Error", "You are not logged in");
+                return;
+            }
+            const token = credentials.password;
 
+            setLoading(true);
+            setError(null);
+            const response = await fetch(`${BASE_URL}user/profile/status`, {
+                method: "GET",
+                headers: {
+                    Accept: "*/*",
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+
+            const json: ApiResponse = await response.json();
+
+            console.log("👤 Profile Status Response:", json);
+            if (json.status === "success") {
+               setRole(json.data.role);
+
+                if (json.data.profileStatus === false) {
+                
+                }
+            } else {
+                setError(json.message || "Failed to fetch status");
+            }
+        } catch (err) {
+            setError("Something went wrong. Please try again.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+      useFocusEffect(
+          useCallback(() => {
+              userStatus();
+          }, [])
+      );
+  
 
   const handleViewGroup = (group: Group) => {
     // navigation.navigate('GroupDetails', { group });
@@ -205,11 +251,16 @@ export default function GroupScreen() {
 
         <View style={styles.tabHeader}>
           <View style={styles.segmentedControl}>
-            {["My Groups", "Joined", "Public"].map((tab) => (
+
+            {role === "ORGANIZER" ? (["My Groups", "Joined", "Public"].map((tab) => (
               <TouchableOpacity key={tab} style={[styles.segmentButton, activeTab === tab && styles.segmentButtonActive]} onPress={() => setActiveTab(tab)}>
                 <Text style={[styles.segmentText, activeTab === tab && styles.segmentTextActive]}>{tab}</Text>
               </TouchableOpacity>
-            ))}
+            ))) : (["Joined", "Public"].map((tab) => (
+              <TouchableOpacity key={tab} style={[styles.segmentButton, activeTab === tab && styles.segmentButtonActive]} onPress={() => setActiveTab(tab)}>
+                <Text style={[styles.segmentText, activeTab === tab && styles.segmentTextActive]}>{tab}</Text>
+              </TouchableOpacity>
+            ))) }
           </View>
           <TouchableOpacity onPress={() => setIsGridView(!isGridView)} style={styles.layoutToggleButton}>
             <Ionicons name={isGridView ? "list" : "grid"} size={22} color="#555" />
@@ -219,7 +270,9 @@ export default function GroupScreen() {
         {/* The list now renders inside a simple View, as FlatList handles its own scroll */}
         <View style={styles.contentArea}>{renderContent()}</View>
       </ScrollView>
-      <FAB style={styles.fab} icon={() => <MaterialIcons name="group-add" size={24} color="#333" />} onPress={() => navigation.navigate('GroupCreation')} />
+      {role === "ORGANIZER" && (
+        <FAB style={styles.fab} icon={() => <MaterialIcons name="group-add" size={24} color="#333" />} onPress={() => navigation.navigate('GroupCreation')} />
+      )}
     </AppView>
   );
 }
@@ -241,12 +294,12 @@ const styles = StyleSheet.create({
   tabHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, marginBottom: 16 },
   segmentedControl: { flex: 1, flexDirection: 'row', backgroundColor: '#e9ecef', borderRadius: 10, padding: 4, marginRight: 10 },
   segmentButton: { flex: 1, paddingVertical: 10, borderRadius: 8, alignItems: 'center' },
-  segmentButtonActive: { backgroundColor: '#fff', elevation: 2, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 5 },
+  segmentButtonActive: { backgroundColor: colors.pastelGreen, elevation: 2, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 5 },
   segmentText: { fontSize: 14, fontWeight: '600', color: '#555' },
   segmentTextActive: { color: '#333' },
   layoutToggleButton: { padding: 8 },
   contentArea: { paddingHorizontal: 16 },
-  fab: { position: "absolute", right: 20, bottom: 90, width: 60, height: 60, justifyContent: "center", alignItems: "center", backgroundColor: "#83f5cc", borderRadius: 30, elevation: 4 },
+  fab: { position: "absolute", right: 20, bottom: 90, width: 60, height: 60, justifyContent: "center", alignItems: "center", backgroundColor: colors.pastelGreen, borderRadius: 30, elevation: 4 },
   listCard: { backgroundColor: '#fff', padding: 16, borderRadius: 12, marginBottom: 12, elevation: 1 },
   gridCard: { backgroundColor: '#fff', padding: 12, borderRadius: 12, marginBottom: 12, elevation: 1, width: (width - 48) / 2 },
   groupName: { fontSize: 16, fontWeight: 'bold', color: '#333' },
@@ -258,7 +311,7 @@ const styles = StyleSheet.create({
   buttonContainer: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8 },
   viewButton: { flex: 1, backgroundColor: '#e9ecef', paddingVertical: 10, borderRadius: 8, alignItems: 'center', marginRight: 5 },
   viewButtonText: { color: '#333', fontWeight: 'bold', fontSize: 14 },
-  joinButton: { flex: 1, backgroundColor: '#83f5cc', paddingVertical: 10, borderRadius: 8, alignItems: 'center', marginLeft: 5 },
+  joinButton: { flex: 1, backgroundColor: colors.pastelGreen, paddingVertical: 10, borderRadius: 8, alignItems: 'center', marginLeft: 5 },
   joinButtonDisabled: { backgroundColor: '#bdc3c7' },
   joinButtonText: { color: '#333', fontWeight: 'bold', fontSize: 14 },
 });