Bỏ qua

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

Mã tài liệu: EZD-DES-SCR-ADM-005 Phiên bản: 1.0
User Story liên quan: us-adm-04 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) quản lý các yếu tố nhận diện thương hiệu hiển thị trên Booth: logo, màu chủ đạo, và thông điệp chào.
Màn hình này đảm bảo Booth được cá nhân hóa theo phong cách và bản sắc của từng tenant.

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 đề).
  • Form quản lý Branding.

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 “Branding” active.

Thành phần 2: Toolbar

  • Tiêu đề: “Quản lý Branding”.
  • Không có button tạo mới (Branding chỉ có 1 config duy nhất).

Thành phần 3: Form Branding

  • Field:
  • Logo: Upload (PNG/JPG ≤ 2MB).
  • Màu chủ đạo: Color picker (hex code).
  • Thông điệp chào: Input text (≤ 140 ký tự).
  • Button:
  • Lưu thay đổi (primary).
  • Hủy (secondary).
  • Validation:
  • Logo bắt buộc có, dung lượng đúng chuẩn.
  • Màu hợp lệ theo mã hex.
  • Thông điệp không vượt 140 ký tự.

Thành phần 4: Preview Booth (Live Preview)

  • Khung bên phải hiển thị Booth mockup:
  • Logo hiển thị trên avatar/booth.
  • Màu chủ đạo áp dụng cho nền/CTA.
  • Thông điệp chào hiển thị khi booth idle.
  • Update realtime khi thay đổi input.

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

  • Success: Toast xanh “Branding đã được lưu 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)

  • Upload logo thành công → preview cập nhật ngay.
  • Chọn màu mới → preview đổi ngay màu.
  • Nhập thông điệp → preview hiển thị text mới.
  • Lưu → call API, nếu thành công → sync Booth ≤ 1 phút.

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

  • Cá nhân hóa: Tenant thấy ngay thương hiệu của mình trên Booth.
  • Realtime feedback: Preview thay đổi ngay để giảm sai sót.
  • Đơn giản: Form ngắn gọn, dễ hiểu.
  • Consistency: Input và button theo chuẩn EZD-DSGN-STD (Phần B – Admin Webapp).
  • Resilience: Có empty state fallback (logo default, màu mặc định).