Màn hình: Trang chủ (Home Dashboard)

File: index.html lines 94-146, js/app.js lines 214-339
Tab: Home (🏠)

1. Tổng quan

Màn hình đầu tiên sau đăng nhập. Gồm: KPI Dashboard (collapse được), Quick Actions, Radar Chart S1-S6, Footer.

┌──────────────────────────────────┐
│ Header: [📋 CiCC Assessment] (user)  │
├──────────────────────────────────┤
│ 📊 Tổng quan Đánh giá         ▼ │
│ ┌──────┬──────┬──────┬──────┐    │
│ │ 📋   │ ✅   │ ⏳   │ 📅   │    │
│ │ Tổng │ H.thành│ Đang  │ H.nay  │
│ │  45  │30(67%)│  5    │  3    │    │
│ └──────┴──────┴──────┴──────┘    │
├──────────────────────────────────┤
│ ⚡ Thao tác nhanh                 │
│ ┌──────┬──────┬──────┬──────┐    │
│ │ 📋   │ 🏷️   │ 📊   │ ⚠️   │    │
│ │ Bắt đầu│6S Tag│ Báo  │ Obs  │    │
│ │ ĐG    │ App  │ cáo  │      │     │
│ │  →   │  →   │  →   │  →   │     │
│ └──────┴──────┴──────┴──────┘    │
├──────────────────────────────────┤
│ 📈 Tổng quan S1-S6               │
│        ┌──────────┐             │
│        │  🕸️      │             │
│        │  Radar   │             │
│        │  Chart   │             │
│        └──────────┘             │
│ 🟢 Tự DG  🔵 DG chéo  🟡 Ch.Gia │
├──────────────────────────────────┤
│ Footer · Copyright © CiCC       │
└──────────────────────────────────┘

2. Dashboard KPI

2.1 Dashboard toggle

Click vào "📊 Tổng quan Đánh giá" → collapse/expand dashboard.

Element: .dashboard

Hàm: this.parentElement.classList.toggle('collapsed')

2.2 Compact row (4 card mini)

2.3 KPI Grid (4 card lớn)

Khu vực #kpiGrid, render bởi renderDashboardKPI().

Dữ liệu: Từ API GET /dashboard → dashboard.kpi

API response:

{
  "kpi": {
    "total_assessments": 45,
    "completed": 30,
    "in_progress": 5,
    "today": 3
  }
}

3. Quick Actions (4 nút)

Khu vực ⚡ Thao tác nhanh, mỗi mục là 1 card .quick-item.

4. Radar Chart (S1-S6)

Vị trí

#radarChart — Canvas 300x300, vẽ bằng Canvas API thuần (không Chart.js).

Dữ liệu

Từ API GET /dashboard → dashboard.radar

{
  "radar": {
    "labels": ["S1", "S2", "S3", "S4", "S5", "S6"],
    "self": [85, 70, 90, 75, 80, 95],
    "cross": [75, 65, 80, 70, 75, 85],
    "expert": [70, 60, 75, 65, 70, 80]
  }
}

Cấu trúc vẽ (renderDashboardRadar)

• 5 vòng tròn đồng tâm: 20%, 40%, 60%, 80%, 100%
• 6 trục: S1 đến S6, label màu #1a237e
• 3 đường:
• 🟢 Tự DG (Self) — #22c55e (xanh lá)
• 🔵 DG chéo (Cross) — #3b82f6 (xanh dương)
• 🟡 Chuyên gia (Expert) — #f59e0b (vàng cam)
• Legend: Góc dưới trái
• Fill: Mỗi đường có fill color + '20' (alpha 12.5%)

Hàm

5. Footer

Tự động cập nhật ngày tháng năm hiện tại.

Copyright © 23 June, 2026 CiCC - Công Ty Tư Vấn Cải Tiến Liên Tục. All Rights Reserved.

6. Xử lý lỗi

• API dashboard lỗi → render KPI = 0 (không crash)
• Radar data null/empty → canvas để trống, không vẽ
• Skeleton loading: 4 card xám nhấp nháy trong #kpiGrid

Screenshots

Chú thích: Màn hình Home Dashboard: KPI cards, Quick Actions, Radar Chart S1-S6

Chú thích: Dashboard KPI ở trạng thái collapsed (thu gọn)

Chú thích: Dashboard KPI mở rộng với 4 card: Tổng, Hoàn thành, Đang, Hôm nay

Chú thích: 4 card Thao tác nhanh: Bắt đầu ĐG, 6S Tagging, Báo cáo, Tạo Observation

Chú thích: Radar Chart 3 đường: Tự DG (xanh), DG chéo (xanh dương), Chuyên gia (vàng)

Chú thích: Footer với ngày tháng và copyright CiCC