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

Purpose

• Giảm time-to-find-next-task bằng Home ưu tiên Worklist (Cognitive Load).
• Tăng cảm giác kiểm soát và tiến bộ qua CTA rõ ràng (SDT).

Elements / Scope

• Layout 2 cột: Trái = Main Zone (Search Omni-Bar → Worklist → Active Courses → Action Grid); Phải = Companion (Recap → Makeup Alert → Weekly Goal → Mini Cal → Social).
• Global header (không sidebar); menu: Quản lý khóa học active.
• Smart Search Omni-Bar (Top Priority): Thanh tìm kiếm lớn đóng vai trò “Command Center”, tích hợp Suggestion Chips để gợi ý hành động ngay lập tức.
• Unified Worklist: Trung tâm điều phối việc cần làm, chia tab rõ ràng: Quan trọng (Urgent), Học tập (Learning), Lên lịch (Schedule). Hỗ trợ Quick Action per item.
• Active Courses v2: Hiển thị dạng Cards “Glanceable” (Liếc là thấy), không cần hover. Show trực tiếp “Next Step” và progress tuần.
• Action Grid (Explore): Khu vực khám phá các tiện ích: Booking, Mock Test, Library, Rewards.
• Learning Journey Summary: Widget tổng quan (Số khóa đã học, Số bài tập đã làm) thay thế cho Global Streak.
• Companion Sidebar:
  • Recap Widget: Tóm tắt buổi học vừa xong + Link Video/Slide.
  • Makeup Alert: Cảnh báo lịch học bù.
  • Weekly Goal: Thay thế Streak tổng, tập trung vào mục tiêu tuần (3/5 sessions).
  • Social Widget: Avatar bạn học chung lớp tiếp theo (giảm cảm giác cô đơn).
  • Leaderboard Pulse Strip: Info nhỏ cập nhật tăng/giảm hạng và huy hiệu mới từ nhiều leaderboard.
• Notification dropdown nhỏ (deadline/điểm/lịch) thay vì block riêng; urgent banner/toast vẫn dùng khi cần.
• AI-First Personalization: Assistant suggest dựa trên data thực tế; After-flow modules bật/tắt per-user.
• Out of scope: trạng thái đặc biệt (expired/cancelled/refund).

Thành phần & ý tưởng chi tiết

• Smart Search Omni-Bar (The Command Center)

  • Vị trí: Top đầu trang, chiếm trọn chiều ngang (hoặc nổi bật nhất).
  • Mục tiêu: Nơi Action bắt đầu. Thay vì user phải tìm nút, họ gõ hoặc chọn gợi ý.
  • Suggestion Chips: Ngay dưới thanh search, hiển thị 3-4 chip gợi ý dựa trên ngữ cảnh (VD: “Làm bài tập về nhà”, “Xem lịch tuần này”, “Vào lớp ngay”).
  • Behavior: Smart Intent Detection (như đã định nghĩa ở v3).

• Unified Worklist (Action Hub)

  • Mục tiêu: User nắm bắt việc cần làm mà không cần browsing.
  • Tabs:
    • Quan trọng: Banner lớp sắp bắt đầu (< 30p), Deadline gấp, Form hành chính bắt buộc (Feedback, Profile).
    • Học tập: Bài đang làm dở (Continuity), Bài tập về nhà (Due date), Bài được GV/AI assign riêng.
    • Lên lịch: Các lớp học tiếp theo trong tuần, Lớp học bù.
  • Quick Actions: Trên mỗi item có nút hành động trực tiếp (VD: Resume cho bài dở, Join cho lớp học, Submit cho form).

• Active Courses v2 (Glanceable Cards)

  • Mục tiêu: Tổng quan nhanh tình trạng các khóa đang học (Active only).
  • Design: Card hiển thị trực diện các thông tin quan trọng, không dùng hover-to-reveal.
  • Info:
    • Tên khóa + Mã lớp.
    • Progress: Thanh % hoàn thành khóa.
    • Next Step: Dòng text highlight bài tiếp theo (VD: “Unit 5: Relative Clauses”).
    • Streak: Streak riêng của từng khóa (tạo động lực cụ thể).

• Explore Grid (Action Grid)

  • Mục tiêu: Cung cấp các lựa chọn hành động mở rộng (Discovery).
  • Layout: Grid các thẻ nhỏ icon đẹp mắt.
  • Items: 📅 Đặt lịch 1-1 / 📝 Thi thử Mock Test / 📚 Kho Tài liệu / 💎 Đổi quà (Rewards).

• Learning Journey Summary (Bento Grid)

  • Mục tiêu: Trả lời câu hỏi “Tôi học có đều không?” (Consistency) và “Tôi đã đạt được gì?” (Achievement).
  • Layout: Bento Grid (Lưới ô) hiện đại.
  • Groups:
    • Current Efforts (Hiện tại):
      • Attendance Rate: Vòng tròn % chuyên cần buổi học.
      • Assignment Ratio: Thanh tiến độ (Done/Assigned).
      • Activity Heatmap: Biểu đồ nhiệt kiên trì (Github-style).
    • Course History (Quá khứ):
      • Big Numbers: Tổng số khóa hoàn thành | Tổng bài tập đã làm.
      • Lifetime Stats: Tổng số buổi đi học lũy kế | GPA trung bình.
    • Pipeline (Tương lai): Chặng tiếp theo & Mục tiêu đạt Band.

• Companion Sidebar (Right Column)

  • Mode 1: Focus Context (Tab Tiêu điểm):
    • Alert Zone: “Lịch học bù” (Urgent Card), “Hoàn thiện hồ sơ” (Profile Booster).
    • Lifestyle: Widget “Tử vi học tập” (Daily Forecast - Fun fact).
    • Action Center: Nút “Xin nghỉ phép” (Quick Absence), “Chat hỗ trợ” (Support).
  • Mode 2: Study Context (Tab Học tập):
    • Social Learning: Widget “Xu hướng học tập” (Ranking bài tập đang Hot).
    • Streak: Widget “Chuỗi kỷ lục” (Highest Streak - Cá nhân).
    • Leaderboard: Widget “Bảng xếp hạng” (Vị trí hiện tại/Khoảng cách Top).
    • New Badge: Widget “Huy hiệu mới” (Visual Glow).
    • Certificate: Widget “Chứng chỉ mới nhất” (Tải về/Chia sẻ).
    • Recap: Widget “Lớp vừa xong” (Summary & Video).
  • Mode 3: Schedule Context (Tab Lịch trình):
    • Logistics: “Lịch tháng” (Mini Calendar).
    • Social & Prep: Avatar “Bạn học lớp tới” (Classmates), Widget “Chuẩn bị bài” (Prep Materials).

• Notification

  • Loại: Urgent (deadline/đổi lịch), Academic (điểm/feedback), Social (tắt mặc định).
  • Giao diện: dropdown nhỏ; banner/toast cho urgent “Lớp bắt đầu trong 30’ – Join”; tôn trọng quiet hours/timezone; hành động bấm → deeplink đúng context.

• Personalization

  • Home settings bật/tắt Calendar/Recap/Insights/Leaderboard snapshot; trạng thái lưu per-user, đồng bộ đa thiết bị; mặc định Worklist-first.
  • First-run: tooltip onboarding về tùy chỉnh module, tránh overload.

• Dữ liệu & liên kết flow

  • SSOT Activity từ CM_Course_Activity_Model.md; ưu tiên dữ liệu đang học.
  • Worklist/Calendar/Next class/Recap cùng khai thác sessions/tasks/tests; tránh trùng lặp tính toán.
  • Achievements/Leaderboard đọc log hoàn thành, streak, điểm, huy hiệu; Recent result đọc test mới nhất.
  • Pulse strip đọc event rank_up/rank_down/badge_earned/rank_locked và deeplink đến Achievements hoặc leaderboard read-only.

Notification Logic

• Loại: Urgent (deadline, đổi lịch), Academic (điểm/feedback), Social (nội bộ lớp, tắt mặc định).
• dueAt-driven: banner/toast “Lớp bắt đầu trong 30’ – Join” (tôn trọng quiet hours/timezone).
• Preference: bật/tắt từng loại; mặc định bật Next class, tắt Social.
• Giao diện: dropdown nhỏ từ header + banner khi khẩn.

Feedback Loop Logic

• Mục tiêu: Giảm time-to-correct-error.
• Hiển thị: card nhỏ trong Companion (Recent result) khi có bài mới chấm xong.
• Nội dung: Điểm/tóm tắt + CTA “Xem feedback chi tiết”.

Context-Aware Visual Adaptation

• Concept: Giao diện “Thở” cùng nhịp sinh học của học viên.
• States:
  • Pre-Class: Sidebar tự động chuyển sang tab “Lịch trình” (Để hiện tài liệu Prep).
  • Post-Class: Sidebar tự động chuyển sang tab “Học tập” (Để hiện Recap).
  • Time-based: Background hoặc Greeting thay đổi theo Sáng/Chiều/Tối để tạo cảm giác gần gũi.

Quick Course View

• Cho phép “Peeking” (nhìn lén) vào nội dung khóa học từ Home.
• Hiển thị: Syllabus tóm tắt, 3 chặng tiếp theo, số buổi đã điểm danh.
• Mục đích: Giảm việc phải điều hướng qua lại giữa Home và Course Detail.

Unified Worklist Architecture (Visual Structure)

• Design Metaphor: “Phễu Lọc” (Action Funnel).
• Unified Context Tabs (Synced Workspaces):
  • Tab 1: Tiêu điểm (Focus):
    • Visual: Màu nhấn Đỏ/Cam (Urgency). Badge số lượng việc cần làm ngay.
    • Worklist Items: Card “Lớp học đang diễn ra” (nút Vào lớp ngay pulsating), Task “Hạn chót hôm nay”.
    • Sidebar Sync: Flash Alerts (Thông báo khẩn) & Quick Actions (Xin nghỉ, Báo cáo).
  • Tab 2: Học tập (Study):
    • Visual: Màu chủ đạo Xanh Brand (Focus).
    • Worklist Items: Card “Đang thực hiện” (Progress bar), List “Bài tập về nhà” (xếp theo Due Date).
    • Sidebar Sync: Growth Metrics (Biểu đồ tuần, Streak lửa) & Achievements (Badge mới nhận).
  • Tab 3: Lịch trình (Schedule):
    • Visual: Màu Neutral/Xám (Planning).
    • Worklist Items: Timeline “Lịch học sắp tới”, Slot “Lớp học bù”.
    • Sidebar Sync: Mini Calendar (Lịch tháng) & Booking Tool (Đặt lịch/Đổi lịch).
• Dynamic View Sync: Chuyển Tab Worklist -> Sidebar tự động trượt (Slide) sang nhóm Widget tương ứng.
• Micro-Interaction: Chuyển tab mượt mà (Slide effect), sidebar transition đồng bộ.

Work item anatomy

• Icon theo activityType để nhận diện nhanh (Hick’s Law).
• title + activityType + skill (nếu có).
• course (tên khóa) để giữ ngữ cảnh.
• reason giải thích vì sao ưu tiên.
• Badge Bắt buộc khi required=true.
• CTA theo state: Start/Resume/Join.
• Deeplink: tới đúng tab/page chứa task.

Visual Logic & Rules (UI Guidelines)

• Nguyên tắc “Less is More”:
  • Ẩn các trạng thái “Không có gì” (Empty States) bằng các hình ảnh vui vẻ (Delightful Illustration).
  • Sidebar: Chỉ hiện tab khi số lượng widget > 4.

1. Color System

• State Colors (Trạng thái):
  • Urgent / Deadline: Sử dụng màu nóng (Đỏ/Cam) để tạo cảm giác khẩn cấp nhưng không gây panic.
  • Learning / In-Progress: Sử dụng màu Brand chủ đạo để định hướng hành động chính.
  • Success / Completed: Sử dụng màu Xanh lá để báo hiệu trạng thái tích cực.
• Backgrounds: Sử dụng nền sáng, sạch sẽ, tách biệt rõ ràng giữa các khối nội dung.

2. Typography & Hierarchy

• Widget Headers: Font Size lớn, Bold để phân tách rõ các khối.
• Card Titles: Font Size trung bình, weight Medium để dễ đọc.
• Meta-data (Date/Time): Font nhỏ, màu Neutral để không tranh chấp với nội dung chính.

3. Iconography & Indicators

• Icons: Sử dụng bộ Phosphor Icons.
  • Active State: Weight Fill hoặc Duotone.
  • Inactive/Action: Weight Regular.
• Continuity Indicators:
  • Progress Bar màu nổi bật kích thích user hoàn thành nốt (“Zeigarnik Effect”).

Action-Based Quick Search (Action Engine v3)

Detailed Spec: CM_FEATURE_Smart_Search

Concept: Chuyển đổi từ thanh tìm kiếm thụ động sang Operational Control Interface (Giao diện điều khiển tác vụ), hoạt động dựa trên 3 trụ cột chính:

1. Proactive Engine (Gợi ý chủ động - Zero State)

Ngay khi mở (chưa gõ phím), hệ thống tự động đề xuất dựa trên ngữ cảnh:

• Urgency: “Bài tập về nhà sắp hết hạn” (Ưu tiên P0).
• Momentum: “Tiếp tục bài Speaking đang làm dở” (Trạng thái Resume).
• Insight: “Ôn tập từ vựng Unit 3” (Dựa trên lỗi sai gần đây).

2. Hybrid AI Ecosystem (2 Levels)

Hệ thống không chỉ tìm kiếm mà còn “trả lời” ngay lập tức:

• Level 1 - Inline Insight: Hiển thị Widget snapshot ngay trong bảng search (e.g., “Thống kê quá trình” -> Hiện biểu đồ Radar & Heatmap).
• Level 2 - Floating Tutor: Khi cần hỏi sâu, chuyển sang chế độ Chat Portal (Lơ lửng) để giữ ngữ cảnh bài học.

3. Intelligent Execution (Verb-Object Structure)

Hiểu lệnh chính xác thông qua phân tích cú pháp Động từ + Đối tượng:

• Input: “Làm” + “Bài tập” -> Lọc list Homework.
• Input: “Báo” + “Nghỉ” -> Mở form xin phép.

Intent Keywords Mapping (Examples):

Intent Keywords	Resource Type	Results
làm ..., homework, luyện	Activity (Assignment/Exercise)	Bài tập chưa hoàn thành, ưu tiên due gần
xem ..., recap, tóm tắt	Session Summaries	Recap buổi học gần đây
thi ..., test, kiểm tra	Activity (Mock/Test)	Mock tests available, test sắp tới
học ..., vocabulary	Vocabulary modules	Vocab exercises, flashcards
xem ..., lịch, schedule	Schedule/Sessions	Upcoming classes, next session
báo ..., nghỉ, absence	Activity (Request)	Mở form xin nghỉ phép (Functional)
hỏi ..., chat, tại sao	AI Assistant	Trigger Floating AI Tutor

Examples:

User gõ: "Làm" (Verb)
→ Gợi ý Prefix:
  [Làm] bài tập về nhà
  [Làm] bài kiểm tra

User chọn "Làm bài tập về nhà":
→ Kết quả (Prioritized):
  1. 📝 Writing Task 2 - Due Today (Urgent)
  2. 📝 Reading Practice - In Progress (Momentum)
  3. 📝 Vocabulary Unit 5 - New

Calendar / Recap / Insights / Leaderboard guardrails

• Mini calendar: 7 ngày; click → deeplink Schedule.
• Last session recap: 1 buổi gần nhất có summary.
• Insights: micro (1–3), nằm trong vùng Achievements cùng biểu đồ.
• Leaderboard snapshot: động lực phụ; gamification nhẹ; ẩn nếu thiếu dữ liệu hoặc user tắt.
• Leaderboard pulse strip: chỉ hiển thị tóm tắt trạng thái mới (thăng/giảm hạng/huy hiệu), không thay thế trang Achievements.
• All-courses: không hiển thị achievement badge; Home chỉ giữ vai trò “thông báo + deeplink”.

flowchart TD
  classDef green fill:#00332c,stroke:#00b894,color:#e6fffa,rx:8,ry:8;
  classDef blue fill:#0c2d48,stroke:#0984e3,color:#e3f2fd,rx:8,ry:8;
  classDef yellow fill:#422a00,stroke:#fdcb6e,color:#fffde7,rx:8,ry:8;
  classDef grey fill:#2c3e50,stroke:#8b9bb4,color:#ecf0f1,rx:8,ry:8;

  Start["Home load"] --> Input["Input\nActivity[]"] --> Filter["Filter\nActionable"] --> Rank["Rank\nNext Best Action"] --> Group["Group\nToday/Continue/This week"] --> Render["Render\nWorklist"] --> Click["Click CTA"] --> DeepLink["Deeplink\nTo tab/page"]
  class Start,Input,Render grey;
  class Filter yellow;
  class Rank,Group blue;
  class Click,DeepLink green;

UI / Behavior

• Search First: Thanh Omni-Bar luôn focus hoặc nổi bật nhất khi vào trang.
• Worklist Tabs: Switch qua lại giữa 3 context (Urgent / Learning / Schedule). Empty state của mỗi tab sẽ gợi ý hành động tương ứng (VD: Empty Urgent -> “Bạn đang làm rất tốt, không có việc gấp!”).
• Course Cards: Click vào Card -> Vào Course Detail. Click vào nút “Next Step” -> Vào thẳng bài học.
• Companion: Sticky khi scroll để luôn hiển thị thông tin bổ trợ.
• Highlighting: Dùng màu sắc (Tokens Warning/Error) cho các thẻ Makeup Class hoặc Urgent Deadline. Các thẻ thông thường dùng màu Neutral.
• Empty states: không task → gợi ý practice/Courses; không khóa → gợi ý đăng ký; biểu đồ thiếu data → placeholder/skeleton.
• Edge cases: after flow tắt toàn bộ; nhiều khóa; thiếu data leaderboard/insights; timezone lệch; tải chậm có skeleton.

Notes

• Prototype: ../Prototypes/CM_Course_Home_Concept.html.
• Deeplink demo: Worklist → CM_Course_Detail_Concept.html?courseId=...&activityId=...; Next class → CM_Course_Focus_Flow_Concept.html; Calendar/Recap → CM_Course_Schedule_Concept.html; Leaderboard → CM_Course_Achievements_Concept.html.
• Prototype nên cover flow End-to-end: Home (Worklist + after flow tùy chỉnh) → Courses list → Course Detail → Activity complete → quay lại Home với state mới.

Change log

• 2026-02-11: Đồng bộ quyết định mới: thêm Leaderboard Pulse Strip (tăng/giảm hạng + huy hiệu mới), làm rõ guardrail Home vs Achievements vs All-courses.
• 2026-01-21: [REFINEMENT] Nâng cấp Assistant với AI Proactive Insight. Cải thiện QuickSearch với floating shards. Thêm Milestone Track cho Course Peek. Cập nhật chi tiết concept và UX behavior.
• 2026-01-20: [FEATURE] Action-Based Quick Search (Command Palette) - Intent Detection, Keyword Mapping, Smart Prioritization.
• 2026-01-20: [FEATURE] Thêm Goal Setting Widget (progress ring, weekly targets), Quick Actions Panel (4 shortcuts). Fix leaderboard link → Achievements page. Fix chart bars bottom-up. KPI cards clickable.
• 2026-01-20: Cập nhật layout 2 cột, Achievements (KPI/Streak/Goal), Leaderboard snapshot tách riêng, Companion modules, badge strip vị trí, DS token màu, quick search inline.
• 2026-01-19: Bổ sung cá nhân hoá after flow, notification dueAt, gamification nhẹ leaderboard, edge case prototype.
• 2026-01-18: Khởi tạo concept Home theo Worklist-first.