Màn hình: Báo cáo (Report)

File: index.html lines 171-178, js/app.js lines 976-1105
Tab: Báo cáo (📊)
Theme: Dark

1. Tổng quan

Màn hình báo cáo dark theme hiển thị KPI + Radar Chart từ API dashboard.

📊 Báo cáo Đánh giá
Tổng quan + Biểu đồ radar

┌──────┬──────┐
│  45  │  30  │
│ Tổng │Hoàn  │
│phiên │thành │
├──────┼──────┤
│  5   │ 67%  │
│ Đang │Tỷ lệ │
│ XL   │ DG   │
└──────┴──────┘

📈 Biểu đồ Radar

      ┌──────────┐
      │   🕸️     │
      │  Radar   │
      └──────────┘
● Tự DG  ● DG chéo  ● Chuyên gia

📋 Ngưỡng đánh giá
🔍 Tự đánh giá        ≥ 90%
🔄 Đánh giá chéo      ≥ 85%
👨‍🏫 BLĐ + Chuyên gia   ≥ 80%

2. KPI Grid (4 card dark theme)

Mỗi card có background màu với opacity 0.1 và border cùng màu.

3. Radar Chart (dark theme)

Canvas #reportRadarChart (300x300), vẽ bằng renderRadarCanvas().

Cấu hình dark:

• Grid: rgba(255,255,255,.08)
• Labels: #e2e8f0
• Series:
• 🟢 Tự DG: #22c55e
• 🔵 DG chéo: #3b82f6
• 🟡 Chuyên gia: #f59e0b

Vị trí: Trong card background rgba(255,255,255,.03)

4. Bảng ngưỡng đánh giá

5. Luồng xử lý

renderReport() {
  loadDashboard().then(() => {
    renderReportOverview();
  });
}

• loadDashboard() fetch API /dashboard → set dashboard global
• renderReportOverview() render HTML + gọi renderRadarCanvas()
• Radar chart render với setTimeout(100ms) để đảm bảo DOM đã sẵn sàng

6. Các hàm

Screenshots

Chú thích: Màn hình báo cáo dark theme với 4 KPI cards

Chú thích: 4 KPI card màu: Xanh lá (Tổng), Xanh dương (Hoàn thành), Vàng (Đang), Tím (Tỷ lệ)

Chú thích: Radar Chart S1-S6 với theme tối: grid mờ, label xám

Chú thích: Bảng ngưỡng: Tự ĐG ≥90%, DG chéo ≥85%, BLĐ+CG ≥80%