Tổng quan
Menu: Tổng quan (Trang chính)
Route:/dashboard
Quyền yêu cầu: Đã đăng nhập
Phiên bản: v1.0 — 2026-05-08
1. Giới thiệu
Tổng quan là trang đầu tiên khi đăng nhập, cung cấp cái nhìn tổng thể về hoạt động kinh doanh qua các thẻ chỉ số, biểu đồ xu hướng, bản đồ Việt Nam, và bảng hoạt động cập nhật theo thời gian thực.
2. Giao diện
2.1 Phần đầu — Chào mừng + Bộ lọc thời gian
- Lời chào cá nhân hóa: "Xin chào {UserName}!"
- 3 nút chọn khoảng thời gian: 7 ngày / 30 ngày / 90 ngày
- Nút "Quản lý tem" →
/stamp-management - Nút thanh bên (pulse icon) → Mở/đóng panel bên phải
2.2 KPI Analytics — 4 Cards (Dữ liệu thật)
Hàng đầu tiên hiển thị 4 thẻ thống kê chính kết nối trực tiếp với API:
| Card | Metric | Link |
|---|---|---|
| 🟢 Tổng mã QR | totalQr1Codes + totalQr2Codes + % hoạt động |
→ Quản lý tem |
| 🔵 Tổng lượt quét | totalScans + Unique IP (Số IP duy nhất) |
→ Phân tích |
| 🟡 Mã kích hoạt | activatedQr2Codes + Tỷ lệ % |
→ Phân tích |
| 🔴 Cảnh báo gian lận | openFraudAlerts (Số cảnh báo đang mở) |
→ Fraud Alerts |
Mỗi card sử dụng CountUp animation cho hiệu ứng đếm số từ 0 lên giá trị thật.
2.3 KPI Bán hàng — 4 Cards (Dữ liệu mẫu)
Hàng thứ hai hiển thị 4 thẻ thống kê bán hàng bằng dữ liệu mẫu để định hướng phát hành trong các phiên bản tiếp theo:
| Card | Ý nghĩa | Trạng thái |
|---|---|---|
| Tổng thu | Tổng doanh thu | 🔶 Dữ liệu mẫu (chưa kết nối thật) |
| Số đơn hàng | Tổng đơn đặt hàng | 🔶 Dữ liệu mẫu (chưa kết nối thật) |
| Khách hàng mới | Số khách hàng đăng ký mới | 🔶 Dữ liệu mẫu (chưa kết nối thật) |
| Quỹ hiện có | Số dư tài khoản thanh toán | 🔶 Dữ liệu mẫu (chưa kết nối thật) |
ℹ️ Phần KPI bán hàng này hiện hiển thị dữ liệu mẫu và sẽ được kết nối chính thức với hệ thống thương mại điện tử CheckPro trong phiên bản tiếp theo.
2.4 Thống kê Sản phẩm — 4 Mini Cards + 2 Charts
4 Mini KPI Cards: Tổng SP / Đang kinh doanh / Bản nháp / Ngừng kinh doanh
2 Charts song song:
- Donut — Loại sản phẩm: ApexCharts donut hiển thị phân bổ theo loại SP
- Bảng — SP quét nhiều nhất: Top products: Tên + SKU + Số QR + Lượt quét
2.5 Xu hướng quét QR — ApexChart Mixed (Area + Bar + Line)
| Series | Type | Mô tả |
|---|---|---|
| QR1 quét | Area | Tổng quét QR1 theo ngày |
| QR2 quét | Bar | Tổng quét QR2 theo ngày |
| Kích hoạt | Line | Lượng kích hoạt QR2 |
Phần đầu hiển thị 4 KPI tổng hợp: Tổng quét, QR1, QR2, Kích hoạt
2.6 Bản đồ Việt Nam — Vị trí quét (VietnamMap SVG)
Hiển thị phân bổ địa lý các lượt quét trên lãnh thổ Việt Nam:
- Bản đồ tương tác: Nhấp vào từng tỉnh/thành để xem tên và số lượt quét.
- Top 3 khu vực: Danh sách top 3 tỉnh/thành quét nhiều nhất + thanh tiến trình (progress bar).
- Các thao tác trên bản đồ:
- 🖱️ Phóng to / Thu nhỏ: Sử dụng cuộn chuột (cuộn) hoặc chạm hai ngón tay (trên mobile/trackpad).
- 🤚 Di chuyển: Kéo thả chuột để di chuyển vùng nhìn bản đồ (pan).
- 🔘 Bộ nút điều khiển (góc bản đồ): Nút + (phóng to), - (thu nhỏ) và ⤾ (đặt lại vị trí ban đầu).
- Nút "Xem báo cáo" → chuyển nhanh sang trang Báo cáo chi tiết lọc theo tỉnh/thành tương ứng.
2.7 Row cuối: Donut + Recent Scans
| Cột trái | Cột phải |
|---|---|
| Stamp Status Donut — Phân bổ trạng thái tem (ApexCharts) | Recent Scans — 10 lượt quét gần nhất: Mã tem, Loại QR, Khu vực, IP |
2.7 thanh bên — Nhật ký quét gần đây
- SimpleBar cuộn được
- Timeline: Icon QR1/QR2 + Stamp code + Vùng + IP + Thời gian
- 3 quick links: Phân tích chi tiết / Báo cáo / Cảnh báo gian lận
3. FAQ
| Câu hỏi | Trả lời |
|---|---|
| Dữ liệu cập nhật khi nào? | Khi load trang hoặc đổi khoảng thời gian. Không auto-làm mới. |
| "% hoạt động" tính thế nào? | (activeQr1 + activeQr2) / (totalQr1 + totalQr2) × 100 |
| Bản đồ hiển thị gì? | Heatmap SVG vùng quét nhiều nhất trên lãnh thổ VN. |
Cập nhật lần cuối: 2026-05-08