COMPLAINT MANAGEMENT SYSTEM

Submitted in partial fulfillment of the requirements for

the award of
Bachelor of Engineering degree in Computer Science and Engineering
By

ABINASH.A (38290003)

SRI NATH .M (38290086)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SCHOOL OF COMPUTING

SATHYABAMA INSTITUTE OF SCIENCE AND TECHNOLOGY

(DEEMED TO BE UNIVERSITY)

Accredited with Grade “A” by NAAC

JEPPIAAR NAGAR, RAJIV GANDHI SALAI, CHENNAI-600119

MARCH-2021

1
 SATHYABAMA
INSTITUTE OF SCIENCE AND TECHNOLOGY
(DEEMED TO BE UNIVERSITY)
Accredited with Grade “A” by NAAC
JEPPIAAR NAGAR, RAJIV GANDHI SALAI, CHENNAI - 600 119
www.sathyabama.ac.in

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

BONAFIDE CERTIFICATE

This is to certify that this Project Report is the Bonafide work of ABINASH
(Reg no 38290003) and SRI NATH (Reg no 38290086)

who have done the project work as a team who carried out the project
entitled

“COMPLAINT MANAGEMENT SYSTEM"

under my supervision from November 2019 to April 2020.

Internal Guide
Dr. J. ALBERT MAYAN, M.E., Ph.D.,

Head of the Department

Submitted for Viva voce Examination held on_____________________

Internal Examiner External

Examiner

2
 DECLARATION

I, ABINASH.A hereby declare that the project report entitled

COMPLAINT MANAGEMENT SYSTEM done by me under the
guidance of Dr. J. Albert Mayan is submitted in partial fulfillment of
the requirements for the award of Bachelor of Engineering degree in
Computer Science and Engineering.

o DATE:
o PLACE:
o CHENNAI SIGNATURE OF THE CANDIDATE

3
 ACKNOWLEDGEMENT
I am pleased to acknowledge my sincere thanks to Board
of Management of SATHYABAMA for their kind
encouragement in doing this project and for completing it
successfully. I am grateful to them.

I convey my thanks to Dr. T. Sasikala M.E., Ph.D., Dean,

School of Computing, Dr. S. Vigneshwari, M.E., Ph.D.
and Dr. L. Lakshmanan, M.E., Ph.D., Heads of the
Department of Computer Science and Engineering for
providing me necessary support and details at the right
time during the progressive reviews.

I would like to express my sincere and deep sense of

gratitude to my Project Guide Dr. J. Albert Mayan for his
valuable guidance, suggestions and constant
encouragement paved way for the successful completion
of my project work.
I wish to express my thanks to all Teaching and Non-
teaching staff members of the Department of Computer
Science and Engineering who were helpful in many
ways for the completion of the project.

4
 ABSTRACT

A smart complaint management system that uses Google firebase

database as a backend and in frontend we have an android app
where students can send their complaints to administration.
Administration has separate credentials to access all the
complaints. Using this smart complaint management system, any
management can easily able to solve issues. An information
system is a very famous tool in this digital era. People all over this
world use this tool to get and share information. Computer based
system is one type of information system that very often to use in
this era. It touches over all the sides of life nowadays.
It can avoid errors caused by user or staff at the organization
itself besides of easy and fast access to deliver new information.
Online students’ complaint is an information system used to help
study program in accepting criticism and suggestions by the
students to help it to the service. This research will reduce paper
usage, time and energy. This research used prototype model as
development system model to structure, plan and design the
system.

5
 TABLE OF CONTENT

NO. TITLE

1. INTRODUCTION
-Modules

2. PURPOSE OF THE PROJECT

3. E-COMPLAINT

4. MODULES OF THE CUSTOMER COMPLAINTS

MANAGEMENT

4.1. compliant
4.2. notice
4.3. staff
4.4. registration
4.5. login
4.6. forget password
4.7. admin

6
 5. SYSTEM REQUIREMENT OF THE CUSTOMER

COMPLAINTS MANAGEMENT

6. SYSTEM DESIGN OF THE CUSTOMER

COMPLAINTS

MANAGEMENT

6.1. Entity Complaint

6.2. Expected Resolve date

6.3. status
6.4. foreign key problem id
6.5. entity problem
6.6. primary key problem id
6.7. place of problem
6.8. catagory
6.9. time
6.10. description
6.11. Entity Staff
6.12.Primary Key Staff_id

6.13.Staff name

6.14.Qualification

7
6.15.Number

6.16.Email

6.17.Type

6.18.Address

6.19.Foreign Key Department_id

6.20.Primary Key Notice_id

6.21.Name

6.22.Issue date

6.23.Foreign key Complaint-id

6.24.Status
6.25.Action

6.26.Description

6.27.Entity User

6.28.Primary KeyUser_id

6.29.Username

6.30.Qualification

6.31.Numbers

6.32.Email
6.33.Type

6.34.Address

8
 6.35.Entity Admin

6.36.Primary key admin

6.37.Logs

6.38.Password

6.39.Description

7. FUNCTIONAL AND NON-FUNCTIONAL

OF
THE CUSTOMER COMPLAINTS
MANAGEMENT
7.1. Functional requirements of the customer complaints

Management

7.2. Non-Functional requirements of the customer

complaints management

7.3. Non-functional needs of the customer complaints

Management

7.4.Keep things simple and consistent: -

7.5.observe the use of typography: -

7.6.Use color and distinction correctly: -

7.7.Consider feedback messages: -

9
 7.8.Simplified forms

8. SYSTEM ANALYSIS
9. SYSTEM DESIGN
10. PROGRAMS
10.1. src

10.2. public

10.3. components

10.4. components

11. THE USER MAKES COMPLAINTS AGAINST

THE
PROVIDED SERVICES

12. CONCLUSION OF THE CUSTOMER

COMPLAINTS MANAGEMENT

10
11
1.INTRODUCTION

o An information system (IS) is a very useful tool to enhance

organization quality. It can be used to deliver information faster
without any redundancy. Briefly, it is a group of components that
interact to produce
information
o Any specific information system aims to support operations,
management decision-making
o Computer based system is one type of information system that very
often to use in this era. It touches over all the sides of life nowadays.
o It can avoid errors caused by user or staff at the organization itself
besides of easy and fast access to deliver new information. Any
information system needs to
communicate with external entities, human users or other
computers to help the work of human. It also serves people in
reducing cost and space allocation were used as archive place of
manual system.
o It exists because of the database included by data collection at the
computer. Specifically, it used to collect, filter, create, save and
distribute information by people or even organizations.
o At this time, English Study Program at Victory University of Sorong
used information box as media or tool to accept any complaints,
information, critics or suggestion about all kinds of service in English
Study Program.

o This kind of method is not optimal and accurate then. Firstly, the
students usually forget to put their complete identity. Then, the

12
 manual process cannot support privacy complaints of the student
and the rule is excessively long and trivial. At last, they are not
interested to visit faculty room, write the complaints then fill it to the
box.
o On the other side, English Study Program finds difficulty to
accommodate the complaints.
o This IS will provide a lot of contributions for English Study Program of
Victory University for instance it helps English Study Program to
manage and accommodate all the complaints easier and safely in the
database, it reduces the paper use, it motivates students to give their
complaints because this IS has an interesting interface, this online
system also will be a flexible tool which will offer the service anytime
and anywhere so English Study Program can always get the new
critics and suggestion to repair it system continuously as the function
to enhance it services. An Effective and Efficient work is an essential
index of organization’s performance.
o Complaint Management System with Source Code is a PHP project
that can request a complaint through online service. The system was
built using PHP, HTML, MySQL and JavaScript. The system is easy to
operate and manage, the user can sign up an account and provide a
login information before you send your complaint request. The user
must fill up some needed information to start up a complaint to any
topic that they're against with. The admin has an important role
here, he/she has to approve the complaints about the proceeding
processes.

2.PURPOSE OF THE PROJECT

The main purpose of the project is to help the public who are facing
different problems in the localities by this online application. This project is
having that potential to reduce the gap between people and Govt. It can
control unethical work of bribe and even it can reduce the processing time.

13
In this project identification and solution for the complaints given by the
people, rectifying them within the system generated time limit is the main
concept of the project. A clear report is generated by the system which
shows assignee name, complaint type/ department, etc. All the above
attributes help while viewing the report of complaints. The admin examines
weather the problem is rectified or not within the grace period. If it is not
solved, then the report is automatically forwarded to the higher authorities
so that it maintains an effective problem-solving solution. The main
objective of this project is to make easy the process of complaint reporting
with very simplified and effective way.
This project involves major problem-solving modules where these acts as
best solution for incoming bulk complaints. For every submission of
complaint, the user gets complaint acknowledgement. All this type of
acknowledgement is generated by the computer; the solution of time may
differ from the type of the complaint and category. To make any complaint,
it is made mandatory for the user to mention his contact details, so that it
does not receive any anonymous complaint details.

3.E-COMPLAINT

There are several organizations which provide the facility of raising

complaints, in which each of the organizations differ from each other in
their type of complaint.
These organizations define the type of services related to the complaint
provided by them for customers. So, we can say that the definition of type
of complaint differ as the services provided by various organizations are
different. The meaning of customer complaint is nothing but the customer
dissatisfaction and this is also considered as the form of market feedback.
On the other hand, customer’s complaint management is considered the
key role for organization’s success. The complaint management system
acts as the survey for the customer’s feedback about the organization.
There are several organizations which consider the customer complaints as
opportunities for their organization’s development By this method of
complaint management, there is possibility for companies to understand
the relation between the time taken for solving the complaints and the
customer reliability and makes them to concentrate more on the complaints
and solve them as soon as possible. Here, there may be effect of these

14
organizations on the other organizations like government or may be any
private system. The most important aspect which should be observed here
is that the user’s complaints are considered as the suggestions for
improvement of its services.

4.MODULES OF THE CUSTOMER COMPLAINTS

MANAGEMENT

The module of the customer complaints management is made of the combination

of modules which work with collaboration with each other and make it beneficial
to accomplish the main aim of the scheme.

4.1.COMPLAINT:

This interface is made for the users who want to make a complaint against some
person or some problem they are facing and to get rid of it.

The interface allows them to give them a description of the problem, that is when
they were facing the problem where it was the name of the person responsible
for that and here space for describing it properly is given.

4.2.Notice:
This interface is critical regarding making the person aware of the problem and
notice to the individual if the responsible person is the part of the organization.

Here the staff have the option to send notice after or during to resolving of
problem complaint of the users. Here users also get notice of the problem solved
status.

15
4.3.Staff:
This interface is mainly for the staff of the organization working under different
conditions of the department and try to resolve the problem after getting
assigned over that according to the problem.

The person is responsible for giving notice to the responsible of the problem and
notifying the user about the problem status of resolving. Further, they are
capable of giving enough reasons about it.

4.4.Registration:
Users information have to be compelled to be registered within the system thus
on the establish every of them unambiguously and do the required group action
as real potential. like on the name of the bill is issued.

on the far side, this plenty of things require measure there wherever we will
reference him. Without registration, there are few options and pages one user
can see which are landing on the home page and taking the features read but he
won’t be allowed to use those.

For use, he will have to register. One person needs to put his all the details
correctly and precisely as it will be helpful in identifying them and believing that
he is the real person who has booked for the same.

It also includes driver license for them who is driving and parameter too.

16
4.5.Login:
After registration one will register within the system because the operator of the
system either on the behalf of user. when this he has the opposite helpful
interfaces accessible for any actions.

Here either bride or groom both have to log in with their unique identity and
passwords. After this, they will be directed to the primary user interface from
where they have further options.

4.6.Forgot password:
This is quite often that people tend to forget the password they keep for the
login. So, this could be very tedious and hectic to recover the password manually
in case if one needs to login in the emergency.

So, to overcome this problem we have this module named ass forgot the
password and using this module user can recover their password in seconds. So
here we need to only put our registered email Id and hit the enter.

then one confirmation email will go to the email where he has the option to reset
the password. In seconds one can use this module and get rid of forgetting
password problem.

4.7.Admin:
Admin has the official powers to control the flow of the data from one part of the
system to the other. He can manipulate the access of the users to the data.

The primary purpose of this account is to make the user data relevant and then
giving the inputs to the other an interface module and make it work optimistically
and get the timetable according to the wish we want to create for a particular
type, of inputs.

Hence all the data will be reflected in clean and well data in the interfaces

17
5.SYSTEM REQUIREMENT OF THE CUSTOMER
COMPLAINTS MANAGEMENT
Now, this method is intended in such the way that it takes fewer resources to
figure out work correctly. it’s its own type of minimum needs that we’d like to
require care of:

The system wants a minimum of two GB of ram to run all the options sleek and
unforeseen.

It wants a minimum 1.3 gigahertz processor to run sleek as else which will
produce issues.

The system must be operated by some approved person as wrong hands will build
it happy-go-lucky.

Rest is all up to the user’s usage can take care of hardware

For security opposing anti-virus is suggested.

The system is made correctly, and all the testing is done as per the requirements.
So, the rest of the things depend on the user, and no one can harm the data or
the software if the proper care is done.

All the attributes are working correctly, and if any error is found, then it can be
removed easily.

18
6.SYSTEM DESIGN OF THE CUSTOMER COMPLAINTS
MANAGEMENT
6.1.Entity Complaint:
The main complaint is written in this feature of the scheme.

6.2.Expected Resolve date:

The time till what it will be resolved is written here.

6.3.Status:
The status of it I.e., is it cleared or not.

6.4.Foreign Key Problem_id:

This is reference key from the other entity to link the data of that table. It is
system generated unique identity number. This used to uniquely identify every
table in the database and perform the crud operation on it.

It is used to reference that table to any other table or any interface to show the
data of it and support other entities.

6.5.Entity Problem:
The user describes the problem context.

6.6.Primary Key Problem_id:

This is system generated and unique, which can be referenced in any other entity.

19
6.7.Place of the problem:
Where mainly the problem is faced is given here.

6.8.Category:
The type of the problem to which belongs according to the severity.

6.9.Time:
The time at which it was faced.

6.10.Description:
Reason and any other thing about the problem needed are given in brief
description about it on the facts.

6.11.Entity Staff:
Officers of the department are here.

6.12.Primary Key Staff_id:

This is system generated and unique, which can be referenced in any other entity.

6.13.Staff name:
The team’s name is taken from the user and fed into this it is properly validated
so that no mistake happens.

6.14.Qualification:
The requirement is made as to filter the events according to this so that user does
not need to filter out the events to register it makes this system more reliable and
useful.

20
6.15.Number:
The phone number is taken here to keep the member updated and for the
confirmation of the event is also managed through this method.

6.16.Email:
email is made to make member aware of new offers new events and for future
reference, it is also relevant.

6.17.Type:
The kind of user is mentioned here like is he a student, teacher or he is the vendor
of any shop. According to this data, the discounts offers and other things are
decided plus few other things of adjusting the task of the user also with this.

6.18.Address:
The location of the user is also mentioned here to make it accessible to the
delivery and few other things too.

6.19.Foreign Key Department_id:

It is used to reference that table to any other table or any interface to show the
data of it and support other entities. It references the department which the user
belongs.

6.20.Primary Key Notice_id:

This is system generated and unique, which can be referenced in any other entity.

6.21.Name:
Name of the Notice or we can say the title.

21
6.22.Issue date:
When the notice is published, the time stamp is given here.

6.23.Foreign key Complaint-id:

The complaint Id is referenced here.

6.24.Status:
The status of the complaint is it resolved or pending or in progress.

6.25.Action:
The necessary measures needed to be taken written in this.

6.26.Description:
Any other reason about the problem is fed in this attribute

6.27.Entity User: -
User data have to be saved in this entity, and all fields are required for this
purpose which taken from the user. proper validation is checked, and the
attributes are as follows:

6.28.Primary KeyUser_id:
This is system generated and unique, which can be referenced in any other entity.

6.29.Username:
Username is taken from the user and fed into this it is properly validated so that
no mistake happens.

22
6.30.Qualification:
The requirement is made as to filter the events according to this so that user does
not need to filter out the events to register it makes this system more reliable and
useful.

6.31.Number:
The phone number is taken here to keep the member updated and for the
confirmation of the event is also managed through this method.

6.32.Email:
email is made to make member aware of new offers new events and for future
reference, it is also relevant.

6.33.Type:
The kind of user is mentioned here like is he a student, teacher or he is the vendor
of any shop. According to this data, the discounts offers and other things are
decided plus few other things of adjusting the task of the user also with this.

6.34.Address:
The location of the user is also mentioned here to make it accessible to the
delivery and few other things too.

6.35.Entity Admin:
6.36.Primary key admin:
This is primary supervisor of all task happening in the system for long. It is system
generated unique identity number. This used to uniquely identify every table in
the database and perform the crud operation on it.

23
It is used to reference that table to any other table or any interface to show the
data of it and support other entities. It has all the power to make changes in the
field of other tables.

It grants the privileges to other users of the system that what kind of operations
they can perform.

6.37.Logs:
The logs are saved here to analysis the system accordingly. The changes occur. For
necessary changes.

6.38.Password:
A Strong password is recommended for this account as no one wants to get
hacked and lose the sophisticated data.

6.39.Description:
Any relevant info. Regarding this statement is attributed in this.

Here in use case, we have 3 actors, one is user have problems he registers in the
system with attributes and then log in and record the complaint in it and then the
claim is forwarded to the staff to resolve it and notifying the person who is
responsible to do necessary action and to the user about the resolved.

Staff can update the status of the complaint resolved or not in the interface.
Ultimately the reason and minute detail will be checked and solved the problem.
in this way the data is managed by the admin and works under his supervision.

24
7.FUNCTIONAL AND NON-FUNCTIONAL OF
THE CUSTOMER COMPLAINTS MANAGEMENT
7.1.Functional requirements of the customer complaints
management: -
The functional requirements are those requirements which are necessary to the
eye of the user and the client. Here we try to make the module possible to
accomplish the need of the desired function.

few of its functional requirements are as follows-

User required to fill the details with necessary validated inputs and registered to
the system and using credentials doing the login task.
The user can specify the problem of his with the system determining the severity
of the problem and when he gets the problem successfully.

The complaint goes to staff interface, and he reads that and takes necessary
action.

The team takes action by sending notice to the responsible staff and saying him to
resolve the problem or take appropriate action.

As problem get solved, he sends notice to the users such that the problem can be
solved or not and the reason of the problem was the given and what necessary
action needed to take care.

25
7.2.Non-Functional requirements of the customer
complaints management: -
These requirements need unit among the style of “system shall be “, associate an
overall property of the regime as a full or of a particular aspect and not an
individual operates.

The system’s overall features remarkably mark the excellence between whether
or not the event project has succeeded or unsuccessful.

7.3.Non-functional needs of the customer complaints

management –
Unit of measurement usually divided into two broad categories:

Execution qualities, like security and quality, that unit evident at the runtime.

Evolution qualities, like liabilities, maintainability, flexibility and quantitative, that

unit embodied among the static structure of the code.

Non-functional of the customer complaints management needs place restrictions

on the merchandise being developed, the event technique, and specify external
constraints that the merchandise has to be compelled to meet

Our project qualifies all the factors of helpful and not helpful consequently, and
the system is up to mark performance device. Here we’d prefer to need the care
of few lots of things before heading towards the system.

the many sensible intuitive interfaces are usually created. that ultimately build
interface easy to use for a lengthy time. in distinction to ancient vogue wherever
the goal is to make the difficulty or application physically enticing, the purpose of
interface trend is to create the user’s interaction expertise as straightforward and
intuitive as double – what’s typically mentioned as user-centred vogue.

26
where smart graphic/industrial fashion is daring and eye-catching, intelligent
interface trend is sometimes delicate and invisible.

7.4.Keep things simple and consistent: -

Straightforward and harmonic means that are making u i is extraordinarily
intuitive and needs to followed

7.5.observe the use of typography: -

The typography is taken care really strictly as the wish of the system.

7.6.Use color and distinction correctly: -

Color band of skin and dark is sweet means that stress and done well throughout
this method

7.7.Consider feedback messages: -

Feedback sort may well be excellent implies that taking feedback of forms and
rising the system.

7.8.Simplified forms: -
The structure is made simple to fill with a clean program.

8.System Analysis
The proposed model which is developed does not only depend on the system’s
working process, but also it depends on the working of the flow of the process
which needs to be considered. The proposed model acts as the platform for the
users to address the problem regarding any issue and which should be handled

27
carefully. The proposed model introduces a new user called privileged user, who
has the right on the entire system, the process work flow of the privileged user is
shown in the representation given below.
The privileged user has access with both admin level and customer side. He can
be able to view the tasks, requests, complaints, login details of both the user and
admin. The privileged user has to login into the system first, and then access the
data as he wants. Privileged user can be able to view the complaints reported by
the user and also the managed complaints by admin. In the managed complaints,
he will check for the solved and unsolved complaints. If there are any unsolved
complaints, he will take actions towards the problem.

9.System Design
This complaint handling system is mainly developed to provide the user the
process of making complaint easy, it also made the process of registering a
complaint through online. The different types of complaints made by different
users are made integrated in a web portal.
The admin of the portal manages all the complaints and passes those complaints
to the respective complaint handling departments. If the complaint is not solved
within the time provided by the system, the complaint will be automatically sent
to the municipal commissioner who is the head for all departments. By this
process, the users are made satisfied regarding their problems.
This project makes extension to the already existed process by integrating all type
of complaints together and provides solutions for those problems within the
convenient time and without any effort. The user makes complaints against the
provided services.

10.PROGRAMS
10.1.Src
Package.json
{
"name": "react",
"version": "1.0.0",
"description": "React example starter project",

28
 "keywords": [
"react",
"starter"
],
"main": "src/index.js",
"dependencies": {
"axios": "0.21.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.0"
},
"devDependencies": {
"@babel/runtime": "7.13.8",
"typescript": "4.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

10.2.Public
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta

29
 name="viewport"
content="width=device-width, initial-scale=1, shrink-to-
fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is
added to the
homescreen on Android. See
https://developers.google.com/web/fundamentals/engage-and-
retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"
integrity="sha512-
iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJg
yAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder
during the build.
Only files inside the `public` folder can be referenced from
the HTML.

Unlike "/favicon.ico" or "favicon.ico",

"%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root
public URL.
Learn how to configure a non-root public URL by running `npm
run build`.
-->
<title>React App</title>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>

30
 <!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty
page.

You can add webfonts, meta tags, or analytics to this file.

The build step will place the bundled scripts into the <body>
tag.

To begin the development, run `npm start` or `yarn start`.

To create a production bundle, use `npm run build` or `yarn
build`.
-->
</body>
</html>

31
10.3.components
Add.css
.add {
display: flex;
flex-direction: column;
}

.input {
padding: 10px;
margin-bottom: 10px;
}

.text-box {
height: 100px;
}

.btn {
height: 45px;
background-color: red;
border: 0.5px solid #ddd;
}

Add.js
import { useState } from "react";

32
import { useHistory } from "react-router-dom";
import axios from "axios";
import "./Add.css";

const Add = ({ updateState }) => {

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [title, setTitle] = useState("");
const [contact, setContact] = useState("");
const [comment, setComment] = useState("");
const history = useHistory();

const handleSubmit = async () => {

if (
name.length > 0 &&
email.length > 0 &&
title.length > 0 &&
contact.length === 10 &&
comment.length > 0
) {
let res = await axios.post(
"https://6016417c55dfbd00174cabaa.mockapi.io/complaint",
{
name,
mailID: email,
title,
complaint: comment,
contact
}
);
console.log(res);
updateState();
history.push("/");
} else {
alert("Enter valid values");
}
};

return (
<div className="view-container add">
<h1>
<i
className="fas fa-arrow-left"
onClick={() => {
history.push("/");

33
 }}
></i>{" "}
Add Complaint
</h1>
<input
value={name}
onChange={(e) => setName(e.target.value)}
className="input"
type="text"
placeholder="Enter Name"
/>
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
className="input"
type="email"
placeholder="Enter Email"
/>
<input
className="input"
value={title}
onChange={(e) => setTitle(e.target.value)}
type="text"
placeholder="Enter Complaint Title"
/>
<input
className="input"
value={contact}
onChange={(e) => setContact(e.target.value)}
type="text"
placeholder="Enter Contact Number"
/>
<textarea
value={comment}
onChange={(e) => setComment(e.target.value)}
className="input text-box"
placeholder="Enter complaint"
/>
<button onClick={handleSubmit} className="btn">
Submit
</button>
</div>
);
};

34
export default Add;

Complantcard.js
const ComplaintCard = ({ data, onSelect }) => {
return (
<div
style={{
height: "30px",
borderBottom: "0.5px solid #eee",
cursor: "pointer"
}}
onClick={() => {
onSelect(data);
}}
>
<h4 style={{ paddingLeft: "10px" }}>{data.title}</h4>
</div>
);
};

export default ComplaintCard;

35
Header.css
.header {
border-bottom: 0.5px solid #ddd;
padding: 15px;
display: flex;
justify-content: space-between;
}

.header > h4 {
margin: 0;
}

Header.js
import { useHistory } from "react-router-dom";
import "./Header.css";
const Header = () => {
const history = useHistory();
return (
<header className="header">
<h4>Complaint Management</h4>
<i
className="fas fa-plus"
onClick={() => {
history.push("/add");
}}
></i>
</header>
);
};

export default Header;

36
home.js
import React from "react";
import Header from "./Header";
import ComplaintCard from "./ComplaintCard";
import { useHistory } from "react-router-dom";
const Home = ({ complaints, onSelectComplaint }) => {
const history = useHistory();
const onSelect = (data) => {
onSelectComplaint(data);
history.push("/view");
};
return (
<>
<Header />
{complaints.map((complaint) => {
return (
<div key={complaint.id}>
<ComplaintCard data={complaint} onSelect={onSelect} />
</div>
);
})}
</>
);
};

export default Home;

View.css
.view-container {
padding: 10px;
}

37
.p-sm {
font-size: 12px;
}

View.js
import { useHistory } from "react-router-dom";
import "./View.css";

const View = ({ data }) => {

const history = useHistory();
return (
<div className="view-container">
<h2>
<i
className="fas fa-arrow-left"
onClick={() => {
history.push("/");
}}
></i>
{" " + data.title}
</h2>
<p className="p-sm">Created by {data.name}</p>
<p className="p-sm">Email: {data.mailID}</p>
<p className="p-sm">Contact: {data.contact}</p>
<br />

38
 <p>{data.complaint}</p>
</div>
);
};

export default View;

10.4.components
App.js

import { useState, useEffect } from "react";

import axios from "axios";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import Home from "./components/Home";

import View from "./components/View";
import Add from "./components/Add";

import "./styles.css";

export default function App() {

const [complaintData, setComplaintData] = useState([]);
const [complaint, setComplaint] = useState({});
useEffect(() => {
const fetchData = async () => {
let { data } = await axios.get(
"https://6016417c55dfbd00174cabaa.mockapi.io/complaint"
);
setComplaintData(data);
};
fetchData();
}, []);

const updateState = async () => {

39
 let { data } = await axios.get(
"https://6016417c55dfbd00174cabaa.mockapi.io/complaint"
);
setComplaintData(data);
};

const onSelectComplaint = (selectedComplaint) => {

setComplaint(selectedComplaint);
};
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route
exact
path="/"
component={() => (
<Home
complaints={complaintData}
onSelectComplaint={onSelectComplaint}
/>
)}
/>
<Route
exact
path="/view"
component={() => <View data={complaint} />}
/>
<Route
exact
path="/add"
component={() => <Add updateState={updateState} />}
/>
</Switch>
</BrowserRouter>
</div>
);
}

Index.js
import { StrictMode } from "react";

40
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");

ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);

Style.css
body {
margin: 0;
padding: 0;
}

.App {
font-family: sans-serif;
}

.fas:hover {
cursor: pointer;
}

Package.json
{
"name": "react",
"version": "1.0.0",
"description": "React example starter project",
"keywords": [
"react",
"starter"
],
"main": "src/index.js",
"dependencies": {
"axios": "0.21.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.2.0",

41
 "react-scripts": "4.0.0"
},
"devDependencies": {
"@babel/runtime": "7.13.8",
"typescript": "4.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

11.The user makes complaints against the provided

services

42
43
44
12.CONCLUSION OF THE CUSTOMER COMPLAINTS
MANAGEMENT
In this model, it is explained about the working procedure of the system, the roles
involved in the system and the activities and responsibilities those users. This
paper presents the overview of the analysis and development of the complaint
management system of Municipal Corporation.

There will be a remarkable result will be obtained by the implementation of this

project and also, they help in encouraging the development of this type of
complaint management systems or more complex systems. Generally, the
complaints and other types of feedback play an important role in the
development of any organization and to interact with the customers in a better
way. This system can be taken as initiation for the systems which will be
developed on future and which are related to complaint management systems.

Finally, in the customer complaints management, we have a system where users

have problems he registers in the system with attributes and then log in and
record the complaint in it and then the claim is forwarded to the staff to resolve it
and notifying the person who is responsible to do necessary action and to the
user about the fixed and all the functions working fine and smooth.

45