profile left

src/navigation/AppNavigator.tsx

@@ -6,6 +6,7 @@ import LoginScreen from "../screens/LoginScreen";
 import OtpVerificationScreen from "../screens/OtpVarificationScreen";
 import BottomTabs from "./BottomTabs";
 import SplashScreen from "../screens/SplashScreen";
+import OrganizerRegisterScreen from "../screens/OrgnizerRagister";
 
 const Stack = createNativeStackNavigator();
  export type RootStackParamList = {
@@ -14,6 +15,7 @@ const Stack = createNativeStackNavigator();
   Home:undefined
   HomeTabs:undefined
   splash: undefined
+  OrganizerRegister:undefined
 
 };
 
@@ -40,9 +42,10 @@ export default function AppNavigator() {
   return (
     <NavigationContainer>
       <Stack.Navigator initialRouteName="Splash">
-        <Stack.Screen name="Splash" component={SplashScreen} />
+        <Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }}  />
         <Stack.Screen name="HomeTabs" component={BottomTabs} options={{ headerShown: false }}  />
         <Stack.Screen name="Login" component={LoginScreen}   options={{ headerShown: false }} />
+         <Stack.Screen name="OrganizerRegister" component={OrganizerRegisterScreen}   options={{ headerShown: false }} />
         <Stack.Screen name="OtpVarify" component={OtpVerificationScreen}   options={{ headerShown: false }} />
         <Stack.Screen name="Profile" component={ProfileScreen} />
       </Stack.Navigator>

src/navigation/BottomTabs.tsx

@@ -1,31 +1,40 @@
 import React from "react";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { View, Text } from "react-native";
+import { View, Text, StyleSheet, Platform } from "react-native";
 import { Ionicons } from '@react-native-vector-icons/ionicons';
+import GroupScreen from "../screens/GroupScreen";
 
 const Tab = createBottomTabNavigator();
 
-// Dummy screens for now
+const TAB_CONFIG = {
+  activeColor: "#eb87a3ff", // coffee-like orange
+  inactiveColor: "#000000ff",
+  backgroundColor: "#e3e9efff",
+  height: 80,
+  iconSize: 30,
+  labelSize: 12,
+  labelWeight: "600",
+};
+
+// Dummy Screens
 function HomeScreen() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Text>🏠 Home</Text>
+    <View style={styles.screen}>
+      <Text style={styles.text}>🏠 Home</Text>
     </View>
   );
 }
-
 function ProfileScreen() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Text>👤 Profile</Text>
+    <View style={styles.screen}>
+      <Text style={styles.text}>👤 Profile</Text>
     </View>
   );
 }
-
 function SettingsScreen() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Text>⚙️ Settings</Text>
+    <View style={styles.screen}>
+      <Text style={styles.text}>⚙️ Settings</Text>
     </View>
   );
 }
@@ -35,24 +44,64 @@ export default function BottomTabs() {
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
-        tabBarShowLabel: true,
-        tabBarStyle: { backgroundColor: "#111", paddingBottom: 5, height: 60 },
-        tabBarActiveTintColor: "#FF7A00",
-        tabBarInactiveTintColor: "gray",
-        tabBarIcon: ({ color, size }) => {
+        tabBarStyle: styles.tabBar,
+        tabBarActiveTintColor: TAB_CONFIG.activeColor,
+        tabBarInactiveTintColor: TAB_CONFIG.inactiveColor,
+        tabBarLabelStyle: {
+          fontSize: TAB_CONFIG.labelSize,
+          fontWeight: TAB_CONFIG.labelWeight as any,
+          marginBottom: Platform.OS === "ios" ? 0 : 5,
+        },
+        tabBarIcon: ({ color, focused }) => {
           let iconName: string = "home-outline";
 
-          if (route.name === "Home") iconName = "home-outline";
-          else if (route.name === "Profile") iconName = "person-outline";
-          else if (route.name === "Settings") iconName = "settings-outline";
+          if (route.name === "Home") iconName = focused ? "home" : "home-outline";
+          else if (route.name === "Profile")
+            iconName = focused ? "person" : "person-outline";
+          else if (route.name === "Settings")
+            iconName = focused ? "settings" : "settings-outline";
+          else if (route.name === "Group")
+            iconName = focused ? "people" : "people-outline";
 
-          return <Ionicons name={iconName} size={size} color={color} />;
+          return <Ionicons name={iconName} size={TAB_CONFIG.iconSize} color={color} />;
         },
       })}
     >
       <Tab.Screen name="Home" component={HomeScreen} />
       <Tab.Screen name="Profile" component={ProfileScreen} />
+         <Tab.Screen name="Group" component={GroupScreen} />
       <Tab.Screen name="Settings" component={SettingsScreen} />
     </Tab.Navigator>
   );
 }
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#dae4ed",
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#111",
+  },
+  tabBar: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: TAB_CONFIG.height,
+    backgroundColor: TAB_CONFIG.backgroundColor,
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    shadowColor: "#000",
+    shadowOpacity: 0.10,
+    shadowOffset: { width: 0, height: -2 },
+    shadowRadius: 8,
+    elevation: 20,
+    paddingTop:10,
+    borderTopWidth: 0,
+  },
+});

src/screens/GroupScreen.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { FAB, Portal, Provider } from "react-native-paper";
+import Tooltip from "react-native-walkthrough-tooltip";
+import { MaterialIcons } from '@react-native-vector-icons/material-icons';
+
+export default function GroupScreen() {
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+
+  return (
+    <Provider>
+      <View style={styles.container}>
+        <Text style={styles.title}>Groups</Text>
+
+
+    <FAB
+      style={styles.fab}
+      icon={() => <MaterialIcons name="group-add" size={24} color="#eb87a3ff" />}
+      onPress={() => setTooltipVisible(true)}
+    />
+
+
+      </View>
+    </Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#dae4ed",
+    padding: 16,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "bold",
+    color: "#333",
+  },
+  fab: {
+    position: "absolute",
+    right: 20,
+    bottom: 90,
+    width: 70,
+    height: 70,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#dae4ed",
+    borderRadius: 60,
+  },
+  tooltipText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

src/screens/OrgnizerRagister.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  StyleSheet,
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} from "react-native";
+import axios from "axios";
+import { ORGRAGISTRATION } from "../utils/ApiUrls";
+import * as Keychain from "react-native-keychain";
+
+const theme = {
+  primary: "#111",
+  accent: "#FF7A00",
+  background: "#F9F9F9",
+  text: "#1A1A1A",
+  subText: "#6B6B6B",
+  outline: "#E5E5E5",
+};
+
+export default function OrganizerRegisterScreen() {
+  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", "All fields are required.");
+    return;
+  }
+
+  try {
+    setLoading(true);
+
+    // 🔑 get token from Keychain
+    const creds = await Keychain.getGenericPassword();
+    const token = creds ? creds.password : null;
+
+    if (!token) {
+      Alert.alert("Error", "No token found. Please log in again.");
+      setLoading(false);
+      return;
+    }
+
+    const payload = {
+      bankAccountNumber,
+      bankName,
+      branchCode,
+    };
+
+    const res = await axios.post(
+      ORGRAGISTRATION, // your API endpoint
+      payload,
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`, // 👈 token added here
+        },
+      }
+    );
+
+    console.log("✅ Organizer Registered:", res.data);
+    Alert.alert("Success", "Organizer registered successfully!");
+  } catch (err: any) {
+    console.error("❌ Register Error:", err?.response?.data || err.message);
+    Alert.alert("Error", "Failed to register. Please try again.");
+  } finally {
+    setLoading(false);
+  }
+};
+
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1, backgroundColor: theme.background }}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <ScrollView contentContainerStyle={styles.container}>
+        <Text style={styles.title}>Organizer Registration 📝</Text>
+
+        <TextInput
+          placeholder="Bank Account Number"
+          style={styles.input}
+          value={bankAccountNumber}
+          onChangeText={setBankAccountNumber}
+          keyboardType="numeric"
+        />
+
+        <TextInput
+          placeholder="Bank Name"
+          style={styles.input}
+          value={bankName}
+          onChangeText={setBankName}
+        />
+
+        <TextInput
+          placeholder="Branch Code"
+          style={styles.input}
+          value={branchCode}
+          onChangeText={setBranchCode}
+        />
+
+        <Pressable style={styles.button} onPress={handleSubmit} disabled={loading}>
+          <Text style={styles.buttonText}>{loading ? "Submitting..." : "Submit"}</Text>
+        </Pressable>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    justifyContent: "center",
+    padding: 20,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "700",
+    color: theme.text,
+    marginBottom: 20,
+    textAlign: "center",
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: theme.outline,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 15,
+    fontSize: 16,
+    backgroundColor: "#fff",
+  },
+  button: {
+    backgroundColor: theme.primary,
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: "center",
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+    fontSize: 16,
+  },
+});

src/screens/OtpVarificationScreen.tsx

@@ -85,7 +85,7 @@ export default function OtpVerificationScreen() {
       if (res.data.statusCode === 200) {
         saveToken(res.data.data);
            
-      navigation.navigate('Home')
+      navigation.navigate('HomeTabs')
 
       }
     } catch (err: any) {

src/screens/SplashScreen.tsx

@@ -1,14 +1,13 @@
-import React, { useEffect } from "react";
-import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
+import React, { useEffect, useRef } from "react";
+import { View, Text, StyleSheet, ActivityIndicator, Animated } from "react-native";
 import * as Keychain from "react-native-keychain";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { useNavigation } from "@react-navigation/native";
 import { RootStackParamList } from "../navigation/AppNavigator"; // adjust path
 
-
-
 const SplashScreen = () => {
-    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+  const fadeAnim = useRef(new Animated.Value(1)).current; // opacity starts at 1
 
   useEffect(() => {
     const checkLogin = async () => {
@@ -16,9 +15,9 @@ const SplashScreen = () => {
         const creds = await Keychain.getGenericPassword();
         if (creds) {
           console.log("🔑 Found token:", creds.password);
-          navigation.replace("HomeTabs"); // go to bottom tabs if logged in
+          navigation.replace("HomeTabs");
         } else {
-          navigation.replace("Login"); // go to login if not logged in
+          navigation.replace("Login");
         }
       } catch (error) {
         console.error("Error checking login:", error);
@@ -26,12 +25,22 @@ const SplashScreen = () => {
       }
     };
 
-    setTimeout(checkLogin, 1500); // show splash for 1.5s
-  }, [navigation]);
+    // Start fade out animation
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 1500, // fade out in 1.5s
+      useNativeDriver: true,
+      delay: 1500, // wait before fading
+    }).start(() => {
+      checkLogin(); // only navigate after animation
+    });
+  }, [navigation, fadeAnim]);
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Circle Collect</Text>
+      <Animated.Text style={[styles.title, { opacity: fadeAnim }]}>
+        Circle Collect
+      </Animated.Text>
       <ActivityIndicator size="large" color="#FF7A00" style={{ marginTop: 20 }} />
     </View>
   );
@@ -44,7 +53,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#111111",
+    backgroundColor: "#FFFFFF", // white background
   },
   title: {
     fontSize: 28,

src/utils/ApiUrls.tsx

@@ -1,2 +1,3 @@
 export  const LOGIN_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/generate/otp?mobile="
-export  const VARIFY_OTP_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/otp/verify"
+export  const VARIFY_OTP_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/otp/verify"
+export  const ORGRAGISTRATION = "https://exotic-humpback-mistakenly.ngrok-free.app/api/organizer/registration/apply "