create orgnizer screen and intrigate api

src/screens/profile/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import {
   StyleSheet,
   View,
@@ -18,6 +18,10 @@ import { Ionicons } from "@react-native-vector-icons/ionicons";
 import { launchImageLibrary } from "react-native-image-picker";
 import { base_URL } from "../../utils/ApiUrls";
 import { CustomButton, CustomInput } from "../../components/common/Custom";
+import colors from "../../components/colors";
+import SwitchNavigator from "./SwitchNavigator";
+import { useFocusEffect } from "@react-navigation/native";
+import { ApiResponse } from "../home/UserProfileStatus";
 
 
 
@@ -45,6 +49,9 @@ const Profile = () => {
   const [fetching, setFetching] = useState(true);
   const [editing, setEditing] = useState(false);
   const [imageUpdating, setImageUpdating] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [statusData, setStatusData] = useState<null | { profileStatus: boolean; organizerStatus: string; role: string }>(null);
+  const [error, setError] = useState<string | null>(null);
 
   const fetchUserProfile = async () => {
     try {
@@ -198,6 +205,48 @@ const Profile = () => {
     }
   };
 
+  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") {
+        setStatusData(json.data);
+
+      } else {
+        setError(json.message || "Failed to fetch status");
+      }
+    } catch (err) {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      userStatus();
+    }, [])
+  );
+
+  console.log("login user data :", user);
 
   useEffect(() => {
     fetchUserProfile();
@@ -243,9 +292,15 @@ const Profile = () => {
           contentContainerStyle={{ flexGrow: 1 }}
           keyboardShouldPersistTaps="handled"
         >
+
           {/* Profile Card */}
           <View style={styles.profileCard}>
             {/* Profile Image Section */}
+            {
+              statusData?.role && statusData?.organizerStatus ?
+                <Text style={{ color: "#64748b", marginBottom: 16 , textAlign:'center', fontSize:18}}>Your Role: {statusData.role} | Organizer Status: {statusData.organizerStatus}</Text>
+                :
+                <SwitchNavigator role={statusData?.role || ''} status={statusData?.organizerStatus || ''} />}
             <View style={styles.profileImageSection}>
               <View style={styles.avatarContainer}>
                 <Image
@@ -263,7 +318,7 @@ const Profile = () => {
                 onPress={handleUpdateImage}
                 icon={imageUpdating ? undefined : "cloud-upload"}
                 style={styles.updateImageButton}
-              // disabled={imageUpdating}
+                buttonBackground="#6366f1"
 
               />
             </View>
@@ -340,6 +395,7 @@ const Profile = () => {
                   onPress={() => setEditing(true)}
                   icon="create"
                   style={styles.editButton}
+                  buttonBackground="#6366f1"
                 />
               </>
             ) : (
@@ -402,13 +458,14 @@ const Profile = () => {
                     onPress={updateProfile}
                     icon="save"
                     style={styles.saveButton}
+                    buttonBackground="#10b981"
                   />
                   <CustomButton
                     title="Cancel"
-                    type="outline"
                     onPress={() => setEditing(false)}
                     icon="close"
                     style={styles.cancelButton}
+                    buttonBackground="#f38080ff"
                   />
                 </View>
               </>
@@ -423,7 +480,7 @@ const Profile = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#f8fafc",
+    backgroundColor: colors.pastelBlue,
     marginBottom: '30%',
   },
   loadingContainer: {
@@ -506,6 +563,8 @@ const styles = StyleSheet.create({
   },
   updateImageButton: {
     width: "80%",
+    paddingHorizontal: 10,
+    borderRadius: 25,
   },
   detailsSection: {
     marginBottom: 24,