Đồ án buiding an attendance checking system applied face recognition

INTRODUCTION

The urgency of the project

This project of “Building an attendance checking system applied face recognition”, is a modern solution that automates the process of recording employee attendance.

By utilizing advanced facial recognition algorithms, the system can accurately identify individuals by analyzing their unique facial features.

This is a useful application for small and medium businesses to manage their employees’ work attendance, and for the administrator to manage employee work days, leave days and attendance record.

To build this system, a combination of machine learning for face attendance techniques, and data resolved flow technology is required to automatically analyze the face and recognize the employee’s face accurately and quickly.

Moreover, this system also has a user-friendly interface that allows employees to interact with it easily This interface enables employees to register their faces, view attendance records, and perform other relevant functions.

Introduction

In recent years, technology is developing fast With the birth of Machine Learning and Artificial Technology, new technological ideas are formed, and many former products could be better upgraded.

Through research for the ideation of this project, we found out about the attendance checking system Existing systems mostly operate by scanning ID cards or fingerprints, of which efficiency and cost-productivity could be further improved.

ID card scanning requires businesses to provide cards to the employees, and cards are easy to lose, which is prone to unnecessary extra costs Also, the attendance could be falsely recorded if employees help each other or employees forget their cards On the other hand, the fingerprint scanning is not effective and flexible in situations when the fingers are cut or injured or not clean enough.

The listed disadvantages encouraged us to think of how to help businesses cut down on unnecessary costs and facilitate their attendance checking process, as well as eliminate the chance of employees getting frustrated before they start work in cases of error scanning due to objective reasons We eventually come to the solution of building an attendance system integrated with facial recognition generating by machine learning We believe that this system would remove the mentioned issues with additional safety and convenience advantages coming with a touchless process.

Objective

To build a system that allows the employees of the customer record their attendance by using their face Furthermore, the customer can manage their employees’ attendance, work shifts and leave requests by using the web application.Additionally, the system also supports the employee to view their work shifts and attendance records.

Technology

The technologies used in this project include:

• Facial Recognition Service: face-api.js library;

• Back-end: NodeJS with Express – Typescript;

• Front-end: ReactJS with Chakra UI component library;

Scope

To meet the requirements of the project, we have identified the following scope:

• An attendance system module that records employees’ attendance by using their faces.

• Usage of Machine Learning for the facial recognition and detection.

• Web application for the admin to manage the employees’ attendance, work shifts and leave requests, and also support the customers to collect their employees’ face data for attendance management.

SYSTEM SPECIFICATION

Application Review

There are several apps available in the market that offer similar features to building an attendance checking system applied face recognition Here are a few examples:

• BambooHR: BambooHR is an HR software that provides a range of features including employee attendance management, leave tracking, employee information management, and performance management.

• ADP Workforce Now: ADP Workforce Now is a comprehensive HR solution that offers features like time and attendance management, leave management, employee data management, and payroll processing.

• Zenefits: Zenefits is an all-in-one HR platform that includes features such as time and attendance tracking, leave management, employee self-service, and benefits administration.

• Paycor: Paycor is a cloud-based HR and payroll software that offers functionalities like time and attendance tracking, leave management, employee data management, and reporting.

• Zoho People: Zoho People is an HR software that provides features such as time tracking, leave management, employee self-service, and employee database management.

One common problem that the other apps have is the manual and time-consuming process of employee attendance management This often involves paper forms or email chains, leading to delays, miscommunication, and difficulty in tracking and managing requests Many organizations still rely on traditional methods such as paper-based attendance sheets or manual entry into spreadsheets This process is prone to errors, time-consuming, and lacks real-time visibility.

This is when our building an attendance checking system applied face recognition comes to solve, our app provides a digital platform where employees can easily submit leave requests, and managers can review and approve them by incorporating face recognition technology and training methods for attendance tracking, the app eliminates the need for manual data entry and provides a more accurate and efficient solution Now, Employees can simply check in and check out using their faces,reducing administrative burden and ensuring accurate attendance records.

Technologies

2.2.1 Front-end: ReactJS with Charka UI component library

Figure 2.1 ReactJS and Charka UI logo

ReactJS is a popular JavaScript library widely used for building user interfaces It follows a component-based architecture, allowing developers to create reusable UI components that efficiently update and render only the necessary parts of the interface ReactJS offers a virtual DOM (Document Object Model) that optimizes performance by minimizing actual DOM manipulation, resulting in faster rendering and improved user experience Its declarative syntax makes it easier to understand and maintain code, enabling developers to build complex UIs.[1]

Chakra UI is a lightweight and accessible component library designed to enhance UI development with ReactJS It provides a comprehensive set of pre-built components that follow modern design principles, saving development time and effort Chakra UI offers customizable styles and theming options, allowing developers to achieve consistent and visually appealing interfaces With its intuitive API and extensive documentation, Chakra UI simplifies the process of building responsive and accessible user interfaces.[5]

The decision to use ReactJS and Chakra UI in building an attendance checking system applied face recognition is driven by their numerous advantages ReactJS offers a robust ecosystem of libraries and tools, making it a popular choice for front- end development Its efficient rendering performance and virtual DOM enable fast and smooth user interactions, even with complex UIs Additionally, ReactJS's component-based architecture promotes code reusability and maintainability, resulting in a more scalable and manageable codebase.

Chakra UI complements ReactJS by providing a collection of ready-to-use components that follow design best practices This not only saves development time but also ensures a consistent and visually appealing user interface across the app. The customization options and theming capabilities of Chakra UI allow for seamless integration with the app's branding and design requirements.

2.2.2 Back-end: NodeJS with Express – Typescript

Figure 2.2 NodeJS and Express logo

Node.js is a runtime environment that allows developers to run JavaScript code on the server side It provides an event-driven, non-blocking I/O model that makes it highly scalable and efficient for building web applications Node.js offers a rich ecosystem of packages and libraries through its package manager, npm, enabling developers to leverage existing modules and tools to streamline development processes.[3]

Express is a fast and minimalist web application framework for Node.js It provides a robust set of features for building web APIs and server-side applications Express simplifies the process of handling HTTP requests and defining routes, making it easy to create scalable and modular back-end architectures It offers middleware support, allowing developers to add functionality to their applications, such as authentication, error handling, and logging, with ease.[2]

The decision to use Node.js and Express in building an attendance checking system applied face recognition is driven by their strengths and advantages Node.js's asynchronous, event-driven architecture allows the app to handle a large number of concurrent requests without blocking the execution, ensuring high performance and responsiveness Its non-blocking I/O model is particularly suitable for applications that require real-time updates and interactions, such as managing employee attendance and leave requests.

Express, as a lightweight and flexible framework, provides a solid foundation for building RESTful APIs and back-end services It simplifies the process of defining routes, handling requests, and integrating middleware, making back-end development more efficient The middleware support in Express allows for easy integration of additional functionalities, such as authentication and database access, enhancing the app's security and data management capabilities.

MySQL is a popular open-source relational database management system (RDBMS) that is widely used in web development It provides a reliable and scalable solution for storing and managing structured data MySQL offers a range of features and capabilities that make it suitable for various applications, including building an attendance checking system applied face recognition.

One of the key reasons for choosing MySQL as the database for building an attendance checking system applied face recognition is its robustness and stability.MySQL has a proven track record of being a reliable and high-performing database system, capable of handling large volumes of data and concurrent connections It is well-suited for applications that require efficient data storage and retrieval, such as managing employee information and attendance records.

MySQL also offers excellent scalability options It supports horizontal scaling through techniques like database sharding and replication, allowing the app to handle increased data loads and accommodate growing user bases This scalability ensures that building an attendance checking system applied face recognition can adapt and grow as the organization's employee base expands.

Another advantage of MySQL is its compatibility and ease of integration with various programming languages and frameworks, including Node.js This makes it seamless to establish connections and interact with the database from the back-end application Additionally, MySQL has a large community and extensive documentation, providing developers with a wealth of resources and support when working with the database.

In terms of data modeling and query capabilities, MySQL provides a robust SQL (Structured Query Language) interface It supports a wide range of SQL operations, allowing developers to define complex database schemas and perform efficient data manipulations and retrievals This flexibility is essential for managing employee data and performing operations such as attendance tracking and leave requests.

The faceapi.js is a powerful JavaScript library that provides facial recognition and analysis capabilities It allows developers to integrate facial recognition features into their applications.

The decision to use faceapi.js for facial training in building an attendance checking system applied face recognition is based on several factors Firstly, Faceapi.js offers accurate and reliable facial recognition algorithms that can detect and analyze faces in real time This capability is crucial for implementing features like check-in and check-out using facial recognition.

The faceapi.js provides a range of facial analysis functionalities, including face detection, face landmark detection, and face recognition These features enable building an attendance checking system applied face recognition to recognize employees.

REQUIREMENT SPECIFICATION

Description

A Human Resource Management system has responsibility for manage the employe’s data This includes profile management, employee management,organization management, department management, attendance management, work shift management and finally is leave request management In the attendance we also have the statistic and a screen to handle the attendance error.

Functional Requirement

An attendance system using a camera to capture the face of the employee and then using facial recognition to record employee attendance This system also supports capturing the image of the employee when they record their attendance successfully. And also supports the employee to record their attendance failure after the system cannot recognize or wrong recognize for a certain number of times.

The user can set up this system at the entrance of the organization Whenever an employee wants to record their attendance, they can scan their face to achieve this. The system also supports the use of a QR code, which can guide them to a form for recording attendance failures in case the system recognizes their face incorrectly multiple times.

Human Resource Management is web application for users to manage their employee This Human Resource Management system have 3 roles: Admin, Manager and Employee The prerequisites in the first-time login into the system is the user need to provide all profile information and profile picture, and then after that they need to go to the screen that let the system collects their face data.

• Employee: Employee is the first role of the Human Resource Management system They can login into the system, view or update their profile information They can view their work shift, create a leave request to request a day or multiple days off, view their created leave request And the most important thing is that they can view their attendance records, the statistic attendance of the month.

• Manager: Manager is the second role of the Human Resource Management system They have all the access to the function of the employee role And they can arrange shifts for the employee in their department, approve or reject their employee leave request,

• Admin: Admin is the third role of the Human Resource Management system.

Who can access to all the function in the system They have all the access to the function of the manager role And they can update or delete leave type or shift type, view all the trained face data of every user in the system, they also can set the specific user to re-train if the system cannot recognize their face or some exception appear And they can manage all department and all employee, can assign employee or manager into a specific department.

• Unauthorized User: The user can login into the system to use the provided functions.

• Employee: Who can access the profile management, see organization detail, see work shift and self-attendance statistic and record.

• Manager: Who can access to all employee role’s function, and also can access to employee management, work shift management, leave request management, attendance exception management.

• Admin: Who can access to all the functions in the system.

Main Use Cases Use Case #

Take attendance by using facial recognition UC_1.3

View work shift detail UC_1.8

Create a personal leave request UC_1.9

View the list of personal leave requests UC_1.10

View annual leave days UC_1.11

View a leave request detail UC_1.12

View a single attendance history detail UC_1.14

View this month attendance detail UC_1.15

View face data photos UC_1.23

Request employee to re-train UC_1.24

View the list of management leave requests UC_1.28

Report in-valid an attendance history UC_1.31

Convert valid an attendance history UC_1.32

View attendance exception detail UC_1.34

View all shift type UC_1.37

View all leave type UC_1.41

Assign manager to department UC_1.49

Assign employee to department UC_1.50

Figure 3.2 Use case login Table 3.2 Use case login description

Use Case No UC_1.1 Use Case Version 1.0

Author Nguyen Pham Quoc Thang

• Users able to sign in the system.

• Users sign in the system successfully

• Users click the “Sign in” button in Sign in page

• Users already have the account

• Users will be navigated to Dashboard page

Step Actor Action System Response

1 Fill in the Email The system start validate the field when usersField [E1], [E2] blur out the field

2 Fill in the Password The system start validate the field when users Field [E3] blur out the field

3 Click into the “Sign The system navigates users to the Dashboard in” [E3] page and show the success message

No Actor Action System Response

E1 The fill-in value is not The system will show the error message right in the Email format under the Email Field: “Invalid Email”

E2 The fill-in value is The system will show the error message right empty under the Email Field: “Email is required”

The fill-in value’s The system will show the error message right E3 length is less than 6 under the Password Field: “Password is too characters short”

The fill-in value is The system will show the error message right E4 empty under the Password Field: “Password is required”

The Email and the The system will show the error message:

E5 Password value is not “Password is not matching” found in the system

3.2.2.4.2 Use case take attendance by using facial recognition

Figure 3.3 Use case take attendance by using facial recognition

Table 3.3 Use case take attendance by using facial recognition description

Use Case Name Take attendance by using facial recognition

• Users are able to take attendance in the system.

• Users take attendance in the system successfully

• Users access the face attendance link

• Users already have the facial data in the system

• Users will be navigated to Sign in page and the system will show the success message

1 Access to the face attendance The system starts loading the facial link model

2 Wait until the system recognizes The system starts to scan the user’s the users [E1], [A1] face

Click the “Continue” button on The system records the attendance

3 the success modal [E2], [E3], and popup a notification to the user.

The users using the alternative The system will navigate the user A1 attendance by clicking the “Report” to the Report Attendance button in the Exception modal Exception page

E1 The user facial data is not The system will show Exception modal found

E2 The users don’t have the The system will show the error message: work shift today “You don't have a schedule for today”

The users check in the work The system will show the error message: E3 shift too late “You are too late to check in, please contact with the manager”

The users check out the work The system will show the error message: E4 shift too early “The user check in too early, please contact with the manager”

3.2.2.4.3 Use case collect face data

Figure 3.4 Use case collect face dataTable 3.4 Use case collect face data descriptionUSE CASE - 3

Use Case Name Collect face data

• Users are able to provide facial data for the system.

• Users provide facial data for the system successfully.

• Users click the “Scan my face” button.

• Users already have the account in the system.

• Users will be navigated to Sign in page and the system will show the success message

1 Access to the face training The system starts loading the facial model link.

2 Click the “Scan my face” The system starts to scan the user’s face button.

3 Wait until the process bar The system shows the loading spinner is complete.

4 Click the “Finish” button The system will navigate the users to the on the success modal Sign in page

3.2.2.4.4 Use case report attendance failure

Figure 3.5 Use case report attendance failure Table 3.5 Use case report attendance failure description

Use Case Name Report attendance failure

• Users are able to take attendance exception.

• Users take attendance exception successfully.

• Users click the “Submit” button in the Report Attendance Exception modal.

• Users already have the account in the system.

• Users will be navigated to the Sign in page and the system will show the success message

Click the “Report” button in the The system navigates the

1 Exception modal in the Face Attendance users to the Report page Attendance Exception page

2 Select Check type in the “Check Type” selection

3 Fill in the Email Field

4 Select the Department name in the

5 Click the “Submit” button on the Report The system will show the

Attendance Exception modal [E1] success message

E1 The Email Field value is not The system will show the error found in the system message: “Email not found”

3.2.2.4.5 Use case view organization detail

Figure 3.6 Use case view organization detail Table 3.6 Use case view organization detail description

Use Case Name View organization detail

• Users are able to view the organization's detail.

• Users can view the organization's detail.

• Users navigate to organization detail page.

• Users have already signed in

• Users can view all the information about organization’s details

1 Users navigate to The system shows all the information organization detail page [A1] about the organization’s detail

The users with The system shows all the information about the

A1 the role Admin organization’s detail and the “Modify Leave Type” button and the “Modify Shift Type” button

3.2.2.4.6 Use case view work shift

Figure 3.7 Use case view work shift Table 3.7 Use case view work shift description

Use Case Name View work shift

• Users able to view the Work Shift.

• Users view the work shift successfully.

• Users navigate to the Work Shift page

• Users have already signed in

• Users can view all the information about the Work Shift

Navigate to the Work The system shows all the information about

1 Shift Page [A1], [A2], the Work Shift and the Department Name,

[A4] Employee Name, Work Shift Type Filter

The users using the Work The system shows all the information

A1 Shift Type Filter about the Work Shift of the employee according to the Work Shift Type Filter

The user with the role The system only shows the Department

Manager Name, Employee Filter, Work Shift Type

Filter A2 Select employee wants to The system will show all the information view the work shift in the about that employee Work Shift

A3 Select “All” in the Employee The system will show the information of

Filter all the employee's Work Shift

The user with the role Admin The system only shows the Department

Name, Employee Filter, Work Shift Type Filter

Select department name in The system will show the selection of the Department Filter Employee Filter according to the

Select employee name in the

Select the Work Shift Type The system shows all the information

Filter about the Work Shift of the employee according to these filter

3.2.2.4.7 Use case view work shift detail

Figure 3.8 Use case view work shift detail

Table 3.8 Use case view work shift detail description

Use Case Name View work shift detail

• Users are able to view the work shift detail.

• Users view the work shift detail successfully.

• Users click into the Work Shift Card in the Work Shift page.

• Users have already signed in and navigated to the Work Shift page.

• Users can view the detail of the Work Shift Card

1 Click into the The system shows the modal containing all the

Work Shift Card information about that Work Shift Card

3.2.2.4.8 Use case create a personal leave request

Figure 3.9 Use case create a personal leave request

Table 3.9 Use case create a personal leave request description

Use Case Name Create a personal leave request

• Users are able to create a personal leave request.

• Users create a personal leave request successfully.

• Users click the “Add New” button in the Leave Request Personal page.

• Users have already signed in and navigated to the Leave

• Users can create new Personal Leave Request

Click the “Add New” button The system shows a Drawer for users to

1 on the table fill in all the required fields for the

2 Fill all the required field

3 Select leave type in Leave

Click “Save” button The system will close the Drawer and show the success message and refresh the table data

The users chose the Annual

E1 The users exceed the Annual The system will show the error

Leave Type message: “Exceed Annual Leave”

3.2.2.4.9 Use case view the list of personal leave requests

Figure 3.10 Use case view the list of personal leave requests

Table 3.10 Use case view the list of personal leave requests description

Use Case Name View the list of personal leave requests

• Users are able to view the list of personal leave requests.

• Users view the list of personal leave requests successfully.

• Users navigate to the Leave Request Personal page.

• Users view the list of personal leave requests.

1 Navigate to the Leave Request The system shows the list of personal Personal page [A1], [A2] leave requests in the table

Users with the role The system only shows the Department

Manager Name, the Employee Filter, and the Date

Select the employee’s name The system shows the list of personal leave in the Employee Filter requests in the table according to the filter

Users with the role Admin The system only shows the Department

Filter, the Employee Filter, and the Date Filter

A2 Select the department name The system shows a selection of employee in the Department Filter according to the Department Filter current value Select the employee’s name The system shows the list of personal leave in the Employee Filter requests in the table according to the filter

3.2.2.4.10 Use case view annual leave days

Figure 3.11 Use case view annual leave days Table 3.11 Use case view annual leave days description

Use Case Name View annual leave days

• Users are able to view annual leave days.

• Users view annual leave days successfully.

• Users navigate to the Leave Request Personal page.

• Users view annual leave days.

1 Navigate to the Leave Request The system shows the annual

3.2.2.4.11 Use case view a leave request detail

Figure 3.12 Use case view a leave request detail Table 3.12 Use case view a leave request detail description

Use Case Name View a leave request detail

• Users are able to view a leave request detail.

• Users view a leave request detail successfully.

• Click the “View” button on the record of the Leave Request Personal.

• Users have already signed and navigated to the Leave Request

• Users view a leave request detail.

1 Click the “Bulk Action” button The system shows Bulk Action on the record ò the Leave Menu

Request Personal that want to view the detail

Click the “View” button in the The system view shows the Drawer

2 Bulk Action Menu containing all the information of the

Leave Request in Read Only mode

3.2.2.4.12 Use case view attendance history

Figure 3.13 Use case view attendance history Table 3.13 Use case view attendance history description

Use Case Name View attendance history

• Users are able to view attendance history.

• Users view attendance history successfully.

Navigate to the The system will show all the information

1 Attendance page in about the Attendance of that employee

Personal Tab [A1], [A2] including the attendance History

User with the role Manager, navigate to the Attendance page in Management Tab

A1 Users select employee name in The system will show all the the Employee Filter information about the Attendance of that employee including the attendance History

Users select department name The system will show the selection of A2 in the Department Filter Employee Filter according to the

Users select employee name in The system will show all the the Employee Filter information about the Attendance of that employee including the attendanceHistory

3.2.2.4.13 Use case view a single attendance history detail

Figure 3.14 Use case view a single attendance history detail

Table 3.14 Use case view a single attendance history detail description

Use Case Name View a single attendance history detail

• Users are able to view a single attendance history detail.

• Users view a single attendance history detail successfully.

• Users view a single attendance history detail.

1 Navigate to the Attendance page The system shows all the attendance in Personal Tab [A1], [A2] history of the users

2 Click into any available The system shows all the information Attendance History Card about that Attendance History Card

Users select employee name in The system will show all the

A1 the Employee Filter information about the Attendance of that employee including the attendance History

Click into any available The system shows all the information Attendance History Card about that Attendance History Card

Users select department name The system will show the selection of in the Department Filter Employee Filter according to the

Users select employee name in The system will show all the the Employee Filter information about the Attendance of that employee including the attendance History

Click into any available The system shows all the informationAttendance History Card about that Attendance History Card

3.2.2.4.14 Use case view this month attendance

Figure 3.15 Use case view this month attendance Table 3.15 Use case view this month attendance description

Use Case Name View this month attendance

• Users are able to view this month attendance.

• Users view this month attendance successfully.

• Users view this month attendance.

Navigate to the The system will show all the information

1 Attendance page in about the Attendance of that employee

Personal Tab [A1], [A2] including this month attendance

A1 Users select employee name in The system will show all the the Employee Filter information about the Attendance of that employee including this month attendance

Users select employee name in The system will show all the the Employee Filter information about the Attendance of that employee this month attendance

3.2.2.4.15 Use case view today attendance

Figure 3.16 Use case view today attendanceTable 3.16 Use case view today attendance description

Use Case Name View today attendance

• Users are able to view today attendance.

• Users view today attendance successfully.

1 Navigate to the Attendance page in The system shows today's

Personal Tab [A1], [A2] attendance status of the users

User with the role Manager, navigate to the Attendance page

Users select employee name in The system will show all the the Employee Filter information about the Attendance of that employee including today's attendance status

Users select employee name in The system will show all the the Employee Filter information about the Attendance of that employee today's attendance status

3.2.2.4.16 Use case view profile information

Figure 3.17 Use case view profile information Table 3.17 Use case view profile information

Use Case Name View profile information

• Users are able to view profile information.

• Users view profile information successfully.

1 Navigate to the The system will show all the information about Setting Profile page the Profile information of the user

3.2.2.4.17 Use case update profile information

Figure 3.18 Use case update profile information Table 3.18 Use case update profile information description

Use Case Name Update profile information

• Users are able to update profile information.

• Users update profile information successfully.

• Users click the “Save” button in the Setting Profile page in Information Box.

• Users have already signed and navigated to the Setting Profile page.

1 Edit Full Name Field The system view check validation of the

2 Edit Phone Field [E2] The system view check validation of the field

3 Edit Date Birth Field The system view check validation of the

4 Click the “Save” button The system view shows the success message in the Information Box

E1 The value of the Full The system will show the error message under Name Field is empty the field: “This field is required”

E2 The value of the Phone The system will show the error message underField is empty the field: “This field is required”

E3 The value of the Date The system will show the error message under Birth Field is empty the field: “This field is required”

E4 The value of the Date The system will show the error message under Birth Field is invalid the field: “Your birth date is invalid”

3.2.2.4.18 Use case view list employee

Figure 3.19 Use case view list employee Table 3.19 Use case view list employee description

Use Case Name View list employee

• Users are able to view list employee.

• Users view list employee successfully.

1 Navigate to the Employee The system will show the list of page [A1] Employees in the table

The user with the role The system will only show the Department

A1 Choose the department The system will show the list of Employees name in the Department in the table according to the Department

3.2.2.4.19 Use case view face data photos

Figure 3.20 Use case view face data photos Table 3.20 Use case view face data photos description

Use Case Name View face data photos

• Users are able to view face data photos.

• Users view face data photos successfully.

• Users Click the “View Face Data Photos” in the “Bulk Action”

• Users have already signed and navigated in the Employee page.

Click the “Bull Action” in the record of The system will show the

1 the Employee that want to view the Bulk Action Menu photos

2 Click the “View Face Data Photos” The system will show all the button in the Bulk Action Menu employee photos in the modal

3.2.2.4.20 Use case request employee to re-train

Figure 3.21 Use case request employee to re-train Table 3.21 Use case request employee to re-train description

Use Case Name Request employee to re-train

• Users are able to request employee to re-train.

• Users request employee to re-train successfully.

• Users Click the “Request to retrain” button in the “Bulk Action”

• Users have already signed and navigated in the Employee screen.

• Users request employee to re-train

1 Click the “Bull Action” in the record of the The system will show the Employee that want to re-train photos Bulk Action Menu

2 Click the “Request to retrain” button in the The system will show the

Bulk Action Menu success message

3.2.2.4.21 Use case modify work shift

Figure 3.22 Use case modify work shiftTable 3.22 Use case modify work shift description

Use Case Name Modify work shift

• Users are able modify work shift.

• Users modify the work shift successfully.

• Users Click the “Modify Work Shift Type” button

• Users have already signed and navigated in the Work Shift screen.

1 Click the “Modify Work Shift The system will show Modify

Type” button Work Shift Type Modal

2 Choose the Shift Type want to modify and edit some field of it

3 Click the “Save” button The system will show the success message

3.2.2.4.22 Use case verify leave request

Figure 3.23 Use case verify leave request Table 3.23 Use case verify leave request description

Use Case Name Verify leave request

• Users are able to verify leave request.

• Users verify leave request successfully.

• Users Click the “Approval” button in Bulk Action Menu

• Users have already signed and navigated the Leave Request

Click the “Bulk Action” button The system will show the Bulk

1 in the record of the leave Action Menu request want to approve

2 Click the “Approval” button The system will show the Approval

3 Click the “Approve” button The system will show the success message, and close the modal

3.2.2.4.23 Use case report in-valid an attendance history

Figure 3.24 Use case report in-valid an attendance history Table 3.24 Use case report in-valid an attendance history description

Use Case Name Report in-valid an attendance history

• Users are able to report invalid an attendance history.

• Users report invalid an attendance history successfully.

• Users Click into the Attendance History Card that want to report

• Users have already signed and navigated the Attendance

• Users report invalid an attendance history.

In Personal tab, choose filter type The system will show all the

1 is valid [A1] Attendance History Card that are currently valid

2 Click into the Attendance History The system will show the

Card that want to report Attendance History Card Detail

3 Click the “Report invalid” button The system will show the Report modal

5 Click the “Submit” button The system will close all modal and show the success message

In Management tab, choose The system will show all the department, chose employee Attendance History Card that are and choses filter type is valid currently valid

Click into the Attendance The system will show the Attendance A1 History Card that want to report History Card Detail

Click the “Report invalid” The system will show the Report button modal

Click the “Submit” button The system will close all modal and show the success message

3.2.2.4.24 Use case view attendance exception

Figure 3.25 Use case view attendance exception Table 3.25 Use case view attendance exception description

Use Case Name View attendance exception

• Users are able to view attendance exception.

• Users view attendance exception successfully.

• Users have already signed and screen.

1 Navigate to the Attendance The system will show all the

Exception Management [A1] Attendance Exception in the table

User with the role Admin The system only shows the Department

Chose the Check Out tab

Chose the department The system will show all the Attendance name in Department Filter Exception in the table according to the

3.2.2.4.25 Use case view attendance exception detail

Figure 3.26 Use case view attendance exception detail Table 3.26 Use case view attendance exception detail description

Use Case Name View attendance exception detail

• Users are able to view attendance exception detail.

• Users view attendance exception detail successfully.

• Users have already signed and screen and navigated to the Attendance Exception Management

• Users view attendance exception detail.

Click the “Bulk Action” button in the The system will show the Bulk

1 record of the Attendance Exception Action Menu that want to view detail [A1]

Click the “Approval” button in the The system will show the

2 menu Detail Modal of Attendance

Chose the Check Out tab The system only shows the

Click the “Bulk Action” button in the The system will show the Bulk A1 record of the Attendance Exception Action Menu that want to view detail

Click the “Approval” button in the The system will show the Detail menu Modal of Attendance Exception

3.2.2.4.26 Use case verify attendance exception

Figure 3.27 Use case verify attendance exception Table 3.27 Use case verify attendance exception description

Use Case Name Verify attendance exception

• Users are able to verify attendance exception.

• Users verify attendance exception detail successfully.

• Users have already signed and screen and navigated to the Attendance

Click the “Bulk Action” button in the The system will show the Bulk

1 record of the Attendance Exception Action Menu that want to view detail [A1]

Click the “Approval” button in the The system will show the

2 menu Detail Modal of Attendance

Click the “Approve” or “Reject” The system will show the

3 button in the modal success message and close the modal

Chose the Check Out tab The system only shows the

Click the “Bulk Action” button in The system will show the Bulk the record of the Attendance Action Menu

A1 Exception that want to view detail

Click the “Approval” button in The system will show the Detail the menu Modal of Attendance Exception

Click the “Approve” or “Reject” The system will show the success button in the modal message and close the modal

3.2.2.4.27 Use case update organization detail

Figure 3.28 Use case update organization detailTable 3.28 Use case update organization detail description

Use Case Name Update organization detail

• Users are able to update organization detail.

• Users update organization detail successfully.

• Users have already signed and screen and navigated to the Organization Details

1 Edit some field in The system will check validation for organization details each field

2 Click the “Save” button in The system will show the success the organization details box message

3.2.2.4.28 Use case create shift type

Figure 3.29 Use case create shift type Table 3.29 Use case create shift type description

Use Case Name Create shift type

• Users are able to create shift type.

• Users create shift type successfully.

• Click the “Modify Shift Type” button

• Users have already signed and screen and navigated to the Organization Details or the Work Shift

• Users create a new shift type.

Click the “Modify Shift Type” button in The system will show the

1 Organization Details [A1] Modify Shift Type Modal

Click the “New Shift Type” button The system will show all

2 the field need to fill in to create a new shift type

Click the “Create” button The system will close the modal and show the success message

Click the “Modify Shift Type” The system will show the Modify button in Work Shift Shift Type Modal

Click the “New Shift Type” The system will show all the field button need to fill in to create a new shift

Fill all the required field

3.2.2.4.29 Use case delete shift type

Figure 3.30 Use case delete shift type Table 3.30 Use case delete shift type description

Use Case Name Delete shift type

• Users are able to delete shift type.

• Users delete shift type successfully.

• Click the “Modify Shift Type” button

• Users have already signed and screen and navigated to the Organization Details or the Work Shift

1 Click the “Modify Shift Type” The system will show the button in Organization Details [A1] Modify Shift Type Modal

Click into the Shift Type want to The system will show all the

2 delete information of that Shift Type include the “Delete” button

3 Click the “Delete” button The system will show the alert modal

4 Click the “Delete” button The system will close all modal and show the success message

Click the “Modify Shift The system will show the Modify Shift

Type” button in Work Shift Type Modal

A1 Click into the Shift Type The system will show all the information of want to delete that Shift Type include the “Delete” button

Click the “Delete” button The system will show the alert modal

Click the “Delete” button The system will close all modal and show the success message

3.2.2.4.30 Use case create leave type

Figure 3.31 Use case create leave type Table 3.31 Use case create leave type description USE CASE - 41

Use Case Name Create leave type

• Users are able to leave shift type.

• Users create leave type successfully.

• Click the “Modify Leave Type” button

• Users have already signed and screen and navigated to the Organization Details or the Leave Request Management

• Users create a new leave type.

Click the “Modify Leave The system will show the Modify Leave

1 Type” button in Type Modal

2 Click the “New Leave Type” The system will show all the field need button to fill in to create a new leave type

4 Click the “Create” button The system will close the modal and show the success message

Click the “Modify Leave The system will show the Modify Leave Type” button in Leave Type Modal

Click the “New Leave Type” The system will show all the field need A1 button to fill in to create a new leave type

Fill all the required field

3.2.2.4.31 Use case delete leave type

Figure 3.32 Use case delete leave type

Table 3.32 Use case delete leave type description

Use Case Name Delete leave type

• Users are able to delete leave type.

• Users delete leave type successfully.

• Click the “Modify Leave Type” button

• Users have already signed and screen and navigated to the Organization Details or the Leave Request Management

• Users create a new leave type.

1 Type” button in Type Modal

Click into the Leave Type The system will show all the information

2 want to delete of that Leave Type include the “Delete” button

3 Click the “Delete” button The system will show the alert modal

4 Click the “Delete” button The system will close all modal and show the success message

Type” button in Leave Type Modal

Click into the Leave Type The system will show all the information of A1 want to delete that Leave Type include the “Delete” button Click the “Delete” button The system will show the alert modal

Click the “Delete” button The system will close all modal and show the success message

3.2.2.4.32 Use case view list department

Figure 3.33 Use case view list department Table 3.33 Use case view list department description USE CASE – 44

Use Case Name View list department

• Users are able to view list department.

• Users view list department successfully.

1 Navigate to Department The system only will show the list of

Management screen departments in the table

3.2.2.4.33 Use case assign manager to department

Figure 3.34 Use case assign manager to department Table 3.34 Use case assign manager to department description

Use Case Name Assign manager to department

• Users are able to assign manager to department.

• Users assign manager to department successfully.

• Click the “Bulk Action” button

• Users have already signed and screen and navigated to the Assigning Department Management

• Users assign manager to department.

Click the “Bulk Action” The system only will show Bulk Action

1 button in the record of the Menu employee want to assign

Click the “Assign” button The system will show the Drawer contains

2 the information of the employee and the selection field for assign department

3 Chose the department want to be assigned

4 Click the “Save” button The system will close the modal and show the success message

Figure 3.35 Use case create employee

Table 3.35 Use case create employee description

Use Case Name Create employee

• Users are able to create employee.

• Click the “Add New” button

• Users have already signed and screen and navigated to the

1 Click the “Bulk Action” The system will show the Drawer to button on the table create a new employee

2 Fill all the required field The system will validate for each field

3 Click the “Save” button The system will close the Drawer and show the success message

SYSTEM DESIGN

System Architecture

The figure above describes our team system architecture To demonstrate it, we will go straight to the face recognition flow and the training flow.

• The face recognition flow: When the user accesses to the face recognition route, the Client will get the models and the face data JSON from the faceapi.js library in the Server After loading them by using the service of faceapi.js on the Client, the Client will be ready for the facial recognition.

• The training flow (the face data collecting flow): When the user accesses the training face route, the Client will also get the models from the faceapi.js library in the Server After loading it, these models will proceed with the face detection function, we will run a process to capture the user’s face images and send it to the Server for the service of the face-api.js handle this data and extract distinctive facial features from them to generate a unique feature vector for each user’s face This collection of vectors will become the facial recognition features of that user and it will be saved into the file (face data JSON) in the Server.

Entity Relation Diagram

Database Diagram

Figure 4.3 Database Diagram Table 4.1 Database diagram description

Attendance Is a place to store attendance information

AttendanceException Is a place to store attendance exception information Department Is a place to store department information

DepartmentManager Is a place to store manager of a department informationEmployee Is a place to store email, password, employee information FaceTrainingImage Is a place to store all URL to the face data image when training finish

LeaveRequest Is a place to store all the leave request information LeaveType Is a place to store all the leave request type

Location Is a place to store all the location information

Organization Is a place to store all the organization information Permission Is a place to store all the permission information Resource Is a place to store all the screen in the client information Role Is a place to store all the role information

RolePermission Is a place to store all the permission for each role informationShiftType Is a place to store all the shift type informationURLManagement Is a place to store all the URL session informationWorkshift Is a place to store all the work shift information

Sequence Diagram

4.4.1 Take attendance by using facial recognition

Figure 4.4 Take attendance by facial recognition – part 1 sequence diagram

Figure 4.5 Take attendance by facial recognition – part 2 sequence diagram

Figure 4.6 Report attendance failure sequence diagram

Figure 4.7 Collect face data sequence diagram

Figure 4.8 View face data photos sequence diagram

4.4.5 Request employee to re-train

Figure 4.9 Request employee to re-train sequence diagram

Figure 4.10 Verify leave request sequence diagram

Activity Diagram

4.6.1 Take attendance by using facial recognition

Figure 4.11 Take attendance by using facial recognition activity diagram

Figure 4.12 Report attendance failure activity diagram

User Interfaces Design

Table 4.2 Screen for Unauthorized User

1 Login screen This screen is for user use to log into the system

Table 4.3 Screen for Authorized User: Employee, Manager, Admin

1 Dashboard This screen is for user to quickly navigate to other screens

2 Face Attendance This screen is for user use to take attendance

3 Report Attendance This screen is for user use to make a report for

This is screen is for user to able to:

Details 2 Adjust Organization’s information and policy

(if they have the permission)

This screen is for user to able to:

3 Work Shift 1 View their work shift

2 View and manage other employee work shift (if they have the permission)

4 Leave Request This screen is for user to able to view and

Personal manage their leave request

5 Profile Setting This screen is for user to able to view and adjust their profile’s information

This screen is for user to able to:

6 Attendance 1 View their attendance’s information

Management 2 View and manage other employee attendance’s information (if they have the permission)

7 First Time Login This screen is for user to able to update their profile’s information for the first time

Figure 4.13 Login screen Table 4.4 Login screen description

No Name Type Description Action result

1 Website Name Text Display box of the name of the website

2 Welcome Message Text Display the welcome message

3 Email Text Field Component Display the Email input field

4 Password Text Component Display the Password

5 Reveal Password Button Make the Password

Button Text Field’s value visible

6 Sign In Button Button Button for login Navigate to

Figure 4.14 Dashboard screen Table 4.5 Dashboard screen description

1 Dashboard Card Component The card that for Navigate to user to quickly specific screen navigate to other screens

2 Dashboard Card Text Display the welcome

3 Dashboard Card Icon Display the Email

4 Dashboard Card Button Display the

Navigate Button Password input field

Figure 4.15 Organization detail main screen Table 4.6 Organization detail main screen description

1 Organization Text Display the name of

2 Modify Shift Type Button Button for modify Open the Modify

Button shift type Shift Type

3 Modify Leave Type Button Button for modify Open the Modify

Button leave type Leave Type

4 Save Organization Button Button for save Save the

Information Button organization Organization information Information

5 Organization Name Component Display the

6 Late Arrival Hour Component Display the Late

Text Field Arrival Hour Input field

7 Late Arrival Component Display the Late

Minute Text Field Arrival Minute Input field

8 Early Leave Hour Component Display the Early

Text Field Leave Hour Input field

9 Early Leave Minute Component Display the Early

Text Field Leave Minute Input field

10 Annual Leave Text Component Display the Annual

11 Country Selection Component Display the Country

12 State Selection Component Display the Country

13 City Selection Field Component Display the Country

14 Address Text Field Component Display the Address

Figure 4.16 Modify shift type modal Table 4.7 Modify shift type modal description

1 Modify Shift Type Text Display the name of

2 Modify Shift Type Button Button for close the

3 Shift Type Item Component Display the Shift Show all the Shift

Button Type item Type Item Detail

4 Shift Type Item Component Display the detail of

5 Shift Type Name Text Display the Shift

6 Shift Type Name Component Display the Shift

Text Field Type Name Input field

7 Start Time Text Component Display the Start

8 End Time Text Component Display the End

9 Delete Shift Type Button Button for delete Show the Alert

Button the Shift Type modal

10 Delete Shift Type Button Button for save the Show the Alert

11 Add Another Shift Button Button for add new Show the Add

Type button Shift Type New Shift Type

4.7.2.3.2.1 Add new shift type form

Figure 4.17 Add new shift type form Table 4.8 Add new shift type form description

1 Modify Shift Type Text Display the name of

2 Shift Type Name Component Display the Shift

3 Start Time Text Component Display the Start

4 End Time Text Component Display the End

5 Cancel Shift Type Button Button for cancel the

Button process off create new Shift Type

6 Create Shift Type Button Button for create the

Figure 4.18 Modify leave type modal

Table 4.9 Modify leave type modal description

1 Modify Leave Type Text Display the name of

2 Modify Leave Type Button Button for close the

3 Leave Type Item Component Display the Leave Show all the

Button Type item Leave Type Item

4 Leave Type Item Component Display the detail of

5 Leave Type Name Text Display the Leave

6 Leave Type Name Component Display the Leave

7 Description Text Component Display the

8 Is Annually Component Display the Is

9 Delete Leave Type Button Button for delete the Show the Alert

10 Delete Leave Type Button Button for save the Show the Alert

11 Add Another Leave Button Button for add new Show the Add

Type button Leave Type New Leave Type

4.7.2.3.3.1 Add new leave type form

Figure 4.19 Add new leave type form Table 4.10 Add new leave type form description

1 Modify Leave Type Text Display the name of

2 Leave Type Name Component Display the Leave

3 Description Text Component Display the

4 Is Annually Component Display the Is

5 Cancel Leave Type Button Button for cancel the

Button process off create new Leave Type

6 Create Leave Type Button Button for create the

Figure 4.20 Department management screen Table 4.11 Department management screen description

1 Department Text Display the name of

2 Add New Button Button for create Open the Drawer

Department Button new department for create new department

3 Reset Table Button Button Button for reset the Reset table state state of the table

4 Department Table Table Display the list of departments

5 First Page Table Button Button for move to Move to the first

Button the first page of the page table

6 Previous Page Button Button for move to Move to the

Table Button the previous page of previous page the table

7 Next Page Table Button Button for move to Move to the next

Button the next page of the page table

8 Last Page Table Button Button for move to Move to the last

Button the last page of the page table

9 Page Counter Text Display the total page and the current page

10 Jump Page Input Input Display the Jump

11 Page Size Input Selection Display the Page

Input Size Selection Input field

12 Table Record Bulk Button Button for open the Open the bulk

Action Bulk Action Menu Action Menu

13 Bulk Action Menu Component Display all the action that can do of the record

14 Edit Action Button Button Button for open the Open the Edit

15 Delete Action Button Button for Delete the Open the Alert button curren record

Figure 4.21 Department management add – edit drawer

Table 4.12 Department management add – edit drawer description

1 Add New - Update Text Display the name of

2 Cancel Button Button Button for close the Close the drawer drawer

3 Save Button Button Button for create Create the new new department department

4 Department Name Component Display the

6 Country Selection Component Display the Country Country

Field Selection Input field Selection Field

7 State Selection Component Display the Country State Selection

Field Selection Input field Field

8 City Selection Field Component Display the Country City Selection

9 Address Text Field Component Display the Address Address Text

Figure 4.22 Assigning department management main screen

Table 4.13 Assigning department management main screen description

1 Assigning Text Display the name

2 Assigning Table Display the list of

3 Record Bulk Button Button for open Open the Bulk

Action the Bulk Action Action Menu

4 Bulk Action Menu Component Display all the action of the record

5 Assign Action Button Button for assign Open the Assign

Button department for Drawer employee

Figure 4.23 Assigning department management add – edit drawer

Table 4.14 Assigning department management add – edit drawer description

1 Drawer Header Text Display the name of the Drawer

3 Save button Button Button save the Save the assign department Assignment

4 Employee Full Component Display the

Name Text Field Employee Full

5 Email Text Field Component Display the Email

6 Role Text Field Component Display the Role

Figure 4.24 Employee management screen main screen Table 4.15 Employee management screen main screen description

1 Employee Text Display the name of

2 Add New Button Button for create Open the create

Employee Button new employee new employee

3 Record Bulk Button Button for open the Open the Bulk

5 Edit Employe Button Button for edit the Open the Edit

Action Button information of the Drawer employee

6 View Face Data Button Button for view the Open the View

Photos Action employee photos Photos Modal

7 Request To Retrain Button Button for request Open the alert

Action Button the employee to retrain their photos data

8 Delete Employee Button Button for deleting Open the alert

Figure 4.25 Employee management screen add – edit drawer

Table 4.16 Employee management screen add – edit drawer description

3 Save button Button Button save the Save the employee employee information information

6 Password Text Component Display the

7 Role Selection Component Display the Role

8 Department Text Component Display the

9 Phone Text Field Component Display the Phone

10 Gender Radio Field Component Display the Gender

11 Birthday DateTime Component Display the Birthday

13 Country Selection Component Display the Country

14 State Selection Component Display the Country

15 City Selection Field Component Display the Country

16 Address Text Field Component Display the Address

4.7.2.6.4 View employee photo big picture

Figure 4.26 View employee photo big picture Table 4.17 View employee photo big picture description

1 Modal Header Text Display the name of the Modal

2 Download Photo Button Button for download Open the

Button the photo download alert

3 Full Screen Button Button Button for view the View photo in photo in full screen full screen

4 Close Modal Button Button for close the Close the Modal

Figure 4.27 Request to retrain alert

Table 4.18 Request to retrain alert description

1 Alert Header Text Display the name of the Alert

2 Alert Message Text Display the message

3 Cancel Button Button Button for close the Close the Alert

4 Accept Alert Button Button for accept the Accept alert

Figure 4.28 Work shift screen Table 4.19 Work shift screen description

Name Type Description Action result

1 Work Shift Header Text Display the name of the Screen

2 Modify Shift Type Button Button for open the Open the modify

Button modify shift type shift type modal modal

4 Department Component Button for selection Open the

5 Submit Department Button Button for submit

Selection Button the selection filter

7 Employee Component Button for selection Open the

8 Date Type Filter Component Display the Date

9 Date Type Work Button Button for filter Date Set Day Type option Type by Work Filter to Work

10 Date Type Leave Button Button for filter Date Set Day Type option Type by Leave Filter to Leave

11 Calendar Today Button Button for move the Move calendar to button calendar to the the current date current date

12 Previous Month Button Button for move the Move calendar to

Button calendar to the the previous previous month month

13 Next Month Button Button Button for move the Move calendar to calendar to the next the next month month

14 Calendar Day Component Display the day in calendar

15 Calendar Work Component Display the Work Open the Work

Shift Card shift in the day of Shift Detail the calendar Modal

16 Work Shift Detail Component Display all the modal information about the work shift

17 Work Shift Detail Text Display the name of modal header the work shift detail modal

18 Work Shift Delete Button Button for delete the Open the Delete

19 Close Modal Button Button for close the Close The modal

20 Shift Type Component Display the Shift Open the Shift Selection Field Type Input Selection Type Selection

21 Shift Date Text Display the the shift date

22 Shift Time Text Display the shift time

23 Assign To Component Display the Assign Open the

Selection Field To Employee Input Selection of

24 Allow Late Arrival Component Display the Allow Open the Allow Selection Field Late Arrival Input Late Arrival

25 Allow Early Late Component Display the Allow Open the Allow

Selection Field Early Late Input Early Late

Figure 4.29 Leave request personal main screen Table 4.20 Leave request personal main screen description

1 Leave Request Text Display the name of

2 Annually Status Component Display the annual status of the employee

3 Total Annually Component Display the

Text Field information about the Total Annually

4 Annually Leave Component Display the

Used Text Field information about the Annually Leave Used

5 Annually Leave Component Display the

6 Date Filter Component Display the date filter

7 Date Filter Component Display the Date

8 Add New Leave Button Button for create Open the create Request Button new leave request new leave request drawer

11 View Action Button Button for view the Open the View

Figure 4.30 Leave request personal add-edit drawer Table 4.21 Leave request personal add-edit drawer description

4 Status Selection Component Display the Status

5 Leave Type Component Display the Leave

Selection Field Type Input Selection

6 Reason Text Field Component Display the Reason

7 Note Text Field Component Display the Note

8 Start Date Component Display the Start

DateTime Field Date input Datetime

10 End Date DateTime Component Display the End

Figure 4.31 Leave request management main screen Table 4.22 Leave request management main screen description

1 Leave Request Text Display the name of

2 Modify Leave Type Button Button for modify Open the Modify

Button leave type Leave Type

3 Department Filter Component Display the department Filter

4 Department Component Display the Open the

Selection Field Department Input Department

Selection Button the department selection filter

6 Date Filter Component Display the date

7 Date Selection Component Display the Date Open the Date

Field Input Selection Field Selection

10 Edit Action Button Button Button for edit the Open the Edit leave request Drawer

11 Delete Action Button Button for delete the Open the delete

Figure 4.32 Leave request management add-edit drawer Table 4.23 Leave request management add-edit drawer description

4 Status Selection Component Display the Status

7 Role Text Field Component Display the Role

8 Department Text Component Display the

9 Leave Type Text Component Display the Leave

10 Leave Type Component Display the Leave

11 Reason Text Field Component Display the Reason

13 Requested Date Component Display the

DateTime Field Requested Date input Datetime Field

14 Start Date Component Display the Start

DateTime Field Date input Datetime

15 End Date DateTime Component Display the End

Figure 4.33 Attendance screen Table 4.24 Attendance screen description

1 Personal Tab Button Button for move to Move to personal personal tab tab

2 Management Tab Button Button for move to Move to management tab management tab

4 Department Component Display the Opent the

7 Employee Component Button for selection Open the

8 Employee brief Component Display the brief information box information about the employee

9 Employee Brief Text Display the name of information header the brief

10 Employee Avatar Image Display the Image of the employee

11 Employee Name Text Display the name of

12 Employee Role Text Display the Role of

13 Employee Phone Text Display the Phone

Number Text field Number of the employee

14 Employee Email Text Display the Email of

15 Employee This Component Display the This

Detail information Detail information of box the employee

16 Employee This Text Display the name of

17 Total Attendance Component Display the

Card information about the Total Attendance

18 Total Leave Days Component Display the

Card information about the Total Leave Days

19 Total Working Component Display the

Hours Card information about the Total Working Hours

20 Total Late Arrival Component Display the

Card information about the Total Late Arrival

21 Total Early Leave Component Display the

Card information about the Total Early Leave

22 Employee Today Component Display Today

Attendance Attendance information box information of the employee

23 Employee Today Text Display the name of

Attendance the box information header

24 Working Hours Component Display the

Card information about the Working Hours

25 Check In Card Component Display the information about the Check In

26 Check Out Card Component Display the information about the Check Out

27 Late Arrival Card Component Display the information about the Late Arrival

28 Early Leave Card Component Display the information about the Early Leave

29 Attendance History Component Display the list information box Attendance History card of the employee

30 Attendance History Text Display the name of header the box

31 Attendance History Component Display the

32 Attendance History Button Button for filter Set Attendance Type Valid option Attendance History History Type

Type by Valid Filter to Valid

33 Attendance History Button Button for filter Set Attendance Type Invalid option Attendance History History Type

Type by Invalid Filter to Invalid

34 Date Type Filter Component Display the Date

35 Date Type Month Input Display the Date

Text Field Type Month Input

36 Date Type Year Input Display the Date

Text Field Type Year Input

37 Date Type Filter Button Button for submit

Submit Button the Date Type Filter value

38 Attendance History Component Display the brieft Open the

Card information about Attendance the attendance History Card history card Detail

39 Attendance History Text Display the date of

40 Card Check in Text Display the check in

Time time of the card

41 Card Check out Text Display the check

Time out time of the card

42 Card Tag Text Display all the tag of the current card

Figure 4.34 Attendance history card detail Table 4.25 Attendance history card detail description

2 Modal Card Tag Text Display all the tag of the current Modal Card

3 Report Invalid ( Button Button for report/ Open the

Convert to valid ) convert card to report/convert

4 Check in Date Text Text Display the Check in

5 Check out Date Text Display the Check

6 Check in Image Image Display the Check in

7 Check out Image Image Display the Check out Image

8 Check in Time Text Text Display the Check in

9 Check out Time Text Display the Check

10 Late Arrival Time Text Display the Late

11 Early Leave Time Text Display the Early

4.7.2.10.3 Report/Convert to invalid/valid modal

Figure 4.35 Report/Convert to invalid/valid modal Table 4.26 Report/Convert to invalid/valid modal description

1 Modal Header Text Display the name of the card

2 Modal Close Button Button for close the Close the modal

4 Submit Button Button Button for submit Submit the the report/convert report/convert action action

Figure 4.36 Attendance exception main screen Table 4.27 Attendance exception main screen description

1 Attendance Text Display the name of

3 Department Component Display the Open the

5 Date Filter Component Display the date

6 Date Selection Component Display the Date Open the Date

Field Input Selection Field Selection

7 Check In tab Button Button for move to Move To Check

Check In tab In tab

8 Check Out tab Button Button for move to Move To Check

Check Out tab Out tab

9 Approval Action Button Button for approval Open the

Button the attendance Approval Modal exception

Figure 4.37 Approval attendance exception modal Table 4.28 Approval attendance exception modal description

2 Modal Tag Text Display all the tag of the current Modal

3 System Shift Time Text Display the System

4 Employee Report Text Display the

Shift Time Text Employee Report

5 System Image Image Display the System

6 Employee Report Image Display the

7 System Employee Text Display the System

Name Text Field Employee Name

Email Text Field Employee Email

13 Reject Button Button Button for reject the Reject the attendance exception attendance exception

14 Approve Button Button Button for approve Approve the the attendance attendance exception exception

SYSTEM IMPLEMENTATION AND TESTING

System Implementation

• Develop in Visual Code IDE

• Run with NodeJS server background

• Using Postman to check APIs.

• Develop in Visual Code IDE

• Source code management is GitHub and also the tool provide by GitHub is GitHub Desktop.

• Link hosting: https://unfame.tech:3000

• Link back-end (require access): https://github.com/UnFameeee/Attendance- By-Face-Recognition

• Link front-end (require access): https://github.com/UnFameeee/Attendance- By-Face-Recognition

Operating System Linux Operating system and platform for development

Database management MySQL 8.0 Used to create & manage the database for system

Web server Nginx Deployment environment

Web browser Chrome Testing browser

Requirement Internet Connection Cable, Wi-Fi Cable, Wi-Fi (50 Mbps or more)

Processor CPU 1 Core CPU 2 Core or more

Memory 2GB RAM 4GB RAM or more

Storage 20GB 30GB or more

Because all the application running on NodeJS platform, so we decide to use Docker for deployment In the new VPS configuration, we need to install and update all Ubuntu requirement And we have to install Docker on the VPS server, the installation progress is in on the Docker docs.[6]

We have setup a docker-compose.yml file on the VPS server to running our server on This installation needs to have SSL certificate because we need to grant access to the webcam on the website We will use Certbot to achieve this, the installation is on the Certbot website.[7]

Figure 5.1 Docker-compose file for hosting

After have this configuration on the VPS server, type the command “docker compose up -d” and wait for it to install and enjoy the product.

Testing

5.2.1.1 List of stages of testing

• Data and database integrity testing.

5.2.2.1 Test case for Sign In Screen

Table 5.3 Test case for Sign In screen

Test Test Expected Actual Pass / Fail / case Description Test steps Result Results Not executed

Can sign in As Passed

1 On the the website, expected website, enter the login page

Sign in to the your Email/ will navigate

T01 Password into to the app the textbox dashboard

2 Click “Sign screen, and in” button notify sign in successfully.

Sign in to the 1 On the app, must be expected enter your shown the app but use

T02 Email/ Password message box: the wrong into the text “The email Email. field was not found.”

1 On the app, The system As Passed expected enter your must be

Email/ Password shown the app but use

T03 into the text message box: the wrong field “Password is

2 Click “Sign not in” button matching.”

Checking 1 On the app, The system As Passed must be expected

Email enter your shown the validation by Email/Password message

T04 typing an into the text under the invalid email field. email text in the email 2 Click “Sign field: “Invalid field in” button Email.”

Checking The system As Passed

1 On the app, must be expected password enter your shown the validation by

T05 into the text under the invalid field email text password in

2 Click “Sign field: the password in” button “Password is field too short.”

5.2.2.2 Test case for Dashboard Screen

Table 5.4 Test case for Dashboard screen

Expected Results / Not case Test Description Test steps

The system As Passed will only expected display:

T06 role Employee in Work Shift,

Dashboard Attendance, and Setting navigation card

The system As Passed will only expected display:

Users with the People, Leave

T07 role Manager in Work Shift,

Dashboard Attendance and Setting navigation card

The system As Passed will display: expected People,

Attendance, and Setting navigation card

Users with the Click the The system As Passed role will navigate expected

Admin/Manager the user to

Click the The system As Passed

Users navigate to “Manage will navigate expected

T10 Organization Organization” the user to

Click the The system As Passed will navigate expected

Users navigate to the user to

T11 Leave Request Leave button in

Users navigate to will navigate expected

Work Shift the user to

Users navigate to will navigate expected

Users navigate to Click the will navigate expected

T14 Profile Setting button in Profile Screen

5.2.2.3 Test case for Organization Management Screen

Table 5.5 Test case for Organization Management screen

Test Test Expected Actual Pass / Fail / case Test steps Results Not executed

The system will As Passed Users with the only display all expected the organization

Employee in the read-only

The system will As Passed Users with the only display all expected the organization

T16 role Manager information in in the read-only

The system As Passed displays all the expected organization information text Users with the field (edit-able),

Users with the The system As Passed saves the new expected role Admin 1 Edit some organization

T18 can modify fields of the information and the organization notify which the organization’s text field success message information

2 Chose the Users with shift type to The system want to display will role Admin modify and can modify close the modal,

T19 edit it the shift type alert, and

“Save” organization success message button

“Accept” button in the alert

“Modify Shift Type” The system

Users with the display will shift type to role Admin want to delete close the modal,

T20 can delete the and edit it alert, and shift type of

2 Chose the Users with shift type to The system want to display will role Admin modify and can modify close the modal,

T21 edit it the leave type alert, and

“Save” organization success message button

2 Chose the The system shift type to

Users with the display will want to delete role Admin and edit it close the modal,

3 Click the alert, and leave type of

“Delete” display a organization button success message

5.2.2.4 Test case for Department Management Screen

Table 5.6 Test case for Department Management screen

Test Test Expected Actual Pass / Fail / case Test steps Results Not executed /

1 Click the The system As Passed

Drawer will button on the the role table close, save

T23 Admin addnewDepartment 2 Field all therequired field3 Click the the new dataand show asuccess message

404 API button on the The system row of the Edit Drawer Users with department will close, want to save the new

T24 the role modify data and

“Delete” success button and message Click “Delete” button in the Alert

5.2.2.5 Test case for Assigning Management Screen

Table 5.7 Test case for Assigning Management screen

Users with 1 Click the The system As Passed

T25 the role “Bulk Action” Edit Drawer expected

Admin button on the will close, assign row of the save the new employee to employee that data and department want to assign show a

3 Change or choose the new department for this employee

1 Click the As Passed expected

“Bulk Action” The system button on the will this is an Users with row of the invalid the role employee that submission

Admin want to assign and show the

T26 assign 2 Click the invalid employee to “Assign” button message in the empty 3 Chose the the selection department department for department this employee field

Users with 1 Click the The system Error Failed

“Bulk Action” Edit Drawer the role button on the will close,

Admin row of the save the new

T27 assign employee that data and employee to want to assign show a their already

2 Not choosing success have a any message department new department

5.2.2.6 Test case for Employee Management Screen

Table 5.8 Test case for Employee Management screen

1 Click the The system As Passed

Users with the button on the close, save

T28 role Admin/ table the new data

Manager add 2 Field all the and show a new Employee required field success

“Bulk Action” button on the The system row of the

Users with the Edit Drawer employee that will close, role Admin/ want to edit save the new

2 Click the show a the employee

Users with the 1 Click the The system As Passed role Admin/ Edit Drawer expected

T30 Manager will close, button on the delete save the new row of the employee data and employee that show a want to delete success information message

“Delete” button in the alert

1 Click the The system As Passed expected

“Bulk Action” will display button on the

Users with the the modal row of the which role Admin/ employee that contains all

T31 Manager view want to view the face data employee face

2 Click the photos of the data photos

“View Face according Data Photos” employee button

1 Click the The system, As Passed expected

Users with the “Bulk Action” save the new role Admin/ button on the data and

Manager row of the show the

T32 request employee that success employee to want to view message of retrain face 2 Click the requesting to data photos “Request to retrain retrain” button

5.2.2.7 Test case for Workshift Management Screen

Table 5.9 Test case for Workshift Management screen

The system will As Passed display expected information about the

Users with the current department that

T33 role the user is in,

Employee in the day filter,

Work Shift the calendar of the current month, and the work shift if they have

The system will As Passed display expected information about the current department that Users with the the user is in, the employee

T34 role Manager filter, the date in Work Shift filter, the calendar of the current month, and the work shift if they have

Users with the The system will As Passed only display the expected

T35 role Admin in information the Work Shift department filter, the date filter, modify shift type button

1 Choosing As Passed department in expected the Users with the department filter role Admin

2 Click the The system choosing

“Submit” display the filter work button right calendar

3 Choosing according to department, employee in the filters date type and the employee employee filter filter

4 Choosing date type in date type filter

Users view Click on the display the expected modal contain work shift

T37 the detail of all the want to view the work shift information of the work shift

1 Click on The system As Passed the date that expected display will

Users with the want to create close the role Admin/ a work shift modal, save the

T38 Manager (if there have data and show create a work another work the success shift shift, click on message the empty space on that date) – the modal open

3 Choosing the employee that wants to assign the work shift

1 Click on As Passed the work shift expected that want to The system Users with the be deleted – display will the modal close the role Admin/ open modal, delete

T39 Manager 2 Click the the work shift delete a work “delete icon” and show the shift button success

1 Click on As Passed the work shift expected that want to The system Users with the be modified – display will the modal close the role Admin/ open modal, save the

2 Modify data and show modify a some field the success work shift

The system As Passed display will expected

Users move Click on the move the calendar to the the calendar

T41 “Next icon” next month and to the next button display all the month work shift in that month

Users move display will expected

Click on the move the the calendar calendar to the

T42 to the previous month icon” button previous and display all month the work shift in that month

The system As Passed display will expected Users move Click on the move the calendar to the the calendar

T43 “Today” current month to the current button and display all month the work shift in that month

5.2.2.8 Test case for Leave Request Personal Screen

Table 5.10 Test case for Leave Request Personal screen

Users in The system will As Passed

Personal about the current leave quest status, date filter, and leave request report table

The system will button – the close the drawer, Users create drawer open save the data,

2 Field all new leave update the leave

T45 requestreport the requirefields withvalid value request statusand show the success message

1 Click the The system will As Passed expected

“Bulk show the drawer Users view Action” on have the the record of information of

T46 leave request the leave the leave request report detail request report that want report that to view want to view

2 Click the The system will As Passed filter the table expected

Users using date filter according to the

T47 the date 3 Choosing value of the date filter the date that filter want to filter

5.2.2.9 Test case for Leave Request Management Screen

Table 5.11 Test case for Leave Request Management screen

The system As Passed will display expected information about the

Users With current department that

Role Manager the user are in,

T48 in Leave date filter and

Management request record of other employee in the department

Users With will display the expected department

T49 Role Admin in filter, and

1 Choosing As Passed expected department in the Users With department The system filter will display

“Submit” request table request by button according to department and

3 Choosing these filter by date the date that want to filter in the date filter

“Bulk Action” in the record of the leave The system request that

Users With will close the want to drawer, save

Role Admin/ approve – the data and

T51 Manager drawer open show the approve the

2 Changing success leave request the status message field to

“Bulk Action” in the record of the leave request that The system want to

Users With will close the reject – drawer, save

Role Admin/ drawer open the data and

2 Click the show the reject the leave

3 Changing message the status field to Reject

Manager changing status of the overdate the leave request

“Bulk Action” in the record of the leave request that want to reject – drawer open

3 Change the status and click the

The system will show the message notify that the leave request is overdate and change its status to overdate

5.2.2.10 Test case for Attendance Management Screen

Table 5.12 Test case for Attendance Management screen

The system As Passed will only expected display the

Users with personal tab which contain the role all the

Attendance attendance personal status such as: detail employee, ThisMonth

Attendance Detail, Today Attendance and

The system As Passed will display the expected personal tab which contain all the information about user attendance status such as:

Users with detail the role employee, This

Attendance Attendance personal Detail, Today

Attendance History and Management tab : department name, employee filter

Users with The system As Passed will display the expected the role personal tab

Attendance all the personal information about user attendance status such as: detail employee, This Month

Attendance Detail, Today Attendance and

Attendance History and Management tab : department filter, employee filter

Users using As Passed type filter The system expected and date 1 Choosing will display filter in attendance

Attendance 2 Choosing date history data

History in filter according to

Users view Click into the The system As Passed will display the expected attendance attendance card modal contain detail in in the all the

History in History that about the

Tab want to view the attendance

T59 Users with Choosing the The system As Passed role employee’s will display all expected

Manager name in the the Attendance using filter that want Information of employee to view their the employee filter to in Attendance according to

Users with 1 Choosing the As Passed expected department in role Admin The system department filter using will display all

2 Choosing the department the Attendance employee’s

T60 filter and Information of name in the employee the employee filter that want filter to in according to to view their

Users with The system As Passed role Admin/ Click into the expected will display the

Manager attendance card modal contain attendance in the all the detail in

Attendance History that about the

History in want to view the attendance

Users with 1 Chose type The system As Passed role Admin/ filter is Valid will display expected

Manager 2 Click into the close both the report

T62 attendance card report modal invalid in the and detail attendance Attendance modal, save in Tab History that the date and

Management want to report show the

4 Write the reason report in the note

1 Chose type As Passed expected filter is Invalid

Users with 2 Click into the The system attendance card role Admin/ in the will display

Manager Attendance close both the convert History that convert modal report and detail

T63 want to report invalid to 3 Click the modal, save valid “Report Invalid” the date and attendance button show the in Tab 4 Write the success

Management reason in the message note

5.2.2.11 Test case for Attendance Exception Management Screen Table

5.13 Test case for Attendance Exception Management screen

Users with the The system As Passed will display expected

T64 role Manager the department in name, date

Exception and check out tab and table of attendance exception records

The system As Passed will display expected the department

Users with the filter, date filter, check in

T65 role Admin in and check out

Exception of attendance exception records

Users with the department will display role Admin name in the data of using department attendance

T66 department filter exception in filter, date 2 Choosing the table filter and date filter according to check in or 3 Choosing these filter check out tab check in or check out tab

Users with the will display expected

1 Choosing the data of role Manager date filter attendance

2 Choosing exception in filter and check in or the table check in or check out tab according to check out tab these filter

“Bulk Action” in the record of the Users with the attendance The system exception that will close the role Manager/ want to modal, save

T68 Admin approve the data and approve 2 Click the show the attendance “Approval” success exception button – the message modal open

“Approve” button in the modal

“Bulk Action” in the record of the The system attendance will close the

Users with the exception that modal, save role Manager/ want to reject the data and

T69 Admin reject 2 Click the show the attendance “Approval” success exception button – the message modal open

“Reject” button in the modal

5.2.2.12 Test case for Profile Setting Screen

Table 5.14 Test case for Profile Setting screen

Test Test Actual Pass / Fail / case Test steps Expected Result Results Not executed

The system will As Passed display all the expected

Users in information about the user

Setting information and user avatar

The system will expected some field display save the

Users editing that are data, and show

T71 their editable the success information 2 Click the message

“Upload” button or The system will drag the display save the Users change image into data, and show

T72 avatar the imagezone the success message

5.2.2.13 Test case for First Time Login Flow

Table 5.15 Test case for First Time Login flow

Users Login will navigate expected user into the

T73 in the first first time time login screen

1 First upload As Passed expected their photo

2 Choose or drag Users the photo in the The system image zone update 3 Click the “Save will success information message of

T74 in the firsttime loginscreen this photo”4 Update theircomm information updateinformation

The system As Passed will show the expected

Users got modal asking user to request training facial training

T75 by scanning facial for the QR code the first and access to time the URL from that QR code

5.2.2.14 Test case for Collect Face Data Flow

Table 5.16 Test case for Collect Face Data flow

Test Test Expected Actual Pass / Fail / case Test steps Results Not executed /

1 Using As Passed expected webcam or cell phone The system will front camera show the for training success

T76 trainingfacial the head updown, to left the training dataof that user and navigate them and right to dash board until the training process bar complete

5.2.2.15 Test case for Attendance Flow

Table 5.17 Test case for Attendance Flow

Test Test Actual Pass / Fail / case Test steps Expected Result Results Not executed

1 Navigate The system will As Passed expected to the face- scan user face User check attendance and compare the

T77 in by face webcam database then attendance

3 Wait until show the success the process check in alert complete

User check 1 Navigate The system will As Passed scan user face expected

T78 out by face to the face- and compare the attendance attendance data in the

3 Wait until the process complete database then show the success check in alert and navigate the user to the sign in screen

5.2.2.16 Test case for Attendance Exception Flow

Table 5.18 Test case for Attendance Exception Flow

Test Expected Actual Pass / Fail / case Test Description Test steps Results Not executed

1 In Face Passed attendance screen, in the warning modal User tries to 2 Click the The system

“Report” check in and button – will save the check out so navigate to data and many times but navigate the

T79 not working andthey have to usethe attendanceexception method reportattendanceexceptionscreen user to thesign inscreen

3 Field all the required field

CONCLUSION

Conclusion

• Created database using code-first, deploy database on VPS Ubuntu, and connect the with the back-end server.

• Create all the APIs are need to use in the project

• Built a back-end with Model-Service-Controller-Route architecture.

• Deploy back-end server on the VPS Ubuntu for the client can connect anytime.

• Human Resource Management: Complete features such as: Login, register, collect face data, re-train face data, view face data image, profile management, employee management, organization management, department management, leave request management, work shift management.

• Facial Recognition Attendance System: Complete features such as: Record Attendance, Record attendance error.

• Clearly understand deploy the application by using docker on Ubuntu server.

• Clearly understand all the technique about React and Express (NodeJS) framework.

• Understand to how to use and handle all the image from the client sending to the server.

• Understand clearly how to use the faceapi.js library to implementation of the facial recognition system.

Advantage

• The Charka UI component help fast to run and decrease development time.

• The system architecture is designed readably and reasonably, so the API request and response between the client and the server is very stable and fast.

• The whole application is deployed on the VPS so it always in available state The customer can access the web anytime.

• Support tracking all the attendance record Have the attendance statistic for the employee can easily tracking.

• Support handling the face attendance exception, can re-train to collect the face data again to resolve the face attendance error.

• The attendance system check-in and check-out can base on the work shift and the early leave and late arrival setting in the organization management.

• Have the leave request system so the employee can request their leave day if they have something busy.

Disadvantage

• Human Resource Management is not completed, some incomplete features such as: manage salary, manage contract, manage experience, …

• The UI in the employee management and department management does not have the search bar.

• The training face UI maybe not so attractive, need to be improve in the future.

Future Planning

• In the next development strategy, we will make the mobile application which can receive notification when the attendance has been recorded so the employee can easily track their attendance success or not We will improve the

UI of the face recognition system.

• Adding the salary management and contract management to the HRM system Also have the payslip and payroll to the salary management.

• Adding the notification system for the employee and the manager can easily tracking the things happen in the system.

[1] "React documentation," [Online] Available: https://react.dev/reference/react

[2]"Express documentation," [Online] Available: https://expressjs.com/en/5x/api.html

[3] "NodeJS Documentation," [Online] Available: https://nodejs.org/en/docs

[4]"faceapi.js Documentation," [Online] Available: https://justadudewhohacks.github.io/face-api.js/docs/index.html

[5] "Chakra UI Documentation," [Online] Available: https://chakra- ui.com/getting-started

[6] "Docker Documentation," [Online] Available: https://docs.docker.com/[7] "Certbot Documentation," [Online] Available: https://certbot.eff.org/

Tiêu đề	Building An Attendance Checking System Applied Face Recognition
Tác giả	Nguyen Pham Quoc Thang, Thach Duong Duy
Người hướng dẫn	Nguyen Duc Khoan M.Sc.
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis
Năm xuất bản	2023
Thành phố	Ho Chi Minh City

Định dạng
Số trang	167
Dung lượng	8,87 MB