Đặc tả Màn hình: Dashboard chính (Main Dashboard Screen)

Mã tài liệu:	EZD-DES-SCR-ADM-002	Phiên bản:	1.0
User Story liên quan:	`us-adm-01`	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ái nhìn toàn cảnh về hoạt động của Booth: tổng lượt tương tác, top câu hỏi, heatmap thời gian, và xu hướng nổi bật. Đây là nơi tập trung các dữ liệu định lượng giúp tenant ra quyết định nhanh.

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

Sử dụng kiến trúc “Dashboard with Sidebar”:

Sidebar trái: Điều hướng chính (Dashboard, Khuyến mãi, FAQ, Branding, Avatar).
Header trên: Logo, tên tenant, menu người dùng (profile + logout).
Content chính: Grid 2 cột, nhiều section theo modules.

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

Mục lục:
Dashboard (active).
Promotions.
FAQ.
Branding.
Avatar.
Icon: sử dụng thư viện Material Icons.
Width: 240px, màu nền #1F2937 (Gray Dark).

Thành phần 2: Header

Bên trái: Logo tenant (hoặc EZD default).
Bên phải: Tên “Anh Phong”, avatar user, menu dropdown (Profile, Đăng xuất).
Nền: trắng, shadow nhẹ.

Thành phần 3: Biểu đồ Tương tác theo Ngày (7 ngày gần nhất)

Mô tả: Một component biểu đồ cột (Bar Chart) chiếm vị trí trung tâm, thay thế cho 3 thẻ Key Metrics cũ.
Trục X: Hiển thị 7 ngày gần nhất (ví dụ: T2, T3, T4...).
Trục Y: Hiển thị tổng số lượt tương tác.
Tương tác: Khi di chuột (hover) qua một cột, một tooltip sẽ hiện ra, hiển thị con số chính xác của ngày hôm đó (ví dụ: "Thứ 3: 152 lượt").
Mục đích: Cung cấp một cái nhìn trực quan, nhanh chóng về xu hướng tương tác trong tuần, mạnh mẽ và dễ hiểu hơn nhiều so với các con số tĩnh.

Thành phần 4: Top 10 Câu hỏi Phổ biến

Mô tả: Một component biểu đồ tròn (Pie Chart hoặc Donut Chart) hoặc một bảng được thiết kế lại, trực quan hơn.
Hiển thị:
- Mỗi "miếng bánh" của biểu đồ sẽ đại diện cho một câu hỏi/chủ đề.
- Bên cạnh biểu đồ sẽ là một danh sách chú giải (legend) liệt kê tên của 10 câu hỏi hàng đầu.
Tương tác: Khi di chuột qua một "miếng bánh" hoặc một dòng trong chú giải, phần tương ứng sẽ được làm nổi bật (highlight).
Mục đích: Giúp "Anh Phong" nhận diện ngay lập tức các chủ đề khách hàng quan tâm nhất mà không cần phải đọc qua một bảng dữ liệu khô khan.

Thành phần 5: Heatmap tương tác

Heatmap theo ngày/giờ (7 ngày x 24 giờ).
Màu từ nhạt → đậm biểu thị số lượt.
Tooltip khi hover: “Thứ 3, 15h: 23 lượt”.

Thành phần 6: Xu hướng bất thường (Trend Highlights)

Banner/box riêng với icon ⚠️.
Nếu phát hiện trend → hiển thị: “Câu hỏi về Uniqlo tăng đột biến (+250%)”.
Nếu dữ liệu yếu → hiển thị nhãn cảnh báo: “Trend chưa đủ ý nghĩa, vui lòng kiểm tra kỳ sau”.

Thành phần 7: CTA – Xuất báo cáo

Button chính: “Xuất báo cáo PDF”.
Khi bấm → tải file PDF.
Success → toast xanh “Báo cáo đã được xuất”.
Error → toast đỏ “Xuất báo cáo thất bại”.

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

Bấm Xuất báo cáo → call API export → download PDF.
Bấm sidebar item → chuyển màn hình (Promotion, FAQ, Branding, Avatar).
Heatmap/Trend: hover để xem tooltip chi tiết.
Empty state: nếu dashboard không có dữ liệu → hiển thị text + CTA “Xem tài liệu hướng dẫn”.

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

Trực quan là trên hết: Ưu tiên sử dụng biểu đồ để truyền tải thông tin nhanh và hiệu quả.
Khả năng drill-down: Từ biểu đồ tổng quan, người dùng có thể xem log chi tiết hoặc heatmap.
Tính cảnh báo: Trend bất thường được nhấn mạnh bằng visual cues.
Consistency: Sidebar + Header theo chuẩn EZD-DSGN-STD.md.
Resilience: Luôn có empty state rõ ràng.