update login and verify otp

src/screens/LoginScreen.tsx

@@ -27,9 +27,10 @@ const theme = {
 };
 
 export default function LoginScreen() {
+  
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const [mobile, setMobile] = useState("");
-    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+  const [loading, setLoading] = useState(false);
-
 
   // animations
   const fade = useRef(new Animated.Value(0)).current;
@@ -43,17 +44,21 @@ export default function LoginScreen() {
     ]).start();
   }, []);
 
- const handleContinue = async () => {
+  const handleContinue = async () => {
     if (mobile.length === 10) {
-      console.log("Mobile submitted:", mobile);
+      setLoading(true);
       try {
-        const res = await axios.get(LOGIN_URL+mobile)
+        console.log("Mobile submitted:", mobile);
-        console.log('loginres',res.data)
+        const res = await axios.get(LOGIN_URL + mobile)
-        if(res.data.statusCode === 200){
+        console.log('loginres', res.data)
-            navigation.navigate('OtpVarify', { mobile: mobile })
+        if (res.data.statusCode === 200) {
+          navigation.navigate('OtpVarify', { mobile: mobile })
         }
       } catch (error) {
-        
+        console.error("Login error:", error);
+        Alert.alert("Error", "Failed to send OTP. Please try again.");
+      }finally {
+        setLoading(false);
       }
     } else {
       Alert.alert("Please enter a valid 10-digit mobile number");

src/screens/OtpVarificationScreen.tsx

@@ -14,10 +14,11 @@ import {
   KeyboardAvoidingView,
   StatusBar,
   Alert,
+  ToastAndroid,
 } from "react-native";
 import { RootStackParamList } from "../navigation/AppNavigator";
 import * as Keychain from "react-native-keychain";
-import { LOGIN_URL } from "../utils/ApiUrls";
+import { base_URL, LOGIN_URL } from "../utils/ApiUrls";
 import { StackNavigationProp } from "@react-navigation/stack";
 
 const theme = {
@@ -76,7 +77,7 @@ export default function OtpVerificationScreen() {
     try {
       const payload = { mobile, otp };
       const res = await axios.post(
-        "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/otp/verify",
+        `${base_URL}user/otp/verify`,
         payload,
         { headers: { "Content-Type": "application/json", Accept: "*/*" } }
       );
@@ -85,11 +86,10 @@ export default function OtpVerificationScreen() {
       if (res.data.statusCode === 200) {
         saveToken(res.data.data);
         navigation.navigate('Home')
-
+        ToastAndroid.show("OTP Verified Successfully!", ToastAndroid.SHORT);}
-      }
     } catch (err: any) {
       console.error("❌ OTP Verification Error:", err?.response?.data || err.message);
-      Alert.alert("Error", "Failed to verify OTP. Please try again.");
+      ToastAndroid.show(err.message || "Invalid OTP. Please try again.", ToastAndroid.SHORT);
     }
   };
 
@@ -104,11 +104,12 @@ export default function OtpVerificationScreen() {
       );
 
       console.log("📩 OTP Resent:", res.data);
-
+      setCode(Array(CELL_COUNT).fill(""));
-      Alert.alert("OTP Sent", "A new OTP has been sent to your mobile.");
+      inputs.current[0]?.focus();
+      ToastAndroid.show("OTP Sent", ToastAndroid.SHORT);
     } catch (err: any) {
       console.error("❌ Resend OTP Error:", err?.response?.data || err.message);
-      Alert.alert("Error", "Failed to resend OTP. Try again later.");
+      ToastAndroid.show("Failed to resend OTP. Try again later.", ToastAndroid.SHORT);
     } finally {
       setIsResending(false);
     }

src/screens/profile/Profile.tsx

@@ -7,16 +7,116 @@ import {
   Image,
   TouchableOpacity,
   Alert,
-  TextInput,
   ActivityIndicator,
+  StatusBar,
+  TextInput,
 } from "react-native";
 import * as Keychain from "react-native-keychain";
-import Ionicons from "react-native-vector-icons/Ionicons";
+import {Ionicons} from "@react-native-vector-icons/ionicons";
 import { launchImageLibrary } from "react-native-image-picker";
-import { CustomButton, CustomInput } from "../../common/Custom";
+import { IconProps } from "react-native-elements";
+import { base_URL } from "../../utils/ApiUrls";
 
-// ✅ Reusable Custom Input
 
+type CustomButtonProps = {
+  title: string;
+  onPress: () => void;
+  type?: "primary" | "secondary" | "danger" | "outline";
+  icon?: React.ComponentProps<typeof Ionicons>['name'];
+  style?: any;
+};
+
+const CustomButton = ({ 
+  title, 
+  onPress, 
+  type = "primary", 
+  icon,
+  style 
+}: CustomButtonProps) => {
+  const getButtonStyle = () => {
+    switch (type) {
+      case "secondary":
+        return [styles.button, styles.buttonSecondary];
+      case "danger":
+        return [styles.button, styles.buttonDanger];
+      case "outline":
+        return [styles.button, styles.buttonOutline];
+      default:
+        return styles.button;
+    }
+  };
+
+  const getTextStyle = () => {
+    switch (type) {
+      case "secondary":
+        return [styles.buttonText, styles.buttonTextSecondary];
+      case "danger":
+        return [styles.buttonText, styles.buttonTextDanger];
+      case "outline":
+        return [styles.buttonText, styles.buttonTextOutline];
+      default:
+        return styles.buttonText;
+    }
+  };
+
+  return (
+    <TouchableOpacity 
+      style={[getButtonStyle(), style]} 
+      onPress={onPress}
+      activeOpacity={0.8}
+    >
+      {icon && (
+        <Ionicons
+          name={icon}
+          size={18}
+          color={
+            Array.isArray(getTextStyle())
+              ? getTextStyle().find((s: any) => s && typeof s === "object" && "color" in s)?.color || "#fff"
+              : (getTextStyle() as any).color || "#fff"
+          }
+          style={styles.buttonIcon}
+        />
+      )}
+      <Text style={getTextStyle()}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+// Custom Input Component
+type CustomInputProps = {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  icon?: React.ComponentProps<typeof Ionicons>['name'];
+  [key: string]: any;
+};
+
+const CustomInput = ({ 
+  label, 
+  placeholder, 
+  value, 
+  onChangeText, 
+  icon,
+  ...props 
+}: CustomInputProps) => {
+  return (
+    <View style={styles.inputContainer}>
+      {label && <Text style={styles.inputLabel}>{label}</Text>}
+      <View style={styles.inputWrapper}>
+        {icon && <Ionicons name={icon} size={20} color="#666" style={styles.inputIcon} />}
+        <TextInput
+          style={[styles.input, icon && styles.inputWithIcon]}
+          placeholder={placeholder}
+          placeholderTextColor="#999"
+          value={value}
+          onChangeText={onChangeText}
+          {...props}
+        />
+      </View>
+    </View>
+  );
+};
 
 type UserProfile = {
   id: string;
@@ -41,6 +141,7 @@ const Profile = () => {
   const [user, setUser] = useState<UserProfile | null>(null);
   const [fetching, setFetching] = useState(true);
   const [editing, setEditing] = useState(false);
+  const [imageUpdating, setImageUpdating] = useState(false);
 
   const fetchUserProfile = async () => {
     try {
@@ -53,7 +154,7 @@ const Profile = () => {
 
       setFetching(true);
       const response = await fetch(
-        "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/profile/view",
+        `${base_URL}user/profile/view`,
         {
           method: "GET",
           headers: {
@@ -87,7 +188,7 @@ const Profile = () => {
       const token = credentials.password;
 
       const response = await fetch(
-        "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/profile/update",
+        `${base_URL}user/profile/update`,
         {
           method: "PUT",
           headers: {
@@ -135,230 +236,489 @@ const Profile = () => {
   };
 
   const handleUpdateImage = async () => {
-    try {
+  try {
-      const credentials = await Keychain.getGenericPassword();
+    const credentials = await Keychain.getGenericPassword();
-      if (!credentials) {
+    if (!credentials) {
-        Alert.alert("Error", "You are not logged in");
+      Alert.alert("Error", "You are not logged in");
-        return;
+      return;
-      }
-      const token = credentials.password;
-
-      if (!user?.filePath) {
-        Alert.alert("Error", "Please select an image first");
-        return;
-      }
-
-      const formData = new FormData();
-      formData.append("file", {
-        uri: user.filePath,
-        type: "image/jpeg",
-        name: "profile.jpg",
-      } as any);
-
-      const response = await fetch(
-        "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/update/userImg",
-        {
-          method: "PUT",
-          headers: {
-            Accept: "*/*",
-            Authorization: `Bearer ${token}`,
-          },
-          body: formData,
-        }
-      );
-
-      const result = await response.json();
-      if (result.status === "success") {
-        Alert.alert("Success", "Profile image updated successfully");
-        fetchUserProfile();
-      } else {
-        Alert.alert("Error", "Failed to update profile image");
-      }
-    } catch (error) {
-      console.error("❌ Error updating profile image:", error);
-      Alert.alert("Error", "Could not update profile image");
     }
-  };
+    const token = credentials.password;
+
+    if (!user?.filePath) {
+      Alert.alert("Error", "Please select an image first");
+      return;
+    }
+
+    setImageUpdating(true);
+
+    const formData = new FormData();
+    formData.append("file", {
+      uri: user.filePath,
+      type: "image/jpeg",
+      name: "profile.jpg",
+    } as any);
+
+    const response = await fetch(
+      `${base_URL}user/update/userImg`,
+      {
+        method: "PUT",
+        headers: {
+          Accept: "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      }
+    );
+
+    const result = await response.json();
+    if (result.status === "success") {
+      Alert.alert("Success", "Profile image updated successfully");
+
+      // If API returns updated image, set it
+      if (result.data?.imageBlob) {
+        setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
+      } else {
+        // Otherwise, keep the local filePath until next fetch
+        setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
+      }
+
+      // Refresh profile from API as well
+      fetchUserProfile();
+    } else {
+      Alert.alert("Error", result.message || "Failed to update profile image");
+    }
+  } catch (error) {
+    console.error("❌ Error updating profile image:", error);
+    Alert.alert("Error", "Could not update profile image");
+  } finally {
+    setImageUpdating(false);
+  }
+};
+
 
   useEffect(() => {
     fetchUserProfile();
   }, []);
 
-  const getProfileImage = () => {
+  console.log("user image :", user?.filePath);
-    if (user?.filePath) return user.filePath;
+const getProfileImage = () => {
-    if (user?.imageBlob) return `data:image/jpeg;base64,${user.imageBlob}`;
+  if (user?.imageBlob) {
-    return "https://randomuser.me/api/portraits/men/1.jpg";
+    return `data:image/jpeg;base64,${user.imageBlob}`;
-  };
+  }
+  if (user?.filePath) {
+    return user.filePath;
+  }
+  return "https://randomuser.me/api/portraits/men/1.jpg";
+};
+
 
   if (fetching || !user) {
     return (
       <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color="#007AFF" />
+        <ActivityIndicator size="large" color="#6366f1" />
         <Text style={styles.loadingText}>Loading profile...</Text>
       </View>
     );
   }
 
   return (
-    <>
+    <View style={styles.container}>
+      <StatusBar backgroundColor="#6366f1" barStyle="light-content" />
+      
+      {/* Header */}
       <View style={styles.header}>
         <Text style={styles.headerTitle}>User Profile</Text>
-        <TouchableOpacity onPress={fetchUserProfile}>
+        <TouchableOpacity onPress={fetchUserProfile} style={styles.refreshButton}>
-          <Ionicons name="refresh" size={24} color="#007AFF" />
+          <Ionicons name="refresh" size={24} color="#fff" />
         </TouchableOpacity>
       </View>
 
-      <ScrollView style={styles.container}>
+      <ScrollView style={styles.scrollContainer}>
+        {/* Profile Card */}
         <View style={styles.profileCard}>
-          <View style={styles.profileHeader}>
+          {/* Profile Image Section */}
-            <Image source={{ uri: getProfileImage() }} style={styles.avatar} />
+          <View style={styles.profileImageSection}>
-            <TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
+            <View style={styles.avatarContainer}>
-              <Ionicons name="camera" size={18} color="white" />
+              <Image 
-            </TouchableOpacity>
+                source={{ uri: getProfileImage()  }} 
+                style={styles.avatar} 
+                onError={() => console.log("Error loading image")}
+              />
+              <TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
+                <Ionicons name="camera" size={18} color="white" />
+              </TouchableOpacity>
+            </View>
+            
+            <CustomButton 
+              title={imageUpdating ? "Updating..." : "Update Image"} 
+              onPress={handleUpdateImage}
+              icon={imageUpdating ? undefined : "cloud-upload"}
+              style={styles.updateImageButton}
+              // disabled={imageUpdating}
+            />
           </View>
 
-          <CustomButton title="Update Image" onPress={handleUpdateImage} />
-
           {!editing ? (
             <>
-              <Text style={styles.detail}>👤 {user.firstName} {user.lastName}</Text>
+              {/* Profile Details */}
-              <Text style={styles.detail}>📧 {user.email}</Text>
+              <View style={styles.detailsSection}>
-              <Text style={styles.detail}>📱 {user.mobile}</Text>
+                <Text style={styles.sectionTitle}>Personal Information</Text>
-              <Text style={styles.detail}>🔑 {user.username}</Text>
+                <View style={{ marginBottom: 16 }}>
-              <Text style={styles.detail}>🏠 {user.address}</Text>
+                  
-              <Text style={styles.detail}>⚧ {user.gender}</Text>
+                  <Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
-              <Text style={styles.detail}>🛡 Role: {user.role}</Text>
+                </View>
 
-              <CustomButton title="Edit Profile" onPress={() => setEditing(true)} />
+                <View style={styles.detailRow}>
+                  <Ionicons name="person" size={20} color="#6366f1" style={styles.detailIcon} />
+                  <View>
+                    <Text style={styles.detailLabel}>Name</Text>
+                    <Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
+                  </View>
+                </View>
+                
+                <View style={styles.detailRow}>
+                  <Ionicons name="mail" size={20} color="#6366f1" style={styles.detailIcon} />
+                  <View>
+                    <Text style={styles.detailLabel}>Email</Text>
+                    <Text style={styles.detailText}>{user.email || "Not provided"}</Text>
+                  </View>
+                </View>
+                
+                <View style={styles.detailRow}>
+                  <Ionicons name="call" size={20} color="#6366f1" style={styles.detailIcon} />
+                  <View>
+                    <Text style={styles.detailLabel}>Mobile</Text>
+                    <Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
+                  </View>
+                </View>
+                
+                <View style={styles.detailRow}>
+                  <Ionicons name="at-circle" size={20} color="#6366f1" style={styles.detailIcon} />
+                  <View>
+                    <Text style={styles.detailLabel}>Username</Text>
+                    <Text style={styles.detailText}>{user.username}</Text>
+                  </View>
+                </View>
+                
+                <View style={styles.detailRow}>
+                  <Ionicons name="location" size={20} color="#6366f1" style={styles.detailIcon} />
+                  <View>
+                    <Text style={styles.detailLabel}>Address</Text>
+                    <Text style={styles.detailText}>{user.address || "Not provided"}</Text>
+                  </View>
+                </View>
+                
+                <View style={styles.detailRow}>
+                  <Ionicons name="male-female" size={20} color="#6366f1" style={styles.detailIcon} />
+                  <View>
+                    <Text style={styles.detailLabel}>Gender</Text>
+                    <Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
+                  </View>
+                </View>
+                
+                <View style={styles.detailRow}>
+                  <Ionicons name="key" size={20} color="#6366f1" style={styles.detailIcon} />
+                  <View>
+                    <Text style={styles.detailLabel}>Role</Text>
+                    <Text style={styles.detailText}>{user.role || "User"}</Text>
+                  </View>
+                </View>
+              </View>
+
+              <CustomButton 
+                title="Edit Profile" 
+                onPress={() => setEditing(true)}
+                icon="create"
+                style={styles.editButton}
+              />
             </>
           ) : (
             <>
-              <CustomInput
+              {/* Edit Form */}
-                label="First Name"
+              <View style={styles.editSection}>
-                placeholder="Enter first name"
+                <Text style={styles.sectionTitle}>Edit Profile</Text>
-                value={user.firstName ?? ""}
+                
-                onChangeText={(text: any) => setUser({ ...user, firstName: text })}
+                <CustomInput
-              />
+                  label="First Name"
-              <CustomInput
+                  placeholder="Enter first name"
-                label="Last Name"
+                  value={user.firstName ?? ""}
-                placeholder="Enter last name"
+                  onChangeText={(text) => setUser({ ...user, firstName: text })}
-                value={user.lastName ?? ""}
+                  icon="person"
-                onChangeText={(text: any) => setUser({ ...user, lastName: text })}
+                />
-              />
+                
-              <CustomInput
+                <CustomInput
-                label="Email"
+                  label="Last Name"
-                placeholder="Enter email"
+                  placeholder="Enter last name"
-                value={user.email ?? ""}
+                  value={user.lastName ?? ""}
-                onChangeText={(text: any) => setUser({ ...user, email: text })}
+                  onChangeText={(text) => setUser({ ...user, lastName: text })}
-              />
+                  icon="person"
-              <CustomInput
+                />
-                label="Username"
+                
-                placeholder="Enter username"
+                <CustomInput
-                value={user.username ?? ""}
+                  label="Email"
-                onChangeText={(text: any) => setUser({ ...user, username: text })}
+                  placeholder="Enter email"
-              />
+                  value={user.email ?? ""}
-              <CustomInput
+                  onChangeText={(text) => setUser({ ...user, email: text })}
-                label="Address"
+                  icon="mail"
-                placeholder="Enter address"
+                  keyboardType="email-address"
-                value={user.address ?? ""}
+                />
-                onChangeText={(text: any) => setUser({ ...user, address: text })}
+                
-              />
+                <CustomInput
-              <CustomInput
+                  label="Username"
-                label="Gender"
+                  placeholder="Enter username"
-                placeholder="Enter gender"
+                  value={user.username ?? ""}
-                value={user.gender ?? ""}
+                  onChangeText={(text) => setUser({ ...user, username: text })}
-                onChangeText={(text: any) => setUser({ ...user, gender: text })}
+                  icon="at"
-              />
+                />
+                
+                <CustomInput
+                  label="Address"
+                  placeholder="Enter address"
+                  value={user.address ?? ""}
+                  onChangeText={(text) => setUser({ ...user, address: text })}
+                  icon="location"
+                  multiline
+                />
+                
+                <CustomInput
+                  label="Gender"
+                  placeholder="Enter gender"
+                  value={user.gender ?? ""}
+                  onChangeText={(text) => setUser({ ...user, gender: text })}
+                  icon="male-female"
+                />
+              </View>
 
-              <CustomButton title="Save Changes" onPress={updateProfile} />
+              <View style={styles.editButtons}>
-              <CustomButton
+                <CustomButton 
-                title="Cancel"
+                  title="Save Changes" 
-                type="danger"
+                  onPress={updateProfile}
-                onPress={() => setEditing(false)}
+                  icon="save"
-              />
+                  style={styles.saveButton}
+                />
+                <CustomButton
+                  title="Cancel"
+                  type="outline"
+                  onPress={() => setEditing(false)}
+                  icon="close"
+                  style={styles.cancelButton}
+                />
+              </View>
             </>
           )}
         </View>
       </ScrollView>
-    </>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: "#f5f7fb" },
+  container: { 
-  loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
+    flex: 1, 
-  loadingText: { marginTop: 10, fontSize: 16, color: "#007AFF" },
+    backgroundColor: "#f8fafc" 
+  },
+  loadingContainer: { 
+    flex: 1, 
+    justifyContent: "center", 
+    alignItems: "center",
+    backgroundColor: "#f8fafc"
+  },
+  loadingText: { 
+    marginTop: 10, 
+    fontSize: 16, 
+    color: "#64748b" 
+  },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
-    padding: 16,
-    paddingTop: 40,
-    backgroundColor: "#fff",
     alignItems: "center",
-    borderBottomWidth: 1,
+    padding: 16,
-    borderColor: "#eee",
+    paddingTop: 50,
+    backgroundColor: "#6366f1",
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+    elevation: 4,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+  },
+  headerTitle: { 
+    fontSize: 22, 
+    fontWeight: "700", 
+    color: "#fff" 
+  },
+  refreshButton: {
+    padding: 4,
+  },
+  scrollContainer: {
+    flex: 1,
   },
-  headerTitle: { fontSize: 20, fontWeight: "600", color: "#333" },
   profileCard: {
-    borderRadius: 16,
+    borderRadius: 20,
     margin: 16,
     backgroundColor: "#fff",
     padding: 20,
     shadowColor: "#000",
     shadowOpacity: 0.1,
-    shadowRadius: 6,
+    shadowRadius: 10,
-    elevation: 4,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 5,
+  },
+  profileImageSection: {
+    alignItems: "center",
+    marginBottom: 24,
+    paddingBottom: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f1f5f9",
+  },
+  avatarContainer: {
+    position: "relative",
+    marginBottom: 16,
+  },
+  avatar: { 
+    width: 120, 
+    height: 120, 
+    borderRadius: 60, 
+    borderWidth: 4,
+    borderColor: "#e2e8f0",
   },
-  profileHeader: { alignItems: "center", marginBottom: 16 },
-  avatar: { width: 100, height: 100, borderRadius: 50, marginBottom: 8 },
   cameraIcon: {
     position: "absolute",
-    right: 110,
+    right: 0,
-    bottom: 10,
+    bottom: 0,
-    backgroundColor: "#007AFF",
+    backgroundColor: "#6366f1",
-    borderRadius: 15,
+    borderRadius: 20,
-    width: 32,
+    width: 40,
-    height: 32,
+    height: 40,
     justifyContent: "center",
     alignItems: "center",
+    borderWidth: 3,
+    borderColor: "#fff",
+    elevation: 2,
   },
-  detail: {
+  updateImageButton: {
+    width: "80%",
+  },
+  detailsSection: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: "#1e293b",
+    marginBottom: 16,
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f1f5f9",
+  },
+  detailRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 16,
+    paddingHorizontal: 8,
+  },
+  detailIcon: {
+    marginRight: 12,
+  },
+  detailLabel: {
+    fontSize: 12,
+    color: "#64748b",
+    marginBottom: 2,
+  },
+  detailText: {
     fontSize: 16,
-    marginBottom: 10,
+    color: "#334155",
-    color: "#444",
+    fontWeight: "500",
-    paddingLeft: 4,
+  },
+  editButton: {
+    marginTop: 8,
+  },
+  editSection: {
+    marginBottom: 20,
+  },
+  editButtons: {
+    gap: 12,
+  },
+  saveButton: {
+    marginTop: 8,
+  },
+  cancelButton: {
+    marginTop: 4,
+  },
+  inputContainer: {
+    marginBottom: 16,
+  },
+  inputLabel: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#374151",
+    marginBottom: 6,
+  },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    position: "relative",
+  },
+  inputIcon: {
+    position: "absolute",
+    left: 12,
+    zIndex: 1,
   },
-  inputContainer: { marginBottom: 12 },
-  inputLabel: { fontSize: 14, fontWeight: "500", color: "#555", marginBottom: 6 },
   input: {
     borderWidth: 1,
-    borderColor: "#ddd",
+    borderColor: "#d1d5db",
-    borderRadius: 10,
+    borderRadius: 12,
     padding: 12,
-    backgroundColor: "#fdfdfd",
+    backgroundColor: "#fff",
-    color: "#000",
+    color: "#1f2937",
-    fontSize: 15,
+    fontSize: 16,
+    flex: 1,
+  },
+  inputWithIcon: {
+    paddingLeft: 40,
   },
   button: {
-    backgroundColor: "#007AFF",
+    backgroundColor: "#6366f1",
-    paddingVertical: 12,
+    paddingVertical: 14,
     borderRadius: 12,
     alignItems: "center",
-    marginVertical: 6,
+    justifyContent: "center",
-    shadowColor: "#007AFF",
+    flexDirection: "row",
-    shadowOpacity: 0.2,
+    shadowColor: "#6366f1",
-    shadowRadius: 4,
+    shadowOpacity: 0.3,
-    elevation: 3,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 3 },
+    elevation: 4,
   },
   buttonSecondary: {
-    backgroundColor: "#e5e5ea",
+    backgroundColor: "#f1f5f9",
   },
   buttonDanger: {
-    backgroundColor: "#ff3b30",
+    backgroundColor: "#ef4444",
+  },
+  buttonOutline: {
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: "#6366f1",
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  buttonTextSecondary: {
+    color: "#334155",
+  },
+  buttonTextDanger: {
+    color: "#fff",
+  },
+  buttonTextOutline: {
+    color: "#6366f1",
+  },
+  buttonIcon: {
+    marginRight: 8,
   },
-  buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
-  buttonTextSecondary: { color: "#333" },
-  buttonTextDanger: { color: "#fff" },
 });
 
-export default Profile;
+export default Profile;

src/utils/ApiUrls.tsx

@@ -1,3 +1,3 @@
-export const base_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/"
+export const base_URL = "https://api.godemo.in/FundCollect/api/"
 export const LOGIN_URL = `${base_URL}user/generate/otp?mobile=`
 export const VARIFY_OTP_URL = `${base_URL}user/otp/verify`