ui fix

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@react-native-clipboard/clipboard": "^1.16.3",
+        "@react-native-community/blur": "^4.4.1",
         "@react-native-community/slider": "^5.0.1",
         "@react-native-picker/picker": "^2.11.2",
         "@react-native-vector-icons/ionicons": "^12.3.0",
@@ -36,6 +37,7 @@
         "react-native-safe-area-context": "^5.6.1",
         "react-native-screens": "^4.16.0",
         "react-native-svg": "^15.13.0",
+        "react-native-vector-icons": "^10.3.0",
         "react-native-walkthrough-tooltip": "^1.6.0",
         "react-redux": "^9.2.0"
       },
@@ -2766,6 +2768,16 @@
         }
       }
     },
+    "node_modules/@react-native-community/blur": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@react-native-community/blur/-/blur-4.4.1.tgz",
+      "integrity": "sha512-XBSsRiYxE/MOEln2ayunShfJtWztHwUxLFcSL20o+HNNRnuUDv+GXkF6FmM2zE8ZUfrnhQ/zeTqvnuDPGw6O8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@react-native-community/cli": {
       "version": "20.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-20.0.0.tgz",
@@ -13578,7 +13590,6 @@
       "integrity": "sha512-IFQ0RE57819hOUdFvgK4FowM5aMXg7C7XKsuGLevqXkkIJatc3QopN0wYrb2IrzUgmdpfP+QVIbI3S6h7M0btw==",
       "deprecated": "react-native-vector-icons package has moved to a new model of per-icon-family packages. See the https://github.com/oblador/react-native-vector-icons/blob/master/MIGRATION.md on how to migrate",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prop-types": "^15.7.2",
         "yargs": "^16.1.1"
@@ -13595,7 +13606,6 @@
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
       "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.0",
@@ -13607,7 +13617,6 @@
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
       "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cliui": "^7.0.2",
         "escalade": "^3.1.1",
@@ -13626,7 +13635,6 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=10"
       }

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native-clipboard/clipboard": "^1.16.3",
+    "@react-native-community/blur": "^4.4.1",
     "@react-native-community/slider": "^5.0.1",
     "@react-native-picker/picker": "^2.11.2",
     "@react-native-vector-icons/ionicons": "^12.3.0",
@@ -38,6 +39,7 @@
     "react-native-safe-area-context": "^5.6.1",
     "react-native-screens": "^4.16.0",
     "react-native-svg": "^15.13.0",
+    "react-native-vector-icons": "^10.3.0",
     "react-native-walkthrough-tooltip": "^1.6.0",
     "react-redux": "^9.2.0"
   },

src/components/CostomAlart.tsx

@@ -0,0 +1,177 @@
+// src/components/CustomAlert.tsx
+
+import React from "react";
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+} from "react-native";
+import { BlurView } from "@react-native-community/blur";
+import Ionicons from '@react-native-vector-icons/ionicons';
+import colors from "./colors"; // Import centralized colors
+
+interface AlertButton {
+  text: string;
+  onPress: () => void;
+  style?: "cancel" | "destructive" | "default";
+}
+
+interface CustomAlertProps {
+  visible: boolean;
+  title: string;
+  message: string;
+  buttons: AlertButton[];
+  alertType?: 'error' | 'success' | 'info';
+}
+
+const CustomAlert: React.FC<CustomAlertProps> = ({
+  visible,
+  title,
+  message,
+  buttons,
+  alertType = 'info',
+}) => {
+
+  const getIcon = () => {
+    switch (alertType) {
+      case 'error':
+        return { name: "close-circle", color: colors.error };
+      case 'success':
+        return { name: "checkmark-circle", color: colors.success };
+      default:
+        return { name: "information-circle", color: colors.primary };
+    }
+  };
+
+  const icon = getIcon();
+
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={visible}
+      onRequestClose={() => {
+        const closeButton = buttons.find(b => b.style === 'cancel') || buttons[0];
+        closeButton?.onPress();
+      }}
+    >
+      <View style={styles.centeredView}>
+        {Platform.OS === 'ios' ? (
+          <BlurView style={styles.absolute} blurType="light" blurAmount={5} />
+        ) : (
+          <View style={[styles.absolute, { backgroundColor: colors.androidBackdrop }]} />
+        )}
+
+        <View style={styles.alertBox}>
+          <View style={styles.iconContainer}>
+            <Ionicons name={icon.name} size={48} color={icon.color} />
+          </View>
+          <Text style={styles.alertTitle}>{title}</Text>
+          <Text style={styles.alertMessage}>{message}</Text>
+
+          <View style={styles.buttonContainer}>
+            {buttons.map((button, index) => (
+              <TouchableOpacity
+                key={index}
+                style={[
+                  styles.button,
+                  button.style === 'destructive' ? styles.destructiveButton : styles.defaultButton,
+                ]}
+                onPress={button.onPress}
+              >
+                <Text style={[
+                  styles.buttonText,
+                  button.style === 'destructive' ? styles.destructiveButtonText : styles.defaultButtonText
+                ]}>
+                  {button.text}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  },
+  alertBox: {
+    backgroundColor: colors.alertBackground,
+    borderRadius: 24,
+    padding: 24,
+    alignItems: "center",
+    margin: 24,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.5)',
+    shadowColor: colors.black,
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.1,
+    shadowRadius: 30,
+    elevation: 20,
+    width: '90%',
+    maxWidth: 400,
+  },
+  iconContainer: {
+    marginBottom: 16,
+  },
+  alertTitle: {
+    fontSize: 22,
+    fontWeight: "bold",
+    color: colors.textDark,
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  alertMessage: {
+    fontSize: 16,
+    color: colors.textLight,
+    textAlign: "center",
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: 'flex-end',
+    width: "100%",
+    gap: 12,
+  },
+  button: {
+    paddingVertical: 14,
+    paddingHorizontal: 24,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  defaultButton: {
+    backgroundColor: colors.primary,
+  },
+  destructiveButton: {
+    backgroundColor: colors.error,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: "700",
+  },
+  defaultButtonText: {
+    color: colors.white,
+  },
+  destructiveButtonText: {
+    color: colors.white,
+  },
+});
+
+export default CustomAlert;

src/components/colors.ts

@@ -1,22 +1,27 @@
-// colors.ts
+// src/components/colors.ts
-const colors = {
-  pastelPink: "#decbfcff",   // darker pink
-  pastelBlue: "#D7E9F7",   // darker blue
-  pastelGreen: "#DFF6DD",  // darker green
-  pastelOrange: "#FFF4D2", // darker orange
 
-  // darker accent colors
+const colors = {
-  Home: "#995dfaff",     // Rose red for contrast
+  // Pastel palette
-  Profile: "#2D9CDB",  // Deep sky blue
+  pastelPink: "#decbfc",
-  Group: "#27AE60",    // Green for freshness
+  pastelBlue: "#D7E9F7",
-  Settings: "#F39C12", // Amber for warmth
+  pastelGreen: "#DFF6DD",
+  pastelOrange: "#FFF4D2",
   
-  // common text + UI colors
+  // Primary and status colors
-  textDark: "#212121",
+  primary: "#711ff7",
-  textLight: "#555555",
+  error: "#EF4444",
+  success: "#22C55E",
+
+  // Common UI colors
+  textDark: "#1F2937",
+  textLight: "#6B7280",
   white: "#FFFFFF",
   black: "#000000",
-  primary: "#711ff7ff",
+  inputBorder: "#E5E7EB",
+
+  // Special background colors with transparency
+  alertBackground: "rgba(255, 255, 255, 0.8)",
+  androidBackdrop: "rgba(0, 0, 0, 0.4)",
 };
 
 export default colors;

src/components/common/AnimatedCard.tsx

@@ -5,10 +5,12 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
   Animated,
+  ViewStyle,
 } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
-import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
+import Ionicons from "react-native-vector-icons/Ionicons";
-import colors from "../colors";
+import { IoniconsIconName } from "react-native-vector-icons/Ionicons";
+import colors from "../colors"; // Assuming your pastel colors are defined here
 
 type CardProps = {
   title: string;
@@ -16,7 +18,8 @@ type CardProps = {
   iconName?: IoniconsIconName;
   onPress?: () => void;
   backOne?: string;
-  backTwo?: string
+  backTwo?: string;
+  style?: ViewStyle;
 };
 
 const AnimatedCard: React.FC<CardProps> = ({
@@ -24,33 +27,27 @@ const AnimatedCard: React.FC<CardProps> = ({
   subtitle,
   iconName = "ellipse",
   onPress,
-  backOne = '#4facfe',
+  backOne = colors.pastelPink, // Defaulting to pastelPink
-  backTwo = '#00f2fe'
+  backTwo = colors.primary,
+  style,
 }) => {
   const scale = useRef(new Animated.Value(1)).current;
 
   const handlePressIn = () => {
-    Animated.spring(scale, {
+    Animated.spring(scale, { toValue: 0.96, useNativeDriver: true, friction: 4 }).start();
-      toValue: 0.96,
-      useNativeDriver: true,
-      friction: 4,
-    }).start();
   };
 
   const handlePressOut = () => {
-    Animated.spring(scale, {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, friction: 4 }).start(() => {
-      toValue: 1,
+      if (onPress) {
-      useNativeDriver: true,
+        onPress();
-      friction: 4,
+      }
-    }).start(() => onPress && onPress());
+    });
   };
 
   return (
-    <TouchableWithoutFeedback
+    <TouchableWithoutFeedback onPressIn={handlePressIn} onPressOut={handlePressOut}>
-      onPressIn={handlePressIn}
+      <Animated.View style={[styles.card, style, { transform: [{ scale }] }]}>
-      onPressOut={handlePressOut}
-    >
-      <Animated.View style={[styles.card, { transform: [{ scale }] }]}>
         <LinearGradient
           colors={[backOne, backTwo]}
           start={{ x: 0, y: 0 }}
@@ -59,21 +56,11 @@ const AnimatedCard: React.FC<CardProps> = ({
         >
           {/* Decorative Graphics */}
           <View style={styles.graphicCircleLarge} />
-          <View style={styles.graphicCircleMedium} />
           <View style={styles.graphicCircleSmall} />
-          <View style={styles.graphicTriangleTop} />
-          <View style={styles.graphicTriangleBottom} />
 
           {/* Content */}
           <View style={styles.content}>
-            {iconName && (
+            {iconName && <Ionicons name={iconName} size={38} color="#fff" style={styles.icon} />}
-              <Ionicons
-                name={iconName}
-                size={32}
-                color="#fff"
-                style={styles.icon}
-              />
-            )}
             <View style={styles.textContainer}>
               <Text style={styles.title}>{title}</Text>
               {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
@@ -87,102 +74,70 @@ const AnimatedCard: React.FC<CardProps> = ({
 
 const styles = StyleSheet.create({
   card: {
-    // marginHorizontal: 16,
     marginVertical: 10,
-    borderRadius: 20,
+    borderRadius: 24,
     overflow: "hidden",
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
+    shadowOffset: { width: 0, height: 5 },
-    shadowOpacity: 0.25,
+    shadowOpacity: 0.15,
-    shadowRadius: 8,
+    shadowRadius: 12,
-    elevation: 8,
+    elevation: 5,
+    backgroundColor: colors.white,
   },
   gradient: {
-    minHeight: 120,
+    minHeight: 150, // Increased height for better spacing
     position: "relative",
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
   },
-  // Graphics
   graphicCircleLarge: {
     position: "absolute",
-    top: -20,
+    top: -30,
-    right: -20,
+    right: -40,
-    width: 80,
+    width: 100,
-    height: 80,
+    height: 100,
-    borderRadius: 40,
+    borderRadius: 50,
-    backgroundColor: "rgba(124, 80, 80, 0.42)",
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
-  },
-  graphicCircleMedium: {
-    position: "absolute",
-    bottom: 30,
-    left: -15,
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: "rgba(122, 41, 41, 0.39)",
   },
   graphicCircleSmall: {
     position: "absolute",
-    bottom: -10,
+    bottom: -20,
-    right: 40,
+    left: -25,
-    width: 40,
+    width: 70,
-    height: 40,
+    height: 70,
-    borderRadius: 20,
+    borderRadius: 35,
-    backgroundColor: "rgba(207, 110, 80, 0.25)",
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
-  },
-  graphicTriangleTop: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: 0,
-    height: 0,
-    borderStyle: "solid",
-    borderRightWidth: 60,
-    borderTopWidth: 60,
-    borderRightColor: "transparent",
-    borderTopColor: "rgba(143, 62, 62, 0.31)",
-  },
-  graphicTriangleBottom: {
-    position: "absolute",
-    bottom: 0,
-    right: 0,
-    width: 0,
-    height: 0,
-    borderStyle: "solid",
-    borderLeftWidth: 40,
-    borderBottomWidth: 40,
-    borderLeftColor: "transparent",
-    borderBottomColor: "rgba(172, 51, 51, 0.27)",
   },
   content: {
-    flexDirection: "row", // stack vertically
-    alignItems: "center",    // center horizontally
-    justifyContent: "center", // center vertically
     padding: 20,
     position: "relative",
     zIndex: 1,
-    alignSelf: "center",
+    flex: 1,
-    flex:1
+    justifyContent: "center",
-  }
+    alignItems: "center",
-  ,
+  },
   icon: {
-    marginRight: 12,
+    marginBottom: 12,
   },
   textContainer: {
-    // alignItems: "center", // centers title and subtitle
+    alignItems: 'center',
   },
   title: {
     fontSize: 18,
-    fontWeight: "700",
+    fontWeight: "bold",
     color: "#fff",
-    marginBottom: 4,
+    textTransform: 'uppercase',
-    textTransform:'uppercase'
+    letterSpacing: 1,
-    // textAlign: "center",
+    textAlign: 'center',
   },
   subtitle: {
-    fontSize: 14,
+    fontSize: 13,
-    color: colors.primary,
+    color: colors.white,
+    opacity: 0.9,
     fontWeight: "500",
     textAlign: "center",
+    marginTop: 4,
   },
 });
 

src/components/common/Custom.tsx

@@ -15,10 +15,12 @@ type CustomInputProps = TextInputProps & {
   label?: string;
   icon?: IoniconsIconName;
   error?:string
+  value?: string | number;
 };
 
 const CustomInput: React.FC<CustomInputProps> = ({
   label,
+  value,
   icon,
   style,
   error,
@@ -28,7 +30,7 @@ const CustomInput: React.FC<CustomInputProps> = ({
     <View style={styles.inputContainer}>
       {label ? <Text style={styles.inputLabel}>{label}</Text> : null}
       <View style={styles.inputWrapper}>
-        {icon && <Ionicons name={icon} size={20} color={colors.textDark} style={styles.inputIcon} />}
+        {icon && <Ionicons name={icon} size={20} color={colors.pastelBlue} style={styles.inputIcon}  />}
         <TextInput
           style={[styles.input, icon && { paddingLeft: 36 }, style]}
           placeholderTextColor={colors.textLight}
@@ -83,7 +85,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
 
 // --- Styles ---
 const styles = StyleSheet.create({
-  inputContainer: { marginBottom: 12 },
+  inputContainer: { marginBottom: 12,elevation:5 },
   inputLabel: { fontSize: 14, fontWeight: "500", color: colors.textDark, marginBottom: 6 },
   inputWrapper: {
     flexDirection: "row",
@@ -97,9 +99,7 @@ const styles = StyleSheet.create({
   },
   input: {
     flex: 1,
-    borderWidth: 1,
+    borderRadius: 15,
-    borderColor: colors.textLight,
-    borderRadius: 10,
     padding: 12,
     paddingLeft: 12,
     backgroundColor: colors.white,
@@ -107,6 +107,7 @@ const styles = StyleSheet.create({
     fontSize: 15,
   },
   button: {
+    elevation:5,
     paddingVertical: 12,
     borderRadius: 12,
     alignItems: "center",

src/screens/LoginScreen.tsx

@@ -1,3 +1,5 @@
+// src/screens/LoginScreen.tsx
+
 import React, { useState, useRef, useEffect } from "react";
 import {
   View,
@@ -5,7 +7,6 @@ import {
   TextInput,
   StyleSheet,
   TouchableOpacity,
-  Alert,
   KeyboardAvoidingView,
   Platform,
   Animated,
@@ -17,175 +18,268 @@ import axios from "axios";
 import { useNavigation } from "@react-navigation/native";
 import type { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../navigation/AppNavigator";
-import { CustomButton, CustomInput } from "../components/common/Custom";
+import LinearGradient from "react-native-linear-gradient";
-import colors from "../components/colors";
+import Ionicons from '@react-native-vector-icons/ionicons';
-
+import CustomAlert from "../components/CostomAlart";
-const theme = {
+import colors from "../components/colors"; // Centralized colors from your file
-  primary: "#111111",
-  accent: colors.primary,
-  background: "#F9F9F9",
-  surface: "#FFFFFF",
-  text: "#1A1A1A",
-  subText: "#6B6B6B",
-  outline: "#E5E5E5",
-  error: "#E53935",
-  success: "#2E7D32",
-};
 
 export default function LoginScreen() {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const [mobile, setMobile] = useState("");
   const [loading, setLoading] = useState(false);
 
-  // animations
+  const [alertInfo, setAlertInfo] = useState({
+    visible: false,
+    title: "",
+    message: "",
+    buttons: [] as { text: string; onPress: () => void; style?: "cancel" | "destructive" | "default" }[],
+    alertType: 'info' as 'info' | 'success' | 'error',
+  });
+
   const fade = useRef(new Animated.Value(0)).current;
-  const slide = useRef(new Animated.Value(24)).current;
+  const slide = useRef(new Animated.Value(30)).current;
   const ctaScale = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
     Animated.parallel([
-      Animated.timing(fade, { toValue: 1, duration: 600, useNativeDriver: true }),
+      Animated.timing(fade, { toValue: 1, duration: 800, useNativeDriver: true }),
-      Animated.timing(slide, { toValue: 0, duration: 600, useNativeDriver: true }),
+      Animated.spring(slide, { toValue: 0, friction: 5, tension: 40, useNativeDriver: true }),
     ]).start();
   }, []);
 
- const handleContinue = async () => {
+  const showAlert = (
-  if (mobile.length === 10) {
+    title: string,
-    setLoading(true);
+    message: string,
-    try {
+    buttons: { text: string; onPress: () => void; style?: "cancel" | "destructive" | "default" }[],
-      const res = await axios.get(LOGIN_URL, {
+    alertType: 'info' | 'success' | 'error' = 'info'
-        params: { mobile },
+  ) => {
-      });
+    setAlertInfo({ visible: true, title, message, buttons, alertType });
+  };
+  
+  const hideAlert = () => {
+    setAlertInfo({ ...alertInfo, visible: false });
+  };
 
-      console.log("OTP sent response:", res.data);
+  const handleContinue = async () => {
-
+    if (mobile.length === 10) {
-      if (res.data.statusCode === 200) {
+      setLoading(true);
-        navigation.navigate("OtpVarify", { mobile });
+      try {
-      } else {
+        // FIX: Used the imported LOGIN_URL constant instead of a string literal
-        Alert.alert("Error", res.data.message || "Failed to send OTP");
+        const res = await axios.get(LOGIN_URL, { params: { mobile } });
+        console.log("Login response:", res.data);
+        if (res.data.statusCode === 200) {
+          navigation.navigate("OtpVarify", { mobile });
+        } else {
+          showAlert(
+            "Login Failed",
+            res.data.message || "Could not send OTP.",
+            [{ text: "Try Again", onPress: hideAlert }],
+            'error'
+          );
+        }
+      } catch (error: any) {
+        console.error("Login error:", error);
+        showAlert(
+          "An Error Occurred",
+          "Failed to send OTP. Please check your connection and try again.",
+          [{ text: "OK", onPress: hideAlert }],
+          'error'
+        );
+      } finally {
+        setLoading(false);
       }
-    } catch (error: any) {
+    } else {
-      console.error("Login error:", error);
+      showAlert(
-
+        "Invalid Number",
-      if (axios.isAxiosError(error)) {
+        "Please enter a valid 10-digit mobile number.",
-        console.log("Error message:", error.message);
+        [{ text: "Got it", onPress: hideAlert }],
-        console.log("Error response:", error.response?.data);
+        'info'
-        console.log("Error status:", error.response?.status);
+      );
-        console.log("Error headers:", error.response?.headers);
-      } else {
-        console.log("Unexpected 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");
-  }
-};
 
-return (
+  return (
-  <KeyboardAvoidingView
+    <LinearGradient colors={[colors.pastelBlue, colors.pastelGreen, colors.pastelOrange]} style={styles.gradientContainer}>
-    style={styles.container}
+      <KeyboardAvoidingView
-    behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={styles.container}
-  >
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
-    <StatusBar barStyle="dark-content" backgroundColor={theme.background} />
-
-    {/* Top content */}
-    <View style={styles.topSection}>
-      <Text style={styles.brand}>CircleCollect</Text>
-      <Text style={styles.title}>Welcome Back 👋</Text>
-      <Text style={styles.subtitle}>
-        Enter your mobile number to sign in and continue.
-      </Text>
-
-      <Animated.View
-        style={[
-          styles.inputWrapper,
-          { opacity: fade, transform: [{ translateY: slide }] },
-        ]}
       >
-        <CustomInput
+        <StatusBar barStyle="dark-content" />
-          label="Mobile Number"
+        
-          placeholder="Enter Mobile Number"
+        <View style={[styles.shape, styles.shape1]} />
-          value={mobile}
+        <View style={[styles.shape, styles.shape2]} />
-          onChangeText={setMobile}
+        <View style={[styles.shape, styles.shape3]} />
-          keyboardType="phone-pad"
-          maxLength={10}
-          icon="call-outline"
-        />
-      </Animated.View>
-    </View>
 
-    {/* Bottom Button */}
+        <View style={styles.topSection}>
-    <Animated.View
+          <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
-      style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
+            <Text style={styles.brand}>CircleCollect</Text>
-    >
+            <Text style={styles.title}>Welcome!</Text>
-      <CustomButton title={loading ? "Loading..." : "Continue"} onPress={handleContinue} icon="arrow-forward" />
+            <Text style={styles.subtitle}>
+              Glad to see you again. Let's get you signed in to your community.
+            </Text>
+          </Animated.View>
+        </View>
 
-      <Text style={styles.footerText}>
+        <View style={styles.formSection}>
-        By continuing, you agree to our{" "}
+          <Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
-        <Text style={{ color: theme.accent, fontWeight: "600" }}>
+            <View style={styles.inputContainer}>
-          Terms & Privacy
+              <Ionicons name="call-outline" size={22} color={colors.textLight} style={styles.inputIcon} />
-        </Text>
+              <TextInput
-      </Text>
+                style={styles.input}
-    </Animated.View>
+                placeholder="Enter your mobile number"
-  </KeyboardAvoidingView>
+                placeholderTextColor={colors.textLight}
-);
+                value={mobile}
+                onChangeText={setMobile}
+                keyboardType="phone-pad"
+                maxLength={10}
+              />
+            </View>
+          </Animated.View>
+        </View>
+
+        <Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
+          <TouchableOpacity onPress={handleContinue} disabled={loading} activeOpacity={0.8} style={styles.button}>
+            {loading ? (
+              <ActivityIndicator color={colors.white} />
+            ) : (
+              <Text style={styles.buttonText}>Continue with Mobile</Text>
+            )}
+          </TouchableOpacity>
+          <Text style={styles.footerText}>
+            Your privacy is our priority. Your information is always secure.
+          </Text>
+        </Animated.View>
+
+      </KeyboardAvoidingView>
+
+      <CustomAlert
+        visible={alertInfo.visible}
+        title={alertInfo.title}
+        message={alertInfo.message}
+        buttons={alertInfo.buttons}
+        alertType={alertInfo.alertType}
+      />
+    </LinearGradient>
+  );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: theme.background, padding: 20 },
+  gradientContainer: {
-  topSection: { flex: 1, justifyContent: "center" },
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    padding: 24,
+    justifyContent: "space-between",
+  },
+  shape: {
+    position: 'absolute',
+    borderRadius: 1000,
+    opacity: 0.6,
+  },
+  shape1: {
+    width: 400,
+    height: 400,
+    backgroundColor: colors.pastelPink,
+    top: -150,
+    left: -100,
+  },
+  shape2: {
+    width: 300,
+    height: 300,
+    backgroundColor: colors.pastelBlue,
+    bottom: -100,
+    right: -120,
+  },
+  shape3: {
+    width: 200,
+    height: 200,
+    backgroundColor: colors.pastelGreen,
+    bottom: '40%',
+    left: -80,
+    opacity: 0.5
+  },
+  topSection: {
+    flex: 0.8,
+    justifyContent: "center",
+    alignItems: 'center'
+  },
+  formSection: {
+    flex: 1,
+    justifyContent: 'flex-start'
+  },
   brand: {
-    fontSize: 30,
+    fontSize: 24,
-    fontWeight: "700",
+    fontWeight: "600",
-    color: theme.accent,
+    color: colors.primary,
-    marginBottom: 24,
+    textAlign: "center",
+    letterSpacing: 1.5,
+    marginBottom: 16,
   },
   title: {
-    fontSize: 26,
+    fontSize: 38,
-    fontWeight: "800",
+    fontWeight: "bold",
-    color: theme.text,
+    color: colors.textDark,
-    marginBottom: 6,
+    textAlign: "center",
+    marginBottom: 12,
   },
   subtitle: {
-    fontSize: 15,
+    fontSize: 16,
-    color: theme.subText,
+    color: colors.textLight,
-    marginBottom: 30,
+    textAlign: "center",
-    lineHeight: 22,
+    lineHeight: 24,
+    maxWidth: 320,
   },
-  inputWrapper: { gap: 8 },
+  inputContainer: {
-  inputLabel: {
+    flexDirection: "row",
-    fontSize: 14,
+    alignItems: "center",
-    fontWeight: "600",
+    backgroundColor: colors.white,
-    color: theme.text,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: colors.inputBorder,
+    paddingHorizontal: 16,
+    marginTop: 32,
+    shadowColor: colors.black,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 3,
+  },
+  inputIcon: {
+    marginRight: 12,
   },
   input: {
-    backgroundColor: theme.surface,
+    flex: 1,
-    borderRadius: 14,
+    height: 58,
-    padding: 14,
     fontSize: 16,
-    color: theme.text,
+    color: colors.textDark,
-    borderWidth: 1,
-    borderColor: theme.outline,
   },
   bottomSection: {
-    marginBottom: 30,
+    paddingBottom: Platform.OS === "ios" ? 20 : 10,
+    paddingHorizontal: 10
   },
   button: {
-    backgroundColor: theme.primary,
+    backgroundColor: colors.primary,
     paddingVertical: 18,
-    borderRadius: 14,
+    borderRadius: 30,
     alignItems: "center",
     justifyContent: "center",
+    flexDirection: "row",
+    shadowColor: colors.primary,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.3,
+    shadowRadius: 15,
+    elevation: 8,
+  },
+  buttonText: {
+    color: colors.white,
+    fontWeight: "700",
+    fontSize: 16,
   },
-  buttonText: { color: "#fff", fontWeight: "700", fontSize: 16 },
   footerText: {
     textAlign: "center",
-    color: theme.subText,
+    color: colors.textLight,
     fontSize: 12,
-    marginTop: 14,
+    marginTop: 20,
   },
 });

src/screens/OtpVarificationScreen.tsx

@@ -13,41 +13,54 @@ import {
   TextInputKeyPressEventData,
   KeyboardAvoidingView,
   StatusBar,
-  Alert,
-  ToastAndroid,
 } from "react-native";
 import { RootStackParamList } from "../navigation/AppNavigator";
 import * as Keychain from "react-native-keychain";
-import { BASE_URL, LOGIN_URL, VARIFY_OTP_URL } from "../utils/ApiUrls";
+import { LOGIN_URL, VARIFY_OTP_URL } from "../utils/ApiUrls";
 import colors from "../components/colors";
-import { fetchUserProfile } from "../utils/HelperFunction";
+import LinearGradient from "react-native-linear-gradient";
-
+import CustomAlert from "../components/CostomAlart";
-const theme = {
-  primary: "#111111",
-  accent: colors.primary,
-  background: "#F9F9F9",
-  text: "#1A1A1A",
-  subText: "#6B6B6B",
-  outline: "#E5E5E5",
-};
 
 const CELL_COUNT = 6;
 type OtpVerifyRouteProp = RouteProp<RootStackParamList, "OtpVarify">;
 
+interface AlertButton {
+  text: string;
+  onPress: () => void;
+  style?: "cancel" | "destructive" | "default";
+}
+
 export default function OtpVerificationScreen() {
   const [code, setCode] = useState<string[]>(Array(CELL_COUNT).fill(""));
   const [timer, setTimer] = useState(30);
   const [isResending, setIsResending] = useState(false);
+  const [alertConfig, setAlertConfig] = useState<{
+    visible: boolean;
+    title: string;
+    message: string;
+    buttons: AlertButton[];
+    alertType: 'error' | 'success' | 'info';
+  }>({
+    visible: false,
+    title: "",
+    message: "",
+    buttons: [],
+    alertType: "info",
+  });
+
   const inputs = useRef<Array<TextInput | null>>([]);
   const route = useRoute<OtpVerifyRouteProp>();
   const { mobile } = route.params;
   const navigation = useNavigation<any>();
-  // animations
+  
+  // Refs for auto-closing logic
+  const successActionRef = useRef<(() => void) | null>(null);
+  const successTimerRef = useRef<number | null>(null);
+
   const fade = useRef(new Animated.Value(0)).current;
   const slide = useRef(new Animated.Value(24)).current;
   const ctaScale = useRef(new Animated.Value(1)).current;
 
-
   useEffect(() => {
     Animated.parallel([
       Animated.timing(fade, { toValue: 1, duration: 600, useNativeDriver: true }),
@@ -55,88 +68,133 @@ export default function OtpVerificationScreen() {
     ]).start();
   }, [fade, slide]);
 
-  // Countdown
   useEffect(() => {
     if (timer <= 0) return;
-    const interval = setInterval(() => {
+    const interval = setInterval(() => setTimer((prev) => prev - 1), 1000);
-      setTimer((prev) => prev - 1);
-    }, 1000);
     return () => clearInterval(interval);
   }, [timer]);
 
+  const hideAlert = () => {
+    if (successTimerRef.current) {
+        clearTimeout(successTimerRef.current);
+        successTimerRef.current = null;
+    }
+    setAlertConfig(prev => ({ ...prev, visible: false }));
+  };
+
+  const triggerAlert = (
+    title: string,
+    message: string,
+    buttons: AlertButton[],
+    alertType: 'error' | 'success' | 'info' = 'info',
+    autoCloseAction?: () => void
+  ) => {
+    setAlertConfig({ visible: true, title, message, buttons, alertType });
+    
+    if (alertType === 'success' && autoCloseAction) {
+        successActionRef.current = autoCloseAction;
+        successTimerRef.current = setTimeout(() => {
+            successActionRef.current?.();
+        }, 2000); // Auto-close after 2 seconds
+    }
+  };
+
   const saveToken = async (token: string) => {
     try {
-      await Keychain.setGenericPassword("auth", token, {
+      await Keychain.setGenericPassword("auth", token, { accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED });
-        accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED,
-      });
       console.log("✅ Token saved securely");
     } catch (error) {
       console.error("❌ Error saving token:", error);
     }
   };
 
-
   const onSubmit = async (otp: string, mobile: string) => {
-  try {
+    if (otp.length !== CELL_COUNT) {
-    const payload = { mobile, otp };
+      triggerAlert(
-    const res = await axios.post(
+        'Incomplete Code',
-      VARIFY_OTP_URL,
+        'Please enter all 6 digits of the OTP.',
-      payload,
+        [{ text: 'OK', onPress: hideAlert }],
-      {
+        'error'
-        headers: {
+      );
-          "Content-Type": "application/json",
+      return;
-          Accept: "application/json",
-        },
-      }
-    );
-
-    console.log("✅ OTP Verified:", res.data);
-
-    if (res.data?.statusCode === 200) {
-      const { jwt, role } = res.data?.data || {};
-
-      saveToken(jwt);
-
-      navigation.navigate("Home");
-
-      ToastAndroid.show("OTP Verified Successfully!", ToastAndroid.SHORT);
     }
-  } catch (err: any) {
+    try {
-    console.error("❌ OTP Verification Error:", err?.response?.data || err.message);
+      const res = await axios.post(VARIFY_OTP_URL, { mobile, otp }, {
-    ToastAndroid.show(
+        headers: { "Content-Type": "application/json", Accept: "application/json" },
-      err?.response?.data?.message || "Invalid OTP. Please try again.",
+      });
-      ToastAndroid.SHORT
-    );
-  }
-};
 
+      if (res.data?.statusCode === 200) {
+        const { jwt } = res.data?.data || {};
+        await saveToken(jwt);
+        
+        let hasActionRun = false;
+        const successAction = () => {
+            if (hasActionRun) return;
+            hasActionRun = true;
+            hideAlert();
+            navigation.navigate("Home");
+        };
+
+        triggerAlert(
+          'Success!',
+          'OTP verified successfully. Redirecting...',
+          [{ text: 'OK', onPress: successAction }],
+          'success',
+          successAction
+        );
+      }
+    } catch (err: any) {
+      console.error("❌ OTP Verification Error:", err?.response?.data || err.message);
+      triggerAlert(
+        'Verification Failed',
+        err?.response?.data?.message || "Invalid OTP. Please try again.",
+        [{ text: 'Try Again', onPress: hideAlert, style: 'cancel' }],
+        'error'
+      );
+    }
+  };
 
   const resendOtp = async () => {
     try {
       setIsResending(true);
-      setTimer(30); // reset timer
+      setTimer(30);
-
+      await axios.get(`${LOGIN_URL}?mobile=${mobile}`, {
-      const res = await axios.get(
+        headers: { "Content-Type": "application/json", Accept: "*/*" },
-        LOGIN_URL + mobile,
+      });
-        { headers: { "Content-Type": "application/json", Accept: "*/*" } }
+      
-      );
-
-      console.log("📩 OTP Resent:", res);
       setCode(Array(CELL_COUNT).fill(""));
       inputs.current[0]?.focus();
-      ToastAndroid.show("OTP Sent", ToastAndroid.SHORT);
+      
+      let hasActionRun = false;
+      const successAction = () => {
+          if (hasActionRun) return;
+          hasActionRun = true;
+          hideAlert();
+      };
+      
+      triggerAlert(
+        'OTP Sent',
+        'A new code has been sent to your mobile number.',
+        [{ text: 'OK', onPress: successAction }],
+        'success',
+        successAction
+      );
     } catch (err: any) {
       console.error("❌ Resend OTP Error:", err?.response?.data || err.message);
-      ToastAndroid.show("Failed to resend OTP. Try again later.", ToastAndroid.SHORT);
+      triggerAlert(
+        'Error',
+        'Failed to resend OTP. Try again later.',
+        [{ text: 'OK', onPress: hideAlert, style: 'cancel' }],
+        'error'
+      );
     } finally {
       setIsResending(false);
     }
   };
 
   const submitIfComplete = (arr: string[]) => {
-    const joined = arr.join("");
+    if (arr.join("").length === CELL_COUNT) {
-    if (joined.length === CELL_COUNT) {
+      onSubmit(arr.join(""), mobile);
-      onSubmit(joined, mobile);
     }
   };
 
@@ -155,13 +213,14 @@ export default function OtpVerificationScreen() {
       updateIndex(0, digits);
       return;
     }
-    const next = Array(CELL_COUNT)
+    const next = Array(CELL_COUNT).fill("").map((_, i) => digits[i] ?? "");
-      .fill("")
-      .map((_, i) => digits[i] ?? "");
     setCode(next);
     const firstEmpty = next.findIndex((c) => !c);
-    if (firstEmpty >= 0) inputs.current[firstEmpty]?.focus();
+    if (firstEmpty >= 0) {
-    else inputs.current[CELL_COUNT - 1]?.blur();
+      inputs.current[firstEmpty]?.focus();
+    } else {
+      inputs.current[CELL_COUNT - 1]?.blur();
+    }
     submitIfComplete(next);
   };
 
@@ -172,107 +231,71 @@ export default function OtpVerificationScreen() {
   };
 
   return (
-    <KeyboardAvoidingView
+    <LinearGradient colors={[colors.pastelGreen, colors.pastelOrange]} style={styles.gradientContainer}>
-      style={styles.container}
+      <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : undefined}>
-      behavior={Platform.OS === "ios" ? "padding" : undefined}
+        <StatusBar barStyle="dark-content" backgroundColor={colors.pastelGreen} />
-    >
+        
-      <StatusBar barStyle="dark-content" backgroundColor={theme.background} />
+        <CustomAlert {...alertConfig} />
 
-      {/* Top Section */}
+        <View style={styles.topSection}>
-      <View style={styles.topSection}>
+          <Text style={styles.title}>Verify Your Code 🔒</Text>
-        <Text style={styles.title}>Verify Code 🔒</Text>
+          <Text style={styles.subtitle}>We’ve sent a 6-digit verification code to +91 {mobile}.</Text>
-        <Text style={styles.subtitle}>
-          We’ve sent a 6-digit verification code to {mobile}.
-        </Text>
 
-        <Animated.View
+          <Animated.View style={[styles.otpRow, { opacity: fade, transform: [{ translateY: slide }] }]}>
-          style={[styles.otpRow, { opacity: fade, transform: [{ translateY: slide }] }]}
+            {Array.from({ length: CELL_COUNT }).map((_, i) => (
-        >
+              <TextInput
-          {Array.from({ length: CELL_COUNT }).map((_, i) => (
+                key={`otp-${i}`}
-            <TextInput
+                ref={(r) => { inputs.current[i] = r; }}
-              key={`otp-${i}`}
+                style={[styles.cell, code[i] ? styles.cellFilled : null]}
-              ref={(r) => {
+                keyboardType="number-pad"
-                inputs.current[i] = r;
+                maxLength={i === 0 ? CELL_COUNT : 1}
-              }}
+                value={code[i]}
-              style={[styles.cell, code[i] ? styles.cellFilled : null]}
+                onChangeText={(t) => (i === 0 ? handleFirstCellChange(t) : updateIndex(i, t))}
-              keyboardType="number-pad"
+                onKeyPress={(e) => handleKeyPress(i, e)}
-              maxLength={1}
+                placeholder="•"
-              value={code[i]}
+                placeholderTextColor="#BDBDBD"
-              onChangeText={(t) => (i === 0 ? handleFirstCellChange(t) : updateIndex(i, t))}
+                textContentType="oneTimeCode"
-              onKeyPress={(e) => handleKeyPress(i, e)}
+              />
-              placeholder="•"
+            ))}
-              placeholderTextColor="#BDBDBD"
+          </Animated.View>
-              textContentType="oneTimeCode"
+        </View>
-            />
-          ))}
-        </Animated.View>
-      </View>
 
-      {/* Bottom Section */}
+        <Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
-      <Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
+          <Pressable
-        <Pressable
+            onPressIn={() => Animated.spring(ctaScale, { toValue: 0.97, useNativeDriver: true }).start()}
-          onPressIn={() =>
+            onPressOut={() => Animated.spring(ctaScale, { toValue: 1, useNativeDriver: true }).start()}
-            Animated.spring(ctaScale, { toValue: 0.97, useNativeDriver: true }).start()
+            onPress={() => onSubmit(code.join(""), mobile)}
-          }
+            style={styles.button}
-          onPressOut={() =>
+          >
-            Animated.spring(ctaScale, { toValue: 1, useNativeDriver: true }).start()
+            <Text style={styles.buttonText}>Verify & Continue</Text>
-          }
-          onPress={() => onSubmit(code.join(""), mobile)}
-          style={styles.button}
-        >
-          <Text style={styles.buttonText}>Continue</Text>
-        </Pressable>
-
-        {timer > 0 ? (
-          <Text style={styles.footerText}>Resend code in 00:{timer.toString().padStart(2, "0")}</Text>
-        ) : (
-          <Pressable onPress={resendOtp} disabled={isResending}>
-            <Text style={[styles.footerText, { color: theme.accent }]}>
-              {isResending ? "Resending..." : "Resend Code"}
-            </Text>
           </Pressable>
-        )}
+
-      </Animated.View>
+          {timer > 0 ? (
-    </KeyboardAvoidingView>
+            <Text style={styles.footerText}>Resend code in 00:{timer.toString().padStart(2, "0")}</Text>
+          ) : (
+            <Pressable onPress={resendOtp} disabled={isResending}>
+              <Text style={[styles.footerText, { color: colors.primary, fontWeight: '600' }]}>
+                {isResending ? "Resending..." : "Resend Code"}
+              </Text>
+            </Pressable>
+          )}
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </LinearGradient>
   );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: theme.background, padding: 20 },
+  gradientContainer: { flex: 1 },
-  topSection: { flex: 1, justifyContent: "center" },
+  container: { flex: 1, padding: 24, justifyContent: "space-between" },
-  title: { fontSize: 26, fontWeight: "800", color: theme.text, marginBottom: 8 },
+  topSection: { flex: 1, justifyContent: "center", alignItems: 'center' },
-  subtitle: {
+  title: { fontSize: 28, fontWeight: "bold", color: colors.textDark, textAlign: 'center', marginBottom: 12 },
-    fontSize: 15,
+  subtitle: { fontSize: 16, color: colors.textLight, textAlign: 'center', marginBottom: 32, lineHeight: 24, maxWidth: 300 },
-    color: theme.subText,
+  otpRow: { flexDirection: "row", justifyContent: "space-between", width: '100%', paddingHorizontal: 10 },
-    marginBottom: 24,
+  cell: { width: 48, height: 56, borderRadius: 12, borderWidth: 1.5, borderColor: colors.inputBorder, backgroundColor: colors.white, textAlign: "center", fontSize: 22, fontWeight: '700', color: colors.textDark, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.08, shadowRadius: 8, elevation: 3 },
-    lineHeight: 22,
+  cellFilled: { borderColor: colors.primary, backgroundColor: '#F7F2FF' },
-  },
+  bottomSection: { paddingBottom: Platform.OS === "ios" ? 20 : 10 },
-  otpRow: { flexDirection: "row", justifyContent: "space-between" },
+  button: { backgroundColor: colors.primary, paddingVertical: 18, borderRadius: 30, alignItems: "center", justifyContent: "center", shadowColor: colors.primary, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.3, shadowRadius: 15, elevation: 8 },
-  cell: {
+  buttonText: { color: colors.white, fontWeight: "700", fontSize: 16 },
-    width: 50,
+  footerText: { textAlign: "center", color: colors.textLight, fontSize: 14, marginTop: 20 },
-    height: 58,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: theme.outline,
-    backgroundColor: "#fff",
-    textAlign: "center",
-    fontSize: 20,
-    color: theme.text,
-  },
-  cellFilled: { borderColor: "#D1D1D1" },
-  bottomSection: { marginBottom: 30 },
-  button: {
-    backgroundColor: colors.primary,
-    paddingVertical: 18,
-    borderRadius: 14,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  buttonText: { color: "#000", fontWeight: "700", fontSize: 16 },
-  footerText: {
-    textAlign: "center",
-    color: theme.subText,
-    fontSize: 13,
-    marginTop: 14,
-  },
 });

src/screens/home/Home.tsx

@@ -9,23 +9,20 @@ import {
   Image,
   Alert,
   FlatList,
-  ListRenderItem, // Import ListRenderItem for better typing
+  ListRenderItem,
 } from "react-native";
 import AppView from "../../components/AppView";
 import colors from "../../components/colors";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigation } from "@react-navigation/native";
 import { PROFILE_URL } from "../../utils/ApiUrls";
-import * as Keychain from "react-native-keychain";
 import { setUserData } from "../../redux/userSlice";
 import { TabNavigationProp } from "../../navigation/BottomTabs";
-import GroupsTabs from "./GroupsTabs";
 import UserProfileStatus from "./UserProfileStatus";
-import UserHome from "./user-home/UserHome";
 import AnimatedCard from "../../components/common/AnimatedCard";
 import { IoniconsIconName } from "@react-native-vector-icons/ionicons";
+import { apiCall } from "../../utils/ApiHelper";
 
-// Enable layout animation for Android
 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
@@ -37,212 +34,108 @@ type UserProfile = {
   lastName: string | null;
   imageBlob: string | null;
   role?: string;
-}
+};
-// --- TYPE DEFINITIONS ---
+
 interface ActionItem {
   id: string;
   title: string;
   action: string;
   tab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests";
-
   iconName?: IoniconsIconName;
   backOne?: string;
   backTwo?: string;
-  subtitle?: string
+  subtitle?: string;
 }
 
-
+// Updated action items with a prettier pastel palette
-
-// Organizer Actions
 const organizerActions: ActionItem[] = [
-  {
+    { id: "1", title: "My Groups", subtitle: "Manage your groups", action: "NAVIGATE_MANAGEMENT", tab: "My Groups", iconName: "people-circle-outline", backOne: '#decbfcff', backTwo: '#B799FF' },
-    id: "1",
+    { id: "2", title: "Joined Groups", subtitle: "View member groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "people-outline", backOne: '#D7E9F7', backTwo: '#82AAE3' },
-    title: "My Groups",
+    { id: "3", title: "Requests", subtitle: "Check new requests", action: "NAVIGATE_MANAGEMENT", tab: "Requests", iconName: "notifications-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
-    subtitle: "Manage your own groups",
-    action: "NAVIGATE_MANAGEMENT",
-    tab: "My Groups",
-    iconName: "people-outline",
-    backOne: "#4facfe",
-    backTwo: "#00f2fe",
-  },
-  {
-    id: "2",
-    title: "Joined Groups",
-    subtitle: "View groups you’ve joined",
-    action: "NAVIGATE_MANAGEMENT",
-    tab: "Joined Groups",
-    iconName: "person-outline",
-    backOne: "#43e97b",
-    backTwo: "#38f9d7",
-  },
-  {
-    id: "3",
-    title: "Requests",
-    subtitle: "Check group requests",
-    action: "NAVIGATE_MANAGEMENT",
-    tab: "Requests",
-    iconName: "notifications-outline",
-    backOne: "#fa709a",
-    backTwo: "#fee140",
-  },
 ];
 
-// User Actions
 const userActions: ActionItem[] = [
-  {
+    { id: "1", title: "Joined Groups", subtitle: "See your groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "person-outline", backOne: '#D7E9F7', backTwo: '#82AAE3' },
-    id: "1",
+    { id: "2", title: "Your Requests", subtitle: "Track your requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", iconName: "mail-open-outline", backOne: '#FFF4D2', backTwo: '#FFB344' },
-    title: "Joined Groups",
+    { id: "3", title: "Transactions", subtitle: "View your history", action: "TRANSACTION", iconName: "receipt-outline", backOne: '#decbfcff', backTwo: '#B799FF' },
-    subtitle: "See your joined groups",
-    action: "NAVIGATE_MANAGEMENT",
-    tab: "Joined Groups",
-    iconName: "person-outline",
-    backOne: "#43e97b",
-    backTwo: "#38f9d7",
-  },
-  {
-    id: "2",
-    title: "Your Requests",
-    subtitle: "Track your group requests",
-    action: "NAVIGATE_MANAGEMENT",
-    tab: "Your Requests",
-    iconName: "mail-outline",
-    backOne: "#ff9a9e",
-    backTwo: "#fad0c4",
-  },
-  {
-    id: "3",
-    title: "Transaction",
-    subtitle: "View your transaction history",
-    action: "TRANSACTION",
-    iconName: "calculator-outline",
-    backOne: "#4facfe",
-    backTwo: "#00f2fe",
-  },
 ];
 
-
 const Home: React.FC = () => {
   const user = useSelector((state: any) => state.user);
   const navigation = useNavigation<TabNavigationProp>();
   const dispatch = useDispatch();
 
-  // --- FIXED: Conditional logic moved inside the component ---
   const actions = user.role === 'ORGANIZER' ? organizerActions : userActions;
-  const [apiUser, setApiUser] = useState<UserProfile | null | any>(null)
+  const [apiUser, setApiUser] = useState<UserProfile | null>(null);
 
-  const fetchUserProfile = async () => {
+  useEffect(() => {
-    try {
+    const fetchUserProfile = async () => {
-      const credentials = await Keychain.getGenericPassword();
+      try {
-      if (!credentials) {
+        const result = await apiCall(PROFILE_URL, "GET") as any;
-        return;
+        if (result.status === "success") {
-      }
+          setApiUser(result.data);
-      const token = credentials.password;
+          dispatch(setUserData({ ...result.data, profileStatus: true }));
-
-      console.log("token : ", token)
-      const response = await fetch(
-        PROFILE_URL,
-        {
-          method: "GET",
-          headers: {
-            Accept: "*/*",
-            Authorization: `Bearer ${token}`,
-          },
         }
-      );
+      } catch (error) {
-
+        console.error("❌ Error fetching profile:", error);
-      const result = await response.json();
-      console.log("👤 Profile Response:", result);
-      if (result.status === "success") {
-        setApiUser(result.data);
-        dispatch(
-          setUserData({
-            id: result.data.id,
-            userId: result.data.userId,
-            username: result.data.username,
-            firstName: result.data.firstName,
-            lastName: result.data.lastName,
-            gender: result.data.gender,
-            mobile: result.data.mobile,
-            email: result.data.email,
-            address: result.data.address,
-            bankAccountNumber: result.data.bankAccountNumber,
-            bankName: result.data.bankName,
-            branchCode: result.data.branchCode,
-            profilePicture: result.data.filePath,
-            filePath: result.data.filePath,
-            imageBlob: result.data.imageBlob,
-            role: result.data.role,
-            organizerId: result.data.organizerId,
-            organizerStatus: result.data.organizerStatus,
-            profileStatus: true,
-          })
-        );
       }
-    } catch (error) {
+    };
-      console.error("❌ Error fetching profile:", error);
+    const unsubscribe = navigation.addListener('focus', fetchUserProfile);
-    }
-  };
-
-  useEffect(() => {
     fetchUserProfile();
-  }, []);
+    return unsubscribe;
+  }, [navigation, dispatch]);
 
-
-  useEffect(() => {
-    fetchUserProfile();
-  }, []);
-
-  // --- REFACTORED: Simplified action handler ---
   const handleActionPress = (item: ActionItem) => {
     if (item.action === "NAVIGATE_MANAGEMENT" && item.tab) {
       navigation.navigate('Management', { actionTab: item.tab });
     } else if (item.action === "TRANSACTION") {
-      navigation.navigate("TransactionList" as never)
+      navigation.navigate("TransactionList" as never);
-    } else if (item.action === "ACTION_4") {
-      Alert.alert("Action 4 pressed");
     } else {
       Alert.alert("Unknown action", item.title);
     }
   };
 
-  // Render function for each grid item
   const renderGridItem: ListRenderItem<ActionItem> = ({ item }) => (
-
+    <View style={styles.cardWrapper}>
-    <AnimatedCard
+        <AnimatedCard
-      key={item.id}
+          key={item.id}
-      title={item.title}
+          title={item.title}
-      subtitle={item.subtitle}
+          subtitle={item.subtitle}
-      iconName={item.iconName}
+          iconName={item.iconName}
-      backOne={item.backOne}
+          backOne={item.backOne}
-      backTwo={item.backTwo}
+          backTwo={item.backTwo}
-      onPress={() => handleActionPress(item)}
+          onPress={() => handleActionPress(item)}
-    />
+        />
+    </View>
   );
 
+  const getProfileImageUri = () => {
+    const blob = user.imageBlob || apiUser?.imageBlob;
+    return blob ? { uri: `data:image/jpeg;base64,${blob}` } : require('../../assets/images/placeholder.png');
+  };
+
   return (
     <AppView barStyle="dark-content" style={styles.container}>
       <View style={styles.header}>
-        <Text style={styles.greeting}>Hello, {user.firstName || apiUser?.firstName} {user.lastName || apiUser?.lastName}</Text>
+        <View>
+          <Text style={styles.greeting}>Hello,</Text>
+          <Text style={styles.userName}>{user.firstName || apiUser?.firstName || 'User'}</Text>
+        </View>
         <TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
-          <Image
+          <Image source={getProfileImageUri()} style={styles.profileImage} />
-            source={
-              user.imageBlob
-              && { uri: user.imageBlob || apiUser?.imageBlob ? `data:image/jpeg;base64,${user.imageBlob || apiUser?.imageBlob}` : user.profilePicture || apiUser?.imageBlob }
-            }
-            style={{ width: 40, height: 40, borderRadius: 20, borderColor: colors.primary, borderWidth: 2 }}
-          />
         </TouchableOpacity>
       </View>
-      {/* Status */}
+      
       <UserProfileStatus />
-      {/* {user?.role === "USER" || apiUser?.role === "USER" ? <UserHome /> :
+
-        <GroupsTabs />} */}
+      <Text style={styles.sectionTitle}>Quick Actions</Text>
+      
       <FlatList
         data={actions}
         renderItem={renderGridItem}
         keyExtractor={(item) => item.id}
-      // columnWrapperStyle={styles.row}
+        numColumns={2}
-      // contentContainerStyle={{ paddingHorizontal: 8 }}
+        contentContainerStyle={{ paddingHorizontal: 8 }}
       />
     </AppView>
   );
@@ -253,48 +146,41 @@ export default Home;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F4F6F8'
+    backgroundColor: colors.white, // Set background to white
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 12,
+    paddingHorizontal: 20,
+    paddingTop: 24,
+    paddingBottom: 16,
   },
-  headerTitle: {
+  greeting: {
     fontSize: 22,
-    fontWeight: "600",
+    color: colors.textSecondary,
-    color: colors.Home,
   },
-  row: {
+  userName: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: colors.textDark,
+  },
+  profileImage: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    borderColor: colors.pastelPink, // Using pastelPink for border
+    borderWidth: 2,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: colors.textDark,
+    paddingHorizontal: 20,
+    marginBottom: 8,
+  },
+  cardWrapper: {
     flex: 1,
-    justifyContent: "space-around",
+    marginHorizontal: 8,
-  },
-  greeting: { fontSize: 22, fontWeight: "600", color: colors.pastelPink },
-  gridButton: {
-    flex: 1,
-    margin: 8,
-    backgroundColor: "#FFFFFF",
-    borderRadius: 12,
-    padding: 16,
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 5,
-    elevation: 4,
-  },
-  gridIcon: {
-    width: 60,
-    height: 60,
-    marginBottom: 12,
-    borderRadius: 8,
-    backgroundColor: '#E0E0E0',
-  },
-  gridLabel: {
-    fontSize: 16,
-    fontWeight: "500",
-    color: colors.Home,
-    textAlign: "center",
   },
 });

src/screens/management/EditGroupScreen.tsx

@@ -154,10 +154,10 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
     }
   }, [groupId]);
 const getPaymentStatus = async()=>{
-  const response = await apiCall(`https://exotic-humpback-mistakenly.ngrok-free.app/api/payments/group/${groupId}/payment/paid`, 'GET') as { status: string; data?: { currentCycle: number ,status: boolean }; message?: string };
+  const response = await apiCall(`https://exotic-humpback-mistakenly.ngrok-free.app/api/payments/group/${groupId}/payment/paid`, 'GET') as { status: string; data?: { currentCycle: number ,allPaid: boolean }; message?: string };
   console.log("paymentStatus",response)
   if (response.status === 'success') {
-    setPaymentStatus(response.data?.status || false);
+    setPaymentStatus(response.data?.allPaid || false);
     setCurrentCycle(response.data?.currentCycle || null);
   }
 }

src/screens/profile/Profile.tsx

@@ -660,7 +660,7 @@ const Profile = () => {
                       onPress={() => setEditing(false)}
                       icon="close"
                       style={styles.cancelButton}
-                      buttonBackground=""
+                      buttonBackground={colors.white }
                     />
                   </View>
 
@@ -756,12 +756,14 @@ const styles = StyleSheet.create({
     width: "80%",
     paddingHorizontal: 10,
     borderRadius: 25,
+    elevation: 5,
+
   },
   detailsSection: {
     marginBottom: "40%",
   },
   sectionTitle: {
-    fontSize: 18,
+    fontSize: 18, 
     fontWeight: "700",
     color: "#1e293b",
     // marginBottom: 16,
@@ -777,6 +779,7 @@ const styles = StyleSheet.create({
   },
   detailIcon: {
     marginRight: 12,
+    elevation:5 
   },
   detailLabel: {
     fontSize: 12,
@@ -789,7 +792,9 @@ const styles = StyleSheet.create({
     fontWeight: "500",
   },
   editButton: {
-    paddingHorizontal: 8,
+    elevation:5,
+    paddingHorizontal: 10,
+    borderRadius: 15,
   },
   editSection: {
     marginBottom: '100%',