Building the happy time application for timekeeping and human resource management

5 Figure 4: Command to install React Hook Form to the project by using yarn .... 10 Figure 17: Command to install React Router to the project by using yarn .... 16 Figure 19: Command to

INTRODUCTION

Project objectives

The topic “BUILDING AN EMPLOYEE ATTENDANCE MANAGEMENT SYSTEM” serves the following purposes:

• Building a website that manages users’ attendance records, work shift calendar, and applications for the user’s attendance

• Building a mobile application that allows users to clock in and clock out of work, view their current and future work schedule as well as view other users’ information

• The website has a user-friendly interface and is secure for users’ personal information.

Project mission

• Describe the theoretical underpinnings of the subject

• Examine the state of the current system

• The website's and application's features are divided into separate modules for easy maintenance.

Research Objectives

For this topic, the research is based on business needs, refer to related websites and models to create an employee management system in business organizations to automate the attendance process Each user will be provided an account which requires a phone number and a designated password to log in Managers can monitor their employees through both mobile and desktop devices While employees are required to login to their mobile devices to clock in and clock out for work attendance Users can also review their attendance records, and current and future schedules through their corresponding devices

After team discussion, the following chosen technologies applied to develop the application are:

• Sprint boot provides Web APIs for easy access and manipulation to perform various tasks between the client and server

• MongoDB provides a NoSQL database for data storage purposes

• Redis is used to cache data increase performance of the system

• React.js framework, Ant Design, Material UI, Axios, Redux, Sass, and other related support libraries provides various rendering options for the user interface on the system

• React Native to develop mobile applications

• JSON web token implementation provides the system with a form of security and invulnerability to some attacks.

Urgency of the topic

Working remotely has been the new trend a few years back, which has significantly impacted how managers monitor their staff’s performance The manager has many responsibilities, and effectively managing a remote workforce has presented new obstacles Employee leaves and attendance management is one area in which many businesses have struggled

How does one keep track of employee attendance in a case when access card readers and biometric devices are not available? As the question arises, many business organization has gradually adopted a new approach: Automation This approach is the reason we choose the topic “Building an employee management system”

Employee attendance management system eliminates the traditional process of tracking employees’ work performance, instead, it promotes online attendance recording with just a single click With this application, managers can effectively manage and track their employees’ attendance information from mobile and desktop devices While allowing employees to clock in and clock out via internet-connected mobile phones as well as handle time-tracking tasks on their own, such as reviewing the hours they’ve worked and their current and future schedules The system makes

3 daily attendance hassle-free and frees up time for managers and employees to focus on their work.

Research scope

The employee attendance management system provides business organizations with options to easily keep track of and store attendance data in real time Besides user attendance, the system also helps the admin maintain and track leave applications, arrival and departure times, and work shift schedules.

THEORY FOUNDATION

Web application

React is a free, open-source, component-based JavaScript library that has risen in popularity within recent years because of the Single page application trend This front-end library is used for building reusable user interface components, which present data changes over time Furthermore, React distinguishes itself from others because of its simplicity and ease of collaboration with other JavaScript libraries React is mostly used as the V in the MVC paradigm

React, unlike other frameworks, is designed around components rather than templates Components represent a small chunk of the user interface in a webpage The component’s job is to render its user interface and update it whenever its state is changed Aside from that, it manages the event belonging to its user interface

A component can contain other components and we can reuse a component in several locations, with varying states or characteristics

Property (props): The component gets an input called props and returns a property defining what the child component will render to let the components communicate with one another The prop cannot be changed

State: displays the current state of the application; as the state changes, the component re-renders to refresh the user interface

Material UI is an open-source React component library that implements Google's Material Design It

5 includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box Material UI is beautiful by design and features a suite of customization options that make it easy to implement your custom design system on top of our components

Figure 1: Command to add Material UI to the project by using npm

Figure 2: Command to add Material UI to the project by using yarn

React Hook Form is a library that helps you validate forms in React It is a minimal library without any other dependencies, while being performant and straightforward to use, requiring developers to write fewer lines of code than other form libraries React Hooks for form state management and validation (Web + React Native)

Figure 3: Command to install React Hook From to the project by using npm

Figure 4: Command to install React Hook Form to the project by using yarn

Yup is a JavaScript schema builder for value parsing and validation Define a schema, transform a value to match, validate the shape of an existing value or both

Yup schemas are extremely expressive and allow complex, interdependent validations or value transformations to be modeled

Figure 5: Command to install Yup to the project by using npm

Figure 6: Command to install Yup to the project by using yarn

Axios is a promise-based HTTP Client for node.js and the browser It is isomorphic (= it can run in the browser and nodejs with the same codebase) On the server side, it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequest

Figure 7: Command to install Axios to the project by using npm

Figure 8: Command to install Axios to the project by using yarn

Redux is an open-source JavaScript library for centralizing and managing application states It is most commonly used with libraries like React or Angular to build user interfaces Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark

Redux is a pattern and library for managing and updating application state, using events called "actions" It serves as a centralized store for a state that needs to be used across your entire application, with rules ensuring that the state can only be updated predictably

Figure 9: Data flow of Redux

Redux Toolkit is our official, opinionated, batteries-included toolset for efficient Redux development It is intended to be the standard way to write Redux logic, and Redux Developers strongly recommend that developers use it

Figure 10: Command to install Redux Toolkit to the project by using npm

Figure 11: Command to install Redux Toolkit to the project by using yarn

Sass stands for Syntactically Awesome Stylesheet It is an extension of CSS Sass is a CSS pre-processor It is completely compatible with all versions of CSS It reduces the repetition of CSS and therefore saves time It was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006 It is free to download and use

It lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff

Figure 12: Command to install Sass to the project by using npm

Figure 13: Command to install Sass to the project by using yarn

Firebase is a Backend-as-a-Service (Baas) It provides developers with a variety of tools and services to help them develop quality apps, grow their user base, and earn profit It is built on Google’s infrastructure

Firebase is categorized as a NoSQL database program, which stores data in JSON-like documents

In Firebase, a document is a set of key-value pairs defined by a schema A group of documents makes up a collection

Authentication: It supports authentication using passwords, phone numbers, Google, Facebook, Twitter, and more The Firebase Authentication (SDK) can be used to manually integrate one or more sign-in methods into an app

Realtime database: Data is synced across all clients in real-time and remains available even when an app goes offline

Hosting: Firebase Hosting provides fast hosting for a web app; content is cached into content delivery networks worldwide

Test lab: The application is tested on virtual and physical devices located in Google’s data centers

Notifications: Notifications can be sent with Firebase with no additional coding

Figure 14: Command to install Sass to the project by using npm

Figure 15: Command to install Sass to the project by using yarn

React Router DOM is an npm package that enables you to implement dynamic routing in a web app It allows you to display pages and allow users to navigate them

It is a fully-featured client and server-side routing library for React

React Router Dom is used to build single-page applications i.e applications that have many pages or components but the page is never refreshed instead the

10 content is dynamically fetched based on the URL This process is called Routing and it is made possible with the help of React Router Dom

React Router Dom has many useful components and to create fully functioning routing, you need most of these

Router(usually imported as BrowserRouter): It is the parent component that is used to store all of the other components Everything within this will be part of the routing functionality

Switch: The switch component is used to render only the first route that matches the location rather than rendering all matching routes

Route: This component checks the current URL and displays the component associated with that exact path All routes are placed within the switch components

Link: The link component is used to create links to different routes

The Route component takes 2 parameters The first one is the path that will be in the URL and the second is the component that will be displayed if the current URL matches the path in the first parameter

Figure 16: Command to install React Router Dom to the project by using npm

Figure 17: Command to install React Router to the project by using yarn

Spring Boot is a popular, open-source, enterprise-level framework maintained by a company called Pivotal It provides Java developers with a platform to get started with an auto-configurable production-grade Spring application Spring boot allows

11 easier and faster development of web applications and microservices with the Spring framework We only need to configure some small configurations to start spring without too many setups

2.1.11.2 Advantages and disadvantages of Spring boot

Spring framework can be employed on all architectural layers used in the development of web applications

Difficulty in controlling the system resulting in increasing the deployment file size

Supports various configuration methods It is not suitable for beginners or individuals who have not ever worked with Spring boot

Provide developers with flexibility in configuring XML configurations, Java

React native

React Native is an open-source UI software framework created by Meta Platforms, Inc It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities It is used to develop the Android and iOS applications at Facebook, Microsoft, and Shopify It is also being used to develop virtual reality applications at Oculus

You can think of components as blueprints Whatever a function component returns is rendered as a React element React elements let you describe what you want to see on the screen

If AngularJS is a framework that allows writing HTML in JavaScript through attributes like ng-model, ng-repeat, then React is a library that allows this process through the existence of JSX JSX is a syntax extension to JavaScript, it enables

16 developer to create virtual DOM using XML syntax then it will compile down to pure JavaScript Thanks to this extension, components are easier to grasp through the integration of JavaScript and HTML into JSX

Props is short for “properties” Props let you customize React components

While you can think of props as arguments you use to configure how components render, state is like a component’s personal data storage State is useful for handling data that changes over time or that comes from user interaction State gives your components memory!

React Hook Form

React Hook Form is a library that helps you validate forms in React It is a minimal library without any other dependencies, while being performant and straightforward to use, requiring developers to write fewer lines of code than other form libraries React Hooks for form state management and validation (Web + React Native)

Figure 18: Command to install React Hook From to the project by using npm

Figure 19: Command to install React Hook Form to the project by using yarn

Typescript

TypeScript is JavaScript with syntax for types TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale

• JavaScript and More: TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor Catch errors early in your editor

• A Result You Can Trust: TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps

• Safety at Scale: TypeScript understands JavaScript and uses type inference to give you great tooling without additional code

Figure 20: Command to install Typescript to the project by using npm

Figure 21: Command to install Typescript to the project by using yarn

CURRENT STATUS SURVEY AND REQUIREMENT

Current status survey

The Covid-19 pandemic has brought disastrous impact to the economy of every business organization Although remote working has been a thing since a few years ago, but due to lockdown, it has become a trend As a result, we can see a surge in the need of employee attendance management system from every companies

Advantages • Modern and user-friendly interface

• Provide multiple options to create a report range from based on time, team to expense

• Track personal attendance and others in the organization easily through dashboard function (with based project or based billability filter)

CHAPTER 3: CURRENT STATUS SURVEY AND REQUIREMENT MODELLING

• Allow user to manage their own projects in the organization

• Not only allowing user view members in the organization, but also allow them to view their clients

• Tags function allows user to note, archive and put prioprity on their important works

• Various options in settings allowing the integration with other time-based applications such as Google Calendar, Outlook calendar

• Time tracking function can be done manually or automately by preset

• Tracking function allow admin taking screenshots of employees while in work hours to confirm their attendance

• Documentation about the application is easy to understand and informative

Disadvantages • Support only one option for attendance clock in

• Few important functions are blocked behind pay wall

Table 3: Advantages and disadvantages of Clockify

Advatanges • Beautiful interface, easy to navigate each functions

• User-friendly thanks to informative hints for each functions and tutorial missions

• Easy to navigate each functions in the application

• User can create personal timesheet and ask approval for payrolls from admin

• Not only user can clock in for themselves, but also for other users in the organization

• Various advanced filter options for report function

• Allow devices restriction for the user to clock in and clock out

• Enable device lock for each member with face spoofing prevention to eliminate fraudient clock in and clock out

• Work schedules can be created with break in between and overtime

• User can create time off policy with compensation

• Provide option to add specific location to track time with GPS

• Documentation about the application is easy to understand and informative

• Various options in settings allowing the integration with other time-based applications such as Google Calendar, Outlook calendar

Disadvantages • Cannot create custom clock in application because the option is blocked behind paywall

• Cannot request time off through the system

Table 4: Advantages and disadvantages of Jibble

Advantages • Enable user to create custom report for different purposes

• Have detailed attendance with GeoTag report allowing admin to check the in and out location of the user

• Report can be export and printed only a few specific rows or columns

• Many functions are hidden behind other vital ones

• User can only clock in and clock out through the web application

• Few web elements are misplaced or overlapped others

• Documentation about the web application is not fully covered and some are hard to understand

Table 5: Advantages and disadvantages of Officetimer

Determine requirements

1 Allow user to login to their equivalent roles

2 Save avatar image of user Store

6 Save organization work calendar Store

7 Update profile of user Management

8 Add, update and delete member in the organization

9 Add, update and delete work shift schedule

10 Add, update and delete time off Management

11 Add, update and delete kiosk settings for time tracking

12 Search member within the organization by name, position and department

13 Search attendance record by filter Search

14 Generate report with attendance statistics Statistics

15 Provide user with equivalent authorization to access to url accordingly

1 Application can be updated and modified to suit the equirements of the user

The function buttons are simply arranged, convenient and easy to see

Functional windows can interact with each other, bringing efficiency to the user

3 Database is secure and easy to access Convenience

The system works stably, reliably and responds immediately

4 The application can fulfill user requirements without doing a silo effect

5 Modules, source code and other system ratios can be reused for future projects

The source code can be recycled and applied to other programs without changing the core

Requirement modelling

Use case specifications

Brief Description User login to system with traditional login method, including phone number and password fields

Post-Condition(s) If user logs successully, user will enter homepage

Main Flow 1 Enter into the login page

5 Authenticate phone number and password successfully (E1)

6 User is redirected to home page

Exception Flow E1: Alert will be displayed on screen with error text messages and required user to login again

Brief Description User register organization for the system

Post-Condition(s) User register new organization successfully

Main Flow 1 Enter into the register page

Exception Flow E1: Password and confirm password are not equivalent

Alert will be displayed on screen and required user to re- enter the password

E2: Blank input field Alert will be displayed on screen and required user to fill the blank

E3: Duplicate input information Alert will be displayed on screen and required user to register again

Brief Description User can search member information by name

Post-Condition(s) User can search member in relation to particular name

Main Flow 1 User types some words into the search field

2 Search field shows related member(s) (E1)

3 User chooses an member from the search result

4 User can view member’s detail

Exception Flow E1: Search field cannot display result if keywords are not correct

Table 10: Search member use case

3.4.4 Advanced search member use case

Use case Advanced search member

Brief Description Users can search member information by filter

Pre-Condition(s) User has selected one of categories on the left side

Post-Condition(s) If user logs in successully, user will enter homepage

Main Flow 1 Select filter category (A1)

2 Screen will display search result according to

Alternate Flow A1: User can select each field seperately

Exception Flow E1: If data cannot be found, there is no result displayed

Table 11: Advanced search member use case

Brief Description Users can change password

Post-Condition(s) Password changed successfully

Main Flow 1 Enter old password field

3 Confirm new password field again (E1)

Exception Flow E1: Alert will be displayed on screen with error text messages and require user to login again

Table 12: Change password use case

Brief Description Users can recover password if they cannot remember theirs

Post-Condition(s) User changes password successfully

Main Flow 1 Enter email field

2 System will send user OTP code to authenticate account

3 Enter OTP code within 5 minutes (E1)

4 System will verify OTP code (E2)

7 User is redirected to login page

Exception Flow E1: User cannot use OTP code after 5 minutes

E2: If enter wrong OTP code, then alert will be displayed on screen with error text messages

Table 13: Forgot password use case

Brief Description Users can update profile information

Pre-Condition(s) User has accessed personal profile page

Post-Condition(s) User updates profile successfully

Main Flow 1 Enter phone number field (E1)

Exception Flow E1: If enter incorrect phone number format, error message will display

Table 14: Update profile use case

Brief Description User can update personal avatar

Pre-Condition(s) User has accessed to profile page

Post-Condition(s) User updates avatar successfully

Main Flow 1 Click camera icon on user’s avatar

3 Press confirm button to change avatar (A1)

Alternate Flow A1: if user want to cancel avatar update, click on cancel button

Table 15: Update avatar use case

Brief Description User clock in for attedance check

Pre-Condition(s) User has accessed the application on mobile device

Post-Condition(s) User clocks in successfully

Main Flow 1 Press clock in button

2 System check GPS location (E1) or face proofing (E2)

Exception Flow E1: Wrong geographic location, user is required to clock in again

E2: Wrong facial identification, user is required to clock in again

Table 16: Clock in use case

Brief Description User clock out for attedance check

Pre-Condition(s) User has accessed the application on mobile device and clocked in

Post-Condition(s) User clocks out successfully

Main Flow 1 Press clock out button

2 System check GPS location (E1) or face proofing (E2)

Exception Flow E1: Wrong geographic location, user is required to clock out again

E2: Wrong facial identification, user is required to clock out again

Table 17: Clock out use case

Brief Description User can log out of the system

Pre-Condition(s) User has logged in the system

Post-Condition(s) User can log out sccessfully

Main Flow 1 Press log out button

2 User will be log out of the system

Table 18: Log out use case

User requirements

1 Manager Highest authorized user rank in the system Managers can clock in, clock out, manage their account, employee, group’s attendance record, report, work shift schedule and

35 organization’s work calendar In addition, they manage the authorization of all the accounts

2 Employee Employees can clock in, clock out, manage their account, personal attendance record, report and work shift schedule

1 Login Login to the application

4 Reset password Create new password

View information of the user

Update/delete/view information of personal account

8 Manage members in the organization

Add/update/delete/view members in a organization

Add/update/delete/view work shift schedule based on work calendar

10 Manage work calendar Add/update/delete/view work calendar for the organization

11 Generate report Create and export attendance statistics report

12 Manage kiosk settings Add/update/delete kiosk settings for tracking user attendance

13 Manage time off Add/update/delete/view time off policy and time off request

16 View documentation about the application

Table 20: Functions of the system

3.5.3 Define functions for each actor

1 Login Access to the system as a manager role

2 Logout Logout of the system

3 Forgot password Verify password with work email

4 Change password Update account with new password

5 Delete account Remove account from the organization

6 Register Register organization for employee management

7 Clock in Clock in for work hours tracking

8 Clock out Clock out work hours tracking

10 Update avatar Update avatar for user

12 Create work calendar Create new work calendar for the organization

13 Update work calendar Update work calendar information

14 Delete work calendar Delete work calendar information

15 View work calendar View work calendar information

16 Add members Add new member to the organization for management

17 Update members Update member available in the organization

18 Delete members Remove member from the organization

View members information in the organization

20 Search member in the organization

Search member in the organization by name, position, department or advanced filters

21 Add work shift schedule to work calendar

Reserve work shift schedule on work calendar

Update work shift schedule information on work calendar

Remove work shift schedule reservation on work calendar

View work shift schedule reserved on work calendar

25 View time off policies View time off policies approved by manager

26 Add time off policy Create new time off policy with compensation

27 Update time off policy Update time off policy information

28 Delete time off policy Remove time off policy

29 Request time off Request time off on work calendar

30 Update time off request Update time off information

31 Delete time off request Remove time off request

32 Add kiosk settings Create kiosk settings for time tracking devices

33 Update kiosk settings Update kiosk settings for time tracking devices

34 Delete kiosk settings Remove kiosk settings

35 Generate report Create attendance statistics report

36 View attendance record View both personal attendance record and of the members in the organization

1 Login Access to the system as a employee role

2 Logout Logout of the system

3 Forgot password Verify password with work email

4 Change password Update account with new password

5 Delete account Remove account from organization

6 Clock in Clock in for work hours tracking

7 Clock out Clock out work hours tracking

9 Update avatar Update avatar for user

10 View profile View personal account information

11 View work calendar View work calendar information

12 View members View members information in the organization

Search member in the Search member in the organization by name, position, department or advanced filters

14 Add work shift Reserve work shift schedule on work calendar

Update work shift Update work shift schedule information on work calendar

Delete work shift Remove work shift schedule reservation on work calendar

View work shift View work shift schedule reserved on work calendar

18 View time off policies View time off policies approved by manager

19 Request time off Request time off on work calendar

20 Update time off request Update time off information

21 Delete time off request Remove time off request

22 Generate report Create attendace statistics report

23 View attendance record View personal attendance record

SYSTEM DESIGN

Sequence diagram

Figure 40: Add member to the organization

Figure 41: Update member in the organization

Figure 42: Delete member in the organization

Figure 49: View detailed member information

Database design

No Property Data type Description

2 created_date Long Create date of the object

3 last_updated_date Long Latest update time of the object

4 company_name String Name of the organization

5 status Boolean Current status of the organization

6 scale Long Size of the organization

8 created_by ReferenceData Individual responsible for the record creation

9 last_updated_by ReferenceData Latest individual responsible for the record update

10 company_shorthand String Abbreviation of organization name

11 avatar String Avatar of the organization

12 company_mail String Email of the organization

13 website String Website of the organization

14 tax_number String Tax number of the organization

15 fanpage String Fanpage link of the organization

16 hotline String Hotline of the organization

2 tenant_id String Id of the employee’s organization

3 avatar String Avatar of the employee

4 name String Name of the employee

5 gender Integer Gender of the employee

6 phone_number String Phone number of the employee

7 date_of_birth Long Employee’s date of birth

8 personal_mail String Personal email of the employee

9 company_mail String Company email provided for the employee

10 identify_id String National id of the employee

11 issued_by Long Issue date

12 staying_address String Current residence of the employee

13 residence_address String Address of the permanent resident of the employee

14 personal_tax_id String Tax number of the employee

15 education_type Integer Educational level of the employee

17 school_name String Latest school name of the the employee

18 major String Major of the employee

19 graduation_date Long Graduation date of the employee

20 married_status Integer Martial status of the employee

21 bank_account_number String Bank account number of the employee

22 bank String Employee bank name

23 bank_branch String Employee bank branch name

24 agent_code String Id of the employee

25 agent_position String Work position of the employee

26 working_branch String Work branch of the employee

27 department String Work department of the employee

28 start_working_date Long Start work date of the employee

29 agent_status Integer Current status of the employee

30 agent_type Integer Type of the employee

31 total_date_off Double Total number of time off

36 is_used_happy_time Boolean Whether the employee currently use the tracking application

37 stop_working_date Long Stop work date of the employee

38 device_id String Device id of the employee

41 username String Employee’s username in the application

42 is_has_account Boolean Whether the employee has an account in the application

8 name String Name of the work calendar

Whether the work calendar is in effect

Start work date of the work calendar

End work date of the work calendar

12 check_in_time TimeRange Valid clock in time

13 check_out_time TimeRange Valid clock out time

Total number of clock in and clock out

15 total_when_forget_che ck_out Double

Total number of clock in without clocking out

10 device_name String Name of the employee’s device

Start work date of the work calendar

End work date of the work calendar

13 check_in_time TimeRange Valid clock in time

6 ip_name String Name of the ip

7 ip_address String Address of the ip

8 status Integer Current status of the ip

Table 32: face_tracking_account collection

User interface design

SCU01 Home Screen Introduction page of the website, including information about the website and advertising

SCU02 Login Screen Login page for registered users

SCU03 Register Screen Users will be forced to fill in all of the fields in the form for registering an account

SCU04 Confirm OTP Screen The page will send an OTP code to the user’s phone and the user must type it into the form

SCU05 Set Password Screen The page will require the user to set a password

The users will type the phone

The user can see all of employee in the company

The user can view in detail all of the employee’s information

The user can edit the employee’s information

The user can add the new employee to the company

SCU11 Timesheets Screen The user can view the record of timekeeping

The user can view and update information of enterprise

The user is able to modify the form of timekeeping

SCU14 Wi-Fi IP List Screen The user can view list of Wi-Fi IP

SCU15 Profile Screen The user can edit the profile

The user can change password

The user can update information and active status of workspace

Table 35: List of website's screens

1 Logo Image After clicking, the page goes to Home

2 Trang chủ Link After clicking, the page goes to Home

3 Tính năng Link After clicking, the page goes to

4 Báo giá Link After clicking, the page goes to Price

5 Blog Link After clicking, the page goes to Blog

6 Người dùng Link After clicking, the page goes to App

7 Đăng nhập Button After clicking, the page goes to Login

8 Đăng ký Button After clicking, the page goes to

1 Toggle menu Button After clicking, the page will change the state(appear/hide) of the main’s sidebar

2 Logo Image Using to display the Logo of the project

3 Title Text Navigate for the user

4 Workspace Button After clicking, the page goes to

5 Menu box Button After clicking, the page shows a dropdown

6 Notification Button After clicking, the page shows a dropdown that contains notifications

7 User button Button After clicking, the page shows a dropdown that contains the list of options

1 Logo Image Using to display the Logo of the project

3 Title Text Title of form

Text Box For user to input phone number

Text Box For use to input password

Link After clicking, the page goes to App

7 Đăng nhập Button After clicking, user’s account will be sent to backend for authorization

8 Đăng ký ngay Link After clicking, the page goes to

2 Quay lại Link After clicking, the page goes to previous page

Text Box For the user to input phone number

Text Box For the user to input full name

Text Box For the user to input name of company

7 Nhập tên viết tắt của công ty

Text Box For the user to input name of the shorthand’s company

8 Chức vụ List For the user to choose type of position

9 Nhập email Text Box For the user to input email

List For the user to choose scale of company

Text box For the user to input referral code

12 Check box Check box For the user to check it if they agree with account and service

13 Đăng ký Button After clicking, information will be sent to backend for authorization

14 Đăng nhập Link After clicking, the page goes to Login

1 Logo Image Using to display the logo of the project

3 Quay lại Link After clicking, the page goes to Login

Text Box For the user to input phone number

Button After clicking, the page will send a

OTP code to the user’s phone to confirm

Text Box For the user to input password

Text Box For the user to input password to confirm

7 Lưu Button After clicking, information will be sent to backend for authorization

5 User guide Text Guide the user

6 Text box 1 Text Box For the user to input the OTP code

12 Xác nhận Button After clicking, information will be sent to backend for authorization and if it is successful, the page will goes to Set Password Screen

13 User guide Text Guide the user

14 Gửi lại mã xác thực

Button The OTP code to the user’s phone again

1 Bảng công Link After clicking, the page goes to

2 Đơn từ Link After clicking, the page goes to

Link After clicking, the page goes to The

Link After clicking, Enterprise Settings

5 Cài đặt lịch Link After clicking, Schedule Setting

Link After clicking, Attendance Settings

7 Tin tức Link After clicking, News Screen

8 Popup Link After clicking, Popup Screen

9 Sự kiện Link After clicking, Event Screen

10 Quản lý khác Link After clicking, Others Screen

11 Đăng xuất Button After clicking, the page will show a modal to confirm the decision of the user

Button After clicking, the page will copy the id into the clipboard of the user’s computer

Figure 55: List of employee screen

Link After clicking, the page goes to

2 Quản lý phép Link After clicking, the page goes to

3 Title Text Navigate the user For the user to choose the status active of employee

4 Đang hoạt động List For the user to choose the status of employee

List For the user to input data for searching

6 Tên, email, số điện thoại, mã nhân viên

Text Box For the user to choose the role of employee

7 Vai trò List After clicking, the page goes to

8 Thêm mới Button After clicking, the page will export the file and download the user’s computer

9 Export Button For the user to choose the department of employee

10 Phòng ban, vị trí công việc

List For the user to choose the type of employee

List For the user to choose the status using HappyTime of employee

12 Trạng thái sử dụng HappyTime

List For the user to read

Table Each row represent for a employee

For the user to switch to another page

15 Pagination Button After clicking, the page goes to

Link After clicking, the page goes to

Figure 56: Add new employee screen (part 1)

1 Quay lại Link After clicking, the page goes to

Text Title of the form

3 Đổi ảnh đại diện Button After clicking, the page will ask the user to upload image

Text Box For the user to input the identity number

5 Địa chỉ tạm trú Text Box For the user to input the temporary address

6 Họ và tên Text Box For the user to input full name

7 Số điện thoại Text Box For the user to input phone number

8 Email công ty Text Box For the user to input email of company

9 Nơi cấp Text Box For the user to input supplied place

10 Địa chỉ thường trú Text Box For the user to input permanent address

11 Giới tính List For the user to choose the gender of employee

12 Ngày sinh Date For the user to input date of birth

13 Email cá nhân Text Box For the user to input personal email

14 Ngày cấp Date For the user to input supply date

15 Mã số thuế cá nhân

Text Box For the user to input personal tax code

Table 46: Add new employee screen (part 1)

16 Học vấn List For the user to choose the education of employee

17 Năm tốt nghiệp Date For the user to input graduation year

18 Số tài khoản ngân hàng

Text Box For the user to input bank account number

19 Mã nhân viên Text Box For the user to input the id of employee

20 Ngày bắt đầu đi làm

Date For the user to input start working date

21 Không yêu cầu chấm công

Check Box For the user to check

22 Trường học Text Box For the user to input name of school

List For the user to choose the married status of the employee

24 Ngân hàng Text Box For the user to input name of bank

25 Vị trí công việc List For the user to choose the job position of the employee

26 Trạng thái nhân sự List For the user to choose the status of employee

27 Chuyên ngành Text Box For the user to input the major

28 Chi nhánh Text Box For the user to input branch name of the bank

List For the user to choose working branch

30 Loại hình nhân sự List For the user to choose the type of employee

31 Số phép năm nay Text Box For the user to input num of leave this year

32 Quyền thao tác List For the user to choose manipulation rights of employee

Text Box For the user to input num of leave last year

34 Ghi chú Text Box For the user to input the note

35 Hủy bỏ Button After clicking, the page goes to

36 Lưu Button After clicking, the page will send the information to the backend to handle

SCU01 Home Screen Introduction page of the website, including information about the website and advertising

SCU02 Login Screen Login screen for employee in company

Screen Users will be forced to set password to can access to the application

The screen for users can change their password which they use to access the application

SCU05 Set Password Screen The screen will require the user to set a password SCU06 Account Screen The user will type the phone

Employee Screen The user can see all of employee in the company

Company Screen The user can see all of company’s information

The user can check their detail attendance sheet

SCU10 Today’s Shift Screen The user can see their detail today’s shift in this day SCU11 Detail News Screen The user can see detail news

SCU12 List Of News Screen The screen show all of news

Table 49: List of mobile's screens

1 Input box Edit text Show the phone’s keyboard

2 Continue Button Move to the enter password screen

1 Input box Edit text Show the phone’s keyboard

2 Continue Button Move to the home screen

1 Trang chủ Button Navigate to Home Screen

2 Công việc Button Move to Work Screen

3 HappyGame Button Move to HappyGame Screen

4 Tài khoản Button Move to Account Screen

1 User’s avatar Imageview Display the user’s avatar

2 User’s name textbox Textview Display the user’s name and company

Cardview Display the company working time information, if user click on it it will move to today’s shift screen

4 Checkin time cardview Cardview Display the time that user clocked in

5 Tin tức Button Navigate to List News

6 News cardview Cardview Display title and created date, quantity of views of news

1 Bảng công Button Navigate to Attendance Sheet

2 Thông tin công ty Button Navigate to Information Of

3 Danh sách nhân viên Button Navigate to List Employee

1 Employee name textbox Textview Display employee name

4 Email textbox Textview Display email

5 Phone number textbox Textview Display phone number

6 Employee id textbox Textview Display employee id

1 Empoyee avatar image Imageview Display avatar of employee

2 Image picker button Button Pick image from the device of employee

3 Employee name textbox Textview Display employee name and position in company

4 Employee company and department textbox

Textview Display employee company and department

5 Email textbox Textview Display email

6 Phone number textbox Textview Display phone number

7 Employee id textbox Textview Display employee id

8 Start woking date textbox Textview Display the start working date

9 Working status textbox Textview Display the working status

10 Employee type textbox Textview Show the agent type

11 Device id Textview Display the device id of the device that agent is using

12 Device name and last login Textview Display the device name of the device that agent is using and the last time the agent login in application

13 Change password button Button Navigate to Change

14 Logout button Button Press to log out

IMPLEMENTATION AND TESTING

Implementation

The project's development and implementation were completed using the following auxiliary software by the team:

• Use Visual Studio Code to implement Reactjs web application and ReactNative application

• Use Intellij to develop Restfull API

• Use MongoDb compass to build and manage database

• Use redis desktop manager to deploy and manage redis cache database

• Use Vercel for deploying website to hosting

• Use Enterprise Architect 7.5.848 to draw UML diagrams

5.1.2 Introduction about technologies used in the application

React is a free, open-source, component-based JavaScript library that has risen in popularity within recent years because of the Single page application trend This front-end library is used for building reusable user interface components, which present data changes over time

React Native is an open-source UI software framework created by Meta Platforms, Inc It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities It is used to develop the Android and iOS applications at Facebook, Microsoft, and Shopify It is also being used to develop virtual reality applications at Oculus

MongoDB is a database model based on no relationship Therefore, it is called a NoSQL database MongoDB was released in 2009 by the founder and developer MongoDB uses collections and documents Documents consist of key-value pairs While the collection includes document sets

Spring Boot is a popular, open-source, enterprise-level framework maintained by a company called Pivotal It provides Java developers with a platform to get started with an auto-configurable production-grade Spring application Spring boot allows easier and faster development of web applications and microservices with the Spring framework We only need to configure some small configurations to start spring without too many setups

Redis is an open-source (BSD licensed), in-memory data structure store used as a database, cache, message broker, and streaming engine Redis provides data structures such as strings, hashes, lists, sets, and sorted sets with range queries, bitmaps, hyper logs, geospatial indexes, and streams Redis has built-in replication, Lua scripting, LRU eviction, transactions, and different levels of on-disk persistence, and provides high availability via Redis Sentinel and automatic partitioning with Redi

System testing is a type of black box testing used to assess the finished, integrated system as a whole to make sure it complies with predetermined requirements Before the product is released into production, the software's functionality is tested end-to-end by a testing team that is independent of the development team

Functional testing is followed by acceptance testing, which determines whether the completed piece of software is prepared for delivery It entails making sure the product satisfies the needs of the end customer as well as all original business requirements This necessitates evaluating the product both inside and externally, therefore you'll need to give it to your end consumers for beta testing in addition to your QA staff

• Black box Testing: Test the functionality of the website to function properly according to the description Check and find errors to edit the website:

- Error in data structure or external database access

- Initialization and termination of errors.

CONCLUSION

Actual results

After the process of research and development of the topic “BUILDING AN EMPLOYEE ATTENDANCE MANAGEMENT SYSTEM” Our team has achieved following results

• Understand more knowledge about Reactjs and Spring Boot framework for developing application on the client side and the server side

• Understand how to store or retrieve based on knowledge about NoSQL and MongoDB

• Integrated JSON Web Token into our project to increase security

• Apply Redux Toolkit, Material UI

• Write clean code and good organize code

Complete basic and advanced features of an application for employee attendance management:

• Allow login by phone and password Basic features for account management such as editing profile, uploading an avatar, forgetting the password, changing password, etc

• An employee management system website which user can view member in the organization, list or search member by keyword or by filter, manage work calendar, kiosk settings

• A mobile application which user can view member in the organization, view work schedule, clock in and clock out.

Strengths

• Source codes follow strictly clean code principles

• Easy to maintain and develop more features

Drawbacks

• The web application is not responsive

• The employee management page that require a large amount of data with complicated relationship, the processing performance of our system is still not smooth.

Future works

• Optimize performance and fix some existing bugs in application

• Improve Search Engine Optimization (SEO) for the website

• Add more clock in and clock out methods

1 ReactJS, Pros and Cons https://www.javatpoint.com/pros-and-cons-of-react

2 Redux official document https://redux.js.org/

3 Applying Redux to ReactJS https://viblo.asia/p/redux-trong-react-la-gi-1Je5EDX0lnL

4 SpringBoot, Pros and Cons https://bambooagile.eu/insights/pros-and-cons-of-using-spring-boot/

5 Noticeable features of Spring Boot https://hocspringboot.net/2020/10/17/spring-boot-co-gi-hay-va-nhung- tinhnang-cua-springboot/

6 JSON Web Tokens https://jwt.io/

7 MongoDB Repository with Springdata in Spring Boot https://docs.spring.io/springdata/mongodb/docs/1.2.0.RELEASE/referenc e/htm l/mongo.repositories.html

8 Pros and Cons of MongoDB https://www.knowledgenile.com/blogs/pros-and-cons-of-mongodb

9 Android Studio https://developer.android.com/studio

10 MongoDB https://www.mongodb.com/

11 What is MongoDB – Working and features https://www.geeksforgeeks.org/what-is-mongodb-working-and-features/

13 Sass Introduction https://www.w3schools.com/sass/sass_intro.php

14 Firebase https://firebase.google.com/

15 What is react-router-dom? https://www.geeksforgeeks.org/what-is-react-router-dom/

16 Android Studio https://www.javatpoint.com/android-studio

17 Yarn install https://classic.yarnpkg.com/lang/en/docs/cli/install/

18 Npm install https://docs.npmjs.com/cli/v8/commands/npm-install

Tiêu đề	Building the "Happy Time" Application for Timekeeping and Human Resource Management
Tác giả	Nguyễn Thiên Hoàn, Ngô Minh Đạt, Lê Duy Tường
Người hướng dẫn	Msc. Nguyễn Trần Thi Văn
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	133
Dung lượng	7 MB