4. Tab "Tổng quan"#

Mục tiêu#

Cung cấp góc nhìn tổng thể về hiệu quả chiến dịch theo nhiều chiều: KPI chính, xu hướng thời gian, phân bố nền tảng, ngân sách, tương tác, và trạng thái duyệt.

Luồng nghiệp vụ#

1. Admin chọn tab Tổng quan.
2. Hệ thống hiển thị:
   • 6 thẻ KPI chính: Tổng video, Tổng lượt xem, Ngân sách, CPV (Phí/lượt xem), Tỷ lệ tương tác, Tổng thanh toán
   • Bảng Campaign Portfolio: Danh sách chiến dịch với KPI, hỗ trợ sort đa cột, phân trang 20 dòng/trang
   • Timeline Chart (Line): Xu hướng theo thời gian — 4 metric (Lượt xem / Video / Tương tác / Khách mới)
   • Budget Chart (Bar): Ngân sách theo nền tảng/chiến dịch
   • Interaction Chart (Pie/Doughnut): Phân bố tương tác (Lượt xem / Thích / Bình luận / Chia sẻ)
   • Creator Segments (collapsible): Phân khúc creator (Đang tham gia / Ngừng / Mới / Quay lại)
   • Platform Chart (Doughnut): Phân bố nội dung theo nền tảng
   • Approval Chart (Doughnut): Trạng thái duyệt (Approved / Pending / Rejected)
   • Platform Views Chart (Bar): So sánh lượt xem theo nền tảng
3. Mỗi thẻ KPI hỗ trợ tooltip giải thích (wiki) khi hover.
4. Khi không có dữ liệu → hiển thị "Không có dữ liệu" với icon và thông báo.

API đã triển khai#

• GET /analytics/dashboard — KPI chính (6 thẻ)
• GET /analytics/campaign-portfolio — Bảng danh sách chiến dịch
• GET /analytics/trends — Timeline xu hướng
• GET /analytics/budget — Dữ liệu ngân sách
• GET /analytics/interactions — Phân bố tương tác
• GET /analytics/segments — Phân khúc creator
• GET /analytics/platforms — Phân bố nền tảng
• GET /analytics/approval — Trạng thái duyệt

Tiêu chí chấp nhận#

#	Tiêu chí	Điều kiện đạt
AC-DB.4.1	6 thẻ KPI chính	Hiển thị đủ 6 KPI với giá trị, đơn vị, trend %, tooltip
AC-DB.4.2	Campaign Portfolio sort	Click header → sort ASC/DESC; Shift+click → sort đa cột
AC-DB.4.3	Campaign Portfolio phân trang	20 dòng/trang, có điều hướng đầu/giữa/cuối
AC-DB.4.4	Timeline Chart đa metric	Hiển thị 4 metric cùng lúc, hover tooltip đúng giá trị
AC-DB.4.5	Platform Chart	Doughnut 4 nền tảng với tỷ lệ %, tổng = 100%
AC-DB.4.6	Approval Chart	Doughnut 3 trạng thái (Approved / Pending / Rejected), đúng số lượng
AC-DB.4.7	Budget Chart	Bar chart phân bố ngân sách đúng theo nền tảng/chiến dịch
AC-DB.4.8	Interaction Chart	Pie chart đúng tỷ lệ Lượt xem / Thích / Bình luận / Chia sẻ
AC-DB.4.9	Creator Segments	Hiển thị 4 phân khúc với số lượng chính xác
AC-DB.4.10	Empty state	API trả rỗng → hiển thị "Không có dữ liệu" với icon
AC-DB.4.11	Chart responsive	Thu nhỏ trình duyệt → chart co giãn theo container
AC-DB.4.12	Chart theo theme	Chuyển dark/light mode → màu sắc chart tự điều chỉnh

---