Software Architecture Document (SAD)

Supermarket’s Products Management

Website System (Teddy Mart)

Version 1.0

February, 2024
Group 7

Nguyễn Thị Phương Tiên - MSSV: 21520112

Đoàn Tấn Khang - MSSV: 21520276
Lê Thị Bích Hằng - MSSV: 21522041
OUTLINE

1. Introduction...........................................................................................................................................................................
1.1. Purpose..........................................................................................................................................................................
1.2. Summary of the document............................................................................................................................................
1.3. Applicable Document....................................................................................................................................................
2. System Definition...................................................................................................................................................................
2.1. Functional Requirements...............................................................................................................................................
2.2. Design Constraints........................................................................................................................................................
2.3. Quality Attribute Requirements....................................................................................................................................
2.3.1. Performance..........................................................................................................................................................
2.3.2. Security.................................................................................................................................................................
2.3.3. Availability...........................................................................................................................................................
2.3.4. Maintainability.....................................................................................................................................................
2.3.5. Interoperability.....................................................................................................................................................
2.4. Architectural Representation.........................................................................................................................................
3. References............................................................................................................................................................................
4. Glossary................................................................................................................................................................................

LIST OF FIGURES

3
Figure 1: Functional Overview....................................................................................................................10
Figure 2: Activities Flow of UC Sign Up....................................................................................................11
Figure 3: Activities Flow of UC Sign In......................................................................................................14
Figure 4: Activities Flow of UC Forgot Password......................................................................................17
Figure 9: Activities Flow of UC Add New Supermarket............................................................................24
Figure 6: Activities Flow of UC Update Supermarket................................................................................26
Figure 7: Activities Flow of UC Delete Supermarket.................................................................................28
Figure 8: Activities Flow of UC Add New Staff.........................................................................................30
Figure 9: Activities Flow of UC Update Staff.............................................................................................32
Figure 11: Activities Flow of UC Search Staff............................................................................................36
Figure 12: Activities Flow of UC Add New Order......................................................................................39
Table 25: Description of UC Update Order.................................................................................................41
Figure 13: Activities Flow of UC Update Order........................................................................................41
Figure 14: Activities Flow of UC Delete Order...........................................................................................44
Figure 15: Activities Flow of UC Search Order..........................................................................................46
Figure 16: Activities Flow of UC Add New Voucher.................................................................................48
Figure 17: Activities Flow of UC Update Voucher.....................................................................................50
Figure 18: Activities Flow of UC Delete Voucher......................................................................................52
Figure 19: Activities Flow of UC Search Voucher......................................................................................54
Figure 20: Activities Flow of UC Add New Product..................................................................................57
Figure 21: Activities Flow of UC Update Product......................................................................................59
Figure 22: Activities Flow of UC Delete Product.......................................................................................61
Figure 23: Activities Flow of UC Search Product.......................................................................................63
Figure 24: Activities Flow of UC Add New Product Group.......................................................................64
Figure 25: Activities Flow of UC Update Product Group...........................................................................66
Figure 26: Activities Flow of UC DeleteProduct Group.............................................................................68
Figure 27: Activities Flow of UC Search Product Group............................................................................70
Figure 28: Activities Flow of UC Add New Supplier.................................................................................72
Figure 29: Activities Flow of Update Supplier............................................................................................74
Figure 30: Activities Flow of Delete Supplier.............................................................................................76
Figure 31: Activities Flow of Search Supplier............................................................................................78
Figure 32: Activities Flow of Add New Customer......................................................................................79

4
Figure 33: Activities Flow of Update Customer..........................................................................................81
Figure 34: Activities Flow of Delete Customer...........................................................................................83
Figure 35: Activities Flow of Search Customer..........................................................................................85
Figure 36: Activities Flow of Add New Import Order................................................................................86
Figure 37: Activities Flow of Update Import Order....................................................................................88
Figure 38: Activities Flow of Delete Import Order.....................................................................................89
Figure 39: Activities Flow of Search Import Order.....................................................................................91
Figure 40: Activities Flow of Add New Warehouse...................................................................................92
Figure 41: Activities Flow of Update Warehouse.......................................................................................94
Figure 42: Activities Flow of Delete Warehouse........................................................................................96
Figure 43: Activities Flow of Search Warehouse........................................................................................97
Figure 44: Activities Flow of View Report and Statistics...........................................................................99
Figure 45: Activities Flow of Sign Out.....................................................................................................101
Figure 46: Logical View............................................................................................................................110
Figure 47: Front-end structure...................................................................................................................112
Figure 48: Activities Flow of Data View...................................................................................................114
Figure 49: Deployment View.....................................................................................................................120
Figure 50: MVC Model.............................................................................................................................121

5
LIST OF TABLES
Table 1: Applicable Document....................................................................................................................11
Table 2: Description of UC Sign Up............................................................................................................13
Table 3: Business Requirements of UC Sign Up.........................................................................................15
Table 4: Description of UC Sign In.............................................................................................................16
Table 5: Business Requirements of UC Sign In..........................................................................................18
Table 6: Description of UC Forgot Password..............................................................................................19
Table 7: Business Requirements of UC Forgot Password...........................................................................25
Table 8: Description of UC Add New Supermarket....................................................................................26
Table 10: Business Requirements of UC Add New Supermarket...............................................................28
Table 11: Description of UC Update Supemartket......................................................................................29
Table 12: Business Requirements of UC Update Supemartket...................................................................30
Table 13: Description of UC Delete Supemartket.......................................................................................31
Table 14: Business Requirements of UC Delete Supemartket....................................................................32
Table 15: Description of UC Add New Staff...............................................................................................32
Table 16: Business Requirements of UC Add New Staff............................................................................34
Table 17: Description of UC Update Staff.................................................................................................35
Table 18: Business Requirements of UC Update Staff...............................................................................36
Table 19: Description of UC Delete Staff....................................................................................................37
Table 20: Business Requirements of UC Delete Staff................................................................................38
Table 21: Description of UC Search Staff..................................................................................................39
Table 22: Business Requirements of UC Search Staff...............................................................................40
Table 23: Description of UC Add New Order............................................................................................41
Table 24: Business Requirements of UC Add New Order.........................................................................43
Table 25: Description of UC Update Order.................................................................................................44
Table 26: Business Requirements of UC Update Order.............................................................................45
Table 27: Description of UC Delete Order.................................................................................................46
Table 28: Business Requirements of UC Delete Order..............................................................................48
Table 29: Description of UC Search Order.................................................................................................49
Table 30: Business Requirements of UC Search Order..............................................................................50
Table 31: Description of UC Add New Voucher........................................................................................50
Table 32: Business Requirements of UC Add New Voucher.....................................................................52
Table 33: Description of UC Update Voucher...........................................................................................52

6
Table 34: Business Requirements of UC Update Voucher.........................................................................54
Table 35: Description of UC Delete Voucher.............................................................................................54
Table 36: Business Requirements of UC Delete Voucher..........................................................................56
Table 37: Description of UC Search Voucher............................................................................................57
Table 38: Business Requirements of UC Search Voucher.........................................................................58
Table 39: Description of UC Add New Product.........................................................................................59
Table 40: Business Requirements of UC Add New Product......................................................................60
Table 41: Description of UC Update Product.............................................................................................61
Table 42: Business Requirements of UC Update Product..........................................................................62
Table 43: Description of UC Delete Product..............................................................................................63
Table 44: Business Requirements of UC Delete Product...........................................................................65
Table 45: Description of UC Search Product.............................................................................................65
Table 46: Business Requirements of UC Search Product...........................................................................66
Table 47: Description of UC Add New Product Group..............................................................................67
Table 48: Business Requirements of UC Add New Product Group...........................................................68
Table 49: Description of UC Update Product Group..................................................................................68
Table 50: Business Requirements of UC Update Product Group...............................................................69
Table 51: Description of UC Delete Product Group...................................................................................70
Table 52: Business Requirements of UC Delete Product Group................................................................72
Table 53: Business Requirements of UC Search Product Group...............................................................73
Table 54: Business Requirements of UC Search Product Group...............................................................74
Table 55: Description of UC Add New Supplier........................................................................................75
Table 56: Business Requirements of UC Add New Supplier.....................................................................76
Table 57: Description of UC Update Supplier............................................................................................77
Table 58: Business Requirements of UC Update Supplier.........................................................................78
Table 59: Description of UC Delete Supplier..............................................................................................79
Table 60: Business Requirements of UC Delete Supplier..........................................................................80
Table 61: Description of UC Search Supplier............................................................................................80
Table 62: Business Requirements of UC Search Supplier..........................................................................81
Table 63: Description of UC Add New Customer......................................................................................82
Table 64: Business Requirements of UC Add New Customer...................................................................83
Table 65: Description of UC Update Customer..........................................................................................84
Table 66: Business Requirements of UC Update Customer.......................................................................85

7
Table 67: Description of UC Delete Customer...........................................................................................86
Table 68: Business Requirements of UC Delete Customer........................................................................87
Table 69: Description of UC Search Customer..........................................................................................87
Table 70: Business Requirements of UC Search Customer........................................................................88
Table 71: Description of UC Add New Import Order................................................................................89
Table 72: Business Requirements of UC Add New Import Order.............................................................90
Table 73: Description of UC Update Import Order....................................................................................90
Table 74: Business Requirements of UC Update Import Order.................................................................91
Table 75: Description of UC Delete Import Order.....................................................................................92
Table 76: Business Requirements of UC Delete Import Order..................................................................93
Table 77: Description of UC Search Import Order.....................................................................................93
Table 78: Business Requirements of UC Search Import Order..................................................................94
Table 79: Description of UC Add New Warehouse...................................................................................95
Table 80: Business Requirements of UC Add New Warehouse.................................................................96
Table 81: Description of Update Warehouse..............................................................................................96
Table 82: Business Requirements of UC Update Warehouse....................................................................98
Table 83: Description of UC Delete Warehouse........................................................................................98
Table 84: Business Requirements of UC Delete Warehouse......................................................................99
Table 85: Description of UC Search Warehouse......................................................................................100
Table 86: Business Requirements of UC Search Warehouse...................................................................101
Table 87: Description of UC View Report and Statistics.........................................................................101
Table 88: Business Requirements of UC View Report and Statistics......................................................102
Table 89: Description of UC Sign Out.....................................................................................................103
Table 90: Business Requirements of UC Add New Supermarket............................................................105
Table 91: Description of Quick Response Time........................................................................................107
Table 92: Description of Quick Reload.....................................................................................................108
Table 93: Description of Authentication....................................................................................................109
Table 94: Description of Access Permission - Role-based control............................................................109
Table 95: Description of Logging and Monitoring - Error Detection.......................................................110
Table 96: Description of Data Consistency - Concurrency.......................................................................111
Table 98: Desciption of Third-party integration........................................................................................112
Table 99: Elements in Data View..............................................................................................................123
Table 100: Terms in Documents................................................................................................................125

8
 1. Introduction
1.1. Purpose

This report describes the practical application of the Attribute-Driven Design

(ADD) method developed by Group 7. The ADD method is an approach to defining a
software architecture in which the design process is based on the quality attribute
requirements the software must fulfill. ADD follows a recursive process that decomposes
a system or system element by applying architectural tactics and patterns that satisfy its
driving quality attribute requirements.
The report applies ADD to Supermarket’s Products Management Website System
- a client-server system to satisfy several architectural drivers, such as functional
requirements, design constraints, and quality attribute requirements. In particular, this
example focuses on selecting patterns to satisfy typical availability requirements for fault
tolerance. The design concerns and patterns presented in this report as well as the models
used to determine whether the architecture satisfies the architectural drivers can be
applied in general to include fault tolerance in a system. Most of the reasoning used
throughout the design process is pragmatic and models how an experienced architect
works.

1.2. Summary of the document

Below are main sections of the document:

● Section 1 - Introduction: This section describes the general introduction of this
document.
● Section 2 - System Definition: This section describes Supermarket’s Products
Management Website System - a client-server system. We are designing its
architecture in terms of three architecture requirements: functional requirements,
design constraints, and quality attribute requirements.

9
 ● Section 3 - Conclusion: This section describes conclusion and results after
applying ADD
● Section 4 - References: This section describes references, materials, documents
related to this report.
● Section 5 - Glossary: This section describes all acronyms and abbreviations you
may encounter within this document.
1.3. Applicable Document

# Title Version File Name / Link Description

1 Utilities Tree 1.0 Utility Tree Link utilities with quality
attributes, attribute
requirements, ASR
(Auxiliary Service
Request)
2 ASR 1.0 ASR - Architectural Link ASR with functions
Significant Requirements and architectural
requirement
3 Data View 1.0 Database.docx Link Data View with class
diagram
Table 1: Applicable Document

2. System Definition
2.1. Functional Requirements
2.1.1. Functional Overview

10
Figure 1: Functional Overview

11
 2.1.2. Authentication
● UC1: Sign Up

Name Sign Up
The user accesses the website, creating a new account by providing
personal information.
* Architectural Requirement:
● Security: Implement password authentication mechanisms.
Users are required to provide a password and confirm
password. As regards sign up with Google account, comply
Description with google privacy policy about data security.
● Performance: The system should handle the account
creation request within 10 seconds.
● Interoperability: Integrate services for Google Cloud for
function Sign up with Google. The system needs to use
third-party verification services like Firebase or libraries
such as EmailJS to verify the account of users.

Actor User ( Manager, Staff )

Trigger
The user accesses the website and presses the Sign Up button.

Pre-condition The website displays 2 options for the user: Login or Sign Up. The
user does not have an account.
Post-condition A new account is created and the user is back to the Login screen.
Table 2: Description of UC Sign Up

○ Activities Flow

12
 Figure 2: Activities Flow of UC Sign Up

○ Business Requirements

Activity BR Code Description

(2) BR1 Display “Sign Up” Form Requirements:

❖ The system loads the “Sign Up” screen.

13
(5) BR2 Submitting Requirements:

When user clicks on “Sign Up” button, the system will validate data and
save inputted information, submit the item to administrator as the
following:

❖ If one of the fields the the form is blank, the system

will show a error message (MSG 009)
❖ If [Email] <> "^[A-Za-z0-9+_. -]+@(. +)$”
⮚ The system will show a error message (MSG
10)
❖ If [Email] has existed in database, the system will
show error message (MSG 12)
❖ If [Phone Number] = “^\\d{10}$”

⮚ The system will show a error message (MSG

11)

❖ If [Phone Number] has existed in database, the

system will show error message (MSG 7)
❖ If [Password] = "^.{9,}$"
⮚ The system will show a error message (MSG 13)
❖ If all the fields are valid, show a successful
message (MSG 14).
❖ Send verify email as Email Templates below
Table 3: Business Requirements of UC Sign Up

● UC2: Sign In

Name Sign In
Description The user accesses the website, creating a new account by providing
personal information.
* Architectural Requirement:

14
 ● Security: Implement password authentication mechanisms.
Users are required to provide a password and confirm
password. As regards sign in with Google account, comply
with google privacy policy about data security.
● Performance: The system should handle the account
creation request within 10 seconds.
● Interoperability: Integrate services for Google Cloud for
function Sign up with Google. The system needs to use
third-party verification services like Firebase or libraries
such as EmailJS to verify the account of users.

Actor User ( Manager, Staff )

Trigger
The user accesses the website and presses the Sign In button.

Pre-condition The website displays 2 options for the user: Login or Sign Up. The
user does not have an account.
Post-condition A new account is created and the user is back to the Login screen.

Table 4: Description of UC Sign In

○ Activities Flow

15
 Figure 3: Activities Flow of UC Sign In

○ Business Requirements

Activity BR Code Description

(1) BR3 Display “Sign In” Form Requirements:

❖ The system loads the “Sign In” screen.
(Refer to “Sign In” list in “List Description” file)

(4) BR4 Submitting Requirements:

When user clicks on “Sign In” button, the system will validate
data and save inputted information as the following:

❖ If one of the fields the the form is blank, the

system will show a error message (MSG 9)
❖ If [Email] has not existed in database, the
system will show error message (MSG 15)

16
 ❖ If [Password] does not match with the
password of given email, the system will show
error message (MSG 15)
❖ If sign-in is successful:
Set [Last Login Date] to the current date and time.

Table 5: Business Requirements of UC Sign In

● UC3: Forgot Password

Name Forgot Password

Description The Customer access website, providing email address to change

password.
Actor User ( Manager, Staff )

Trigger
The user presses the Forgot Password button in the Login screen.
Pre-condition The user has created an account successfully.
Post-condition The user can reset the password by providing a new password.
Table 6: Description of UC Forgot Password

○ Activities Flow

17
 Figure 4: Activities Flow of UC Forgot Password
○ Business Requirements

Activity BR Description
Code

(2) BR5 Display “Forgot Password” Form Requirements:

❖ The system loads “Forgot Password” screen.

18
(5) BR6 Submitting Requirements:

When user clicks on “Continue” button, the system will validate

data and save inputted information as the following:

❖ If one of the fields the the form is blank, the

system will show a error message (MSG 9)
❖ If [Reset Email] has not existed in database,
the system will show error message (MSG 15)
❖ If [Reset Email] is valid, the system will send
code via email Reset Password and display “Code
Reset Password” form
Display “Code Reset Password ” Form Requirements:
The system loads “Code Reset Password” screen.

Email Templates:
❖ Send mail to user change password as the
template below:

From [email protected]

To [Email]

Cc N/A

Subject Get [Subject] of “Email Template” item

of which [Keyword] = “Forgot
Password”

Body Get [Body] of “Email Template” item

of which [Keyword] = “Forgot
Password”

Following is sample email content:

19
Subject "Reset Password"

Body [Body] = “Hello,”

[Body] = [Body] + 2 new lines

[Body] = [Body] + “You have

requested to reset the password of
your TEDDY MART account.”

[Body] = [Body] + 2 new lines

[Body] = [Body] + "Please find the

security code to change your
password: "

[Body] = [Body] + 2 new lines

[Body] = [Body] + [Code]

[Body] = [Body] + 2 new lines

[Body] = [Body] + "If you didn’t ask

to reset your password, you can
ignore this email."

[Body] = [Body] + "Thanks."

[Body] = [Body] + 2 new lines

[Body] = [Body] + "The Teddy Mart

team"

20
(7) BR7 Submitting Requirements:

When user clicks on “Confirm” button, the system will validate

data:

❖ If [Code] = “”, the system will show a error

message (MSG 9)
❖ If [Reset Password Code] = [Code] and
[Reset Email] = [Email]
● Display “Reset Password” form
❖ Else
● The system will show error message (MSG 16)

Display “Reset Password ” Form Requirements:

The system loads “Reset Password” screen. (Refer to “Reset
Password” list in “List Description” file)

(9) BR8 Submitting Requirements:

When user clicks on “Reset Password” button, the system will

validate data:

❖ If one of the fields the the form is blank, the

system will show a error message (MSG 9)
❖ If [New Password] <> "^.{9,}$"
The system will show error message (MSG 13)
❖ If [Confirmation Password] <> [New
Password]
● The system will show error
message (MSG 17)
❖ Else if
● Set [Password] = [New Password]

21
 ● The system will show successful message (MSG 18)

Table 7: Business Requirements of UC Forgot Password

2.1.3. View Supermarket

● UC1: Add New Supermarket

Name Add New Supermarket

Description The user accesses the website, add new supermarket by providing
personal information.
* Architectural Requirement:
● Interoperability: Implement a secure and straightforward
password recovery mechanism, allowing users to reset their
passwords through a verified email link. Integrate with
Firebase's services to send email reset passwords to users.
Actor Manager
Trigger
The user clicks the Add New Supermarket Button.
Pre-condition
The user has been signed up to the website.
Post-condition A new supermarket is added to the database.

Table 8: Description of UC Add New Supermarket

○ Activities Flow

22
 Figure 5: Activities Flow of UC Add New Supermarket

○ Business Requirements

Activity BR Description
Code

(1) BR 9 ❖ Display Form Add New Supermarket Requirements:

● The system loads the “Add New Supermarket” form.
(Refer to “Add New Supplier” list in “List Description”
file)
(3) BR 10 ❖ Supermarket Name Requirements:
● If (SupermarketName == “”) => MSG 009
❖ Address Requirements:
● If (Address == “”) => MSG 009
❖ Business Field Requirements:
● The system shows the dropdown suggested business

23
 field in the system.
● The user chooses an option in the suggestion list.The
user can add [newBusinessField] to the list
❖ Image Requirements
● If (Image.size > 2MB) => MSG 018
● If (!Image.endWith(.png) || !Image.endWith(.jpeg)) =>
MSG 015

❖ Supermarket ID Requirements:
Supermarket ID must begin with “S” character
Supermarket ID must be unique
Example: S00001
Table 10: Business Requirements of UC Add New Supermarket

● UC2: Update Supermarket

Name Update Supermarket
Description The user accesses the website, add new supermarket by providing
personal information.
Actor Manager
Trigger
The user presses the “Update” button.
Pre-condition
The supplier needing to update has existed in the database.
Post-condition A supermarket is updated to the database.

Table 11: Description of UC Update Supemartket

○ Activities Flow

24
 Figure 6: Activities Flow of UC Update Supermarket

○ Business Requirements

Activity BR Description
Code

(1) BR 11 ❖ Display Form Update Supermarket Requirements:

The system loads the “Update Supermarket” form. (Refer to
“Update Supplier” list in “List Description” file)
(2) BR 12 ❖ Supermarket Name Requirements:
If (SupermarketName == “”) => MSG 009
❖ Address Requirements:
If (Address == “”) => MSG 009
❖ Business Field Requirements:
The system shows the dropdown suggested business field in
the system.
The user chooses an option in the suggestion list.The user
can add [newBusinessField] to the list
❖ Image Requirements
If (Image.size > 2MB) => MSG 018
If (!Image.endWith(.png) || !Image.endWith(.jpeg)) =>
MSG 015
Table 12: Business Requirements of UC Update Supemartket

25
 ● UC3: Delete Supermarket
Name Delete Supermarket
Description The user accesses the website to delete the supermarket.
Actor Manager
Trigger
The user presses the “Delete” button.
Pre-condition
The supermarket needing to delete has existed in the database.
Post-condition A supermarket is deleted to the database.

Table 13: Description of UC Delete Supemartket

○ Activities Flow

Figure 7: Activities Flow of UC Delete Supermarket

○ Business Requirements

Activity BR Description
Code

(1) BR 13 ❖ Display List Supplier Requirements:

26
 ● The system loads the “Supermarket” screen. (Refer to
“Supermarket” list in “List Description” file)
(2) BR 14 ❖ Delete Requirements:
● User clicks on the “Delete” button.
● The system prompt a confirmation message (Refer to
MSG 006)
● If the user chooses Cancel, the system does nothing; else,
the system will delete the supplier from the database and
show message MSG 031.
Table 14: Business Requirements of UC Delete Supemartket

2.1.4. View Staff

● UC1: Add New Staff

Name Add New Staff

Description The user accesses the website, providing information to add new
staff.
* Architectural Requirement:
● Interoperability: Only manager of supermarket can add new
account for their staff. Each time manager create account,
the system integrate with third-party EmailJS to send email
to staff.
Actor Manager

Trigger
The user presses Add new button.
Pre-condition The user has already logged in.
Post-condition New staff has been added to database
Table 15: Description of UC Add New Staff

○ Activities Flow

27
 Figure 8: Activities Flow of UC Add New Staff
○ Business Requirements

Activity BR Description
Code
(2) BR 15 ❖ Loading Screen Requirements:
● The system loads “Add New Staff” screen.
(4) & (5) BR 16 ❖ Submitting Requirements:
When user clicks on “Submit”, the system will prompt a
confirmation message. If user chooses Cancel, the system does
nothing; else, the system will save inputted information, submit
the item to appropriate approver and update the item as the
following:
● The system retrieves “Staff Identification”
compared to data in system
● If there is no retrieved value, the system shows an
success
● Else show an error success ( refer to MSG 021)
❖ If [Error Reason] = “Technical Fault”

28
 ● Set [Document Status] = “Sent to Technical Sign
Off”
❖ Else
● Set [Document Status] = “Sent to Office Sign
Off”.
If [email] <> email format → MSG 010
Require [totalBuyAmount] >=0 && [debt] >=0 → MSG
025
Table 16: Business Requirements of UC Add New Staff

● UC2: Update Staff

Name Update Staff
Description The user accesses the website, providing information to update
staff.
Actor Manager

Trigger
The user presses the Update icon of the product.
Pre-condition The staff needing to update has existed in the database.
Post-condition Staff has been updated to database

Table 17: Description of UC Update Staff

○ Activities Flow

29
 Figure 9: Activities Flow of UC Update Staff

○ Business Requirements

Activity BR Description
Code
(2) BR 17 ❖ Loading Screen Requirements:
● The system loads “Staff Information” screen.
(4) & (5) BR 18 ❖ Submitting Requirements:
When user clicks on “Submit”, the system will prompt a
confirmation message. If user chooses Cancel, the system does
nothing; else, the system will save inputted information, submit
the item to appropriate approver and update the item as the
following:
● The system retrieves “Staff Identification”
compared to data in system
● If there is no retrieved value, the system compared
the data from user and from system
❖ If [Error Reason] = “Technical Fault”

30
 ● Set [Document Status] = “Sent to Technical Sign
Off”
❖ Else
● Set [Document Status] = “Sent to Office Sign
Off”.
If [email] <> email format → MSG 010
Require [totalBuyAmount] >=0 && [debt] >=0 → MSG
025
If all data is correct → MSG 023
Table 18: Business Requirements of UC Update Staff

● UC3: Delete Staff

Name Delete Staff
Description The user accesses the website to delete staff.
Actor Manager

Trigger
The user presses the Delete icon of the product.
Pre-condition Staff needing to be deleted have existed in the system.
Post-condition Staff is deleted from database
Table 19: Description of UC Delete Staff

○ Activities Flow

31
 Figure 10: Activities Flow of UC Delete Staff
○ Business Requirements

Activity BR Description
Code
(2) BR 19 ❖ Loading Screen Requirements:
● The system loads “Delete Staff” screen.
(5) BR 20 ❖ Submitting Requirements:
When user clicks on “Submit”, the system will prompt a
confirmation message. If user chooses Cancel, the system does
nothing; else, the system will save inputted information, submit
the item to appropriate approver and update the item as the
following:
● The system retrieves “Staff Identification”
compared to data in system
● If there is no retrieved value, the system will

32
 prompt to user ( refer to MSG 006)
● If user choose confirm → the system will delete
staff data
● Else If user choose cancel, the system does nothing
Table 20: Business Requirements of UC Delete Staff

● UC4: Search Staff

Name Search Staff

Description The user accesses the website, providing information to find staff.
Actor Manager

Trigger
The user enters the name of the staff in the search box.
The list of staff matching with the keyword that is provided by the
Pre-condition
user is displayed.
Post-condition The system shows the staff information.

Table 21: Description of UC Search Staff

○ Activities Flow

33
 Figure 11: Activities Flow of UC Search Staff
○ Business Requirements

Activity BR Description
Code
(1) BR 21 ❖ Loading Screen Requirements:
● The system loads the “Search Staff” screen.
(5) BR 22 ❖ Search Requirements:
● When user enter text in search textinput, the

system query data from this value

● If [staffName] includes [searchValue]=== true, the

system show product data

● If [dataResult].length===0, the system show MSG

032.
Table 22: Business Requirements of UC Search Staff

34
 2.1.5. View Sale
● UC1: Add New Order

Name Add New Order

Description The user accesses the website, providing information to add new
orders.
* Architecture Requirement
● Performance: Ensure the website loads quickly and
remains responsive, even under heavy load, aiming for a
load time of under 5 seconds.
● Modifiability: Ensure data consistency and concurrency. In
scenarios where one staff member adds/updates/deletes an
order and removes a product from the shelf, it is crucial that
this change is immediately reflected across the system to
prevent other staff members from seeing outdated
information. This ensures that all actions taken based on the
data are accurate and based on the current state of the data.
Actor Manager/ Staff

Trigger
The user presses Add new button.

Pre-condition The user has already logged in.

Post-condition New order has been added to database
Table 23: Description of UC Add New Order

○ Activities Flow

35
 Figure 12: Activities Flow of UC Add New Order

○ Business Requirements

Activity BR Description
Code

(2) BR 23 Display “Add New Order” Form Requirements:

❖ The system loads the “Add New Order”
screen.

(3) BR 24 ❖ The User enter order information field with

requirement follow:
❖ Search customer name from the search bar. If
[customerName] === [searchValue] → Show customer
Info, else nothing
❖ Set [isExport] = 1
❖ Choose [warehouseName] from list option
❖ Depends on the warehouse. The system will get data and

36
 show in product table
❖ The user will tick the product which they want to buy and
choose quantity of product ( typeof [quantity] =”number”)
❖ The user choose my voucher to apply for this order
❖ If a user has any note for an employee. The user can enter
their note for their order

(4) & (5) BR 25 After the user submit data, the system will validate this
information
If success, save data into database
If fail, notify to user
Table 24: Business Requirements of UC Add New Order

● UC2: Update Order

Name Update Order

Description The user accesses the website, providing information to update
order.
* Architecture Requirements:
● Performance: Ensure the website loads quickly and
remains responsive, even under heavy load, aiming for a
load time of under 5 seconds.
Actor Manager/ Staff

Trigger
The user presses the Update icon of the order.
Pre-condition The order needing to update has existed in the database.
Post-condition Order has been updated to database

Table 25: Description of UC Update Order

○ Activities Flow

37
 Figure 13: Activities Flow of UC Update Order

○ Business Requirements

Activity BR Description
Code

(2) BR 26 Display “Update Order” Form Requirements:

❖ The system loads the “Update Order”
screen.

(3) BR 27 The user only can change note field in order (optional)

Table 26: Business Requirements of UC Update Order

● UC3: Delete Order

38
Name Delete Order
Description The user accesses the website to delete order.
* Architecture Requirements:
● Modifiability: Ensure data consistency and concurrency. In
scenarios where one staff member adds/updates/deletes an
order and removes a product from the shelf, it is crucial that
this change is immediately reflected across the system to
prevent other staff members from seeing outdated
information. This ensures that all actions taken based on the
data are accurate and based on the current state of the data.
Actor Manager

Trigger
The user presses the Delete icon of the order.
Pre-condition Order needing to be deleted have existed in the system.
Post-condition Order is deleted from database
Table 27: Description of UC Delete Order

○ Activities Flow

39
 Figure 14: Activities Flow of UC Delete Order

○ Business Requirements

Activity BR Description
Code

(2) BR 28 Display Confirmation Dialog Requirements:

❖ The system displays confirmation dialog to
delete the chosen order (MSG 005)

(5), (6) BR 29 ❖ Submitting Requirements:

When the user clicks on “Yes” to confirm delete the order, the
system will validate data and update the database:
The system retrieves “Order Identification” compared

40
 to data in system
If there is no retrieved value, the system will prompt to
user (refer to MSG 032)
If validate data successfully, the order will be deleted
and shows a successful message (refer to MSG
031).
Table 28: Business Requirements of UC Delete Order

● UC1: Search Order

Name Search Order

Description The user accesses the website, providing information to find order.
* Architecture Requirements:
● Real-time Response: The search feature should provide
real-time responses to users' queries, ensuring that search
results are returned promptly, even during peak usage times.
Actor Manager/ Staff

Trigger
The user enters the name of the order in the search box.
The list of order matching with the keyword that is provided by the
Pre-condition
user is displayed.
Post-condition The system shows the order information.
Table 29: Description of UC Search Order

○ Activities Flow

41
 Figure 15: Activities Flow of UC Search Order

○ Business Requirements

Activity BR Description
Code
(2) BR 30 ❖ Loading Screen Requirements:
● The system loads the “Search Order” screen.
(5) BR 31 ❖ Search Requirements:
When user enter keywords in search text input, the
system query data from this value
If [orderName] includes [searchValue]=== true, the
system show product data
If [dataResult].length===0, the system shows MSG
032.
Table 30: Business Requirements of UC Search Order

42
 2.1.6. View Voucher

● UC1: Add New Voucher

Name Add New Voucher

Description The user accesses the website, providing information to add new
voucher.
Actor Manager

Trigger
The user presses Add new button.

Pre-condition The user has already logged in.

Post-condition New voucher has been added to database
Table 31: Description of UC Add New Voucher

○ Activities Flow

Figure 16: Activities Flow of UC Add New Voucher

○ Business Requirements

43
Activity BR Description
Code
(2) BR 31 ❖ Loading Screen Requirements:
● The system loads “Add New Voucher” form.
(5) BR 32 Submitting Requirements:
If (voucherName == “”) → MSG 009
If (publicDate < expiredDate) → MSG 043
If (publicDate or expiredDate is not in date
format ) → MSG 044
If (discountAmount is not in number format) →
MSG 045
If (discountAmount < 0 || discountAmount > 1) →
MSG 046
Table 32: Business Requirements of UC Add New Voucher

● UC2: Update Voucher

Name Update Voucher

Description The user accesses the website, providing information to update
voucher.
Actor Manager

Trigger
The user presses the Update icon of the voucher.
Pre-condition The voucher needing to update has existed in the database.
Post-condition Voucher has been updated to database

Table 33: Description of UC Update Voucher

○ Activities Flow

44
 Figure 17: Activities Flow of UC Update Voucher

○ Business Requirements

Activity BR Description
Code
(2) BR 33 ❖ Loading Screen Requirements:
● The system loads “Update Voucher” screen.
(4) & (5) BR 34 Submitting Requirements:
If (voucherName == “”) → MSG 009
If (publicDate < expiredDate) → MSG 043
If (publicDate or expiredDate is not in date
format ) → MSG 044
If (discountAmount is not in number format) →
MSG 045
If (discountAmount < 0 || discountAmount > 1) →
MSG 046
Table 34: Business Requirements of UC Update Voucher

45
 ● UC3: Delete Voucher

Name Delete Voucher

Description The user accesses the website to delete voucher.
Actor Manager

Trigger
The user presses the Delete icon of the voucher.
Pre-condition Voucher needing to be deleted have existed in the system.
Post-condition Voucher is deleted from database
Table 35: Description of UC Delete Voucher

○ Activities Flow

Figure 18: Activities Flow of UC Delete Voucher

○ Business Requirements

46
Activity BR Description
Code
(2) BR 35 ❖ Loading Screen Requirements:
● The system loads “Voucher” screen.
(4) & (5) BR 36 ❖ Submitting Requirements:
When the user clicks on “Delete”, the system will prompt a
confirmation message. If user chooses Cancel, the system does
nothing; else, the system will save inputted information, submit
the item to appropriate approver and update the item as the
following:
● The system retrieves “voucherId” compared to
data in system
● If user choose delete product, the system delete
voucher information by voucherId
● else the system does nothing
Table 36: Business Requirements of UC Delete Voucher

● UC4: Search Voucher

Name Search Voucher

Description The user accesses the website, providing information to find
voucher.
* Architecture Requirements:
● Real-time Response: The search feature should provide
real-time responses to users' queries, ensuring that search
results are returned promptly, even during peak usage times.
Actor Manager

Trigger
The user enters the name of the voucher in the search box.
The list of order matching with the keyword that is provided by the
Pre-condition
user is displayed.

47
Post-condition The system shows the voucher information.
Table 37: Description of UC Search Voucher

○ Activities Flow

Figure 19: Activities Flow of UC Search Voucher

○ Business Requirements

Activity BR Description
Code
(2) BR 37 ❖ Loading Screen Requirements:
● The system loads “Voucher” screen.
(5) BR 38 ❖ Submitting Requirements:
1. When user enter text in search textinput, the
system query data from this value
2. If [voucherName] includes [searchValue]=== true,
the system show voucher data
3. If [dataResult].length===0, the system show MSG
032

48
 Table 38: Business Requirements of UC Search Voucher

2.1.7. View Product

● UC1: Add New Product

Name Add New Product

Description The user accesses the website, providing information to add new
supplier.
* Architectural Requirements:
● Interoperability: Only manager of supermarket have full
permission of CRUD the product data. And staff only can
view the data
Actor Manager

Trigger
The user presses Add new button.
Pre-condition The user has already logged in.
Post-condition New product has been added to database
Table 39: Description of UC Add New Product

○ Activities Flow

49
 Figure 20: Activities Flow of UC Add New Product

○ Business Requirements

Activity BR Description
Code
(2) BR 39 ❖ Loading Screen Requirements:
● The system loads “Add New Product” screen.
(4) & (5) BR 40 ❖ Submitting Requirements:
When user clicks on “Submit”, the system will prompt a
confirmation message. If user chooses Cancel, the system does
nothing; else, the system will save inputted information, submit
the item to appropriate approver and update the item as the
following:
● The system retrieves “productId” compared to data
in system
● If there is no retrieved value, the system shows an
success
● Else show an error success ( refer to MSG 021)

50
 If [groupName] invalid || [groupId] invalid → MSG 010
If [cost_price]*(1+[VAT]) < [sell_price] → MSG 027
If [productName] invalid → MSG 010
If all information correct → MSG 028
Table 40: Business Requirements of UC Add New Product

● UC2: Update Product

Name Update Product

Description The user accesses the website, providing information to update
Products.
* Architectural Requirements:
● Interoperability: Only manager of supermarket have full
permission of CRUD the product data. And staff only can
view the data
Actor Manager

Trigger
The user presses the Update icon of the product.
Pre-condition The product needing to update has existed in the database.
Post-condition Product has been updated to database
Table 41: Description of UC Update Product

○ Activities Flow

51
 Figure 21: Activities Flow of UC Update Product
○ Business Requirements

Activity BR Description
Code
(2) BR 41 ❖ Loading Screen Requirements:
● The system loads “Update Product” screen.
(4) & (5) BR 42 ❖ Submitting Requirements:
When user clicks on “Submit”, the system will prompt a
confirmation message. If user chooses Cancel, the system does
nothing; else, the system will save inputted information, submit
the item to appropriate approver and update the item as the
following:
● The system retrieves “productId” compared to data
in system
● If there is retrieved value, the system shows an
success
● Else show an error success ( refer to MSG 021)

52
 If [groupName] invalid || [groupId] invalid → MSG 010
If [cost_price]*(1+[VAT]) < [sell_price] → MSG 027
If [productName] invalid → MSG 010
If all information correct, then update product
information → MSG 029
Table 42: Business Requirements of UC Update Product

● UC3: Delete Product

Name Delete Product

Description The user accesses the website to delete product.
* Architectural Requirements:
● Interoperability: Only manager of supermarket have full
permission of CRUD the product data. And staff only can
view the data
Actor Manager

Trigger
The user presses the Delete icon of the product.
Pre-condition Product needing to be deleted have existed in the system.
Post-condition Product is deleted from database
Table 43: Description of UC Delete Product

○ Activities Flow

53
 Figure 22: Activities Flow of UC Delete Product
○ Business Requirements

Activity BR Description
Code
(2) BR 43 ❖ Loading Screen Requirements:
● The system loads “Update Product” screen.
(4) & (5) BR 44 ❖ Submitting Requirements:
When user clicks on “Submit”, the system will prompt a
confirmation message. If user chooses Cancel, the system does
nothing; else, the system will save inputted information, submit
the item to appropriate approver and update the item as the
following:
The system retrieves “productId” compared to data in
system
If there is retrieved value, the system show dialog

54
 confirm delete (refer to MSG 006)
Else show an error message → MSG 030
If user choose delete product, the system delete
product information by productId
else the system does no thing
Table 44: Business Requirements of UC Delete Product

● UC4: Search Product

Name Search Product

Description The user accesses the website, providing information to find
customers.
* Architectural Requirements:
● Real-time Response: The search feature should provide
real-time responses to users' queries, ensuring that search
results are returned promptly, even during peak usage times.
Actor Manager/ Staff

Trigger
The user enters the name of the product in the search box.
The list of product matching with the keyword that is provided by
Pre-condition
the user is displayed.
Post-condition The system shows the product.
Table 45: Description of UC Search Product

○ Activities Flow

55
 Figure 23: Activities Flow of UC Search Product
○ Business Requirements

Activity BR Description
Code
(2) BR 45 ❖ Loading Screen Requirements:
● The system loads “Value Of Product” screen.
(5) BR 46 ❖ Submitting Requirements:
● When user enter text in search textinput, the
system query data from this value
● If [productName] includes [searchValue]=== true,
the system show product data
● If [dataRes].length===0, the system show MSG
032
Table 46: Business Requirements of UC Search Product

● UC5: Add New Product Group

Name Add New Product Group

56
Description The user accesses the website, providing information to add new
product group.
Actor Manager

Trigger
The user presses Add new button.
Pre-condition The user has already logged in.
Post-condition New product group has been added to database
Table 47: Description of UC Add New Product Group

○ Activities Flow

Figure 24: Activities Flow of UC Add New Product Group

○ Business Requirements

Activity BR Description
Code
(2) BR 47 ❖ Loading Screen Requirements:
● The system loads “Add New Product Group”

57
 screen.
(4)&(5) BR 48 ❖ Submitting Requirements:
When user clicks on “Submit”, the system will validate input
information.
If [groupId] invalid || [groupName] invalid, the
system will add this group to data
Else show → MSG 033
if [shelfId] invalid || [shelfName] invalid → MSG
034

Table 48: Business Requirements of UC Add New Product Group

● UC6: Update Product Group

Name Update Product Group

Description The user accesses the website, providing information to update
product group.
Actor Manager

Trigger
The user presses the Update icon of the product.
Pre-condition The product group needing to update has existed in the database.
Post-condition Product group has been updated to database
Table 49: Description of UC Update Product Group

○ Activities Flow

58
 Figure 25: Activities Flow of UC Update Product Group
○ Business Requirements

Activity BR Description
Code
(2) BR 49 ❖ Loading Screen Requirements:
● The system loads “Update Product Group” screen.
(4)&(5) BR 50 ❖ Submitting Requirements:
When user clicks on “Submit”, user sends their update value to
the system.
If [groupId] valid, the system will update this group
to data → MSG 035
Else show → MSG 032
If [shelfName] not in [sheftID] → MSG 034

Table 50: Business Requirements of UC Update Product Group

● UC7: Delete Product Group

59
Name Delete Product Group
Description The user accesses the website to delete product group.
Actor Manager

Trigger
The user presses the Delete icon of the product.
Pre-condition Product group needing to be deleted have existed in the system.
Post-condition Product group is deleted from database
Table 51: Description of UC Delete Product Group

○ Activities Flow

Figure 26: Activities Flow of UC DeleteProduct Group

○ Business Requirements

60
Activity BR Description
Code
(2) BR 51 ❖ Loading Screen Requirements:
● The system loads “Delete Product Group” screen.
(5) BR 52 ❖ Submitting Requirements:
When user clicks on “Submit”, the system will prompt a
confirmation message. If user chooses Cancel, the system does
nothing; else, the system will save inputted information, submit
the item to appropriate approver and update the item as the
following:
The system retrieves “productGroupId” compared to
data in system
If there is retrieved value, the system show dialog
confirm delete (refer to MSG 006)
Else show an error message → MSG 030
If user choose delete product, the system delete
product information by productId
else the system does no thing
Table 52: Business Requirements of UC Delete Product Group

● UC8: Search Product Group

Name Search Product Group

Description The user accesses the website, providing information to find
product group.
* Architectural Requirements:
● Real-time Response: The search feature should provide
real-time responses to users' queries, ensuring that search
results are returned promptly, even during peak usage times.
Actor Manager/ Staff

Trigger
The user enters the name of the product group in the search box.
Pre-condition The list of product group matching with the keyword that is

61
 provided by the user is displayed.
Post-condition The system shows the product group.
Table 53: Business Requirements of UC Search Product Group
○ Activities Flow

Figure 27: Activities Flow of UC Search Product Group

○ Business Requirements

Activity BR Description
Code
(2) BR 53 ❖ Loading Screen Requirements:
● The system loads the “Value Of Product Group”
screen.
(5) BR 54 ❖ Submitting Requirements:
1. When a user enters text in search textinput, the
system query data from this value.
2. If [groupName] includes [searchValue]=== true,
the system show product data
3. If [dataRes].length===0, the system show MSG
032
Table 54: Business Requirements of UC Search Product Group

62
 2.1.8. View Supplier
● UC1: Add New Supplier

Name Add New supplier.

Description The user accesses the website, providing information to add new
supplier.
Actor Manager

Trigger
The user presses Add new button.
Pre-condition The user has already logged in.
Post-condition New supplier has been added to database

Table 55: Description of UC Add New Supplier

○ Activities Flow

63
 Figure 28: Activities Flow of UC Add New Supplier
○ Business Requirements

Activity BR Description
Code

(2) BR 55 ❖ Display Form Add New Supplier Requirements:

● The system loads the “Add New Supplier” form. (Refer
to “Add New Supplier” list in “List Description” file)
(3) BR 56 ❖ Supplier Name Requirements:
● If (SupplierName == “”) => MSG 009

64
 ● If (SupplierName.contains([number]) ) => MSG 010
❖ PhoneNumber Requirements:
● If (PhoneNumber.contain([nonNumber])) => MSG 011
● If (PhoneNumber == “” ) => MSG 009
❖ Email Requirements:
● If (!Email.includes(“@”)) => MSG 014
● If (Email.checkRightEmailFormat()) => MSG 012
❖ Image Requirements:
● If (Image.size > 2MB) => MSG 018
● If (!Image.endWith(.png) || !Image.endWith(.jpeg)) =>
MSG 015
❖ Total Buy Amount Requirements:
● If (TotalBuyAmount.contain([nonNumber])) => MSG
022
● If (TotalBuyAmount < 0) => MSG 025
❖ Debt Requirements:
● If (Debt.contain([nonNumber])) => MSG 022
● If (Debt < 0) => MSG 025
(4) BR 57 ❖ Phone Number Requirements:
If (PhoneNumber.existedInDataBase()) => MSG 013

❖ Supplier ID Requirements:
Supplier ID must begin with “P” character
Supplier ID must be unique
Example: P00001
Table 56: Business Requirements of UC Add New Supplier

● UC2: Update Supplier

Name Update Supplier

Description The user accesses the website, providing information to update
supplier.
Actor Manager
Trigger
The user presses the Update button of the supplier.

65
Pre-condition The supplier needing to update has existed in the database.
Post-condition Supplier has been updated to database
Table 57: Description of UC Update Supplier

○ Activities Flow

Figure 29: Activities Flow of Update Supplier

○ Business Requirements

Activity BR Description
Code

(1) BR 58 ❖ Display Form Update Supplier Requirements:

● The system loads the “Update Supplier” form. (Refer to
“Update Supplier” list in “List Description” file)
(2) BR 59 ❖ Supplier Name Requirements:
● If (SupplierName == “”) => MSG 009
● If (SupplierName.contains([number]) ) => MSG 010
❖ PhoneNumber Requirements:
● If (PhoneNumber.contain([nonNumber])) => MSG 011
● If (PhoneNumber == “” ) => MSG 009
❖ Email Requirements:
● If (!Email.includes(“@”)) => MSG 014
● If (Email.checkRightEmailFormat()) => MSG 012

66
 ❖ Image Requirements:
● If (Image.size > 2MB) => MSG 018
● If (!Image.endWith(.png) || !Image.endWith(.jpeg)) =>
MSG 015
❖ Total Buy Amount Requirements:
● If (TotalBuyAmount.contain([nonNumber])) => MSG
022
● If (TotalBuyAmount < 0) => MSG 025
❖ Debt Requirements:
● If (Debt.contain([nonNumber])) => MSG 022
● If (Debt < 0) => MSG 025
(2) BR 60 ❖ Phone Number Requirements:
If (PhoneNumber.existedInDataBase()) => MSG 013
Table 58: Business Requirements of UC Update Supplier

● UC3: Delete Supplier

Name Delete Supplier

Description The user accesses the website to delete suppliers.
Actor Manager

Trigger
The user presses the Delete icon of the supplier.
Pre-condition Suppliers needing to be deleted have existed in the system.
Post-condition Supplier is deleted from database
Table 59: Description of UC Delete Supplier

○ Activities Flow

67
 Figure 30: Activities Flow of Delete Supplier

○ Business Requirements

Activity BR Description
Code

(1) BR 61 ❖ Display List Supplier Requirements:

● The system loads the “Supplier” screen. (Refer to
“Supplier” list in “List Description” file)
(3) BR 62 ❖ Delete Requirements:
User clicks on a supplier in a list.
The system prompt a confirmation message (Refer to MSG
006)
If the user chooses Cancel, the system does nothing; else, the
system will delete the supplier from the database and
show message MSG 031.
Table 60: Business Requirements of UC Delete Supplier

● UC4: Search Supplier

68
Name Search Supplier
Description The user accesses the website, providing information to find
customers.
Actor Manager/ Staff

Trigger
The user enters the name of the supplier in the search box.
The list of customer matching with the keyword that is provided by
Pre-condition
the user is displayed.
Post-condition The system shows the supplier group.
Table 61: Description of UC Search Supplier

○ Activities Flow

Figure 31: Activities Flow of Search Supplier

○ Business Requirements

Activity BR Description
Code

(1) BR 63 ❖ Display List Supplier Requirements:

● The system loads the “Supplier” screen. (Refer to
“Supplier” list in “List Description” file)

69
 ● The system displays a search bar.
(2) BR 64 ❖ Search Requirements:
● When user enter text in search textinput, the system query
data from this value
● If [supplierName] includes [searchValue]=== true, the
system show product data
● If [dataRes].length===0, the system show MSG 032

Table 62: Business Requirements of UC Search Supplier

2.1.9. View Customer

● UC1: Add New Customer

Name Add New Customer

Description The user accesses the website, providing information to add a new
customer.
Actor Manager/ Staff

Trigger
The user presses the Add New button.
Pre-condition The user has already logged in.
Post-condition New supplier is added to the database.
Table 63: Description of UC Add New Customer

○ Activities Flow

70
 Figure 32: Activities Flow of Add New Customer
○ Business Requirements

Activity BR Description
Code

(2) BR 65 ❖ Display Form Add New Customer Requirements:

● The system loads the “Add New Customer” form. (Refer
to “Add New Customer” list in “List Description” file)
(3) BR 66 ❖ Customer Name Requirements:
● If (CustomerName == “”) => MSG 009
● If (CustomerName.contains([number]) ) => MSG 010
❖ PhoneNumber Requirements:
● If (PhoneNumber.contain([nonNumber])) => MSG 011
● If (PhoneNumber == “” ) => MSG 009
❖ Email Requirements:
● If (!Email.includes(“@”)) => MSG 014
● If (Email.checkRightEmailFormat()) => MSG 012
❖ Gender Requirements:
● The system displays radio button with 2 options: Male
and Female
❖ Total Buy Amount Requirements:
● If (TotalBuyAmount.contain([nonNumber])) => MSG
022

71
 ● If (TotalBuyAmount < 0) => MSG 025
❖ Debt Requirements:
● If (Debt.contain([nonNumber])) => MSG 022
● If (Debt < 0) => MSG 025
(4) BR 67 ❖ Phone Number Requirements:
If (PhoneNumber.existedInDataBase()) => MSG 013

❖ Customer ID Requirements:
Customer ID must begin with “P” character
Customer ID must be unique
Example: P00001
Table 64: Business Requirements of UC Add New Customer

● UC2: Update Customer

Name Update Customer

Description The user accesses the website, providing information to add a new
customer.
Actor Manager/ Staff

Trigger
The user presses the Add New button.
Pre-condition The user has already logged in.
Post-condition New supplier is added to the database.
Table 65: Description of UC Update Customer

○ Activities Flow

72
 Figure 33: Activities Flow of Update Customer

○ Business Requirements

Activity BR Description
Code

(1) BR 68 ❖ Display Form Update Customer Requirements:

● The system loads the “Update Customer” form. (Refer to
“Update Customer” list in “List Description” file)

73
 (2) BR 69 ❖ Customer Name Requirements:
● If (CustomerName == “”) => MSG 009
● If (CustomerName.contains([number]) ) => MSG 010
❖ PhoneNumber Requirements:
● If (PhoneNumber.contain([nonNumber])) => MSG 011
● If (PhoneNumber == “” ) => MSG 009
❖ Email Requirements:
● If (!Email.includes(“@”)) => MSG 014
● If (Email.checkRightEmailFormat()) => MSG 012
❖ Gender Requirements:
● The system displays radio button with 2 options: Male
and Female
❖ Total Buy Amount Requirements:
● If (TotalBuyAmount.contain([nonNumber])) => MSG
022
● If (TotalBuyAmount < 0) => MSG 025
❖ Debt Requirements:
● If (Debt.contain([nonNumber])) => MSG 022
● If (Debt < 0) => MSG 025

(2) BR 70 ❖ Phone Number Requirements:

If (PhoneNumber.existedInDataBase()) => MSG 013
Table 66: Business Requirements of UC Update Customer

● UC3: Delete Customer

Name Delete Customer

Description The user accesses the website, providing information to add a new
customer.
Actor Manager

Trigger
The user accesses the website to delete customers.

74
Pre-condition The user has added a customer.
Post-condition Customer group is deleted from the database.
Table 67: Description of UC Delete Customer

○ Activities Flow

Figure 34: Activities Flow of Delete Customer

○ Business Requirements

Activity BR Description
Code

(1) BR 71 ❖ Display List Customer Requirements:

● The system loads the “Customer” screen. (Refer to
“Customer” list in “List Description” file)
(2) BR 72 ❖ Delete Requirements:
User clicks on a customer in a list.
The system prompt a confirmation message (Refer to MSG

75
 006)
If the user chooses Cancel, the system does nothing; else, the
system will delete the supplier from the database and
show message MSG 031.
Table 68: Business Requirements of UC Delete Customer

● UC4: Search Customer

Name Search Customer

Description The user accesses the website, providing information to search for
suppliers.
Actor Manager/ Staff

Trigger
The user enters the name of customer in the search box
Pre-condition The user has already accessed the Customer Screen.
Post-condition The list of customer matching with the keyword that is provided by
the user is displayed.
Table 69: Description of UC Search Customer

○ Activities Flow

Figure 35: Activities Flow of Search Customer

○ Business Requirements

76
Activity BR Description
Code

(1) BR 73 ❖ Display List Customer Requirements:

● The system loads the “Supplier” screen. (Refer to
“Supplier” list in “List Description” file)
● The system displays a search bar.
(2) BR 74 ❖ Search Requirements:
1. When user enter text in search textinput, the system query
data from this value
2. If [customerName] includes [searchValue]=== true, the
system show product data
3. If [dataRes].length===0, the system show MSG 032

Table 70: Business Requirements of UC Search Customer

2.1.10. View Warehouse

● UC1: Add New Import Order

Name Add New Import Order

Description The user accesses the website, providing information to add a new
import order.
Actor Manager/ Staff
Trigger The user presses the Add New button.
Pre-condition The user has already logged in.
Post-condition New import order is added to the database.
Table 71: Description of UC Add New Import Order

○ Activities Flow

77
 Figure 36: Activities Flow of Add New Import Order

○ Business Requirements

Activity BR Description
Code
(2) BR 75 ❖ Loading Screen Requirements:
● The system loads “Add New Import Order” screen.
(4) & (5) BR 76 ❖ Submitting Requirements:
When user clicks on “Submit”, the system will prompt a
confirmation message. If user chooses Cancel, the system does
nothing; else, the system will save inputted information, submit
the item to appropriate approver and update the item as the
following.
❖ Set [isExport] = 0
if [listProduct].length<0 -> MSG 037
if [payment] <0 || [debt]<0 || [discount]<0 || [totalPayment]
<0 → MSG 038
if [warehouseName] invalid → MSG 026
if [seller] invalid → MSG 026
if [totalPayment] <> [payment]+[discount] → MSG 040
if [debt] + [totalPayment] ===[payment] + [discount] →

78
 MSG 040
if [partnerId] not in database → MSG 040
Table 72: Business Requirements of UC Add New Import Order

● UC2: Update Import Order

Name Update Import Order

Description The user accesses the website, providing information to update
import order.
Actor Manager/ Staff
Trigger The user presses the Add New button.
Pre-condition The import order needing to update has existed in the database.
Post-condition New import order is added to the database.
Table 73: Description of UC Update Import Order

○ Activities Flow

Figure 37: Activities Flow of Update Import Order

○ Business Requirements

Activity BR Description

79
 Code
(2) BR 78 ❖ Loading Screen Requirements:
● The system loads “Update Import Order” screen.
(4) & (5) BR 79 ❖ Submitting Requirements:
When user clicks on “Submit”, the system will prompt a
confirmation message. If user chooses Cancel, the system does
nothing; else, the system will save inputted information, submit
the item to appropriate approver and update the item as the
following.
If “orderId” not in list → MSG 041
Else → MSG 042
Table 74: Business Requirements of UC Update Import Order

● UC3: Delete Import Order

Name Delete Import Order

Description The user accesses the website to delete import order.
Actor Manager/ Staff
Trigger The user presses the Delete icon of the order.
Pre-condition Import order needing to be deleted have existed in the system.
Post-condition Import order is deleted from database
Table 75: Description of UC Delete Import Order

○ Activities Flow

80
 Figure 38: Activities Flow of Delete Import Order

○ Business Requirements

Activity BR Description
Code
(2) BR 80 ❖ Loading Screen Requirements:
● The system loads a “dialog warning” screen.
(3) BR 81 ❖ User choose delete/cancel
(5) BR 82 ❖ Submitting response:
When the user clicks on “Delete”, the system will delete the
import order from db and message the success notification. If the
user chooses Cancel, the system does nothing.
Table 76: Business Requirements of UC Delete Import Order

● UC4: Search Import Order

Name Search Import Order

81
Description The user accesses the website, providing information to find import
order.
Actor Manager/ Staff
Trigger The user enters the name of the import order in the search box.
The list of import order matching with the keyword that is provided
Pre-condition by the user is displayed.
Post-condition The system shows the import order information.
Table 77: Description of UC Search Import Order

○ Activities Flow

Figure 39: Activities Flow of Search Import Order

○ Business Requirements

Activity BR Description
Code
(1) BR 83 ❖ Display List Import Orders:
● The system loads the “Import” screen. (Refer to
“Orders” list in “List Description” file)
● The system displays a search bar.
(3) & (5) BR 84 ❖ Search Requirements:
When user enter text in search textinput, the system
query data from this value

82
 If [orderId] includes [searchValue]=== true, the
system show order data
If [dataRes].length===0, the system show MSG 032
Table 78: Business Requirements of UC Search Import Order

● UC5: Add New Warehouse

Name Add New Warehouse

Description The user accesses the website, providing information to add new
warehouse.
Actor Manager
Trigger The user presses Add new button.
Pre-condition The user has already logged in.
Post-condition New warehouse has been added to database
Table 79: Description of UC Add New Warehouse

○ Activities Flow

Figure 40: Activities Flow of Add New Warehouse

○ Business Requirements

83
Activity BR Description
Code
(2) BR 85 ❖ Display Form Add New Warehouse Requirements:
● The system loads the “Add New Warehouse” form.
(Refer to “Add New Warehouse” list in “List
Description” file)
(4) & (5) BR 86 ❖ Warehouse Name Requirements:
● If (WarehouseName == “”) => MSG 009
● If (CustomerName.contains([number]) ) => MSG
010
❖ Warehouse Address Requirement
● If (WarehouseName == “”) => MSG 009
❖ Warehouse Note (Optional)

Table 80: Business Requirements of UC Add New Warehouse

● UC6: Update Warehouse

Name Update Warehouse

Description The user accesses the website, providing information to update
warehouse.
Actor Manager
Trigger The user presses the Update icon of the warehouse.
Pre-condition The warehouse needing to update has existed in the database.
Post-condition The warehouse has been updated to database
Table 81: Description of Update Warehouse

○ Activities Flow

84
 Figure 41: Activities Flow of Update Warehouse

○ Business Requirements

Activity BR Description

85
 Code
(1) BR 87 ❖ Display Form Update Warehouse Requirements:
● The system loads the “Update Warehouse” form.
(Refer to “Update Warehouse” list in “List
Description” file)
(4) & (5) BR 88 ❖ Warehouse Name Requirements:
● If (WarehouseName == “”) => MSG 009
● If (CustomerName.contains([number]) ) => MSG
010
❖ Warehouse Address Requirement
If (WarehouseName == “”) => MSG 009
Table 82: Business Requirements of UC Update Warehouse

● UC7: Delete Warehouse

Name Delete Warehouse

Description The user accesses the website to delete warehouse.
Actor Manager
Trigger The user presses the Delete icon of the warehouse.
Pre-condition The warehouse needing to be deleted have existed in the system.
Post-condition The warehouse is deleted from database
Table 83: Description of UC Delete Warehouse

○ Activities Flow

86
 Figure 42: Activities Flow of Delete Warehouse

○ Business Requirements

Activity BR Description
Code
(1) BR 89 ❖ Display List Warehouse Requirements:
● The system loads the “Warehouse” screen. (Refer
to “Warehouse” list in “List Description” file)
(5) BR 90 ❖ Delete Requirements:
1. User clicks on a Warehouse in a list.
2. The system prompt a confirmation message (Refer
to MSG 006)
3. If the user chooses Cancel, the system does
nothing; else, the system will delete the warehouse
from the database and show message MSG 031.
Table 84: Business Requirements of UC Delete Warehouse

87
 ● UC8: Search Warehouse

Name Search Warehouse

Description The user accesses the website, providing information to find a
warehouse.
Actor Manager
Trigger The user enters the name of the warehouse in the search box.
The list of warehouse matching with the keyword that is provided
Pre-condition by the user is displayed.
Post-condition The system shows the warehouse information.
Table 85: Description of UC Search Warehouse

○ Activities Flow

Figure 43: Activities Flow of Search Warehouse

○ Business Requirements

Activity BR Description
Code
(1) BR 91 ❖ Display List Warehouse Requirements:
● The system loads the “Warehouse” screen. (Refer
to “Warehouse” list in “List Description” file)

88
 ● The system displays a search bar.
(5) BR 92 ❖ Search Requirements:
1. When user enter text in search textinput, the
system query data from this value
2. If [warehouseName] includes [searchValue]===
true, the system show warehouse data
3. If [dataRes].length===0, the system show MSG
032
Table 86: Business Requirements of UC Search Warehouse

2.1.11. Report & Statistics

● UC: View Report & Statistics

Name View Report and Statistics

Description The user accesses the website, view the sale report
Actor Manager/ Staff

Trigger
The user enters the main page of the View Overview Sale Report
Pre-condition The user has signed in successfully
Post-condition The system shows reports and statistics about sales.
Table 87: Description of UC View Report and Statistics

○ Activities Flow

89
 Figure 44: Activities Flow of View Report and Statistics

○ Business Requirements

Activity BR Description
Code
(2) BR 93 ❖ Loading Screen Requirements:
● The system loads the “Report and Statistics”
screen.
(5) BR 94 ❖ Display Report and Statistics Requirements:
Users choose a mode to view reports and statistics.
If the user chooses view mode “Day”, the system displays
reports by Day, with date format is DD/MM/YY.
If the user chooses view mode “Month”, the system displays
reports by Month, with label format is MM/YY.
If the user chooses view mode “Year”, the system displays
reports by Year, with label format YY.
Users choose a period (start date and end date) to view reports
and statistics
Start date <= End date
Table 88: Business Requirements of UC View Report and Statistics

90
 2.1.12. Sign out
● UC 1: Sign out

Name Add New Supermarket

Description The user accesses the website, click on the sign out button
* Architectural Requirement:
● Interoperability: Implement a secure and straightforward
password recovery mechanism, allowing users to reset their
passwords through a verified email link. Integrate with
Firebase's services to send email reset passwords to users.
Actor Manager
Trigger
The user clicks the Sign out Button.
Pre-condition
The user has been signed up to the website.
Post-condition User log out from the current account

Table 89: Description of UC Sign Out

○ Activities Flow

91
 Figure 45: Activities Flow of Sign Out
○ Business Flow

Activity BR Description
Code

(1) BR 9 ❖ Display Form Add New Supermarket Requirements:

● The system loads the “Add New Supermarket” form.
(Refer to “Add New Supplier” list in “List Description”
file)
(3) BR 10 ❖ Supermarket Name Requirements:
● If (SupermarketName == “”) => MSG 009
❖ Address Requirements:
● If (Address == “”) => MSG 009
❖ Business Field Requirements:
● The system shows the dropdown suggested business
field in the system.
● The user chooses an option in the suggestion list.The

92
 user can add [newBusinessField] to the list
❖ Image Requirements
● If (Image.size > 2MB) => MSG 018
● If (!Image.endWith(.png) || !Image.endWith(.jpeg)) =>
MSG 015

❖ Supermarket ID Requirements:
Supermarket ID must begin with “S” character
Supermarket ID must be unique
Example: S00001

Table 90: Business Requirements of UC Add New Supermarket

2.2. Design Constraints

● Scalability: The system must be scalable to handle increases in user numbers and
data volume without degradation in performance. This includes being able to
manage thousands of product entries and handle high traffic during peak shopping
times.
● Performance Requirements: Response times for all transactions should not
exceed 10 seconds under normal operational conditions.
● Security Constraints: The system must adhere to industry-standard security
practices including data encryption, secure data transmission (SSL/TLS), and
protection against common vulnerabilities like SQL injection, XSS, and CSRF
attacks. Regular security audits and compliance checks should be enforced.
● Tracking Error & Logging: The system needs to integrate with third parties such
as Firebase or Hotjar, Sentry to capture all interaction, behaviors of users and
responses of API so as to find the error and recover them.
● Localization: The system should support multiple languages and regional settings,
starting with Vietnamese and English, with the framework to add more languages
in the future.

93
● Ease of Use: The user interface (UI) must be intuitive and user-friendly, allowing
users to easily add, edit, or delete product listings, view inventory levels, and
generate reports with minimal training.
● Hosting Environment: The website should be hosted in an environment that
complies with environmental standards, focusing on minimizing the carbon
footprint, possibly using green data centers.
2.3. Quality Attribute Requirements
2.3.1. Performance
2.3.1.1. Quick Response Time

Element Statement
Stimulus A website’s software or hardware
component fails to respond when thousands
of users access the website.
Stimulus source A fault occurs in a website software or
hardware component.
Environment Many software clients are using this
service. At the time of failure, the
component may be servicing a number of
clients concurrently with other queued
requests. Occurs under both normal and
peak load conditions.

Artifact Supermarket’s Products Management

Website System
Response The system processes the request and
provides feedback or a result within the
specified time frame.
Peak load conditions are defined as the
highest expected number of concurrent
users or actions during peak business hours
or sales events.
System should employ effective caching,
load balancing, and optimized queries to

94
 achieve these response times.
Response Users can login or sign up to the system in
measure ideal conditions within 10 seconds.
Each page has to be displayed to users
after 5 seconds of loading.
Database queries for product availability
checks should be optimized to respond
within 100 milliseconds to reduce blocked
time during checkout.
Table 91: Description of Quick Response Time

2.3.1.2. Quick Reload

Element Statement
Stimulus User action triggers data refresh or page
reload, such as updating inventory,
changing prices, or switching between
different sections of the management
system. The system fails to update data.
Stimulus source User interaction through the web interface.

Environment During normal operations and peak usage

times.
Artifact Supermarket’s Products Management
Website System
Response The system processes the refresh or reload
request and updates the UI without
perceptible delays, maintaining an
interactive response time.
Response Data refresh and UI updates should occur
measure within 10 seconds under normal load
conditions. Ensure the website loads
quickly and remains responsive, even
under heavy load, aiming for a load time
of under 5 seconds. Each page has to be
displayed to users after 5 seconds of

95
 loading.
Table 92: Description of Quick Reload

2.3.2. Security
2.3.2.1. Authentication

Element Statement
Stimulus A user attempts to log in or access resources
within the system.
Stimulus source End-users, administrators, and services
accessing the system.
Environment During all user interactions with the
system, regardless of user location or
device.
Artifact Supermarket’s Products Management
Website System
Response The system authenticates user credentials
and grants access based on predefined
permissions.
Implement password authentication
mechanisms. User are required to provide a
password and confirm the password. As
regards sign up with Google account,
comply with google privacy policy about
data security.
Response Authentication processes must complete
measure within 2 seconds under normal conditions.

Table 93: Description of Authentication

2.3.2.2. Access Permission - Role-based control

Element Statement

96
Stimulus A user attempts to log in or access resources
within the system.
Stimulus source End-users, administrators, and services
accessing the system.
Environment During all user interactions with the
system, regardless of user location or
device.
Artifact Supermarket’s Products Management
Website System
Response The system authenticates user credentials
and grants access based on predefined
permissions.
Implement password authentication
mechanisms. User are required to provide a
password and confirm the password. As
regards sign up with Google account,
comply with google privacy policy about
data security.
Response Authentication processes must complete
measure within 2 seconds under normal conditions.

Table 94: Description of Access Permission - Role-based control

1.1.1. Availability
1.1.1.1. Logging and Monitoring - Error Detection

97
 Element Statement
Stimulus An error occurs within the system due to
software bugs, hardware failures, or external
disruptions.
Stimulus source Application components, databases, servers,
or network infrastructure.
Environment During normal operations and under
varying load conditions.
Artifact Supermarket’s Products Management
Website System
Response The system identifies the error, logs it in a
centralized logging system, and triggers
alerts to the appropriate personnel or
systems.
Implement comprehensive logging of login
attempts (successful and unsuccessful) and
system monitoring to detect and respond to
potential security incidents. Integrate Hotjar
for this requirement
Response Errors are detected and logged within
measure seconds of occurrence.
Alerts are generated and delivered to
system administrators or automated
Table response systems within 1 minute of error 95:
detection. Description
of Logging
and Monitoring - Error Detection

1.1.2. Maintainability
1.1.1.1. Data Consistency - Concurrency

98
 Element Statement
Stimulus Multiple users (or automated processes)
concurrently access and/or update data
within the system.
Stimulus source Users, automated services, and system
processes interacting with the database or
data stores.
Environment During peak business operations and
during background administrative tasks.
Artifact Database management system, data access
layers of the application.
Response The system employs mechanisms to handle
concurrency, ensuring that all data
modifications are accurate and do not
interfere with each other.
Ensure data consistency and concurrency.
In scenarios where one staff member
adds/updates/deletes an order and removes
a product from the shelf, it is crucial that
this change is immediately reflected across
the system to prevent other staff members
from seeing outdated information. This
ensures that all actions taken based on the
data are accurate and based on the current
state of the data.
Response Transactions meet the ACID properties
measure (Atomicity, Consistency, Isolation,
Table Durability). 96:

Description of Data Consistency - Concurrency

1.1.2. Interoperability
1.1.2.1. Third-party integration

Element Statement

99
 Stimulus Integration with a new third-party service or
updating interactions with an existing one.
Stimulus source System developers implementing or
updating integrations.
Environment Development and production environments,
under normal operation conditions.
Artifact Supermarket’s Products Management
Website System
Response The system establishes and maintains a
stable, efficient connection with third-party
services, correctly handling data exchange
and synchronization. Integrate services for
Google Cloud for function Sign up with
Google. The system need to use third-party
verification services like Firebase or library
such as EmailJS to verify the account of
users. Implement a secure and
straightforward password recovery
mechanism, allowing users to reset their
passwords through a verified email link.
Integrate with Firebase's services to send
email reset password to users.
Response Integration points are established without
measure causing disruptions to existing
functionalities.

Table 98: Desciption of Third-party integration

1.1. Architectural Representation

This document presents the necessary views to represent the software architecture:
● The Logical View: presents the decomposition of the software architecture
into subsystems and packages;
● The Implementation View: describes the overall structure of the
implementation model, the decomposition of the software into layers and
subsystems.

100
 ● The Data View: describes the persistent data storage perspective of the
system;
● The Deployment View: describes the physical infrastructure on which the
software is deployed and run. It specifies the physical nodes and network
configuration that executes the software, and also maps the processes
defined in the Process View onto physical nodes.
1.1.1. Logical View

The Logical View presents an overview of the architecture and then provides the
decomposition of the software into design packages and subsystems.
The Supermarket’s Products Management Website System has been decomposed into
distinct modules represented in the next figure:

Figure 46: Logical View

● TEDDY MART Website: This represents the user interface or the visual
component of the supermarket management system that customers and employees
interact with. It includes screens, forms, buttons, and other elements that facilitate
user interaction.
● Authentication & Authorization: Authentication refers to the mechanism by
which users are verified and granted access to the system. It ensures that only
authorized individuals can log in and perform actions within the supermarket
management system.
● Logging: Logging involves the process of recording and storing system events
and activities. It helps in tracking and debugging issues, as well as providing an
audit trail for system operations and user actions.
● Backup and restoration: This component represents the functionality responsible
for creating regular backups of the system's data and configuration. It ensures that

101
 in case of data loss or system failure, the supermarket management system can be
restored to a previously saved state.
● Third parties: Third parties represent external entities or services that interact
with the supermarket management system. These can include payment gateways,
suppliers, delivery services, or other systems that integrate with the supermarket's
operations.
● Database: The database component represents the storage system where the
supermarket's data is stored. It includes information such as product details,
customer records, sales transactions, and employee information. The database
enables efficient data management and retrieval.
● Firebase: Firebase is a cloud-based development platform provided by Google. In
the supermarket management system, Firebase is used to provide additional
services like real-time data synchronization, push notifications, user
authentication, and hosting capabilities.

102
 1.1.2. Implementation View

Figure 47: Front-end structure

This application is implemented with the folder architecture shown above, it
includes:
● src: the root folder.

103
● src/assets/images: the folder contains all of the images in application.
● src/components: this folder contains component sub ui or group UI. Which is
used to create or save the component to use in the app. (Ex: AppText,
AppView,...)
● src/constants: the folder contains the constant number like mocks or draft which
is used in all of the application.
● src/controller: the folder contains many functions which are used to handle logic
or maintain current UI. (Ex: addDatabase,...)
● src/hooks: the folder contains util hook which is used to handle special logic (Ex:
useMedia, useGetListValue,...)
● src/routes: the folder contains many sub folders like components, routes which
are used to manage routing in the app.
● src/routes/components: the folder contains drawer components,
drawerItemComponents, link,... Which is used in the drawer feature.
● src/routes/route: the folder defines the route of the application like AppRoutes,
AuthRoutes, HomeRoutes,....
● src/state_management/actions: the folder contains action files like
ADD_ORDER, ADD_STAFF,... which is used to create action in redux state
management.
● src/state_management/reducers: the folder contains rootReducer files.
RootReducer file is used to combine many slices into one reducer.
● src/state_management/stores: the folder contains store file configuration.
● src/state_management/variables: the folder is used to define type/ interface for
application.
● src/state_management/views: the folder contains UI screens in application.

104
 1.1.3. Data View

Figure 48: Activities Flow of Data View

Data Element Description Data Type Length Values
USER
userId The ID of the user Varchar(10)
account

105
staffId The ID of the staff Varchar(10)

username The username of Varchar(30)

the user account
password The encrypted Varchar(30)
password of the
user account
Created_date Created date of the Timestamp
object
Updated_date Updated date of the Timestamp
object
STAFF
staffId The ID of the staff Varchar(10)

staffName The name of the Varchar(100)

staff
phoneNumber The phone number Varchar(10)
of the staff
gender The gender of the Varchar(10) Female
staff Male
email The email of the Varchar(50)
staff
address The address of the Varchar(250)
staff
The ID Card Varchar(12)
idCard number of the staff
Note The note about the Varchar(250)
staff
Created_date Created date of the Timestamp
object
Updated_date Updated date of the Timestamp
object
PARTNER
partnerid The ID of the Varchar(10)
partner
partner name The name of the Varchar(100)

106
 partner
email The email of the Varchar(50)
partner
phonenumber The phone number Varchar(10)
of the partner
address The address of the Varchar(250)
partner
gender The gender of the Varchar(10) Female
partner Male
Certificate The link of the Varchar(250)
certificate of the
supplier
totalBuyAmount The total buy Double
amount of the
partner
Debt The debt amount of Double
the partner
Note The note about the Varchar(250)
the partner
isCustomer To identify Bit
customer or
supplier
Created_date Created date of the Timestamp
object
Updated_date Updated date of the Timestamp
object
VOUCHER
voucherId The ID of the Varchar(10)
voucher
voucherName The name of the Varchar(50)
voucher
discountAmount The discount double
amount of the
voucher
expirationDate The expiration date Timestamp
of the voucher

107
publicDate The public date of Timestamp
the voucher
Created_date Created date of the Timestamp
object
Updated_date Timestamp
Updated date of the
object
ORDER
The ID of the order Varchar(10)
orderId
Note The note about the Varchar(250)
order
Payment The payment Double
amount of the order
Discount The discount double
amount of the order
partnerId The ID of the Varchar(10)
partner
createdAt The created time of Timestamp
the order
Debt The debt amount of Double
the order
Status The status of the Varchar(10) Paid
order Unpaid
Tax The tax of the order Double

voucherId The ID of the Varchar(10)

voucher applid to
the order
isExport To identify export Bit
order or import
order
Created_date Created date of the Timestamp
object
Updated_date Updated date of the Timestamp
object
ORDER_DETAIL

108
detailId The ID for each Varchar(10)
product detail in the
order
orderId The ID of the order Varchar(10)

productId The ID of the Varchar(10)

product
Quantity The quantity of the Integer
product in the order
Total The total payment Double
of the product
Created_date Created date of the Timestamp
object
Updated_date Updated date of the Timestamp
object
SUPERMARKET
SupermarketId The ID of the Varchar(10)
supermarket
shopName The name of the Varchar(50)
supermarket
Address The address of the Varchar(250)
supermarket

Created_date Timestamp
Created date of the
object
Updated_date Updated date of the Timestamp
object
WAREHOUSE
warehouseId The ID of the Varchar(10)
warehouse
warehouseName The name of the Varchar(50)
warehouse
Address The address of the Varchar(250)
warehouse
Created_date Created date of the Timestamp

109
 object
Updated_date Updated date of the Timestamp
object
WAREHOUSE_PRODUCT
warehouseId The ID of the Varchar(10)
warehouse
productId The ID of the Varchar(10)
product
Quantity The quantity of Integer
product in the
warehouse
Created_date Created date of the Timestamp
object
Updated_date Updated date of the Timestamp
object
PRODUCT
productId The ID of the Varchar(10)
product
productName The name of the Varchar(50)
product
groupId The ID of the group Varchar(10)
product
Image The link of the Varchar(250)
image
Cost_price The origin price of Double
the product
VAT The VAT of the Double
product
Sell_price The price of Double
product sell to
customer
Note The note of the Varchar(250)
product
Created_date Created date of the Timestamp
object
Updated_date Updated date of the Timestamp

110
 object
GROUP_PRODUCT
groupId The ID of the group Varchar(10)
product
groupName The name of the Varchar(50)
group product
Note The note of the Varchar(250)
group product
Created_date Created date of the Timestamp
object
Updated_date Updated date of the Timestamp
object
Table 99: Elements in Data View

1.1.4. Deployment View

Figure 49: Deployment View

This application is implemented with the architecture shown above, it includes:

● Front - end: users interact with a React Native application. Redux manages data
flow, ensuring predictability. Components, including Shared UI code, Code
Behind, and Designers.

111
 ● Database: Our chosen backend-as-a-service, empowers dynamic data
management through Realtime Database, ensuring real-time updates. For more
complex querying, Firestore enhances flexibility. The integration of the Firebase
API into backend functionality streamlines database operations efficiently.
● State management: efficiently manages the application's state, ensuring
predictability in state changes. This streamlined approach enhances stability and
facilitates a controlled flow of data, contributing to a more organized and
maintainable system.
● Deployment: React Native application is deployed on Vercel. Vercel provides a
seamless deployment experience.

Figure 50: MVC Model

The backend layer adopts the MVC (Model-View-Controller) architecture:

● Model: Serving as the database part of the application, the Model represents data
structure, format, and constraints. It is responsible for maintaining and handling
the application's data.
● View: The View is the user interface presented to the user. Utilizing the Model, it
displays data in a user-friendly format. Users can interact with the View, and it
consists of both static and dynamic pages that are rendered or sent to the user upon
request.

112
 ● Controller: The Controller manages user requests, generating appropriate
responses for the Viewer. Typically, user interaction begins with the View,
generating a request handled by the Controller. The Controller then renders the
relevant View, incorporating data from the Model as the response. This tripartite
structure ensures effective handling of user interactions and response generation
within the backend system.
2. References
[1] (Sei Series in Software Engineering) Len Bass_ Paul Clements_ Rick Kazman -
Software Architecture in Practice-Addison-Wesley (2012)

[2] Documenting software architectures views and beyond by Paul Clements et al

Compress

[3] Large-Scale Software Architecture

[4] Microsoft Patterns Practices Team - Microsoft® Application Architecture Guide, 2nd
Edition (Patterns Practices) (2008, Microsoft Press) - libgen.lc

[5] Patterns of Enterprise Application Architecture

[6] Sam Newman - Building Microservices_ Designing Fine-Grained Systems-OReilly

Media (2021)

3. Glossary

Term Description
ADD Attribute-Driven Design

ASR Architecturally Significant Requirements

UC Use case

Table 100: Terms in Documents

113