Skip to main content

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)

 

image.png

 

 

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 

  1. Calender : Click vào mở ra lịch thực hiện
  2. 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

  1. 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.

  2. 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.

  3. 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

 

image.png

 

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  

 

image.png

 

 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

 

image.png

 

 Cần làm
Đang làm 

 

image.png

 

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ể    

 

image.png

 

Bấm vào thì chuyển trạng thái Hoàn thành

 Hoàn thành
Hoàn thành

 

image.png

 

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

 

image.png

 
  1. 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

image.png

  • Hoàn thành
Đang làm 

 

image.png

 

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ể    

 

image.png

 

Bấm vào thì chuyển trạng thái Hoàn thành

 Hoàn thành
Hoàn thành

 

image.png

 

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

 

image.png

 

 

 

image.png

 

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

image.png

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

image.png

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

image.png

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ể    

 

image.png

 

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

 

image.png

 

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

 

image.png

 

 

 

image.png

 

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

image.png

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

image.png

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

image.png

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ể    

 

image.png

 

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

 

image.png

 

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

 

image.png

 

 

 

image.png

 

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

image.png

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

image.png

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

image.png

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ể    

 

image.png

 

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

 

image.png

 

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

 

Back to top