new nav structure

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

@@ -1,14 +1,14 @@
 import { Tabs } from 'expo-router';
 import React from 'react';
 import { Platform } from 'react-native';
-
+import Icon from 'react-native-vector-icons/MaterialIcons';
 import { HapticTab } from '@/components/HapticTab';
 import { IconSymbol } from '@/components/ui/IconSymbol';
 import TabBarBackground from '@/components/ui/TabBarBackground';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
-export default function TabLayout() {
+export default function ScreenLayout() {
   const colorScheme = useColorScheme();
 
   return (
@@ -18,28 +18,46 @@ export default function TabLayout() {
         headerShown: false,
         tabBarButton: HapticTab,
         tabBarBackground: TabBarBackground,
+        tabBarIconStyle: {
+          marginTop: 10,
+        },
         tabBarStyle: Platform.select({
           ios: {
-            // Use a transparent background on iOS to show the blur effect
             position: 'absolute',
+            height: 70,
+          },
+          default: {
+            backgroundColor: '#396868',
+            height: 70,
+            borderTopWidth: 0,
+            paddingVertical: 10
           },
-          default: {},
         }),
-      }}>
+      }}
+      >
       <Tabs.Screen
         name="index"
         options={{
           title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          tabBarIcon: ({ color }) => <Icon name="home" size={25} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="notify"
+        options={{
+          title: 'Notify',
+          tabBarIcon: ({ color }) => <Icon name="edit-document" size={25} color={color} />,
         }}
       />
+
       <Tabs.Screen
-        name="explore"
+        name="profile"
         options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          title: 'Profile',
+          tabBarIcon: ({ color }) => <Icon name="person" size={25} color={color} />,
         }}
       />
+
     </Tabs>
   );
 }

app/(pages)/notify.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/(pages)/profile.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/(tabs)/explore.tsx

@@ -1,109 +0,0 @@
-import { StyleSheet, Image, Platform } from 'react-native';
-
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-
-export default function TabTwoScreen() {
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
-      headerImage={
-        <IconSymbol
-          size={310}
-          color="#808080"
-          name="chevron.left.forwardslash.chevron.right"
-          style={styles.headerImage}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Explore</ThemedText>
-      </ThemedView>
-      <ThemedText>This app includes example code to help you get started.</ThemedText>
-      <Collapsible title="File-based routing">
-        <ThemedText>
-          This app has two screens:{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-        </ThemedText>
-        <ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
-          sets up the tab navigator.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/router/introduction">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Android, iOS, and web support">
-        <ThemedText>
-          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
-          <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-        </ThemedText>
-      </Collapsible>
-      <Collapsible title="Images">
-        <ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
-          different screen densities
-        </ThemedText>
-        <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
-        <ExternalLink href="https://reactnative.dev/docs/images">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Custom fonts">
-        <ThemedText>
-          Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
-          <ThemedText style={{ fontFamily: 'SpaceMono' }}>
-            custom fonts such as this one.
-          </ThemedText>
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Light and dark mode components">
-        <ThemedText>
-          This template has light and dark mode support. The{' '}
-          <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
-          what the user's current color scheme is, and so you can adjust UI colors accordingly.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Animations">
-        <ThemedText>
-          This template includes an example of an animated component. The{' '}
-          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
-          library to create a waving hand animation.
-        </ThemedText>
-        {Platform.select({
-          ios: (
-            <ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
-              component provides a parallax effect for the header image.
-            </ThemedText>
-          ),
-        })}
-      </Collapsible>
-    </ParallaxScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  headerImage: {
-    color: '#808080',
-    bottom: -90,
-    left: -35,
-    position: 'absolute',
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-});

app/(tabs)/index.jsx

@@ -1,25 +0,0 @@
-// App.js
-import React, { useState } from 'react';
-import { PaperProvider } from 'react-native-paper';
-import { lightTheme, darkTheme } from '../../theme';
-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';
-
-const App = () => {
-  const [isDarkMode, setIsDarkMode] = useState(false);
-
-  return (
-    <PaperProvider theme={lightTheme}>
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        <Notification />
-      </View>
-    </PaperProvider>
-  );
-};
-
-export default App;

app/_layout.tsx

@@ -1,8 +1,6 @@
-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';
 
@@ -12,7 +10,7 @@ import { useColorScheme } from '@/hooks/useColorScheme';
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
-  const colorScheme = useColorScheme();
+
   const [loaded] = useFonts({
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
   });
@@ -28,12 +26,9 @@ export default function RootLayout() {
   }
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="+not-found" />
-      </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
+    <Stack>
+      <Stack.Screen name="(pages)" options={{ headerShown: false }} />
+      <Stack.Screen name="+not-found" />
+    </Stack>
   );
 }

app/bak__layout.tsx

@@ -0,0 +1,38 @@
+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>
+  );
+}

components/Navbar.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { View, StyleSheet, Pressable, Text } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { usePathname } from 'expo-router';
+import { Link } from 'expo-router';
+
+const navItems = [
+    {
+        href: '/',
+        icon: 'home',
+        label: 'Home',
+        onPress: () => console.log("home"),
+    },
+    {
+        href: '/notify',
+        icon: 'edit-document',
+        label: 'Notify',
+        onPress: () => console.log("notify"),
+    },
+    {
+        href: '/explore',
+        icon: 'person',
+        label: 'Profile',
+        onPress: () => console.log("profile"),
+    },
+];
+
+const NavItem = ({ href, icon, label, onPress, isActive }) => (
+    <Link href={href}>
+        <Pressable onPress={onPress} style={[styles.navItem]}>
+            <Icon name={icon} size={30} style={[styles.icon, {opacity: isActive ? 1 : 0.5}]} />
+            <Text style={[styles.textLink, {opacity: isActive ? 1 : 0.5}]}>{label}</Text>
+        </Pressable>
+    </Link>
+);
+
+export function Navbar() {
+
+    const pathName = usePathname();
+
+    return (
+        <View style={styles.navContainer}>
+            {navItems.map((item, index) => (
+                <NavItem key={index} {...item} isActive={pathName == item.href} />
+            ))}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    navContainer: {
+        backgroundColor: "#396868",
+        paddingVertical: 10,
+        width: "100%",
+        flexDirection: "row",
+        justifyContent: "space-evenly",
+    },
+    navItem: {
+        alignItems: 'center',
+    },
+    icon: {
+        color: "#FFF",
+        active:{
+            color:"#"
+        }
+    },
+    textLink: {
+        color: "#FFF",
+    },
+});

constants/Colors.ts

@@ -3,8 +3,8 @@
  * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
  */
 
-const tintColorLight = '#0a7ea4';
-const tintColorDark = '#fff';
+const tintColorLight = '#FFF';
+const tintColorDark = '#FFF';
 
 export const Colors = {
   light: {

tsconfig.json

@@ -11,6 +11,7 @@
   "include": [
     "**/*.ts",
     "**/*.tsx",
+    "**/*.jsx",
     ".expo/types/**/*.ts",
     "expo-env.d.ts"
   ]