Buiding an attendance checking system applied face recognition

14 Table 3.3 Use case take attendance by using facial recognition description .... 134 Table 5.13 Test case for Attendance Exception Management screen ..... This includes profile managem

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 develop an efficient face attendance system, it is essential to integrate machine learning techniques with advanced data flow technology, enabling the automatic and rapid analysis and recognition of employees' faces with high accuracy.

The system features an intuitive interface that facilitates easy interaction for employees, allowing them to register their faces, access attendance records, and utilize various essential 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

Our research into attendance checking systems revealed that current methods, primarily ID card and fingerprint scanning, have significant limitations ID card systems necessitate the distribution of cards to employees, which can be easily lost, leading to additional costs and potential inaccuracies in attendance records due to employees assisting one another or forgetting their cards Conversely, fingerprint scanning lacks effectiveness and flexibility, particularly in cases where fingers are injured or not clean This highlights the need for a more efficient and cost-effective solution in attendance management.

To address the challenges faced by businesses in managing attendance and reducing unnecessary costs, we developed an integrated attendance system utilizing facial recognition technology This solution not only streamlines the attendance checking process but also minimizes employee frustration caused by scanning errors.

2 machine learning We believe that this system would remove the mentioned issues with additional safety and convenience advantages coming with a touchless process.

Objective

The system enables employees to record their attendance through facial recognition, while allowing customers to manage attendance, work shifts, and leave requests via a web application Additionally, employees can access their work shifts and attendance records through the system.

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

Many organizations struggle with the manual and time-consuming process of employee attendance management, often relying on outdated methods like paper forms and email chains This reliance leads to delays, miscommunication, and challenges in tracking requests Traditional approaches, such as paper-based attendance sheets and manual spreadsheet entries, are error-prone and lack real-time visibility, making attendance management inefficient.

Our attendance checking system utilizes face recognition technology to streamline the leave request process, allowing employees to submit requests digitally while enabling managers to review and approve them efficiently By integrating advanced training methods for attendance tracking, our app eliminates manual data entry, resulting in a more accurate and efficient solution Employees can conveniently check in and out using their faces, significantly reducing administrative burdens and ensuring precise 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 widely-used JavaScript library for building user interfaces, characterized by its component-based architecture that promotes the creation of reusable UI components This approach allows for efficient updates and rendering of only the necessary interface parts With its virtual DOM, ReactJS enhances performance by reducing actual DOM manipulation, leading to faster rendering and a better user experience Additionally, its declarative syntax simplifies code comprehension and maintenance, empowering developers to construct complex UIs effectively.

Chakra UI is a lightweight and accessible component library that streamlines UI development with ReactJS It features a wide array of pre-built components adhering to modern design principles, which significantly reduces development time and effort Additionally, Chakra UI provides customizable styles and theming options, enabling developers to create consistent and visually appealing interfaces with ease Its intuitive API and extensive documentation further enhance the development experience.

5 documentation, Chakra UI simplifies the process of building responsive and accessible user interfaces.[5]

The choice of ReactJS and Chakra UI for developing a face recognition-based attendance checking system is influenced by their significant benefits ReactJS provides a strong ecosystem of libraries and tools, making it a favored option for front-end development Its efficient rendering performance and virtual DOM facilitate quick and seamless user interactions, even in complex user interfaces Furthermore, ReactJS's component-based architecture enhances code reusability and maintainability, leading to a more scalable and manageable codebase.

Chakra UI enhances ReactJS by offering a set of pre-designed components that adhere to design best practices, which saves development time and guarantees a consistent, visually appealing user interface throughout the application Its customization options and theming capabilities enable easy integration with the app's branding and design needs.

2.2.2 Back-end: NodeJS with Express – Typescript

Figure 2.2 NodeJS and Express logo

Node.js is a powerful runtime environment that enables server-side execution of JavaScript code Its event-driven, non-blocking I/O model enhances scalability and efficiency for web application development With a vast ecosystem of packages and libraries available through npm, developers can easily utilize existing modules and tools to optimize their development workflows.

Express is a lightweight and efficient web application framework for Node.js, designed to streamline the development of web APIs and server-side applications It offers a comprehensive set of features that simplify HTTP request handling and route definition, facilitating an easier development process.

6 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 choice of Node.js and Express for developing a face recognition-based attendance checking system is influenced by their key advantages Node.js's asynchronous, event-driven architecture enables the application to efficiently manage numerous concurrent requests, ensuring optimal performance and responsiveness Its non-blocking I/O model is ideal for real-time applications, making it particularly effective for handling employee attendance and leave requests.

Express is a lightweight and flexible framework that serves as a robust foundation for developing RESTful APIs and back-end services It streamlines the definition of routes, request handling, and middleware integration, thereby increasing the efficiency of back-end development With its middleware support, Express facilitates the seamless addition of functionalities like authentication and database access, which significantly improves the app's security and data management.

MySQL is a widely-used open-source relational database management system (RDBMS) that excels in web development It offers a dependable and scalable solution for managing structured data, making it ideal for diverse applications, such as developing an attendance checking system utilizing face recognition technology.

MySQL is an ideal choice for developing a face recognition-based attendance checking system due to its robustness and stability With a proven track record, MySQL is recognized as a reliable and high-performing database solution.

The system is designed to efficiently manage large volumes of data and handle multiple concurrent connections, making it ideal for applications that require effective data storage and retrieval, such as employee information management and attendance tracking.

MySQL provides outstanding scalability features, enabling horizontal scaling through methods such as database sharding and replication This capability allows applications to manage higher data loads and support an expanding user base Consequently, a face recognition-based attendance checking system can easily adapt and grow alongside the organization's increasing employee count.

MySQL offers excellent compatibility and easy integration with multiple programming languages and frameworks, such as Node.js, facilitating smooth connections and interactions with the database in back-end applications Furthermore, its large community and comprehensive documentation provide developers with abundant resources and support for effective database management.

MySQL offers a powerful SQL interface that enables comprehensive data modeling and query capabilities It supports various SQL operations, allowing developers to create intricate database schemas and execute efficient data manipulations and retrievals This flexibility is crucial for managing employee data, including tasks like attendance tracking and processing 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 choice of faceapi.js for facial training in an attendance checking system is driven by its accurate and reliable facial recognition algorithms, which enable real-time detection and analysis of faces This functionality is essential for effectively implementing facial recognition features for check-in and check-out processes.

REQUIREMENT SPECIFICATION

Description

A Human Resource Management System (HRMS) is essential for managing employee data, encompassing various functions such as profile management, employee and organization management, department oversight, attendance tracking, work shift scheduling, and leave request handling Additionally, the system provides statistical insights and tools to address attendance errors effectively.

Functional Requirement

An innovative attendance system utilizes facial recognition technology to accurately capture and record employee attendance by identifying their faces through a camera This system not only logs successful attendance but also captures an image of the employee at the time of recording Additionally, it allows employees to report attendance failures after a specified number of unsuccessful recognition attempts, ensuring a reliable and user-friendly experience.

The attendance system can be conveniently installed at the organization's entrance, allowing employees to easily record their attendance by scanning their faces Additionally, it features a QR code option that directs users to a form for reporting attendance issues if their faces are not recognized correctly after several attempts.

Human Resource Management is a web application designed for efficient employee management, featuring three user roles: Admin, Manager, and Employee Upon first-time login, users must complete their profile information and upload a profile picture, followed by a screen where the system collects their facial data.

The Employee role is a fundamental component of the Human Resource Management system, allowing users to log in and manage their profile information Employees can check their work shifts, submit leave requests for single or multiple days off, and review their submitted leave requests Additionally, they have access to their attendance records and relevant statistics, ensuring they stay informed about their work status.

The manager plays a crucial role in the Human Resource Management system, possessing full access to employee functions They are responsible for organizing employee shifts within their department and have the authority to approve or reject leave requests from their team members.

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

The system's full functionality is accessible to users with manager roles, allowing them to update or delete leave and shift types They can view all trained face data for every user and designate specific users for re-training if their faces are not recognized or if exceptions occur Additionally, they have the authority to manage all departments and employees, including assigning employees or managers to specific departments.

• 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

The system start validate the field when users blur out the field

3 Click into the “Sign in” [E3]

The system navigates users to the Dashboard page and show the success message

No Actor Action System Response

E1 The fill-in value is not in the Email format

The system will show the error message right under the Email Field: “Invalid Email”

E2 The fill-in value is empty

The system will show the error message right under the Email Field: “Email is required”

The fill-in value’s length is less than 6 characters

The system will show the error message right under the Password Field: “Password is too short”

The fill-in value is empty

The system will show the error message right under the Password Field: “Password is required”

Password value is not found in the system

The system will show the error message:

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 link

The system starts loading the facial model

2 Wait until the system recognizes the users [E1], [A1]

The system starts to scan the user’s face

Click the “Continue” button on the success modal [E2], [E3],

The system records the attendance and popup a notification to the user

The users using the alternative attendance by clicking the “Report” button in the Exception modal

The system will navigate the user to the Report Attendance Exception page

E1 The user facial data is not found

The system will show Exception modal

E2 The users don’t have the work shift today

“You don't have a schedule for today”

The users check in the work shift too late

“You are too late to check in, please contact with the manager”

The users check out the work 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 data Table 3.4 Use case collect face data description USE 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 link

The system starts loading the facial model

2 Click the “Scan my face” button

The system starts to scan the user’s face

3 Wait until the process bar is complete

The system shows the loading spinner

4 Click the “Finish” button on the success modal

The system will navigate the users to the 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

Exception modal in the Face Attendance page

The system navigates the users to the Report 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 success message

E1 The Email Field value is not found in the system

The system will show the error 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 organization detail page [A1]

The system shows all the information about the organization’s detail

The users with the role Admin

The system shows all the information about the 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

The system shows all the information about the Work Shift and the Department Name, Employee Name, Work Shift Type Filter

The users using the Work

The system shows all the information 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 Name, Employee Filter, Work Shift Type Filter

Select employee wants to view the work shift in the

The system will show all the information about that employee Work Shift

A3 Select “All” in the Employee

The system will show the information of 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 Department Filter

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

Select employee name in the

Select the Work Shift Type

The system shows all the information 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

The system shows the modal containing all the 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 Request

• Users can create new Personal Leave Request

Click the “Add New” button on the table

The system shows a Drawer for users to fill in all the required fields for the Leave Request

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

The users exceed the Annual

The system will show the error 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 leave requests in the table

The system only shows the Department Name, the Employee Filter, and the Date Filter

Select the employee’s name in the Employee Filter

The system shows the list of personal leave 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

Select the department name in the Department Filter

The system shows a selection of employee according to the Department Filter current value

Select the employee’s name in the Employee Filter

The system shows the list of personal leave 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 leave days

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 Personal page

• Users view a leave request detail

1 Click the “Bulk Action” button on the record ò the Leave

The system shows Bulk Action Menu

Request Personal that want to view the detail

Click the “View” button in the

The system view shows the Drawer 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

The system will show all the information about the Attendance of that employee including the attendance History

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

Users select employee name in the Employee Filter

Users select department name in the Department Filter

The system will show the selection of Employee Filter according to the Department Filter current value

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 in Personal Tab [A1], [A2]

The system shows all the attendance history of the users

The system shows all the information 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

The system will show all the information about the Attendance of that employee including this month attendance

The system will show all the 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 attendance Table 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 attendance status of the users

The system will show all the information about the Attendance of

37 that employee including today's attendance status

The system will show all the 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

The system will show all the information about 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

The system view check validation of the field

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

The system view check validation of the field

4 Click the “Save” button in the Information Box

The system view shows the success message

E1 The value of the Full

The system will show the error message under the field: “This field is required”

E2 The value of the Phone

E3 The value of the Date

E4 The value of the Date

The system will show the error message under 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 page [A1]

The system will show the list of Employees in the table

The user with the role

The system will only show the Department Filter

Choose the department name in the Department

The system will show the list of Employees in the table according to the Department Filter

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 Employee that want to view the photos

The system will show the Bulk Action Menu

2 Click the “View Face Data Photos” button in the Bulk Action Menu

The system will show all the 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

Employee that want to re-train photos

2 Click the “Request to retrain” button in the

3.2.2.4.21 Use case modify work shift

Figure 3.22 Use case modify work shift Table 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 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 in the record of the leave 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 History screen

• Users report invalid an attendance history

In Personal tab, choose filter type is valid [A1]

The system will show all the Attendance History Card that are currently valid

2 Click into the Attendance History

Card that want to report

The system will show the 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 department, chose employee and choses filter type is valid

The system will show all the Attendance History Card that are currently valid

History Card that want to report

The system will show the Attendance History Card Detail

Click the “Report invalid” button

The system will show the Report 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

The system will show all the Attendance Exception in the table

User with the role Admin The system only shows the Department

Filter Chose the Check Out tab

Chose the department name in Department Filter

The system will show all the Attendance Exception in the table according to the Department Filter current value

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 record of the Attendance Exception that want to view detail [A1]

Click the “Approval” button in the menu

The system will show the Detail Modal of Attendance Exception

Chose the Check Out tab The system only shows the

Click the “Bulk Action” button in the record of the Attendance Exception that want to view detail

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 Exception Management

Click the “Bulk Action” button in the record of the Attendance Exception that want to view detail [A1]

Click the “Approve” or “Reject” button in the modal

The system will show the success message and close the modal

Chose the Check Out tab The system only shows the

Click the “Bulk Action” button in the record of the Attendance

Exception that want to view detail

Click the “Approve” or “Reject” button in the modal

The system will show the success message and close the modal

3.2.2.4.27 Use case update organization detail

Figure 3.28 Use case update organization detail Table 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 organization details

The system will check validation for each field

2 Click the “Save” button in the organization details box

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 Modify Shift Type Modal

Click the “New Shift Type” button The system will show all 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” button in Work Shift

Click the “New Shift Type” button

The system will show all the field need to fill in to create a new shift type

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” button in Organization Details [A1]

Click into the Shift Type want to delete

The system will show all the 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

Type” button in Work Shift

Click into the Shift Type want to delete

The system will show all the information of 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 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

The system will show the Modify Leave Type Modal

2 Click the “New Leave Type” button

The system will show all the field need 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 “New Leave Type” button

The system will show all the field need 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

Click into the Leave Type want to delete

The system will show all the information 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

Click into the Leave Type want to delete

The system will show all the information of 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 Name View list department

• Users are able to view list department

• Users view list department successfully

The system only will show the list of 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” button in the record of the employee want to assign

The system only will show Bulk Action Menu

Click the “Assign” button The system will show the Drawer contains 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 Employee Management

1 Click the “Bulk Action” button on the table

The system will show the Drawer to 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 process begins when a user accesses the designated route, prompting the Client to retrieve the models and face data in JSON format from the faceapi.js library on the Server Once these resources are loaded using the faceapi.js service on the Client, it becomes prepared for facial recognition tasks.

The training flow for face data collection begins when the user accesses the training face route The Client retrieves models from the faceapi.js library on the Server, which are then used for face detection This process captures the user's facial images and sends them to the Server, where face-api.js processes the data to extract unique facial features These features are compiled into a distinctive feature vector for each user's face, forming a comprehensive collection of vectors.

65 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 information Employee Is a place to store email, password, employee

FaceTrainingImage serves as a repository for all URLs related to face data images upon the completion of training LeaveRequest functions as a storage location for all information pertaining to leave requests LeaveType is designated for storing various types of leave requests.

Location Is a place to store all the location information

Organization serves as a repository for all organizational information, while Permission stores all relevant permission details Resource contains information about all client screens, and Role is dedicated to storing all role-related information.

RolePermission serves as a repository for all role-related permissions, while ShiftType contains comprehensive information about various shift types URLManagement is dedicated to storing all session-related URL data, and Workshift provides detailed information regarding work shifts.

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

This screen is for user use to make a report for attendance exception

This is screen is for user to able to:

2 Adjust Organization’s information and policy (if they have the permission)

This screen is for user to able to:

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

This screen is for user to able to view and 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:

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

Component Display the Password input field

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 user to quickly navigate to other screens

Text Display the welcome message

Icon Display the Email input field

Figure 4.15 Organization detail main screen

Table 4.6 Organization detail main screen description

Text Display the name of the screen

Button Button for modify shift type

Open the Modify Shift Type

Button Button for modify leave type

Open the Modify Leave Type Modal

Button Button for save organization information

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

Text Display the name of modal

Button Button for close the modal

Show all the Shift Type Item Detail

Component Display the detail of the Shift Type

Button Button for delete the Shift Type

Button Button for save the

Button Button for add new

Show the Add New Shift Type Form

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

3 Start Time Text Component Display the Start

Button Button for cancel the process off create new Shift Type

Button Button for create the new Shift Type

Figure 4.18 Modify leave type modal

Table 4.9 Modify leave type modal description

Show all the Leave Type Item Detail

Component Display the detail of the Leave Type

Button Button for delete the

Button Button for save the

Button Button for add new

Show the Add New Leave Type Form

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

Button Button for cancel the process off create new Leave Type

Button Button for create the new Leave Type

Figure 4.20 Department management screen Table 4.11 Department management screen description

Button Button for create new department

Open the Drawer for create new department

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

4 Department Table Table Display the list of departments

Button Button for move to the first page of the table

Move to the first page

Button Button for move to the previous page of the table

Move to the previous page

Button Button for move to the next page of the table

Move to the next page

Button Button for move to the last page of the table

Move to the last page

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

10 Jump Page Input Input Display the Jump

Display the Page Size Selection Input field

Button Button for open the

Open the bulk 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

Button Button for Delete the curren record

Figure 4.21 Department management add – edit drawer

Table 4.12 Department management add – edit drawer description

Text Display the name of the Drawer

2 Cancel Button Button Button for close the drawer

3 Save Button Button Button for create new department

Figure 4.22 Assigning department management main screen

Table 4.13 Assigning department management main screen description

Table Display the list of

Button Button for open the Bulk Action Menu

Open the Bulk Action Menu

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

Button Button for assign department for 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

3 Save button Button Button save the assign department

Employee Full Name Input Text Field

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

Button Button for create new employee

Open the create new employee Drawer

Button Button for edit the information of the employee

Button Button for view the employee photos data

Open the View Photos Modal

Button Button for request the employee to retrain their photos data

Button Button for deleting the employee

Figure 4.25 Employee management screen add – edit drawer

Table 4.16 Employee management screen add – edit drawer description

1 Drawer Header Text Display the name of the Drawer

3 Save button Button Button save the Save the

9 Phone Text Field Component Display the Phone

10 Gender Radio Field Component Display the Gender

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

Button Button for download the photo

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

View photo in full screen

Button Button for close the

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

Button Button for accept the

Figure 4.28 Work shift screen Table 4.19 Work shift screen description

1 Work Shift Header Text Display the name of the Screen

Button Button for open the modify shift type modal

Open the modify shift type modal

Component Button for selection department

Button Button for submit the selection filter

Component Button for selection employee

8 Date Type Filter Component Display the Date

Button Button for filter Date

Set Day Type Filter to Work

Button Button for filter Date

Set Day Type Filter to Leave

Button Button for move the calendar to the current date

Move calendar to the current date

Button Button for move the calendar to the previous month

Move calendar to the previous month

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

Move calendar to the next month

14 Calendar Day Component Display the day in calendar

Component Display the Work shift in the day of the calendar

Open the Work Shift Detail Modal

Component Display all the information about the work shift

17 Work Shift Detail modal header

Text Display the name of the work shift detail modal

Button Button for delete the work shift

Open the Shift Type Selection

21 Shift Date Text Display the the shift date

22 Shift Time Text Display the shift time

To Employee Input Selection Field

Open the Selection of Employee

Late Arrival Input Selection Field

Open the Allow Late Arrival Selection

Early Late Input Selection Field

Open the Allow Early Late Selection

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

2 Annually Status Component Display the annual status of the employee

Component Display the information about the Total Annually

Component Display the information about the Annually Leave Used

Component Display the information about the Annually Leave Remaining

6 Date Filter Component Display the date filter

Button Button for create new leave request

Open the create new leave request drawer

9 Record Bulk Button Button for open the Open the Bulk

Action Bulk Action Menu Action Menu

Button Button for view the leave request

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

6 Reason Text Field Component Display the Reason

7 Note Text Field Component Display the Note

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

Button Button for modify leave type

Open the Modify Leave Type

3 Department Filter Component Display the department Filter

Button Button for submit the department selection filter

6 Date Filter Component Display the date

10 Edit Action Button Button Button for edit the leave request

Button Button for delete the leave request

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

7 Role Text Field Component Display the Role

Type Description Input Text Field

11 Reason Text Field Component Display the Reason

Requested Date input Datetime Field

Figure 4.33 Attendance screen Table 4.24 Attendance screen description

1 Personal Tab Button Button for move to personal tab

2 Management Tab Button Button for move to management tab

Component Button for selection employee

Component Display the brief information about the employee

Text Display the name of the brief

10 Employee Avatar Image Display the Image of the employee

Text Display the name of the employee

Text Display the Role of the employee

Text Display the Email of the employee

Month Attendance Detail information of the employee

Text Display the name of the box

Component Display the information about the Total Attendance

Component Display the information about the Total Leave Days

Component Display the information about

Component Display the information about the Total Late Arrival

Component Display the information about the Total Early Leave

Attendance information of the employee

Text Display the name of the box

Component Display the 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

Attendance History card of the employee

30 Attendance History Text Display the name of

Attendance History Type by Valid

Set Attendance History Type Filter to Valid

Attendance History Type by Invalid

Set Attendance History Type Filter to Invalid

34 Date Type Filter Component Display the Date

Type Month Input Text Field

Type Year Input Text Field

Button Button for submit the Date Type Filter value

Component Display the brieft information about the attendance history card

Open the Attendance History Card Detail

Text Display the date of the card

Text Display the check in time of the card

Text Display the check 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

Button Button for report/ convert card to invalid/valid

Open the report/convert modal

Text Display the Check in date

Text Display the Check out date

6 Check in Image Image Display the Check in

7 Check out Image Image Display the Check

Text Display the Check in

Text Display the Check out Time

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

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

Submit the report/convert action

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

5 Date Filter Component Display the date

7 Check In tab Button Button for move to

8 Check Out tab Button Button for move to

Move To Check Out tab

Button Button for approval the attendance 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

5 System Image Image Display the System

Employee Name Input Text Field

Employee Department Input Text Field

Employee Email Input Text Field

Employee Report Employee Name Input Text Field

Employee Report Employee Email Input Text Field

13 Reject Button Button Button for reject the attendance exception

14 Approve Button Button Button for approve the attendance exception

SYSTEM IMPLEMENTATION AND TESTING

CONCLUSION

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	M.Sc. Nguyen Duc Khoan
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	168
Dung lượng	6,85 MB