Quản lý khóa học - Concept Courses Grid (Learning Management)

Purpose

• Cung cấp cái nhìn tổng thể trực quan về tất cả hành trình học tập (Grid view).
• Hỗ trợ học viên phân loại và truy cập nhanh vào từng khóa học dựa trên trạng thái (Hick’s Law).
• Giữ vững phong cách “Peeking” (Nhìn lén) để kiểm tra tiến độ mà không cần chuyển trang.
• [NEW] Cung cấp insights về quá trình học tập thông qua thống kê và analytics.

Elements / Scope

• Layout: Grid 3-4 cột (Desktop), 1 cột (Mobile).
• Status Tabs: Đang học, Hoàn thành, Bảo lưu/Hủy.
• Guardrail: Không hiển thị huy hiệu thành tích/leaderboard badge trong All-courses; vai trò đó thuộc Profile > Achievements và Home pulse strip.

Learning Statistics (NEW)

• Summary Strip: 4 stat cards phía trên grid:

  • Tổng khóa học (theo status)
  • Giờ học tích lũy (+ delta tháng này)
  • Điểm cải thiện (entry → latest, by skill)
  • Streak hiện tại (+ kỷ lục)

• Analytics Section (collapsible):

  • Score Trend Chart: xu hướng điểm 3-12 tháng
  • Skill Breakdown: bar chart 4 skills (L/R/W/S)
  • Weekly Activity Heatmap: 7 ngày, intensity = giờ học
  • Class Comparison: rank, so với TB lớp, top 1

• Card-level Stats: mini grid 2x2 trong mỗi course card

  • Giờ học (current/total)
  • Điểm trung bình bài kiểm tra
  • Attendance rate (%)
  • Tiến độ tuần (%)

Course Card

• Thumbnail/gradient theo kỹ năng.
• Badge loại hình (Offline/Zoom/Video/Hybrid).
• Progress bar & % hoàn thành; next session; CTA Tiếp tục (Next Best Action).
• Info Peek: Hover để xem 3 mốc tiếp theo (syllabus), badge pinned nếu ưu tiên.
• Search & Filter: lọc kỹ năng, hình thức, trạng thái; sort next session / last activity; pin/favorite.
• Không chứa block thành tích (huy hiệu mới, rank leaderboard, trophy) trên card.

Logic / Rules

• Sorting:
  • Đang học: next session ↑, tie-break last activity.
  • Hoàn thành: ngày kết thúc mới nhất.
• Peeking:
  • Hover overlay: bài vừa xong + 3 mốc tới + CTA “Vào chi tiết”.
• Pin/favorite: đẩy khóa lên đầu nhóm Đang học.
• Empty: gợi ý khóa liên quan hoặc lộ trình tiếp theo nếu tab trống.
• Analytics: data aggregated từ tất cả khóa Đang học; có thể collapse để tiết kiệm space.

UI / Behavior

• Card: bo góc lớn (rounded-[2.5rem]), không shadow mặc định; hover mới nổi; CTA Tiếp tục rõ; badge Pinned nếu ưu tiên.
• Card-level visual badges chỉ dành cho trạng thái/course metadata (Pinned, Modality, Status), không dùng cho achievements.
• Tabs: chuyển mượt; mỗi tab có counter; search + filter (skill/hình thức).
• Overlay peeking: gradient nhẹ, border token; CTA vào chi tiết hành trình; 3 mốc tới.
• Mobile: 1 cột; peeking = tap to open overlay; Analytics Section mặc định collapsed.
• Deep link: từ search/noti scroll & ring card (5s); empty state rõ ràng khi lọc không có kết quả.
• Summary Strip: responsive grid 2→4 cols; icons color-coded.
• Analytics Section: toggle collapse/expand; charts use DS color tokens.

Notes

• Prototype: ../Prototypes/CM_Course_Courses_Concept.html.
• Đồng bộ Token với trang Home.

Change log

• 2026-02-11: Chốt guardrail cho concept All-courses: không hiển thị huy hiệu thành tích/leaderboard badge.
• 2026-01-19: [MAJOR] Thêm Learning Statistics: Summary Strip, Card-level Stats, Full Analytics Section.
• 2026-01-21: Bổ sung pin/favorite, filter hình thức, gradient theo skill, deeplink highlight, CTA Next Best Action rõ.
• 2026-01-19: Khởi tạo concept Courses Grid.