EMPLOYEE CLAIMING PORTAL

Project report submitted

in partial fulfillment of the requirement for award of the degree of

Bachelor of Technology
in
Computer Science & Engineering

By

E.SRUTHI (22UESS0015)
M.THRISSAPTHA REDDY (22UESS0030)
T.JAGADESHWAR REDDY (22UESS0057)

10211CC212 - WEB AND MOBILE APPLICATION DEVELOPMENT

SUMMER 2024-2025

Under the guidance of

Dr.P.Ramesh,
Assistant Professor- Sr Gr

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

SCHOOL OF COMPUTING

VEL TECH RANGARAJAN DR. SAGUNTHALA R&D INSTITUTE OF

SCIENCE AND TECHNOLOGY

(Deemed to be University Estd u/s 3 of UGC Act, 1956)

Accredited by NAAC with A++ Grade
CHENNAI 600 062, TAMILNADU, INDIA
October,2024
 CERTIFICATE
It is certified that the work contained in the project report titled ”EMPLOYEE CLAIMING PORTAL”
by ” E.SRUTHI (22UESS0015), M.THRISSAPTHA REDDY (22UESS0030), T.JAGADESHWAR
REDDY (22UESS0057)” has been carried out under my supervision and that this work has not been
submitted elsewhere for a degree.

Signature of Supervisor
Dr.P.Ramesh
Assistant Professor- Sr Gr
Computer Science &Engineering
School of Computing
Vel Tech Rangarajan Dr.Sagunthala R&D
Institute of Science &Technology
October, 2024

Signature of Head of the Department Signature of Dean

Computer Science & Engineering Prof. Dr. S P. Chokkalingam
School of Computing School of Computing
Vel Tech Rangarajan Dr. Sagunthala R&D Vel Tech Rangarajan Dr. Sagunthala R&D
Institute of Science & Technology Institute of Science & Technology
October, 2024 October, 2024

i
 DECLARATION

We declare that this written submission represents my ideas in our own words and where others’
ideas or words have been included, we have adequately cited and referenced the original sources. We
also declare that we have adhered to all principles of academic honesty and integrity and have not
misrepresented or fabricated or falsified any idea/data/fact/source in our submission. We understand
that any violation of the above will be cause for disciplinary action by the Institute and can also
evoke penal action from the sources which have thus not been properly cited or from whom proper
permission has not been taken when needed.

(Signature)
E.SRUTHI
Date: / /

(Signature)
M.THRISSAPTHA REDDY
Date: / /

(Signature)
T.JAGADESHWAR REDDY
Date: / /

ii
 APPROVAL SHEET

This project report entitled EMPLOYEE CLAIMING PORTAL by E.SRUTHI (22UESS0015),

M.THRISSAPTHA REDDY (22UESS0030),T.JAGADESHWAR REDDY (22UESS0057) is approved
for the degree of B.Tech in Computer Science & Engineering.

Examiners Handling faculty

Dr.P.Ramesh,
Assistant Professor- Sr Gr,

Date: / /
Place:

iii
 ABSTRACT

Our aim for this project is to create a web-based solution to streamline and automate the process
of employee claiming submissions, approvals and the management of their needs. it offers a user
friendly interface where employees can submit claims for the reimbursement, track the status of their
request, approving and processing claims with greater efficiency. This page ensures for secure user
authentication , real time status update and the detail report for administrators to monitor and mange
claims.It is special developed to reduce the time taken for the Human Resource Manager(HR) to
process the claims and the number of paper work that is need to claim for a purpose. It has all the
specification of the types of claims that a employee can claim and the limits for the employees ac-
cording to there designations which will further help for easier processing. Using these features of
our web page, most of the employee problems regarding claiming issues are solved.

Keywords: Claiming, Employee, Human resource manager(HR), Reimbursement, Administra-

tor, Authentication

iv
 LIST OF FIGURES

3.1 Architecture Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.2 Data Flow Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.3 Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.4 Login Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.5 Signup Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.6 Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.7 Jquery and DOM Traversing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.8 NodeJs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.9 Running Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.10 Employee Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.11 Angular Reactive form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.12 Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.13 Server Port . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.14 Port Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.15 Containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

5.1 Test Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

8.1 Source code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

9.1 Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

9.2 Login Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
9.3 Signup Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
9.4 Claim Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

v
 LIST OF TABLES

2.1 Hardware Specifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

4.1 Test Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

vi
 LIST OF ACRONYMS AND
ABBREVIATIONS

AJAX Asynchronous JavaScript and XML

CSS Cascading Style Sheets

DOM Document Object Model

HTML HyperText Markup Language

JQUERY JavaScript Query

JS JavaScript

JSON JavaScript Object Notation

MySQL My Structured Query Language (Relational Database Management System)

PHP Hypertext Preprocessor

XAMPP Cross-Platform (X), Apache (A), MySQL (M), PHP (P), Perl (P)

vii
 TABLE OF CONTENTS

Page.No

ABSTRACT iv

LIST OF FIGURES v

LIST OF TABLES vi

LIST OF ACRONYMS AND ABBREVIATIONS vii

1 INTRODUCTION 1
1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Aim of the project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Project Domain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.4 Scope of the Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.5 Methodology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 REQUIREMENT SPECIFICATION 4
2.1 User characteristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2 Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 Hardware specification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Software specification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3 WEBSITE DESIGN 7
3.1 Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.2 Design Phase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2.1 Data Flow Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.3 Front End and Back End Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.3.1 Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.3.2 Signup and Login page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3.3 Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.3.4 Parse the webpage using Jquery and DOM . . . . . . . . . . . . . . . . . . 13
3.3.5 Creation of Webserver using Node Js . . . . . . . . . . . . . . . . . . . . . 14
3.3.6 Design of Three Tier application using Node js and MySQL . . . . . . . . . 14
 3.3.7 Design of Reactive form for User Registration using Angular . . . . . . . . 16
3.3.8 Develop web application to implement routing and navigation in Angular . . 17
3.3.9 Creation of Microservices . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.3.10 Deployment of Microservices . . . . . . . . . . . . . . . . . . . . . . . . . 18

4 TESTING 19
4.1 Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.1.1 Test Result . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.1.2 Test Bugs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

5 WEBSITE LAUNCH AND HOSTINGS 22

6 RESULTS AND DISCUSSIONS 23

6.1 Website performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
6.2 Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
6.3 Responsiveness and mobile-friendliness . . . . . . . . . . . . . . . . . . . . . . . . 24

7 CONCLUSION AND FUTURE ENHANCEMENTS 25

7.1 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
7.2 Future Enhancements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

8 SOURCE CODE 27

9 SCREENSHOTS 28

References 29
 Chapter 1

INTRODUCTION

1.1 Introduction

The Employee Claiming Management System (ECMS) is a web-based platform designed to

simplify and automate the process of managing employee claims within an organization. Tradition-
ally, employees had to fill out manual forms and wait for long approval processes, which often led to
inefficiencies, delays, and errors. This project aims to provide a solution that enables employees to
submit their claims online and track their status, while administrators can review, approve, or reject
claims in a streamlined manner. User that is the employee is provide with there login credential’s
where they have to sign up if the employee is the first time user. The login page will divert the em-
ployee to a form, in order to claim their expenses. By digitizing this workflow, the system increases
transparency, efficiency, and accuracy, benefiting both employees and the management. Using this
page will reduce the work for both the employee and the organisation.

1.2 Aim of the project

The primary aim of this project is to design and implement an efficient Employee Claiming
Management System that:

• Automates the submission, approval, and processing of employee claims.

• Provides a user-friendly interface for both employees and administrators.

• Reduces paperwork, manual errors, and approval delays.

• Enhances the transparency and accuracy of the claims process.

• Generates reports and logs for management and auditing purposes.

1.3 Project Domain

The project falls under the domain of web-based enterprise resource management systems, fo-
cusing specifically on HR and financial process automation. It integrates multiple technologies, in-

1
cluding web development languages such as HTML, CSS, PHP, Nodejs, Angular js and MySQL for
backend data handling, providing a robust solution for managing employee-related claims and reim-
bursements.

1.4 Scope of the Project

The Employee Claiming Management System covers the following key functionalities:

• Employee Management: Secure login and registration system for employees to access the plat-
form and submit claims.

• Claim Submission: A simple form-based interface for submitting claims with document uploads
(e.g., receipts).

• Claim Processing: Role-based access for administrators to review, approve, or reject claims and
provide feedback to employees.

• Notification System: Automated email or system notifications to keep employees updated about
the status of their claims.

• Database Management: Use of MySQL to store employee data, claims, approval statuses, and
other relevant information.

• Reports and Analytics: Tools to generate reports on claim submissions, approvals, rejections,
and pending claims for managerial review.

1.5 Methodology

The development of the Employee Claiming Management System follows the Agile develop-
ment methodology, with the project broken down into iterative sprints for continuous development
and improvement. The system is developed using:

• Front-End Development: HTML5, CSS3, and JavaScript to design the user interface and ensure
responsiveness.

• Back-End Development: Nodejs and angularjs is used for server-side logic to handle claim
submissions, approvals, and interactions with the database.

• Database: MySQL is utilized to store and manage all employee and claim-related data.

2
• Testing: The system undergoes unit testing, integration testing, and user acceptance testing to
ensure that it meets performance, security, and usability requirements.

• Deployment: The platform will be deployed using XAMPP for local development and testing,
with the possibility of future deployment to a live server.

3
 Chapter 2

REQUIREMENT SPECIFICATION

2.1 User characteristics

The Employee Claiming Management System (ECMS) is designed to cater to different types of
users within an organization. The user base can be broadly divided into two categories:
Employees:

• Employees are the primary users who will submit claims for reimbursements (e.g., travel, medi-
cal, or other expenses).

• Basic technical proficiency is expected (e.g., the ability to use a web browser and fill out forms).

• They will need access to the system via a secure login and will be able to track the status of their
claims in real-time.

• Employees should be familiar with the types of claims they are allowed to submit based on the
organization’s policies.

Administrators/Managers:

• Administrators are responsible for reviewing, approving, or rejecting claims submitted by em-
ployees.

• They need a good understanding of company policies related to expense claims and reimburse-
ments.

• They should be proficient with web-based tools and systems, as they will manage the flow of
claims and ensure accurate and timely processing.

• Admins will also have access to reporting tools and logs to monitor overall claim activity.

2.2 Dependencies

The Employee Claiming Management System has certain dependencies that must be met to
ensure smooth functionality:

4
 • Network Dependency:A stable internet connection is required for the employees and administra-
tors to access the system from different locations.

• Third-Party Services:Email services (e.g., SMTP server) will be needed to send notifications
about claim statuses and approvals.

• Database Dependency:A MySQL database is required for storing and retrieving employee data,
claims information, and other relevant data.

• Hosting Platform:For a live environment, a server with PHP and MySQL support will be re-
quired to host the website and database.

2.3 Hardware specification

Table 2.1: Hardware Specifications

Components Specification

Processor Intel i3 or equivalent

RAM 4GB / 8GB

Storage 100GB HDD or SSD

Operating System Windows / Linux Server

2.4 Software specification

The software stack for the Employee Claiming Management System includes the following technolo-
gies:
Front-End:

• HTML5: Used for creating the structure and content of the web pages.

• CSS3: Used for styling the web pages to ensure responsive design and better user experience.

• JavaScript: Adds interactivity to the web pages (e.g., form validations, dynamic updates).

• Bootstrap: For responsive design, ensuring that the system is accessible on various screen sizes
(desktops, tablets, and mobiles).

Back-End:

5
• PHP: Server-side scripting language for processing claim submissions, user login, and interac-
tion with the database.

• MySQL: Relational Database Management System (RDBMS) to store data such as employee
details, claims, approvals, etc.

Development Environment:

• XAMPP: For local development (includes Apache server, MySQL database, and PHP inter-
preter).

• IDE/Code Editor: Any standard IDE such as Visual Studio Code, Sublime Text, or PHPStorm
for coding.

6
 Chapter 3

WEBSITE DESIGN

3.1 Sitemap

Figure 3.1: Architecture Diagram

The Employee Claiming Management System (ECMS) site map provides an organized structure of
the website’s pages and features, illustrating how users can navigate through the system. This Dia-
gram consists of user login where the user cam see all the claims, Claim admin login for the admins
and adding new claim types, Database admin Login where all the posted claims are seen and the
employee profiles can be viewed. Lastly it also contains the Financial admin Login where the update
of payments for the claims are shown. The site map consists of several main sections that cater to the
needs of employees and administrators giving the overview of the website.

7
3.2 Design Phase

3.2.1 Data Flow Diagram

Figure 3.2: Data Flow Diagram

The Data Flow Diagram (DFD) for the Employee Claiming Management System illustrates the flow
of information between users, the web interface, and the system’s backend. Employees submit claim
requests via the front-end web application, which are processed through validation mechanisms.
These requests are then transmitted to the server for storage in the MySQL database. The system
administrator accesses the data, reviews, and approves or rejects claims, with decisions sent back
to the user interface. The DFD highlights key processes like user authentication, form validation,
data storage, and communication between components using technologies such as PHP, Node.js, and
MySQL.

8
3.3 Front End and Back End Design

3.3.1 Home Page

Figure 3.3: Home Page

The Home Page serves as the entry point to the Employee Claiming Management System
(ECMS). It is designed to provide a welcoming and informative experience for users. Key features
include:

• Introduction: A brief overview of the ECMS, highlighting its purpose and benefits for employees
and administrators.

• Navigation Menu: Easy access to other sections of the site, including the User Dashboard, About
Us, Help/FAQ, and Contact Us pages.

• Login and Signup Buttons: Prominent buttons for users to either log in or register for an account,
facilitating quick access to the system.

• User Testimonials: Optional section showcasing user feedback to build trust and credibility.

• Visual Design: The page features a modern and responsive design, ensuring accessibility across
various devices and screen sizes.

9
3.3.2 Signup and Login page

Figure 3.4: Login Page

Login Form: Fields for users to enter their credentials (username/email and password) with a
”Remember Me” option and a ”Forgot Password?” link for account recovery.The login form
page of the Employee Claiming Management System allows registered users to securely access
their accounts. It includes fields for entering a username or email and password, with built-in
validation for correct input. Upon submission, the form sends the credentials to the server for
authentication, ensuring secure access to the system.

10
 Figure 3.5: Signup Page

• Signup Form: A registration form that collects essential information such as name, email, pass-
word, and role (employee or admin). It includes input validation to ensure data accuracy.

• User Feedback: Real-time feedback messages for successful login or signup, as well as error
messages for incorrect credentials or validation issues.

The Signup Form page allows new users to create an account by entering personal details such as their
name, email, password, and contact information. The form includes validation checks to ensure data
accuracy and password strength. Once submitted, the data is securely stored in the MySQL database,
enabling users to log in to the system.

11
3.3.3 Form Validation

Figure 3.6: Form Validation

Form Validation ensures that user inputs are correct and secure before submission. Key compo-
nents include:

• Client-Side Validation: Utilizing JavaScript to check for required fields, valid email formats, and
password strength. This provides immediate feedback to users.

• Server-Side Validation: Implementing validation checks in Node.js to verify data integrity before
processing and storing in the database. This is essential for security and reliability.

12
3.3.4 Parse the webpage using Jquery and DOM

Figure 3.7: Jquery and DOM Traversing

The project employs jQuery and DOM manipulation to enhance user interactivity and improve
the overall user experience:

• Dynamic Content Updates: jQuery is used to update parts of the webpage without requiring a
full page reload, such as loading recent claims or notifications dynamically.

• Event Handling: Implementing event listeners for user actions (e.g., form submissions, button
clicks) to provide instant feedback and interactions.

• Data Parsing: Extracting data from forms or APIs and displaying it on the webpage in real-time,
improving the usability of the system.

13
3.3.5 Creation of Webserver using Node Js

Figure 3.8: NodeJs

The webserver is created using Node.js to handle HTTP requests and serve the ECMS applica-
tion:

• Express Framework: Utilizes Express.js for routing and middleware support, making it easier to
define endpoints for login, signup, and claim submissions.

• RESTful API: Implements RESTful practices for creating endpoints that respond to client re-
quests, facilitating interaction between the front-end and back-end.

• Error Handling: Includes mechanisms for handling errors and providing informative responses
to the client.

3.3.6 Design of Three Tier application using Node js and MySQL

Figure 3.9: Running Node.js

14
 Figure 3.10: Employee Database

The project follows a three-tier architecture to separate concerns and improve maintainability:

• Presentation Layer: The front end built with Angular, providing a responsive user interface for
employees and administrators.

• Application Layer: The back-end service using Node.js, which processes requests, performs
business logic, and interacts with the database.

• Data Layer: The MySQL database for storing employee data, claims, and other related informa-
tion. This layer manages data access and integrity.

15
3.3.7 Design of Reactive form for User Registration using Angular

Figure 3.11: Angular Reactive form

The user registration process uses Angular Reactive Forms to enhance validation and user expe-
rience:

• Dynamic Form Controls: Form controls are created dynamically based on user input, allowing
for better validation handling and real-time updates.

• Validation Logic: Built-in validators and custom validators ensure that data entered by users
meets the required standards before submission.

• User Feedback: Immediate feedback is provided to users about the validity of their inputs
through visual cues and messages.

16
3.3.8 Develop web application to implement routing and navigation in Angular

Figure 3.12: Home Page

The application implements routing and navigation to ensure seamless transitions between dif-
ferent views:

• Angular Router: Configures routes to various components such as login, signup, dashboard, and
claim submission pages.

• Route Guards: Implements route guards to protect certain routes, ensuring that only authenti-
cated users can access specific parts of the application.

• Navigation Links: Provides a navigation menu to easily switch between different sections of the
app, enhancing the overall user experience.

3.3.9 Creation of Microservices

The project may utilize a microservices architecture to improve scalability and maintainability:

Figure 3.13: Server Port

• Service Separation: Each microservice handles a specific functionality, such as user manage-
ment, claims processing, or notification services, allowing independent deployment and scaling.

17
 • API Communication: Microservices communicate through APIs, enabling them to work to-
gether while remaining loosely coupled.

• Technology Diversity: Each microservice can use different technologies based on requirements,
improving flexibility in development and deployment.

3.3.10 Deployment of Microservices

Figure 3.14: Port Numbers

• Containerization: Utilizing Docker to containerize each microservice, providing a consistent

environment across development, testing, and production.

Figure 3.15: Containers

The deployment of microservices involves several considerations to ensure reliable operation:

• Orchestration: Implementing orchestration tools like Kubernetes to manage container deploy-

ment, scaling, and networking, ensuring high availability.

• Continuous Integration/Continuous Deployment (CI/CD): Setting up CI/CD pipelines to auto-

mate the testing and deployment of microservices, enabling quick updates and rollbacks.

18
 Chapter 4

TESTING

4.1 Testing

Objective: Ensure that individual components and microservices function correctly.

a. Backend (Node.js Microservices) Testing:

• Tools: Mocha, Chai, Jest, or Supertest for API testing.

• Description: Each microservice (User Service, Claims Service) will be tested independently by
mocking external services and testing the internal logic.

• Example Unit Tests:

1. User Service: Test registration logic, input validation, and response handling.Test the user reg-
istration API to ensure it properly stores user data in the database.Test password encryption,
validation of email format, and error messages.

2. Claims Service: Test claim submission, amount validation, and database insertion.Test if the
claim is submitted correctly and stored in the database.Validate that claims with a negative or
zero amount are rejected.

b. Frontend (Angular) Testing:

• Tools: Jasmine, Karma for Angular.

• Description: Test Angular components, services, and forms independently. Mock HTTP calls
using HttpClientTestingModule and ensure that the component’s functionality is working as
expected.

• Example Unit Tests:

1. Form Validation: Ensure that the user registration and claim submission forms handle input
validation correctly. Test that required fields are validated and display errors when not filled.
Ensure numeric fields such as Claim Amount only allow positive numbers.

19
 2. Services: Test Angular services to ensure proper interaction with APIs (using HttpTestingCon-
troller to mock HTTP requests).

4.1.1 Test Result

Table 4.1: Test Results

Test ID Component Test Case Expected Output (Y/N)

T001 User Login Valid Login Y

T002 User Login Invalid Login N

T005 Claim Submission Valid Claim Submission Y

T006 Claim Submission Missing Data in Claim Submission N

T009 Money Retrieval Valid Money Retrieval Y

T010 Money Retrieval Invalid Claim ID N

T013 Review Submission Valid Review Submission Y

T014 Review Submission Invalid Review Submission N

T017 Mobile Responsiveness Claim Submission Form on Mobile Y

T018 Mobile Responsiveness Review Form on Mobile Y

4.1.2 Test Bugs

1. User Login Bugs

Incorrect handling of invalid login attempts, such as incorrect passwords or non-existent

user accounts.Users may not receive appropriate error messages or feedback when login fails.Ensure
proper validation on both the client and server sides, and return meaningful error messages.Logged-in
sessions not persisting correctly, causing users to be logged out unexpectedly.User frustration due to
continuous re-login requirements.Correct session handling and ensure cookies or tokens are properly
managed.

2. Claim Submission Bugs

Missing or incomplete form validation for claim submission fields, such as claim type, amount,

20
or description.The user could submit incomplete or incorrect data.Implement validation for all re-
quired fields before submitting the form, both client-side and server-side. Incorrect data types for
amount fields (e.g., strings instead of numbers).Claims may be stored incorrectly or result in database
errors.Ensure proper type checking and input sanitization

3. Money Retrieval Bugs

Attempting to retrieve money with an invalid claim ID doesn’t trigger an error, or it leads to a
crash.Potential security risks and user confusion.Validate the claim ID before processing and provide
appropriate error messages if it is invalid.Incorrect amounts displayed or retrieved for certain claims
due to calculation or data retrieval errors.Financial discrepancies and potential user distrust.Verify
data retrieval logic from the database and ensure accuracy in calculations.

4. Review Submission Bugs

Users are able to submit reviews with missing information (e.g., missing text or ratings).Incomplete
or meaningless reviews might be submitted.Implement proper form validation to require all necessary
fields before submission.Users are able to submit the same review multiple times by accidentally
pressing the submit button more than once.Unnecessary data duplication and potential skewing of re-
view data.Disable the submit button after the first click, or implement server-side checks for duplicate
submissions.

5. Mobile Responsiveness Bugs

The claim submission and review forms may not be fully responsive, resulting in elements
overlapping or not fitting within the viewport on mobile devices.Poor user experience on mobile
devices.Implement responsive design techniques, such as using media queries and Bootstrap’s grid
system to ensure proper layout on all devices.Buttons or input fields may not respond well to touch
interactions on mobile devices.User frustration when interacting with the form on mobile. Test and
optimize touch interactions, ensuring that all elements are easily tappable and responsive.

21
 Chapter 5

WEBSITE LAUNCH AND HOSTINGS

Figure 5.1: Test Image

The test image of the website represents a visual confirmation of the layout and functionality, ensuring
that design elements like buttons, text fields, and forms render correctly across devices. It checks for
responsiveness, layout consistency, and proper alignment. The image also verifies that all interactive
elements, such as links and forms, are functioning as expected.

22
 Chapter 6

RESULTS AND DISCUSSIONS

6.1 Website performance

The performance of the website in this project is optimized to handle multiple user interactions,
including claim submissions, data retrieval, and responsive design across devices. Built using Angu-
lar for the frontend and Node.js with a MySQL database for the backend, the web application ensures
fast data processing and seamless communication between the client and server. Leveraging microser-
vices architecture, it enables scalability and modularity, ensuring that various features like user login,
claim uploads, and reviews run independently without affecting overall performance. However, net-
work latency, unoptimized database queries, or large file uploads could impact load times.

6.2 Security

The security performance of this project focuses on safeguarding sensitive data, such as user cre-
dentials, claims information, and financial records. Key measures include enforcing strong authen-
tication protocols, securing database connections, implementing HTTPS to ensure encrypted data
transmission, and using input validation to prevent common vulnerabilities like SQL injection and
cross-site scripting (XSS). Additionally, role-based access controls ensure that only authorized users
can perform certain actions, like viewing claims or submitting requests. Regular security audits and
monitoring will help maintain a secure environment by identifying and addressing potential threats
promptly.

• HTTPS Encryption: Using HTTPS ensures that all data transmitted between the client and server
is encrypted, protecting it from interception by attackers. This helps safeguard sensitive user
information like login credentials and financial claim details.

• Input Validation Sanitization: Validating and sanitizing user input helps prevent malicious code
injections such as SQL injection and Cross-Site Scripting (XSS). By ensuring that only expected
data is processed, it prevents attackers from exploiting vulnerabilities in forms and data inputs.

23
 • Authentication Authorization: Implementing strong authentication mechanisms (e.g., JWT,
OAuth) ensures that only authorized users can access the application. Authorization rules ensure
role-based access control, meaning users can only perform actions or access information specific
to their role (e.g., employee vs. admin).

• Secure Database Connections: Using secure methods to connect to the database, such as en-
crypted connections and proper handling of credentials (e.g., environment variables), ensures
that the communication between the application and the database is not vulnerable to attacks
like man-in-the-middle.

6.3 Responsiveness and mobile-friendliness

The project is designed with a focus on responsiveness and mobile-friendliness, ensuring that it
provides a seamless experience across different devices and screen sizes. Using Bootstrap and CSS
media queries, the layout automatically adjusts to fit smaller screens like smartphones and tablets,
while maintaining a consistent user interface on larger devices such as desktops. Key components
like the user login, claim submission, and review sections are designed with flexible grids and ele-
ments that resize dynamically, improving accessibility and usability on mobile devices. The use of
touch-friendly buttons and inputs further enhances the mobile experience, allowing users to efficiently
navigate and interact with the application from any device.

24
 Chapter 7

CONCLUSION AND FUTURE

ENHANCEMENTS

7.1 Conclusion

In conclusion, this project successfully implements an Employee Claim Management System

with a focus on user-friendliness, security, and mobile responsiveness. Through the integration of
modern web technologies like Angular, Bootstrap, and Node.js, the application provides a smooth,
dynamic interface for submitting claims, reviewing submissions, and managing user profiles. The
backend, supported by MySQL and Node.js, ensures reliable data handling, while security measures
like input validation, data encryption, and authentication enhance the overall safety of the system.
The design’s emphasis on mobile-friendliness guarantees accessibility from any device, providing a
comprehensive and efficient solution for managing employee claims in a streamlined manner.

7.2 Future Enhancements

Future enhancements for this Employee Claim Management System could include:

• Automated Claim Approval Process: Implement machine learning algorithms to analyze past
claims and automatically approve or reject claims based on predefined patterns, reducing manual
intervention.

• Multi-Currency and International Support: Enable the system to handle multiple currencies for
employees submitting claims from different countries, and integrate exchange rate APIs for real-
time conversion.

• Mobile Application: Develop a dedicated mobile application for iOS and Android to provide
employees with an even more seamless experience, allowing them to submit claims, track ap-
provals, and view status updates directly from their phones.

25
• Advanced Reporting and Analytics: Add enhanced reporting features, enabling management to
generate detailed reports on claim trends, department-wise expenses, and fraud detection.

• Integration with Payroll and HR Systems: Integrate the system with existing payroll and HR
management tools to automate reimbursement and approval workflows, ensuring seamless oper-
ations across the organization.

26
 Chapter 8

SOURCE CODE

Figure 8.1: Source code

27
 Chapter 9

SCREENSHOTS

Figure 9.1: Home Page

Figure 9.2: Login Page

28
Figure 9.3: Signup Page

Figure 9.4: Claim Page

29
 References

[1] Bootstrap, “Introduction - Bootstrap 5 Documentation.” [Online]. Available:

https://getbootstrap.com/docs/5.0/getting-started/introduction/. [Accessed: Oct. 07, 2024].

[2] Node.js Foundation, “About - Node.js Documentation.” [Online]. Available:

https://nodejs.org/en/docs/. [Accessed: Oct. 07, 2024].

[3] Angular Team, “Angular Overview - Angular Documentation.” [Online]. Available:

https://angular.io/docs. [Accessed: Oct. 07, 2024].

[4] Oracle Corporation, “Introduction to MySQL - MySQL 8.0 Reference Manual.” [Online]. Avail-
able: https://dev.mysql.com/doc/refman/8.0/en/. [Accessed: Oct. 07, 2024].

[5] OWASP Foundation, “OWASP Top Ten - OWASP Foundation.” [Online]. Available:
https://owasp.org/www-project-top-ten/. [Accessed: Oct. 07, 2024].

30