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	Tên trường	Loại	Mô tả	Ghi chú
  1	Biểu mẫu yêu thích	Khu 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ị phía trên danh sá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
  3	Ngày sửa gần nhất	Date	Hiển thị 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
  6	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

  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ị số người/nhóm được gán thực hiện
  21	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	Label	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 với biểu mẫu. gồm: Sửa biểu mẫu Đặt lịch check list Yê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	Có cảnh báo xác nhận khi thực hiện xóa biểu mẫu

  ---

  2.2.1. Tab Biểu mẫu lưu trữ

   

  

   

  1. Khu vực Filter / Search

  STT	Tên trường	Loại	Mô tả	Ghi chú
  1	Search bar	Textbox	Cho phép nhập từ khóa để tìm kiếm theo Tên biểu mẫu hoặc Mã biểu mẫu	Search realtime hoặc Enter
  2	Bộ lọc khác	Button	Mở popup bộ lọc nâng cao	Icon filter
  3	Tên biểu mẫu (popup)	Textbox	Lọc theo tên biểu mẫu	Optional
  4	Người được thực hiện (popup)	Dropdown	Lọc theo người thực hiện biểu mẫu	Single/Multi select
  5	Nhóm được thực hiện (popup)	Dropdown	Lọc theo nhóm người thực hiện biểu mẫu	Single/Multi select
  6	Ngày chỉnh sửa (popup)	Date range picker	Lọc theo khoảng ngày chỉnh sửa biểu mẫu	From – To
  7	Ngày phát hành (popup)	Date range picker	Lọc theo khoảng ngày phát hành biểu mẫu	From – To

  ---

  2. Bảng danh sách biểu mẫu lưu trữ

  STT	Tên trường	Loại	Mô tả	Ghi chú
  1	Checkbox chọn dòng	Checkbox	Cho phép chọn 1 hoặc nhiều biểu mẫu	Dùng cho màn 2
  2	Tên biểu mẫu	Text	Hiển thị tên biểu mẫu	Click mở chi tiết (nếu có)
  3	Thực hiện	Icon + Number	Hiển thị số lượng người và nhóm được phép thực hiện biểu mẫu	Icon người và icon nhóm phân biệt
  4	Phát hành	Date	Hiển thị ngày phát hành biểu mẫu	Format: dd/MM/yyyy
  5	Icon phục hồi	Icon button	Cho phép phục hồi biểu mẫu từ lưu trữ về danh sách biểu mẫu	Action revert

  ---

  3. Khôi phục biểu mẫu

  STT	Tên trường	Loại	Mô tả	Ghi chú
  1	Hành động phục hồi	Action	Khi click icon phục hồi → hệ thống đưa biểu mẫu về list biểu mẫu	Không chuyển màn
  2	Message thành công	Toast message	Hiển thị thông báo: “Phục hồi thành công”	English: Restored template
  3	Vị trí message	UI behavior	Message hiển thị ở giữa phía trên màn hình	Floating
  4	Thời gian hiển thị	Timer	Message tự động tắt sau ~4 giây	Auto close
  5	Message chồng	UI behavior	Nếu người dùng ấn liên tục, message sau sẽ đè lên message trước	Không stack

   

  

  1. Trạng thái chọn nhiều

  STT	Tên trường	Loại	Mô tả	Ghi chú
  1	Checkbox header	Checkbox	Cho phép chọn tất cả biểu mẫu trong trang hiện tại	Select all
  2	Checkbox từng dòng	Checkbox	Cho phép chọn nhiều biểu mẫu	Multi select
  3	Thanh action dưới	Fixed bar	Hiển thị khi có ít nhất 1 biểu mẫu được chọn	Sticky bottom
  4	Số lượng đã chọn	Label	Hiển thị: “Bạn đã chọn X biểu mẫu”	Dynamic

  ---

  2. Action khi chọn nhiều

  STT	Tên trường	Loại	Mô tả	Ghi chú
  1	Bỏ lưu trữ	Button	Phục hồi nhiều biểu mẫu cùng lúc	Batch restore
  2	Xóa	Button	Xóa vĩnh viễn các biểu mẫu đã chọn	Có confirm
  3	Đóng chế độ chọn	Button/Icon	Thoát chế độ chọn nhiều	Clear selection

  ---

  2.2.3. Tab Bộ trả lời dùng chung

   

  

  1. Khu vực Search & Action

  STT	Tên trường	Loại	Mô tả	Ghi chú
  1	Search bar	Textbox	Tìm kiếm theo Tên bộ trả lời hoặc Mã bộ trả lời	Search theo keyword
  2	Nút Tạo bộ trả lời	Button	Mở màn hình tạo mới bộ trả lời	Điều hướng sang Màn 3

  ---

  2. Bảng danh sách bộ trả lời

  STT	Tên trường	Loại	Mô tả	Ghi chú
  1	Tên bộ trả lời	Text	Hiển thị tên bộ trả lời và mã bộ trả lời bên dưới	Format: Tên + Code
  2	Câu trả lời	Badge list	Hiển thị các đáp án đã cấu hình, mỗi đáp án là 1 badge màu theo cấu hình	Tối đa 5 ký tự/badge, dài hơn hiển thị  ... Màu badge lấy theo cấu hình màu của đáp án Giới hạn hiển thị đáp án: Nếu số đáp án > 4, hiển thị: +<số lượng còn lại>
  3	Biểu mẫu sử dụng	Number	Hiển thị số lượng biểu mẫu đang sử dụng bộ trả lời này	Click có thể mở chi tiết (optional)
  5	Action hub	Icon (⋯)	Mở menu hành động tại mỗi dòng	Hiển thị dropdown list 2 action gồm: sửa bộ trả lời Xóa bộ trả lời --> Có pop-up xác nhận đồng ý xóa

   

   

  

  (Tiêu đề thay đổi theo mode: Tạo mới bộ trả lời / Sửa bộ trả lời)

  1. Thông tin chung

  STT	Tên trường	Loại	Mô tả	Ghi chú
  1	Tiêu đề bộ trả lời *	Textbox	Nhập tên bộ trả lời	Tối đa 555 ký tự
  2	Nút Lưu	Button	Lưu bộ trả lời	Validate tiêu đề trước khi lưu Cảnh báo nếu không nhập tiêu đề  VN: Vui lòng nhập tiêu đề bộ trả lời. EN: Please enter the answer set title. Cảnh báo nếu vượt quá số kí tự cho phép VN: Tiêu đề không được vượt quá 555 ký tự. EN: Title must not exceed 555 characters. Cảnh báo y/c nhập nội dung trả lời VN: Vui lòng nhập nội dung câu trả lời. EN: Please enter the answer content. Có dòng đáp án nhưng để trống VN: Không được để trống nội dung câu trả lời. EN: Answer content must not be empty. Trường hợp thiếu nhiều điều kiện cùng lúc   VN:Vui lòng kiểm tra lại thông tin: tiêu đề và nội dung câu trả lời là bắt buộc. EN: Please check the required fields: title and answer content are mandatory.
  3	Nút Đóng	Button	Đóng màn hình	Không lưu

  ---

  2. Danh sách đáp án

  STT	Tên trường	Loại	Mô tả	Ghi chú
  4	Nội dung câu trả lời*	Textbox	Nhập nội dung đáp án	Không giới hạn ký tự Yêu cầu bắt buộc phải có ít nhất 1 đáp án
  5	Max score	Number	Nhập điểm tối đa của đáp án	>= 0
  6	Màu sắc	Color picker trigger	Chọn màu hiển thị cho đáp án	Mở popup màu
  7	Cảnh báo (Flagged)	Checkbox	Đánh dấu đáp án là cảnh báo	Optional
  8	Xóa đáp án	Icon button	Xóa dòng đáp án	Không xóa nếu chỉ còn 1 dòng (optional rule)
  9	Thêm câu trả lời	Button	Thêm mới 1 dòng đáp án	Append cuối danh sách
  10	Kéo sắp xếp	Drag handle	Cho phép thay đổi thứ tự đáp án	Lưu thứ tự

   

2.3. MÀN HÌNH TẠO MỚI BIỂU MẪU

• Khi bấm vào button "Tạo mới" hệ thống sẽ mở ra màn hình tạo mới mặc định, cụ thể như sau:

2.3.1. Các trường tổng quan

STT	Tên trường	Loại trường	Mô tả	Ghi chú / Rules
1.1	Ảnh đại diện	Icon/Upload	Cho phép tải ảnh thumbnail cho biểu mẫu.	Optional. Định dạng hỗ trợ: .png, .jpg. Dung lượng tối đa: 250MB.
1.2	Tên biểu mẫu	Input Text	Tên hiển thị của biểu mẫu.	Mặc định: "Untitled template (Biểu mẫu chưa đặt tên)".
1.3	Mô tả	Text Area	Thông tin chi tiết về biểu mẫu.	Placeholder: "Add a description (Thêm mô tả)".
1.4	Cảnh báo	Button	Check lỗi logic toàn biểu mẫu.	Mở ra màn hình cấu hình cảnh báo (Mục 2.3.1)
1.5	Phân quyền	Button	Thiết lập quyền truy cập/sửa.	Mở giao diện cấu hình phân quyền (Mục 2.3.2)
1.6	Phát hành	Button	Lưu và đưa vào sử dụng.	Nút màu tím (Primary).

2.3.1.1. Màn hình cấu hình cảnh báo

Đây là bảng quy định kịch bản gửi thông báo tự động dựa trên hành vi người dùng.

STT	Loại cảnh báo	Thời gian gửi	Nội dung thông báo (VN/EN)	Ghi chú
2.1	Checklist được hoàn thành	Ngay sau khi checklist được hoàn thành.	VN: Check list {{ChecklistName}} đã được hoàn thành bởi {{CompleterName}}. EN: The check list {{ChecklistName}} has been completed by {{CompleterName}}.	{{ChecklistName}}: Tên biểu mẫu. {{CompleterName}}: Tên người thực hiện.
2.2	Checklist bị thay đổi thông tin	Ngay sau khi checklist được cập nhật.	VN: Kiểm tra của bạn vừa được cập nhật bởi {{UserName}}. EN: Your check list has been updated by {{UserName}}.	{{UserName}}: Tên người thực hiện chỉnh sửa.
2.3	Checklist được đánh giá Đạt/Không đạt	Ngay sau khi có kết quả đánh giá.	VN: Kiểm tra của bạn vừa được xem xét và đánh giá {{Result}} bởi {{UserName}}. EN: Your check list has been reviewed and marked as {{Result}} by {{UserName}}.	{{Result}}: "Đạt" hoặc "Không đạt". {{UserName}}: Tên người đánh giá.
2.4	Checklist đưa lại trạng thái "Đang thực hiện"	Ngay sau khi chuyển trạng thái.	VN: Kiểm tra của bạn vừa được chuyển sang trạng thái "Đang thực hiện" bởi {{UserName}}. Vui lòng kiểm tra và hoàn thành kiểm tra. EN: Your check list has been updated to 'In Progress' by {{UserName}}. Please review the checklist and complete it.	{{UserName}}: Tên người thao tác chuyển trạng thái.

Khi bấm Edit trên từng dòng cảnh báo ở mục 2, hệ thống hiển thị bảng thiết lập đối tượng:

• Đối tượng nhận thông báo (Checkbox chọn nhiều):

  • Người thực hiện. 

  • Người có quyền xem checklist.

  • Người sở hữu biểu mẫu.

  • Nhóm người dùng theo địa điểm (Kèm Dropdown chọn nhóm).

• Logic hệ thống: Nếu chọn "Nhóm người dùng theo địa điểm" mà không có ai thỏa mãn, hệ thống tự động gửi cho người thực hiện kiểm tra.

2.3.1.2. Màn hình cấu hình phân quyền

Block " Có quyền với biểu mẫu": Quy định ai được phép chỉnh sửa hoặc quản lý chỉnh sửa của biểu mẫu này.

STT	Tên quyền	Mô tả chức năng	Ghi chú / Rules
2.1.1	Sở hữu	Toàn quyền quản trị biểu mẫu.	Mặc định người tạo là "Sở hữu". Có quyền gỡ bỏ (remove) các đối tượng khác.
2.1.2	Thực hiện	Chỉ được dùng biểu mẫu để tạo checklist.	Không có quyền sửa nội dung hay cấu trúc biểu mẫu.
2.1.3	Thực hiện, sửa	Quyền thực hiện + Quyền biên tập.	Cho phép thay đổi nội dung, câu hỏi trong biểu mẫu.
2.1.4	Thực hiện, sửa, xóa	Toàn quyền trừ quyền gỡ Sở hữu.	Bao gồm cả quyền xóa bỏ hoàn toàn biểu mẫu khỏi hệ thống.

Block: Có quyền với checklist tạo từ biểu mẫu : 

Quy định quyền hạn đối với các bản ghi (check list) được tạo ra từ biểu mẫu này.

STT	Tên quyền	Mô tả chức năng	Ghi chú / Rules
2.2.1	Xem	Chỉ được xem kết quả checklist.	Không được phép can thiệp dữ liệu đã nhập.
2.2.2	Xem, sửa	Được xem và cập nhật dữ liệu.	Cho phép chỉnh sửa các câu trả lời trong checklist.
2.2.3	Xem, sửa, đánh giá	Thêm quyền đánh giá kết quả check list	Cho phép xác nhận checklist Đạt hoặc Không đạt.
2.2.4	Xem, sửa, đánh giá, xóa	Toàn quyền với bản ghi checklist.	Bao gồm quyền xóa bản ghi checklist đã thực hiện.
2.2.5	Theo địa điểm	Checkbox lọc dữ liệu.	Rule: Nếu tích chọn, người dùng/nhóm chỉ thấy các checklist có địa điểm trùng với địa điểm họ đang trực thuộc.

Pop-up khi chọn đối tượng vào phân quyền --> Bấm vào button mở ra pop-up chọn tương ứng bấm "Thêm người dùng", "Thêm nhóm" 

STT	Thành phần	Loại trường	Mô tả / Hành vi	Ghi chú
3.1	Tìm kiếm	Search Bar	Tìm theo tên hoặc email/mã nhóm.	Kết quả trả về danh sách tương ứng bên dưới.
3.2	Lọc theo địa điểm	Filter	Lọc danh sách người dùng theo vị trí.	Chỉ hiển thị người dùng thuộc địa điểm đã chọn.
3.3	Phân trang	Pagination	Điều hướng danh sách dài.	Mặc định hiển thị 10 items/trang.
3.4	Thanh tác vụ chọn	Bulk Action Bar	Xuất hiện khi tích chọn nhiều đối tượng.	Hiển thị số lượng đã chọn và nút Xóa hàng loạt.

 

2.3.2. Block ""Thông tin chung" : 

 

 

Khu vực chứa các trường hệ thống mặc định, không tính điểm.