RMS

Empower Your Deployment Journey with RMS: Where Code Meets Efficiency!

Table of Contents

• Overview
• Features
• Project Structure
  • Project Index
• Getting Started
  • Prerequisites
  • Installation
  • Usage
• Project Roadmap
• Contributing
• License
• Acknowledgments

---

Overview

The RMS project is a comprehensive solution for automating deployment to Firebase Hosting. It streamlines the process by configuring hosting settings, managing dependencies with package-lock.json, and automating deployment workflows with GitHub Actions. Targeted at developers and teams, RMS ensures efficient deployment and consistent stability for web applications.

---

Features

	Feature	Summary
⚙️	Architecture	Modular architecture with clear separation of concerns Follows best practices for maintainability
🔩	Code Quality	Consistent coding style and conventions Regular code reviews and automated linting
📄	Documentation	Extensive documentation covering codebase, APIs, and deployment processes Includes code comments for better understanding Interactive API documentation for easy reference
🔌	Integrations	Seamless integration with GitHub Actions for CI/CD Integrates with Firebase for hosting and backend services Supports third-party integrations for analytics and monitoring
🧩	Modularity	Decoupled components for reusability Supports plugin architecture for extensibility
⚡️	Performance	Optimized code for fast load times and responsiveness Caches data for improved performance Utilizes lazy loading and code splitting for efficient resource usage
🛡️	Security	Follows security best practices to prevent common vulnerabilities /ul>
📦	Dependencies	Manages dependencies using npm with version locking Includes essential libraries like axios, firebase Regularly updates dependencies to ensure compatibility and security

---

Project Structure

└── RMS/
    ├── .github
    ├── LICENSE
    ├── README.md
    ├── firebase.json
    ├── package-lock.json
    ├── package.json
    ├── public
    └── src

Project Index

RMS/

__root__

firebase.json	- Configures Firebase hosting to serve the built web application from the 'build' directory - Ignores specific files and directories, and sets up rewrites to direct all requests to 'index.html' - This file defines the hosting settings for the project, ensuring proper deployment and serving of the web application.
package-lock.json	- The `package-lock.json` file in the project serves as a manifest for managing dependencies and their versions - It ensures that the project uses specific versions of external libraries like axios, firebase, framer-motion, and others - This file plays a crucial role in maintaining consistency and stability within the codebase by locking the versions of dependencies to prevent unexpected changes.
package.json	- Define the project's dependencies and configuration settings in the package.json file - This file manages scripts for starting, building, and testing the application, along with defining ESLint rules and browser compatibility - It also lists devDependencies like react-scripts and dependencies such as axios, firebase, and styled-components.

.github

workflows

firebase-hosting-pull-prod.yml	- Automate deployment to Firebase Hosting for the 'develop' branch using GitHub Actions - The workflow triggers on push events, building and previewing the project on Ubuntu - It deploys to Firebase Hosting with the specified repository token, service account, project ID, and channel ID.
firebase-hosting-pull-request.yml	- Automate deployment to Firebase Hosting for pull requests on the 'release' branch - The workflow builds and previews changes using npm, then deploys to Firebase Hosting using the FirebaseExtended GitHub Action - Permissions are set for checks, contents, and pull requests.

src

index.css	- Define global styling variables and import font for consistent design across the project - Set primary colors, text colors, shadows, and radius values - Ensure consistent box model and font usage throughout the application.
App.js	Initializes the application, sets up routes, and clears local storage cart item upon mounting.
index.js	Initialize the React application by rendering the App component within the AuthProvider context and attaching it to the DOM element with the ID 'root'.

modules

shared

contexts

AuthContext.js

- Enables authentication functionalities by providing context and methods for user login, registration, logout, social login with Google and Facebook, password reset, account deletion, and retrieving restaurant configuration - The AuthProvider component manages user authentication state and interactions with the server, enhancing the overall user experience within the codebase architecture.

components

Navigation

Navigation.module.css	- Define the styling for the navigation header, including responsiveness for mobile devices - Handles the appearance and behavior of the header container, hamburger menu, and mobile menu - Controls the layout and transitions for a seamless user experience across different screen sizes.
Navigation.js	- Manages the navigation bar appearance and functionality, including logo display, tab navigation, and authentication buttons - Handles mobile and desktop views, adjusts navigation based on URL hash, and ensures a seamless user experience.

NavigationTabs

NavigationTabs.js	- Implements a dynamic navigation component that renders tabs based on feature availability - Handles tab visibility and animation effects, enhancing user experience.
NavigationTabs.module.css	- Define the styling for the navigation tabs, including centering, layout, and button appearance - Ensure consistent spacing and alignment for both desktop and mobile views - Implement hover effects for interactive elements and a visual indicator for active tabs.

Logo

Logo.module.css	- Defines styling for the navigation logo component, setting margins, cursor behavior, font family, size, and color - Enhances the visual appeal and user interaction of the logo within the project's navigation section.
Logo.js	Defines a Logo component that renders a logo with animation effects.

AuthButtons

AuthButtons.module.css	Define styling for authentication buttons in the navigation component, ensuring consistent design and user experience across the application.
AuthButtons.js	- The AuthButtons component renders login and sign-up authentication buttons, with animations, based on the device view - It takes props for handling button clicks and mobile view detection - This component enhances user interaction within the navigation section of the application.

ProfileButton

ProfileButton.js	- The ProfileButton component renders profile and dashboard buttons with animation effects based on user type and device view - It handles click events for profile and dashboard actions, adjusting button styles for mobile and desktop views.
ProfileButton.module.css	- Define consistent styling for profile and dashboard buttons in the navigation component, ensuring a cohesive visual experience across the application - The CSS rules in the provided file maintain alignment, spacing, and color schemes for both desktop and mobile views, enhancing user interaction and navigation.

HashNavigationWrapper

HashNavigationWrapper.js

- Manages navigation based on URL hash and renders corresponding components - Determines active view based on hash value, defaulting to 'Home' if none exists - Renders Menu, Location, or Reservation components based on active view, with Home as default.

SocialIcons

SocialIcons.js	Generates a SocialIcons component displaying consistent social media icons with styling, enhancing the project's UI.
SocialIcons.module.css	Define styling for social media icons with hover effects and responsive design in the project's CSS module.

Layout

Layout.jsx	- The Layout component renders the application's structure, incorporating navigation and main content - It accepts children as props to display content within the layout.
Layout.module.css	- Defines the layout styling for the project, ensuring a responsive and visually appealing design - It establishes the main structure and positioning of elements within the application, creating a cohesive user interface - The file imports global styles and sets the layout container to flexibly adjust to different screen sizes, maintaining a consistent look and feel throughout the project.

hooks

useCurrentYear.js	- Provides a custom hook to dynamically fetch and update the current year for copyright notices in the application - It ensures the year is always accurate, even if the app runs through a new year.
useImageSlider.js	- Manages image slider functionality by handling transitions between images, auto-advancing at a specified interval, and enabling navigation to next, previous, or specific slides - The hook maintains slider state and control functions for seamless user interaction within the project's shared modules.

utils

cookieManager.js	- Manages cookies for the project by setting, getting, and removing them using the 'js-cookie' library - This utility simplifies cookie handling across the codebase, ensuring seamless interaction with browser cookies.
countryCodeData.js	- Provides common country codes for phone number input across various regions, enhancing user experience during phone number input validation and formatting - This data file centralizes country-specific codes, ensuring consistency and accuracy in handling international phone numbers within the project's shared utilities module.
dateUtils.js	- Provides utility functions for date and time formatting in reservations - Functions include converting date and time formats, validating formats, and formatting IDs for display - Supports transforming dates between MM/DD/YYYY and YYYY-MM-DD formats, and times between 12-hour and 24-hour formats - Additionally, it validates date and time formats for accuracy.
formatters.js	- Enhances data display and readability by formatting currency, percentages, day names, status labels, and method labels - Improves user experience and visual presentation within the project's shared utility functions.
timeUtils.js	Converts 24-hour time to 12-hour format for display purposes in the shared utilities module.

profile

sections

MyOrders

MyOrders.jsx

- The MyOrders component in the project displays a user's order history and allows viewing detailed order information in a modal - It enhances the user experience by presenting past orders in a structured table format and providing easy access to order details - This component plays a crucial role in managing and visualizing order-related data within the application.

MyAccount

MyAccount.module.css	- Define styling for the account settings page, including password change card, tabs, and submenu - Ensure consistent design and user-friendly layout for a seamless user experience.
MyAccount.jsx	- Manages user account details, password changes, and account deletion flow within the MyAccount section - Displays account information, allows password updates, and handles account deletion with confirmation prompts - Facilitates navigation between account sections through tabs - Integrates with user authentication and routing functionalities.

MyReservations

MyReservations.jsx

- Manages user reservations, allowing viewing, editing, and cancellation - Displays upcoming reservation details, reservation history, and provides modal interfaces for managing and editing reservations - Implements handlers for user interactions like managing, editing, and canceling reservations - Supports seamless user experience for reservation management within the application.

components

TableComponents.module.css	Define styling rules for a responsive history table component, ensuring readability and user-friendly interaction.
ProfileLayout.module.css	- Define the layout styling for the profile page, ensuring a consistent and visually appealing user interface - The code in the provided file establishes the structure, spacing, and design elements for the profile components, enhancing the overall user experience within the project architecture.

ReservationEditForm

FormComponents.module.css	- Define styling rules for form components like input fields, tabs, and warning messages - Ensure consistent design and user experience across the profile module.
ReservationEditForm.jsx	- Enables editing reservation details by validating and updating date and time inputs - Handles form submission and cancellation actions seamlessly within the reservation editing flow.

ProfileSidebar

ProfileSidebar.jsx	- ProfileSidebar component renders the profile page's navigation sidebar/header, allowing users to easily switch between account sections - It includes a mobile-friendly menu toggle and logout functionality - The component enhances user experience by providing seamless navigation within the profile page.
ProfileSidebar.module.css	- Define the styling for the profile sidebar component, including layout, colors, and responsiveness based on screen size - The CSS rules handle the appearance and behavior of the sidebar, header, menu items, and logout button, ensuring a cohesive and user-friendly interface.

Modal

Modal.module.css	- Define the styling for a modal overlay and its components like header, body, and actions - Control the appearance and behavior of the modal, including transitions and responsiveness.
Modal.jsx	- Implement a reusable Modal component in the project's profile module - The component manages animations for opening and closing modals, including handling escape key presses and clicks outside the modal - It ensures smooth user interactions and provides a visually appealing experience for displaying content within a modal dialog.

ReservationHistory

ReservationHistory.jsx

- Displays past reservations in a table, showcasing reservation details like ID, date, time, people, and status - Allows users to manage reservations by viewing details - If no history exists, a message is shown.

StatusBadge

StatusBadge.jsx	- Defines functions to determine status badge styling and format status for display - The StatusBadge component utilizes these functions to render a status with appropriate styling based on the provided status value.
StatusBadge.module.css	Define status badge styles for different states in the profile module to visually represent status information.

UpcominReservation

UpcomingReservation.jsx	Displays the next upcoming reservation details, allowing users to manage or cancel it.
UpcomingReservation.module.css	- Defines styling for upcoming reservations component with a distinct top border color - This file contributes to the project's modular architecture by encapsulating visual presentation details for the upcoming reservation section within the profile module.

OrderDetail

OrderDetail.module.css	- Define styling for order details and delivery address in the project's profile module - The CSS file sets grid layout for orders, styles delivery address, and adjusts layout for different screen sizes.
OrderDetail.jsx	- The OrderDetail component in the provided code file renders detailed information for a single order, including order ID, date, status, total amount, delivery and payment methods, and order items displayed in a table format - It also optionally displays the delivery address for home delivery orders.

ReservationDetail

ReservationDetail.module.css	- Define styling for reservation details, including fields, labels, values, and grid layout - Implement responsive design for grid columns on larger screens.
ReservationDetail.jsx	- Displays reservation details including ID, date, time, number of people, and status - Allows editing of reservations if not cancelled.

hooks

useOrders.js	- Provides a custom hook for managing user orders by fetching and organizing data - Handles loading states and errors, transforming order dates for display.
useProfileNavigation.js	- Enables URL navigation and parsing for profile tabs and items, updating the active tab and selected items based on URL parameters - Handles tab changes, viewing orders and reservations, and clearing selected items - Facilitates seamless user navigation within the profile section of the application.
useReservations.js	- Provides custom hook for managing user reservations, including fetching, updating, and canceling - Transforms reservation data for display and handles errors gracefully - Exposes functions to fetch upcoming reservations, cancel bookings, and reschedule reservations.
useUserDetails.js	- Provides a custom hook to fetch and manage user details, handling loading states and errors - It encapsulates logic for retrieving user data from the backend service, enhancing code modularity and reusability within the project's profile module architecture.

pages

Profile.js

- Manages tab navigation and data fetching for the user's profile, including reservations, account details, and orders - Handles account deletion functionality and utilizes custom hooks for navigation and data retrieval - Renders the profile layout with a sidebar for navigation and main content based on the active tab.

notFound

NotFound.module.css	- Define styling for the 404 error page to ensure a visually appealing and user-friendly experience - The CSS in this file sets up the layout, typography, and interactive elements for the not found page, enhancing the overall look and feel of the application.
NotFound.js	Renders a 404 Not Found page with a message and a link to go back to the home page.

reservation

components

Legend

Legend.module.css	- Define the styling for the legend container, items, and text in the reservation module - Position the legend at the bottom center with a transparent background, suitable for displaying key information - Adjust font size for mobile devices.
Legend.jsx	- The Legend component renders a color-coded legend to display availability status - It accepts a prop to adjust styling for mobile devices - This component enhances user experience by providing a visual guide for availability status within the reservation module.

LoadingState

LoadingState.module.css	- Define the visual layout for the loading state of the reservation component - The CSS file specifies the styling for a loading container, spinner animation, and loading text to provide a user-friendly experience while data is being fetched.
LoadingState.jsx	Displays a loading spinner and message to indicate ongoing processes.

DateTimeForm

DateTimeForm.module.css	- Define the visual styling for the reservation form component, ensuring a cohesive and user-friendly interface - The CSS rules establish layout, colors, transitions, and interactive elements for a seamless user experience.
DateTimeForm.js	- The DateTimeForm component renders a reservation form for selecting date, start and end times, and number of guests - It includes functionality to search for available tables based on the selected criteria - This component plays a crucial role in facilitating the reservation process within the project's architecture.

TableWithChairs

TableWithChairs.jsx	- Generates a visual representation of a table with chairs, accommodating both round and rectangular tables - The component allows for interactive features like clicking on tables and displays various styles based on availability and selection status - It handles chair positioning around tables and includes detailed styling for a realistic look.
TableWithChairs.module.css	Define styling for a table with chairs component, including transitions and selected text appearance.

ReservationModal

ReservationModal.js	- The ReservationModal component displays a modal for reserving a table with specified details - It allows users to view and confirm reservation information such as date, time, and party size - Users can interact with the modal to confirm or cancel reservations, with visual feedback on the processing status.
ReservationModal.module.css	- Define the visual styling for a reservation modal, ensuring a professional and user-friendly interface - The CSS file sets the layout, animations, and design elements for the modal overlay, content, header, buttons, and information display - It enhances the overall user experience by providing a clear and aesthetically pleasing reservation interaction.

Door

Door.module.css	Manages styling for the door component in the reservation module, contributing to a consistent and visually appealing user interface across the codebase.
Door.jsx	- The Door component renders customizable doors with various types and states (open/closed) based on specified dimensions and properties - It supports hinged, sliding, and double door types, allowing for interactive user interactions and visual representations within the reservation module of the project.

ErrorState

ErrorState.module.css	- Define styling for error state display in the reservation module, ensuring a consistent and visually appealing user experience - The CSS rules in this file control the layout, alignment, and color scheme for error messages, enhancing the overall presentation of error feedback within the reservation component.
ErrorState.jsx	- The ErrorState component displays an error message with an icon - It enhances user experience by providing clear feedback when errors occur in the reservation module of the project.

Window

Window.module.css	Define styling rules for the reservation window component to ensure a consistent and visually appealing user interface across the project.
Window.jsx	- Defines a customizable window component that renders different window types with specific properties like position, size, and rotation - Handles user interactions and visual representations based on the window type and state.

Wall

Wall.module.css	Define styling rules for the Wall component in the reservation module to ensure a consistent and visually appealing layout.
Wall.jsx	- Defines a Wall component rendering a customizable wall with coordinates, thickness, and color - Handles wall selection and click events, providing visual feedback - Calculations for angle and length are included for accurate display - The component encapsulates wall rendering logic for the reservation system.

Chair

Chair.module.css	Improve styling consistency for chair components in the reservation module.
Chair.jsx	- Defines a Chair component rendering a chair with specified position, color, and rotation - Calculates chair dimensions and positions components accordingly.

FloorPlan

FloorPlan.jsx	- Displays the restaurant floor plan with interactive elements like tables, walls, and doors - Handles loading and error states, allowing selection of tables with a callback function - Utilizes custom hooks for data retrieval and user interactions.
FloorPlan.module.css	- Define the styling for the floor plan layout, table details, loading indicators, and error messages within the reservation module - The CSS rules ensure a visually appealing and responsive display of floor plan components, with animations for loading states and error handling.

FloorCanvas

FloorCanvas.jsx	- Render SVG canvas displaying floor plan elements like walls, doors, windows, and tables - Utilizes components to visualize architectural layout with interactive features for selection and interaction - Enhances user experience by providing a visual representation of the floor plan within the application.
FloorCanvas.module.css	Define styling rules for the FloorCanvas component to ensure a consistent and visually appealing layout within the reservation module of the project.

LoginPrompt

LoginPrompt.module.css	- Define the styling for the login prompt component, ensuring a visually appealing and user-friendly interface - The CSS rules specify layout, typography, and button interactions to enhance the login experience for users accessing the reservation system.
LoginPrompt.js	- Generates a LoginPrompt component that prompts users to log in for making reservations - It includes a message encouraging users to log in to their account to reserve a table, along with a button to initiate the login process - The component adjusts its layout based on the device type, ensuring a seamless user experience across different devices.

hooks

useResponsiveView.js	- Manage device responsiveness by determining if the device is mobile using a custom hook - The hook updates the state based on window resize events, returning a boolean value indicating mobile status.
useFloorPlanData.js	- Manages fetching and updating floor plan data, including tables, walls, doors, and windows - Utilizes a custom hook to handle loading status and errors, ensuring accurate display of available tables within the floor plan - Integrates with the floor plan service to retrieve and process layout details for seamless visualization.
useSelection.js	- Manages element selection in the floor plan, enabling callback on table selection - Handles table clicks, updates selection state, and triggers parent component callback if provided - Offers functionality to clear all selections.
useReservationForm.js	- Manages reservation form state and actions, including date, time, number of seats, and table availability - Validates inputs, searches for free tables, and creates reservations - Handles formatting date and time, error handling, and authentication checks - Supports user interactions for booking tables based on specified criteria.

pages

ReserveTable.js	- Implements a reservation page displaying an interactive floor plan and form - Handles table selection, reservation confirmation, and modal closure - Includes authentication checks and responsive design considerations.
ReserveTable.module.css	- Define the styling for the reservation form and table display in the project's reservation module - The CSS file sets the layout, colors, transitions, and responsiveness for the reservation form and table components, enhancing the user experience and visual appeal of the reservation feature.

authentication

components

ErrorDisplay

ErrorDisplay.jsx	- Displays error messages in the authentication module, enhancing user experience by providing clear feedback - The ErrorDisplay component renders the error message passed as a prop, ensuring users are informed of any issues during authentication processes.
ErrorDisplay.module.css	- Define the styling for authentication error messages in the CSS module - The code sets the appearance of error messages, including background color, text color, padding, and animation effects - This module ensures consistent and visually appealing error displays across the authentication components in the project.

RegisterForm

RegisterForm.module.css	Defines styling for the registration form, including input fields, buttons, and layout adjustments for responsiveness.
RegisterForm.jsx	- The RegisterForm component renders a user registration form with fields for personal details, email, password, and phone number - It includes functionality to handle input changes, form submission, and toggling the country code dropdown - Users can switch to the login form and register with ease.

HomeButton

HomeButton.module.css	Define a styled button for returning to the home page, enhancing user experience with a visually appealing and interactive element.
HomeButton.jsx	Implements a home button component for navigation in the project's authentication module.

ResetSuccessMessage

ResetSuccessMessage.jsx	- Displays a success message post password reset, prompting users to check their email for further instructions - Allows users to return to the login page.
ResetSuccessMessage.module.css	Define styling for authentication success message and related components with animations and transitions for a visually appealing user experience.

LoginForm

LoginForm.module.css	- Define the styling for the authentication form, including input fields, buttons, and switch options - Encourages a user-friendly design with responsive interactions.
LoginForm.jsx	- Defines a login form component that handles user authentication - Allows users to input email and password, submit the form, and switch to the registration form if needed - Integrates with the project's authentication module and maintains a clean user interface.

SocialAuthButtons

SocialAuthButtons.jsx	- Enables social authentication with Google and Facebook, presenting buttons for users to sign in - Handles loading state and triggers respective authentication functions.
SocialAuthButtons.module.css	- Define styling for social authentication buttons with various providers, enhancing user experience and visual appeal - Encourages user interaction through hover effects and disabled state styling - Ensures consistent design across different screen sizes for a seamless authentication process.

AuthHeader

AuthHeader.module.css	- Define the styling for the return home button in the authentication module - The button is positioned at the top left with a distinctive design, including a hover effect and responsive adjustments for smaller screens - It enhances the user experience by providing a visually appealing and functional element for navigating back to the home page.
AuthHeader.jsx	- Defines an authentication header component for the project, displaying a home button and title - It offers functionality to navigate back to the home page.

ForgotPasswordForm

ForgotPasswordForm.jsx	- Generates a form for users to request a password reset by entering their email address - Displays form errors, sends reset link, and allows users to return to login page.
ForgotPasswordForm.module.css	- Define consistent styling for authentication form components like headers, input fields, buttons, and links - Ensure a visually appealing and user-friendly interface for the forgot password form in the authentication module.

hooks

useAuthForm.js	- Manages authentication form state, logic, and handlers for login, registration, and social authentication - Handles form validation, error messages, and redirects based on user authentication status - Provides functions for form field changes, country code selection, and toggling dropdown visibility - Ensures secure and user-friendly authentication experience within the project architecture.
useForgotPassword.js	- Facilitates handling forgot password functionality by managing state, form submission, and navigation - Validates email format, triggers password reset, and displays success/error messages - Encapsulates logic for seamless user experience during password recovery process.

pages

Auth.module.css	- Define the styling for the authentication module's user interface, ensuring a visually appealing and responsive layout - The CSS file sets the design elements such as background, card layout, headers, and animations to enhance the user experience during the authentication process.
Auth.jsx	- Implements an authentication component for handling login and registration - Renders UI elements such as forms, error displays, and social authentication buttons - Manages form data, loading states, and user interactions for seamless authentication processes.
ForgotPassword.jsx	- Implements the ForgotPassword component for resetting user passwords - Handles user interactions and displays appropriate forms based on submission status - Integrates with authentication hooks for seamless functionality within the project's authentication module.

location

components

DayHours

DayHours.js	- The DayHours component in the location module renders the opening hours for a specific day of the week - It takes the day and corresponding hours as props and displays them in a structured format - This component contributes to the user interface by providing clear visibility of daily operating hours.
DayHours.module.css	- Define styling for the DayHours component, ensuring a consistent and visually appealing layout - The CSS rules in this file establish the structure and design of the DayHours module, enhancing the user experience by organizing and styling the display of day and hour information.

icons

EmailIcon.js	- Define a React component that renders an email icon in SVG format - The component sets specific attributes for size, color, and stroke width - This EmailIcon component is located within the location module of the project's component directory, contributing to the visual representation of email-related features.
PhoneIcon.js	Render a PhoneIcon SVG component for displaying phone icons in the location module.
ClockIcon.js	- The ClockIcon component renders an SVG clock icon for the location module in the project - It contributes to the visual representation of time-related elements within the user interface, enhancing the overall user experience.
LocationPin.js	Render a LocationPin SVG icon for displaying location markers within the project's location module.

Map

Map.module.css	- Define styling for a responsive map container with hover effects and transitions - The CSS file in the location module sets properties for a map container and map iframe, ensuring a clean and interactive user experience.
Map.js	Render Google Maps iframe based on AuthContext configuration in the Map component.

hooks

useFormattedOpeningHours.js	- Formats opening hours data for improved readability by filtering and mapping the provided array of objects - Capitalizes the day and converts the time to a 12-hour format using a utility function.
useOpeningHours.js	- Fetches and manages opening hours data, providing loading and error states - The custom hook interacts with the openingHoursService to retrieve all opening hours, updating the UI accordingly.

pages

Location.module.css	- Defines styling for a location page, including sections for contact info, map, and operating hours - Utilizes CSS grid for layout and transitions for interactive elements - Ensures responsive design for various screen sizes.
Location.js	- The LocationSection component renders contact information, opening hours, and a map for a specific location - It utilizes various components and hooks to display details such as address, contact information, and interactive buttons for calling or emailing - This component serves as a central point for showcasing essential location-related data within the project's architecture.

checkout

components

PersonalDetails

PersonalDetails.jsx	- Displays personal details for a checkout process, allowing users to view and edit their information - The component includes fields for name, email, and phone number, with options to expand or collapse the section - It also indicates completion status visually - This component enhances the user experience by providing a seamless checkout flow.
PersonalDetails.module.css	- Define the visual styling for the checkout process, enhancing user experience by providing a clean and interactive interface - The CSS file in the specified path governs the appearance of each step, ensuring a seamless transition and clear progression for users.

ErrorMessage

ErrorMessage.jsx	Displays error messages in the checkout process based on provided input.
ErrorMessage.module.css	- Define consistent styling for error messages in the checkout module to ensure a cohesive user experience - The ErrorMessage module CSS file establishes a visually distinct and informative format for error messages, enhancing readability and user interaction within the checkout process.

CollectionMethod

CollectionMethod.module.css	Define the visual styling for the checkout collection method component, enhancing user experience by providing a clean and interactive interface.
CollectionMethod.jsx	- The CollectionMethod component facilitates selection of collection methods during the checkout process, based on user preferences and feature flags - It dynamically renders options for order pickup or home delivery, allowing users to choose their preferred method seamlessly - The component also handles address input fields for home delivery, enhancing the overall checkout experience.

OrderSummary

OrderSummary.jsx	- The OrderSummary component displays a summary of the user's order, showcasing cart items, total price, and actions to place the order - It integrates with the cart, menu items, and order processing functions to provide a seamless checkout experience for users.
OrderSummary.module.css	- Define the visual styling for the order summary component, enhancing the checkout experience by presenting a structured and appealing layout for displaying cart items, quantities, prices, and a prominent place order button - The CSS rules ensure a responsive design that adapts to various screen sizes for optimal user interaction.

OrderProcessingModal

OrderProcessingModal.jsx	- Displays a modal indicating order processing status, with animations and redirects based on order and payment status - Manages countdown for redirecting after successful online payment - Handles success, error, and processing states with corresponding UI elements.
OrderProcessingModal.module.css	- Define the visual styling for the order processing modal, including overlay, content layout, loader animations, success/error indicators, and action buttons - Implement keyframe animations for fade-in, slide-up, spin, bounce-in, and shake effects to enhance user experience during order processing.

LoginOverlay

LoginOverlay.module.css	Define the styling for the login overlay component, ensuring a visually appealing and user-friendly login experience.
LoginOverlay.jsx	- The LoginOverlay component prompts users to log in to proceed with their order - It includes options to either log in or return to the menu - This component enhances the checkout process by providing a seamless login experience within the application architecture.

PaymentMethod

PaymentMethod.jsx	- The PaymentMethod component facilitates the selection of payment methods during the checkout process - It dynamically displays available payment options based on the chosen collection method, ensuring a seamless user experience - This component leverages feature flags to enable or disable specific payment methods, enhancing flexibility and customization within the checkout flow.
PaymentMethod.module.css	Define the visual styling for the payment method selection interface, enhancing user experience and interaction.

hooks

useCheckout.js	- Manages the checkout process by handling collection and payment methods, address validation, and order placement - Provides state and functions for toggling content, managing modals, and processing orders - Enables seamless user interaction and order fulfillment within the project's checkout flow.
useCart.js	- Manages shopping cart state and operations, including adding/removing items, calculating total price, and clearing the cart - Utilizes local storage for persistence and fetches menu items from the server - Provides essential functions for handling the cart within the checkout module.
useUserDetails.js	- Manages user details and login redirection within the checkout module - Retrieves user information and handles redirects to the login page if needed - Integrates with authentication context and user service to provide a seamless user experience during the checkout process.

pages

Checkout.module.css	Define the visual layout for the checkout page, ensuring responsiveness across devices.
Checkout.js	- Manages the checkout process by displaying personal details, collection and payment methods, and order summary - Handles state and operations related to checkout, ensuring a smooth user experience - Includes features like error handling, login overlay, and order processing modal - Supports seamless navigation and redirects based on user actions.

dashboard

sections

PendingReservations

PendingReservations.jsx	- Displays a list of pending reservations with options to approve or reject each reservation - The component takes in pending reservations and functions to handle approval/rejection - If there are no pending reservations, it shows an empty state message - Otherwise, it renders reservation details and action buttons for each reservation.
PendingReservations.module.css	- Define the visual styling for pending reservation components in the dashboard section - Includes layout, card design, guest information, action buttons, and responsive adjustments for smaller screens.

AllReservations

AllReservations.js	- Manages display and filtering of reservations, featuring a main component with a results counter and reservations table - Utilizes a filter sidebar for visibility toggling and filter options - Custom hook enables filtering functionality based on reservation data.
AllReservations.module.css	- Define the layout styling for the dashboard's reservation section, ensuring a responsive and visually appealing display - The code in the provided file establishes the container and content styling, maintaining a structured and user-friendly interface for managing reservations within the application.

components

ResultCounter

ResultsCounter.module.css	- Define the styling for the results count display in the All Reservations section of the dashboard - The CSS module sets the font size, color, margin, and font weight for the results count element, ensuring a consistent and visually appealing presentation within the dashboard interface.
ResultsCounter.js	Displays reservation count after filtering in the dashboard section.

ReservationTable

ReservationsTable.module.css	- Define the styling for a reservation table, including layout, font sizes, colors, and responsiveness for different screen sizes - The CSS rules ensure a clean and organized display of reservation data, with distinct badges for status indicators and guest counts - The design prioritizes readability and user experience across various devices.
ReservationsTable.jsx	- Displays reservations in a table format based on provided data - Categorizes reservations by name, date, time, guests, table, contact, and status - Handles cases where no reservations match filters, showing an appropriate message.

FilterSidebar

FilterSidebar.jsx	- Enables filtering of reservations based on various criteria such as name, date, time, table, and status - Provides options to clear filters and toggle sidebar visibility.
FilterSidebar.module.css	- Define the styling for the filter sidebar component in the dashboard section - It controls the appearance and behavior of the sidebar when filtering reservations - The CSS rules handle the sidebar's width, position, transitions, and various styling elements like headers, inputs, and buttons.

hooks

useReservationFilters.js

- Manages reservation filters and results based on user input, ensuring dynamic filtering of reservations by name, date, time, table, and status - Updates filtered results in real-time, allowing users to easily search and view specific reservations within the dashboard section of the application.

Orders

OrderManagement.jsx	- Manages the display, filtering, and detailed view of orders within the dashboard section - Handles order selection, status updates, and filter application - Displays loading indicator when orders are loading - Allows users to view order details, update order status, and apply/reset temporary filters.
OrderManagement.module.css	Manages styling for the Orders section in the dashboard, ensuring a consistent and visually appealing user interface.

components

OrderFilters

OrderFilters.module.css	- Define the visual styling for the order filters section in the dashboard, including layout, animations, and interactive elements - This CSS module controls the appearance and behavior of the order filters overlay, header, buttons, input fields, and date selection components - It ensures a cohesive and user-friendly design for managing and applying filters in the dashboard interface.
OrderFilters.js	- Enables filtering orders by status and date range with a user-friendly interface - Handles status and date range changes, visibility toggling, and filter application and reset - Supports selecting status options and date ranges, with the ability to clear dates - Facilitates seamless filtering and management of orders within the dashboard section.

OrderList

OrderList.jsx	- Displays a list of orders with details and actions, handling order selection and status updates - Formats date, time, status, payment, and delivery methods for display - Includes an empty state message if no orders are present.
OrderList.module.css	- Define the styling for the order list component, including table layout, row hover effects, status badges, and action buttons - Responsiveness is ensured with media queries for smaller screens.

OrderDetails

OrderDetails.jsx	- The OrderDetails component displays detailed information about an order, including items, status, and actions to update the status - It handles rendering order details, formatting data for display, and providing functionality to update the order status - This component enhances the user experience by presenting comprehensive order information and enabling status updates seamlessly.
OrderDetails.module.css	- Defines styles for a modal displaying order details, ensuring a sleek and user-friendly interface - The CSS file governs layout, animations, and color schemes for a visually appealing presentation of order information.

Loading

LoadingIndicator.jsx	- Create a LoadingIndicator component to display a loading spinner with optional text - Customize the size and fullscreen display, enhancing user experience during data fetching.
LoadingIndicator.module.css	Define loading indicator styles for different screen sizes and create a visually appealing loading animation with spinning dots and text pulse effects.

EmployeeManagement

EmployeeManagement.module.css	Define the styling for the employee dashboard section in the project's architecture.
EmployeeManagement.jsx	- Manages employee operations by displaying a table and handling employee-related actions - Includes features for adding new employees, changing roles, and removing employees - Utilizes custom hooks for form handling and role management - Main component for overseeing employee management within the project architecture.

components

EmployeeTable

EmployeeTable.jsx	- Displays employee information in a table format, including ID, name, email, phone, and role - Handles scenarios where no employees are found - Utilizes an ActionMenu component for role changes and user deletions - Designed to present employee data effectively within the dashboard section of the project.
EmployeeTable.module.css	- Define the styling for the employee table component, ensuring a clean and professional layout - The CSS rules handle table structure, cell formatting, role badges, and responsive design for various screen sizes.

ActionMenu

ActionMenu.jsx	- Implements an ActionMenu component for managing employee actions in the dashboard - Displays a dropdown menu with options to change roles or delete users - Handles user interactions and triggers corresponding functions - Enhances user experience by providing a seamless interface for managing employee data.
ActionMenu.module.css	- Define styling for action menu components in the Employee Management section, including buttons, icons, and menu items - Implement hover effects and color schemes for a visually appealing user interface.

AddEmployeeModal

AddEmployeeModal.module.css	Define the visual styling for an employee addition modal in the dashboard section.
AddEmployeeModal.jsx	- Enables adding new employees via a modal form with input validation - Handles form submission, input changes, and modal closure - Provides fields for first name, last name, email, phone, password, confirm password, and role selection - Supports error feedback for each field.

ChangeRoleModal

ChangeRoleModal.jsx	- Enables role changes for employees in the dashboard section - Displays a modal for selecting and saving a new role for a specific employee - Supports role selection and provides options to cancel or save changes.
ChangeRoleModal.module.css	Define the visual styling for the employee role change modal, ensuring a professional and user-friendly interface.

hooks

useRoleManagement.js	- Facilitates employee role management by providing state management and event handlers for updating roles - The hook integrates with the backend to modify employee roles, displaying a modal for role selection and saving changes - This functionality enhances the dashboard's employee management section, streamlining role adjustments within the application.
useEmployeeForm.js	- Manages employee form state, validation, and submission for creating new employees - Handles input changes, form validation, error handling, and dialog management - Integrates with the backend to add new employees and resets the form upon submission or closure.

RestaurantConfig

RestaurantConfig.module.css	- Define the styling for the restaurant configuration section, including notifications, grid layout, form elements, and feature displays - Implement animations, color schemes, and interactive toggles for user-friendly interaction within the dashboard module.
RestaurantConfig.jsx	- Manages restaurant configuration settings, including contact info, address, map location, and features - Handles loading state and allows editing and saving of information - Provides a user-friendly interface for managing various aspects of a restaurant's online presence.

AnalyticsDashboard

AnalyticsDashboard.module.css	- Define the layout for the Analytics Dashboard section by organizing elements in a column with specified spacing and width - Additionally, style the content section with a specific margin to enhance visual hierarchy and readability within the dashboard interface.
AnalyticsDashboard.jsx	- The AnalyticsDashboard component orchestrates the display of various analytics sections based on user interaction - It manages data fetching, error handling, and loading states while rendering summary cards, filter bars, and navigation tabs for a comprehensive analytics dashboard experience.

components

Error.module.css

Define the styling for error messages and retry buttons in the Analytics Dashboard section, ensuring a consistent and user-friendly display for error handling scenarios.

sections

Orders.jsx	- Generates the Orders component to display analytics data on orders, including orders by status, payment method, delivery method, and average completion time - Utilizes BarChartComponent, PieChartComponent, and CenteredMetric for visual representation - Organizes and formats data for clear insights into order analytics.
Revenue.jsx	- Displays revenue analytics data through pie and bar charts, along with key metrics - Filters and formats data for payment and delivery methods, weekly revenue, total revenue, and average order value - Provides insights into revenue performance within a specified time range.
MenuItems.jsx	- Displays analytics data for menu items through various charts and metrics - Extracts top and bottom items by quantity, top items by revenue, and average preparation time - Utilizes BarChartComponent and CenteredMetric for visualization - Organizes data in a grid layout for easy consumption.
Summary.jsx	- Displays a summary of analytics data through various charts, including revenue trends, order status distribution, top menu items, and reservations by day - The component organizes and visualizes key metrics for easy interpretation and decision-making within the analytics dashboard section of the project.
Reservations.jsx	- Displays analytics data for reservations including reservations by day of week, reservations by status, table popularity, and reservation statistics - Utilizes bar and pie charts along with metrics grid to present the data in a visually appealing manner.

common

NavigationTabs

NavigationTabs.module.css	- Define styling for navigation tabs in the Analytics Dashboard section, ensuring a consistent and user-friendly interface - The code in the provided file enhances the visual presentation by styling tab elements with specific attributes like padding, colors, and transitions - This contributes to a seamless user experience within the dashboard module of the project.
NavigationTabs.jsx	- Creates a NavigationTabs component for switching between different sections in the Analytics Dashboard - Displays tabs for Overview, Revenue, Orders, Menu Items, and Reservations - Allows users to click on tabs to switch sections easily.

SummaryCard

SummaryCards.jsx	- Displays summary information for the dashboard, including today's revenue, orders, and reservations - Utilizes props for dashboard and operational analytics data to render dynamic content.
SummaryCards.module.css	- Define the styling for summary cards in the Analytics Dashboard section - The CSS file specifies the layout, colors, and typography for displaying key data points.

FilterBar

FilterBar.module.css	- Define the styling for the filter bar component in the Analytics Dashboard section - The CSS rules specify the layout, alignment, and appearance of filter elements within the filter bar, enhancing the user interface of the analytics dashboard.
FilterBar.jsx	- Enables users to select a time range for analytics data visualization in the dashboard - The FilterBar component offers options for the last 7, 30, or 90 days, allowing users to dynamically update the displayed data based on their selection.

charts

LineChartComponent.jsx	- Generates a responsive line chart component for analytics dashboards, allowing customization of data, axes, colors, and tooltips - The component enhances data visualization capabilities within the dashboard section of the project, providing a clear and interactive way to display trends and insights.
ChartComponents.module.css	- Define consistent styling for various dashboard components to ensure a cohesive and visually appealing user interface - Implement specific design attributes like background color, border radius, and box shadow to enhance the overall presentation of analytics charts and metrics.
BarChartComponent.jsx	- Generates a responsive bar chart component for the Analytics Dashboard section - Displays data with customizable features like tooltips, legends, and axis labels - Enhances data visualization and analysis within the project's dashboard module.
MetricsDisplay.jsx	- Provides reusable components for displaying metrics in a visually appealing manner on the analytics dashboard - Includes components for centered metrics, metrics grid, and metrics list, enhancing the presentation of key data points.
PieChartComponent.jsx	- Generates a responsive and visually appealing pie chart for analytics data visualization - Renders customizable chart components with tooltips and legends, enhancing the user experience in the analytics dashboard section.

hooks

useAnalyticsData.js	- Enables fetching and managing analytics data for a specified time range, updating loading and error states accordingly - Transforms fetched data for display, ensuring accurate revenue representation - Facilitates seamless integration with external loading state management.
useTimeRange.js	- Manages the time range state for the Analytics Dashboard section, providing a way to track and update the selected time range value - This custom hook enhances the user experience by allowing seamless control over the time period displayed in the dashboard.

FloorPlanDesigner

FloorPlanDesigner.module.css	- Define the styling for the Floor Plan Designer module, including layout, buttons, and canvas controls - The CSS file sets the visual properties for elements like the container, edit button, and canvas resizing controls, enhancing the user interface of the dashboard section.
FloorPlanDesigner.jsx	- Facilitates floor plan design with interactive elements, enabling users to add tables, walls, doors, and windows - Manages drawing modes, table types, and modal interactions for seamless design experience - Integrates custom hooks for state management and logic handling, enhancing user interaction and design flexibility within the floor plan designer component.

components

TableNumberModal

TableNumberModal.module.css	- Define the visual styling for a modal component used in the Floor Plan Designer section - The CSS rules specify the layout, animations, and design elements for the modal backdrop, header, body, and footer - This file enhances the user experience by providing a consistent and appealing interface for interacting with table numbers within the application.
TableNumberModal.jsx	- Enables users to add new tables with specified numbers through a modal interface - Validates input, displays errors, and positions the modal based on user interaction - Supports confirming or canceling table additions.

Door

DoorComponent.jsx	- Render a door element in the floor plan, allowing interaction with edit mode enabled - Displays door details, supports dragging, resizing, and rotation based on provided data.
DoorComponent.module.css	- Define styling for door components, including colors, stroke width, and text properties - Implement animations for door appearance and resize handles - The CSS file enhances the visual representation of the floor plan designer module within the project architecture.

FloorPlanCanvas

FloorPlanCanvas.jsx	- The FloorPlanCanvas component renders interactive floor plan elements based on user actions, such as adding tables, walls, doors, and windows - It enables editing functionalities like drawing walls, dragging elements, and resizing components - This component plays a crucial role in visualizing and manipulating floor plan layouts within the project architecture.
FloorPlanCanvas.module.css	Enables styling for the Floor Plan Canvas component in the Dashboard section of the project.

TablePreview

TablePreview.module.css	- Defines styling for the Table Preview component in the Floor Plan Designer section - The CSS rules specify layout properties like margin, border, padding, and alignment for the table preview container and its SVG element - This file contributes to maintaining a consistent and visually appealing design for the dashboard module.
TablePreview.jsx	Render a preview of the selected table type with scaling and positioning for optimal display in the FloorPlanDesigner module.

Window

WindowComponent.jsx	- Render a window element in the floor plan, allowing for interactive editing features like drag, resize, and details display - The component dynamically adjusts window position, size, and rotation based on user input, enhancing the visual representation of the floor plan.
WindowComponent.module.css	Define styling for window components, table IDs, and resize handles with animations for appearance and interaction in the FloorPlanDesigner module.

Wall

WallComponent.jsx	- Render a wall element in the floor plan, allowing interaction for editing, dragging, and resizing - Displays wall details and handles edit mode functionality.
WallComponent.module.css	- Define styling for walls, table IDs, and resize handles in the FloorPlanDesigner component - Includes animations for wall drawing and resize handle hover effects.

ElementDetails

ElementDetails.module.css	- Define the styling for the element details section in the FloorPlanDesigner module - It specifies the layout, animations, and design elements for displaying information about selected elements - The styles enhance user experience by providing a visually appealing and functional interface for interacting with elements in the floor plan.
ElementDetails.jsx	- Displays and manages details of a selected element, allowing rotation, deletion, and activation/deactivation - Ensures the panel remains within viewport bounds for optimal user experience.

Table

TableComponent.jsx	- TableComponent renders interactive table elements in the floor plan, handling animations for creation, deletion, activation, and deactivation - It responds to user interactions, enabling editing functionalities and displaying details - The component enhances the user experience by providing visual feedback and interactivity within the floor plan designer module.
TableComponent.module.css	Define CSS styles for table animations and transitions in the FloorPlanDesigner module to enhance user experience and visual appeal.

ControlPanel

ControlPanel.module.css	- Define the styling for the control panel component in the dashboard section - The CSS rules specify the layout, colors, and behavior of the control panel elements, enhancing the user interface of the floor plan designer module.
ControlPanel.jsx	ControlPanel component manages drawing modes and table type selection in the FloorPlanDesigner section, enhancing user interaction and customization within the architecture.

hooks

useFloorPlanData.js	- Manages floor plan data by fetching and organizing tables, walls, doors, and windows from respective services - Utilizes React hooks to handle data loading and state management efficiently - Improves architectural clarity and data flow within the project's dashboard section.
useCanvasUtils.js	Manages canvas utilities for the floor plan designer, including handling cursor position relative to the SVG element and clicks on the background to control the panel state.
useElementHandlers.js	- The `useElementHandlers.js` file in the `FloorPlanDesigner` section of the codebase provides a custom hook for managing element interactions within the floor plan designer module - It handles the manipulation of tables, walls, doors, and windows by providing functions to add, move, and delete these elements - This hook encapsulates the logic for handling user interactions and updating the state of these elements in the floor plan designer, contributing to the overall functionality of the architectural design tool.

MenuManagement

MenuManagement.jsx	- Manages menu items, allowing filtering by type and search term - Displays search input, filter by type, and menu items grid - Handles loading states and dialog for creating/updating items - Fetches menu options and updates UI accordingly - Provides essential functions for managing menu items efficiently within the dashboard section.
MenuManagement.module.css	- Define styling for menu management section, including search filters, input fields, and grid layout - Adjust layout for responsiveness on smaller screens - Display an empty state message when no data is available.

components

MenuItemDialog

MenuItemDialog.jsx	- The MenuItemDialog component facilitates the creation and editing of menu items within the dashboard section - It allows users to input and modify details such as name, price, type, image, and allergens - The component ensures data validation and provides a user-friendly interface for managing menu items effectively.
MenuItemDialog.module.css	- Define the visual styling for the menu item dialog overlay and form in the dashboard section of the project - The CSS rules in this file control the layout, positioning, and appearance of the dialog elements, ensuring a consistent and user-friendly interface for managing menu items.

MenuItemCard

MenuItemCard.jsx	- Displays a menu item in a card format with options to edit or delete - Formats price, displays image, type badge, name, price, calories, wait time, allergens, and actions.
MenuItemCard.module.css	- Define the visual styling for menu item cards in the dashboard section - The CSS file sets the layout, colors, and transitions for each menu item card, including image display, content alignment, and action buttons - It enhances the user interface by providing a clean and interactive design for managing menu items.

OpeningHours

OpeningHours.jsx	- The OpeningHours component in the provided code file displays and enables editing of opening hours for each day of the week - It allows users to toggle open/closed status, set opening and closing times, and save changes - This component plays a crucial role in managing and presenting business operating hours within the dashboard section of the project.
OpeningHours.module.css	- Define the styling for the opening hours section in the dashboard, including layout, fonts, colors, and interactive elements - This CSS module ensures a visually appealing and user-friendly display of business hours, with features like status indicators, toggle switches, time inputs, and a save button.

components

DataFetchingState

DataFetchingState.jsx	- The DataFetchingState component manages different states during data fetching, displaying loading, error, or empty states based on provided flags - It handles rendering loading indicators, error messages with retry functionality, and empty state messages - This component plays a crucial role in enhancing user experience by providing clear feedback during data retrieval processes.
DataFetchingState.module.css	Define styling for data fetching state components in the dashboard, including layout, colors, and button styles.

Header

Header.jsx	- Generates the Header component for the dashboard, displaying icons and titles based on the active tab - It also provides controls for actions like editing hours, approving reservations, managing tables, adding employees, filtering reservations, and adding menu items - The component dynamically adjusts its content and functionality according to the selected tab.
Header.module.css	- Define the styling for the dashboard header, including layout, typography, buttons, toggles, and badges - Ensure a clean and consistent visual representation across the dashboard interface.

Sidebar

Sidebar.module.css	- Defines the styling for the dashboard sidebar, including layout, transitions, and responsiveness - Manages the appearance and behavior of sidebar elements such as navigation sections, buttons, user profile, and collapse functionality - Controls the sidebar's visibility and interaction based on screen size and user actions.
Sidebar.jsx	- Implements a dynamic Sidebar component for the dashboard, facilitating navigation and management functionalities - Handles collapsible sections, responsive behavior based on screen size, and user-specific content visibility - Enables toggling sidebar state and section collapse, enhancing user experience and interaction within the dashboard interface.

hooks

useMenuManagement.js	- Manages menu items by providing functions to create, update, and delete items - Handles dialog visibility, editing state, and loading status - Implements error handling for each operation - Supports managing menu items efficiently within the dashboard module.
useActiveTab.js	- Manages active tabs and fetches relevant data for reservations, opening hours, tables, employees, menu items, and orders based on the selected tab - Handles tab changes and updates the URL hash accordingly - Controls loading state during data fetching operations.
useWebSocket.js	- Manage WebSocket connections and handle incoming messages based on the active tab in the dashboard - Update pending reservations with real-time data, ensuring seamless communication with the server - This custom hook enhances user experience by dynamically updating reservation information without manual refreshes.
useEmployeeManagement.js	- Manages employee operations such as adding, removing, and updating roles - Handles employee creation with delays based on roles - Provides functions to interact with employee data and toggle the add employee dialog.
useRestaurantConfig.js	- Manages restaurant configuration state, including contact info, address, map settings, and features - Handles data fetching, validation, and saving operations - Provides functions to update settings, toggle features, and show notifications - Supports loading state management and error handling.
useTablesManagement.js	- Manages table functionality by providing state and functions for editing tables - Includes methods to retrieve table names and toggle edit mode.
useReservationManagement.js	- Manages reservation actions by approving or rejecting pending reservations, updating states, and interacting with the reservation service - Handles individual and bulk approval, as well as rejection, while maintaining loading states - This hook encapsulates reservation management logic for efficient handling within the dashboard module.
useUIState.js	- Manages UI state by providing functions to toggle reservation filter mode and handle sidebar collapse - The code file enhances user experience by controlling UI elements like reservation filters and sidebar visibility.
useHoursManagement.js	- Manages opening hours by allowing users to edit, toggle day status, enter edit mode, and save changes to the server - The code file facilitates dynamic handling of opening hours data within the dashboard module, enhancing user interaction and data management capabilities.

pages

Dashboard.module.css	- Define the layout and styling for the dashboard page, including responsive behavior and component design - The CSS file sets margins, widths, heights, and styles for various dashboard elements like headers, content, cards, and buttons - It ensures a cohesive and visually appealing user interface for the dashboard module.
Dashboard.jsx	- Manages the main dashboard for a restaurant, overseeing reservations, opening hours, employee and menu management - Utilizes various hooks for state and UI management, including WebSocket connection for real-time updates - Dynamically renders different sections based on the active tab, enhancing restaurant operations and efficiency.

menu

components

ItemDetailsModal

ItemDetailsModal.jsx	- Displays detailed information about a selected item, including image, name, category, price, description, preparation time, calories, and allergens - Enables adding or removing the item from the cart, with options to adjust quantity - Supports closing the modal and adding the item to the cart.
ItemDetailsModal.module.css	- Define the visual styling for the item details modal, including overlay, modal layout, close button, content structure, image display, specifications, and action buttons - Implement animations for modal appearance and user interactions - Ensure responsive design for various screen sizes.

MenuItem

MenuItem.module.css	- Define the styling for menu items, including layout, transitions, and responsiveness - The CSS in this file controls the visual presentation of menu items, ensuring a consistent and appealing design across various screen sizes.
MenuItem.jsx	- The MenuItem component renders a menu item with details like image, name, category, preparation time, and calories - It enables adding items to the cart and opening item details - This component enhances the user experience by providing a seamless way to interact with menu items and manage orders efficiently within the application.

MobileCart

MobileCart.module.css	- Define the mobile cart styling for a seamless user experience - Positioning, colors, animations, and layout are tailored to enhance the cart's visibility and functionality - The design ensures a cohesive and engaging shopping journey within the project's architecture.
MobileCart.jsx	- The MobileCart component renders a mobile-friendly shopping cart sidebar, displaying items, total price, and a checkout button - It manages cart visibility toggling and closure on outside clicks - It also prevents body scrolling when the cart is open.

MenuItemsList

MenuItemsList.module.css	- Define responsive grid layout for menu items with varying column sizes based on screen width - Includes styling for empty message display.
MenuItemsList.jsx	- Render a list of menu items, displaying a message if none are found - Allows users to adjust search or filters.

CartSidebar

CartSidebar.jsx	- The CartSidebar component renders the shopping cart sidebar, displaying items, total price, and a checkout button - It interacts with the cart, adding/removing items, calculating totals, and navigating to checkout - This component enhances the user experience by providing a clear overview of the shopping cart contents and facilitating seamless checkout flow.
CartSidebar.module.css	- Define the styling for the cart sidebar component, ensuring a visually appealing and user-friendly checkout experience - The CSS rules in this file control the layout, colors, and animations of the cart sidebar, enhancing the overall shopping process for users.

AllergenTags

AllergenTags.jsx	- The AllergenTags component renders a list of allergen tags that can be removed by clicking on them - It takes in a list of excluded allergens and a function to toggle the exclusion of an allergen - This component enhances user experience by allowing easy management of allergen filters within the application.
AllergenTags.module.css	- Define the styling for allergen tags display in the menu component, ensuring a clean and user-friendly interface - The CSS rules handle layout, responsiveness, and interactive hover effects for allergen tags and their associated icons.

AllergenFilter

AllergenFilter.jsx	- The AllergenFilter component renders a filter panel to exclude dishes with selected allergens - It allows users to toggle allergen filters, select allergens to exclude, clear filters, and apply changes - The component enhances the user experience by providing a customizable way to filter menu items based on allergens.
AllergenFilter.module.css	- Define the styling for the allergen filter overlay and panel, creating a visually appealing and user-friendly interface for filtering allergens in the application - The CSS rules ensure a smooth animation and responsive layout, enhancing the overall user experience.

CartItem

CartItem.jsx	- The CartItem component renders a cart item with its name, quantity, and total price - It enables users to increase or decrease the item quantity and interacts with functions to add or remove items from the cart - This component plays a crucial role in displaying and managing individual items within the shopping cart interface.
CartItem.module.css	Define the visual styling for cart items in the menu component, enhancing user experience by providing a structured and appealing layout.

CategoryFilter

CategoryFilter.jsx	- Enables rendering and selection of category buttons in the menu interface - Displays a list of categories for selection, highlighting the active category - Allows users to switch between categories seamlessly.
CategoryFilter.module.css	Define styling for category filter component to display and interact with filter buttons.

SearchBar

SearchBar.jsx	- Implements a SearchBar component for searching food, categories, or allergens - Includes functionality to set search terms, clear search, and toggle allergen filters - Displays the search input field, clear button, and filter toggle button with allergen count badge.
SearchBar.module.css	- Defines styles for a sticky search bar with search input, icon, and clear button - Includes responsive design for mobile view.

hooks

useViewport.js	Enables dynamic responsiveness by detecting viewport size changes, aiding in adaptive UI rendering.
useMenuState.js	- Manages menu state, filtering, and item details for the project - Fetches menu items, applies filters, handles modal interactions, and controls scrolling behavior - Provides functions for search, cart management, allergen handling, and mobile view - Maintains loading and error states.
useAllergens.js	- Manages allergen filtering functionality by providing methods to toggle allergens, clear filters, and format allergen names - Controls the visibility of the allergen filter panel within the project's menu module architecture.
useCart.js	- Manages shopping cart functionality by handling cart items, total prices, and mobile cart visibility - Allows adding/removing items, calculating totals, and toggling mobile cart view - Facilitates seamless navigation to the checkout page.

pages

Menu.js	- The Menu component renders the main menu page with search, filtering, and cart functionalities - It displays menu items, item details, and manages mobile and desktop cart views, enhancing the overall user experience of the application.
Menu.module.css	- Define styling for menu pages, layout, sections, loading, and error states - Ensure consistent design across different screen sizes for a visually appealing user experience.

home

sections

AboutUs

AboutUsSection.module.css	- Define the styling for the About Us section, ensuring a responsive layout for different screen sizes - The code sets the structure, alignment, and visual effects for the section, enhancing user experience and readability.
AboutUsSection.jsx	- Render the "About Us" section of the home page, showcasing the restaurant's description and image gallery - Emphasizing the restaurant's mission and dedication to crafting memorable dining experiences through carefully curated dishes and welcoming ambiance - The component integrates with the useAboutImages hook to display a gallery of images that complement the narrative.

Hero

HeroSection.jsx	- The HeroSection component renders the hero section of the home page, showcasing an image slider and a reservation call-to-action button - It enhances the user experience by providing a visually appealing introduction to the website and encouraging users to make reservations easily.
HeroSection.module.css	- Define the styling for the Hero section of the home module, ensuring a responsive and visually appealing layout - The code in this file sets the structure, design, and behavior of the main content container, image container, content elements, and buttons, enhancing the user experience on various screen sizes.

OpeningHours

OpeningHoursSection.jsx	- Displays the "Opening Hours" section on the home page, showcasing opening hours, contact phone number, and restaurant images - Utilizes hooks for fetching data and context for authentication - Renders formatted opening hours and phone number, handling loading and error states gracefully.
OpeningHoursSection.module.css	- Define the styling for the opening hours section of the home module, ensuring a responsive and visually appealing layout - The code in the provided file sets the structure, alignment, and design elements for displaying business hours and contact information on the website.

components

ImageSlider

ImageSlider.module.css	- Define styles for an image slider component with navigation buttons and indicators - Set responsive design for varying screen sizes.
ImageSlider.jsx	- Implements an ImageSlider component for displaying images with navigation controls - Uses React and custom hooks for functionality - Key features include transitioning effects, slide indicators, and navigation buttons for previous and next slides - Designed to enhance user experience by providing a visually engaging way to view a collection of images.

HomeFooter

HomeFooter.jsx	- Generates the HomeFooter component displaying contact info, quick links, and social icons on the home page footer - Integrates with AuthContext for config data and uses the current year for copyright - Designed to enhance user engagement and provide essential information in a visually appealing manner.
HomeFooter.module.css	Define color variables and styles for the footer section, ensuring a cohesive and visually appealing design across the project.

hooks

useRestaurantImages.js	- Manages restaurant ambiance images by providing URLs for display - The code file `useRestaurantImages.js` in the `home` module creates a custom hook to handle restaurant image data efficiently - It encapsulates image URLs and enhances performance by utilizing memoization.
useHomeImages.js	- Manages food images for the home hero section by providing a custom hook that returns an object containing URLs for five food images - The hook utilizes useMemo to optimize performance by memoizing the images array.
useAboutImages.js	- Manage image URLs for the About Us section in the project by utilizing a custom hook - The hook, useAboutImages, efficiently handles and provides the necessary image URLs for the About section, enhancing the user experience and visual appeal of the application.
useOpeningHours.js	Fetches and manages restaurant opening hours, providing state and loading/error info.

pages

Home.module.css	Define styling rules for the home page layout, ensuring responsiveness across various screen sizes.
Home.jsx	Renders the home page layout with hero, opening hours, about us sections, and footer components.

styles

CommonStyles.module.css	- Define consistent styling for section containers in the project, ensuring a uniform and visually appealing layout - The code in CommonStyles.module.css establishes the structure, alignment, and responsiveness of section containers, enhancing the overall user experience.
variables.module.css	Define global styling variables for consistent theming and design across the project.

config

FirebaseConfig.js	- Initialize Firebase configuration and set up authentication, analytics, and performance monitoring using Firebase services - Import necessary Firebase modules and configure API keys for authentication and analytics - Export authentication providers, analytics, and performance instances for use throughout the codebase architecture.
apiConfig.js	- Manages API requests by setting base URL and handling authentication tokens - Intercepts requests to include authorization headers and refreshes tokens on 401 errors - Facilitates seamless communication with the backend API.

constants

routes.js	Define application routes for navigation and authentication in the project.
cookieKeys.js	Defines cookie keys used for user authentication and configuration storage in the project.
tableTypes.js	- Define various types of tables with specific dimensions and chair configurations - Ensure backward compatibility for old table references within the codebase architecture.
drawingModes.js	Defines drawing modes for various architectural elements in the project.

routing

AppRoutes.js	- Defines main application routes using React Router, including home, checkout, profile, authentication, admin, and not found routes - Utilizes components for layout, navigation, and specific page content - Implements protected routes for admin access based on roles - Overall, orchestrates navigation flow within the application based on defined route constants.
ProtectedRoute.js	- Ensures route protection based on user roles by redirecting unauthorized users to the home page - The ProtectedRoute component validates user authentication and role permissions before rendering the route content - This component plays a crucial role in maintaining secure access control within the project's routing architecture.

services

restaurantConfig.service.js	- Manages restaurant configuration data, including phone numbers, emails, addresses, maps, and features - Enables retrieval, addition, updating, and deletion of these details through API calls - Facilitates seamless management of essential restaurant information within the system.
analytics.service.js	- Provides various analytics data fetching methods using Axios to interact with the API - The service retrieves dashboard summaries, revenue, menu item, reservation, order, and operational analytics - It also offers a method to fetch all analytics data in a single call, allowing for efficient data retrieval for different aspects of the application.
window.service.js	- Manages window data CRUD operations through API requests, enabling window creation, retrieval, updating, and deletion - Facilitates seamless interaction with the backend server for handling window-related tasks within the project architecture.
user.service.js	- Handles user-related operations like retrieving user details, fetching all users, getting privileged users, and changing user privileges - Utilizes Axios for API calls and manages user privileges in cookies - This service file encapsulates user management functionality, promoting a modular and organized codebase architecture.
table.service.js	- Manages table data by creating, retrieving, updating, deleting, activating, and deactivating tables through API calls - Handles table properties like seats, position, type, and status - Facilitates seamless interaction with the backend for table management operations within the project architecture.
reservation.service.js	- Manages reservation operations such as creation, cancellation, confirmation, completion, rescheduling, retrieval, and listing - Handles tasks like finding free tables, fetching all reservations, filtering by status, and accessing user-specific reservations - Integrates with the backend API to facilitate seamless reservation management within the system.
walls.service.js	- Manages wall data operations such as creation, retrieval, update, and deletion - Utilizes axios for API interactions - Facilitates seamless handling of wall-related tasks within the project's service layer.
door.service.js	- Manages CRUD operations for doors in the project, including creation, retrieval, updating, and deletion - Utilizes axios to interact with the API endpoints for handling door data - The service encapsulates the logic for door management, abstracting away the API communication details.
order.service.js	- Handles order-related API operations such as fetching, updating, canceling, and creating orders for users and employees - The service interacts with the backend API to retrieve order details, update order status, and manage order processing efficiently within the application.
auth.service.js	- Handles user authentication, registration, logout, token refresh, employee and owner creation/deletion, Google login, password reset, and account deletion - Manages user tokens securely using cookies and interacts with the backend API for user-related operations.
menuItem.service.js	- Handles menu item operations such as fetching, creating, updating, and deleting menu items - Utilizes Axios to interact with the API endpoints for menu items - Provides functions to retrieve all menu items, get specific menu items by ID, fetch menu item types and allergen options, create new menu items, update existing menu items, and delete menu items.
openingHours.service.js	- Manages CRUD operations for opening hours data, facilitating retrieval, addition, updating, and deletion of opening hours entries - Utilizes Axios to interact with the API, enabling seamless handling of opening hours information within the project's service layer.
floorPlan.service.js	Retrieves floor plan data by making a request to the server using axios.

public

index.html	Defines the structure and content of the project's main HTML file, setting up essential metadata, links, and fonts for the web application.
manifest.json	- Defines the manifest.json file in the public directory, specifying essential details for the React web application, such as the app's name, icons, start URL, display mode, theme color, and background color - This file plays a crucial role in configuring the app's appearance and behavior when added to the project structure.
robots.txt	- Define crawling permissions for search engines by configuring the robots.txt file in the public directory - This file specifies rules for web crawlers, allowing or disallowing access to specific parts of the website.

---

Getting Started

Prerequisites

Before getting started with RMS, ensure your runtime environment meets the following requirements:

• Programming Language: CSS
• Package Manager: Npm

Installation

Install RMS using one of the following methods:

Build from source:

1. Clone the RMS repository:

❯ git clone https://github.com/Unemployed-CS-Majors/RMS

2. Navigate to the project directory:

❯ cd RMS

3. Install the project dependencies:

Using npm  

npm install

Usage

Run RMS using the following command: Using npm  

npm start

---

Contributing

• 💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
• 🐛 Report Issues: Submit bugs found or log feature requests for the RMS project.
• 💡 Submit Pull Requests: Review open PRs, and submit your own PRs.

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your github account.
2. Clone Locally: Clone the forked repository to your local machine using a git client.

   git clone https://github.com/Unemployed-CS-Majors/RMS

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message describing your updates.

   git commit -m 'Implemented new feature x.'

6. Push to github: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Contributor Graph

---

License

This project is protected under the SELECT-A-LICENSE License. For more details, refer to the LICENSE file.

---

Acknowledgments

• List any resources, contributors, inspiration, etc. here.

---