Skip to content

Automated solution to record and report business expenses. It is a React-Redux based Expense Management Software.

Notifications You must be signed in to change notification settings

RishabhS66/Expense-Management-Software-React-App

Repository files navigation

Expense Management Software

Coded By: Rishabh Srivastava, Akash Yalla, Kanika Gupta

In these times of digitalization, all major organizations are aiming to automate most of their processes for better convenience. One important task for an organization involves the filing of expenses by employees for claiming reimbursements. These expenses also need to be approved / rejected by the appropriate authority.

A web application based on react-redux at the frontend and Java and PostgreSQL at the backend has been built to provide an automated solution to record and report business expenses.

This repository includes all the codes which the Expense Management System website uses.

UPDATE (28 Nov 2022):

The link is not accessible anymore as Heroku, where the project was hosted, has stopped its Free Product plans. I might find an alternative sometime in the future and would update the README accordingly.

Features

  • Login for employees (authentication with JWT Auth Token).
  • Add new employees when logged in as an Administrator.
  • Add new clients and projects.
  • Add new expenses with attachments.
  • View project and expense summaries.
  • Approval tab for approving / rejecting expense claims.
  • Feature to change password when the user wants.
  • The first time an employee logs in, they will have to set a strong password to access other features of the software. It is assumed that the Administrator is responsible for creating an initial password for a new employee to log in.
  • Protected routing - allows all pages, except the Login page, to be accessed only after a user has logged in.

Demonstration

Login Page

The Login button gets activated only when the fields for Email and Password are both filled, and the Email entered has the correct format.

Invalid credentials causes alert pop-ups to appear, as shown in the following image -


If Login is successful, the user will be directed to Home page.


Adding a New Employee

Steps to add a new employee -

  1. The Administrator has to be logged in. Only the user with Administrator role will be able to access Admin Options on the navigation bar.
  2. Click Admin Options -> Add Employee.

  1. Enter details about the employee.

  1. If all fields are valid, the Submit button gets activated. Click it to add a new employee.

Change Password

  1. Whenever a new employee registered by the Administrator logs in for the first time, they are redirected to Change Password page for setting a strong password to secure their account.

  2. Without setting a new password when logged in for the first time, the user will not be able to access any other functionality.

  3. Some validations are performed while setting a new password. For example, the New Password field must match the Confirm Password field, but must also be different from the Temporary or Old Password field.


  1. The Submit button gets activated only when these validation conditions are met.

  1. The user can also change their password whenever required. The Change Password page can be accessed as shown in the following image -

Clients Tab

  1. Clients can be added by any employee, irrespective of their role.

  1. The Client Dashboard is shown in the following image -

  1. Clients are common to the organization and will be visible to all employees in the organization.

Projects Tab

  1. Projects can be added by any employee registered in the organization.
  2. Each project will have 1 Project Manager mandatorily, and some other employees in the team. The employee who is adding the new project is automatically added as a team member.

  1. After a project has been added, you can view it in the dashboard. A project will only be visible in an employee's dashboard if they are a part of the project, or they have Administrator privileges.

  1. Detailed summary of the project can be viewed by choosing the View Summary option in the Options dropdown menu.

Expenses Tab

  1. All employees can file expenses.

  1. After filing the expense, it will be visible in the Expenses Dashboard. You can also view the invoice attached for the expense by clicking on View Attachment option in the Options dropdown.

  1. Details of the expense, including the invoice attached for the expense, can also be changed using the Edit Expense option.
  2. An employee can also delete filed expenses, if required, using the Delete option.

Approvals Tab

  1. Authority for approval / rejection of an expense is according to the defined hierarchy.
  • A normal employee cannot approve / reject any expense (first image).
  • A Project Manager can approve / reject the expenses filed by the project team members, except expenses that the Project Manager has filed by himself / herself (second image).
  • Adminstrator can approve / reject expenses filed by any of the employees (third image).

  1. The approver can click on View Details to view the detailed expense summary. The approver can also view the invoice for the filed expense by clicking on the Attachment icon.

  1. On approving / rejecting the expense claim, the action will be reflected in the claimant's Expenses Dashboard.

Employees Tab

  1. A list of all employees is displayed here. You can also see the roles of each employee.

Logging Out

User can log out by as shown in the following images -


User Profiles for Demo

You can use the following credentials to view a demonstration of the software -

  • Email: rishabh@gmail.com, Password: 1234, Role: Administrator
  • Email: jdoe@gmail.com, Password: @Expense123, Role: Project Manager
  • Email: jndoe@gmail.com, Password: @Expense123, Role: Software Development Engineer
  • Email: avi@gmail.com, Password: 1234, Role: Software Development Engineer (It is a new user logging in for the first time)

Notes

  1. The backend code for this project can be accessed at this repo.
  2. Both the frontend and backend components of the project have been hosted at Heroku.
  3. This project was bootstrapped with Create React App.

About

Automated solution to record and report business expenses. It is a React-Redux based Expense Management Software.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published