Expense Reimbursement System - SpringBootVersion

Refactoring of Project 1 using hibernate and servlet into SpringBoot and Angular Framework

Project Summary

The Expense Reimbursement System (ERS) will manage the process of reimbursing employees for expenses incurred while on company time. All employees in the company can login and submit requests for reimbursement and view their past tickets and pending requests. Finance managers can log in and view all reimbursement requests and past history for all employees in the company. Finance managers are authorized to approve and deny requests for expense reimbursement.

Flow Diagram

Case Diagram

Technologies Involved

• Spring Boot
• Angular

Project Goal

• To perform the required technologies and skills as a Java Full Stack
• To build an SPA (Single Page Application) from scratch.
• To deploy the running app on a server and viewable online.

Possible servelets endpoints:

USERS

• @PostMapping(“user”) -> createUser
• @GetMapping(“user”) -> getAllUser
• @GetMapping(“user/id/{id}”) -> getUserById
• @GetMapping(“user/username/{username}”) -> getUserByUsername
• @GetMapping(“user/email/{email}”) -> getUserByEmail
• @PatchMapping(“user”) -> editUser
• @GetMapping(“check-session”) -> checkSession
• @PostMapping(“login”) -> login
• @GetMapping(“logout”) -> logout
• @GetMapping(“forgot-password/{email}”) -> forgotPassword

REIMBURSEMENT

• @GetMapping(“reimbursement”) -> getAllReimbursement
• @PostMapping(“reimbursement”) -> createReimbursement
• @PatchMapping(“reimbursement”) -> editReimbursement
• @DeleteMapping(“reimbursement/{reimId}”) -> deleteReimbursement
• @GetMapping(“reimbursement/{reimbId}”) -> getReimbursementById
• @GetMapping(“reimbursement/userId/{userId}”) -> getAllOwnReimbursement
• @GetMapping(“reimbursement/status/{statusId}”) -> getAllReimbursementByStatus
• @GetMapping(“reimbursement/type/{type}”) -> getAllReimbursementByType
• @GetMapping(“reimbursement/resolved”) -> getAllReimbursementByResolver

Features Added (BACK-END)

Basic Features

• Register as a new user
• Login as an existing user
• Edit Firstname and Lastname
• Forgot password then reset automatically through password generator
• Reset the password
• Checked for current login session
• Able to logout from the current session

Additional Features

• Added Mockito with JUnit testing
• Added functionalities for email service
• Added password hashing using BCrypt
• Created password generator
• Added logging features using Log4j

Features Added (FRONT-END)

Basic Features

• Created Login UI
• Able to create and display the main dashboard UI after login
• Populate the table containing the owned reimbursement for employee

• Populate the account information details of the employee

Additional Features

• Make it a single-page application composes of multiple components

TODOs to be done

• Auto-repopulate the table without reloading or refresh the page
• Add the JWT functionality
• Upload attachment via S3
• Implement JWT and session storage
• Fixed the refresh when new reimbursment added to the table.
• Reflect the changes to the profile display once edited.
• Add sort button in the column header
• Add remarks field to be updated by manager upon process
• Add paging on the row count limit to be displayed on the table
• Add sorting on table data

Application Snippet

Login Form Page

Employee Dashboard Page

Finance Manager Dashboard Page

Creating/Viewing/Editing/Processing Reimbursement Form

Change Password Component

Register new user employee

Search existing user employee

How to clone and get it to work in local machine.

• Clone the project from github.

  • git clone https://github.com/roeldcrodua/ExpenseReimbursementSystem_SpringBootVersion.git
• Open the server application using anycode editor ( ex. Intellij, Eclipse). Run the application as well via the Main method
  • (SpringApplication.run(ErsApplication.class, args)).

• Make sure there is no error encountered in the console log.

• On the other hand, open the front-end server application using Visual Studio Code.

• Install @angular/cli or update if you have installed it already.

  • ng install @angular/cli @angular/core
  • ng update @angular/cli @angular/core

• Install npm into the application.

  • npm install

• Once installed, run ng build to build and compile the front end application

• If error occured due to jwt_decode issue, execute the following.

  • npm install –save jwt-decode
  • npm install –save @types/jwt-decode

• Run again ng build.

• If no errors, run the ng serve command to open a browser for the front-end application.

• Once the application is compiled, open the browser thru the localhost address.

  • http://localhost:4200/

• Since this is the first time running the application so there is no user existed. Open a Postman to easily manually add a manager user account. The manager can only add employee user account.

  • example: http://localhost:9000/ers/api/user POST method raw values: JSON { “userName” : “manager”, “password” : “manager”, “firstName” : “Manager”, “lastName”: “ERS-Manager”, “email”: “your_email@mail.com”, “role”: “MANAGER”, “picUrl”: “” }
• Once the manager account got created, then try registering an employee user then change the password into a new password. Resetting password can be done and found the new password via the log console of the backend-server from Intellij.