new pages and new notification logic

app/(tabs)/index.jsx

@@ -2,8 +2,11 @@
 import React, { useState } from 'react';
 import { PaperProvider } from 'react-native-paper';
 import { lightTheme, darkTheme } from '../../theme';
-import WelcomeScreen from '../screens/WelcomeScreen';
-import HomeScreen from '../screens/HomeScreen';
+import Welcome from '../screens/Welcome';
+import Home from '../screens/Home';
+import Request from '../screens/Request';
+import Status from '../screens/Status';
+import Notification from '../screens/Notification';
 import { Button, Switch } from 'react-native-paper';
 import { View } from 'react-native';
 
@@ -13,7 +16,7 @@ const App = () => {
   return (
     <PaperProvider theme={lightTheme}>
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        <HomeScreen />
+        <Notification />
       </View>
     </PaperProvider>
   );

app/screens/HomeScreen.jsx → app/screens/Home.jsx

@@ -1,14 +1,30 @@
 import React, { useState } from 'react';
-import { View, StyleSheet, TextInput, Text } from 'react-native';
+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 HomeScreen = () => {
+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>
@@ -51,6 +67,20 @@ const HomeScreen = () => {
         <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>
   );
 };
@@ -69,8 +99,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 6,
     fontSize: 10,
     fontWeight: "400",
-    verticalAlign:"middle",
-    marginStart:5
+    verticalAlign: "middle",
+    marginStart: 5
   },
   tabContainer: {
     flexDirection: "row",
@@ -95,7 +125,8 @@ const styles = StyleSheet.create({
   searchSection: {
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    marginBottom: 20
   },
   icon: {
     padding: 10,
@@ -114,4 +145,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default HomeScreen;
+export default Home;

app/screens/Notification.jsx

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

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

app/screens/Status.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, TextInput, Text, ScrollView, Image } from 'react-native';
+import { Appbar, Menu, Avatar, IconButton, useTheme } from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import burgerImage from "@/assets/images/burger.png";
+import dpuser from "@/assets/images/userdp.png";
+
+const Status = () => {
+  const { colors, fonts } = useTheme();
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [searchInput, setSearchInput] = useState("")
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <Appbar.Header>
+
+        <IconButton
+          icon="chevron-left" // Or use "arrow-left"
+          iconColor={colors.secondary}
+          size={24}
+          onPress={() => navigation.goBack()} // Navigates back
+        />
+
+        <View style={styles.titleContainer}>
+          <Appbar.Content title="Status" titleStyle={[fonts.titleLarge, styles.title]} />
+        </View>
+
+        <Icon
+          name="search"  //used as offset
+          size={40}
+          color="#FFF"
+        />
+
+      </Appbar.Header>
+
+      <View style={{ flex: 1 }}>
+        <View style={{ alignItems: "center", marginBottom: 20 }}>
+          <Text style={[fonts.titleLarge, { color: colors.secondary, fontWeight: "bold" }]}>Abang Bob Burger</Text>
+          <Text style={[fonts.titleMedium, { color: colors.secondary, fontWeight: "bold" }]}>No ID : BobBurgerBangi</Text>
+        </View>
+        <Image source={burgerImage} style={styles.itemImage}></Image>
+
+        <Text style={[fonts.titleLarge, { fontWeight: "bold", marginBottom: 20 }]}>Notification</Text>
+
+        <View style={{ flex: 1, flexDirection: "row", gap: 10 }}>
+          <Avatar.Image size={60} source={burgerImage} style={{ backgroundColor: "rgba(0,0,0,0.2)" }}></Avatar.Image>
+          <View style={{width:"80%"}}>
+            <View style={{ backgroundColor: "white", borderWidth: 1, borderColor: colors.secondary, borderRadius: 20, padding: 20, marginBottom:5 }}>
+              <Text style={[fonts.titleMedium, { fontWeight: "bold", marginBottom: 20 }]}>
+                Order Ready for Pick Up
+              </Text>
+              <Text style={[fonts.titleSmall, { fontWeight: "bold" }]}>
+                Your order for Burger Ayam Special is now ready for pick up. Please pick up in 15 minutes as we are preparing for closing soon.
+              </Text>
+            </View>
+            <Text style={[fonts.titleSmall, { fontWeight: "bold", marginLeft:"auto", color:"rgba(0,0,0,0.4)" }]}>
+              11/2/2024 10:52PM
+            </Text>
+          </View>
+
+        </View>
+
+      </View>
+
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  itemImage: {
+    marginLeft: "auto",
+    marginRight: "auto",
+    marginBottom: 20
+  },
+  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
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  title: {
+    fontWeight: 'bold',
+  }
+});
+
+export default Status;

app/screens/WelcomeScreen.jsx → app/screens/Welcome.jsx

@@ -4,7 +4,7 @@ import { Button, useTheme } from 'react-native-paper';
 import text4uLogo from '@/assets/images/text4ulogo.png'
 import text4uTitle from '@/assets/images/text4utitle.png'
 
-const WelcomeScreen = () => {
+const Welcome = () => {
     const { colors, button, fonts } = useTheme();
 
     const goToLogin = () => {
@@ -96,4 +96,4 @@ const styles = StyleSheet.create({
     }
 });
 
-export default WelcomeScreen;
+export default Welcome;