Merge pull request #37 from Naveen-g09/extraUI

So many new features

app.json

@@ -19,7 +19,7 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "foregroundImage": "./assets/images/icon.png",
         "backgroundColor": "#ffffff"
       },
       "package": "com.cheetahworks.residentron"
@@ -29,7 +29,18 @@
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router"],
+    "plugins": [
+      "expo-router",
+      [
+        "react-native-vision-camera",
+        {
+          "enableCodeScanner": true,
+          "cameraPermissionText": "Residentron needs access to your Camera.",
+          "enableMicrophonePermission": true,
+          "microphonePermissionText": "Residentron needs access to your Microphone."
+        }
+      ]
+    ],
     "experiments": {
       "typedRoutes": false
     },

app/(auth)/login.tsx

@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "powderblue",
+    // backgroundColor: "powderblue",
     paddingHorizontal: 20,
   },
   verticallySpaced: {

app/(tabs)/[id].tsx

@@ -9,6 +9,10 @@ const NewPage = () => {
     <View style={styles.container}>
       <Stack.Screen options={{ headerShown: false }} />
       <Text style={styles.text}>{id} Page</Text>
+      <Text style={styles.text}>Hey!, There</Text>
+      <Text style={styles.text}>
+        Hang on, This feature is in development Process
+      </Text>
     </View>
   );
 };

app/(tabs)/_layout.tsx

@@ -1,7 +1,7 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { Link, Tabs } from "expo-router";
 import React from "react";
-import { Pressable, useColorScheme } from "react-native";
+import { Pressable } from "react-native";
 
 /**
  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
@@ -16,7 +16,6 @@ function TabBarIcon(props: {
 //TODO: add a missing page to handle 404 errors
 
 export default function RootLayout() {
-  const colorScheme = useColorScheme();
   return (
     <Tabs>
       <Tabs.Screen
@@ -26,7 +25,7 @@ export default function RootLayout() {
           tabBarIcon: (props) => <TabBarIcon {...props} name="home" />,
           headerTitleAlign: "center",
           headerStyle: {
-            backgroundColor: "powderblue",
+            backgroundColor: "54BCBD",
           },
 
           headerRight: () => (

app/(tabs)/account.tsx

@@ -1,29 +1,41 @@
 import { BottomSheetModal, useBottomSheetModal } from "@gorhom/bottom-sheet";
+import { Link } from "expo-router";
 import React, { useEffect, useState, useRef } from "react";
 import {
   Text,
   TouchableOpacity,
   StyleSheet,
   Alert,
   ScrollView,
-  Button,
 } from "react-native";
 
 import AccountSheet from "../../components/bottomSheet";
 
 import { supabase } from "@/app/lib/supabase-client";
+import Admin from "@/components/adminBottomSheet";
+import CalenderSheet from "@/components/calenderBS";
+import Transaction from "@/components/transactionBottomSheet";
+import Utility from "@/components/utility";
 
-//TODO: add a notification icon
-//TODO: add a profile icon
 //TODO: details grids of profile picture, name, email, phone number, address, and edit button
 //TODO: details of flat no, family members, parking, your posts, your events, your polls, your announcements, your notices, your chats, your complaints, your suggestions, your feedbacks, your maintenance, your bills, your payments, your receipts, your orders,
 //TODO: current and past utilities, current and past maintenance, current and past bills, current and past orders, current and past payments, current and past receipts, current and past complaints, current and past suggestions, current and past feedbacks, current and past polls, current and past announcements, current and past notices, current and past chats, current and past events, current and past posts, current and past family members, current and past parking, current and past flat no, current and past name, current and past email, current and past phone number, current and past address, current and past profile picture, current and past edit button
 //TODO: add a logout button
 
 const Account = () => {
   const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const calenderBottomSheetRef = useRef<BottomSheetModal>(null);
+  const transactionBottomSheetRef = useRef<BottomSheetModal>(null);
+  const adminBottomSheetRef = useRef<BottomSheetModal>(null);
+  const utilityBottomSheetRef = useRef<BottomSheetModal>(null);
+
   const { dismiss } = useBottomSheetModal();
   const handleOpenPress = () => bottomSheetRef.current?.present();
+  const handleCalenderPress = () => calenderBottomSheetRef.current?.present();
+  const handleTransactionPress = () =>
+    transactionBottomSheetRef.current?.present();
+  const handleAdminPress = () => adminBottomSheetRef.current?.present();
+  const handleUtilityPress = () => utilityBottomSheetRef.current?.present();
 
   const [user, setUser] = useState(null);
   useEffect(() => {
@@ -47,31 +59,33 @@ const Account = () => {
 
   return (
     <ScrollView contentContainerStyle={styles.container}>
-      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+      <TouchableOpacity style={styles.button} onPress={handleAdminPress}>
         <Text style={styles.buttonText}>Personal Details</Text>
       </TouchableOpacity>
-      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+      <TouchableOpacity style={styles.button} onPress={handleTransactionPress}>
         <Text style={styles.buttonText}>Transactions</Text>
       </TouchableOpacity>
 
-      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+      <TouchableOpacity style={styles.button} onPress={handleUtilityPress}>
         <Text style={styles.buttonText}>Utility</Text>
       </TouchableOpacity>
 
       <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
         <Text style={styles.buttonText}>Request Help</Text>
       </TouchableOpacity>
-
-      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
-        <Text style={styles.buttonText}>Calendar</Text>
-      </TouchableOpacity>
+      <Link href="/admin" asChild>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.buttonText}>Admin</Text>
+        </TouchableOpacity>
+      </Link>
       <TouchableOpacity onPress={doLogout} style={styles.button}>
         <Text style={styles.buttonText}>LOGOUT</Text>
       </TouchableOpacity>
-
-      <Button title="Dismiss" onPress={() => dismiss()} />
-
       <AccountSheet ref={bottomSheetRef} />
+      <CalenderSheet ref={calenderBottomSheetRef} />
+      <Transaction ref={transactionBottomSheetRef} />
+      <Admin ref={adminBottomSheetRef} />
+      <Utility ref={utilityBottomSheetRef} />
     </ScrollView>
   );
 };
@@ -83,15 +97,15 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     paddingVertical: 20,
-    backgroundColor: "powderblue",
+    // backgroundColor: "powderblue",
   },
   button: {
     flexDirection: "row",
     alignItems: "center",
     paddingHorizontal: 20,
     paddingVertical: 10,
     marginVertical: 10,
-    backgroundColor: "white",
+    backgroundColor: "powderblue",
     borderRadius: 5,
     width: "80%",
     height: "10%",

app/(tabs)/category.tsx

@@ -36,15 +36,15 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "powderblue",
+    // backgroundColor: "powderblue",
   },
   button: {
     flexDirection: "row",
     alignItems: "center",
     paddingHorizontal: 20,
     paddingVertical: 10,
     marginVertical: 10,
-    backgroundColor: "white",
+    backgroundColor: "powderblue",
     borderRadius: 5,
     width: "80%",
     height: "10%",

app/(tabs)/community.tsx

@@ -1,59 +1,79 @@
-import React from "react";
-import { View, Text, StatusBar, ScrollView } from "react-native";
-import Feather from "react-native-vector-icons/Feather";
-import FontAwesome from "react-native-vector-icons/FontAwesome";
-import Ionic from "react-native-vector-icons/Ionicons";
+import { BottomSheetModal, useBottomSheetModal } from "@gorhom/bottom-sheet";
+import { Link } from "expo-router";
+import React, { useRef } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 
-import Post from "../Post";
-import Stories from "../Stories";
-
-//TODO: add a notification icon
-//TODO: add a bottomsheet onpress of details tab which shows details of resident
-//TODO: add grids for posts, members, and events, chats, notices, posts, announcements, and polls
+import CalenderSheet from "@/components/calenderBS";
 
 const Community = () => {
-  return (
-    <View style={{ backgroundColor: "white", height: "100%" }}>
-      <StatusBar backgroundColor="white" barStyle="dark-content" animated />
-      <View
-        style={{
-          justifyContent: "space-between",
-          flexDirection: "row",
-          paddingHorizontal: 15,
-          alignItems: "center",
-        }}
-      >
-        <FontAwesome name="plus-square-o" style={{ fontSize: 24 }} />
-        <Text
-          style={{
-            fontFamily: "Lobster-Regular",
-            fontSize: 25,
-            fontWeight: "500",
-          }}
-        >
-          Instagram
-        </Text>
-        <Feather name="navigation" style={{ fontSize: 24 }} />
-      </View>
+  const calenderBottomSheetRef = useRef<BottomSheetModal>(null);
+  const handleCalenderPress = () => calenderBottomSheetRef.current?.present();
 
-      <ScrollView>
-        <Stories />
-        <Post />
-        <View
-          style={{
-            justifyContent: "center",
-            alignItems: "center",
-            padding: 20,
-          }}
-        >
-          <Ionic
-            name="ios-reload-circle-sharp"
-            style={{ fontSize: 60, opacity: 0.2 }}
-          />
-        </View>
-      </ScrollView>
+  const { dismiss } = useBottomSheetModal();
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.button} onPress={handleCalenderPress}>
+        <Text style={styles.buttonText}>Calendar</Text>
+      </TouchableOpacity>
+      <Link href="/Members" asChild>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.buttonText}>Members</Text>
+        </TouchableOpacity>
+      </Link>
+      <Link href="/notice" asChild>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.buttonText}>Notices</Text>
+        </TouchableOpacity>
+      </Link>
+      <Link href="/connect" asChild>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.buttonText}>Posts</Text>
+        </TouchableOpacity>
+      </Link>
+      <Link href="/Announcement" asChild>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.buttonText}>Announcement</Text>
+        </TouchableOpacity>
+      </Link>
+      <CalenderSheet ref={calenderBottomSheetRef} />
     </View>
   );
 };
 
 export default Community;
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    // backgroundColor: "powderblue",
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    marginVertical: 10,
+    backgroundColor: "powderblue",
+    borderRadius: 5,
+    width: "80%",
+    height: "10%",
+    shadowColor: "#000", // Shadow color
+    shadowOffset: {
+      width: 0,
+      height: 2, // Shadow offset
+    },
+    shadowOpacity: 0.25, // Shadow opacity
+    shadowRadius: 3.84, // Shadow radius
+    elevation: 5,
+  },
+  image: {
+    marginRight: 10,
+  },
+  buttonText: {
+    color: "#000",
+    fontSize: 18,
+    marginLeft: 10,
+    fontWeight: "bold",
+  },
+});

app/(tabs)/index.tsx

@@ -11,29 +11,41 @@ import { Text, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
 const index = () => {
   return (
     <ScrollView contentContainerStyle={styles.container}>
-      <Link href="/(tabs)/visitors" asChild>
+      <Link href="/visitor" asChild>
         <TouchableOpacity style={styles.button}>
           <Text style={styles.buttonText}>Visitors Update</Text>
         </TouchableOpacity>
       </Link>
 
-      <Link href="/(tabs)/Events" asChild>
+      <Link href="/event" asChild>
         <TouchableOpacity style={styles.button}>
           <Text style={styles.buttonText}>Events</Text>
         </TouchableOpacity>
       </Link>
 
-      <Link href="/(tabs)/News" asChild>
+      {/* <Link href="/news" asChild>
         <TouchableOpacity style={styles.button}>
           <Text style={styles.buttonText}>News</Text>
         </TouchableOpacity>
-      </Link>
+      </Link> */}
 
-      <Link href="/(tabs)/Payments" asChild>
+      <Link href="/payment" asChild>
         <TouchableOpacity style={styles.button}>
           <Text style={styles.buttonText}>Payment Dues</Text>
         </TouchableOpacity>
       </Link>
+      {/* <Text>Gate Updates</Text> */}
+      <Link href="/news" asChild>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.buttonText}>News</Text>
+        </TouchableOpacity>
+      </Link>
+
+      <Link href="/visitor" asChild>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.buttonText}>Visitors</Text>
+        </TouchableOpacity>
+      </Link>
     </ScrollView>
   );
 };
@@ -44,15 +56,14 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "powderblue",
   },
   button: {
     flexDirection: "row",
     alignItems: "center",
     paddingHorizontal: 20,
     paddingVertical: 10,
     marginVertical: 10,
-    backgroundColor: "white",
+    backgroundColor: "powderblue",
     borderRadius: 5,
     width: "80%",
     height: "10%",