Facility Management System

The Facility Management System is a comprehensive management solution developed using the MERN (MongoDB, Express.js, React, Node.js) stack. It allows users to book time slots in facilities and provides role-based access control for various functionalities. This tool is a modified version of the one which was created as a project for DRDO Cabs during an internship. With four distinct roles, users can manage bookings, approvals, cancellations, and generate reports based on their permissions and responsibilities.

Table of Contents

• Screenshots
• Demo
• Features
• Technologies Used
• Packages Used
• Environment Variables
• Getting Started
• Folder Structure
• Running the Application
• Author
• Documentation

Screenshots

Login Page

Reset Password Page

User Dashboard

GD & FM Dashboard

Calendar View

Create New Booking

My Bookings Page

Approval Request Page of GD & FM

Cancellation Request Page of GD & FM

GD & FM Report Page

Admin Manage Facilities Page

Admin Manage Bookings Page

Demo

This project cannot be deployed as it requires a backend server to set cookie which is blocked by services offering hosting unless you are using a paid domain. However, you can follow the steps below to run the application on your local machine.

Features

• Role-based Access:

  • Users can be assigned one of four roles: User, Group Director (GD), Facility Manager (FM), or Admin, each with specific permissions and responsibilities.

• Booking Management:

  • Users can request bookings for time slots in facilities.
  • Bookings are then approved or rejected by designated approvers based on their role.

• Booking Status Tracking:

  • Users can track the status of their bookings, including pending, approved, and rejected statuses.
  • Timestamps of status changes are recorded for transparency and tracking.

• Cancellation Requests:

  • Users can initiate cancellation requests for their bookings.
  • Cancellation requests must be approved by designated approvers.

• Approval Workflow:

  • When a user initiates a booking, the status is set to pending.
  • The booking is forwarded to the appropriate approver (GD or FM) based on the user's group and facility.
  • The approver can then approve or reject the booking, providing a remark for the reason if rejected.
  • If approved, the booking status is updated accordingly.

• Cancellation Workflow:

  • Users can request cancellations for their bookings, specifying the reason for cancellation.
  • Cancellation requests must be approved by designated approvers (GD and FM) if the booking has been approved.
  • The approvers can accept or reject the cancellation request, providing remarks for the reason if rejected.
  • If approved, the booking status is updated to canceled, and the time slot becomes available for booking again.

• Admin Powers: Admins have additional powers, including:

  • Creating, editing, and deleting facilities.
  • Reassigning FM (Facility Manager) roles for facilities.
  • Approving or canceling bookings directly.
  • Generating reports in PDF format for facilities and bookings.

• Report Generation:

  • GDs, FMs, and Admins can generate reports in PDF format based on various criteria such as month, year, facility, or user group.

• UI Navigation:

  • Navigation options are tailored based on the user's role.
  • Users have easy access to relevant features and functionalities based on their permissions.

• Single Sign-Out(only in dev branch):

  • Integration with a Java Spring Boot project enables seamless single sign-out functionality across both the Java and Node.js servers.

• Authentication:

  • Users can authenticate using their employee ID and password for secure access to the system.

Technologies Used

Frontend

• React: JavaScript library for building user interfaces.
• FullCalendar: JavaScript event calendar for displaying bookings.
• Material-UI: React UI components for modern web applications.
• React Router DOM: Declarative routing for React applications.
• Tailwind CSS: Utility-first CSS framework for styling.
• React Query: Data fetching and caching library for React applications.

Backend

• Node.js: JavaScript runtime environment for server-side development.
• Express.js: Web application framework for Node.js.
• PostgresSQL: SQL database for data storage.
• Prisma: ORM for database management.

Packages Used

Client-side

• @emotion/react: Library for CSS-in-JS styling.
• @mui/icons-material, @mui/material: Material-UI components for UI design.
• @fullcalendar/react: React wrapper for FullCalendar.
• tailwindcss: Utility-first CSS framework for styling.
• axios: Promise-based HTTP client for the browser and Node.js.
• dayjs: Library for date and time formatting.
• react-to-pdf: Library for generating PDF documents from React components.
• react-query: Data fetching and caching library for React applications.

Server-side

• @prisma/client: Prisma client for database access.
• argon2: Library for password hashing.
• express: Web application framework for Node.js.
• express-session: Session middleware for Express.
• winston: Logging library for Node.js.

Environment Variables

The project relies on environment variables stored in a .env. file located at the root of the client directory and server directory to manage configurations. Ensure that essential variables such as database connection strings, API keys, or any other sensitive information are properly set up.

Client-side Environment Variables

Create a .env file in the client directory and add the following variable:

VITE_APP_SERVER_URL="http://localhost:3000"

Server-side Environment Variables

Create a .env file in the server directory and add the following variables:

DATABASE_URL="*YOUR POSTGRES DATABASE URL*"
SESSION_SECRET="*ANY SECRET*"
CLIENT_URL="http://localhost:5173"

Be sure to replace *YOUR POSTGRES DATABASE URL* with your actual postgress database url containing data and *ANY SECRET* with secret generated from secret generator to enable proper integration.

Note: Environment variables containing sensitive information like API keys, database credentials, or any other secrets should not be committed to version control. Ensure that the .env files are included in your project's .gitignore file to prevent accidental exposure of sensitive data.

Getting Started

1. Clone this repository

to your local machine:

git clone https://github.com/Shivam-Sharma-1/Facility-Management-System.git

2. Change to the project directory:

cd facility-management-system

3. Install client dependencies and start the client:

cd client
npm install
npm run dev

4. In another terminal tab install server dependencies and start the server:

cd server
npm install
npx prisma generate
npm run watch
npm run devT ##in separate terminal

Folder Structure

The project structure is organized as follows:

facility-management-system/
├── client/               # Client-side codebase (React)
│   ├── .env              # Environment variables (not committed to version control)
│   ├── constants/        # Constants or configurations
│   ├── package.json      # Client-side dependencies and scripts
│   ├── public/           # Public assets
│   └── src/               # Source code
│       ├── components/   # React components
│       ├── hooks/        # Custom hooks
│       ├── pages/        # Different pages for the dashboard
│       ├── reports/      # API service functions
│       ├── types.d.ts    # Type definitions
│       └── utils/        # Utility functions
│
└── server/                # Server-side codebase (Node.js, Express)
    ├── .env               # Environment variables (not committed to version control)
    ├── logs/              # Logs
    ├── package.json       # Server-side dependencies and scripts
    ├── prisma/            # Database models (Mongoose)
    └── src/               # Source code
        ├── controllers/   # Route controllers
        ├── db/            # Database connection and setup
        ├── middleware/    # Middleware functions
        ├── routes/        # API routes
        ├── types/         # Type definitions
        └── utils/         # Utility functions

Running the Application

• Start the client: npm run dev within the client directory.
• Start the server: npm run devT within the server directory.

The client-side application will run on http://localhost:3000, and the server-side application will run on http://localhost:5173.

Credentials to Access the Application

Role	EmployeeID	Password
User	446210	password
Group Director (GD)	635110	password
Facility Manager (FM)	395003	password

Author

• @Shivam-Sharma-1 [Frontend]
• @Vector-ops [Backend]

Documentation

• React Documentation: Learn more about React for building user interfaces.
• FullCalendar Documentation: Explore FullCalendar documentation for JavaScript event calendar functionality.
• Material-UI Documentation: Dive into Material-UI documentation for React UI components.
• React Router DOM Documentation: Learn about React Router DOM for declarative routing in React applications.
• Tailwind CSS Documentation: Explore Tailwind CSS documentation for utility-first CSS framework for styling.
• React Query Documentation: Discover Tanstack React Query documentation for data fetching and caching in React applications.
• Node.js Documentation: Explore Node.js documentation for server-side JavaScript runtime environment.
• Express.js Documentation: Discover Express.js documentation for web application framework in Node.js.
• PostgreSQL Documentation: Learn more about PostgreSQL for relational database management.
• Prisma Documentation: Dive into Prisma documentation for ORM and database management.

---