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)

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.

Jghh

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ị TrạngGhi thái/Badgechú
Checklist Tên Checklist, Thời gian (Deadline), Địa điểm.

Đang làm (Xanh), CầHiển làmthị (Vàng).các trạng tái của từng check list

Bấm. vào mở ra modal thông tin check list
Công việc Checkbox, Tên công việc, Mã ID, Avatar người tham gia, Deadline.
  • ĐộBấm ưvào icon  đầu tiên:công Rấtviệc caođể (Đỏ),chuyển Warningtrạng (Cam),thái
    • Thấp
  • Bấm (Xanh).vào dòng công việc để mở ra công việc
  • Bấm vào icon chat để mở ra khung chat
Lộ trình học Tên lộ trình, Tiến độ (%), Ngày bắt đầu/kết thúc. ĐangBấm vào mở ra màn học,c Hoàntập thành.lộ trình
Khóa học Tên khóa học, Giảng viên, Thời lượng. Mới,Bấm Đangvào thammở gia.ra màn hình học tập khóa học
Quizzes Tên bài Quiz, Số câu hỏi, Thời gian làm bài. ChưaBám làm,vào Đãmở là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 --> 

6. Mô tả Tương tác & Điều hướng (User Flow)

  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 Dashboard (Cần xác nhận lại tùy theo cấu hình nghiệp vụ).

 

Back to top