Trang HOME

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.	Danh sách Hiển thị 05 check list cần thực hiện có thời gian đến hạn gần nhất với hiện tại Hiển thị các trạng tái của từng check list Bấm. vào mở ra modal thông tin check list Bấm "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.
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.	Danh sách Hiện thị 05 công việc của ng dùng hiện ở trạng thái ở trạng thái cần làm của cv 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ợ Bấm vào icon đầu công việc để chuyển trạng thái Bấm vào dòng công việc để mở ra công việc Bấm vào icon chat để mở ra khung chat Bấm "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.
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.	04 lộ trình trên 1 scroll ngang Bấm vào mở ra màn học tập lộ trình
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.	Bấm vào mở ra màn hình học tập khóa học Khóa học đã đc đưa vào lộ trình thì k hiển thị ở list khóa học nữa Scroll ngang đển
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ú...)	Hoàn thành
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		Bấm vào nút để chuyển trạng thái sang hoàn thành. - 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	Hoàn thành
Đ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 Tôi đã hoàn thành Hoàn thành cho tất cả. 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: Tôi Hoàn thành Hoàn thành
Đang làm		1/Dropdown trả 2 trạng thái để user lựa chọn Tôi đã hoàn thành Hoàn thành cho tất cả. 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: Tôi Hoàn thành Hoàn thành
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: Tôi hoàn thành Hoàn thành cho tất cả 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 cho tất cả	Hoàn thành
Hoàn thành		Bấm vào chuyển trạng thái Mở lại cho tất cả	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 Tôi đã 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ú...) 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: Tôi Hoàn thành
Đang làm		1/Dropdown trả 2 trạng thái để user lựa chọn Tôi đã hoàn thành Hoàn thành cho tất cả. 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: Tôi Hoàn thành
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 Hoàn thành cho tất cả 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: Hoàn thành
Đang làm		1/Dropdown trả 2 trạng thái để user lựa chọn Hoàn thành cho tất cả. 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: Hoàn thành
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:

BẢNG 1 – MODE: Chỉ cần 1 người hoàn thành

TC	From	To (User chọn)	Có quyền	Required Form	Form done	Result (Task)	Result (User khác)	Ghi chú
A1	Cần làm	Đang làm	Y	N/A	N/A	Đang làm	Không đổi	–
A2	Cần làm	Đang làm	N	N/A	N/A	Không đổi	Không đổi	Block – No permission
A3	Cần làm	Hoàn thành	Y	N	N/A	Hoàn thành	Hoàn thành theo	–
A4	Cần làm	Hoàn thành	Y	Y	Y	Hoàn thành	Hoàn thành theo	–
A5	Cần làm	Hoàn thành	Y	Y	N	Không đổi	Không đổi	Block – Form
A6	Đang làm	Cần làm	Y	N/A	N/A	Cần làm	Không đổi	–
A7	Đang làm	Cần làm	N	N/A	N/A	Không đổi	Không đổi	Block
A8	Đang làm	Hoàn thành	Y	N	N/A	Hoàn thành	Hoàn thành theo	–
A9	Đang làm	Hoàn thành	Y	Y	Y	Hoàn thành	Hoàn thành theo	–
A10	Đang làm	Hoàn thành	Y	Y	N	Không đổi	Không đổi	Block – Form
A11	Hoàn thành	Cần làm	Y	N/A	N/A	Cần làm	Không đổi	Reset
A12	Hoàn thành	Cần làm	N	N/A	N/A	Không đổi	Không đổi	Block
A13	Hoàn thành	Đang làm	Y	N/A	N/A	Đang làm	Không đổi	Re-open
A14	Hoàn thành	Đang làm	N	N/A	N/A	Không đổi	Không đổi	Block

--> Tổng: 14 case

🟡 BẢNG 2 – MODE: Tất cả mọi người cùng hoàn thành

TC	From	To (User chọn)	Có quyền	Required Form	Form done	Có phải người cuối	Result (User)	Result (Task)	Ghi chú
B1	Cần làm	Đang làm	Y	N/A	N/A	N/A	–	Đang làm	–
B2	Cần làm	Đang làm	N	N/A	N/A	N/A	–	Không đổi	Block
B3	Cần làm	Hoàn thành	Y	N	N/A	N	Hoàn thành	Đang làm	Chưa đủ người
B4	Cần làm	Hoàn thành	Y	N	N/A	Y	Hoàn thành	Hoàn thành	Người cuối
B5	Cần làm	Hoàn thành	Y	Y	Y	N	Hoàn thành	Đang làm	–
B6	Cần làm	Hoàn thành	Y	Y	Y	Y	Hoàn thành	Hoàn thành	–
B7	Cần làm	Hoàn thành	Y	Y	N	N/A	Không đổi	Không đổi	Block – Form
B8	Đang làm	Hoàn thành	Y	N	N/A	N	Hoàn thành	Đang làm	–
B9	Đang làm	Hoàn thành	Y	N	N/A	Y	Hoàn thành	Hoàn thành	Người cuối
B10	Đang làm	Hoàn thành	Y	Y	Y	N	Hoàn thành	Đang làm	–
B11	Đang làm	Hoàn thành	Y	Y	Y	Y	Hoàn thành	Hoàn thành	–
B12	Đang làm	Hoàn thành	Y	Y	N	N/A	Không đổi	Không đổi	Block – Form
B13	Hoàn thành	Đang làm	Y	N/A	N/A	N/A	Reset user	Đang làm	Reset 1 người
B14	Hoàn thành	Đang làm	N	N/A	N/A	N/A	Không đổi	Không đổi	Block
B15	Hoàn thành	Cần làm	Y	N/A	N/A	N/A	Reset all	Cần làm	Reset all
B16	Hoàn thành	Cần làm	N	N/A	N/A	N/A	Không đổi	Không đổi	Block

--> Tổng: 16 case

BẢNG 3 – CASE CHẶN (Rule chung)

TC	Mode	Điều kiện	Result
C1	All	Không có quyền	Không đổi trạng thái
C2	All	Required Form = Y & Form chưa xong	Không đổi
C3	All	User chỉ có quyền view	Không đổi
C4	All	Task đã Complete & user thường đổi	Block
C5	All	Task bị khoá	Block
C6	All	Task bị archive	Block
C7	All	User không thuộc task	Block
C8	All	Task quá hạn & bị lock	Block
C9	All	Không xác định mode	Block

--> Tổng: 9 case