Đặc tả Màn hình: Quản lý FAQ (FAQ Management Screen)
| Mã tài liệu: | EZD-DES-SCR-ADM-004 | Phiên bản: | 1.0 |
|---|---|---|---|
| User Story liên quan: | us-adm-03 |
Ngày hiệu lực: | 14/09/2025 |
| Người soạn: | Stephen | Người phê duyệt: | Stephen |
1. Mục tiêu của Màn hình
Cung cấp cho Tenant (Anh Phong) công cụ để quản lý tập câu hỏi thường gặp (FAQ) hiển thị trên Booth: thêm mới, chỉnh sửa, xóa và gắn tag để hỗ trợ tìm kiếm nhanh.
Màn hình này đóng vai trò duy trì cơ sở tri thức cơ bản cho AI Booth.
2. Bố cục Tổng thể (Overall Layout)
- Sidebar trái: Điều hướng (Dashboard, Promotions, FAQ, Branding, Avatar).
- Content chính:
- Toolbar (tiêu đề + nút thêm FAQ).
- Bảng danh sách FAQ (câu hỏi – câu trả lời – tag).
- Modal form để thêm/sửa FAQ.
3. Phân rã các Thành phần (Component Breakdown)
Thành phần 1: Sidebar
- Giữ nguyên layout từ Dashboard.
- Menu item “FAQ” active.
Thành phần 2: Toolbar (Header nội dung)
- Tiêu đề: “Quản lý FAQ”.
- Button chính: “+ Thêm câu hỏi mới” (primary).
- Vị trí: top-right.
Thành phần 3: Danh sách FAQ (FAQ List Table)
- Cột:
- Câu hỏi.
- Câu trả lời.
- Tags.
- Action (Edit/Delete).
- Empty state: “Chưa có FAQ nào. Hãy thêm mới để bắt đầu.”
Thành phần 4: Form Thêm/Sửa FAQ (Modal)
- Field:
- Câu hỏi (bắt buộc).
- Câu trả lời (bắt buộc).
- Tags (tùy chọn, multi-select).
- Button:
- Lưu (primary).
- Hủy (secondary).
- Validation: Không lưu khi thiếu Q/A.
Thành phần 5: Action Buttons
- Edit: Mở modal với dữ liệu sẵn có để chỉnh sửa.
- Delete: Confirm dialog: “Bạn có chắc chắn muốn xóa FAQ này?”.
Thành phần 6: Tìm kiếm & Lọc
- Search box: Gõ từ khóa để lọc theo câu hỏi/câu trả lời.
- Tag filter: Dropdown cho phép lọc theo tag.
Thành phần 7: Thông báo (Notifications)
- Success: Toast xanh “FAQ đã được lưu thành công / xóa thành công.”
- Error: Toast đỏ “Không thể lưu / đồng bộ với Booth thất bại.”
4. Hành vi Chuyển tiếp (Transition Behavior)
- Bấm Thêm mới → mở form modal.
- Lưu thành công → modal đóng + danh sách cập nhật.
- Xóa thành công → dòng FAQ biến mất.
- Search và lọc tag hoạt động realtime.
5. Triết lý Thiết kế (Design Philosophy)
- Đơn giản – Rõ ràng: Form ngắn gọn, dễ dùng.
- Dễ tìm kiếm: Có search và tag filter để quản lý tập FAQ lớn.
- An toàn: Luôn có bước xác nhận trước khi xóa.
- Consistency: Giữ nguyên style từ Dashboard và Promotions.
- Resilience: Empty state rõ ràng, không để trống hoàn toàn.