dummy home screen

src/components/common/Custom.tsx

@@ -63,7 +63,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
       ? colors.pastelOrange
       : colors.primary);
 
-  const textColor = type === "secondary" ? colors.textDark : colors.white;
+  const textColor = type === "secondary" ? colors.textDark : '#000';
 
   return (
     <TouchableOpacity

src/screens/GroupScreen.tsx

@@ -145,7 +145,7 @@ export default function GroupScreen() {
   };
 
   const renderContent = () => {
-    let data ;
+    let data: Group[];
     switch (activeTab) {
       case "My Groups": data = myGroups; break;
       case "Joined": data = joinedGroups; break;
@@ -168,7 +168,11 @@ export default function GroupScreen() {
         renderItem={({ item }) => (
           <GroupCard
             item={item}
-            onJoin={activeTab === 'Public' ? handleJoinGroup : () => { }}
+            onJoin={() => {
+              if (activeTab === 'Public') {
+                handleJoinGroup
+              }
+            }}
             onView={handleViewGroup}
             isGrid={isGridView}
           />

src/screens/home/GroupList.tsx

@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  FlatList,
+  ActivityIndicator,
+  TouchableOpacity,
+  LayoutAnimation,
+  UIManager,
+  Platform,
+} from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import colors from "../../components/colors";
+
+// ✅ Enable LayoutAnimation for Android
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const API_URL = "https://api.godemo.in/FundCollect/api/fund/getAll/my/groups";
+const TOKEN =
+  "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MjY1MjI5MzcxIiwidXNlcklkIjoiMTAwMDAxIiwiaWF0IjoxNzU4MDAyOTkxLCJleHAiOjE3NTgwODkzOTF9.mMRPsULcvdfdCrJJBDjnT2okE3dJsTn42JBqi_vP0Xk";
+
+// ✅ Each group card with expandable details
+const GroupCard = ({ item }: { item: any }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    LayoutAnimation.easeInEaseOut();
+    setExpanded(!expanded);
+  };
+
+  const initial = item.groupName ? item.groupName.charAt(0).toUpperCase() : "?";
+
+  return (
+    <View style={styles.groupCard}>
+      <View style={styles.groupHeader}>
+        <View style={styles.avatar}>
+          <Text style={styles.avatarText}>{initial}</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text style={styles.groupName}>{item.groupName}</Text>
+          <Text style={styles.groupDescription}>{item.description}</Text>
+          <Text style={styles.groupMeta}>
+            {item.visibility} • {item.cycleType}
+          </Text>
+        </View>
+        <TouchableOpacity onPress={toggleExpand}>
+          <Ionicons
+            name={expanded ? "chevron-up-outline" : "chevron-forward-outline"}
+            size={22}
+            color={colors.textLight}
+          />
+        </TouchableOpacity>
+      </View>
+
+      {expanded && (
+        <View style={styles.groupDetails}>
+          {Object.entries(item).map(([key, value]) => (
+            <Text key={key} style={styles.detailText}>
+              <Text style={{ fontWeight: "600" }}>{key}:</Text>{" "}
+              {Array.isArray(value) ? value.join(", ") : String(value)}
+            </Text>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+// ✅ Group list with search
+const GroupList = () => {
+  const [groups, setGroups] = useState<any[]>([]);
+  const [filteredGroups, setFilteredGroups] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    const fetchGroups = async () => {
+      try {
+        const res = await fetch(API_URL, {
+          headers: { Accept: "*/*", Authorization: TOKEN },
+        });
+        const data = await res.json();
+        setGroups(data.data || []);
+        setFilteredGroups(data.data || []);
+      } catch (e) {
+        console.error("API error", e);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchGroups();
+  }, []);
+
+  useEffect(() => {
+    if (search.trim() === "") {
+      setFilteredGroups(groups);
+    } else {
+      setFilteredGroups(
+        groups.filter((g) =>
+          g.groupName.toLowerCase().includes(search.toLowerCase())
+        )
+      );
+    }
+  }, [search, groups]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        size="large"
+        color={colors.primary}
+        style={{ marginTop: 20 }}
+      />
+    );
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Search bar */}
+      <View style={styles.searchContainer}>
+        <Ionicons name="search" size={20} color={colors.textLight} />
+        <TextInput
+          placeholder="Search groups..."
+          placeholderTextColor={colors.textLight}
+          style={styles.searchInput}
+          value={search}
+          onChangeText={setSearch}
+        />
+      </View>
+
+      {/* Group list */}
+      <FlatList
+        data={filteredGroups}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => <GroupCard item={item} />}
+        ListEmptyComponent={
+          <Text style={styles.emptyText}>No groups found</Text>
+        }
+        contentContainerStyle={{ paddingBottom: 20 }}
+      />
+    </View>
+  );
+};
+
+export default GroupList;
+
+const styles = StyleSheet.create({
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    margin: 10,
+    height: 45,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 5,
+    elevation: 2,
+  },
+  searchInput: { flex: 1, marginLeft: 8, color: colors.textDark },
+
+  groupCard: {
+    backgroundColor: colors.white,
+    padding: 14,
+    borderRadius: 14,
+    marginHorizontal: 10,
+    marginBottom: 12,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  groupHeader: { flexDirection: "row", alignItems: "center" },
+  avatar: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    backgroundColor: colors.primary + "33",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  avatarText: { fontSize: 18, fontWeight: "700", color: colors.primary },
+  groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
+  groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
+  groupMeta: { fontSize: 12, color: colors.primary, marginTop: 2 },
+
+  groupDetails: {
+    marginTop: 10,
+    padding: 10,
+    borderRadius: 8,
+    backgroundColor: "#f9f9f9",
+  },
+  detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
+
+  emptyText: {
+    textAlign: "center",
+    color: colors.textLight,
+    marginTop: 20,
+    fontSize: 14,
+  },
+});

src/screens/home/GroupsTabs.tsx

@@ -0,0 +1,261 @@
+import React, { useState, useEffect } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TextInput,
+  FlatList,
+  ActivityIndicator,
+  LayoutAnimation,
+  UIManager,
+  Platform,
+} from "react-native";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
+import colors from "../../components/colors";
+import AppView from "../../components/AppView";
+
+// Enable LayoutAnimation for Android
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const API_URL = "https://api.godemo.in/FundCollect/api/fund/getAll/my/groups";
+const TOKEN =
+  "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MjY1MjI5MzcxIiwidXNlcklkIjoiMTAwMDAxIiwiaWF0IjoxNzU4MDAyOTkxLCJleHAiOjE3NTgwODkzOTF9.mMRPsULcvdfdCrJJBDjnT2okE3dJsTn42JBqi_vP0Xk";
+
+// ✅ Group Card
+const GroupCard = ({ item }: { item: any }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    LayoutAnimation.easeInEaseOut();
+    setExpanded(!expanded);
+  };
+
+  const initial = item.groupName ? item.groupName.charAt(0).toUpperCase() : "?";
+
+  return (
+    <View style={styles.groupCard}>
+      <View style={styles.groupLeft}>
+        <View style={styles.groupAvatar}>
+          <Text style={styles.avatarText}>{initial}</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text style={styles.groupName}>{item.groupName}</Text>
+          <Text style={styles.groupDescription}>{item.description}</Text>
+          <Text style={styles.groupMeta}>
+            {item.visibility} • {item.cycleType}
+          </Text>
+        </View>
+        <TouchableOpacity onPress={toggleExpand}>
+          <Ionicons
+            name={expanded ? "chevron-up-outline" : "chevron-forward-outline"}
+            size={22}
+            color={colors.textLight}
+          />
+        </TouchableOpacity>
+      </View>
+
+      {expanded && (
+        <View style={styles.detailsBox}>
+          {Object.entries(item).map(([key, value]) => (
+            <Text key={key} style={styles.detailText}>
+              <Text style={{ fontWeight: "600" }}>{key}:</Text>{" "}
+              {Array.isArray(value) ? value.join("-") : String(value)}
+            </Text>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+// ✅ Group List with Search
+const GroupList = () => {
+  const [groups, setGroups] = useState<any[]>([]);
+  const [filteredGroups, setFilteredGroups] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    const fetchGroups = async () => {
+      try {
+        const res = await fetch(API_URL, {
+          headers: { Accept: "*/*", Authorization: TOKEN },
+        });
+        const data = await res.json();
+        setGroups(data.data || []);
+        setFilteredGroups(data.data || []);
+      } catch (e) {
+        console.error("API error", e);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchGroups();
+  }, []);
+
+  useEffect(() => {
+    if (search.trim() === "") {
+      setFilteredGroups(groups);
+    } else {
+      setFilteredGroups(
+        groups.filter((g) =>
+          g.groupName.toLowerCase().includes(search.toLowerCase())
+        )
+      );
+    }
+  }, [search, groups]);
+
+  if (loading) return <ActivityIndicator size="large" color={colors.primary} />;
+
+  return (
+    <>
+      <View style={styles.searchContainer}>
+        <Ionicons name="search" size={20} color={colors.textLight} />
+        <TextInput
+          placeholder="Search groups..."
+          placeholderTextColor={colors.textLight}
+          style={styles.searchInput}
+          value={search}
+          onChangeText={setSearch}
+        />
+      </View>
+
+      <FlatList
+        data={filteredGroups}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => <GroupCard item={item} />}
+        ListEmptyComponent={
+          <Text style={styles.emptyText}>No groups found</Text>
+        }
+      />
+    </>
+  );
+};
+
+// ✅ Tab Layout
+const GroupsTabs = () => {
+  const [activeTab, setActiveTab] = useState("MyGroups");
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case "MyGroups":
+        return <GroupList />;
+      case "Create":
+        return (
+          <View style={styles.centered}>
+            <Text style={styles.sectionTitle}>Create Group Screen</Text>
+          </View>
+        );
+      case "History":
+        return (
+          <View style={styles.centered}>
+            <Text style={styles.sectionTitle}>History Screen</Text>
+          </View>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <AppView barStyle="dark-content">
+      <View style={styles.container}>
+        {/* Tabs */}
+        <View style={styles.tabs}>
+          {["MyGroups", "Create", "History"].map((tab) => (
+            <TouchableOpacity
+              key={tab}
+              style={[
+                styles.tabButton,
+                activeTab === tab && styles.activeTabButton,
+              ]}
+              onPress={() => setActiveTab(tab)}
+            >
+              <Text
+                style={[
+                  styles.tabText,
+                  activeTab === tab && styles.activeTabText,
+                ]}
+              >
+                {tab === "MyGroups" ? "My Groups" : tab}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+
+        {/* Content */}
+        {renderContent()}
+      </View>
+    </AppView>
+  );
+};
+
+export default GroupsTabs;
+
+const styles = StyleSheet.create({
+  container: { },
+  tabs: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    // marginVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: "#ddd",
+  },
+  tabButton: { paddingVertical: 10, flex: 1, alignItems: "center" },
+  tabText: { fontSize: 16, color: colors.textLight },
+  activeTabButton: { borderBottomWidth: 2, borderBottomColor: colors.primary },
+  activeTabText: { color: colors.primary, fontWeight: "600" },
+
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    marginVertical: 10,
+    height: 45,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 5,
+    elevation: 2,
+  },
+  searchInput: { flex: 1, marginLeft: 8, color: colors.textDark },
+
+  groupCard: {
+    backgroundColor: colors.white,
+    padding: 14,
+    borderRadius: 14,
+    marginBottom: 12,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  groupLeft: { flexDirection: "row", alignItems: "center" },
+  groupAvatar: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    backgroundColor: colors.primary + "33",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  avatarText: { fontSize: 18, fontWeight: "700", color: colors.primary },
+  groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
+  groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
+  groupMeta: { fontSize: 12, color: colors.primary, marginTop: 2 },
+  detailsBox: {
+    marginTop: 10,
+    padding: 10,
+    borderRadius: 8,
+    backgroundColor: "#f9f9f9",
+  },
+  detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
+  emptyText: { textAlign: "center", color: colors.textLight, marginTop: 20 },
+  centered: { flex: 1, justifyContent: "center", alignItems: "center" },
+  sectionTitle: { fontSize: 18, fontWeight: "600", color: colors.textDark },
+});

src/screens/home/Home.tsx

@@ -1,82 +1,43 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
   StyleSheet,
   Text,
   View,
-  TextInput,
   TouchableOpacity,
-  FlatList,
+  UIManager,
-  Image,
+  Platform,
 } from "react-native";
 import AppView from "../../components/AppView";
 import UserProfileStatus from "./UserProfileStatus";
 import colors from "../../components/colors";
-import {Ionicons} from "@react-native-vector-icons/ionicons";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
+import GroupsTabs from "./GroupsTabs";
+
+// Enable animation for Android
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
 
-const dummyChats = [
-  { id: "1", name: "Amit Sharma", lastMessage: "Sent ₹500", avatar: "https://i.pravatar.cc/100?img=1" },
-  { id: "2", name: "Sneha Patel", lastMessage: "Requested ₹200", avatar: "https://i.pravatar.cc/100?img=2" },
-  { id: "3", name: "Group Savings", lastMessage: "Target reached 🎉", avatar: "https://i.pravatar.cc/100?img=3" },
-];
 
 const Home = () => {
   return (
-    <AppView  barStyle="dark-content">
+    <AppView barStyle="dark-content">
-      <View style={styles.container}>
         {/* Header */}
         <View style={styles.header}>
           <Text style={styles.greeting}>Hello, Pooja 👋</Text>
           <TouchableOpacity>
-            <Ionicons name="person-circle-outline" size={40} color={colors.primary} />
+            <Ionicons
+              name="person-circle-outline"
+              size={40}
+              color={colors.primary}
+            />
           </TouchableOpacity>
         </View>
 
         {/* Status */}
         <UserProfileStatus />
+        <GroupsTabs />
 
-        {/* Search Bar */}
-        <View style={styles.searchContainer}>
-          <Ionicons name="search" size={20} color={colors.textLight} />
-          <TextInput
-            placeholder="Search chats or funds..."
-            placeholderTextColor={colors.textLight}
-            style={styles.searchInput}
-          />
-        </View>
-
-        {/* Quick Actions */}
-        <View style={styles.quickActions}>
-          <TouchableOpacity style={styles.actionButton}>
-            <Ionicons name="send-outline" size={22} color={colors.primary} />
-            <Text style={styles.actionText}>Send</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.actionButton}>
-            <Ionicons name="cash-outline" size={22} color={colors.primary} />
-            <Text style={styles.actionText}>Request</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.actionButton}>
-            <Ionicons name="time-outline" size={22} color={colors.primary} />
-            <Text style={styles.actionText}>History</Text>
-          </TouchableOpacity>
-        </View>
-
-        {/* Recent Chats / Transactions */}
-        <Text style={styles.sectionTitle}>Recent Activity</Text>
-        <FlatList
-          data={dummyChats}
-          keyExtractor={(item) => item.id}
-          renderItem={({ item }) => (
-            <TouchableOpacity style={styles.chatItem}>
-              <Image source={{ uri: item.avatar }} style={styles.avatar} />
-              <View style={styles.chatInfo}>
-                <Text style={styles.chatName}>{item.name}</Text>
-                <Text style={styles.chatMessage}>{item.lastMessage}</Text>
-              </View>
-              <Ionicons name="chevron-forward-outline" size={20} color={colors.textLight} />
-            </TouchableOpacity>
-          )}
-        />
-      </View>
     </AppView>
   );
 };
@@ -84,87 +45,14 @@ const Home = () => {
 export default Home;
 
 const styles = StyleSheet.create({
-  container: {
+  container: { },
-    flex: 1,
-    // padding: 16,
-  },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
     marginBottom: 12,
   },
-  greeting: {
+  greeting: { fontSize: 22, fontWeight: "600", color: colors.textDark },
-    fontSize: 22,
+  
-    fontWeight: "600",
+  
-    color: colors.textDark,
-  },
-  searchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: colors.white,
-    borderRadius: 12,
-    paddingHorizontal: 12,
-    marginVertical: 10,
-    height: 45,
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 5,
-    elevation: 2,
-  },
-  searchInput: {
-    flex: 1,
-    marginLeft: 8,
-    color: colors.textDark,
-  },
-  quickActions: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginVertical: 16,
-  },
-  actionButton: {
-    alignItems: "center",
-    flex: 1,
-  },
-  actionText: {
-    marginTop: 6,
-    fontSize: 14,
-    color: colors.textDark,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: "600",
-    marginVertical: 10,
-    color: colors.textDark,
-  },
-  chatItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: colors.white,
-    padding: 12,
-    borderRadius: 12,
-    marginBottom: 10,
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    elevation: 1,
-  },
-  avatar: {
-    width: 45,
-    height: 45,
-    borderRadius: 22,
-    marginRight: 12,
-  },
-  chatInfo: {
-    flex: 1,
-  },
-  chatName: {
-    fontSize: 16,
-    fontWeight: "500",
-    color: colors.textDark,
-  },
-  chatMessage: {
-    fontSize: 14,
-    color: colors.textLight,
-  },
 });

src/screens/home/UserProfileStatus.tsx

@@ -153,7 +153,7 @@ export default UserProfileStatus;
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
+        // flex: 1,
         // padding: 16,
         // backgroundColor: "#f5f7fb",
     },

src/screens/profile/Profile.tsx

@@ -240,6 +240,40 @@ const Profile = () => {
     }
   };
 
+
+  const handleLogout = (navigation: any) => {
+    Alert.alert(
+      "Logout",
+      "Are you sure you want to logout?",
+      [
+        {
+          text: "Cancel",
+          style: "cancel",
+        },
+        {
+          text: "Yes, Logout",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              // Clear saved credentials from Keychain
+              await Keychain.resetGenericPassword();
+
+              // Navigate to login screen
+              navigation.reset({
+                index: 0,
+                routes: [{ name: "Login" }],
+              });
+            } catch (error) {
+              console.error("Logout error:", error);
+              Alert.alert("Error", "Failed to logout. Please try again.");
+            }
+          },
+        },
+      ],
+      { cancelable: true }
+    );
+  };
+
   useFocusEffect(
     useCallback(() => {
       userStatus();
@@ -267,7 +301,7 @@ const Profile = () => {
   if (fetching || !user) {
     return (
       <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color={colors.Profile} />
+        <ActivityIndicator size="large" color={colors.pastelBlue} />
         <Text style={styles.loadingText}>Loading profile...</Text>
       </View>
     );
@@ -281,7 +315,7 @@ const Profile = () => {
       <View style={styles.header}>
         <Text style={styles.headerTitle}>User Profile</Text>
         <TouchableOpacity onPress={fetchUserProfile} style={styles.refreshButton}>
-          <Ionicons name="refresh" size={24} color={colors.Profile} />
+          <Ionicons name="refresh" size={24} color={'#000'} />
         </TouchableOpacity>
       </View>
       <KeyboardAvoidingView
@@ -309,7 +343,7 @@ const Profile = () => {
                   onError={() => console.log("Error loading image")}
                 />
                 <TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
-                  <Ionicons name="camera" size={18} color="white" />
+                  <Ionicons name="camera" size={18} color="#000" />
                 </TouchableOpacity>
               </View>
 
@@ -318,7 +352,7 @@ const Profile = () => {
                 onPress={handleUpdateImage}
                 icon={imageUpdating ? undefined : "cloud-upload"}
                 style={styles.updateImageButton}
-                buttonBackground={colors.Profile}
+                buttonBackground={colors.pastelBlue}
 
               />
             </View>
@@ -334,7 +368,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="person" size={20} color={colors.Profile} style={styles.detailIcon} />
+                    <Ionicons name="person" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Name</Text>
                       <Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
@@ -342,7 +376,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="mail" size={20} color={colors.Profile} style={styles.detailIcon} />
+                    <Ionicons name="mail" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Email</Text>
                       <Text style={styles.detailText}>{user.email || "Not provided"}</Text>
@@ -350,7 +384,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="call" size={20} color={colors.Profile} style={styles.detailIcon} />
+                    <Ionicons name="call" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Mobile</Text>
                       <Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
@@ -358,7 +392,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="at-circle" size={20} color={colors.Profile} style={styles.detailIcon} />
+                    <Ionicons name="at-circle" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Username</Text>
                       <Text style={styles.detailText}>{user.username}</Text>
@@ -366,7 +400,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="location" size={20} color={colors.Profile} style={styles.detailIcon} />
+                    <Ionicons name="location" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Address</Text>
                       <Text style={styles.detailText}>{user.address || "Not provided"}</Text>
@@ -374,7 +408,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="male-female" size={20} color={colors.Profile} style={styles.detailIcon} />
+                    <Ionicons name="male-female" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Gender</Text>
                       <Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
@@ -382,7 +416,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="key" size={20} color={colors.Profile} style={styles.detailIcon} />
+                    <Ionicons name="key" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Role</Text>
                       <Text style={styles.detailText}>{user.role || "User"}</Text>
@@ -395,7 +429,7 @@ const Profile = () => {
                   onPress={() => setEditing(true)}
                   icon="create"
                   style={styles.editButton}
-                  buttonBackground={colors.Profile}
+                  buttonBackground={colors.pastelBlue}
                 />
               </>
             ) : (
@@ -521,13 +555,13 @@ const styles = StyleSheet.create({
   profileCard: {
     borderRadius: 20,
     margin: 16,
-    backgroundColor: "#fff",
+    // backgroundColor: "#fff",
-    padding: 20,
+    // padding: 20,
-    shadowColor: "#000",
+    // shadowColor: "#000",
-    shadowOpacity: 0.1,
+    // shadowOpacity: 0.1,
-    shadowRadius: 10,
+    // shadowRadius: 10,
-    shadowOffset: { width: 0, height: 4 },
+    // shadowOffset: { width: 0, height: 4 },
-    elevation: 5,
+    // elevation: 5,
   },
   profileImageSection: {
     alignItems: "center",
@@ -551,7 +585,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     right: 0,
     bottom: 0,
-    backgroundColor: "#6366f1",
+    backgroundColor: colors.pastelBlue,
     borderRadius: 20,
     width: 40,
     height: 40,
@@ -645,19 +679,6 @@ const styles = StyleSheet.create({
   inputWithIcon: {
     paddingLeft: 40,
   },
-  button: {
-    backgroundColor: "#6366f1",
-    paddingVertical: 14,
-    borderRadius: 12,
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "row",
-    shadowColor: "#6366f1",
-    shadowOpacity: 0.3,
-    shadowRadius: 6,
-    shadowOffset: { width: 0, height: 3 },
-    elevation: 4,
-  },
   buttonSecondary: {
     backgroundColor: "#f1f5f9",
   },