2. Bộ lọc đa chiều (Multi-dimensional Filters)#
Mục tiêu#
Cho phép người dùng lọc dữ liệu phân tích theo nhiều tiêu chí đồng thời, hỗ trợ chọn nhiều giá trị cùng lúc (multi-select) với các filter Chiến dịch, Influencer, Tag.
Các loại bộ lọc#
2.1. Lọc theo Chiến dịch (Multi-select)#
- Dropdown checkbox cho phép chọn nhiều chiến dịch cùng lúc.
- Tìm kiếm chiến dịch theo từ khóa trong dropdown.
- Mặc định trống = Tất cả chiến dịch.
- Hiển thị badge số lượng đã chọn.
2.2. Lọc theo Thời gian#
- 4 tùy chọn: 7 ngày / 30 ngày / 90 ngày / Tùy chỉnh.
- Preset tự động tính khoảng ngày theo giờ Việt Nam.
- Chọn "Tùy chỉnh" → hiện calendar picker 2 chiều (ngày bắt đầu + ngày kết thúc).
2.3. Lọc theo Influencer (Multi-select)#
- 4 chế độ chọn:
- Tất cả: Toàn bộ Influencer
- Nhân viên TCB (Techcomers): Chỉ nhân viên TCB
- Ngoài TCB (Guest): Chỉ Influencer bên ngoài
- Tùy chọn: Chọn cụ thể từng Influencer
- Chế độ "Tùy chọn" hiển thị danh sách có tìm kiếm, cho phép chọn nhiều.
2.4. Lọc theo Tag (Multi-select)#
- Dropdown checkbox chọn nhiều tag để lọc chiến dịch.
2.5. Lọc theo Nền tảng (Multi-select)#
- Chọn một hoặc nhiều nền tảng: Facebook / YouTube / TikTok / Instagram.
Hành vi chung#
- Nút Apply: Áp dụng bộ lọc, URL và dữ liệu cập nhật.
- Nút Reset: Xóa toàn bộ filter, về trạng thái ban đầu.
- Tất cả trạng thái filter được lưu vào URL query parameters.
Tiêu chí chấp nhận#
| # | Tiêu chí | Điều kiện đạt |
|---|---|---|
| AC-DB.2.1 | Multi-select Chiến dịch | Chọn 2+ chiến dịch → dữ liệu tổng hợp từ các chiến dịch đã chọn |
| AC-DB.2.2 | Preset thời gian | Chọn 7d/30d/90d → ngày bắt đầu/kết thúc tự động tính chính xác |
| AC-DB.2.3 | Tùy chỉnh thời gian | Chọn "Tùy chỉnh" → calendar mở → chọn từ ngày đến ngày → dữ liệu lọc đúng khoảng |
| AC-DB.2.4 | Lọc Influencer — 4 chế độ | Chuyển chế độ Tất cả / Nhân viên / Ngoài / Tùy chọn → dữ liệu lọc đúng nhóm |
| AC-DB.2.5 | Multi-select Influencer (Tùy chọn) | Chế độ Tùy chọn → chọn nhiều Influencer → dữ liệu tổng hợp |
| AC-DB.2.6 | Multi-select Tag | Chọn nhiều tag → chỉ lọc chiến dịch có chứa ít nhất một tag đã chọn |
| AC-DB.2.7 | Multi-select Nền tảng | Chọn nhiều nền tảng → dữ liệu từ các nền tảng đã chọn |
| AC-DB.2.8 | Nút Apply | Click Apply → URL cập nhật, dữ liệu refetch đúng filter |
| AC-DB.2.9 | Nút Reset | Click Reset → tất cả filter xóa, URL về trạng thái ban đầu |
| AC-DB.2.10 | Tìm kiếm trong dropdown | Gõ từ khóa trong dropdown Chiến dịch/Influencer → danh sách lọc theo từ khóa |