Quản lý khóa học - Concept Achievements (Profile & Cross-course)

Purpose

• Tổng hợp và trưng bày huy hiệu/hạng thành tích từ nhiều khóa (Self-Determination Theory - Competence).
• Tăng động lực dài hạn và khả năng ghi nhận qua gamification nhẹ.

Elements / Scope

• Layout: 3 phần – Header (summary + history strip) + Peer Comparison + Gamification Roadmap + Main (filter + grid huy hiệu).
• Data coverage: tổng hợp từ nhiều nguồn (Course leaderboard snapshot, Certificates, Streak/Study-hour series, campaign/challenge có ruleVersion).
• Summary bar: Tổng huy hiệu, hạng cao nhất (cross-course), streak dài nhất, giờ học tuần.
• Peer Comparison section: So sánh với học viên khác toàn hệ thống (Top X% streak, Top X% giờ học, Top X% huy hiệu, Top X% leaderboard).
• Gamification Roadmap:
  • Tier progress (Gold → Platinum) với progress bar.
  • Step-by-step achievement goals (Completed, In Progress, Locked states).
  • Mục tiêu cụ thể: Hoàn thành 3 Mock, Streak 60 ngày, Top 3 Leaderboard 5 lần, 50h học.
• History strip: 3–5 huy hiệu gần nhất, scroll horizontal, CTA “Xem tất cả”.
• Filter bar:
  • Loại bài: Final test, Assignment, Online test, Vocabulary, Dictation, Streak, Giờ học.
  • Trạng thái: Active, Pending, Revoked.
  • Khóa học: dropdown.
• Badge card:
  • Icon/visual (màu/gradient theo loại).
  • Tên huy hiệu + hạng (nếu có).
  • Khóa học nguồn.
  • Ngày chốt.
  • Trạng thái (badge chip: active/pending/revoked).
  • Progress bar cho streak/giờ học ongoing.
  • CTA: Xem chi tiết khóa/Leaderboard (read-only).
• Empty state: “Chưa có thành tích” + CTA về Home/Courses/Practice.

Logic / Rules

• Data source: snapshot chốt từ các khóa (H+7 hoặc theo config); lưu ruleVersion.
• Đây là nguồn hiển thị huy hiệu cross-course duy nhất; All-courses không render achievement badges.
• Privacy: chỉ hiển thị huy hiệu cá nhân; ẩn danh sách lớp khác; toggle public/private.
• Ordering: mặc định mới nhất; sort theo hạng/loại/thời gian.
• Metadata: courseId, category, rank, participantsCount, defeatedCount, closedAt, seriesId, ruleVersion, status.
• Revoked: đánh dấu revoked, ẩn khỏi view chính, có lý do.
• Linking: từ Home leaderboard pulse strip/Leaderboard snapshot → mở đúng huy hiệu; từ Course Detail → mở huy hiệu của khóa đó.

UI / Behavior

• Header: Summary cards (4 chip) + History strip (horizontal scroll).
• Peer Comparison: Gradient card, grid 4 columns (Streak/Giờ học/Huy hiệu/Leaderboard), Top X% badges.
• Gamification Roadmap: Tier icons (Gold/Platinum), progress bar, step cards with states (green/brand/grey).
• Filter bar: Chips + dropdown, sticky trên scroll.
• Grid: 3–4 cột (Desktop), 1 cột (Mobile); cards bo góc lớn, không shadow mặc định.
• Badge card hover: border brand, tooltip chi tiết rule.
• Progress badges: Streak/Giờ học có progress bar + target.
• State badges: Active = brand color, Pending = neutral, Revoked = red + strikethrough.
• Deeplink: từ Home/notification → scroll + highlight 5s.

flowchart LR
    classDef green fill:#00332c,stroke:#00b894,color:#e6fffa,rx:8;
    classDef blue fill:#0c2d48,stroke:#0984e3,color:#e3f2fd,rx:8;
    classDef grey fill:#2c3e50,stroke:#8b9bb4,color:#ecf0f1,rx:8;

    Home["Home Leaderboard Pulse Strip"] --> Achievements["Achievements Page"]
    Leaderboard["Leaderboard Snapshot"] --> Achievements
    CourseDetail["Course Detail"] --> Achievements
    Achievements --> Detail["Badge Detail / Leaderboard"]

    class Home,Leaderboard,CourseDetail grey;
    class Achievements blue;
    class Detail green;

Notes

• Prototype: ../Prototypes/CM_Course_Achievements_Concept.html.
• Đồng bộ Token với Certificates và Home (cùng styling summary cards, filter bar).
• Cross-reference: ../../CM_Course_Achievements.md (spec gốc).

Change log

• 2026-02-11: Chốt phạm vi dữ liệu nhiều nguồn và vai trò source-of-truth cho huy hiệu cross-course (không hiển thị ở All-courses).
• 2026-01-20: [FEATURE] Thêm Peer Comparison section (Top X% stats), Gamification Roadmap (tier progress Gold→Platinum, step goals). Update summary bar thêm Giờ học tuần.
• 2026-01-19: Khởi tạo concept Achievements cho Profile, đồng bộ với Home pulse strip.