feat: Add Quiz Interactive feature - Phase 1 (Database + Backend)

- Database: quizzes, questions, quiz_attempts, quiz_summaries tables
- RLS policies for TA/student access control
- Backend API: generate, edit, send, submit, summary endpoints
- AI integration for quiz generation from recap content
- Fixed all security issues from code review
- Added checkSpaceMembership for student endpoints
- Prompt injection protection (topic validation)
- Quiz mutability check after attempts
- JSON parsing error handling
- API response format standardization
- Bulk insert optimization
- Added composite index for summaries

package-lock.json

@@ -64,7 +64,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -274,6 +273,29 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -1310,7 +1332,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1375,7 +1396,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1511,7 +1531,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -2069,7 +2088,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4001,7 +4019,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4082,7 +4099,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4092,7 +4108,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4148,7 +4163,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -4211,8 +4225,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -4736,7 +4749,6 @@
       "integrity": "sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -4890,7 +4902,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

scripts/log_hook.py

@@ -0,0 +1 @@
+# Placeholder

src/components/ta/QuizMockupOptionA.html

@@ -0,0 +1,758 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Quiz Mockup - Option A (Inline Quiz Generation)</title>
+  <style>
+    :root {
+      --primary: #3b82f6;
+      --primary-active: #2563eb;
+      --bg-surface: #ffffff;
+      --bg-surface-secondary: #f8fafc;
+      --bg-surface-tertiary: #f1f5f9;
+      --text-primary: #1e293b;
+      --text-secondary: #475569;
+      --text-muted: #94a3b8;
+      --border-primary: #e2e8f0;
+      --ta-red: #ef4444;
+      --ta-red-bg: rgba(239, 68, 68, 0.1);
+      --ta-amber: #f59e0b;
+      --ta-amber-bg: rgba(245, 158, 11, 0.1);
+      --ta-blue: #3b82f6;
+      --ta-blue-bg: rgba(59, 130, 246, 0.1);
+      --ta-green: #10b981;
+      --ta-green-bg: rgba(16, 185, 129, 0.1);
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: var(--bg-surface-secondary);
+      color: var(--text-primary);
+      line-height: 1.5;
+    }
+
+    .mockup-container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 40px 24px;
+    }
+
+    .mockup-header {
+      text-align: center;
+      margin-bottom: 40px;
+    }
+
+    .mockup-header h1 {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--primary);
+      margin-bottom: 8px;
+    }
+
+    .mockup-header p {
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+
+    .option-badge {
+      display: inline-block;
+      padding: 6px 16px;
+      background: var(--primary);
+      color: white;
+      border-radius: 20px;
+      font-size: 12px;
+      font-weight: 600;
+      margin-bottom: 16px;
+    }
+
+    /* Main Card Container */
+    .quiz-container {
+      background: var(--bg-surface-secondary);
+      border: 1px solid var(--border-primary);
+      border-radius: 12px;
+      overflow: hidden;
+      height: 800px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Header */
+    .quiz-header {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--border-primary);
+      background: var(--bg-surface-tertiary);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+    }
+
+    .quiz-header-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .quiz-icon {
+      width: 32px;
+      height: 32px;
+      background: var(--primary);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+    }
+
+    .quiz-title h3 {
+      font-size: 15px;
+      font-weight: 700;
+      margin: 0;
+    }
+
+    .quiz-title p {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    .quiz-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .quiz-btn {
+      padding: 6px 14px;
+      border-radius: 8px;
+      border: 1px solid var(--border-primary);
+      background: var(--bg-surface);
+      color: var(--text-secondary);
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .quiz-btn:hover {
+      border-color: var(--primary);
+      color: var(--primary);
+    }
+
+    .quiz-btn.primary {
+      background: var(--primary);
+      color: white;
+      border-color: var(--primary);
+    }
+
+    /* Score Summary Bar */
+    .score-bar {
+      padding: 16px 24px;
+      background: linear-gradient(135deg, var(--ta-blue-bg) 0%, rgba(59, 130, 246, 0.05) 100%);
+      border-bottom: 1px solid var(--border-primary);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+    }
+
+    .score-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .score-circle {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      background: var(--primary);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+    }
+
+    .score-number {
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .score-label {
+      font-size: 10px;
+      font-weight: 600;
+      opacity: 0.9;
+    }
+
+    .score-stats {
+      display: flex;
+      gap: 24px;
+    }
+
+    .stat-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .stat-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+    }
+
+    .stat-dot.correct { background: var(--ta-green); }
+    .stat-dot.wrong { background: var(--ta-red); }
+    .stat-dot.pending { background: var(--text-muted); }
+
+    .stat-text {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .stat-value {
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .stat-label {
+      font-size: 10px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+    }
+
+    .progress-bar {
+      width: 200px;
+      height: 8px;
+      background: var(--bg-surface);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--primary) 0%, var(--ta-green) 100%);
+      border-radius: 4px;
+      transition: width 0.3s;
+    }
+
+    .progress-text {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-left: 8px;
+    }
+
+    /* Quiz Content Area */
+    .quiz-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px;
+    }
+
+    .quiz-content::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .quiz-content::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .quiz-content::-webkit-scrollbar-thumb {
+      background: var(--border-primary);
+      border-radius: 10px;
+    }
+
+    /* Question Card */
+    .question-card {
+      background: var(--bg-surface);
+      border: 1px solid var(--border-primary);
+      border-radius: 12px;
+      padding: 20px 24px;
+      margin-bottom: 16px;
+      transition: all 0.2s;
+    }
+
+    .question-card:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    }
+
+    .question-header {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .question-number {
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      background: var(--bg-surface-tertiary);
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+
+    .question-text {
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1.5;
+      flex: 1;
+    }
+
+    .question-card.correct .question-number {
+      background: var(--ta-green-bg);
+      color: var(--ta-green);
+    }
+
+    .question-card.wrong .question-number {
+      background: var(--ta-red-bg);
+      color: var(--ta-red);
+    }
+
+    .question-card.pending .question-number {
+      background: var(--bg-surface-tertiary);
+      color: var(--text-muted);
+    }
+
+    /* Options */
+    .options-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .option-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      border: 1px solid var(--border-primary);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.2s;
+      background: var(--bg-surface-tertiary);
+    }
+
+    .option-item:hover {
+      border-color: var(--primary);
+      background: var(--ta-blue-bg);
+    }
+
+    .option-item.selected {
+      border-color: var(--primary);
+      background: var(--ta-blue-bg);
+    }
+
+    .option-item.correct-answer {
+      border-color: var(--ta-green);
+      background: var(--ta-green-bg);
+    }
+
+    .option-item.wrong-answer {
+      border-color: var(--ta-red);
+      background: var(--ta-red-bg);
+    }
+
+    .option-letter {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: var(--bg-surface);
+      border: 2px solid var(--border-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+
+    .option-item.correct-answer .option-letter {
+      background: var(--ta-green);
+      border-color: var(--ta-green);
+      color: white;
+    }
+
+    .option-item.wrong-answer .option-letter {
+      background: var(--ta-red);
+      border-color: var(--ta-red);
+      color: white;
+    }
+
+    .option-text {
+      flex: 1;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .option-feedback {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .feedback-icon {
+      font-size: 16px;
+    }
+
+    .feedback-correct {
+      color: var(--ta-green);
+    }
+
+    .feedback-wrong {
+      color: var(--ta-red);
+    }
+
+    /* Topic Badge */
+    .topic-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 12px;
+      background: var(--ta-amber-bg);
+      border-radius: 12px;
+      font-size: 11px;
+      color: var(--ta-amber);
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+
+    /* Footer */
+    .quiz-footer {
+      padding: 16px 24px;
+      border-top: 1px solid var(--border-primary);
+      background: var(--bg-surface-tertiary);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .footer-info {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .question-count {
+      font-size: 13px;
+      color: var(--text-muted);
+    }
+
+    .question-count strong {
+      color: var(--text-primary);
+    }
+
+    .footer-actions {
+      display: flex;
+      gap: 12px;
+    }
+
+    .action-btn {
+      padding: 10px 20px;
+      border-radius: 8px;
+      border: none;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-family: inherit;
+    }
+
+    .action-btn.secondary {
+      background: var(--bg-surface);
+      color: var(--text-secondary);
+      border: 1px solid var(--border-primary);
+    }
+
+    .action-btn.secondary:hover {
+      border-color: var(--primary);
+      color: var(--primary);
+    }
+
+    .action-btn.primary {
+      background: var(--primary);
+      color: white;
+    }
+
+    .action-btn.primary:hover {
+      background: var(--primary-active);
+    }
+
+    /* Explanation Box */
+    .explanation-box {
+      margin-top: 12px;
+      padding: 12px 16px;
+      background: var(--bg-surface-tertiary);
+      border-left: 3px solid var(--primary);
+      border-radius: 0 8px 8px 0;
+      font-size: 12px;
+      color: var(--text-secondary);
+      line-height: 1.6;
+    }
+
+    .explanation-title {
+      font-weight: 700;
+      color: var(--primary);
+      margin-bottom: 4px;
+      font-size: 11px;
+      text-transform: uppercase;
+    }
+
+    /* Responsive */
+    @media (max-width: 1024px) {
+      .mockup-container {
+        padding: 20px;
+      }
+
+      .score-bar {
+        flex-wrap: wrap;
+        gap: 16px;
+      }
+
+      .progress-bar {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="mockup-container">
+    <div class="mockup-header">
+      <span class="option-badge">OPTION A</span>
+      <h1>Inline Quiz Generation</h1>
+      <p>Quiz questions are generated immediately when recap is created. Users answer and see results instantly.</p>
+    </div>
+
+    <div class="quiz-container">
+      <!-- Header -->
+      <div class="quiz-header">
+        <div class="quiz-header-left">
+          <div class="quiz-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+            </svg>
+          </div>
+          <div class="quiz-title">
+            <h3>Quiz - Bài giảng hoy</h3>
+            <p>Machine Learning Basics</p>
+          </div>
+        </div>
+        <div class="quiz-actions">
+          <button class="quiz-btn">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+              <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+              <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+            </svg>
+            Xem lại
+          </button>
+          <button class="quiz-btn primary">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+              <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+            </svg>
+            Xuất kết quả
+          </button>
+        </div>
+      </div>
+
+      <!-- Score Summary Bar -->
+      <div class="score-bar">
+        <div class="score-left">
+          <div class="score-circle">
+            <span class="score-number">85</span>
+            <span class="score-label">/100</span>
+          </div>
+          <div class="score-stats">
+            <div class="stat-item">
+              <div class="stat-dot correct"></div>
+              <div class="stat-text">
+                <div class="stat-value">17</div>
+                <div class="stat-label">Đúng</div>
+              </div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-dot wrong"></div>
+              <div class="stat-text">
+                <div class="stat-value">3</div>
+                <div class="stat-label">Sai</div>
+              </div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-dot pending"></div>
+              <div class="stat-text">
+                <div class="stat-value">0</div>
+                <div class="stat-label">Chưa làm</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style="display: flex; align-items: center;">
+          <div class="progress-bar">
+            <div class="progress-fill" style="width: 100%;"></div>
+          </div>
+          <span class="progress-text">20/20 câu</span>
+        </div>
+      </div>
+
+      <!-- Quiz Content -->
+      <div class="quiz-content">
+        <!-- Question 1 - Correct -->
+        <div class="question-card correct">
+          <div class="topic-badge">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+            </svg>
+            Giới thiệu Machine Learning
+          </div>
+          <div class="question-header">
+            <div class="question-number">1</div>
+            <div class="question-text">Machine Learning là gì?</div>
+          </div>
+          <div class="options-list">
+            <div class="option-item">
+              <div class="option-letter">A</div>
+              <span class="option-text">Lập trình máy tính truyền thống</span>
+            </div>
+            <div class="option-item correct-answer">
+              <div class="option-letter">B</div>
+              <span class="option-text">Lĩnh vực nghiên cứu giúp máy tính học từ dữ liệu</span>
+              <div class="option-feedback feedback-correct">
+                <span class="feedback-icon">✓</span>
+                <span>Đúng</span>
+              </div>
+            </div>
+            <div class="option-item">
+              <div class="option-letter">C</div>
+              <span class="option-text">Viết code tự động hoàn chỉnh</span>
+            </div>
+            <div class="option-item">
+              <div class="option-letter">D</div>
+              <span class="option-text">Sử dụng database để lưu trữ thông tin</span>
+            </div>
+          </div>
+          <div class="explanation-box">
+            <div class="explanation-title">Giải thích</div>
+            Machine Learning (Học máy) là một nhánh của AI tập trung vào việc phát triển thuật toán cho phép máy tính học hỏi từ dữ liệu mà không cần được lập trình tường minh.
+          </div>
+        </div>
+
+        <!-- Question 2 - Wrong -->
+        <div class="question-card wrong">
+          <div class="topic-badge">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+            </svg>
+            Types of Learning
+          </div>
+          <div class="question-header">
+            <div class="question-number">2</div>
+            <div class="question-text">Loại nào KHÔNG phải là một dạng của Machine Learning?</div>
+          </div>
+          <div class="options-list">
+            <div class="option-item">
+              <div class="option-letter">A</div>
+              <span class="option-text">Supervised Learning</span>
+            </div>
+            <div class="option-item">
+              <div class="option-letter">B</div>
+              <span class="option-text">Unsupervised Learning</span>
+            </div>
+            <div class="option-item wrong-answer">
+              <div class="option-letter">C</div>
+              <span class="option-text">Manual Learning</span>
+              <div class="option-feedback feedback-wrong">
+                <span class="feedback-icon">✗</span>
+                <span>Sai</span>
+              </div>
+            </div>
+            <div class="option-item correct-answer">
+              <div class="option-letter">D</div>
+              <span class="option-text">Reinforcement Learning</span>
+              <div class="option-feedback feedback-correct">
+                <span class="feedback-icon">✓</span>
+                <span>Đáp án đúng</span>
+              </div>
+            </div>
+          </div>
+          <div class="explanation-box">
+            <div class="explanation-title">Giải thích</div>
+            "Manual Learning" không phải là một dạng của Machine Learning. Các dạng chính bao gồm: Supervised, Unsupervised, Semi-supervised, và Reinforcement Learning.
+          </div>
+        </div>
+
+        <!-- Question 3 - Pending -->
+        <div class="question-card pending">
+          <div class="topic-badge">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
+            </svg>
+            Data Preprocessing
+          </div>
+          <div class="question-header">
+            <div class="question-number">3</div>
+            <div class="question-text">Bước nào KHÔNG thuộc quá trình tiền xử lý dữ liệu?</div>
+          </div>
+          <div class="options-list">
+            <div class="option-item">
+              <div class="option-letter">A</div>
+              <span class="option-text">Xử lý giá trị thiếu (Missing values)</span>
+            </div>
+            <div class="option-item">
+              <div class="option-letter">B</div>
+              <span class="option-text">Chuẩn hóa dữ liệu (Normalization)</span>
+            </div>
+            <div class="option-item">
+              <div class="option-letter">C</div>
+              <span class="option-text">Mã hóa biến phân loại (Encoding)</span>
+            </div>
+            <div class="option-item">
+              <div class="option-letter">D</div>
+              <span class="option-text">Huấn luyện mô hình (Model Training)</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Footer -->
+      <div class="quiz-footer">
+        <div class="footer-info">
+          <span class="question-count">Tổng <strong>20</strong> câu hỏi</span>
+          <span style="color: var(--ta-green); font-weight: 600;">✨ Hoàn thành 100%</span>
+        </div>
+        <div class="footer-actions">
+          <button class="action-btn secondary">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+              <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+            </svg>
+            Làm lại
+          </button>
+          <button class="action-btn primary">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+              <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            Xem chi tiết
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

src/components/ta/QuizMockupOptionB.html

@@ -0,0 +1,797 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Quiz Mockup - Option B (Interactive Quiz Mode)</title>
+  <style>
+    :root {
+      --primary: #3b82f6;
+      --primary-active: #2563eb;
+      --bg-surface: #ffffff;
+      --bg-surface-secondary: #f8fafc;
+      --bg-surface-tertiary: #f1f5f9;
+      --text-primary: #1e293b;
+      --text-secondary: #475569;
+      --text-muted: #94a3b8;
+      --border-primary: #e2e8f0;
+      --ta-red: #ef4444;
+      --ta-red-bg: rgba(239, 68, 68, 0.1);
+      --ta-amber: #f59e0b;
+      --ta-amber-bg: rgba(245, 158, 11, 0.1);
+      --ta-blue: #3b82f6;
+      --ta-blue-bg: rgba(59, 130, 246, 0.1);
+      --ta-green: #10b981;
+      --ta-green-bg: rgba(16, 185, 129, 0.1);
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: var(--bg-surface-secondary);
+      color: var(--text-primary);
+      line-height: 1.5;
+    }
+
+    .mockup-container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 40px 24px;
+    }
+
+    .mockup-header {
+      text-align: center;
+      margin-bottom: 40px;
+    }
+
+    .mockup-header h1 {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--primary);
+      margin-bottom: 8px;
+    }
+
+    .mockup-header p {
+      font-size: 14px;
+      color: var(--text-muted);
+    }
+
+    .option-badge {
+      display: inline-block;
+      padding: 6px 16px;
+      background: linear-gradient(135deg, var(--ta-amber) 0%, #f97316 100%);
+      color: white;
+      border-radius: 20px;
+      font-size: 12px;
+      font-weight: 600;
+      margin-bottom: 16px;
+    }
+
+    /* Main Card Container */
+    .quiz-container {
+      background: var(--bg-surface-secondary);
+      border: 1px solid var(--border-primary);
+      border-radius: 12px;
+      overflow: hidden;
+      height: 800px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Header */
+    .quiz-header {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--border-primary);
+      background: var(--bg-surface-tertiary);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+    }
+
+    .quiz-header-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .quiz-icon {
+      width: 32px;
+      height: 32px;
+      background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+    }
+
+    .quiz-title h3 {
+      font-size: 15px;
+      font-weight: 700;
+      margin: 0;
+    }
+
+    .quiz-title p {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    .quiz-timer {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: var(--ta-red-bg);
+      border-radius: 8px;
+      color: var(--ta-red);
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    /* Empty State / Start Screen */
+    .quiz-start-screen {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px;
+      text-align: center;
+    }
+
+    .start-icon {
+      width: 120px;
+      height: 120px;
+      background: linear-gradient(135deg, var(--ta-blue-bg) 0%, rgba(59, 130, 246, 0.2) 100%);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 24px;
+    }
+
+    .start-icon svg {
+      width: 56px;
+      height: 56px;
+      color: var(--primary);
+    }
+
+    .start-title {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: 12px;
+    }
+
+    .start-description {
+      font-size: 14px;
+      color: var(--text-muted);
+      max-width: 400px;
+      margin-bottom: 32px;
+      line-height: 1.6;
+    }
+
+    .start-info-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+      margin-bottom: 32px;
+      width: 100%;
+      max-width: 500px;
+    }
+
+    .info-card {
+      padding: 20px 16px;
+      background: var(--bg-surface);
+      border: 1px solid var(--border-primary);
+      border-radius: 12px;
+      text-align: center;
+    }
+
+    .info-value {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--primary);
+      margin-bottom: 4px;
+    }
+
+    .info-label {
+      font-size: 11px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+
+    .start-btn {
+      padding: 16px 48px;
+      background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
+      color: white;
+      border: none;
+      border-radius: 12px;
+      font-size: 16px;
+      font-weight: 700;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.3s;
+      box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
+      font-family: inherit;
+    }
+
+    .start-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4);
+    }
+
+    /* Active Quiz Screen */
+    .quiz-active-screen {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    /* Progress Bar */
+    .quiz-progress-bar {
+      height: 4px;
+      background: var(--bg-surface-tertiary);
+      display: flex;
+      flex-shrink: 0;
+    }
+
+    .progress-segment {
+      flex: 1;
+      height: 100%;
+      background: var(--border-primary);
+      transition: background 0.3s;
+    }
+
+    .progress-segment.completed {
+      background: var(--ta-green);
+    }
+
+    .progress-segment.current {
+      background: var(--primary);
+    }
+
+    .progress-segment.pending {
+      background: var(--bg-surface-tertiary);
+    }
+
+    /* Question Card Area */
+    .question-area {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 32px 48px;
+      overflow-y: auto;
+    }
+
+    .question-card {
+      background: var(--bg-surface);
+      border: 1px solid var(--border-primary);
+      border-radius: 16px;
+      padding: 40px;
+      max-width: 600px;
+      width: 100%;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
+    }
+
+    .question-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24px;
+    }
+
+    .question-badge {
+      padding: 6px 14px;
+      background: var(--ta-amber-bg);
+      color: var(--ta-amber);
+      border-radius: 20px;
+      font-size: 11px;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+
+    .question-number-badge {
+      padding: 6px 14px;
+      background: var(--bg-surface-tertiary);
+      color: var(--text-muted);
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .question-text {
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 1.5;
+      margin-bottom: 32px;
+      color: var(--text-primary);
+    }
+
+    /* Options */
+    .options-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .option-card {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 18px 22px;
+      border: 2px solid var(--border-primary);
+      border-radius: 12px;
+      cursor: pointer;
+      transition: all 0.2s;
+      background: var(--bg-surface);
+    }
+
+    .option-card:hover {
+      border-color: var(--primary);
+      background: var(--ta-blue-bg);
+      transform: translateX(4px);
+    }
+
+    .option-card.selected {
+      border-color: var(--primary);
+      background: var(--ta-blue-bg);
+    }
+
+    .option-letter {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      background: var(--bg-surface-tertiary);
+      border: 2px solid var(--border-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 700;
+      color: var(--text-muted);
+      flex-shrink: 0;
+      transition: all 0.2s;
+    }
+
+    .option-card.selected .option-letter {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: white;
+    }
+
+    .option-text {
+      flex: 1;
+      font-size: 14px;
+      color: var(--text-secondary);
+      line-height: 1.5;
+    }
+
+    /* Quiz Footer */
+    .quiz-footer {
+      padding: 20px 32px;
+      border-top: 1px solid var(--border-primary);
+      background: var(--bg-surface);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .navigation-btn {
+      padding: 12px 24px;
+      border-radius: 10px;
+      border: 1px solid var(--border-primary);
+      background: var(--bg-surface);
+      color: var(--text-secondary);
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      transition: all 0.2s;
+      font-family: inherit;
+    }
+
+    .navigation-btn:hover:not(:disabled) {
+      border-color: var(--primary);
+      color: var(--primary);
+    }
+
+    .navigation-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .submit-btn {
+      padding: 12px 32px;
+      border-radius: 10px;
+      border: none;
+      background: linear-gradient(135deg, var(--ta-green) 0%, #059669 100%);
+      color: white;
+      font-size: 14px;
+      font-weight: 700;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      transition: all 0.3s;
+      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+      font-family: inherit;
+    }
+
+    .submit-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
+    }
+
+    /* Results Screen */
+    .results-screen {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px;
+      text-align: center;
+    }
+
+    .results-icon {
+      width: 100px;
+      height: 100px;
+      background: linear-gradient(135deg, var(--ta-green) 0%, #059669 100%);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 24px;
+      animation: pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+    }
+
+    .results-icon svg {
+      width: 48px;
+      height: 48px;
+      color: white;
+    }
+
+    .results-title {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: 8px;
+    }
+
+    .results-subtitle {
+      font-size: 14px;
+      color: var(--text-muted);
+      margin-bottom: 32px;
+    }
+
+    .score-display {
+      width: 180px;
+      height: 180px;
+      border-radius: 50%;
+      background: conic-gradient(var(--primary) 0deg, var(--bg-surface-tertiary) 0deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 32px;
+      position: relative;
+    }
+
+    .score-display::before {
+      content: '';
+      position: absolute;
+      width: 150px;
+      height: 150px;
+      background: var(--bg-surface);
+      border-radius: 50%;
+    }
+
+    .score-content {
+      position: relative;
+      z-index: 1;
+    }
+
+    .score-number {
+      font-size: 48px;
+      font-weight: 800;
+      color: var(--primary);
+      line-height: 1;
+    }
+
+    .score-text {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-top: 4px;
+    }
+
+    .results-stats {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+      margin-bottom: 32px;
+      width: 100%;
+      max-width: 500px;
+    }
+
+    .result-stat {
+      padding: 20px 16px;
+      background: var(--bg-surface);
+      border: 1px solid var(--border-primary);
+      border-radius: 12px;
+      text-align: center;
+    }
+
+    .result-stat-icon {
+      font-size: 24px;
+      margin-bottom: 8px;
+    }
+
+    .result-stat-value {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+
+    .result-stat-label {
+      font-size: 11px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      font-weight: 600;
+      margin-top: 2px;
+    }
+
+    .results-actions {
+      display: flex;
+      gap: 12px;
+    }
+
+    .action-btn {
+      padding: 14px 28px;
+      border-radius: 10px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-family: inherit;
+    }
+
+    .action-btn.secondary {
+      background: var(--bg-surface);
+      color: var(--text-secondary);
+      border: 1px solid var(--border-primary);
+    }
+
+    .action-btn.secondary:hover {
+      border-color: var(--primary);
+      color: var(--primary);
+    }
+
+    .action-btn.primary {
+      background: var(--primary);
+      color: white;
+      border: none;
+    }
+
+    .action-btn.primary:hover {
+      background: var(--primary-active);
+    }
+
+    /* Performance Badge */
+    .performance-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 16px;
+      background: var(--ta-green-bg);
+      border-radius: 20px;
+      color: var(--ta-green);
+      font-size: 13px;
+      font-weight: 600;
+      margin-bottom: 24px;
+    }
+
+    /* Responsive */
+    @media (max-width: 1024px) {
+      .mockup-container {
+        padding: 20px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="mockup-container">
+    <div class="mockup-header">
+      <span class="option-badge">OPTION B</span>
+      <h1>Interactive Quiz Mode</h1>
+      <p>Game-like experience with one question at a time, navigation controls, and final score submission.</p>
+    </div>
+
+    <div class="quiz-container">
+      <!-- Header -->
+      <div class="quiz-header">
+        <div class="quiz-header-left">
+          <div class="quiz-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
+            </svg>
+          </div>
+          <div class="quiz-title">
+            <h3>Quiz Challenge</h3>
+            <p>Machine Learning Basics</p>
+          </div>
+        </div>
+        <div class="quiz-timer">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="M12 6v6l4 2"/>
+          </svg>
+          15:00
+        </div>
+      </div>
+
+      <!-- Progress Bar -->
+      <div class="quiz-progress-bar">
+        <div class="progress-segment completed"></div>
+        <div class="progress-segment completed"></div>
+        <div class="progress-segment current"></div>
+        <div class="progress-segment pending"></div>
+        <div class="progress-segment pending"></div>
+        <div class="progress-segment pending"></div>
+        <div class="progress-segment pending"></div>
+        <div class="progress-segment pending"></div>
+        <div class="progress-segment pending"></div>
+        <div class="progress-segment pending"></div>
+      </div>
+
+      <!-- Active Quiz Screen -->
+      <div class="quiz-active-screen">
+        <!-- Question Area -->
+        <div class="question-area">
+          <div class="question-card">
+            <div class="question-card-header">
+              <span class="question-badge">Kiến thức cơ bản</span>
+              <span class="question-number-badge">Câu 3/10</span>
+            </div>
+
+            <div class="question-text">
+              Trong Supervised Learning, dữ liệu huấn luyện cần có đặc điểm gì quan trọng nhất?
+            </div>
+
+            <div class="options-grid">
+              <div class="option-card">
+                <div class="option-letter">A</div>
+                <span class="option-text">Phải có kích thước lớn hơn 1GB</span>
+              </div>
+              <div class="option-card selected">
+                <div class="option-letter">B</div>
+                <span class="option-text">Có nhãn (label) hoặc target variable</span>
+              </div>
+              <div class="option-card">
+                <div class="option-letter">C</div>
+                <span class="option-text">Chỉ chứa dữ liệu số</span>
+              </div>
+              <div class="option-card">
+                <div class="option-letter">D</div>
+                <span class="option-text">Phải được chuẩn hóa trước</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Footer Navigation -->
+        <div class="quiz-footer">
+          <button class="navigation-btn" disabled>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M15 19l-7-7 7-7"/>
+            </svg>
+            Previous
+          </button>
+          <div style="display: flex; gap: 12px;">
+            <button class="navigation-btn">
+              Next
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M9 5l7 7-7 7"/>
+              </svg>
+            </button>
+            <button class="submit-btn">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+              </svg>
+              Nộp bài
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Results Screen Section -->
+    <div style="margin-top: 60px;">
+      <div class="mockup-header" style="margin-bottom: 24px;">
+        <h2 style="font-size: 20px; color: var(--text-primary); margin-bottom: 8px;">Results Screen</h2>
+        <p style="font-size: 13px;">Hiển thị kết quả sau khi nộp bài</p>
+      </div>
+
+      <div class="quiz-container">
+        <div class="results-screen">
+          <div class="performance-badge">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            Xuất sắc!
+          </div>
+
+          <div class="score-display" style="background: conic-gradient(var(--ta-green) 306deg, var(--bg-surface-tertiary) 306deg);">
+            <div class="score-content">
+              <div class="score-number">85</div>
+              <div class="score-text">/ 100 điểm</div>
+            </div>
+          </div>
+
+          <h3 class="results-title">Hoàn thành tốt!</h3>
+          <p class="results-subtitle">Bạn đã làm rất tốt bài quiz về Machine Learning Basics</p>
+
+          <div class="results-stats">
+            <div class="result-stat">
+              <div class="result-stat-icon">✓</div>
+              <div class="result-stat-value">8.5</div>
+              <div class="result-stat-label">Đúng</div>
+            </div>
+            <div class="result-stat">
+              <div class="result-stat-icon">✗</div>
+              <div class="result-stat-value">1.5</div>
+              <div class="result-stat-label">Sai</div>
+            </div>
+            <div class="result-stat">
+              <div class="result-stat-icon">⏱️</div>
+              <div class="result-stat-value">12:34</div>
+              <div class="result-stat-label">Thời gian</div>
+            </div>
+          </div>
+
+          <div class="results-actions">
+            <button class="action-btn secondary">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+                <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+              </svg>
+              Làm lại
+            </button>
+            <button class="action-btn secondary">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+                <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+              </svg>
+              Xem chi tiết
+            </button>
+            <button class="action-btn primary">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+                <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+              </svg>
+              Xuất kết quả
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

src/components/ta/RecapWorkflow.jsx

@@ -27,6 +27,15 @@ const RecapWorkflow = (props) => {
   const [refineQuery, setRefineQuery] = useState('');
   const [selectedChips, setSelectedChips] = useState([]);
 
+  // Use deadlines from aiPreview if available, otherwise fall back to empty array
+  const deadlines = (aiPreview?.deadlines && Array.isArray(aiPreview.deadlines) && aiPreview.deadlines.length > 0)
+    ? aiPreview.deadlines
+    : [];
+
+  const renderMarkdown = (content) => {
+    return { __html: marked.parse(content || '') };
+  };
+
   const refineOptions = [
     { id: 'shorter', label: '✨ Ngắn gọn', prompt: 'Làm ngắn gọn lại, súc tích hơn.' },
     { id: 'funny', label: '✨ Hài hước', prompt: 'Viết lại với giọng văn hài hước, năng lượng hơn.' },
@@ -60,43 +69,6 @@ const RecapWorkflow = (props) => {
     }
   };
 
-  const renderMarkdown = (content) => {
-    return { __html: marked.parse(content || '') };
-  };
-
-  // Extract deadlines from summary content (look for homework/bài tập patterns)
-  const extractDeadlines = (content) => {
-    if (!content) return [];
-
-    // Tìm các dòng có từ khóa: bài tập, homework, deadline, nộp, due, assignment
-    const patterns = [
-      /[-•*]\s*.*?(?:bài tập|homework|assignment|deadline|hạn|nộp|due date|làm|chuẩn bị).*?(?:\n|$)/gi,
-      /[-•*]\s*(?:đóng|gửi|submit).*?(?:bài|file|nội dung).*?(?:\n|$)/gi,
-      /\d{1,2}[\/-]\d{1,2}(?:\/\d{2,4})?\s*[.:]\s*.+?[\n]/gi
-    ];
-
-    const deadlines = new Set();
-
-    for (const pattern of patterns) {
-      const matches = content.match(pattern);
-      if (matches) {
-        matches.forEach(match => {
-          const cleanMatch = match.trim()
-            .replace(/^[-•*]\s*/, '')
-            .replace(/\s+/g, ' ')
-            .slice(0, 150);
-          if (cleanMatch.length > 8 && cleanMatch.length < 151) {
-            deadlines.add(cleanMatch);
-          }
-        });
-      }
-    }
-
-    return Array.from(deadlines).slice(0, 5);
-  };
-
-  const deadlines = extractDeadlines(aiPreview?.content || '');
-
   return (
     <div className="animate-fade">
       <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: '24px', alignItems: 'start' }}>
@@ -182,7 +154,7 @@ const RecapWorkflow = (props) => {
 
         {/* Right Panel - Content Area */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
-          <div className="ta-card-premium" style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 140px)', overflow: 'hidden' }}>
+          <div className="ta-card-premium" style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 140px)', overflow: 'hidden', position: 'relative' }}>
 
             {/* Header */}
             <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border-primary)', background: 'var(--bg-surface-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
@@ -201,10 +173,14 @@ const RecapWorkflow = (props) => {
 
             {/* Processing Overlay */}
             {uploading && (
-              <div style={{ position: 'absolute', inset: 0, background: 'rgba(15, 23, 42, 0.9)', zIndex: 30, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'white' }}>
-                <Icons.FiCpu className="spin" size={56} color="var(--primary)" />
-                <h4 style={{ marginTop: '20px', fontWeight: 700, fontFamily: 'inherit', fontSize: '18px' }}>AI đang phân tích...</h4>
-                <p style={{ fontSize: '14px', color: 'rgba(255,255,255,0.85)', marginTop: '8px' }}>Đang đọc file và tạo tóm tắt bài giảng</p>
+              <div className="processing-overlay-card">
+                <div className="processing-card-content">
+                  <Icons.FiCpu className="spin" size={48} color="var(--primary)" />
+                  <div style={{ textAlign: 'center' }}>
+                    <h4 className="processing-card-title">AI đang phân tích...</h4>
+                    <p className="processing-card-text">Đang đọc file và tạo tóm tắt bài giảng</p>
+                  </div>
+                </div>
               </div>
             )}
 
@@ -258,7 +234,17 @@ const RecapWorkflow = (props) => {
                         <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                           {deadlines.map((deadline, idx) => (
                             <div key={idx} style={{ padding: '12px', background: 'var(--bg-surface-tertiary)', borderRadius: '8px', borderLeft: '3px solid var(--ta-amber)', fontSize: '13px', lineHeight: '1.5' }}>
-                              {deadline}
+                              <div style={{ fontWeight: 600, marginBottom: '4px' }}>{deadline.title || deadline}</div>
+                              {deadline.due_date && (
+                                <div style={{ fontSize: '11px', color: 'var(--text-muted)', marginTop: '4px' }}>
+                                  📅 {deadline.due_date}
+                                </div>
+                              )}
+                              {deadline.description && (
+                                <div style={{ fontSize: '12px', marginTop: '4px' }}>
+                                  {deadline.description}
+                                </div>
+                              )}
                             </div>
                           ))}
                         </div>

src/pages/TADashboard.css

@@ -355,6 +355,49 @@
   border-radius: 12px;
 }
 
+/* Processing overlay với card trắng (dành cho Recap Workflow) */
+.processing-overlay-card {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(147, 197, 253, 0.25) 100%);
+  backdrop-filter: blur(4px);
+  z-index: 100;
+  border-radius: 12px;
+}
+
+.processing-card-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 32px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
+}
+
+.processing-card-title {
+  margin: 0;
+  font-weight: 700;
+  font-size: 16px;
+  color: #1e3a8a;
+  font-family: inherit;
+}
+
+.processing-card-text {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: #4b5563;
+  font-family: inherit;
+}
+
 /* Toast Notification */
 .toast-container {
   position: fixed;

src/pages/TADashboard.jsx

@@ -144,14 +144,89 @@ const TADashboard = () => {
     const r = aiConfig.recap;
     const pronouns = r.pronouns || g.pronouns;
     return `[ROLE] Bạn là một Trợ Giảng (Teaching Assistant) xuất sắc.
-[OBJECTIVE] Phân tích nội dung buổi học và viết bài Recap chất lượng cao.
+[OBJECTIVE] Phân tích nội dung buổi học và trả về dữ liệu có cấu trúc gồm: tóm tắt bài giảng + danh sách deadline.
 [RULES]
 - Xưng hô bắt buộc: ${pronouns}.
 - Tone giọng: ${r.tone}.
 - Trọng tâm (Focus): ${r.highlight}.
 - Quy tắc chung:\\n${compileRules(g.rules)}\\n${g.instruction}
 - Quy tắc Recap:\\n${compileRules(r.rules)}\\n${r.instruction}
-[OUTPUT FORMAT] CHỈ xuất ra nội dung bài viết định dạng Markdown. TUYỆT ĐỐI KHÔNG kèm theo các câu giao tiếp của AI (như 'Đây là...', 'Vâng, tôi hiểu').`;
+[OUTPUT FORMAT] Bắt buộc trả về valid JSON với cấu trúc sau:
+{
+  "summary": "Nội dung tóm tắt bài giảng định dạng Markdown",
+  "deadlines": [
+    { "title": "Tên bài tập", "due_date": "YYYY-MM-DD hoặc mô tả ngày", "description": "Mô tả ngắn về yêu cầu" }
+  ]
+}
+TUYỆT ĐỐI KHÔNG thêm bất kỳ nội dung nào khác ngoài JSON (không có markdown code blocks, không có lời giải thích).`;
+  };
+
+  // Parse AI JSON response with fallback to text extraction
+  const parseAiRecapResponse = (aiContent) => {
+    if (!aiContent) return { summary: '', deadlines: [] };
+
+    // Extract deadlines from text using regex (for fallback)
+    const extractDeadlinesFromText = (content) => {
+      const patterns = [
+        /[-•*]\s*.*?(?:bài tập|homework|assignment|deadline|hạn|nộp|due date|làm|chuẩn bị).*?(?:\n|$)/gi,
+        /[-•*]\s*(?:đóng|gửi|submit).*?(?:bài|file|nội dung).*?(?:\n|$)/gi,
+        /\d{1,2}[\/-]\d{1,2}(?:\/\d{2,4})?\s*[.:]\s*.+?[\n]/gi
+      ];
+      const deadlines = new Set();
+      for (const pattern of patterns) {
+        const matches = content.match(pattern);
+        if (matches) {
+          matches.forEach(match => {
+            const cleanMatch = match.trim()
+              .replace(/^[-•*]\s*/, '')
+              .replace(/\s+/g, ' ')
+              .slice(0, 150);
+            if (cleanMatch.length > 8 && cleanMatch.length < 151) {
+              deadlines.add(cleanMatch);
+            }
+          });
+        }
+      }
+      return Array.from(deadlines).slice(0, 5);
+    };
+
+    try {
+      // Extract JSON from code blocks first (handle ```json ... ```)
+      let jsonStr = aiContent.trim();
+      const codeBlockMatch = aiContent.match(/```(?:json)?\s*([\s\S]*?)```/);
+      if (codeBlockMatch && codeBlockMatch[1]) {
+        jsonStr = codeBlockMatch[1].trim();
+      }
+
+      const parsed = JSON.parse(jsonStr);
+
+      // Validate structure
+      if (parsed.summary && Array.isArray(parsed.deadlines)) {
+        return {
+          summary: parsed.summary,
+          deadlines: parsed.deadlines
+            .filter(d => d?.title && d?.due_date)
+            .map(d => ({
+              title: d.title,
+              due_date: d.due_date,
+              description: d.description || ''
+            }))
+        };
+      }
+    } catch (e) {
+      // JSON parse failed, fall back to text extraction
+      console.warn('Failed to parse AI JSON response, using fallback extraction');
+    }
+
+    // Fallback: return raw content with extracted deadlines from text
+    return {
+      summary: aiContent,
+      deadlines: extractDeadlinesFromText(aiContent).map(text => ({
+        title: text,
+        due_date: '',
+        description: ''
+      }))
+    };
   };
 
   const buildAnnouncementPrompt = (p, c) => {
@@ -222,7 +297,10 @@ const TADashboard = () => {
         addToast('Đã giải quyết');
         fetchData();
       }
-    } catch (error) {}
+    } catch (error) {
+      console.error('handleResolveAlert error:', error);
+      addToast('Lỗi giải quyết cảnh báo', 'error');
+    }
   };
 
   const handleApproveSummary = async (draftId, spaceId, autoPilotData = null) => {
@@ -230,18 +308,26 @@ const TADashboard = () => {
     try {
       const activeContent = autoPilotData?.content || aiPreview?.content || '';
       const activeType = autoPilotData?.draft_type || aiPreview?.draft_type || '';
+      const activeDeadlines = autoPilotData?.metadata?.deadlines || aiPreview?.deadlines || [];
 
       if (aiPreview?.id === draftId) await taService.updateSummaryDraft(draftId, spaceId, { content: activeContent });
       const res = await taService.approveSummary(draftId, spaceId);
-      if (res.success && selectedSpaces.length > 1 && (!aiPreview || aiPreview.status === 'pending')) {
+      if (!res.success) {
+        console.error('Approve summary failed:', res);
+        throw new Error('API returned failure');
+      }
+      if (selectedSpaces.length > 1 && (!aiPreview || aiPreview.status === 'pending')) {
         const otherSpaces = selectedSpaces.filter(id => id !== spaceId);
         await Promise.all(otherSpaces.map(async (sid) => {
-          const newDraftRes = await taService.createSummaryDraft({ spaceId: sid, content: activeContent, draft_type: activeType });
+          const newDraftRes = await taService.createSummaryDraft({ spaceId: sid, content: activeContent, draft_type: activeType, metadata: { deadlines: activeDeadlines } });
           if (newDraftRes?.success) await taService.approveSummary(newDraftRes.data.id, sid);
         }));
       }
       addToast('Đã đăng bài!'); fetchData(); setAiPreview(null); setCurrentStep(1);
-    } catch (error) { addToast('Lỗi gửi bài', 'error'); } finally { setIsSending(false); }
+    } catch (error) {
+      console.error('handleApproveSummary error:', error);
+      addToast(error.message || 'Lỗi gửi bài', 'error');
+    } finally { setIsSending(false); }
   };
 
   const handleScheduleSummary = async (draftId, spaceId, scheduledAt, autoPilotData = null) => {
@@ -249,6 +335,7 @@ const TADashboard = () => {
     try {
       const activeContent = autoPilotData?.content || aiPreview?.content || '';
       const activeType = autoPilotData?.draft_type || aiPreview?.draft_type || '';
+      const activeDeadlines = autoPilotData?.metadata?.deadlines || aiPreview?.deadlines || [];
 
       if (aiPreview?.id === draftId) await taService.updateSummaryDraft(draftId, spaceId, { content: activeContent });
       const isoDate = new Date(scheduledAt).toISOString();
@@ -257,17 +344,25 @@ const TADashboard = () => {
       if (res.success && selectedSpaces.length > 1 && (!aiPreview || aiPreview.status === 'pending')) {
         const otherSpaces = selectedSpaces.filter(id => id !== spaceId);
         await Promise.all(otherSpaces.map(async (sid) => {
-          const newDraftRes = await taService.createSummaryDraft({ spaceId: sid, content: activeContent, draft_type: activeType });
+          const newDraftRes = await taService.createSummaryDraft({ spaceId: sid, content: activeContent, draft_type: activeType, metadata: { deadlines: activeDeadlines } });
           if (newDraftRes?.success) await taService.scheduleSummary(newDraftRes.data.id, sid, isoDate);
         }));
       }
       
       addToast('Đã đặt lịch!'); fetchData(); setAiPreview(null); setCurrentStep(1);
-    } catch (error) {} finally { setIsSending(false); }
+    } catch (error) {
+      console.error('handleScheduleSummary error:', error);
+      addToast(error.message || 'Lỗi đặt lịch', 'error');
+    } finally { setIsSending(false); }
   };
 
   const handleEditScheduled = (item) => {
-    setAiPreview(item);
+    // Normalize: add top-level deadlines from metadata for consistent extraction
+    const normalizedItem = {
+      ...item,
+      deadlines: item.metadata?.deadlines || []
+    };
+    setAiPreview(normalizedItem);
     setSelectedSpaces([item.space_id]);
     if (item.draft_type === 'lesson_recap') { setActiveTab('summary'); setCurrentStep(3); }
     else { setActiveTab('announcements'); }
@@ -283,7 +378,10 @@ const TADashboard = () => {
       }));
       addToast('Đã hủy lịch hàng loạt');
       fetchData();
-    } catch (e) {} finally { setIsSending(false); }
+    } catch (e) {
+      console.error('handleBulkCancel error:', e);
+      addToast('Lỗi hủy lịch hàng loạt', 'error');
+    } finally { setIsSending(false); }
   };
 
   const handleBulkSendNow = async (ids) => {
@@ -295,7 +393,10 @@ const TADashboard = () => {
       }));
       addToast('Đã gửi hàng loạt');
       fetchData();
-    } catch (e) {} finally { setIsSending(false); }
+    } catch (e) {
+      console.error('handleBulkSendNow error:', e);
+      addToast('Lỗi gửi hàng loạt', 'error');
+    } finally { setIsSending(false); }
   };
 
   const handleCancelSchedule = async (draftId, spaceId) => {
@@ -303,7 +404,10 @@ const TADashboard = () => {
       setIsSending(true);
       const res = await taService.cancelSchedule(draftId, spaceId);
       if (res.success) { addToast('Đã hủy lịch'); fetchData(); }
-    } catch (error) {} finally { setIsSending(false); }
+    } catch (error) {
+      console.error('handleCancelSchedule error:', error);
+      addToast('Lỗi hủy lịch', 'error');
+    } finally { setIsSending(false); }
   };
 
   const handleRefineAi = async (refineInstruction) => {
@@ -333,7 +437,10 @@ ${compileRules(g.rules)}
           addToast('Đã cập nhật bản thảo!');
         }
       } else { addToast('AI không phản hồi lệnh sửa', 'error'); }
-    } catch (error) { addToast('Lỗi hiệu chỉnh AI', 'error'); } finally { setIsAnalyzing(false); }
+    } catch (error) {
+      console.error('handleRefineAi error:', error);
+      addToast('Lỗi hiệu chỉnh AI', 'error');
+    } finally { setIsAnalyzing(false); }
   };
 
   const handleOpenCompose = async (snapshotId, spaceId) => {
@@ -344,7 +451,10 @@ ${compileRules(g.rules)}
         setCurrentContext({ id: snapshotId, space_id: spaceId, ...res.data, aiConfig, taName: user?.display_name });
         setIsComposeOpen(true);
       }
-    } catch (error) {} finally { setLoading(false); }
+    } catch (error) {
+      console.error('handleOpenCompose error:', error);
+      addToast('Lỗi mở compose', 'error');
+    } finally { setLoading(false); }
   };
 
   const handleAiSend = async (message) => {
@@ -356,7 +466,10 @@ ${compileRules(g.rules)}
         content: message, snapshotId: currentContext.id
       });
       if (res.success) { setIsComposeOpen(false); handleResolveAlert(currentContext.id, currentContext.space_id); addToast('Đã gửi tin nhắn!'); }
-    } catch (error) {} finally { setLoading(false); }
+    } catch (error) {
+      console.error('handleAiSend error:', error);
+      addToast('Lỗi gửi tin nhắn', 'error');
+    } finally { setLoading(false); }
   };
 
   const RuleCheckbox = ({ label, checked, onChange }) => (
@@ -512,7 +625,10 @@ ${compileRules(g.rules)}
                   try {
                     const res = await taService.uploadSlide(selectedSpaces[0], file);
                     if (res.success) setUploadedFile({ ...res.data, rawFile: file });
-                  } catch (error) {} finally { setUploading(false); }
+                  } catch (error) {
+                    console.error('handleFileUpload error:', error);
+                    addToast('Lỗi tải file lên', 'error');
+                  } finally { setUploading(false); }
                 }} 
                 startAiAnalysis={async () => {
                   if (selectedSpaces.length === 0) return;
@@ -530,10 +646,14 @@ ${compileRules(g.rules)}
 
                         const aiContent = resAgent?.answer || resAgent?.content || resAgent?.response;
                         if (resAgent?.success && aiContent) {
+                          // Parse structured JSON response
+                          const parsed = parseAiRecapResponse(aiContent);
+
                           const res = await taService.createSummaryDraft({
                             spaceId: selectedSpaces[0],
-                            content: aiContent,
+                            content: parsed.summary,
                             draft_type: 'lesson_recap',
+                            metadata: { deadlines: parsed.deadlines }
                           });
                           if (res?.success) {
                             if (scheduleDate) handleScheduleSummary(res.data.id, res.data.space_id, scheduleDate, res.data);
@@ -554,13 +674,17 @@ ${compileRules(g.rules)}
 
                     const aiContent = resAgent?.answer || resAgent?.content || resAgent?.response;
                     if (resAgent?.success && aiContent) {
+                      // Parse structured JSON response
+                      const parsed = parseAiRecapResponse(aiContent);
+
                       const res = await taService.createSummaryDraft({
                         spaceId: selectedSpaces[0],
-                        content: aiContent,
+                        content: parsed.summary,
                         draft_type: 'lesson_recap',
+                        metadata: { deadlines: parsed.deadlines }
                       });
                       if (res?.success) {
-                        setAiPreview(res.data);
+                        setAiPreview({ ...res.data, deadlines: parsed.deadlines });
                         setCurrentStep(3);
                       }
                     } else { addToast('AI không phản hồi', 'error'); }
@@ -612,7 +736,10 @@ ${compileRules(g.rules)}
                         setAiPreview(res.data); 
                       }
                     } else { addToast('AI không phản hồi', 'error'); }
-                  } catch (error) { addToast('Lỗi khi soạn thông báo', 'error'); } finally { setIsAnalyzing(false); }
+                  } catch (error) {
+      console.error('Announcement AI error:', error);
+      addToast('Lỗi khi soạn thông báo', 'error');
+    } finally { setIsAnalyzing(false); }
                 }} 
                 loading={isAnalyzing} aiPreview={aiPreview} setAiPreview={setAiPreview} handleApprove={handleApproveSummary} handleSchedule={handleScheduleSummary}
                 scheduleDate={scheduleDate} setScheduleDate={setScheduleDate} selectedSpaces={selectedSpaces} setSelectedSpaces={setSelectedSpaces}

src/services/ta.service.js

@@ -37,6 +37,15 @@ const taService = {
    * Duyệt bản tóm tắt
    */
   approveSummary: async (draftId, spaceId) => {
+    console.log('=== approveSummary DEBUG ===');
+    console.log('draftId:', draftId, 'type:', typeof draftId);
+    console.log('spaceId:', spaceId, 'type:', typeof spaceId);
+    console.log('URL:', `/ta/summary-queue/${draftId}/approve?spaceId=${spaceId}`);
+
+    if (!draftId || !spaceId) {
+      throw new Error(`Invalid IDs: draftId=${draftId}, spaceId=${spaceId}`);
+    }
+
     const response = await api.post(`/ta/summary-queue/${draftId}/approve?spaceId=${spaceId}`);
     return response.data;
   },