← WOO Design System

Thẻ Tiến bộ của bạn

Dùng ở: Trang chủ học viên. Nguồn: Mockup Learner Dashboard đã duyệt 23/10/2026, đổi giá trị sang token Design System. Số liệu trên trang là dữ liệu bịa, có cùng hình dạng với dữ liệu thật.

Dữ liệu thẻ nhận

skill: listening, speaking, reading, writing (hiện là Nghe, Nói, Đọc, Viết)
percent: số từ 0 đến 100, hiện ra đã làm tròn
priority: true: tối đa 1 kỹ năng, thanh Gold kèm ★
status: on_track (mặc định, xanh Progress) · goal_reached (chỉ khi 100%, xanh lá) · behind (Amber, bắt buộc có note nêu lý do)
Trạng thái thẻ: ready · empty · loading · error

Đủ dữ liệu

Học viên đã học vài tuần, chưa đặt kỹ năng ưu tiên. Bốn thanh cùng màu xanh Progress.

Tiến bộ của bạn

Xem chi tiết

Nghe45%
Nói60%
Đọc70%
Viết50%

Dữ liệu mẫu

{
  "state": "ready",
  "detailHref": "#tien-bo",
  "skills": [
    {
      "skill": "listening",
      "percent": 44.6
    },
    {
      "skill": "speaking",
      "percent": 60
    },
    {
      "skill": "reading",
      "percent": 70.2
    },
    {
      "skill": "writing",
      "percent": 50
    }
  ]
}

Có kỹ năng ưu tiên

Lộ trình đang ưu tiên Nói. Chỉ một thanh được tô Gold, kèm dấu ★.

Tiến bộ của bạn

Xem chi tiết

Nghe45%
Nói (đang ưu tiên)60%
Đọc70%
Viết50%

Dữ liệu mẫu

{
  "state": "ready",
  "detailHref": "#tien-bo",
  "skills": [
    {
      "skill": "listening",
      "percent": 45
    },
    {
      "skill": "speaking",
      "percent": 60,
      "priority": true
    },
    {
      "skill": "reading",
      "percent": 70
    },
    {
      "skill": "writing",
      "percent": 50
    }
  ]
}

Đạt mục tiêu và chậm tiến độ

Đọc đã đạt mục tiêu chặng (xanh lá). Viết chậm so với lộ trình (Amber), luôn có câu nêu lý do.

Tiến bộ của bạn

Xem chi tiết

Nghe58%
Nói64%
Đọc100%
Đạt mục tiêu chặng 1
Viết30%
Chậm 2 tuần so với lộ trình

Dữ liệu mẫu

{
  "state": "ready",
  "detailHref": "#tien-bo",
  "skills": [
    {
      "skill": "listening",
      "percent": 58
    },
    {
      "skill": "speaking",
      "percent": 64
    },
    {
      "skill": "reading",
      "percent": 100,
      "status": "goal_reached",
      "note": "Đạt mục tiêu chặng 1"
    },
    {
      "skill": "writing",
      "percent": 30,
      "status": "behind",
      "note": "Chậm 2 tuần so với lộ trình"
    }
  ]
}

Mới học vài buổi

Số nhỏ và một kỹ năng chưa bắt đầu (0%). Số lẻ được làm tròn.

Tiến bộ của bạn

Xem chi tiết

Nghe12%
Nói5%
Đọc9%
Viết0%

Dữ liệu mẫu

{
  "state": "ready",
  "detailHref": "#tien-bo",
  "skills": [
    {
      "skill": "listening",
      "percent": 12.4
    },
    {
      "skill": "speaking",
      "percent": 5
    },
    {
      "skill": "reading",
      "percent": 8.5
    },
    {
      "skill": "writing",
      "percent": 0
    }
  ]
}

Chưa có bài học nào

Học viên vừa vào, chưa có bài làm để tính tiến bộ.

Tiến bộ của bạn

Sau bài học đầu tiên, tiến bộ từng kỹ năng sẽ hiện ở đây.

Dữ liệu mẫu

{
  "state": "empty"
}

Đang tải

Đang lấy dữ liệu. Khối xám đứng yên vì chuyển động chưa chốt.

Tiến bộ của bạn

Đang tải tiến bộ

Dữ liệu mẫu

{
  "state": "loading"
}

Không tải được

Mạng hoặc máy chủ lỗi. Có nút Thử lại.

Tiến bộ của bạn

Chưa tải được tiến bộ.

Dữ liệu mẫu

{
  "state": "error"
}