Merge pull request #108 from ThatNinjaGuy/develop

Entitlement driven views enhanced. #87
ThatNinjaGuy · Sep 29, 2024 · b54a8a6 · b54a8a6
2 parents 84ff8ac + 32e8b09
commit b54a8a6
Show file tree

Hide file tree

Showing 13 changed files with 165 additions and 219 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
diff --git a/README.md b/README.md
@@ -1,20 +1,20 @@
-# React Native Restaurant Menu App
+# 🍽️ React Native Restaurant Menu App
 
-This project is a React Native application for managing a restaurant menu. It uses Firebase Firestore for data storage and supports offline capabilities.
+This project is a comprehensive React Native application for managing a restaurant's operations. It leverages Firebase Firestore for robust data storage and supports offline capabilities for seamless usage.
 
-## Table of Contents
+## 📑 Table of Contents
 
-- [Features](#features)
-- [Screenshots](#screenshots)
-- [Installation](#installation)
-- [Firebase Setup](#firebase-setup)
-- [Project Structure](#project-structure)
-- [Usage](#usage)
-- [Building the APK](#building-the-apk)
-- [Contributing](#contributing)
-- [License](#license)
+- [✨ Features](#-features)
+- [📸 Screenshots](#-screenshots)
+- [🚀 Installation](#-installation)
+- [🔥 Firebase Setup](#-firebase-setup)
+- [🏗️ Project Structure](#-project-structure)
+- [📱 Usage](#-usage)
+- [📦 Building the APK](#-building-the-apk)
+- [🤝 Contributing](#-contributing)
+- [📄 License](#-license)
 
-## Features
+## ✨ Features
 
 - **Dashboard Overview**: Provides a summary of the day's revenue, orders, reservations, low inventory, and staff status.
 - **Notifications**: Displays important notifications such as new orders, staff meetings, and low inventory alerts.
@@ -27,29 +27,29 @@ This project is a React Native application for managing a restaurant menu. It us
 - **Batch Operations**: Efficiently add multiple items using batch write operations.
 - **User-Friendly Interface**: Simple and intuitive UI for managing menu items.
 
-## Demo
+## 🎥 Demo
 
 [![Waiter App Demo](https://img.youtube.com/vi/LKAiczIF8vA/0.jpg)](https://www.youtube.com/watch?v=LKAiczIF8vA)
 
-## Screenshots
+## 📸 Screenshots
 
-### Dashboard
+### 📊 Dashboard
 
 ![Dashboard](https://pplx-res.cloudinary.com/image/upload/v1720996665/user_uploads/lzwlavxmz/image.jpg)
 
-### Menu Management
+### 🍽️ Menu Management
 
 ![Menu Management](https://pplx-res.cloudinary.com/image/upload/v1720996696/user_uploads/vmfypybrr/image.jpg)
 
-### Order Management
+### 📋 Order Management
 
 ![Order Management](https://pplx-res.cloudinary.com/image/upload/v1720996738/user_uploads/gdbpxmlvs/image.jpg)
 
-### Inventory Management
+### 📦 Inventory Management
 
 ![Inventory Management](https://pplx-res.cloudinary.com/image/upload/v1720996764/user_uploads/ytaxbbnsv/image.jpg)
 
-## Installation
+## 🚀 Installation
 
 1. **Clone the repository:**
 
@@ -71,7 +71,6 @@ This project is a React Native application for managing a restaurant menu. It us
    ```
 
 4. **Install EAS CLI:**
-
    ```sh
    npm install -g eas-cli
    ```

diff --git a/components/MenuItems/MenuItems.js b/components/MenuItems/MenuItems.js
@@ -18,7 +18,7 @@ import {
   getPreferenceTranslation,
 } from "@/utils/appText/menuScreen";
 
-const MenuItems = ({ items, onEdit, preferredLanguage }) => {
+const MenuItems = ({ items, onEdit, preferredLanguage, isMenuEditVisible }) => {
   const cuisineText = getCuisineTranslation(preferredLanguage);
   const categoryText = getCategoryTranslation(preferredLanguage);
   const priceText = getPriceTranslation(preferredLanguage);
@@ -41,7 +41,7 @@ const MenuItems = ({ items, onEdit, preferredLanguage }) => {
     return (
       <ThemedButton
         style={[styles.card, { width: layoutParams.itemWidth }]}
-        onPress={() => onEdit(item)}
+        onPress={() => (isMenuEditVisible ? onEdit(item) : null)}
       >
         <View style={styles.imageContainer}>
           <Image

diff --git a/components/ProfileHeader/ProfileHeader.js b/components/ProfileHeader/ProfileHeader.js
@@ -12,14 +12,13 @@ import { BlurView } from "expo-blur";
 import Icon from "react-native-vector-icons/MaterialIcons";
 import { DEFAULT_IMAGE } from "@/constants/common";
 
-const ProfileHeader = ({ userProfile, handleEdit, hotel }) => {
+const ProfileHeader = ({ userProfile, handleEdit }) => {
   const { width } = Dimensions.get("window");
   const isLargeScreen = width > 768;
 
   return (
     <LinearGradient
       colors={["#4c669f", "#3b5998", "#192f6a"]}
-      // colors={["#FFB733", "#FFAE19", "#ffa500"]}
       style={{
         height: isLargeScreen ? 200 : 300,
       }}
@@ -31,7 +30,7 @@ const ProfileHeader = ({ userProfile, handleEdit, hotel }) => {
             {
               flexDirection: isLargeScreen ? "row" : "column",
               alignItems: "center",
-              justifyContent: isLargeScreen ? "center" : "flex-start", // Add this line
+              justifyContent: isLargeScreen ? "center" : "flex-start",
             },
           ]}
         >
@@ -58,9 +57,7 @@ const ProfileHeader = ({ userProfile, handleEdit, hotel }) => {
           >
             <Text style={styles.name}>{userProfile.name}</Text>
             {userProfile.position && (
-              <Text style={styles.position}>
-                {userProfile.position} @ {hotel?.name}
-              </Text>
+              <Text style={styles.position}>{userProfile.position}</Text>
             )}
             {userProfile.email && (
               <View style={styles.infoContainer}>
@@ -96,7 +93,7 @@ const ProfileHeader = ({ userProfile, handleEdit, hotel }) => {
               </View>
             )}
           </View>
-          {handleEdit && handleEdit != null && (
+          {handleEdit && (
             <TouchableOpacity style={styles.editButton} onPress={handleEdit}>
               <Icon name="edit" size={isLargeScreen ? 24 : 18} color="#fff" />
             </TouchableOpacity>

diff --git a/firebaseConfig.js b/firebaseConfig.js
diff --git a/screens/InventoryScreen/InventoryScreenContainer.js b/screens/InventoryScreen/InventoryScreenContainer.js
@@ -13,12 +13,14 @@ import { generateUniqueKey } from "@/utils/keyGenerator";
 import LoadingScreen from "@/components/LoadingScreen/LoadingScreen";
 import AuthContext from "@/components/Authentication/AuthProvider";
 import AuthScreen from "@/screens/AuthScreen/AuthScreen";
-import UnauthorizedScreen from "@/components/Authentication/UnauthorizedScreen";
+import { isAdminEmployee } from "@/utils/entitlementManagement";
 
 const InventoryScreenContainer = () => {
+  const { user } = useContext(AuthContext);
   const [isLoading, setIsLoading] = useState(false);
-
   const [inventoryItems, setInventoryItems] = useState([]);
+  const isInventoryItemClickable = isAdminEmployee(user.staffDetails?.role);
+  const isAddItemButtonVisible = isAdminEmployee(user.staffDetails?.role);
 
   useEffect(() => {
     const fetchInventoryItems = async () => {
@@ -92,21 +94,8 @@ const InventoryScreenContainer = () => {
     }
   };
 
-  const { user } = useContext(AuthContext);
   if (!user) return <AuthScreen />;
 
-  if (
-    user.staffDetails &&
-    !(
-      user.staffDetails.role === "Manager" ||
-      user.staffDetails.role === "Owner" ||
-      !user.staffDetails.role ||
-      user.staffDetails.role === ""
-    )
-  ) {
-    return <UnauthorizedScreen />;
-  }
-
   if (isLoading) {
     return <LoadingScreen />;
   }
@@ -117,6 +106,8 @@ const InventoryScreenContainer = () => {
       addInventoryItem={addInventoryItem}
       deleteInventoryItem={deleteInventoryItem}
       updateInventoryItem={updateInventoryItem}
+      isInventoryItemClickable={isInventoryItemClickable}
+      isAddItemButtonVisible={isAddItemButtonVisible}
     />
   );
 };

diff --git a/screens/InventoryScreen/InventoryScreenView.js b/screens/InventoryScreen/InventoryScreenView.js
@@ -54,6 +54,8 @@ const InventoryScreenView = ({
   addInventoryItem,
   deleteInventoryItem,
   updateInventoryItem,
+  isInventoryItemClickable,
+  isAddItemButtonVisible,
 }) => {
   const [modalVisible, setModalVisible] = useState(false);
   const [currentItem, setCurrentItem] = useState(null);
@@ -95,20 +97,24 @@ const InventoryScreenView = ({
 
   return (
     <ThemedView style={styles.container}>
-      <ThemedButton
-        onPress={handleAddItem}
-        type="primary"
-        style={[{ borderRadius: 0, marginBottom: 5 }]}
-      >
-        <ThemedText>Add Item</ThemedText>
-      </ThemedButton>
+      {isAddItemButtonVisible && (
+        <ThemedButton
+          onPress={handleAddItem}
+          type="primary"
+          style={[{ borderRadius: 0, marginBottom: 5 }]}
+        >
+          <ThemedText>Add Item</ThemedText>
+        </ThemedButton>
+      )}
       <FlatList
         data={filteredItems}
         renderItem={({ item }) => (
           <InventoryItem
             key={item.id}
             item={item}
-            onEdit={() => handleEditItem(item)}
+            onEdit={
+              isInventoryItemClickable ? () => handleEditItem(item) : null
+            }
           />
         )}
       />

diff --git a/screens/MenuScreen/MenuScreenContainer.js b/screens/MenuScreen/MenuScreenContainer.js
@@ -3,7 +3,6 @@ import MenuScreenView from "./MenuScreenView";
 import LoadingScreen from "@/components/LoadingScreen/LoadingScreen";
 import AuthScreen from "@/screens/AuthScreen/AuthScreen";
 import AuthContext from "@/components/Authentication/AuthProvider";
-import UnauthorizedScreen from "@/components/Authentication/UnauthorizedScreen";
 import {
   fetchMenuItems,
   addMenuItems,
@@ -16,13 +15,16 @@ import {
   updateMenuItemCategory,
   deleteMenuItemCategory,
 } from "@/firebase/queries/menuItemCategories";
-
+import { isAdminEmployee } from "@/utils/entitlementManagement";
 const MenuScreenContainer = () => {
   const { user } = useContext(AuthContext);
   const preferredLanguage = user?.preferredLanguage;
   const [isLoading, setIsLoading] = useState(false);
   const [menuItems, setMenuItems] = useState([]);
   const [menuItemCategories, setMenuItemCategories] = useState([]);
+  const isMenuAddVisible = isAdminEmployee(user?.staffDetails?.role);
+  const isMenuCategoryAddVisible = isAdminEmployee(user?.staffDetails?.role);
+  const isMenuEditVisible = isAdminEmployee(user?.staffDetails?.role);
 
   useEffect(() => {
     setIsLoading(true);
@@ -36,18 +38,6 @@ const MenuScreenContainer = () => {
 
   if (!user) return <AuthScreen />;
 
-  if (
-    user.staffDetails &&
-    !(
-      user.staffDetails.role === "Manager" ||
-      user.staffDetails.role === "Owner" ||
-      !user.staffDetails.role ||
-      user.staffDetails.role === ""
-    )
-  ) {
-    return <UnauthorizedScreen />;
-  }
-
   if (isLoading) {
     return <LoadingScreen />;
   }
@@ -66,6 +56,9 @@ const MenuScreenContainer = () => {
       handleAddMenuItemCategory={addMenuItemCategory}
       handleUpdateMenuItemCategory={updateMenuItemCategory}
       handleDeleteMenuItemCategory={deleteMenuItemCategory}
+      isMenuAddVisible={isMenuAddVisible}
+      isMenuCategoryAddVisible={isMenuCategoryAddVisible}
+      isMenuEditVisible={isMenuEditVisible}
     />
   );
 };

diff --git a/screens/MenuScreen/MenuScreenView.js b/screens/MenuScreen/MenuScreenView.js
@@ -26,6 +26,9 @@ const MenuScreenView = ({
   handleAddMenuItemCategory,
   handleUpdateMenuItemCategory,
   handleDeleteMenuItemCategory,
+  isMenuAddVisible,
+  isMenuCategoryAddVisible,
+  isMenuEditVisible,
 }) => {
   const updateMenuCategoryText =
     getUpdateMenuCategoryTranslation(preferredLanguage);
@@ -88,25 +91,30 @@ const MenuScreenView = ({
   return (
     <ThemedView style={styles.container}>
       <ThemedView style={buttonStyles.buttonContainer}>
-        <ThemedButton
-          onPress={() => setPopupVisible(true)}
-          type="primary"
-          style={buttonStyles.button}
-        >
-          <ThemedText>{updateMenuCategoryText}</ThemedText>
-        </ThemedButton>
-        <ThemedButton
-          onPress={handleAddItem}
-          type="primary"
-          style={buttonStyles.button}
-        >
-          <ThemedText>{addMenuItemText}</ThemedText>
-        </ThemedButton>
+        {isMenuCategoryAddVisible && (
+          <ThemedButton
+            onPress={() => setPopupVisible(true)}
+            type="primary"
+            style={buttonStyles.button}
+          >
+            <ThemedText>{updateMenuCategoryText}</ThemedText>
+          </ThemedButton>
+        )}
+        {isMenuAddVisible && (
+          <ThemedButton
+            onPress={handleAddItem}
+            type="primary"
+            style={buttonStyles.button}
+          >
+            <ThemedText>{addMenuItemText}</ThemedText>
+          </ThemedButton>
+        )}
       </ThemedView>
       <MenuItems
         items={filteredItems}
         preferredLanguage={preferredLanguage}
         onEdit={handleEditItem}
+        isMenuEditVisible={isMenuEditVisible}
       />
       <CategoryManagementPopup
         visible={isPopupVisible}