update flash card, test

src/features/toeic/components/TestResult.tsx

@@ -8,6 +8,8 @@ import { saveTestResult } from '@/lib/progress-service'
 import { useAwardActivity } from '@/hooks/use-gamification'
 import { XP_REWARDS } from '@/lib/gamification-service'
 
+const ANSWER_LABELS = ['A', 'B', 'C', 'D']
+
 function formatTime(s: number) {
   const m = Math.floor(s / 60)
   const sec = s % 60
@@ -17,89 +19,72 @@ function formatTime(s: number) {
 
 export function TestResult() {
   const navigate = useNavigate()
-  const { partId, partName, questions, answers, timeUsed, reset } = useTestStore()
+  const { testId, testName, parts, answers, timeUsed, reset } = useTestStore()
   const { isAuthenticated, isLoading } = useRequireAuth()
   const user = useAuthStore((s) => s.user)
   const savedRef = useRef(false)
   const { mutate: awardActivity } = useAwardActivity()
 
+  // Flatten all questions across parts
+  const allQuestions = parts.flatMap(p => p.questions)
+
   useEffect(() => {
     if (isLoading) return
     if (!isAuthenticated) navigate({ to: '/toeic' })
   }, [isLoading, isAuthenticated, navigate])
 
-  // Save test result once when page mounts (fire-and-forget)
   useEffect(() => {
-    if (!user || savedRef.current || questions.length === 0) return
+    if (!user || savedRef.current || allQuestions.length === 0) return
     savedRef.current = true
+    const correct = allQuestions.filter(q => answers[q.id] === q.correctAnswer).length
     awardActivity({ xp: XP_REWARDS.test })
     saveTestResult(user.id, {
-      partId,
-      partName,
-      score: answers.filter((a, i) => a === questions[i]?.correctAnswer).length,
-      total: questions.length,
+      testId,
+      selectedParts: parts.map(p => p.partNumber),
+      score: correct,
+      total: allQuestions.length,
       timeUsed,
-      answers: questions.map((q, i) => ({
+      answers: allQuestions.map(q => ({
         questionId: q.id,
-        selected: answers[i],
-        correct: answers[i] === q.correctAnswer,
+        selected: answers[q.id] ?? null,
+        correct: answers[q.id] === q.correctAnswer,
       })),
     })
-  }, [user, questions, answers, partId, partName, timeUsed])
+  }, [user, allQuestions.length])
 
-  const correct = answers.filter((a, i) => a === questions[i]?.correctAnswer).length
-  const wrong = answers.filter((a, i) => a !== null && a !== questions[i]?.correctAnswer).length
-  const skipped = answers.filter((a) => a === null).length
-  const total = questions.length
-  const percent = total > 0 ? Math.round((correct / total) * 100) : 0
-
-  const circumference = 2 * Math.PI * 52
-  const offset = circumference - (percent / 100) * circumference
-
-  function handleRetry() {
-    navigate({ to: '/toeic/session' })
-  }
-
-  function handleHome() {
-    reset()
-    navigate({ to: '/' })
-  }
-
-  if (questions.length === 0) {
+  if (allQuestions.length === 0) {
     return (
       <div className="px-6 py-8 max-w-6xl mx-auto text-center">
         <p className="text-slate-500 mb-4">Không có dữ liệu bài thi.</p>
-        <button
-          onClick={() => navigate({ to: '/toeic' })}
-          className="bg-blue-600 text-white px-6 py-2.5 rounded-xl font-semibold text-sm hover:bg-blue-700 transition-colors"
-        >
-          Chọn Part để luyện thi
+        <button onClick={() => navigate({ to: '/toeic' })}
+          className="bg-blue-600 text-white px-6 py-2.5 rounded-xl font-semibold text-sm hover:bg-blue-700 transition-colors">
+          Chọn đề thi
         </button>
       </div>
     )
   }
 
+  const correct = allQuestions.filter(q => answers[q.id] === q.correctAnswer).length
+  const wrong = allQuestions.filter(q => answers[q.id] !== null && answers[q.id] !== undefined && answers[q.id] !== q.correctAnswer).length
+  const skipped = allQuestions.filter(q => answers[q.id] === null || answers[q.id] === undefined).length
+  const total = allQuestions.length
+  const percent = total > 0 ? Math.round((correct / total) * 100) : 0
+  const circumference = 2 * Math.PI * 52
+  const offset = circumference - (percent / 100) * circumference
+
   return (
     <div className="px-4 lg:px-6 py-6 max-w-6xl mx-auto page-enter">
       {/* Score header */}
       <div className="bg-white rounded-2xl p-6 border border-slate-200 mb-5">
         <div className="flex flex-col lg:flex-row items-center gap-6">
-          {/* Circle */}
           <div className="flex-shrink-0 relative w-32 h-32">
             <svg className="w-full h-full -rotate-90" viewBox="0 0 120 120">
               <circle cx="60" cy="60" r="52" fill="none" stroke="#e2e8f0" strokeWidth="8" />
-              <circle
-                cx="60"
-                cy="60"
-                r="52"
-                fill="none"
+              <circle cx="60" cy="60" r="52" fill="none"
                 stroke={percent >= 70 ? '#16a34a' : percent >= 50 ? '#2563eb' : '#dc2626'}
-                strokeWidth="8"
-                strokeLinecap="round"
-                strokeDasharray={circumference}
-                strokeDashoffset={offset}
-                className="transition-all duration-700"
-              />
+                strokeWidth="8" strokeLinecap="round"
+                strokeDasharray={circumference} strokeDashoffset={offset}
+                className="transition-all duration-700" />
             </svg>
             <div className="absolute inset-0 flex flex-col items-center justify-center">
               <span className="text-3xl font-extrabold text-slate-800">{correct}/{total}</span>
@@ -107,121 +92,92 @@ export function TestResult() {
             </div>
           </div>
 
-          {/* Stats */}
           <div className="flex-1 text-center lg:text-left">
             <div className="text-2xl font-extrabold text-slate-800 mb-1">
               {percent >= 80 ? 'Xuất sắc!' : percent >= 60 ? 'Hoàn thành!' : 'Cố gắng hơn nhé!'}
             </div>
-            <div className="text-sm text-slate-400 mb-4">
-              Part {partId} — {partName}
-            </div>
+            <div className="text-sm text-slate-400 mb-4">{testName}</div>
             <div className="flex flex-wrap gap-3 justify-center lg:justify-start">
-              <div className="bg-green-50 border border-green-100 rounded-xl px-4 py-2 text-center">
-                <div className="text-xl font-extrabold text-green-600">{correct}</div>
-                <div className="text-xs text-slate-400">Đúng</div>
-              </div>
-              <div className="bg-red-50 border border-red-100 rounded-xl px-4 py-2 text-center">
-                <div className="text-xl font-extrabold text-red-600">{wrong}</div>
-                <div className="text-xs text-slate-400">Sai</div>
-              </div>
-              <div className="bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-center">
-                <div className="text-xl font-extrabold text-slate-500">{skipped}</div>
-                <div className="text-xs text-slate-400">Bỏ qua</div>
-              </div>
-              <div className="bg-blue-50 border border-blue-100 rounded-xl px-4 py-2 text-center">
-                <div className="text-xl font-extrabold text-blue-600">{formatTime(timeUsed)}</div>
-                <div className="text-xs text-slate-400">Thời gian</div>
-              </div>
+              {[
+                { label: 'Đúng', value: correct, cls: 'bg-green-50 border-green-100 text-green-600' },
+                { label: 'Sai', value: wrong, cls: 'bg-red-50 border-red-100 text-red-600' },
+                { label: 'Bỏ qua', value: skipped, cls: 'bg-slate-50 border-slate-200 text-slate-500' },
+                { label: 'Thời gian', value: formatTime(timeUsed), cls: 'bg-blue-50 border-blue-100 text-blue-600' },
+              ].map(({ label, value, cls }) => (
+                <div key={label} className={cn('border rounded-xl px-4 py-2 text-center', cls)}>
+                  <div className="text-xl font-extrabold">{value}</div>
+                  <div className="text-xs text-slate-400">{label}</div>
+                </div>
+              ))}
             </div>
           </div>
 
-          {/* Actions */}
           <div className="flex lg:flex-col gap-3 flex-shrink-0">
-            <button
-              onClick={handleRetry}
-              className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors"
-            >
-              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>replay</span>
-              Làm lại
+            <button onClick={() => navigate({ to: '/toeic/session' })}
+              className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors">
+              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>replay</span>Làm lại
             </button>
-            <button
-              onClick={handleHome}
-              className="flex items-center gap-2 px-5 py-2.5 border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold hover:bg-slate-50 transition-colors"
-            >
-              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>home</span>
-              Về trang chủ
+            <button onClick={() => { reset(); navigate({ to: '/toeic' }) }}
+              className="flex items-center gap-2 px-5 py-2.5 border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold hover:bg-slate-50 transition-colors">
+              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>home</span>Về trang chủ
             </button>
           </div>
         </div>
       </div>
 
-      {/* Answer review */}
-      <div className="bg-white rounded-2xl border border-slate-200 p-6">
-        <h2 className="text-base font-bold text-slate-800 mb-4">Xem lại đáp án</h2>
-        <div className="space-y-4">
-          {questions.map((q, i) => {
-            const userAnswer = answers[i]
-            const isCorrect = userAnswer === q.correctAnswer
-            const isSkipped = userAnswer === null
-
-            return (
-              <div
-                key={q.id}
-                className={cn(
+      {/* Answer review grouped by part */}
+      {parts.map(part => (
+        <div key={part.partNumber} className="bg-white rounded-2xl border border-slate-200 p-6 mb-4">
+          <h2 className="text-base font-bold text-slate-800 mb-4">Part {part.partNumber} — {part.partName}</h2>
+          <div className="space-y-4">
+            {part.questions.map((q, i) => {
+              const userAnswer = answers[q.id] ?? null
+              const isCorrect = userAnswer === q.correctAnswer
+              const isSkipped = userAnswer === null || userAnswer === undefined
+              return (
+                <div key={q.id} className={cn(
                   'rounded-xl border p-4',
                   isCorrect ? 'border-green-100 bg-green-50/50' : isSkipped ? 'border-slate-100 bg-slate-50/50' : 'border-red-100 bg-red-50/50',
-                )}
-              >
-                <div className="flex items-start gap-3">
-                  <span
-                    className={cn(
+                )}>
+                  <div className="flex items-start gap-3">
+                    <span className={cn(
                       'w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5',
                       isCorrect ? 'bg-green-600 text-white' : isSkipped ? 'bg-slate-400 text-white' : 'bg-red-600 text-white',
-                    )}
-                  >
-                    {i + 1}
-                  </span>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-slate-800 mb-2">{q.text}</p>
-                    <div className="flex flex-wrap gap-2 mb-2">
-                      {q.options.map((opt, j) => (
-                        <span
-                          key={j}
-                          className={cn(
+                    )}>{i + 1}</span>
+                    <div className="flex-1 min-w-0">
+                      {q.text && <p className="text-sm font-medium text-slate-800 mb-2">{q.text}</p>}
+                      <div className="flex flex-wrap gap-2 mb-2">
+                        {q.options.map((opt, j) => (
+                          <span key={j} className={cn(
                             'text-xs px-2.5 py-1 rounded-lg font-medium',
-                            j === q.correctAnswer
-                              ? 'bg-green-100 text-green-700 border border-green-200'
-                              : j === userAnswer && !isCorrect
-                                ? 'bg-red-100 text-red-700 border border-red-200 line-through'
+                            j === q.correctAnswer ? 'bg-green-100 text-green-700 border border-green-200'
+                              : j === userAnswer && !isCorrect ? 'bg-red-100 text-red-700 border border-red-200 line-through'
                                 : 'bg-slate-100 text-slate-500',
-                          )}
-                        >
-                          {['A', 'B', 'C', 'D'][j]}. {opt}
-                        </span>
-                      ))}
+                          )}>
+                            {ANSWER_LABELS[j]}. {opt}
+                          </span>
+                        ))}
+                      </div>
+                      {q.explanation && (
+                        <p className="text-xs text-slate-500 bg-white rounded-lg px-3 py-2 border border-slate-100">
+                          <span className="font-semibold text-slate-600">Giải thích: </span>{q.explanation}
+                        </p>
+                      )}
                     </div>
-                    {q.explanation && (
-                      <p className="text-xs text-slate-500 bg-white rounded-lg px-3 py-2 border border-slate-100">
-                        <span className="font-semibold text-slate-600">Giải thích: </span>
-                        {q.explanation}
-                      </p>
-                    )}
+                    <span className="flex-shrink-0">
+                      {isCorrect
+                        ? <span className="material-symbols-outlined text-green-600" style={{ fontSize: 20 }}>check_circle</span>
+                        : isSkipped
+                          ? <span className="material-symbols-outlined text-slate-400" style={{ fontSize: 20 }}>remove_circle</span>
+                          : <span className="material-symbols-outlined text-red-500" style={{ fontSize: 20 }}>cancel</span>}
+                    </span>
                   </div>
-                  <span className="flex-shrink-0">
-                    {isCorrect ? (
-                      <span className="material-symbols-outlined text-green-600" style={{ fontSize: 20 }}>check_circle</span>
-                    ) : isSkipped ? (
-                      <span className="material-symbols-outlined text-slate-400" style={{ fontSize: 20 }}>remove_circle</span>
-                    ) : (
-                      <span className="material-symbols-outlined text-red-500" style={{ fontSize: 20 }}>cancel</span>
-                    )}
-                  </span>
                 </div>
-              </div>
-            )
-          })}
+              )
+            })}
+          </div>
         </div>
-      </div>
+      ))}
     </div>
   )
 }

src/features/toeic/components/TestSession.tsx

@@ -3,205 +3,149 @@ import { useNavigate } from '@tanstack/react-router'
 import { cn } from '@/lib/utils'
 import { useTestStore } from '@/store/test-store'
 import { useRequireAuth } from '@/hooks/use-require-auth'
+import { TestSessionHeader } from './TestSessionHeader'
+import { TestSessionSidebar } from './TestSessionSidebar'
+import { TestSessionFooter } from './TestSessionFooter'
+import type { Question } from '@/types'
 
-const TOTAL_SECONDS = 600 // 10 minutes
 const ANSWER_LABELS = ['A', 'B', 'C', 'D']
 
-function formatTime(s: number) {
-  return `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`
-}
-
-export function TestSession() {
-  const navigate = useNavigate()
-  const { partId, partName, questions, answers, setAnswer, submitExam } = useTestStore()
-  const [currentQ, setCurrentQ] = useState(0)
-  const [timeLeft, setTimeLeft] = useState(TOTAL_SECONDS)
-  const { isAuthenticated, isLoading } = useRequireAuth()
-
-  const handleSubmit = useCallback(() => {
-    submitExam(TOTAL_SECONDS - timeLeft)
-    navigate({ to: '/toeic/result' })
-  }, [submitExam, navigate, timeLeft])
-
-  // Countdown
-  useEffect(() => {
-    if (questions.length === 0) return
-    const id = setInterval(() => {
-      setTimeLeft((t) => {
-        if (t <= 1) { clearInterval(id); handleSubmit(); return 0 }
-        return t - 1
-      })
-    }, 1000)
-    return () => clearInterval(id)
-  }, [questions.length, handleSubmit])
-
-  // Redirect if no exam started or not authenticated (wait for auth init)
-  useEffect(() => {
-    if (isLoading) return
-    if (!isAuthenticated || questions.length === 0) navigate({ to: '/toeic' })
-  }, [isLoading, isAuthenticated, questions.length, navigate])
-
-  if (questions.length === 0) return null
-
-  const question = questions[currentQ]
-  const answeredCount = answers.filter((a) => a !== null).length
-  const isUrgent = timeLeft < 60
-
+function QuestionCard({
+  question, globalNum, answer, onSelect,
+}: {
+  question: Question
+  globalNum: number
+  answer: number | null
+  onSelect: (idx: number) => void
+}) {
   return (
-    <div className="px-4 lg:px-6 py-6 max-w-6xl mx-auto page-enter">
-      {/* Mobile progress bar */}
-      <div className="lg:hidden mb-4">
-        <div className="flex justify-between text-sm font-semibold mb-2">
-          <span className="text-slate-700">Part {partId} — Câu {currentQ + 1}/{questions.length}</span>
-          <span className={cn('font-bold tabular-nums', isUrgent ? 'text-red-600 timer-urgent' : 'text-blue-600')}>
-            {formatTime(timeLeft)}
-          </span>
+    <div className="bg-white rounded-2xl border border-slate-200 p-6 mb-4">
+      <span className="inline-block bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
+        Câu {globalNum}
+      </span>
+
+      {question.passageText && (
+        <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-4 text-sm text-slate-700 leading-relaxed whitespace-pre-wrap">
+          {question.passageText}
         </div>
-        <div className="h-1.5 w-full rounded-full bg-slate-200">
-          <div
-            className="h-full bg-blue-600 rounded-full transition-all"
-            style={{ width: `${((currentQ + 1) / questions.length) * 100}%` }}
-          />
-        </div>
-      </div>
-
-      <div className="flex gap-5">
-        {/* Left: Question */}
-        <div className="flex-1 min-w-0">
-          <div className="bg-white rounded-2xl p-6 border border-slate-200 mb-4">
-            <div className="flex items-center gap-2 mb-4">
-              <span className="bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-full">
-                Câu {currentQ + 1}
-              </span>
-              <span className="text-xs text-slate-400">Part {partId} — {partName}</span>
-            </div>
-            <p className="text-base font-medium text-slate-800 leading-relaxed mb-6">
-              {question.text}
-            </p>
-            <div className="space-y-3">
-              {question.options.map((opt, i) => {
-                const selected = answers[currentQ] === i
-                return (
-                  <button
-                    key={i}
-                    onClick={() => setAnswer(currentQ, i)}
-                    className={cn(
-                      'w-full flex items-center gap-3 p-4 border-2 rounded-xl text-sm font-medium text-left transition-all',
-                      selected
-                        ? 'border-blue-600 bg-blue-50 text-blue-700'
-                        : 'border-slate-200 hover:border-blue-300 hover:bg-blue-50/50 text-slate-700',
-                    )}
-                  >
-                    <span
-                      className={cn(
-                        'w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0',
-                        selected ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-500',
-                      )}
-                    >
-                      {ANSWER_LABELS[i]}
-                    </span>
-                    {opt}
-                  </button>
-                )
-              })}
-            </div>
-          </div>
-
-          {/* Navigation */}
-          <div className="flex items-center justify-between">
-            <button
-              onClick={() => setCurrentQ((q) => Math.max(0, q - 1))}
-              disabled={currentQ === 0}
-              className="flex items-center gap-2 px-5 py-2.5 border border-slate-200 rounded-xl text-sm font-semibold text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-            >
-              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>chevron_left</span>
-              Câu trước
-            </button>
-            <span className="text-xs text-slate-400 tabular-nums">{currentQ + 1} / {questions.length}</span>
-            {currentQ < questions.length - 1 ? (
-              <button
-                onClick={() => setCurrentQ((q) => q + 1)}
-                className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors"
-              >
-                Câu tiếp theo
-                <span className="material-symbols-outlined" style={{ fontSize: 18 }}>chevron_right</span>
-              </button>
-            ) : (
-              <button
-                onClick={handleSubmit}
-                className="flex items-center gap-2 px-5 py-2.5 bg-red-600 text-white rounded-xl text-sm font-semibold hover:bg-red-700 transition-colors"
-              >
-                Nộp bài
-                <span className="material-symbols-outlined" style={{ fontSize: 18 }}>send</span>
-              </button>
-            )}
-          </div>
-        </div>
-
-        {/* Right panel — desktop only */}
-        <div className="hidden lg:flex flex-col gap-4 w-60 flex-shrink-0">
-          {/* Timer */}
-          <div className="bg-white rounded-2xl p-5 border border-slate-200 text-center">
-            <div className="text-xs text-slate-400 font-medium mb-2">Thời gian còn lại</div>
-            <div
-              className={cn(
-                'text-5xl font-extrabold tabular-nums mb-1',
-                isUrgent ? 'text-red-600 timer-urgent' : 'text-blue-600',
-              )}
-            >
-              {formatTime(timeLeft)}
-            </div>
-            <div className="text-xs text-slate-400">phút : giây</div>
-          </div>
-
-          {/* Question dots */}
-          <div className="bg-white rounded-2xl p-5 border border-slate-200">
-            <div className="text-xs text-slate-400 font-medium mb-3">
-              Danh sách câu · {answeredCount}/{questions.length} đã trả lời
-            </div>
-            <div className="grid grid-cols-5 gap-2">
-              {questions.map((_, i) => (
-                <button
-                  key={i}
-                  onClick={() => setCurrentQ(i)}
-                  className={cn(
-                    'w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-semibold transition-all',
-                    i === currentQ
-                      ? 'border-2 border-blue-600 text-blue-600 shadow-sm shadow-blue-600/20'
-                      : answers[i] !== null
-                        ? 'bg-blue-600 text-white'
-                        : 'border-2 border-slate-200 text-slate-400 hover:border-blue-300',
-                  )}
-                >
-                  {i + 1}
-                </button>
-              ))}
-            </div>
-            <div className="flex items-center gap-3 mt-4 text-xs text-slate-400">
-              <span className="w-4 h-4 rounded-full bg-blue-600 inline-block" /> Đã trả lời
-              <span className="w-4 h-4 rounded-full border-2 border-slate-200 inline-block" /> Chưa làm
-            </div>
-          </div>
+      )}
+      {question.audioUrl && (
+        <audio controls src={question.audioUrl} className="w-full mb-4 rounded-lg" />
+      )}
+      {question.imageUrl && (
+        <img src={question.imageUrl} alt="" className="max-h-64 rounded-xl mb-4 object-contain" />
+      )}
+      {question.text && (
+        <p className="text-base font-medium text-slate-800 leading-relaxed mb-5">{question.text}</p>
+      )}
 
+      <div className="space-y-2.5">
+        {question.options.map((opt, i) => (
           <button
-            onClick={handleSubmit}
-            className="w-full py-3 bg-red-600 text-white rounded-xl font-bold text-sm hover:bg-red-700 transition-colors flex items-center justify-center gap-2"
+            key={i}
+            onClick={() => onSelect(i)}
+            className={cn(
+              'w-full flex items-center gap-3 p-3.5 border-2 rounded-xl text-sm font-medium text-left transition-all',
+              answer === i
+                ? 'border-blue-600 bg-blue-50 text-blue-700'
+                : 'border-slate-200 hover:border-blue-300 hover:bg-blue-50/50 text-slate-700',
+            )}
           >
-            <span className="material-symbols-outlined" style={{ fontSize: 18 }}>send</span>
-            Nộp bài
+            <span className={cn(
+              'w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0',
+              answer === i ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-500',
+            )}>
+              {ANSWER_LABELS[i]}
+            </span>
+            {opt}
           </button>
-        </div>
-      </div>
-
-      {/* Mobile submit */}
-      <div className="lg:hidden mt-4">
-        <button
-          onClick={handleSubmit}
-          className="w-full py-3.5 bg-red-600 text-white rounded-xl font-bold text-sm hover:bg-red-700 transition-colors"
-        >
-          Nộp bài ngay
-        </button>
+        ))}
       </div>
     </div>
   )
 }
+
+export function TestSession() {
+  const navigate = useNavigate()
+  const { testName, parts, currentPartIndex, answers, totalSeconds, setAnswer, setCurrentPart, submitExam } = useTestStore()
+  const { isAuthenticated, isLoading } = useRequireAuth()
+  const [timeLeft, setTimeLeft] = useState(() => totalSeconds > 0 ? totalSeconds : -1)
+  const [timeUsed, setTimeUsed] = useState(0)
+
+  const handleSubmit = useCallback(() => {
+    submitExam(totalSeconds > 0 ? totalSeconds - timeLeft : timeUsed)
+    navigate({ to: '/toeic/result' })
+  }, [submitExam, navigate, totalSeconds, timeLeft, timeUsed])
+
+  // Timer
+  useEffect(() => {
+    if (parts.length === 0) return
+    const id = setInterval(() => {
+      if (timeLeft > 0) {
+        setTimeLeft(t => { if (t <= 1) { clearInterval(id); handleSubmit(); return 0 } return t - 1 })
+      } else {
+        setTimeUsed(t => t + 1)
+      }
+    }, 1000)
+    return () => clearInterval(id)
+  }, [parts.length, timeLeft, handleSubmit])
+
+  useEffect(() => {
+    if (isLoading) return
+    if (!isAuthenticated || parts.length === 0) navigate({ to: '/toeic' })
+  }, [isLoading, isAuthenticated, parts.length, navigate])
+
+  if (parts.length === 0) return null
+
+  const currentPart = parts[currentPartIndex]
+
+  // Compute global question offset for current part
+  let globalOffset = 0
+  for (let i = 0; i < currentPartIndex; i++) globalOffset += parts[i].questions.length
+
+  return (
+    <div className="flex flex-col" style={{ height: 'calc(100vh - var(--app-header-height, 0px))' }}>
+      <TestSessionHeader
+        testName={testName}
+        timeLeft={timeLeft}
+        timeUsed={timeUsed}
+        onSubmit={handleSubmit}
+      />
+
+      <div className="flex flex-1 overflow-hidden">
+        <TestSessionSidebar
+          parts={parts}
+          currentPartIndex={currentPartIndex}
+          answers={answers}
+          onSelectPart={setCurrentPart}
+        />
+
+        {/* Main scrollable content */}
+        <main className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 py-6">
+          <div className="max-w-3xl mx-auto">
+            <h2 className="text-lg font-extrabold text-slate-700 mb-5">
+              Part {currentPart.partNumber}: {currentPart.partName}
+            </h2>
+            {currentPart.questions.map((q, idx) => (
+              <QuestionCard
+                key={q.id}
+                question={q}
+                globalNum={globalOffset + idx + 1}
+                answer={answers[q.id] ?? null}
+                onSelect={(i) => setAnswer(q.id, i)}
+              />
+            ))}
+          </div>
+        </main>
+      </div>
+
+      <TestSessionFooter
+        currentPartIndex={currentPartIndex}
+        totalParts={parts.length}
+        currentPartName={currentPart.partName}
+        onPrev={() => setCurrentPart(currentPartIndex - 1)}
+        onNext={() => setCurrentPart(currentPartIndex + 1)}
+      />
+    </div>
+  )
+}

src/features/toeic/components/TestSessionFooter.tsx

@@ -0,0 +1,36 @@
+interface Props {
+  currentPartIndex: number
+  totalParts: number
+  currentPartName: string
+  onPrev: () => void
+  onNext: () => void
+}
+
+export function TestSessionFooter({ currentPartIndex, totalParts, currentPartName, onPrev, onNext }: Props) {
+  return (
+    <footer className="h-14 flex items-center justify-between px-5 bg-white border-t border-slate-200 flex-shrink-0 z-10">
+      <button
+        onClick={onPrev}
+        disabled={currentPartIndex === 0}
+        className="flex items-center gap-1.5 px-4 py-2 border border-slate-200 rounded-xl text-sm font-semibold text-slate-600 hover:bg-slate-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+      >
+        <span className="material-symbols-outlined" style={{ fontSize: 18 }}>arrow_back</span>
+        Part trước
+      </button>
+
+      <span className="text-sm font-bold text-slate-700">
+        Part {currentPartIndex + 1} / {totalParts}
+        <span className="text-slate-400 font-normal ml-1.5">— {currentPartName}</span>
+      </span>
+
+      <button
+        onClick={onNext}
+        disabled={currentPartIndex === totalParts - 1}
+        className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+      >
+        Part tiếp theo
+        <span className="material-symbols-outlined" style={{ fontSize: 18 }}>arrow_forward</span>
+      </button>
+    </footer>
+  )
+}

src/features/toeic/components/TestSessionHeader.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@/lib/utils'
+
+interface Props {
+  testName: string
+  timeLeft: number   // seconds remaining; -1 = no limit (count-up mode)
+  timeUsed: number   // seconds elapsed (used when no limit)
+  onSubmit: () => void
+}
+
+function formatTime(s: number): string {
+  const h = Math.floor(s / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = s % 60
+  if (h > 0) return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
+  return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
+}
+
+export function TestSessionHeader({ testName, timeLeft, timeUsed, onSubmit }: Props) {
+  const isUnlimited = timeLeft === -1
+  const displaySeconds = isUnlimited ? timeUsed : timeLeft
+  const isUrgent = !isUnlimited && timeLeft < 300  // last 5 min
+
+  return (
+    <header className="h-14 flex items-center justify-between px-5 bg-white border-b border-slate-200 shadow-sm flex-shrink-0 z-10">
+      <span className="font-bold text-slate-800 text-sm truncate max-w-xs">{testName}</span>
+
+      <span className={cn(
+        'text-2xl font-extrabold tabular-nums',
+        isUrgent ? 'text-red-600 timer-urgent' : 'text-blue-600',
+      )}>
+        {isUnlimited ? <span className="text-slate-400 text-base">∞</span> : formatTime(displaySeconds)}
+      </span>
+
+      <button
+        onClick={onSubmit}
+        className="flex items-center gap-1.5 px-4 py-2 bg-red-600 text-white rounded-xl text-sm font-bold hover:bg-red-700 transition-colors"
+      >
+        <span className="material-symbols-outlined" style={{ fontSize: 16 }}>send</span>
+        Nộp bài
+      </button>
+    </header>
+  )
+}

src/features/toeic/components/TestSessionSidebar.tsx

@@ -0,0 +1,86 @@
+import { cn } from '@/lib/utils'
+import type { SessionPart } from '@/types'
+
+interface Props {
+  parts: SessionPart[]
+  currentPartIndex: number
+  answers: Record<number, number | null>
+  onSelectPart: (index: number) => void
+}
+
+export function TestSessionSidebar({ parts, currentPartIndex, answers, onSelectPart }: Props) {
+  // Global question offset per part for sequential numbering
+  let offset = 0
+  const partOffsets: number[] = parts.map(p => {
+    const o = offset
+    offset += p.questions.length
+    return o
+  })
+
+  return (
+    <aside className="w-60 flex-shrink-0 bg-white border-r border-slate-200 overflow-y-auto">
+      <div className="p-3 border-b border-slate-100">
+        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Question Map</span>
+      </div>
+
+      {parts.map((part, partIdx) => {
+        const isCurrent = partIdx === currentPartIndex
+
+        return (
+          <div key={part.partNumber} className="px-3 pt-3 pb-1">
+            {/* Part label — click to switch */}
+            <button
+              onClick={() => onSelectPart(partIdx)}
+              className={cn(
+                'w-full text-left text-[10px] font-bold uppercase tracking-widest mb-2 px-1 py-0.5 rounded transition-colors',
+                isCurrent ? 'text-blue-600' : 'text-slate-400 hover:text-slate-600',
+              )}
+            >
+              Part {part.partNumber}
+            </button>
+
+            {/* Question number grid */}
+            <div className="grid grid-cols-5 gap-1.5 mb-2">
+              {part.questions.map((q, qIdx) => {
+                const globalNum = partOffsets[partIdx] + qIdx + 1
+                const answered = answers[q.id] !== null && answers[q.id] !== undefined
+
+                return (
+                  <button
+                    key={q.id}
+                    onClick={() => onSelectPart(partIdx)}
+                    title={`Câu ${globalNum}`}
+                    className={cn(
+                      'w-8 h-8 rounded-lg flex items-center justify-center text-[11px] font-semibold transition-all',
+                      isCurrent && answered
+                        ? 'bg-blue-600 text-white'
+                        : !isCurrent && answered
+                          ? 'bg-blue-400 text-white'
+                          : isCurrent
+                            ? 'border-2 border-blue-600 text-blue-600'
+                            : 'border-2 border-slate-200 text-slate-400 hover:border-slate-300',
+                    )}
+                  >
+                    {globalNum}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )
+      })}
+
+      {/* Legend */}
+      <div className="px-4 py-3 border-t border-slate-100 mt-1">
+        <div className="flex flex-col gap-1.5 text-[10px] text-slate-400">
+          <span className="flex items-center gap-2">
+            <span className="w-4 h-4 rounded bg-blue-600 inline-block" />Đã trả lời
+          </span>
+          <span className="flex items-center gap-2">
+            <span className="w-4 h-4 rounded border-2 border-slate-200 inline-block" />Chưa làm
+          </span>
+        </div>
+      </div>
+    </aside>
+  )
+}

src/features/toeic/components/ToeicTestDetail.tsx

@@ -0,0 +1,151 @@
+import { useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { cn } from '@/lib/utils'
+import { fetchTestWithParts } from '@/features/toeic/api/test-list-api'
+import { fetchQuestionsForTest } from '@/hooks/use-questions'
+import { useTestStore } from '@/store/test-store'
+import { useRequireAuth } from '@/hooks/use-require-auth'
+
+interface Props { testId: number }
+
+export function ToeicTestDetail({ testId }: Props) {
+  const navigate = useNavigate()
+  const { startExam } = useTestStore()
+  const { requireAuth } = useRequireAuth()
+  const [selectedParts, setSelectedParts] = useState<number[]>([])
+  const [loading, setLoading] = useState(false)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['test-detail', testId],
+    queryFn: () => fetchTestWithParts(testId),
+  })
+
+  function togglePart(partNumber: number) {
+    setSelectedParts(prev =>
+      prev.includes(partNumber) ? prev.filter(p => p !== partNumber) : [...prev, partNumber]
+    )
+  }
+
+  async function handleStart(mode: 'full' | 'parts') {
+    if (!requireAuth()) return
+    if (mode === 'parts' && selectedParts.length === 0) return
+    if (!data) return
+    setLoading(true)
+    try {
+      const partNumbers = mode === 'full' ? undefined : selectedParts
+      const parts = await fetchQuestionsForTest(testId, partNumbers)
+      const totalSeconds = mode === 'full'
+        ? data.test.durationMinutes * 60
+        : selectedParts.length * 10 * 60
+      startExam({ testId, testName: data.test.title, parts, totalSeconds })
+      navigate({ to: '/toeic/session' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="px-6 py-8 max-w-5xl mx-auto">
+        <div className="h-8 w-64 bg-slate-200 rounded animate-pulse mb-8" />
+        <div className="grid grid-cols-2 gap-5">
+          <div className="h-80 bg-slate-100 rounded-2xl animate-pulse" />
+          <div className="h-80 bg-slate-100 rounded-2xl animate-pulse" />
+        </div>
+      </div>
+    )
+  }
+
+  if (!data) return null
+  const { test, parts } = data
+
+  return (
+    <div className="px-6 py-8 max-w-5xl mx-auto page-enter">
+      {/* Back + title */}
+      <div className="flex items-center gap-3 mb-1">
+        <button
+          onClick={() => navigate({ to: '/toeic' })}
+          className="w-8 h-8 rounded-full border border-slate-200 flex items-center justify-center hover:bg-slate-50 transition-colors"
+        >
+          <span className="material-symbols-outlined text-slate-600" style={{ fontSize: 18 }}>arrow_back</span>
+        </button>
+        <h1 className="text-2xl font-extrabold text-slate-800">{test.title}</h1>
+      </div>
+      <p className="text-slate-400 text-sm ml-11 mb-8">{test.totalQuestions} câu · {test.durationMinutes} phút</p>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
+        {/* Full test card */}
+        <div
+          className="rounded-2xl p-6 flex flex-col text-white relative overflow-hidden"
+          style={{ background: 'linear-gradient(135deg, #2563EB, #1d4ed8)' }}
+        >
+          <div className="absolute -top-4 -right-4 opacity-10">
+            <span className="material-symbols-outlined" style={{ fontSize: 100 }}>military_tech</span>
+          </div>
+          <span className="material-symbols-outlined mb-4" style={{ fontSize: 32 }}>military_tech</span>
+          <h2 className="text-2xl font-extrabold mb-1">Thi Toàn Bộ</h2>
+          <p className="text-blue-100 text-sm mb-2">{test.totalQuestions} câu · {test.durationMinutes} phút · Toàn bộ {parts.length} parts</p>
+          <p className="text-blue-100 text-xs mb-8">Mô phỏng bài thi TOEIC thực tế với giới hạn thời gian.</p>
+          <button
+            onClick={() => handleStart('full')}
+            disabled={loading}
+            className="mt-auto py-3 bg-white text-blue-600 rounded-xl font-bold text-sm hover:bg-blue-50 transition-colors disabled:opacity-60 flex items-center justify-center gap-2"
+          >
+            {loading ? <span className="w-4 h-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin" /> : (
+              <><span className="material-symbols-outlined" style={{ fontSize: 18 }}>play_arrow</span>Bắt đầu thi</>
+            )}
+          </button>
+        </div>
+
+        {/* Part selection card */}
+        <div className="bg-white rounded-2xl border border-slate-200 p-6 flex flex-col">
+          <span className="material-symbols-outlined text-blue-600 mb-4" style={{ fontSize: 32 }}>checklist</span>
+          <h2 className="text-xl font-extrabold text-slate-800 mb-1">Chọn Part Luyện Tập</h2>
+          <p className="text-slate-400 text-sm mb-4">Chọn các part muốn luyện tập</p>
+
+          <div className="space-y-2 flex-1">
+            {parts.map((part) => {
+              const checked = selectedParts.includes(part.partNumber)
+              return (
+                <button
+                  key={part.partNumber}
+                  onClick={() => togglePart(part.partNumber)}
+                  className={cn(
+                    'w-full flex items-center gap-3 px-3 py-2.5 rounded-xl border-2 transition-all text-left',
+                    checked
+                      ? 'border-blue-600 bg-blue-50'
+                      : 'border-slate-100 hover:border-slate-200 bg-slate-50/50',
+                  )}
+                >
+                  <span className={cn(
+                    'w-5 h-5 rounded flex items-center justify-center border-2 flex-shrink-0',
+                    checked ? 'bg-blue-600 border-blue-600' : 'border-slate-300',
+                  )}>
+                    {checked && <span className="material-symbols-outlined text-white" style={{ fontSize: 14 }}>check</span>}
+                  </span>
+                  <span className="flex-1 text-sm font-semibold text-slate-700">
+                    Part {part.partNumber} — {part.title}
+                  </span>
+                  <span className="text-xs text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full flex-shrink-0">
+                    {part.questionCount} câu
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+
+          <button
+            onClick={() => handleStart('parts')}
+            disabled={loading || selectedParts.length === 0}
+            className="mt-4 w-full py-3 bg-blue-600 text-white rounded-xl font-bold text-sm hover:bg-blue-700 transition-colors disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+          >
+            {loading ? <span className="w-4 h-4 border-2 border-blue-200 border-t-white rounded-full animate-spin" /> : (
+              <><span className="material-symbols-outlined" style={{ fontSize: 18 }}>play_arrow</span>Bắt đầu luyện tập</>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/features/toeic/components/ToeicTestList.tsx

@@ -0,0 +1,82 @@
+import { useNavigate } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { fetchTests } from '@/features/toeic/api/test-list-api'
+
+export function ToeicTestList() {
+  const navigate = useNavigate()
+  const { data: tests = [], isLoading, error } = useQuery({
+    queryKey: ['tests'],
+    queryFn: fetchTests,
+  })
+
+  return (
+    <div className="px-6 py-8 max-w-6xl mx-auto page-enter">
+      <div className="mb-8">
+        <h1 className="text-3xl font-extrabold text-slate-800 mb-2">Đề Thi TOEIC</h1>
+        <p className="text-slate-500">Chọn đề thi để bắt đầu luyện tập hoặc thi thử toàn bộ.</p>
+      </div>
+
+      {isLoading && (
+        <div className="grid grid-cols-2 lg:grid-cols-3 gap-5">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="bg-white rounded-2xl border border-slate-200 p-5 animate-pulse h-44" />
+          ))}
+        </div>
+      )}
+
+      {error && (
+        <div className="bg-red-50 border border-red-100 rounded-2xl p-6 text-red-600 text-sm">
+          Không thể tải danh sách đề thi. Vui lòng thử lại.
+        </div>
+      )}
+
+      {!isLoading && !error && tests.length === 0 && (
+        <div className="text-center py-20 text-slate-400">
+          <span className="material-symbols-outlined" style={{ fontSize: 48 }}>library_books</span>
+          <p className="mt-3 font-medium">Chưa có đề thi nào. Dữ liệu đang được cập nhật.</p>
+        </div>
+      )}
+
+      {tests.length > 0 && (
+        <div className="grid grid-cols-2 lg:grid-cols-3 gap-5">
+          {tests.map((test) => (
+            <div
+              key={test.id}
+              className="bg-white rounded-2xl border border-slate-200 p-5 flex flex-col shadow-sm hover:-translate-y-1 hover:shadow-md transition-all duration-200"
+            >
+              {/* Category badge */}
+              {test.categoryName && (
+                <span className="self-start text-xs font-bold px-2.5 py-1 rounded-full bg-blue-50 text-blue-600 border border-blue-100 mb-3">
+                  {test.categoryName}
+                </span>
+              )}
+
+              <h3 className="font-extrabold text-lg text-slate-800 mb-1 leading-snug">{test.title}</h3>
+              {test.description && (
+                <p className="text-xs text-slate-400 mb-3 line-clamp-2">{test.description}</p>
+              )}
+
+              <div className="flex items-center gap-3 text-xs text-slate-500 mt-auto mb-4">
+                <span className="flex items-center gap-1">
+                  <span className="material-symbols-outlined" style={{ fontSize: 14 }}>list_alt</span>
+                  {test.totalQuestions} câu
+                </span>
+                <span className="flex items-center gap-1">
+                  <span className="material-symbols-outlined" style={{ fontSize: 14 }}>timer</span>
+                  {test.durationMinutes} phút
+                </span>
+              </div>
+
+              <button
+                onClick={() => navigate({ to: '/toeic/$testId', params: { testId: String(test.id) } })}
+                className="w-full py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors"
+              >
+                Bắt đầu
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}