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. |
|
|
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 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ợ.
- Đối với menu Của tôi , 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
- Các TH cụ thể như sau:
-
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
Lưu ý đối vi
|
Cần làn |
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. 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àn |
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ó interact --> 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 trạng thái 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 |
|
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ú...) |
|
| Đang 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àn |
|
|
|