create orgnizer screen and intrigate api

src/screens/profile/BecomeOrg.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Alert,
+  ActivityIndicator,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+} from "react-native";
+import * as Keychain from "react-native-keychain";
+import { CustomInput, CustomButton } from "../../components/common/Custom";
+import colors from "../../components/colors";
+
+const BecomeOrg = () => {
+  const [bankAccountNumber, setBankAccountNumber] = useState("");
+  const [bankName, setBankName] = useState("");
+  const [branchCode, setBranchCode] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!bankAccountNumber || !bankName || !branchCode) {
+      Alert.alert("Error", "Please fill all fields");
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const credentials = await Keychain.getGenericPassword();
+      if (!credentials) {
+        Alert.alert("Error", "You are not logged in");
+        return;
+      }
+      const token = credentials.password;
+
+      const response = await fetch(
+        "https://api.godemo.in/FundCollect/api/organizer/registration/apply",
+        {
+          method: "POST",
+          headers: {
+            Accept: "*/*",
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({
+            bankAccountNumber,
+            bankName,
+            branchCode,
+          }),
+        }
+      );
+
+      const result = await response.json();
+      if (result.status === "success") {
+        Alert.alert("Success", "Organizer registration applied successfully");
+        setBankAccountNumber("");
+        setBankName("");
+        setBranchCode("");
+      } else {
+        Alert.alert("Error", result.message || "Failed to apply");
+      }
+    } catch (error) {
+      console.error("❌ Registration error:", error);
+      Alert.alert("Error", "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: colors.pastelPink }}>
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        keyboardVerticalOffset={Platform.OS === "ios" ? 60 : 0}
+      >
+        <ScrollView
+          contentContainerStyle={styles.container}
+          keyboardShouldPersistTaps="handled"
+        >
+          <Text style={styles.title}>Organizer Registration</Text>
+
+          <CustomInput
+            placeholder="Bank Account Number"
+            keyboardType="numeric"
+            value={bankAccountNumber}
+            onChangeText={setBankAccountNumber}
+            icon="card-outline"
+          />
+
+          <CustomInput
+            placeholder="Bank Name"
+            value={bankName}
+            onChangeText={setBankName}
+            icon="business-outline"
+          />
+
+          <CustomInput
+            placeholder="Branch Code"
+            value={branchCode}
+            onChangeText={setBranchCode}
+            icon="key-outline"
+          />
+
+          <CustomButton
+            title={loading ? "Submitting..." : "Request Organizer Role"}
+            onPress={handleSubmit}
+            icon="send-outline"
+            buttonBackground={colors.pastelBlue}
+            style={{ opacity: loading ? 0.6 : 1 }}
+          />
+
+          {loading && (
+            <ActivityIndicator
+              style={{ marginTop: 15 }}
+              size="large"
+              color={colors.primary}
+            />
+          )}
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+export default BecomeOrg;
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    padding: 20,
+    justifyContent: "center",
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "700",
+    marginBottom: 20,
+    textAlign: "center",
+    color: colors.textDark,
+  },
+});

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,

src/screens/profile/SwitchNavigator.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet, Switch } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
+
+type RootStackParamList = {
+  BecomeOrg: undefined;
+  Profile: undefined;
+};
+
+type SwitchNavigatorProps = {
+  role: string;
+  status: string;
+};
+
+const SwitchNavigator: React.FC<SwitchNavigatorProps> = ({ role, status }) => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  const toggleSwitch = () => {
+    const newValue = !isEnabled;
+    setIsEnabled(newValue);
+
+    if (newValue) {
+      navigation.navigate("BecomeOrg"); // Navigate when ON
+    } else {
+      navigation.navigate("Profile"); // Navigate when OFF
+    }
+  };
+
+  console.log("status :", status);
+  console.log("role :", role);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>
+        {!isEnabled && role !== "USER" 
+          ? "Become an Organizer"
+          : `Request Organizer Role ${status}`}
+      </Text>
+      <Switch
+        trackColor={{ false: "#767577", true: "#81b0ff" }}
+        thumbColor={isEnabled ? "#007AFF" : "#f4f3f4"}
+        ios_backgroundColor="#3e3e3e"
+        onValueChange={toggleSwitch}
+        value={isEnabled}
+      />
+    </View>
+  );
+};
+
+export default SwitchNavigator;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: 'flex-end',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    gap: 10,
+  },
+  text: {
+    fontSize: 18,
+    flexShrink: 1, // Wrap text if too long
+  },
+});