Menu: CiCC 6S → Dashboard → Tab Tổng quan
File:cicc-6s-api.phplines 1117-1571
Quyền:manage_options
1. Header Dashboard
🏷️ CiCC 6S Admin Dashboard
Hệ thống quản lý Treo/Rút thẻ 6S
[📊 Tất cả Tenant ▼] [Năm 2026 ▼] [🔄 Làm mới]
Tab: [Tổng quan] [DSKK] [BCKK Xu hướng] [Nhân sự] [Địa điểm] [Tài sản] [BCNT Treo] [BCNR Rút] [Export]
Bộ lọc header
| Element | Mô tả |
|---|---|
| Select Tenant | Lọc theo khách hàng (all / từng tenant) |
| Select Năm | Chọn năm báo cáo (2023~hiện tại) |
| Nút Làm mới | Reload trang |
2. KPI Cards (6 cards)
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ 🏷️ │ │ 🟢 │ │ 📍 │ │ ⚙️ │ │ 🚨 │ │ ✅ │
│ Tổng thẻ│ │User act│ │Địa điểm │ │Tài sản │ │Quá hạn │ │Hoàn tất│
│ 150 │ │ 12 │ │ 45 │ │ 30 │ │ 8 │ │ 95 │
│ 40 đang │ │ 3 chờ │ │10 vị trí│ │1 tenant│ │5 chờ ĐG│ │5 ko đạt│
│ mở │ │ duyệt │ │ TS │ │ │ │ │ │ │
└────────┘ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘
| KPI | Ý nghĩa |
|---|---|
| Tổng thẻ | Toàn bộ thẻ trong DB |
| User active | Số user active / chờ duyệt |
| Địa điểm | Tổng location active / vị trí có tài sản |
| Tài sản | Tổng tài sản / số tenants |
| Quá hạn | Thẻ quá hạn / chờ đánh giá |
| Hoàn tất | Thẻ hoàn tất / không đạt |
3. Chart Row 1: Donut + Pareto
Donut Chart — Trạng thái thẻ
Canvas #cicdDonut (360x240), vẽ bằng Canvas API thuần (không Chart.js).
9 segments:
| Màu | Trạng thái |
|---|---|
#1565c0 | 🆕 Mới |
#e65100 | ⏳ Chờ XL |
#2e7d32 | 🔧 Đang XL |
#6a1b9a | 📌 Gán rút |
#f9a825 | 📤 Chờ duyệt |
#00838f | ✅ Chờ ĐG |
#c62828 | ❌ Không đạt |
#1b5e20 | ✅ Hoàn tất |
#b71c1c | 🚨 Quá hạn |
Tâm donut: % hoàn thành + nhãn "Hoàn thành". Legend tự động bên dưới.
Pareto Chart — S-Category
Canvas #cicdPareto (400x240), Canvas API thuần.
- Bar chart sắp xếp giảm dần (S1~S6)
- Màu sắc: vàng, xanh dương, xanh lá, tím, cam, đỏ
- Đường cumulative line màu đỏ
#d32f2f, hiển thị % cộng dồn trên mỗi cột
4. Chart Row 2: Xu hướng tháng
Canvas #cicdTrend (800x240)
- 🔵 Line Treo thẻ (xanh): Số thẻ tạo mới theo tháng (6 tháng)
- 🟢 Line Rút thẻ (xanh lá): Số thẻ completed theo tháng
- Grid lines, legend, nhãn tháng
5. Row 3: Recent Tags + Top Locations
Bảng thẻ gần đây (15 thẻ mới nhất)
| Mã thẻ | Loại | Vị trí | Trạng thái | Ngày tạo |
|---|---|---|---|---|
| Y-2026-00001 | 🟡 | C1 - Chuyền 1 | 🆕 Mới | 23/06/2026 |
Bảng khu vực nhiều thẻ nhất (top 10)
| # | Khu vực | Tổng | ✅ | ❌ |
|---|---|---|---|---|
| 1 | Chuyền 1 (C1) | 25 | 18 | 2 |
6. Row 4: Hiệu suất nhân sự
Bảng user performance (top 10)
| # | Nhân sự | Vai trò | Tổng thẻ | ✅ Hoàn tất | ❌ Không đạt | Hiệu suất |
|---|---|---|---|---|---|---|
| 1 | Nguyễn Văn A | R07 | 30 | 25 | 2 | ████████░ 83% |
Cột hiệu suất có progress bar + % bên cạnh.
7. Status Summary
Bảng chi tiết 9 trạng thái với progress bar:
🆕 Mới treo ████████████████████░░░ 25 16.7%
⏳ Chờ xử lý ██████████░░░░░░░░░░░░░ 12 8.0%
🔧 Đang xử lý ██████████████░░░░░░░░░ 18 12.0%
...
8. Công nghệ
- Chart: Canvas API thuần (không Chart.js) — vẽ trực tiếp bằng JavaScript
- Dữ liệu: PHP
$wpdbqueries → JSON encode → JS inline - CSS: Inline trong PHP function, dark admin theme
Audio thuyết minh
audio/10-admin-tong-quan.mp3Click play để nghe hướng dẫn bằng giọng đọc.
Screenshots
Chú thích: Header Admin Dashboard với filter Tenant + Năm + các tab
images/admin/admin-kpi-cards.pngChú thích: 6 KPI cards: Tổng thẻ, User active, Địa điểm, Tài sản, Quá hạn, Hoàn tất
images/admin/admin-donut-chart.pngChú thích: Biểu đồ tròn 9 trạng thái thẻ
images/admin/admin-pareto-chart.pngChú thích: Biểu đồ Pareto phân loại S1-S6
images/admin/admin-trend-chart.pngChú thích: Line chart xu hướng Treo/Rút thẻ 6 tháng
images/admin/admin-recent-tags.pngChú thích: Bảng 15 thẻ gần nhất
images/admin/admin-top-locations.pngChú thích: Bảng khu vực nhiều thẻ nhất (top 10)
images/admin/admin-user-performance.pngChú thích: Bảng hiệu suất nhân sự top 10 với progress bar