text4u-app/app/(tabs)/home/index.jsx

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

import confirmationNotificationDummyData from "@/dummyData.json";

const Home = () => {
  const { colors, fonts } = useTheme();
  const [menuVisible, setMenuVisible] = useState(false);
  const [searchInput, setSearchInput] = useState("")
  const [showRequest, setshowRequest] = useState(false)
  const [activeTab, setActiveTab] = useState('General');
  const [confirmationNotification, setConfirmationNotification] = useState([])

  useEffect(() => {
    setConfirmationNotification(confirmationNotificationDummyData)
  }, [])

  const renderNotification = () => {
    return (
      <Link href={{
        pathname: '/home/status',
        params: { id: '42', message: 'ReactNativeRocks' },
      }} asChild>
        <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>
      </Link>
    )
  }

  const renderNotificationAction = () => {
    return (
      <View style={{ marginBottom: 30, borderBottomWidth: 1, paddingBottom: 15, borderBottomColor: "rgba(57, 104, 104, 0.3)" }}>
        <Link href={{
          pathname: '/home/status',
          params: { id: '42', message: 'ReactNativeRocks' },
        }} asChild>
          <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>
        </Link>
        <Text style={{ fontWeight: "700", marginBottom: 10 }}>Muhammad Ariffudin is working from home today</Text>
        <View style={{ flexDirection: "row", justifyContent: "space-evenly", gap: 10 }}>
          <Button mode='outlined' style={{ paddingHorizontal: 35, borderColor: colors.primary }} onPress={() => { console.log("click") }}>Reject</Button>
          <Button mode='contained' style={{ paddingHorizontal: 35 }} onPress={() => { console.log("click") }}>Accept</Button>
        </View>
      </View>
    )
  }

  const renderNotificationResult = (result) => {
    return (
      <Link href={{
        pathname: '/home/status',
        params: { id: '42', message: 'ReactNativeRocks' },
      }} asChild>
        <View style={{ marginBottom: 30, borderBottomWidth: 1, paddingBottom: 15, 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 style={{ flexDirection: "row" }}>
            {(result) ?
              <Text style={[fonts.titleSmall, { color: colors.primary }]}><Icon name="done" size={20} style={{ verticalAlign: "middle", marginEnd: 10 }} />Request Accepted</Text> :
              <Text style={[fonts.titleSmall, { color: colors.error }]}><Icon name="close" size={20} style={{ verticalAlign: "middle", marginEnd: 10 }} />Request Decline</Text>
            }
          </View>
        </View>
      </Link>
    )
  }

  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, activeTab === 'General' && styles.activeTab]} onPress={() => { setActiveTab('General') }}>General</Text>
        <Text style={[styles.tabButton, fonts.titleMedium, activeTab === 'Request' && styles.activeTab]} onPress={() => { setActiveTab('Request') }}>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>

      {(activeTab == 'General') && <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>}

      {(activeTab == 'Request') && <View style={{ flex: 1 }}>
        <ScrollView>
          {confirmationNotification.map((confirmation) => {

            if (!confirmation) return

            if (confirmation.accepted == true) return renderNotificationResult(true)
            else if (confirmation.accepted == false) return renderNotificationResult(false)
            else return renderNotificationAction()

          })}
        </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
  },
  activeTab: {
    borderBottomWidth: 2,
    borderBottomColor: "#396868",
    color: "#396868",
    fontWeight: "bold"
  },
  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;