text4u-app/app/screens/Home.jsx

import React, { useState } from 'react';
import { View, StyleSheet, TextInput, Text, ScrollView } from 'react-native';
import { Appbar, Menu, Avatar, useTheme } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialIcons';
import dpuser from "@/assets/images/userdp.png";

const Home = () => {
  const { colors, fonts } = useTheme();
  const [menuVisible, setMenuVisible] = useState(false);
  const [searchInput, setSearchInput] = useState("")

  const renderNotification = () => {
    return (
      <View style={{marginBottom:30, borderBottomWidth:1, borderBottomColor:"rgba(57, 104, 104, 0.3)"}}>
        <View style={{ flexDirection: "row", marginBottom: 10 }}>
          <Avatar.Image size={60} source={dpuser}></Avatar.Image>
          <View style={{ flex: 1, justifyContent: "center", paddingStart: 15, position:"relative", justifyContent:"space-evenly" }}>
            <Text style={{ fontWeight: "700", position:"absolute", top:5, right:0, color:"rgba(0,0,0,0.3)" }}>7:55AM</Text>
            <Text style={{ fontWeight: "700" }}>Invest Pahang</Text>
            <Text style={{ fontWeight: "700" }}>ID No : Ariffudin@PSK</Text>
          </View>
        </View>
        <Text style={{ fontWeight: "700", marginBottom:10 }}>Muhammad Ariffudin is working from home today</Text>
      </View>
    )
  }

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <Appbar.Header>

        <Avatar.Image size={50} source={dpuser}></Avatar.Image>

        <View style={styles.titleContainer}>
          <Appbar.Content title="General" titleStyle={[fonts.titleLarge, styles.title]} />
        </View>

        {/* Menu Component */}
        <Menu
          visible={menuVisible}
          onDismiss={() => setMenuVisible(false)}
          anchor={
            <Appbar.Action icon="dots-vertical" onPress={() => setMenuVisible(true)} />
          }
        >
          <Menu.Item onPress={() => console.log('Profile Clicked')} title="Profile" />
          <Menu.Item onPress={() => console.log('Settings Clicked')} title="Settings" />
          <Menu.Item onPress={() => console.log('Logout Clicked')} title="Logout" />
        </Menu>
      </Appbar.Header>

      <View style={styles.tabContainer}>
        <Text style={[styles.tabButton, fonts.titleMedium, { fontWeight: "bold" }, { borderBottomWidth: 2, borderBottomColor: colors.secondary, color: colors.secondary }]}>General  </Text>
        <Text style={[styles.tabButton, { fontWeight: "bold" }, fonts.titleMedium]}>Request <Text style={styles.badge}>1</Text></Text>
      </View>


      <View style={styles.searchSection}>
        <TextInput
          style={styles.input}
          placeholder="Search"
          onChangeText={setSearchInput}
          value={searchInput}
          underlineColorAndroid="transparent"
          placeholderTextColor="#D9D9D9"
        />
        <Icon name="search" size={20} color="#888" style={styles.icon} />
      </View>

      <View style={{flex:1}}>
        <ScrollView>
          <Text style={[fonts.titleMedium, { fontWeight: "bold", marginBottom: 15 }]}>Today</Text>
          {[1,2].map(() => renderNotification())}

          <Text style={[fonts.titleMedium, { fontWeight: "bold", marginBottom: 15 }]}>Yesterday</Text>
          {[1,2].map(() => renderNotification())}

          <Text style={[fonts.titleMedium, { fontWeight: "bold", marginBottom: 15 }]}>Older</Text>
          {[1,2].map(() => renderNotification())}

        </ScrollView>
      </View>

    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    width: '100%',
  },
  badge: {
    backgroundColor: "#BB5C3F",
    color: "#FFF",
    borderRadius: 100,
    paddingVertical: 4,
    paddingHorizontal: 6,
    fontSize: 10,
    fontWeight: "400",
    verticalAlign: "middle",
    marginStart: 5
  },
  tabContainer: {
    flexDirection: "row",
    marginBottom: 20
  },
  tabButton: {
    fontWeight: "bold",
    paddingVertical: 15,
    width: "50%",
    textAlign: "center",
    active: {
      borderBottomWidth: 2,
    }
  },
  titleContainer: {
    flex: 1,
    alignItems: 'center',
  },
  title: {
    fontWeight: 'bold',
  },
  searchSection: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20
  },
  icon: {
    padding: 10,
    position: "absolute",
    right: 10,
    color: "#D9D9D9"
  },
  input: {
    height: 40,
    flex: 1,
    borderWidth: 1,
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 100,
    borderColor: "#C0CFD0"
  }
});

export default Home;