Trang HOME_TASK
Link thiết kế https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=17332-9867&t=dP7ebSyjPiKduZBj-4
TÀI LIỆU MÔ TẢ MÀN HÌNH: TRANG HOMEPAGE (SUPA)
1. Thông tin chung
-
Tên màn hình: Của tôi / My space
-
Mục đích: Cung cấp cái nhìn tổng quan về các đầu việc cần xử lý trong ngày, truy cập nhanh các chức năng tạo mới và theo dõi trạng thái checklist/công việc/đào tạo...
-
Đối tượng sử dụng: Nhân viên, Quản lý (User có quyền truy cập hệ thống).
2. Mô tả Giao diện (UI Components)
2.1. Thanh điều hướng (Sidebar)
-
Hiển thị danh sách các chức năng chính gồm:
| Menu Tiếng Việt | Menu English (Standard) | Ghi chú |
| Của tôi | My Space | Tab mặc định |
| Nhắn tin | Messages | Điều hướng sang chức năng nhắn tín/chat |
| Báo cáo | Reports |
Điều hướng sang chức năng báo cáo tổng hợp |
| Biểu mẫu | Forms | Điều hướng sang chức năng biểu mẫu (WORK) |
| Checklist | Checklist | Điều hướng sang chức năng check list (WORK) |
| Lịch checklist | Checklist Schedule | Điều hướng sang chức năng Đặt lịch (WORK) |
| Công việc | Tasks | Điều hướng sang chức năng Công việc (WORK) |
| Lịch | Calendar | Điều hướng sang chức năng calender |
| Đào tạo | Training | Điều hướng sang chức năng Đào tạo (Traing) |
| Dự án | Projects | Điều hướng sang chức năng Dự án |
| Cài đặt | Settings | Điều hướng sang chức năng Cài đặt |
| Ứng dụng | Apps | Điều hướng sang ds các phân hệ trong ứng dụng |
-
Active State: Highlight menu "Của tôi".
2.2. Thanh công cụ phía trên (Top Bar)
-
Logo: Click về trang chủ.
-
Search bar: Tìm kiếm toàn cục trong hệ thống. Tìm kiếm theo các trường thông tin:
- Tên check list
- Tên công việc
- Tên khóa học
- Tên training path
- Tiêu đề quizzes
- Tên địa điểm
-
Tên đơn vị: Hiển thị tên công ty/chi nhánh hiện tại.
-
User Profile: Avatar người dùng và các thiết lập tài khoản. Bẩm vào avatar, hiển thị block thông tin
- Tên hiển thị - Email
- Các action:
- Quản lý tài khoản --> Bấm vào điều hướng sang trang quản lý hồ sơ và tài khoản của user đó
- Cài đặt thông. báo
- Đổi công ty --> Bấm vào quay ra màn hình list danh sách các tenant
-
Nút "Tạo nhanh" (+): Điểm nhấn chính để thực hiện nhanh các tác vụ.
3. Đặc tả Chức năng "Tạo nhanh"
Khi người dùng Click vào button [+ Tạo nhanh], hệ thống hiển thị một Dropdown Menu chứa các hành động sau:
| STT | Hành động | Mô tả | Điều hướng |
| 1 | Tạo biểu mẫu mới | Mở màn hình thiết kế/chọn template biểu mẫu. | Màn hình Tạo biểu mẫu. |
| 2 | Thực hiện checklist | Chọn danh mục checklist cần thực hiện ngay. | Pop-up/Màn hình Checklist. |
| 3 | Tạo công việc | Mở form tạo task mới (Assignee, Deadline, Nội dung). | Pop-up Tạo công việc. |
| 4 | Đặt lịch thực hiện checklist | Lên lịch định kỳ hoặc lịch cụ thể cho một checklist. | Màn hình Lập lịch. |
| 5 | Tạo khóa học | Mở form tạo mới nội dung đào tạo. | Màn hình Quản trị Đào tạo. |
| 6 | Tạo quiz | Mở form thiết kế câu hỏi kiểm tra. | Màn hình Tạo Quiz. |
4. Mô tả Khu vực nội dung (Main Content - Dynamic Blocks)
Khu vực này được thiết kế theo dạng các Block (Khối nội dung). Hệ thống sẽ hiển thị tối đa 05 loại Block sau (nếu có dữ liệu).
4.1. Logic hiển thị chung (Business Rules)
-
Quy tắc ẩn/hiện: Hệ thống thực hiện kiểm tra dữ liệu của từng Block. Nếu Block nào không có bản ghi nào cần xử lý (Count = 0), hệ thống sẽ ẩn hoàn toàn Block đó khỏi giao diện để tối ưu không gian.
-
Sắp xếp: Thứ tự ưu tiên hiển thị: Checklist > Công việc > Lộ trình học > Khóa học > Quizzes.
-
Số lượng bản ghi: Mỗi Block hiển thị tối đa 5 bản ghi mới nhất/ưu tiên nhất.
-
Nút "Xem tất cả": Click để điều hướng đến màn hình danh sách đầy đủ của phân hệ đó.
-
Nút "Xem thêm": Mở rộng danh sách ngay tại Dashboard (Lazy loading)--> Cho phép scroll tại từng khung của các thông tin.
4.2. Chi tiết các Block dữ liệu
| Tên Block | Các trường thông tin hiển thị | Ghi chú |
|
Checklist kèm tag hiển thị SL check list hôm nay mà user cần thực hiện |
Tên Checklist, Thời gian (Deadline), Địa điểm. |
|
|
Công việc Kèm tag hiển thị toàn bộ số lượng CV của ng dùng hiện ở trạng thái ở trạng thái cần làm và đang làm hôm nay và cv gần nhất. (view mặc định) mà user hiện tại là người thực hiện và ng hỗ trợ |
Checkbox, Tên công việc, Mã ID, Avatar người tham gia, Deadline. |
|
|
Lộ trình học Hiển thị tag số lượng toàn bộ lộ trình học mà đến hiện tại user cần học tập |
Tên lộ trình, Tiến độ (%), Ngày bắt đầu/kết thúc. |
|
|
Khóa học + kèm tag tổng số khóa học mà user cần học đến hiện tại |
Tên khóa học, Giảng viên, Thời lượng. |
|
| Quizzes | Tên bài Quiz, Số câu hỏi, Thời gian làm bài. | Bám vào mở ra màn thi quiz |
5. Thanh slider bên phải --> Overfloating
- Calender : Click vào mở ra lịch thực hiện
- Chat : Click vào mở ra khung chat - > Hệ thống mở ra một Khung danh sách hội thoại đồng thời đẩy chiều rộng của Content chính bé lại.
6. Mô tả Tương tác & Điều hướng (User Flow)
6.1. TỔNG QUAN
-
Click vào Tiêu đề Block hoặc "Xem tất cả":
-
Hệ thống điều hướng người dùng đến màn hình Index (Danh sách) của phân hệ tương ứng.
-
-
Click vào một Bản ghi cụ thể:
-
Đối với Checklist: Điều hướng vào màn hình thực hiện chi tiết checklist đó.
-
Đối với Công việc: Mở Slide-over hoặc Màn hình chi tiết công việc để xem/comment/update trạng thái.
-
Đối với Khóa học/Lộ trình/Quiz: Điều hướng vào màn hình học tập hoặc màn hình bắt đầu bài kiểm tra tương ứng.
-
-
Tương tác nhanh trên Block Công việc:
-
Cho phép người dùng click vào Checkbox ở đầu dòng để đánh dấu "Hoàn thành" ngay tại icon đầu mỗi dòng công việc.
- Danh sách công việc trạng thái ở trạng thái cần làm và đang làm hôm nay và cv gần nhất. (view mặc định) mà user hiện tại là người thực hiện và ng có quyền sửa công việc
- Các icon tròn ở màn hình list thì các công việc bỏ qua hiển thị trạng thái trung gian mà cho phep user hoàn thành trực tiếp trên giao diện này. (Nếu muốn chuyển trạng thái trung gian thì bấm vào detail để chuyển trạng thái trung gian) --> Giống nhau ở màn Của tôi & menu Công việc
- Các TH cụ thể như sau (Lưu ý tài liệu sẽ mô tả chung cho việc chuyển trạng thái ở các trạng thái --> BE sẽ order riêng với màn của tôi sẽ chỉ hiển thị CV ở trạng thái cần làm và đang làm)
-
A. CÔNG VIỆC CHỈ CẦN 1 NGƯỜI HOÀN THÀNH
TH1: Công việc chỉ cần 1 người hoàn thành, user hiện tại là ng thực hiện
|
Trạng thái hiển thị |
Icon tương tác |
Action tương tác |
Trạng thái sau khi chuyển đổi |
|
Cần làm |
|
Bấm vào nút để chuyển trạng thái sang hoàn thành. Lưu ý: Vấn tuân thủ các quy tắc theo cấu hình (Cần bằng chứng, ghi chú...) |
|
| Cần làm |
|
Bấm vào nút hiển thị popup yêu cầu hoàn thành check list trong công việc trước khi đổi trạng thái
|
Cần làm |
| Đang làm |
|
Bấm vào nút để chuyển trạng thái sang hoàn thành. Lưu ý: Vấn tuân thủ các quy tắc theo cấu hình (Cần bằng chứng, ghi chú...) |
Hoàn thành |
| Không thể |
|
Bấm vào thì chuyển trạng thái Hoàn thành |
Hoàn thành |
| Hoàn thành |
|
Bấm vào chuyển trạng thái "Cần làm" |
Cần làm |
TH2: Công việc chỉ cần 1 người hoàn thành, user hiện tại là hỗ trợ, có quyền sửa công việc
|
Trạng thái hiển thị |
Icon tương tác |
Action tương tác |
Trạng thái sau khi chuyển đổi |
|
Cần làm |
|
- Vấn tuân thủ các quy tắc theo cấu hình (Cần bằng chứng, ghi chú...)
2. Với những công việc ở trạng thái cần làm nhưng có yêu cầu hoàn thành check list trong CV -> Bấm vào nút trạng thái hiển thị pop-up cảnh báo
|
|
| Đang làm |
|
Bấm vào nút để chuyển trạng thái sang hoàn thành. Lưu ý: Vấn tuân thủ các quy tắc theo cấu hình (Cần bằng chứng, ghi chú...) |
Hoàn thành |
| Không thể |
|
Bấm vào thì chuyển trạng thái Hoàn thành |
Hoàn thành |
| Hoàn thành |
|
Bấm vào chuyển trạng thái "Cần làm" |
Cần làm |
TH3: Công việc chỉ cần 1 người hoàn thành, user hiện tại là hỗ trợ, không có quyền thay đổi ;sửa công việc
- Bấm vào các icon không có response --> Click vào chi tiết chỉ view công việc
B. CÔNG VIỆC CHỈ CẦN TOÀN BỘ HOÀN THÀNH
TH1: User là người thực hiện và có quyền sửa công việc
|
Trạng thái hiển thị |
Icon tương tác |
Action tương tác |
Trạng thái sau khi chuyển đổi |
|
Cần làm |
|
1/Dropdown trả 2 trạng thái để user lựa chọn
Lưu ý: Vấn tuân thủ các quy tắc theo cấu hình (Cần bằng chứng, ghi chú...) 2/ Đối với những Cv chưa hoàn thành check list bên trong, khi click vào icon, hiển thị pop-up hoàn thành cv trước khi thay đổi trạng thái
3/ Khi người bấm là người cuối cùng cần hoàn thành công việc thì sẽ có UX tương ứng với việc công việc được hoàn thành này. !!!!! |
Trạng thái thay đổi tương ứng với lựa chọn:
|
|
Đang làm |
|
1/Dropdown trả 2 trạng thái để user lựa chọn
Lưu ý: Vấn tuân thủ các quy tắc theo cấu hình (Cần bằng chứng, ghi chú...) 2/ Đối với những Cv chưa hoàn thành check list bên trong, khi click vào icon, hiển thị pop-up hoàn thành cv trước khi thay đổi trạng thái
3/ Khi người bấm là người cuối cùng cần hoàn thành công việc thì sẽ có UX tương ứng với việc công việc được hoàn thành này. !!!!! |
Trạng thái thay đổi tương ứng với lựa chọn:
|
| Không thể |
|
Tùy vào từng TH : TH1: User là ng đã chọn "Tôi Không thể" Bấm vào thì dropdown 2 trạng thái:
TH2: User là người đã chuyển trạng thái "Tôi hoàn thành",. Bấm vào thì DDL trạng thái
|
Hoàn thành |
| Hoàn thành |
|
Bấm vào chuyển trạng thái
|
Cần làm |
TH 2 : User là người thực hiện và không có quyền sửa công việc
|
Trạng thái hiển thị |
Icon tương tác |
Action tương tác |
Trạng thái sau khi chuyển đổi |
|
Cần làm |
|
1/Dropdown trả 2 trạng thái để user lựa chọn
Lưu ý: Vấn tuân thủ các quy tắc theo cấu hình (Cần bằng chứng, ghi chú...) 2/ Đối với những Cv chưa hoàn thành check list bên trong, khi click vào icon, hiển thị pop-up hoàn thành cv trước khi thay đổi trạng thái
3/ Khi người bấm là người cuối cùng cần hoàn thành công việc thì sẽ có UX tương ứng với việc công việc được hoàn thành này. !!!!! |
Trạng thái thay đổi tương ứng với lựa chọn:
|
|
Đang làm |
|
1/Dropdown trả 2 trạng thái để user lựa chọn
Lưu ý: Vấn tuân thủ các quy tắc theo cấu hình (Cần bằng chứng, ghi chú...) 2/ Đối với những Cv chưa hoàn thành check list bên trong, khi click vào icon, hiển thị pop-up hoàn thành cv trước khi thay đổi trạng thái
3/ Khi người bấm là người cuối cùng cần hoàn thành công việc thì sẽ có UX tương ứng với việc công việc được hoàn thành này. !!!!! |
Trạng thái thay đổi tương ứng với lựa chọn:
|
| Không thể |
|
Không có DDL --> Hệ thống tự chuyển trạng thái task của user sang Tôi Hoàn thành |
Tôi Hoàn thành |
| Hoàn thành |
|
Bấm vào chuyển trạng thái task của user sang |
Cần làm |
TH3 : User là không phải người thực hiện và có quyền sửa công việc
|
Trạng thái hiển thị |
Icon tương tác |
Action tương tác |
Trạng thái sau khi chuyển đổi |
|
Cần làm |
|
1/Dropdown trả 2 trạng thái để user lựa chọn
Lưu ý: Vấn tuân thủ các quy tắc theo cấu hình (Cần bằng chứng, ghi chú...) 2/ Đối với những Cv chưa hoàn thành check list bên trong, khi click vào icon, hiển thị pop-up hoàn thành cv trước khi thay đổi trạng thái
3/ Khi người bấm là người cuối cùng cần hoàn thành công việc thì sẽ có UX tương ứng với việc công việc được hoàn thành này. !!!!! |
Trạng thái thay đổi tương ứng với lựa chọn:
|
|
Đang làm |
|
1/Dropdown trả 2 trạng thái để user lựa chọn
Lưu ý: Vấn tuân thủ các quy tắc theo cấu hình (Cần bằng chứng, ghi chú...) 2/ Đối với những Cv chưa hoàn thành check list bên trong, khi click vào icon, hiển thị pop-up hoàn thành cv trước khi thay đổi trạng thái
3/ Khi người bấm là người cuối cùng cần hoàn thành công việc thì sẽ có UX tương ứng với việc công việc được hoàn thành này. !!!!! |
Trạng thái thay đổi tương ứng với lựa chọn:
|
| Không thể |
|
Không có DDL --> Hệ thống tự chuyển trạng thái task của user sang Hoàn thành |
Hoàn thành |
| Hoàn thành |
|
Bấm vào chuyển trạng thái task của user sang Cần làm |
Cần làm |
C. BUSSINES RULE CHUYỂN TRẠNG THÁI
https://app.xmind.com/tOE3ATdO
Cụ thể như sau:
PHẦN 1 — DECISION TABLE
INPUT (Điều kiện)
| Ký hiệu | Mô tả |
|---|---|
| R | User có quyền đổi trạng thái? (Yes/No) |
| S | Trạng thái hiện tại của user: Todo / Doing / Done |
| T | Trạng thái task hiện tại: Todo / Doing / Done |
| F | Có Required Form? (Yes/No) |
| FD | User đã submit form? (Yes/No) |
| M | Completion Mode: ONE / ALL |
| LC | User là người cuối cùng cần hoàn thành? (Yes/No) |
📊 DECISION TABLE
| # | R | S | T | F | FD | M | LC | Hành động |
|---|---|---|---|---|---|---|---|---|
| 1 | No | * | * | * | * | * | * | ❌ Không cho đổi trạng thái, show “Không có quyền” |
| 2 | Yes | Done | Done | * | * | * | * | Không đổi, show “Task đã hoàn thành” |
| 3 | Yes | Todo/Doing | * | No | * | * | * | Cho đổi sang Done |
| 4 | Yes | Todo/Doing | * | Yes | No | * | * | ❌ Không cho Done, yêu cầu nhập form |
| 5 | Yes | Todo/Doing | * | Yes | Yes | ONE | * | Cho Done → Task = Done |
| 6 | Yes | Todo/Doing | * | Yes | Yes | ALL | No | Cho Done → Task = Doing |
| 7 | Yes | Todo/Doing | * | Yes | Yes | ALL | Yes | Cho Done → Task = Done |
| 8 | Yes | Done | Doing | * | * | ONE | * | Cho revert → Task = Doing |
| 9 | Yes | Done | Doing | * | * | ALL | Yes | Cho revert → Task = Doing |
| 10 | Yes | Done | Doing | * | * | ALL | No | Cho revert → Task = Doing |
| 11 | Yes | * | Done | * | * | ONE | * | Nếu revert → Task = Doing |
| 12 | Yes | * | Done | * | * | ALL | Yes | Nếu revert → Task = Doing |
| 13 | Yes | * | * | * | * | * | * | Sau mỗi hành động → Re-calc trạng thái task |
(* = không quan trọng)
PHẦN 2 — BUSINESS RULE (HOÀN CHỈNH)
Bạn có thể đưa nguyên khối này vào mục Business Rule – Task Status
1. Định nghĩa
1.1. Trạng thái User trong Task
-
Todo (Cần làm)
-
Doing (Đang làm)
-
Done (Hoàn thành)
1.2. Trạng thái Task
-
Todo
-
Doing
-
Done
1.3. Completion Mode
-
ONE: Chỉ cần 1 người hoàn thành
-
ALL: Tất cả người được giao phải hoàn thành
2. Quyền đổi trạng thái
User được phép đổi trạng thái khi:
-
Là Admin
HOẶC -
Là Creator
HOẶC -
Là Assignee
HOẶC -
Có permission
UPDATE_TASK_STATUS (Phần cấu hình công việc "Cài dặt cơ chế chuyển trạng thái")
Ngược lại:
→ Không cho đổi trạng thái
→ Thông báo: “Bạn không có quyền thay đổi trạng thái công việc.”
3. Rule Required Form
Nếu task có Required Form:
-
User chỉ được chuyển sang Done khi:
-
Đã submit form hợp lệ
-
-
Nếu chưa submit:
→ Không cho hoàn thành
→ Hiển thị popup yêu cầu nhập form
4. Rule chuyển trạng thái User
User có thể chuyển:
-
Todo → Doing
-
Todo → Done
-
Doing → Done
-
Done → Doing
-
Done → Todo (nếu có quyền)
5. Rule xác định trạng thái Task
5.1. Mode = ONE
Task = Done khi:
-
Có ít nhất 1 user = Done
Ngược lại:
-
Task = Doing/Todo
5.2. Mode = ALL
Task = Done khi:
-
100% user = Done
Nếu còn user chưa Done:
-
Task = Doing
6. Rule khi User hoàn thành
Khi user chuyển sang Done:
-
Hệ thống kiểm tra:
-
Required Form
-
Completion Mode
-
-
Sau đó:
-
Re-calc trạng thái Task
-
7. Rule khi User revert (Done → Doing/Todo)
Khi user đổi từ Done về Doing/Todo:
-
Task phải được tính lại theo:
-
Completion Mode
-
-
Nếu đang là Task Done:
→ Task chuyển về Doing
8. Rule thêm / xoá người tham gia
8.1. Thêm assignee
Nếu thêm assignee vào task đang Done:
-
Task chuyển về Doing
-
Assignee mới = Todo
8.2. Xoá assignee
-
Xoá user chưa Done → không ảnh hưởng
-
Xoá user đã Done → re-calc trạng thái task
9. Rule đặc biệt
-
User bấm Done khi đã Done:
→ Không đổi trạng thái
→ Show “Task đã hoàn thành” -
Sau mỗi hành động đổi trạng thái:
→ Hệ thống luôn re-calc trạng thái Task