new layout logic and user notification picker

app/(pages)/index.jsx

@@ -1,148 +0,0 @@
-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;

app/(pages)/profile.jsx

@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import { View, StyleSheet, TextInput, Text, ScrollView } 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";
-
-const Notification = () => {
-  const { colors, fonts } = useTheme();
-  const [menuVisible, setMenuVisible] = useState(false);
-  const [inputContent, setInputContent] = useState("");
-
-
-  const preTextClick = (pretext) => {
-    setInputContent(pretext)
-  }
-
-  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="Send Notification" 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={{ flex: 1, marginTop: 20 }}>
-        <View style={{ flexDirection: "row", gap: 20, marginBottom: 20 }}>
-          <Text style={[fonts.titleLarge, { fontWeight: "bold" }]}>To :</Text>
-          <TextInput value='asd' style={{ flex: 1, paddingHorizontal: 20, borderBottomColor: "rgba(0,0,0,0.2)", borderBottomWidth: 1, marginEnd: 20 }}></TextInput>
-        </View>
-        <TextInput
-          style={styles.textArea}
-          value={inputContent}
-          onChangeText={setInputContent}
-          multiline={true} // Enables multi-line input
-          numberOfLines={8} // Sets an initial number of visible lines
-        />
-        <Text style={[fonts.titleLarge, { fontWeight: "bold", marginBottom:20 }]}>Select Pretext</Text>
-        <View style={{flex:1}}>
-          {[
-            "Request to Work From Home",
-            "Request for late Check In",
-            "Request for early Check Out",
-            "Notify for Annual Leave",
-            "Notify for Emergency Leave"
-          ].map(text => <Text onPress={()=>{preTextClick(text)}} style={[fonts.titleMedium, {marginBottom:20, fontWeight:"bold", color:colors.secondary}]} >{text}</Text> )}
-        </View>
-      </View>
-
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    width: '100%',
-  },
-  textArea: {
-    height: 220,
-    borderColor: "#ccc",
-    borderWidth: 1,
-    padding: 10,
-    borderRadius: 8,
-    textAlignVertical: "top", // Makes text start from the top-left
-    backgroundColor: "#fff",
-    marginBottom:20
-  },
-  badge: {
-    backgroundColor: "#BB5C3F",
-    color: "#FFF",
-    borderRadius: 100,
-    paddingVertical: 4,
-    paddingHorizontal: 6,
-    fontSize: 10,
-    fontWeight: "400",
-    verticalAlign: "middle",
-    marginStart: 5
-  },
-  titleContainer: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  title: {
-    fontWeight: 'bold',
-  },
-  icon: {
-    padding: 10,
-    position: "absolute",
-    right: 10,
-    color: "#D9D9D9"
-  }
-});
-
-export default Notification;

app/(pages)/_layout.tsx → app/(tabs)/_layout.tsx

@@ -36,7 +36,7 @@ export default function ScreenLayout() {
       }}
       >
       <Tabs.Screen
-        name="index"
+        name="home"
         options={{
           title: 'Home',
           tabBarIcon: ({ color }) => <Icon name="home" size={25} color={color} />,

app/(tabs)/home/_layout.jsx

@@ -0,0 +1,10 @@
+import { Stack } from 'expo-router';
+
+export default function HomeLayout() {
+  return (
+    <Stack>
+        <Stack.Screen name="index" options={{headerShown:false}} />
+        <Stack.Screen name="status" options={{headerShown:false}} />
+    </Stack>
+  );
+}

app/(tabs)/home/index.jsx

@@ -0,0 +1,210 @@
+import React, { 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 } from 'expo-router';
+
+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 renderNotification = () => {
+    return (
+      <Link href={"/home/status"} 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)" }}>
+        <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", 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 (
+      <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>
+    )
+  }
+
+  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>
+          {[1, 2].map(() => renderNotificationAction())}
+          {[1].map(() => renderNotificationResult(true))}
+          {[1].map(() => renderNotificationResult(false))}
+        </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;

app/(tabs)/notify/_layout.jsx

@@ -0,0 +1,9 @@
+import { Stack } from "expo-router";
+
+export default function NotifyLayout() {
+    return(
+        <Stack>
+            <Stack.Screen name="index" options={{headerShown:false}}></Stack.Screen>
+        </Stack>
+    )
+}

app/(tabs)/notify/index.jsx

@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet, TextInput, Text, ScrollView, FlatList, Pressable } from 'react-native';
+import BootstrapModal from '@/components/BootstrapModal';
+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";
+
+/** Some Temp Bullshits */
+const dummyUserDataName = [
+  {
+    id: 1,
+    name: "AzmanHadi@PSK",
+    user_img: "https://t4.ftcdn.net/jpg/03/64/21/11/360_F_364211147_1qgLVxv1Tcq0Ohz3FawUfrtONzz8nq3e.jpg"
+  },
+  {
+    id: 2,
+    name: "NorMelati@PSK",
+    user_img: "https://www.shutterstock.com/image-photo/head-shot-portrait-millennial-beautiful-260nw-1893951241.jpg"
+  },
+  {
+    id: 3,
+    name: "RazuanKhan@PSK",
+    user_img: "https://plus.unsplash.com/premium_photo-1689568126014-06fea9d5d341?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
+  }
+]
+
+const Notification = () => {
+  const { colors, fonts } = useTheme();
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [inputContent, setInputContent] = useState("");
+  const [pickedUser, setPickedUser] = useState(null);
+  const [userNameSearch, setUserNameSearch] = useState('');
+  const [visible, setVisible] = useState(false);
+  const [nameSuggestion, setNameSuggestion] = useState([])
+
+
+  const preTextClick = (pretext) => {
+    setInputContent(pretext)
+  }
+
+  const handleOnSearchUser = (e) => {
+
+    const value = e.target.value;
+    setUserNameSearch(value)
+
+  }
+
+  useEffect(() => {
+
+    if (userNameSearch.length > 0) {
+
+      let filteredData = dummyUserDataName.filter(
+        ({ name }) => name.toLowerCase().includes(userNameSearch?.toLowerCase())
+      )
+      setNameSuggestion(filteredData);
+    } else {
+      setNameSuggestion([]);
+    }
+
+  }, [userNameSearch])
+
+  const renderUser = ({ item }) => (
+    <Pressable onPress={() => { 
+      setPickedUser(item);
+      setNameSuggestion([]);
+      setUserNameSearch("");
+     }}>
+      <View style={styles.nameItem} >
+        <Avatar.Image size={25} source={item.user_img}></Avatar.Image>
+        <Text style={styles.nameText}>{item.name}</Text>
+      </View>
+    </Pressable>
+  );
+
+  const renderUserBadge = (pickedUser) => {
+    return (
+      <View style={{ flexDirection: "row", backgroundColor: "#396868", padding: 5, borderRadius: 20, paddingRight: 10 }}>
+        <Avatar.Image size={35} source={pickedUser?.user_img}></Avatar.Image>
+        <Text style={{ marginTop: "auto", marginBottom: "auto", marginLeft: 10, fontWeight: "500", color: "#FFF", marginRight: 5 }}>{pickedUser?.name}</Text>
+        <Pressable onPress={()=>{setPickedUser(null)}}>
+          <Icon name="cancel" size={25} color={"#FFF"} style={{ marginTop: "auto", marginBottom: "auto" }} />
+        </Pressable>
+      </View>
+    )
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+
+      <BootstrapModal visible={visible} setVisible={setVisible} />
+
+      <Appbar.Header>
+
+        <Avatar.Image size={50} source={dpuser}></Avatar.Image>
+
+        <View style={styles.titleContainer}>
+          <Appbar.Content title="Send Notification" 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={{ flex: 1, marginTop: 20 }}>
+        <View style={{ flexDirection: "row", gap: 20, marginBottom: 20 }}>
+          <Text style={[fonts.titleMedium, { fontWeight: "bold", marginTop: "auto", marginBottom: "auto" }]}>To :</Text>
+
+          {pickedUser ? renderUserBadge(pickedUser) : <View style={{ flex: 1 }}>
+            <TextInput
+              value={userNameSearch}
+              onChange={(e) => {
+                handleOnSearchUser(e)
+              }}
+              style={styles.userSearchInput}
+            />
+            {(nameSuggestion.length > 0) && <View style={styles.nameListContainer}>
+              <FlatList
+                data={nameSuggestion}
+                renderItem={renderUser}
+                keyExtractor={(item) => `${item?.id}`}
+                contentContainerStyle={styles.listContent}
+              />
+            </View>}
+          </View>}
+        </View>
+        <TextInput
+          style={styles.textArea}
+          value={inputContent}
+          onChangeText={setInputContent}
+          multiline={true} // Enables multi-line input
+          numberOfLines={8} // Sets an initial number of visible lines
+        />
+        <Text style={[fonts.titleLarge, { fontWeight: "bold", marginBottom: 20 }]}>Select Pretext</Text>
+        <View style={{ flex: 1 }}>
+          {[
+            "Request to Work From Home",
+            "Request for late Check In",
+            "Request for early Check Out",
+            "Notify for Annual Leave",
+            "Notify for Emergency Leave"
+          ].map(text => <Text onPress={() => { preTextClick(text) }} style={[fonts.titleMedium, { marginBottom: 20, fontWeight: "bold", color: colors.secondary }]} >{text}</Text>)}
+        </View>
+      </View>
+
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    width: '100%',
+  },
+  textArea: {
+    height: 220,
+    borderColor: "#ccc",
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 8,
+    textAlignVertical: "top", // Makes text start from the top-left
+    backgroundColor: "#fff",
+    marginBottom: 20
+  },
+  badge: {
+    backgroundColor: "#BB5C3F",
+    color: "#FFF",
+    borderRadius: 100,
+    paddingVertical: 4,
+    paddingHorizontal: 6,
+    fontSize: 10,
+    fontWeight: "400",
+    verticalAlign: "middle",
+    marginStart: 5
+  },
+  userSearchInput: {
+    flex: 1,
+    paddingHorizontal: 20,
+    borderBottomColor: "rgba(0,0,0,0.2)",
+    borderBottomWidth: 1,
+    marginEnd: 20
+  },
+  nameListContainer: {
+    position: "absolute",
+    top: 25,
+    left: 0,
+    backgroundColor: "#FFF",
+    width: "100%",
+    paddingHorizontal: 10,
+    borderWidth: 2,
+    borderColor: "#CFCFCF"
+  },
+  listContent: {
+    paddingBottom: 10,
+  },
+  nameItem: {
+    paddingVertical: 6,
+    flex: 1,
+    flexDirection: "row"
+  },
+  nameText: {
+    marginLeft: 10,
+    fontSize: 16,
+    color: '#555',
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  title: {
+    fontWeight: 'bold',
+  },
+  icon: {
+    padding: 10,
+    position: "absolute",
+    right: 10,
+    color: "#D9D9D9"
+  }
+});
+
+export default Notification;

app/(tabs)/profile/_layout.jsx

@@ -0,0 +1,9 @@
+import { Stack } from "expo-router";
+
+export default function ProfileLayout() {
+    return(
+        <Stack>
+            <Stack.Screen name="index" options={{headerShown:false}}></Stack.Screen>
+        </Stack>
+    )
+}

app/_layout.tsx

@@ -27,7 +27,8 @@ export default function RootLayout() {
 
   return (
     <Stack>
-      <Stack.Screen name="(pages)" options={{ headerShown: false }} />
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       <Stack.Screen name="+not-found" />
     </Stack>
   );

app/bak__layout.tsx

@@ -1,38 +0,0 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { StatusBar } from 'expo-status-bar';
-import { useEffect } from 'react';
-import 'react-native-reanimated';
-
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-// Prevent the splash screen from auto-hiding before asset loading is complete.
-SplashScreen.preventAutoHideAsync();
-
-export default function RootLayout() {
-  const colorScheme = useColorScheme();
-  const [loaded] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
-  });
-
-  useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
-
-  if (!loaded) {
-    return null;
-  }
-
-  return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(screen)" options={{ headerShown: false }} />
-        <Stack.Screen name="+not-found" />
-      </Stack>
-    </ThemeProvider>
-  );
-}

app/screens/Welcome.jsx → app/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Text, StyleSheet, Image } from 'react-native';
+import { View, Text, StyleSheet, Image, Pressable } from 'react-native';
+import { Link } from 'expo-router';
 import { Button, useTheme } from 'react-native-paper';
 import text4uLogo from '@/assets/images/text4ulogo.png'
 import text4uTitle from '@/assets/images/text4utitle.png'
@@ -26,13 +27,11 @@ const Welcome = () => {
                 <Text style={[fonts.titleSmall, styles.subHeading]}>
                     Empowering you with instant alerts for every important moment!
                 </Text>
-                <Button
-                    mode="contained"
-                    style={[button, styles.button]}
-                    labelStyle={{ ...fonts.titleMedium, ...styles.buttonLabel }}
-                >
-                    Get Started
-                </Button>
+                <Pressable style={[button, styles.button]}>
+                    <Link href={"/home"}>
+                        <Text style={styles.buttonLabel}>Get Started</Text>
+                    </Link>
+                </Pressable>
                 <Text style={{ ...fonts.titleMedium, ...styles.loginInfo }}>
                     Already have an account?
                     <Text style={styles.loginText} onPress={goToLogin}>
@@ -79,10 +78,17 @@ const styles = StyleSheet.create({
     button: {
         marginBottom: 36,
         marginLeft:"auto",
-        marginRight:"auto"
+        marginRight:"auto",
+        backgroundColor:"#DD9C47",
+        paddingVertical:12,
+        paddingHorizontal:25,
+        borderRadius:30
     },
     buttonLabel: {
-        fontWeight: "bold"
+        fontWeight: "700",
+        color: "#FFF",
+        fontSize: 16,
+
     },
     loginInfo: {
         marginBottom: 20,

app/screens/Notification.jsx

@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import { View, StyleSheet, TextInput, Text, ScrollView } 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";
-
-const Notification = () => {
-  const { colors, fonts } = useTheme();
-  const [menuVisible, setMenuVisible] = useState(false);
-  const [inputContent, setInputContent] = useState("");
-
-
-  const preTextClick = (pretext) => {
-    setInputContent(pretext)
-  }
-
-  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="Send Notification" 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={{ flex: 1, marginTop: 20 }}>
-        <View style={{ flexDirection: "row", gap: 20, marginBottom: 20 }}>
-          <Text style={[fonts.titleLarge, { fontWeight: "bold" }]}>To :</Text>
-          <TextInput value='asd' style={{ flex: 1, paddingHorizontal: 20, borderBottomColor: "rgba(0,0,0,0.2)", borderBottomWidth: 1, marginEnd: 20 }}></TextInput>
-        </View>
-        <TextInput
-          style={styles.textArea}
-          value={inputContent}
-          onChangeText={setInputContent}
-          multiline={true} // Enables multi-line input
-          numberOfLines={8} // Sets an initial number of visible lines
-        />
-        <Text style={[fonts.titleLarge, { fontWeight: "bold", marginBottom:20 }]}>Select Pretext</Text>
-        <View style={{flex:1}}>
-          {[
-            "Request to Work From Home",
-            "Request for late Check In",
-            "Request for early Check Out",
-            "Notify for Annual Leave",
-            "Notify for Emergency Leave"
-          ].map(text => <Text onPress={()=>{preTextClick(text)}} style={[fonts.titleMedium, {marginBottom:20, fontWeight:"bold", color:colors.secondary}]} >{text}</Text> )}
-        </View>
-      </View>
-
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    width: '100%',
-  },
-  textArea: {
-    height: 220,
-    borderColor: "#ccc",
-    borderWidth: 1,
-    padding: 10,
-    borderRadius: 8,
-    textAlignVertical: "top", // Makes text start from the top-left
-    backgroundColor: "#fff",
-    marginBottom:20
-  },
-  badge: {
-    backgroundColor: "#BB5C3F",
-    color: "#FFF",
-    borderRadius: 100,
-    paddingVertical: 4,
-    paddingHorizontal: 6,
-    fontSize: 10,
-    fontWeight: "400",
-    verticalAlign: "middle",
-    marginStart: 5
-  },
-  titleContainer: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  title: {
-    fontWeight: 'bold',
-  },
-  icon: {
-    padding: 10,
-    position: "absolute",
-    right: 10,
-    color: "#D9D9D9"
-  }
-});
-
-export default Notification;

app/screens/Request.jsx

@@ -1,168 +0,0 @@
-import React, { useState } from 'react';
-import { View, StyleSheet, TextInput, Text, ScrollView } 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";
-
-const Request = () => {
-  const { colors, fonts } = useTheme();
-  const [menuVisible, setMenuVisible] = useState(false);
-  const [searchInput, setSearchInput] = useState("")
-
-  const renderNotificationAction = () => {
-    return (
-      <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", 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 (
-      <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>
-    )
-  }
-
-  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="Request" 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" }]}>General  </Text>
-        <Text style={[styles.tabButton, fonts.titleMedium, { fontWeight: "bold" }, { borderBottomWidth: 2, borderBottomColor: colors.secondary, color: colors.secondary }]}>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>
-          {[1,2].map(() => renderNotificationAction())}
-          {[1].map(() => renderNotificationResult(true))}
-          {[1].map(() => renderNotificationResult(false))}
-        </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 Request;

components/BootstrapModal.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  TouchableWithoutFeedback
+} from 'react-native';
+
+const BootstrapModal = ({ visible, setVisible }) => {
+
+  return (
+    <Modal
+      transparent
+      animationType="fade"
+      visible={visible}
+      onRequestClose={() => setVisible(false)}
+    >
+      <TouchableWithoutFeedback onPress={() => setVisible(false)}>
+        <View style={styles.backdrop} />
+      </TouchableWithoutFeedback>
+
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.modalText}>This is a Bootstrap-like Modal!</Text>
+          <Pressable
+            style={[styles.button, styles.buttonClose]}
+            onPress={() => setVisible(false)}
+          >
+            <Text style={styles.textStyle}>Close</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  modalView: {
+    width: '80%',
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 20,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  openButton: {
+    backgroundColor: '#007bff',
+    borderRadius: 6,
+    padding: 10,
+    elevation: 2,
+  },
+  button: {
+    marginTop: 15,
+    padding: 10,
+    borderRadius: 6,
+  },
+  buttonClose: {
+    backgroundColor: '#dc3545',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  modalText: {
+    fontSize: 18,
+    textAlign: 'center',
+  },
+});
+
+export default BootstrapModal;