Đặc tả Màn hình: Quản lý Avatar (Avatar Management Screen)

Mã tài liệu:	EZD-DES-SCR-ADM-006	Phiên bản:	1.0
User Story liên quan:	`us-adm-05`	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

Cho phép Tenant (Anh Phong) lựa chọn avatar ảo từ thư viện có sẵn để hiển thị tại Booth.
Phạm vi MVP: chỉ dừng lại ở chọn avatar từ danh sách, không có tùy chỉnh chi tiết (giới tính, trang phục, giọng nói).

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 đề).
Lưới hiển thị thư viện avatar.
Preview avatar đã chọn.

3. Phân rã các Thành phần (Component Breakdown)

Giữ nguyên layout từ các màn trước.
Menu item “Avatar” active.

Tiêu đề: “Quản lý Avatar”.
Không có nút tạo mới (avatar lấy từ thư viện).

Thành phần 3: Thư viện Avatar (Avatar Library Grid)

Hiển thị danh sách avatar có sẵn dạng grid card (3–4 cột).
Mỗi card gồm: hình thumbnail + tên avatar.
Avatar được chọn có viền xanh (active state).
Empty state: Nếu chưa có avatar nào → hiển thị text: “Chưa có avatar nào trong thư viện.”

Thành phần 4: Preview Avatar

Panel bên phải hiển thị avatar được chọn ở kích thước lớn hơn.
Có text mô tả ngắn (ví dụ: “Avatar Nam 01 – Trang phục lịch sự”).

Thành phần 5: Thao tác (Actions)

Button “Lưu lựa chọn” (primary).
Button “Hủy” (secondary).

Thành phần 6: Thông báo (Notifications)

Success: Toast xanh “Avatar đã được cập nhật thành công.”
Error: Toast đỏ “Không thể cập nhật avatar, vui lòng thử lại.”

4. Hành vi Chuyển tiếp (Transition Behavior)

Click vào avatar → preview cập nhật ngay.
Bấm Lưu lựa chọn → call API → đồng bộ Booth trong ≤1 phút.
Hủy → quay lại avatar trước đó.

5. Triết lý Thiết kế (Design Philosophy)

Đơn giản: Người dùng chỉ cần vài click để đổi avatar.
Thị giác rõ ràng: Preview giúp tenant thấy ngay kết quả.
Consistency: Giữ nguyên navigation + style theo EZD-DSGN-STD (Phần B – Admin Webapp).
Resilience: Empty state rõ ràng khi thư viện avatar chưa được cấu hình.