Biểu mẫu

Link thiết kế: https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=17609-14177&t=TZBwrrKSgFKbTvZw-4 

1. Mục tiêu:

• Thuận tiện cho KH sử dụng
• Tối ưu công cụ cho phép user thực hiện các thao tác

2. Mô tả chi tiết giao diện và logic

2.1. Thanh điều hướng (Side bar)

• 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 Biểu mẫu".

2.2. Màn hình master

Các Tab thông tin fồm

 

2.2.1. Tab Biểu mẫu

2.2.1.1. Block "Biểu mẫu yêu thích"

• Khi không có danh sách biểu mẫu yêu thích thì không hiển thị block này
• Đẩy cụm Danh sách biểu mẫu lên 
• Danh sách biểu mẫu yêu thích hiển thị:
  • Tối đã 05 biểu mẫu --> Khi đưa vào list "Biểu mẫu yêu thích" thì không hiển thị ở cụm "Danh sách biểu mẫu " 
  • List hiển thị biểu mẫu ưu thích hiển thì từ ngày đưa vào list yêu thích từ "mới nhất" đến "Cũ nhất"
  • Vượt quá 05 biểu mẫu --> Trả biểu mẫu được đưa vào ds yêu thích có ngày "cũ nhất" so với ngày hiên tại . Biểu mẫu này cũng đưa về list danh sách biểu mẫu 
•  

Stt	STT		Tên trường		Loại		Mô tả		Ghi chú
1	avatarBiểu mẫu yêu thích	ImageKhu vực hiển thị	Danh sách các biểu mẫu được người dùng đánh dấu yêu thích	Hiển thị hìnhphía ảnhtrên avatadanh củasách biểu mẫu
2	Ảnh biểu mãu	image	Hiển thị ảnh đại diện biểu mẫu (nếu có) Nếu k có thì hiển thị ảnh mặc định
2	Tên biểu mẫu	Text	Hiển thị tên biểu mẫu	Hiển thị trên 1 dòng , nếú dài thì hiển thì dạng .. Hover vào hiển thị tooltip trả ra đầy đủ tên biểu mẫu
3	Mã biểu mẫu	Text	Hiển thị mã biểu mẫu
4	Ngày sửa gần nhất	Date	Hiển thị ngànhgayf sửa gần nhất của biểu mẫu
4	Ngày phát hành		Hiển thị nhgayf sửa gần nhất của biểu mẫu
5	Đặt lịch	Label	Giá trị Có; Không
56	Làm check list	Button	Bấm vào để mở ra modal làm check list
7	action Hub	Butto	Bấm vào mở ra các action chi tiết gồm: Sửa biểu mẫu Đặt lịch check list Bỏ yêu thích Quản lý quyền Nhân bản Lưu trữ biểu mẫu Xóa biểu mẫu Lấy QR Code

2.2.1.2.Block“DANH SÁCH BIỂU MẪU”

1. Thanh tìm kiếm & bộ lọc

STT	Tên trường	Loại	Mô tả	Ghi chú
8	Search bar	Textbox	Tìm kiếm biểu mẫu theo tên biểu mẫu	Tìm gần đúng
9	Bộ lọc Người tạo	Dropdown	Lọc danh sách biểu mẫu theo người tạo	Cho phép chọn 1 hoặc nhiều
10	Bộ lọc Đặt lịch	Dropdown (Yes/No)	Lọc biểu mẫu theo trạng thái có đặt lịch hay không	Yes / No
11	Bộ lọc khác	Button	Mở popup bộ lọc nâng cao

---

2. Popup “Bộ lọc khác”

STT	Tên trường	Loại	Mô tả	Ghi chú
12	Người được thực hiện	Dropdown multi-select	Lọc theo người được phân công thực hiện checklist
13	Nhóm được thực hiện	Dropdown multi-select	Lọc theo nhóm được phân công thực hiện
14	Ngày chỉnh sửa	Date range picker	Lọc biểu mẫu theo khoảng ngày chỉnh sửa	Start date – End date
15	Ngày phát hành	Date range picker	Lọc biểu mẫu theo khoảng ngày phát hành	Start date – End date
16	Nút Lọc	Button	Áp dụng điều kiện lọc
17	Nút Bỏ lọc	Button	Xóa toàn bộ điều kiện lọc

---

3. Bảng danh sách biểu mẫu

Có cảnhbáoxácnhậnkhithựchiệnxóabiểu

STT	Tên trường	Loại	Mô tả	Ghi chú
18	Checkbox chọn	Checkbox	Chọn một hoặc nhiều biểu mẫu để thao tác hàng loạt
19	Biểu mẫu	Text	Tên biểu mẫu và mã biểu mẫu	Ví dụ: QA.2026.000035
20	Thực hiện	Icon + số	Hiển thị ngàysố người/nhóm được gán thực hiện
621	Xem báo cáo	Icon + số	Hiển thị số người/nhóm có quyền xem báo cáo
22	Sửa gần nhất	Date	Ngày chỉnh sửa gần nhất của biểu mẫu
23	Phát hành	Date	Ngày phát hành biểu mẫu
24	Đặt lịch	TagLabel	HiệHiển thị trạng thái đặt lịch (Có/Không)
25	Làm checklist	Button	Tạo checklist từ biểu mẫu tương ứng
26	Menu thao tác (…)	Button	Mở danh sách hành đãộng dặvới biểu mẫu. gồm: Sửa biểu mẫu Đặt lịch haycheck chưa. Gồm tag: Cólist KhônngYêu thích QUản lý quyền Nhân bản biểu mẫu Lưu trữ biễu mẫu Xóa biểu mẫu, Lấy QR code
				mẫu

---