Màn hình Admin: Tổng quan 6S

Menu: CiCC 6S → Dashboard → Tab Tổng quan
File: cicc-6s-api.php lines 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

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     │ │        │ │        │ │        │
└────────┘ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘

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:

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)

Bảng khu vực nhiều thẻ nhất (top 10)

6. Row 4: Hiệu suất nhân sự

Bảng user performance (top 10)

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 $wpdb queries → JSON encode → JS inline
• CSS: Inline trong PHP function, dark admin theme

Audio thuyết minh

Click 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

Chú thích: 6 KPI cards: Tổng thẻ, User active, Địa điểm, Tài sản, Quá hạn, Hoàn tất

Chú thích: Biểu đồ tròn 9 trạng thái thẻ

Chú thích: Biểu đồ Pareto phân loại S1-S6

Chú thích: Line chart xu hướng Treo/Rút thẻ 6 tháng

Chú thích: Bảng 15 thẻ gần nhất

Chú thích: Bảng khu vực nhiều thẻ nhất (top 10)

Chú thích: Bảng hiệu suất nhân sự top 10 với progress bar