Bỏ qua

Đặc tả Màn hình: Quản lý Khuyến mãi (Promotion Management Screen)

Mã tài liệu: EZD-DES-SCR-ADM-003 Phiên bản: 1.0
User Story liên quan: us-adm-02 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ý khuyến mãi hiển thị trên Booth: xem danh sách, tạo mới, chỉnh sửa và xóa.
Màn hình này cần đảm bảo quy trình CRUD khuyến mãi rõ ràng, đơn giản và nhất quán.

2. Bố cục Tổng thể (Overall Layout)

Sử dụng kiến trúc “Dashboard with Sidebar” với 2 phần chính:

  • Sidebar trái: Menu điều hướng (Dashboard, Promotions, FAQ, Branding, Avatar).
  • Content chính:
  • Toolbar (tiêu đề + nút tạo mới).
  • Danh sách khuyến mãi (bảng).
  • Modal/Form để tạo hoặc chỉnh sửa khuyến mãi.

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

Thành phần 1: Sidebar

  • Giữ nguyên bố cục và style từ Dashboard.
  • Menu item “Promotions” active.

Thành phần 2: Toolbar (Header nội dung)

  • Tiêu đề: “Quản lý Khuyến mãi”.
  • Button chính: “+ Tạo khuyến mãi mới” (primary).
  • Vị trí: top-right.

Thành phần 3: Danh sách Khuyến mãi (Promo List Table)

  • Cột:
  • Tiêu đề khuyến mãi.
  • Thời gian hiệu lực (Từ ngày – Đến ngày).
  • Trạng thái (Active/Expired).
  • Action (Edit/Delete).
  • Empty state: Nếu chưa có khuyến mãi → hiển thị icon + text: “Chưa có khuyến mãi nào. Hãy tạo mới để bắt đầu.”

Thành phần 4: Form Tạo/Sửa Khuyến mãi (Modal)

  • Field:
  • Tiêu đề (bắt buộc).
  • Mô tả (bắt buộc).
  • Thời gian hiệu lực (date picker từ – đến, bắt buộc).
  • Upload hình ảnh (tùy chọn, PNG/JPG ≤ 2MB).
  • Button:
  • Lưu (primary).
  • Hủy (secondary).
  • Validation: Không cho lưu khi thiếu field bắt buộc.

Thành phần 5: Action Buttons

  • Edit: Mở modal với dữ liệu cũ để chỉnh sửa.
  • Delete: Hộp thoại xác nhận: “Bạn có chắc chắn muốn xóa khuyến mãi này?”.

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

  • Success: Toast xanh “Khuyến mãi đã đượ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.”
  • Retry: Button “Thử lại” hiển thị khi sync error.

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

  • Bấm Tạo mới → mở form modal.
  • Lưu thành công → đóng modal + danh sách cập nhật + Booth sync ≤ 1 phút.
  • Xóa thành công → khuyến mãi biến mất khỏi danh sách + Booth cập nhật ≤ 1 phút.
  • Nếu Booth sync thất bại → hiển thị lỗi + cho retry trong vòng 60s.

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

  • Rõ ràng: CRUD operations hiển thị minh bạch.
  • Nhanh gọn: Modal form thay vì chuyển trang để tiết kiệm thao tác.
  • An toàn: Xóa luôn có bước xác nhận.
  • Consistency: Toàn bộ style, button, input theo chuẩn EZD-DSGN-STD (Phần B – Admin Webapp).
  • Resilience: Empty state và error state đều có thông điệp và CTA cụ thể.