Oh my OKRs web based governance the goals system

Major Features 01 Admin or HR can manage the staff in the company add new staffs, update staff’s information, activate/deactivate a staff!. 02 HR can manage view, create, update, delete

Oh My OKRs Web-based governance the goals system

Olympus Team

Group Members

Phan Văn Đức – SE05320 Trần Quang Nhật - SE05439 Nguyễn Văn Quang - SE05839

Đỗ Quang Hiệp - SE05627 Ngô Minh Đức - HE130666

Ha Noi, August 25, 2020

Acknowledgement

This study could not have been completed without the help and support of many individuals and organizations Therefore, we would like to express our appreciation and gratitude to those who have supported us during the most important milestone of university years

First and foremost, we would love to express our deep gratitude to our supervisor, Mr Nguyen Trung Kien Without his assistance and dedicated involvement in every step throughout the process, this paper would have never been accomplished We also sincerely thank all of our teachers who had taught us in four years at FPT University

We are also grateful to our friends whom we have had the pleasure to know and work with during this semester We could say that the capstone project could not have been fully accomplished without their support

Nobody has been more important to us in the pursuit of this project than our family We would love to thank our parents, our sisters, and brothers, and our friends who offered unlimited encouragement and support

Table of Contents

Acknowledgement 2

Definitions and Acronyms 5

Chap 1 Introduction 7

I Purpose 7

II Project Information 7

III The people 7

1 Supervisor 7

2 Team members 7

IV Background 7

1 Reasons to develop this project 7

2 What is OKRs 11

V Existing system 11

1 Coda 11

2 Base OKRs 13

Chap 2 Project Plan 15

I Project Organization 15

1 Purpose 13

2 Software Process Model 13

3 Rules and Responsibilities 14

4 Tools and Techniques 26

II Project Management Plan 16

1 Overview 16

2 Project Training Plan 16

3 Quality Management 16

4 Communication Plan 26

III Estimation & Master Schedule 23

1 Project Size 26

2 Master Schedule 24

3 Deliverables 25

Chap 3 Software Requirement Specification 28

I Purpose 28

II Overall Description 28

1 Product Perspective 28

2 User Classes (Actors) 28

III Common Requirements 28

1 Business Rules 28

2 UI Validations 30

IV User Requirements 31

1 Overview 31

2 Feature Common 33

3 Feature Admin 37

4 Feature HR 45

5 Feature OKRs 49

6 Feature Checkin 52

7 Feature CFRs 55

V Functional Requirements 57

1 Screen & Authorization 57

2 Feature Common 61

3 Feature Admin 74

4 Feature HR 98

5 Feature OKRs 115

6 Feature Checkin 132

7 Feature CFRs 140

VI Data Requirement 147

1 Entity Relationship Diagram 147

2 Entity Description 147

VII Non-fucntional Requirements 147

1 Security 147

2 Maintainability & Scalability 147

3 Performance 148

4 Usability 148

VIII Other requirements 148

1 Appendix1 - Messages List 148

2 Appendix2 – Form Rules Messages List 151

Chap 4 Software Design 153

I Overall Description 153

1 Assumptions 153

2 Design Constraints 153

II System Architecture Design 153

1 Overall Architecture 153

2 Package Diagram 157

III System Detailed Design 159

1 Class specification 159

2 Detail design back-end 200

3 Detail design front-end 238

IV Data & Database Design 247

1 Database Design 247

V Non-Functionality Requirements Design 253

1 Security 253

2 Maintainability & Scalability 253

3 Performance 253

4 Usability 253

Chap 5 Software Testing 253

I Software Testing 253

1 Purpose 253

II Test Approach 254

1 Test Model 254

2 Test Types 254

3 Test Stages 255

III Test Plan 255

1 Test Items 255

2 Acceptance Criteria 255

3 Test Process 256

4 Milestones 256

5 Tools & Environment 256

6 Resource & Responsibilities 257

IV Test Cases 257

1 Unit & Integration test 257

2 System test 258

V Defect log 259

VI Test Reports 259

1 Unit & Integration test 259

2 System test 261

Chap 6 Release Package & User Guides 262

I Release Package 262

II Installation Guides 262

1 System Requirements 262

2 Installation Instruction 262

III User Manual 265

1 Feature Common 265

2 Feature Admin 271

3 Feature HR 276

4 Feature OKRs 282

5 Feature Checkin 285

6 Feature CFRs 288

Definitions and Acronyms

01 OKRs Object and Key Results

03 CFRs Conversation, Feedback and Recognition

07 PPP Progress – Problem – Plans

08 API Application Programming Interface

09 HTTP Hypertext Transfer Protocol

10 HTTPS Hypertext Transfer Protocol Secure

13 UX User Experience

14 SRS Software Requirements Specification

Chap 1 Introduction

I Purpose

This chapter provides an overview of the project include background information, a literature review of the existing system and raising a proposal for ideas of improvement

II Project Information

• Project name: Oh My OKRs

• Project code: FOKRs

• Group name: Olympus team

• Project type: Web application

III The people

1 Supervisor

Nguyễn Trung Kiên kiennt@fe.edu.vn 0912656836 Lecturer

Table 1.1 – Suppervisor profile

2 Team members

Phan Văn Đức SE05320 ducpvse05320@fpt.edu.vn 0981131870 Leader Ngô Minh Đức HE130666 ducnmhe130666@fpt.edu.vn 0984059992 Member Trần Quang Nhật SE05439 nhattqse05439@fpt.edu.vn 0375132555 Member Nguyễn Văn Quang SE05839 quangnvse05839@fpt.edu.vn 0969862520 Member

Đỗ Quang Hiệp SE05627 hiepdqse05627@fpt.edu.vn 0349088188 Member

Table 1.2 – Team profile

IV Background

1 Reasons to develop this project

Today in Vietnam, the number of startups is growing1 Over the seasons at the Shark Tank TV’s show in Vietnam, the numbers also tell how the Vietnamese startup has grown in the past few years In every year, the total investment in startup is doubled!

1 News: https://thanhnien.vn/tai-chinh-kinh-doanh/shark-viet-tro-thanh-ca-map-rot-nhieu-tien-nhat-shark-tank-2018-1016286.html

https://baodautu.vn/gan-450-ty-dong-duoc-cam-ket-dau-tu-trong-shark-tank-mua-3-d110548.html

https://sharktankvietnam.com/

Figure 1.1 – Shark tank Viet Nam

Figure 1.2 – Shark tank Viet Nam

Figure 1.3 – Shark tank Viet Nam

But sadly, quantity doesn't come with quality! According to statistics, nearly 90% of startups fail There are many reasons for this situation, but one of the main causes is the lack of GOVERNACE SKILLS2, especially it’s corporate goverance and finance’s governance

Figure 1.4 – Governance problems

2 News: https://ndh.vn/lam-giau/giam-doc-cyberagent-viet-nam-startup-thuong-that-bai-vi-qua-tu-tin-va-chi-tieu-vo-toi-va-1259701.html

https://baodautu.vn/khoi-nghiep-y-tuong-hay-chua-du-ma-con-can-hai-ky-nang-cot-tu-khac-d110037.html

https://cafebiz.vn/ceo-wefit-chi-ra-ly-do-khien-92-startup-viet-that-bai-khong-song-noi-den-sinh-nhat-lan-thu-2-tim-hieu-ngay-va-nhin- lai-minh-truoc-khi-qua-muon-20190708170909218.chn

Figure 1.5 – Governance problems

Figure 1.6 – Wefit problems

Therefore, we want to build a system which can become a friend to help the start-up can be successful! And that is OKRs!

2 What is OKRs

Therefore, administrators and managers have applied target management tools such as KPIs, SMART GOALS, MBO, Balanced Scorecard And OKRs (Objectives and Key Results) is one of the very powerful popular tools! Its effectiveness is proven by the world's leading companies’s trust, use, and develop OKRs (pictured below)

The goal of OKRs is to connect company, organization and individual goals to measure valuable results when all members and leaders work together, towards a common goal, mission, and

It's a doc! Coda is a new type of document that blends the flexibility of documents, the power

of spreadsheets, and the utility of applications into a single new canvas

Coda comes with building blocks—like tables and buttons—and time-saving templates, so your doc can grow and evolve with the needs of your team

Figure 1.7 – Coda system

Summary of the advantages and disadvantages of Coda.io

● The interface is clean, beautiful

which makes being productive fun

● User experience is very good,

anyone can use and customize it

easily

● An all-in-one doc, no more

ping-ponging between documents,

spreadsheets, and niche workflow

apps to get things done

● The vast majority of applications available within one app

2 Base OKRs

Figure 1.8 – Base OKRs system

Summary of the advantages and disadvantages of Base OKRs

● The interface is clean, beautiful

which makes being productive fun

● User experience is very good,

anyone can use and customize it

easily

● Many unnecessary features, causing confusion for users

VI Business Opportunity

A lot of the start-ups have requested an OKRs system that would be simpler and effective for

governance Such a system would save staff time and the learning curve which uses the product Especially, if this product was released to the market, it’s very cheap for start-ups!

VII Project Scope & Limitations

1 Major Features

01 Admin or HR can manage the staff in the company (add new staff(s), update staff’s

information, activate/deactivate a staff)

02 HR can manage (view, create, update, delete) the lessons OKRs for the staff can learning

anywhere, anytime they want

03 All member can manage (view, create, update, align and delete) their OKRs

04 All member can manage their check-in (view, create, update) for each their OKRs

05 All member can manage their CFRs (view, create) and view the ranking star of the whole

01 The staff can view, and choose the gift they want in the gift store

02 The admin can manage the gift store (to exhortative the staffs)

03 The notification can notify when have a trigger which happen in the system (check-in, cfrs, update OKRs…)

04 The staff can use their google account to register an account of this system

05 The staff can use their mobile phone to use this system

Chap 2 Project Management Plan

I Overview

1 Scope

Out of scope:

• Manage store gift

• Manage changing gift

All member should discuss carefully at the beginning of each iteration to define scope and requirement

2 Conflict among

team members Medium Medium

All member should discuss to resolve the conflict

3 Lack of skill Medium Medium Training member before starting the project

4 Meet the hard

All member should discuss about that and figure out the best solution for the problems

Table 2.1 – Project risk

II Management Approach

1 Software Process Model

We decide using the Rational Unified Process

Figure 2.1 - Rational Unified Software Process Model

Rational Unified Process Model is mostly used when the scope of the project is big, the major

requirements are defined clearly, and some more details will be added later in software development Also, this model has these useful advantages:

• Main functions can be developed early & quickly

• Testing and debugging during smaller iterations are easier

• More flexible – easy & less costly to change if have

• Risks are identified and resolved during iteration; and each iteration is easily managed

• In iterative model less time is spent on documentation and more time is given for designing

We use Prettier format for both back-end and fron-end project, config like image bellow:

Figure 2.2 – Prettier Config

With back-end project, we extend some base config like:

• plugin:@typescript-eslint/eslint-recommended

• plugin:@typescript-eslint/recommended

• prettier/@typescript-eslint

• prettier Besides, we customize some config rules like the image below

Figure 2.3 – Back-end eslint config

With front-end project, we extend some base config like:

Figure 2.4 Front-end eslint config

2.1.2 Coding Quality

We use some stuffs on GitHub Apps is Codacy3, DeepScan4, LGTM5 and CodeCov 6 to check coding’s quality In single merge request, they can run automatically to check our codes Thought we only merge code when all checks passed (but we can restrict who can push to matching branches without pass all CI), it’s some example of that

3 https://github.com/apps/codacy-production

4 https://github.com/marketplace/deepscan

5 https://github.com/marketplace/lgtm

6 https://github.com/marketplace/codecov

Figure 2.5 Passed all checks in Github

Figure 2.6 Generate code coverage in issue comment Github

Figure 2.7 Codacy Analysis code quality

Figure 2.8 Deepscan Analysis code quality

2.1.3 Linting

Not only Eslint and Prettier, but we also use some tools to help the project to be more

professional We add more tools is Image Lint, Ls-Lint, Lint Staged and ImageBot

Lslint7 tool is an extremely fast file and directory name linter - Bring some structure to your file and directory names This is our front-end Lslint

7 https://github.com/loeffel-io/ls-lint

Figure 2.9 Lslint

Finally, is Lint Staged8, it’s running linters on git staged files, it’s makes more sense when run before committing your code to github

Figure 2.10 Run linters on git staged

And we add more lint stage to check each file when our team pushes the new code on our

repositories

Figure 2.11 All linters

We add a bot that name ImageBot 9 to optimize the images on the front-end project

8 https://github.com/okonet/lint-staged

9 https://github.com/apps/imgbot

Figure 2.12 Image Bot

3 Project Training Plan

Table 2.2 – Project training plan

III Estimation & Master Schedule

7 Overall view the process of OKRs in their owner

teams

Medium 3

8 Create account when get invites link from admin Simple 3

Table 2.3 – Project size

2 Master Schedule

Figure 2.13 – Master schedule

Schedule detail we following this link

Figure 2.14 – Detail schedule

IV Project Organization

1 Project Team Members

Figure 2.15 - Project team member tree

• Define scope and create an SRS document

• Design entity relationship diagram

BA Member • Define business process flow and object state

• Capture and specifically describe the use case

Technical Leader

• Define high-level architecture base on SRS

• Implement configuration and web server

• Research and implement UX design for frontend

Developer Involve in coding the product and reviewing the code of other developers Test Leader • Create a template testing document

• Define test strategy, create a test plan, and defect log template Test Member • Create test cases

• Implement test case and log defect

Table 2.4 - Project organization structure

V Project Communication

1 Communication Plan

Daily meeting Team members • Report issue and planning

• Support to resolve issue Monday-Friday Online Weekly

Table 2.5 - Communication plan

Our main communication channels are on LarkSuite On the other hand, we used face-to-face meetings, Emails, Skype However, we sometimes make a phone call or instant message if someone has a problem

VI Configuration Management

1 Tools and Techniques

Programming languages & runtime Typescript, NestJs, Javascript

Operating system MacOS 10.14 Mojave & 10.15 Catalina

Windows 1909 & 1903

IDEs/Editors Back-end - Visual Studio Code 1.45.1

Front-end - Visual Studio Code 1.48.2

Source version control Github, Git 2.23.0

Files management tools Google Drive

Documents tools Microsoft Word 2016, Microsoft Excel 2016

Task management Notion, Github

Project management tool ProjectLibre

Communication tools Meet, Facebook, LarkSuite

Testing tools Paw 3.1.10 & Postman 7.31.1

Table 2.6 - Tools & techniques used in project

2 Document

2.1 Layout

We use the Moderate layout10 in Word

• Top and Bottom: 2.54 cm

• Left and Right: 1.91 cm

Chap 3 Software Requirement Specification

I Purpose

This chapter outlines the functional and non-functional requirements of our system It also provides some format constraints in common requirements and project success criteria The content of this chapter is used as the basis for the work in the subsequent chapters

II Overall Description

Admin OKR Master in company

Team Leader The Department, The Manager or Team Leader

Staff Who is working in a company

to join the company

B03 The access token must be encrypted when saving into the browser’s cookie

B04 The maximum duration for the resetting password’s URL with the specific token which

lives in 30 minutes After that, the token is expired

B05 Staff cannot update their account's email address, department, and job’s position once it

has been registered

B06 Only Admin and HR can update the specific information of the staff

B07 An account was registered by the joining link which must the Staff role by default

B08 The maximum duration for a joining company’s URL which was generated by Admin or

HR is 3 days

B09 All members of the company can view all the lessons OKRs

B10 When a member clicks on the “Đăng xuất” item, the OKR system must clear the token on

the browser's cookie and redirect to the login page

B11 In a quarter, users should only write within the range of 1 to 5 objectives

B12 An objective should have within the range of 1 to 5 KRs

B13

When going to the new cycle OKRs, the OKRs system will automatically end all OKRs in the previous quarter Then users can not check-in, feedback, or recognize OKRs which belong to the last quarter

B14 Only Team Leader can manually close their own member OKRs when check-in request B15 When an OKRs are close, the OKRs system will automatically disable the “Tạo checkin”

button on these OKRs

B16 When staff creating OKRs, there was only select one of the team leader’s objectives in

which they belong to their teams

B17 When Team Leader and Admin creating personal OKRs, there was only select the parent

objective is one of the company’s objectives

B18 Admin can create the company & personal objectives

B19 When creating OKRs, this OKRs must belong to next quarter or this quarter, default is this

quarter and this was regulated by the Admin

B20 The default a KRs value is the start value is 0, the target value is 100, and the preset type is

percent

B21 Only Admin can self-check-in his OKRs

B22 The default template for check-in is PPP

B23 Users must check-in in each their objectives and with each one objective, users must

answer each KR with the PPP template

B24 The check-in is 1-1 individually between a team member and the team leader Only they

can see each other's check-in history

B25 After check-in 1-1 between superior and inferior, they must write feedbacks about that

B28 The confident level’s default is “Bình thường”

B29 The inferior can draft the check-in without fulfilling the template

B30 The inferior only have permission to send a request check-in for the superior when the

template check-in was fulfilled

B31 After the inferior send the requested check-in for their own OKRs, they can not send a

request check-in for these OKRs until their superior approve their request check-in

B32 When the superior checks a request check-in from the inferior, they have the permissions

to review, even complete this OKRs

B33 When the superior completed check-in, both superior and inferior must write the

feedbacks for each other

B34 Only the superior (admin, team leader) can write the recognition for the inferior

B35 Admin can not delete the company settings when there currently used in the OKRs

system

B36 A team just have 1 team leader

B37 HR can delete an account when this account is in the PENDING state

B38 HR can not deactive the admin account

B39 All users in the OKRs system (except HR and Admin) can not self-update their specific

information like email, their department, and their job’s position

B40 When HR has been deactivated an account, this account will automatically log out into

the system and cannot log in again

B41 When creating an OKRs Lesson, HR must define the index number for that lesson to

organize the display order of it

B42 Avatar image file size must not exceed 5MB

B43 Avatar image file type must be either JPG, JPEG, or PNG

B44 The OKRs system just has 3 layers of the level is Admin, Team Leader, and Staff

Besides, HR’s level is equal to Staff

B45 When HR or Admin deactivate a user, if this user has a Staff role, we remove him/her

from their team and theirs OKRs don’t present on their OKRs team But everyone still can search and view their existed OKRs

If this user has a Team Leader role, we remove him/her from their team Against their inferior, they should update their OKRs and choose the new parent OKRs And for their superior, all OKRs of him/her will not present on the children of the company OKRs All superior and inferior can view their Check-in (if 2 people used to check-in together)

Apparent, all people still can search and view their existed OKRs

B46 Admin can check-in the company OKRs and not needs to write feedback for it

B47 When the OKRs progress is less than 30% → The progress bar has #9f7aea color, else it’s

less than 70%, the progress bar has #805ad5 color, else it has #50248f color

Table 3.2 – Business rules

2 UI Validations

2 Alignment for field, column Align to center left

3 OKRs changing progress

4

User does not have

permission to enter the

module or function

Do not display the corresponding navbar items and sidebar, in case the user tries to access the function, and he will receive

404 pages error to return the homepage

5 Search, Sort, Filter

The user creates/updates records successfully If he is directed back to the Listing page, all the search criteria, filter

conditions, sorting will remain unchanged

8 Pagination Not load entire row data, use pagination with limit only 10

row display on one page (except metadata)

9 Infinite Loading Like the pagination, but when the mouse wheel down, the list

will be added new data

Table 3.3 – UI validation

IV User Requirements

1 Overview

1.1 Use Case Diagram

Figure 3.0 – Use case diagram

1.2 Features Use Cases

• Login

• Logout

• Register (by link invite)

02 Manage Personal Profile

• View detail lesson

• View OKRs progress

• View star ranking

• View status CFRs, OKR, and Check-in

05

Admin

Manage OKRs company

• View OKRs company

• Create OKRs company

• Edit OKRs company

• Delete OKRs company

• View list job’s positions

• Create job’s position

• Edit job’s position

• Delete job’s position

• Searcj job’s position

• View list cycles

Manage evaluation criteria

• View list evaluation criterias

• Create evaluation criteria

• Edit evaluation criteria

• Delete evaluation criteria

• Search evaluation criteria

• View list measure units

• Create measure unit

• Edit measure unit

• Delete measure unit

• Search measure unit

• Invite people by link

• Approve joining request

• Reject joining request

• View list staff

• Search staff

• Update staff information

• Active/Deactive staff

12 Manage lesson OKRs

• View list lessons

• View detail lesson

• Search lessons

• Create lesson

• Edit lesson

• Delete lesson

• View list OKRs

• View detail OKRs

• Create OKRs

• Update OKRs

• Delete OKRs

• Update align OKRs

• Search OKRs staff

14

Checkin

Manage checkin

• Save draft checkin

• Send request checkin

• View history my checkin

• View history the inferior

• View detail checkin

• View list request checkin

• View detail request checkin

• Approve checkin request

• View history

• View detail history CFRs

• View list waiting feedback

• View star ranking

ID and Name: UC-01 Authenticate User

Primary Actor: Staff Secondary Actors:

Description: Authenticate user:

1 Login

2 Register by invite link

3 Logout

Trigger: TRIG-1 User click on button “Đăng nhập”

TRIG-1 User click on button “Gửi yêu cầu”

TRIG-1 User click on dropdown menu “Đăng xuất”

Preconditions: PRE-1.1 The staff must have been approved by HRs or Admin

PRE-1.2 The staff’s account must exist in the system

PRE-2 The staff has invited the link from HR of Admin

PRE-3 The staff has logged in the system

Postconditions: POST-1 Dashboard page has been displayed

POST-2 The system redirects to the login page

POST-3 The system redirects to the login page

Normal Flow: 1 Login

1 The staff visits the FlameOKRs website

2 The system displays the login page

3 The staff enters the email and password

4 The staff clicks on the login button on the login form

5 The system generates an

6 access token and saves it on browser cookie

7 The system hides the login form then displays the dashboard screen

2 Register

1 Guest visit FlameOKRs system by invited link

2 The system will display register page

3 Guest enter their full name, email, password, job position…

4 Guest click “Đăng ký” button on sign up form

5 The system notifies a message: MSG12 and redirects to the login page

3 Logout

1 User clicks on the dropdown list on the right navbar

2 User clicks on “Đăng xuất” item

3 System clear access token on the browser The system redirects to the

login page

Alternative

Flows:

N/A

Exceptions: E1 – The system cannot communicate with API server

The system will display an error message is MSG01

E1.1 – Email does not exist

The system will display an error message is MSG03

E1.2 – Password is wrong

The system will display an error message is MSG04

E1.3 – Account is locked

The system will display an error message is MSG05

E1.4 – Account is pennding

The system will display an error message is MSG06

E1.5 In step 4, User fills in the input fields, it does not satisfy the UI then clicks the “Đăng nhập” button

Validator (required fields): the system display message: MSG03, MSG07 Validator (maxlength): the system display message: FR01

Validator (password type): the system display message: FR04

E2.1 – Register with email is exist

The system will display an error message is MSG07

E2.2 – Register with wrong token

The system displays an error message is MSG08

E2.3 In step 4, User fills in the input fields, it does not satisfy the UI then clicks the “Gửi yêu cầu” button

<Extends E1.5.1>

E2.4 – Register with expire token

The system displays an error message is MSG09

Priority: High

Frequency of Use: 1.1 Hight

1.2 Low 1.3 Medium Business Rules: B02, B03, B08

Other

Information:

N/A

Assumptions: N/A

2.2 Manage Personal Profile

ID and Name: UC-02 Manage Personal Profile

Actors:

HR, Admin, Team Leader

Description: Management the user profile includes:

TRIG-2 User clicks on the “Cập nhật” button on the page personal profile TRIG-3 User clicks on the “Cập nhật avatar” button on the page personal

profile

TRIG-4 User clicks on the “Đổi mật khẩu” button on the page change

password

TRIG-5 User clicks on the “Quên mật khẩu” hyperlink on the login page

Preconditions: PRE-1, PRE-2, PRE-3, PRE-4: User has logged in the system

PRE-5: N/A

Postconditions: POST-2, POST-3: The profile page will reload

POST-4, POST-5: The system will redirect to the login page

Normal Flow: 1 View profile

1 Staff clicks on the dropdown list on the right navbar

2 Staff clicks on “Thông tin tài khoản” item

3 The system shows personal information screen

2 Update profile

1 Staff clicks on the dropdown list on the right navbar

2 Staff clicks on “Thông tin cá nhân” item

3 The system shows personal information screen

4 Staff fills all information need for updates

5 Staff clicks on the “Cập nhật” button

6 The system shows message MSG15

3 Update avatar

1 Staff clicks on the dropdown list on the right navbar

2 Staff clicks on the “Thông tin tài khoản” item

3 The system shows personal information screen

4 Staff clicks on the “Cập nhật avatar” button

5 Staff chooses the image from their computer

6 Staff clicks on the “Xong” button

4 Reset password

1 Staff goes to the login page

2 Click on “Quên mật khẩu”

3 The system shows a form for users enter their email

4 Click “Lấy lại mật khẩu”

5 The system sends an email include link reset password for user

6 Visit link reset password

7 Fill a new password

8 Enter button “Đổi mật khẩu”

5 Change password

1 Click on dropdown list on the right

2 Click on “Đổi mật khẩu”

3 The system shows a form for user

4 Users fill mật khẩu cũ, mật khẩu mới, nhập lại mật khẩu mới

5 Click on “Thay đổi mật khẩu” to save new password

6 System show message MSG11

Alternative

Flows:

N/A

Exceptions: E1 – The system cannot communicate with API server

The system displays an error message is MSG01

E3.1 – Size of image > 5MB and file image is not JPG, PNG, JPEG

The system displays message: MSG02

E4.1 – Email dose not exist

The system displays message: MSG03

E5.1 – Password is incorrect

The system displays message: MSG04

2.3 View Lesson OKRs

ID and Name: UC-03 View Lesson OKRs

Actors:

Team Leader, HR, Admin

Description: View OKRs lessons:

1 View all lessons

2 View lesson detail Trigger: TRIG-1 User lick on menu “Bài học OKRs”

TRIG-2 User lick on title each lesson

Preconditions: User visited FlameOKRs system

Postconditions: POST-1 The system displays list lessons

POST-2 The system displays detail lesson

Normal Flow: 1 View all lessons

1 User clicks on "Bài học OKRs" item in the drop-down on the right

menu

2 The system shows learning OKRs screen

2 View lesson detail

1 User clicks on "Bài học OKRs" item in the drop-down on the right

menu

2 The system shows learning OKRs screen

3 Click detail lesson

4 Show detail lesson information

Alternative

Flows:

N/A

Exceptions: E1 – The system cannot communicate with API server

The system displays an error message: MSG01

E2 - User tries to edit URL with undefined or not existed lesson ID

The system will display the 404 page

ID and Name: UC-04 View Dashboard

Actors:

Admin, HR, Team Leader

Description: View dashboard:

1 View OKRs progress

2 View star ranking

3 View status checkin, CFRs

Trigger: TRIG-1, TRIG-2, TRIG-3 User click on “Dashboard” menu

Preconditions: User visited FlameOKRs system

Postconditions: N/A

Normal Flow: View Dashboard

1 User click on “Dashboard” in sidebar

2 The system shows dashboard screen with OKRs progress, star ranking, status checkin, CFRs

Alternative

Flows:

N/A

Exceptions: E1 – Cannot communicate with API server

The system displays error message MSG01

3.1 Manage OKRs company

ID and Name: UC-05 Manage OKRs company

Actors:

HR, Admin, TeamLeader Description: Admin manage OKRs of company:

1 View OKRs company

2 Create OKRs company

3 Update OKRs company

4 Delete OKRs company

Trigger: TRIG-1 Admin click on the “OKRs” menu

TRIG-2 Admin click button “Tạo OKRs”

TRIG-3 Admin click button “Cập nhật”

TRIG-4 Admin click icon delete on each OKRs

Preconditions: User has logged in FlameOKRs with admin account

Postconditions: POST-1 The system displays OKRs company

POST-2, POST-3 Reload OKRs page

POST-4 The system displays message confirm and reload OKRs page

Normal Flow: 1 View OKRs company

1 Staff visit OKRs system

2 Click on the “OKRs” tab in sidebar

2 Create OKRs company

1 Perform the normal flow of UC-05.1

2 Click on button “Tạo OKRs công ty”

3 Display form to create OKRs

4 Fill Objectives and Key Results

5 Click “Tạo OKRs” to finish create OKRs

6 The system displays message MSG52

3 Update OKRs company

1 Perform the normal flow of UC-05.1

2 Click on OKRs company detail

3 Display form to edit OKRs

4 Fill Objectives and Key Results

5 Click “Cập nhật” to finish edit OKRs

6 The system displays message MSG51

4 Delete OKRs company

1 Perform the normal flow of UC-05.1

2 Click on icon delete

3 Display confirm box with message MSG53

Exceptions: E1 – Cannot communicate with API server

The system displays error message MSG01

E2 – Create/Update with empty KRs

The system displays message MSG48

3.2 Manage Team Information

ID and Name: UC-06 Manage teams

Primary Actor: Admin Secondary

Actors:

N/A

Description: Admin manange team information:

1 View list team

TRIG-2 Admin click button “Thêm mới” on create team model

TRIG-3 Admin click button “Cập nhật” on edit team model

TRIG-4 Admin click icon delete on each team item

TRIG-5 Admin enter keyword search then press enter

Preconditions: Admin has logged into FlameOKRs website with addmin account

Postconditions: POST-1, POST-5 N/A

POST-2 Display message create success, the reload page

POST-3 Display message update success, the reload page

POST-4 Display message delete success, the reload page

Normal Flow: 1 View list teams

1 User loggin with admin account

2 Admin click on “Cài đặt công ty” on dropdown right username in Navbar or click on “Cài đặt công ty” on side bar

3 Administrator clicks on tab “Quản lý phòng ban”

4 A list of all departments/team information is displayed

2 Create Team Information

1 Perform the normal flow of UC-06.1

2 Administrator click on button “Thêm mới phòng ban”

3 The system displays creation form

4 Admin enters name, description of the new departments/team information

5 Admin clicks the “Thêm mới” button of the form

6 The system creates the new department/team information to the database

7 The system closes form and displays message MSG32 to notify that new departments/team information has been created

3 Update Team Information

1 Perform the normal flow of UC-06.1

2 Administrator click on edit icon in the row his/her wants to edit

3 The system displays edit form

4 Admin update name, shortcut name and index display of the departments/team information

5 Admin clicks the “Cập nhật” button of the form

6 The system saves the modified departments/team information to the database

7 The system closes form and displays a message MSG22

4 Delete Team Information

1 Perform the normal flow of UC-06.1

2 Administrator click on delete icon in the row his/her wants to delete

3 The system displays confirmation dialog

4 Admin clicks the “Đồng ý” button of the dialog

5 The system deletes departments/team information from the database

6 The system reloads the list of departments/team information

7 The system closes dialog and displays a message MSG23

5 Search Team Information

1 Perform the normal flow of UC-06.1

2 Administrator enter keyword then press enter

3 The system displays result matched with keyword

Alternative

Flows:

N/A

Exceptions: E1 – Cannot communicate with API server

The system displays an error message MSG01

E2 – Create/update team is existed in database

The system displays an error message MSG20

E3 – Create/update when input field does not satisfy the UI validator (required fields)

The system displays an error message FR19

3.3 Manage Job’s Position

ID and Name: UC-07 Manage job’s position

Actors:

N/A

Description: Admin manage team information:

1 View job’s position

2 Create job’s position

3 Edit job’s position

4 Delete job’s position

5 Search job’s position

Trigger: <Extend UC-06>

Preconditions: Admin has logged into FlameOKRs website with admin account

Postconditions: <Extend UC-06>

Normal Flow: 1 View job’s position

1 User loggin with admin account

2 Admin click on “Cài đặt công ty” on dropdown right username in Navbar or click on “Cài đặt công ty” on side bar

3 Administrator clicks on tab “Quản lý vị trí công việc”

4 A list of all job’s information is displayed

2 Create job’s position

1 Perform the normal flow of UC-07.1

2 Administrator click on button “Thêm mới vị trí”

3 The system displays creation form

4 Admin enters name, description of the new job’s information

5 Admin clicks the “Thêm mới” button of the form

6 The system creates the new job’s information to the database