dummy home screen

src/screens/GroupScreen.tsx

@@ -59,7 +59,7 @@ export default function GroupScreen() {
   };
 
   return (
-    <AppView backgroundColor={colors.pastelGreen} barStyle="dark-content">
+    <AppView barStyle="dark-content">
       <View style={styles.container}>
         {/* --- Header and Segmented Control --- */}
         <Text style={styles.title}>Your Groups</Text>

src/screens/home/Home.tsx

@@ -1,17 +1,170 @@
-import { StyleSheet, Text, View } from 'react-native'
+import React from "react";
-import React from 'react'
+import {
-import AppView from '../../components/AppView'
+  StyleSheet,
-import UserProfileStatus from './UserProfileStatus'
+  Text,
-import colors from '../../components/colors'
+  View,
+  TextInput,
+  TouchableOpacity,
+  FlatList,
+  Image,
+} 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";
+
+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 backgroundColor={colors.pastelPink} barStyle="dark-content">
+    <AppView  barStyle="dark-content">
-        <UserProfileStatus/>
+      <View style={styles.container}>
-      </AppView>
+        {/* Header */}
-  )
+        <View style={styles.header}>
-}
+          <Text style={styles.greeting}>Hello, Pooja 👋</Text>
+          <TouchableOpacity>
+            <Ionicons name="person-circle-outline" size={40} color={colors.primary} />
+          </TouchableOpacity>
+        </View>
 
-export default Home
+        {/* Status */}
+        <UserProfileStatus />
 
-const styles = StyleSheet.create({})
+        {/* 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>
+  );
+};
+
+export default Home;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // padding: 16,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  greeting: {
+    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

@@ -104,7 +104,7 @@ const UserProfileStatus: React.FC = () => {
 
     return (
         <View style={styles.container}>
-            <Text style={styles.title}>Welcome Back 👋</Text>
+            {/* <Text style={styles.title}>Welcome Back 👋</Text> */}
 
             <View style={styles.card}>
                 <Text style={styles.cardTitle}>Profile Status</Text>
@@ -174,7 +174,7 @@ const styles = StyleSheet.create({
         elevation: 3,
         shadowOpacity: 0.1,
         shadowRadius: 6,
-        marginBottom: 20,
+        // marginBottom: 20,
     },
     cardTitle: {
         fontSize: 18,

src/screens/profile/Profile.tsx

@@ -267,7 +267,7 @@ const Profile = () => {
   if (fetching || !user) {
     return (
       <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color="#6366f1" />
+        <ActivityIndicator size="large" color={colors.Profile} />
         <Text style={styles.loadingText}>Loading profile...</Text>
       </View>
     );
@@ -281,7 +281,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="#fff" />
+          <Ionicons name="refresh" size={24} color={colors.Profile} />
         </TouchableOpacity>
       </View>
       <KeyboardAvoidingView
@@ -318,7 +318,7 @@ const Profile = () => {
                 onPress={handleUpdateImage}
                 icon={imageUpdating ? undefined : "cloud-upload"}
                 style={styles.updateImageButton}
-                buttonBackground="#6366f1"
+                buttonBackground={colors.Profile}
 
               />
             </View>
@@ -334,7 +334,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="person" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <Ionicons name="person" size={20} color={colors.Profile} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Name</Text>
                       <Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
@@ -342,7 +342,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="mail" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <Ionicons name="mail" size={20} color={colors.Profile} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Email</Text>
                       <Text style={styles.detailText}>{user.email || "Not provided"}</Text>
@@ -350,7 +350,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="call" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <Ionicons name="call" size={20} color={colors.Profile} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Mobile</Text>
                       <Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
@@ -358,7 +358,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="at-circle" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <Ionicons name="at-circle" size={20} color={colors.Profile} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Username</Text>
                       <Text style={styles.detailText}>{user.username}</Text>
@@ -366,7 +366,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="location" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <Ionicons name="location" size={20} color={colors.Profile} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Address</Text>
                       <Text style={styles.detailText}>{user.address || "Not provided"}</Text>
@@ -374,7 +374,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="male-female" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <Ionicons name="male-female" size={20} color={colors.Profile} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Gender</Text>
                       <Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
@@ -382,7 +382,7 @@ const Profile = () => {
                   </View>
 
                   <View style={styles.detailRow}>
-                    <Ionicons name="key" size={20} color="#6366f1" style={styles.detailIcon} />
+                    <Ionicons name="key" size={20} color={colors.Profile} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Role</Text>
                       <Text style={styles.detailText}>{user.role || "User"}</Text>
@@ -395,7 +395,7 @@ const Profile = () => {
                   onPress={() => setEditing(true)}
                   icon="create"
                   style={styles.editButton}
-                  buttonBackground="#6366f1"
+                  buttonBackground={colors.Profile}
                 />
               </>
             ) : (
@@ -480,7 +480,7 @@ const Profile = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.pastelBlue,
+    // backgroundColor: colors.pastelBlue,
     paddingBottom: '30%',
   },
   loadingContainer: {

src/screens/setting/Setting.tsx

@@ -5,7 +5,7 @@ import colors from '../../components/colors'
 
 const Setting = () => {
     return (
-        <AppView backgroundColor={colors.pastelOrange} barStyle="dark-content">
+        <AppView  barStyle="dark-content">
             <Text>Setting</Text>
         </AppView>
     )