---
slideOptions:
transition: slide
theme: night
tags: NILER, Complaint, User flow
type:
title: User flow of Complaint System
---
<style>
.reveal section img {
background: transparent!important;
border: none!important;
box-shadow: none!important;
}
</style>

# User flow of Complaint System
## Danh sách chức năng
1. [Đăng nhập bằng username + mật khẩu](#1-Login-by-usernamepassword)
2. [Đăng nhập bằng biometric](#2-Login-by-bimometric)
3. [Quản lý thông tin người dùng](#31-User-information)
- Xem thông tin cá nhân
- Sửa thông tin cá nhân
- Bật/Tăt đăng nhập bằng biometric
4. [Tiếp công dân](#4-Tiếp-công-dân)
- [Quản lý buổi tiếp công dân](#41-Buổi-tiếp-công-dân)
- Tìm kiếm buổi tiếp dân
- Xem chi tiết buổi tiếp dân
- Xoá (chỉ thực hiện được khi [Trạng thái]= Chuẩn bị)
- [Quản lý ý kiến công dân](#42-Ý-kiến-công-dân)
- Tìm kiếm ý kiến công dân
- Xem chi tiết ý kiến công dân
- Xem đơn thư từ ý kiến công dân
5. [Tiếp nhận đơn thư](#5-Tiếp-nhận-đơn-thư)
- [Xem chi tiết đơn thư, bao gồm cả quá trình xử lý của đơn](#51-Đơn-thư)
- [Xoá đơn thư](#51-Đơn-thư)
- [Chuyển TP phân công xử lý đơn thư](#51-Đơn-thư)
- [Xem, xoá, tải về, chia sẻ file đính kèm cho ứng dụng khác](#52-Attachment-file)
6. [Phân công xử lý đơn thư](#6-Phân-công-xử-lý-đơn-thư)
- Xem chi tiết đơn thư (bao gồm cả quá trình xử lý của đơn)
- Xem chi tiết đơn trùng (nếu có)
- Phân công xử lý đơn thư
- Chỉnh sửa điều kiện xử lý đơn thư (nếu có)
- Phân công lại xử lý đơn thư
- Trả lại đơn thư cho thanh tra viên tiếp nhận
7. [Xử lý đơn thư](#7-Xử-lý-đơn-thư)
- Tìm kiếm đơn thư
- Chuyển trình ký văn bản
- Cập nhật và xác nhận ngày ra Quyết định
- Xem chi tiết các thành phần xử lý
- Chia sẻ các thành phần xử lý
- Tạo hồ sơ vụ việc (nếu đủ điều kiện)
8. [Quản lý đơn thư đã giải quyết](#8-Đơn-thư-đã-giải-quyết)
- Tìm kiếm đơn thư đã giải quyết
- Xem chi tiết đơn thư
- Tạo hồ sơ vụ việc
9. [Tra cứu đơn thư](#9-Tra-cứu-đơn-thư)
- Tìm kiếm đơn thư theo các tiêu chí
- Xem thông tin chi tiết 1 đơn thư
10. [Quản lý hồ sơ vụ việc](#10-Hồ-sơ-vụ-việc)
- Xem chi tiết hồ sơ vụ việc
- Sửa thông tin hồ sơ vụ việc
- Tìm kiếm hồ sơ vụ việc
11. [Báo cáo tiếp dân](#11-Báo-cáo-tiếp-công-dân)
- Xuất báo cáo
- Chia sẻ báo cáo
12. [Báo cáo đơn thư](#12-Báo-cáo-đơn-thư)
- Báo cáo số lượng đơn thư
- Xuất báo cáo
- Chia sẻ báo cáo
- Báo có số lượng đơn thư theo cán bộ
- Xuất báo cáo
- Chia sẻ báo cáo
- Báo cáo đơn thư theo tỉnh
- Xuất báo cáo
- Chia sẻ báo cáo
13. [Thống kê tiếp dân dạng biểu đồ](#13-Thống-kê-tiếp-công-dân)
- Hiển thị biểu đồ theo năm chọn
14. [Thống kê đơn thư dạng biểu đồ](#14-Thống-kê-đơn-thư)
- Hiển thị biểu đồ theo năm chọn
15. [Quản lý thông báo](#15-Quản-lý-thông-báo)
- Xem tất cả thông báo
- Cập nhật trạng thái thông báo
- Thông báo chưa xem của người dùng
- Thông báo của người dùng

## Biểu đồ tuần tự

### 1. Login by username/password

%%Sequence diagram login by username and password
  sequenceDiagram
    Client ->> UI: Login
    Client ->> UI: Login by username and password
    UI ->> API: Get accessToken by grand type password
    API -->> UI: Return accessToken + refreshToken
    UI ->> API: Get currentUser information
    API -->> UI: Return currentUser info
    UI ->> API: Get menu of currentUser
    API -->> UI: Return menu of currentUser
    UI -->> Client: Redirect home page

---

### 2. Login by bimometric

%%Sequence diagram login by biometric
  sequenceDiagram
    Client ->> UI: 1. Login
    Client ->> UI: Choose login by biometric
    UI -->> Client: Display authenticaion faceId/tourchId
    Client ->> UI: Authenticate faceId/tourchId
    UI ->> UI: Get secretKey store into application
    UI ->> API: Get accessToken by secretKey
    API -->> UI: Return accessToken + refreshToken
    UI ->> API: Get currentUser information
    API -->> UI: Return currentUser info
    UI ->> API: Get menu of currentUser
    API -->> UI: Return menu of currentUser
    UI -->> Client: Redirect home page

### 3. User information management
#### 3.1 User information

%%Sequence diagram update user information
  sequenceDiagram
    alt 1. View user information
    Client ->> UI: Select User
    Client ->> UI: Click view user information
    UI ->> API: Send request view user information
    API ->> UI: Return sucess
    UI ->> UI: Display user information
    end
   
    alt 2. Update user information
    Client ->> UI: Select User
    Client ->> UI: Click update user information
    Client ->> UI: Input information
    Client ->> UI: Click submit
    UI ->> UI: Validate data
    UI ->> API: Send request update user information
    API -->> UI: Return success
    UI ->> UI: Display notification update success
    end

#### 3.2 Turn on/off login by biometric mode

%%Sequence diagram turn on/off login by biometric mode
  sequenceDiagram
    alt 1. Turn on login by biometric
    Client ->> UI: Turn on login by biometric
    Client ->> UI: Input password
    UI ->> API: Send request turn on login by biometric
    API -->> UI: Return secretKey
    UI ->> UI: Store secretKey into device
    UI ->> UI: Display turn on login in by biometric mode success
    end
    
    alt 2. Turn off login by biometric
    Client ->> UI: Turn off login by biometric
    UI ->> UI: Display verify notification turn off
    UI ->> API: Send request turn off login by biometric
    API -->> UI: Return success
    UI ->> UI: Delete secretKey into device
    UI ->> UI: Display turn off login in by biometric mode success
    end

### 4. Tiếp công dân
#### 4.1 Buổi tiếp công dân

%%Biểu đồ tuần tự buổi tiếp công dân
  sequenceDiagram
    alt 1. Search reception of citizens
    Client ->> UI: Go to the search function
    Client ->> UI: Type input condition to search
    Client ->> UI: Click search
    UI ->> API: Send request search
    API -->> UI: Return list reception of citizens
    UI ->> UI: Display list reception of citizens
    end
    
    alt 2.View detail reception of citizens
    Client ->> UI: Select reception of citizens
    Client ->> UI: Click view detail
    UI ->> API: Get detail of reception of citizens by ID
    API --> UI: Return detail reception of citizens
    UI ->> UI: Display detail reception of citizens
    end
    
    alt 3. Delete recption of citizens (access when status = prepare)
    Client ->> UI: Select reception of citizens
    Client ->> UI: Click delete reception of citizens
    UI ->> API: Delete reception of citizens by ID
    API -->> UI: Return delete reception of citizens success
    UI ->> UI: Display notification delete reception of citizens
    UI ->> UI: Re-load list
    end

#### 4.2 Ý kiến công dân

%%Biểu đồ tuần tự tiếp công dân
  sequenceDiagram
    alt 1. Search complaint of citizen
    Client ->> UI: Go to the search function 
    Client ->> UI: Type input condition to search
    Client ->> UI: Click search
    UI ->> API: Send request search
    API -->> UI: Return list complaint of citizen
    UI ->> UI: Display list complaint of citizen
    end
   
    alt 2.View detail complaint of citizen
    Client ->> UI: Select complaint of citizen
    Client ->> UI: Click view detail
    UI ->> API: Get detail of complaint of citizen by ID
    API --> UI: Return detail of complaint of citizen
    UI ->> UI: Display detail of complaint of citizen
    end
    
    alt 3. Delete complaint of citizen
    Client ->> UI: Select complaint of citizen
    Client ->> UI: Click delete complaint of citizen
    UI ->> API: Delete complaint of citizen by ID
    API -->> UI: Return success
    UI ->> UI: Display notification delete complaint of citizen 
    UI ->> UI: Re-load list
    end

### 5. Tiếp nhận đơn thư
#### 5.1 Đơn thư

%%Biểu đồ tuần tự luồng đơn thư
  sequenceDiagram
    alt 1. Search
    Client ->> UI: Go to Search letter function
    Client ->> UI: Type input condition to search
    Client ->> UI: Click search
    UI ->> API: Send request Search
    API -->> UI: Return list of letter
    UI ->> UI: Display list of letter
    end
      
    alt 2. View detail
    Client ->> UI: Select letter want to view detail
    Client ->> UI: Click view detail
    UI ->> API: Get detail of letter by id
    API -->> UI: Return detail of letter
    UI ->> UI: Display detail of letter
    end
    
    alt 3. Delete (access only with letter has status is draft)
    Client ->> UI: Select letter want to delete
    Client ->> UI: Click button delete
    UI ->> API: Delete letter by id
    API -->> UI: Return success
    UI ->> UI: Display notification delete success 
    UI ->> UI: Re-load list of letter
    end
    
    alt 4. Send to captain (access only with letter has status is draft)
    Client ->> UI: Select letter want to send to captain
    Client ->> UI: Click button send
    UI ->> API: Send to captain
    API -->> UI: Return send to captain success
    UI ->> UI: Display notify send to captain success
    UI ->> UI: Display notification message into application
    end

#### 5.2 Attachment file

%% Biểu đồ tuần tự 
 sequenceDiagram
  alt 1. Delete attachment file
  Client ->> UI: Select file want to delete
  Client ->> UI: Click delete
  UI ->> API: Delete attachment file by ID 
  API -->> UI: Return success
  UI ->> UI: Display notification delete success
  UI ->> UI: Re-load list of file
  end
  
  alt 2. View detail attachment file
  Client ->> UI: Select file want to view detail
  Client ->> UI: Click file
  UI ->> API: Get detail attachment file by ID 
  API -->> UI: Return detail attachment
  UI ->> UI: Display detail attachment 
  end
  
  alt 3. Download attachment file
  Client ->> UI: Select file want to download
  Client ->> UI: Click download file
  UI ->> API: Send request download file
  API --> UI: Return binary of file
  UI ->> UI: Display file is downloaded
  end
  
  alt 4. Share attachment file
  Client ->> UI: Select file want to share
  Client ->> UI: Click share file
  UI -->> Client: Display app want to share
  Client ->> UI: Select app
  Client ->> UI: Click share
  UI ->> API: Send request share file
  API --> UI: Return success
  UI ->> UI: Display notification share file success
  end

### 6. Phân công xử lý đơn thư

%%Biểu đồ tuần tự phân công xử lý đơn thư
 sequenceDiagram
  alt 1. View detail main letter
  Client ->> UI: Select letter want to view detail
  Client ->> UI: Click view detail
  UI ->> API: Get detail of letter by ID
  API -->> UI: Return detail of letter
  UI ->> UI: Display detail of letter 
  end
  
  alt 2. View detail duplicate letter (if any)
  Client ->> UI: Select letter want to view detail
  Client ->> UI: Click view detail
  UI ->> API: Get detail of letter by ID 
  API -->> UI: Return detail of letter
  UI ->> UI: Display detail of letter 
  end
  
  alt 3. Assignment
  Client ->> UI: Select letter want to handle
  Client ->> UI: Click assign 
  UI -->> Client: Display detail letter
  Client ->> UI: Click button add
  UI --> Client: Modal assgiment
  Client ->> UI: Select inspector
  alt Update condition handle letter (if any)
  Client ->> UI: Select condition hanle letter from droplist
  UI ->> API: Send request 
  API --> UI: Return success
  end
  Client ->> UI: Click submit
  UI -->> Client: Display list of inspectors are assinged
  Client ->> UI: Click submit
  UI --> Client: Display modal confirm
  alt
  Client ->> UI: Click button (save and forward) (main flow)
  UI ->> API: Send request
  API -->> UI: Return success
  UI ->> UI: Display notification assign success
  UI ->> UI: Display notification message into application
  end
  alt
  Client ->> UI: Click button save (alternate flow)
  UI ->> API: Send request
  API -->> UI: Return success
  UI ->> UI: Display notification assign success
  end
  end
  
  alt 4. Assignment again (access when status = process)
  Client ->> UI: Select letter want to assignment again
  Client ->> UI: Click assign again 
  UI -->> Client: Display detail letter
  alt Delete inspector is assinged (if any)
  Client ->> UI: Select inspector
  Client ->> UI: Click icon delete
  UI -->> Client: Modal confirm delete inspector
  Client ->> UI: Click Yes
  UI ->> API: Request delete inspector
  API -->> UI: Return delete inspector success
  UI ->> UI: Display notification delete inspector success
  end
  Client ->> UI: Click button add
  UI --> Client: Modal assgiment
  Client ->> UI: Select inspector
  Client ->> UI: Click submit
  UI ->> API: Send request
  API -->> UI: Return success
  UI -->>UI: Display list of inspectors are assinged
  UI ->> UI: Display notification assign again success
  UI ->> UI: Display notification message into application
  end
  
  alt 5. Refuse to process letter
  Client ->> UI: Select letter
  Client ->> UI: Click assign
  UI -->> Client: Display detail letter
  Client ->> UI: Refuse to process letter
  UI -->> Client: Display modal confirm type reason
  Client ->> UI: Type nput information
  Client ->> UI: Click submit
  UI ->> API: Send request refuse to process letter
  API -->> UI: Return success
  UI ->> UI: Display notification refuse to proces letter success
  UI ->> UI: Display notification message into application
  end

Note: View detail letter: display modal with condition: unable with in progress that have completed processing, disable with in progress that haven't been processed

### 7. Xử lý đơn thư

%%Biểu đồ tuần tự xử lý đơn thư
 sequenceDiagram
  alt 1. search
  Client ->> UI: Go to Search letter 
  Client ->> UI: Input condition to search
  Client ->> UI: Click submit
  UI ->> API: Send request
  API -->> UI: Return list of letter
  UI ->> UI: Display list of letter
  end
  
  alt 2. Send signature
  Client ->> UI: Select letter
  Client ->> UI: Click Process letter
  UI --> Client: Display detail process letter
  Client ->> UI: Select document want to signature
  Client ->> UI: Click signature
  UI ->> API: Request signature to system QLVB
  API -->> UI: Return signature success
  UI ->> UI: Display document is signed, realtime respond
  end
  
  alt 3. Update date of decision
  Client ->> UI: Select letter
  Client ->> UI: Click Process letter
  UI --> Client: Display detail process letter
  Client ->> UI: Type date of decision
  UI ->> UI: Validation data
  Client ->> UI: Click submit
  UI ->> UI: Validation data
  UI ->> API: Send request 
  API -->> UI: Return success
  UI ->> UI: Display notification update date of decision success
  Client ->> UI: Click button Complete process letter
  UI -->> Client: Modal identify complete process letter
  alt
  Client ->> UI: Click button (submit and creat folder) (enough condition formed folder)
  UI ->> API: Send request formed folder
  API -->> UI: Return success
  UI ->> UI: Display notification formed folder success
  UI ->> UI: Display notification message into application
  UI ->> UI: Display list of folder
  end
  alt
  Client ->> UI: Click button (submit and save) (not enough condition formed folder)
  UI ->> API: Send request letter is saved
  API --> UI: Return success
  UI ->> UI: Display notification letter is completed
  UI ->> UI: Display notification message into application
  UI --> UI: Display list of letter is completed
  end
  end

### 8. Đơn thư đã giải quyết

%% Biểu đồ tuần tự đơn thư đã giải quyết
 sequenceDiagram
  alt 1. search
  Client ->> UI: Go to Search letter function 
  Client ->> UI: Type input condition to search
  Client ->> UI: Click submit
  UI ->> API: Send request search
  API -->> UI: Return list of letter
  UI ->> UI: Display list of letter
  end
  
  alt 2. View detail main letter
  Client ->> UI: Select letter want to view detail
  Client ->> UI: Click view detail
  UI ->> API: Get detail of letter by ID
  API -->> UI: Return detail of letter
  UI ->> UI: Display detail of letter 
  end
  
  alt 3. Formed folder
  Client ->> UI: Select letter
  Client ->> UI: Click formed folder
  UI ->> API: Send request formed folder
  API -->> UI: Return success
  UI ->> UI: Display notification formed folder success
  UI ->> UI: Display notification message into application
  UI ->> UI: Display list of folder
  end

### 9. Tra cứu đơn thư

%%Biểu đồ tuần tự tra cứu đơn thư
 sequenceDiagram
  alt 1. Search
  Client ->> UI: Go to Search function
  Client ->> UI: Type input condition to search
  UI ->> API: Request search
  API -->> UI: Return list of letter with all status
  UI ->> UI: Display ist of letter with all status
  end
  
  alt 2. View detail main letter
  Client ->> UI: Select letter want to view detail
  Client ->> UI: Click view detail
  UI ->> API: Get detail of letter by ID
  API -->> UI: Return detail of letter
  UI ->> UI: Display detail of letter
  UI ->> UI: Display letter relative (if any)
  end

### 10. Hồ sơ vụ việc

 %%Biểu đồ tuần tự hồ sơ vụ việc
 sequenceDiagram
  alt 1. Search
  Client ->> UI: Go to search function
  Client ->> UI: Type input condition to search
  UI ->> API: Request search
  API -->> UI: Return list of folder
  UI ->> UI: Display list of folder
  end
  
  alt 2. View detail folder
  Client ->> UI: Select folder want to view detail
  Client ->> UI: Click view detail
  UI ->> API: Get detail of folder by ID 
  API -->> UI: Return detail of folder
  UI ->> UI: Display detail of folder
  end
  
  alt 3. Update folder
  Client ->> UI: Select folder want to update
  Client ->> UI: Click update folder
  UI -->> Client: Display information of folder
  Client ->> UI: Update information
  UI ->> API: Send request update folder
  API -->> UI: Return upadate folder success
  UI ->> UI: Display notification update folder success
  end

### 11. Báo cáo tiếp công dân

%%Biểu đồ tuần tự báo cáo tiếp công dân
 sequenceDiagram
  alt 1. Export report
  Client ->> UI: Go to report citizen function
  UI -->> Client: Display export report
  Client ->> UI: Input information
  Client ->> UI: Click button export
  UI ->> API: Send request export report
  API -->> UI: Return export report success
  UI ->> UI: Report is exported
  end
  
  alt 2. Share report
  Client ->> UI: Select report
  Client ->> UI: Click share report
  UI -->> Client: Display app want to share
  Client ->> UI: Select app
  Client ->> UI: Click submit
  UI ->> API: Send request share report
  API --> UI: Return success
  UI ->> UI: Display notification share report success 
  end

### 12. Báo cáo đơn thư

%%Biểu đồ tuần tự báo cáo đơn thư
 sequenceDiagram
  alt 1. Export report
  Client ->> UI: Go to report letter function
  UI -->> Client: Display export report
  Client ->> UI: Input information
  Client ->> UI: Click button export
  UI ->> API: Send request export report
  API -->> UI: Return export report success
  UI ->> UI: Report is exported
  end
  
  alt 2. Share report
  Client ->> UI: Select report
  Client ->> UI: Click share report
  UI -->> Client: Display app want to share
  Client ->> UI: Select app
  Client ->> UI: Click submit
  UI ->> API: Send request share report
  API --> UI: Return success
  UI ->> UI: Display notification share report success 
  end

### 13. Thống kê tiếp công dân

%%%Biểu đồ tuần tự thống kê tiếp công dân
 sequenceDiagram
  Client ->> UI: Go to statistic of citizen function
  Client ->> UI: Select year from droplist
  UI ->> API: Send request statistic
  API --> UI: Return success
  UI ->> UI: Display chart

### 14. Thống kê đơn thư

%%%Biểu đồ tuần tự thống kê tiếp công dân
 sequenceDiagram
  Client ->> UI: Go to statistic of letter function
  Client ->> UI: Select year from droplist
  UI ->> API: Send request statistic
  API --> UI: Return success
  UI ->> UI: Display chart

### 15. Quản lý thông báo

%%Biểu đồ tuần tự thông báo
 sequenceDiagram
  Client ->> UI: Click icon notification
  UI ->> API: Send request 
  API -->> UI: Return success
  UI ->> UI: Display notification

---