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

Quản lý khóa học - Home Concept (Option 2 - Layered Architecture)

Purpose (Psychological & Functional Goals)

• Sense of Mastery (SDT): Tăng cảm giác kiểm soát lộ trình thông qua việc phân loại rõ rệt (Classification Hub).
• Continuity Momentum: Giảm ma sát khi bắt đầu lại một tác vụ dang dở (Continuity Engine).
• Reduced Anxiety: Chuyển đổi từ “Tất cả bài tập” thành “Bài tập ngay bây giờ” (Layered Architecture).

Moments of Friction vs. UI Solutions

Friction (Điểm ma sát)	UI Concept Solution (Giải pháp)
Không biết nên bắt đầu khóa nào trước	Classification Hub + NBA Button (Next Best Action).
Quên mất bài tập đang làm dở từ hôm qua	Continuity Hub (Layer 5) ghim bài đang làm lên đầu.
Cảm giác bị ngợp bởi quá nhiều thông báo	Layered Z-axis (Chỉ hiện thông tin cần thiết nhất ở Layer 1).

---

AI Proactive Assistant Scenarios

Hệ thống không chỉ hiển thị dữ liệu, mà còn thấu hiểu ngữ cảnh học tập.

• Scenario 1 (Resuming): “Alex, bạn còn 15 phút là hoàn thành bài Reading Unit 4. Tiếp tục luôn nhé?” -> CTA: Tiếp tục.
• Scenario 2 (Optimization): “Hôm nay bạn có 2 bài Assignment. Hãy hoàn thành bài Writing trước vì nó cần nhiều sự tập trung nhất.” -> CTA: Làm ngay.
• Scenario 3 (Momentum): “Bạn đã học 5 ngày liên tục! Hãy giữ lửa bằng một bài Quiz từ vựng nhanh 2 phút.” -> CTA: Bắt đầu.
• Layered Architecture: Hệ thống phân tầng 6 lớp (Attention → Proactive → Performance → Operational → Continuity → Companion).
• Proactive Assistant: Module AI gợi học tập cá nhân hóa & Smart Search Palette.
• Classification Hub: Widget phân loại trạng thái bài học (In-progress, Upcoming, Completed).
• Tabbed Worklist: Phân loại tác vụ theo mức độ ưu tiên: Quan trọng, Học tập, Lên lịch.
• Action Sliders: Danh sách cuộn ngang cho các nhóm đầu việc (Final Test, Assignment).
• Continuity Engine: Quy chuẩn rank kết quả tìm kiếm và đề xuất NBA (Next Best Action).
• Companion Sidebar: Widget bổ trợ (Makeup, Recent Results, Mini Calendar).

---

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

1. UrgentNotificationBanner (Layer 1: Attention)

• Mục tiêu: Phát tín hiệu về các tác vụ có thời hạn cực ngắn hoặc các thay đổi quan trọng từ giảng viên.
• Anatomy: Icon (Alert) + Message + Timer Count + NBA Button (Primary).
• Behavioral Logic: Chỉ xuất hiện khi có deadline < 2h hoặc Mentor vừa gửi Feedback mới. Sử dụng hiệu ứng Pulse nhẹ ở viền để thu hút sự chú ý mà không gây khó chịu.
• Tokens: fill-danger-subtle, text-danger-bold, radius-full.

2. WeeklyLearningSnapshot (Layer 2: Proactive)

• Mục tiêu: Bảng tóm tắt tiến độ tuần và gợi ý AI để tối ưu hóa lộ trình.
• Anatomy: Progress Bar (Circular) + AI Message + Target Hours.
• States:
  • On-Track: Hiển thị thông điệp khích lệ.
  • Behind: Gợi ý bài học ngắn nhất để “fill gap” tiến độ.
• Tokens: fill-ai-matte, border-ai-primary, blur-xl.

3. Classification Hub (Layer 3: Performance Controller)

• Mục tiêu: Giúp học viên nắm bắt nhanh “vị thế” hiện tại trong lộ trình học tập.
• UX Rationale: Áp dụng Goal Gradient Effect. Việc thấy rõ số lượng khóa “In-progress” và “Completed” thúc đẩy mong muốn hoàn thành những gì đã bắt đầu.
• Interaction: Khi hover vào Card In-progress, các bài học dang dở sẽ “nổi” (elevation) lên ở Layer 5.
• Hành vi: Đóng vai trò là controller cho Worklist bên dưới; cập nhật real-time theo dữ liệu LMS.
• Tokens: surface-card, radius-3xl, shadow-md.

4. Unified Worklist (Layer 4: Operational Center)

• Mục tiêu: Gom nhóm tác vụ theo “Mindset” của học viên tại từng thời điểm.
• UX Rationale: Hick’s Law. Thay vì hiển thị một danh sách dài, việc phân loại vào 3 Tab giúp học viên đưa ra quyết định nhanh hơn.
• Tabs Breakdown:
  • Quan trọng: Deadline gần, bài thi khẩn cấp.
  • Học tập: Các bài luyện tập đang làm dở (Continuity Engine).
  • Lên lịch: Lịch học sắp tới.
• Task Card Anatomy:
  • NBA Button: Nút Play rực rỡ kèm hiệu ứng pulse nếu lớp sắp bắt đầu.
  • Progress Dots: Dải dots syllabus. Hover vào dots để “Peeking” nội dung bài học.

5. Smart Search Portal (Layer 2.5: Command Palette)

• Mục tiêu: Giảm time-to-action xuống mức tối thiểu (Shortcut-first).
• Behavior: Ctrl+K kích hoạt overlay mờ; hỗ trợ tìm kiếm theo intent (làm bài, xem lịch).
• Shared Component: Sử dụng QuickSearch component với callback onFocusChange để đồng bộ hiệu ứng shrink (scale: 0.97) cho Dashboard.
• Continuity Engine: Tự động đưa các item in-progress lên top 1 trong danh sách kết quả (Momentum Guard).

6. Action Sliders & Continuity Hub (Layer 5: Momentum)

• Mục tiêu: Tối ưu diện tích màn hình mà vẫn đảm bảo tính “Actionable”.
• Hành vi: Cuộn ngang (Horizontal scroll) cho Final Test & Assignment; sử dụng mask fade ở cạnh phải.
• Continuity Logic: Các bài tập đang làm dở sẽ tự động được ghim vào slider đầu tiên của Tab Học tập.

7. Enhanced Companion Sidebar (Layer 6: Companion)

• Mục tiêu: Hỗ trợ học tập từ xa mà không làm gián đoạn luồng chính.
• Widgets: Makeup Helper, Recent Results, Mini Calendar.
• Interaction: Thu gọn/Mở rộng linh hoạt để tối ưu không gian cho Worklist.

---

Logic / Rules 🛠️

1. Ranking & Filtering

• Nguồn dữ liệu: Activity[] tổng hợp từ mọi khóa học.
• Urgency Rank: Urgent Banner > Tab Quan trọng > Tab Học tập.
• Filtering: Chỉ hiển thị items có trạng thái Available hoặc In-progress.

2. Day-0 & Empty States

• New Learner: Ẩn các Hub phức tạp; Hiển thị Discovery Zone với các khóa học gợi ý.
• Empty Tab: Hiển thị placeholder card với CTA “Khám phá thêm” hoặc “Thư giãn một chút”.

---

UI / Behavior 📱

1. Z-axis Layering

• Layer 1 (Attention): bg-fill-error-matte banner nổi bật trên cùng.
• Layer 2 (Proactive): Search Palette mở ra sẽ làm blur và shrink Dashboard bên dưới (scale: 0.97).
• Layer 3 (Operation): Worklist sử dụng bg-surface-card với border primary mảnh.

2. Micro-interactions

• Tab Switching: Chuyển tab mượt mà với AnimatePresence.
• Peeking Popover: Hiện nhanh syllabus khi hover dải progress dots.
• Keyboard Shortcuts: Hỗ trợ ENTER để chọn kết quả search bù và ESC để thoát.

---

Design Tokens Summary 🎨

Component	Background Token	Border/Text Token
Urgent Banner	bg-fill-error-matte	text-error
AI Assistant	bg-linear-ai-matte	border-ai
Course Card	bg-surface-card	border-primary
Progress Dots	bg-brand (active)	bg-neutral-subtle

---

Change log

• 2026-01-23: [HIGH-FIDELITY] Tái cấu trúc theo chuẩn benchmark CM_Concept_Course_Home.md.
• 2026-01-23: [REFINEMENT] Bổ sung chi tiết Goal/Rationale/Scenarios cho từng thành phần.
• 2026-01-22: [INITIAL] Khởi tạo Concept Option 2.