update flash card, test

src/components/layout/AppHeader.tsx

@@ -5,7 +5,7 @@ import { UserMenu } from '@/components/UserMenu'
 const ROUTE_TITLES: Record<string, string> = {
   '/': 'Trang chủ',
   '/writing': 'AI Chấm Writing',
-  '/vocab': 'Từ vựng TOEIC',
+  '/flash-card': 'Flash Card',
   '/toeic': 'Luyện đề TOEIC',
   '/toeic/session': '',   // dynamic — filled below
   '/toeic/result': 'Kết quả bài thi',

src/components/layout/Sidebar.tsx

@@ -8,7 +8,7 @@ const NAV_ITEMS = [
   { to: '/dashboard', label: 'Thành tích', icon: 'emoji_events', matchPrefix: '/dashboard', exact: false },
   { to: '/toeic', label: 'Luyện đề TOEIC', icon: 'assignment', matchPrefix: '/toeic', exact: false },
   { to: '/writing', label: 'AI Writing', icon: 'edit_note', matchPrefix: '/writing', exact: false },
-  { to: '/vocab', label: 'Từ vựng', icon: 'menu_book', matchPrefix: '/vocab', exact: false },
+  { to: '/flash-card', label: 'Flash Card', icon: 'menu_book', matchPrefix: '/flash-card', exact: false },
   { to: '/settings', label: 'Cài đặt', icon: 'settings', matchPrefix: '/settings', exact: false },
 ]
 

src/features/flash-card/api/flashcard-api.ts

@@ -0,0 +1,102 @@
+import { supabase } from '@/lib/supabase'
+
+export interface FlashcardList {
+  id: number
+  title: string
+  description: string | null
+  total_words: number
+  is_public: boolean
+  created_by: string | null
+  created_at: string
+  // aggregated from user progress
+  count_new?: number
+  count_learning?: number
+  count_known?: number
+  progress_pct?: number
+}
+
+export interface FlashcardTerm {
+  id: number
+  list_id: number
+  word: string
+  part_of_speech: string | null
+  phonetic: string | null
+  definition: string | null
+  example: string | null
+  image_url: string | null
+  display_order: number
+}
+
+export interface UserProgress {
+  id: number
+  user_id: string
+  term_id: number
+  list_id: number
+  status: 'new' | 'learning' | 'known' | 'ignored'
+  ease_factor: number
+  review_count: number
+  last_reviewed_at: string | null
+  next_review_at: string | null
+}
+
+/** Fetch all public flashcard lists with term counts */
+export async function fetchFlashcardLists(): Promise<FlashcardList[]> {
+  const { data, error } = await supabase
+    .from('flashcard_list')
+    .select('id, title, description, total_words, is_public, created_by, created_at')
+    .order('created_at', { ascending: false })
+  if (error) throw error
+  return data ?? []
+}
+
+/** Fetch all terms for a flashcard list */
+export async function fetchFlashcardTerms(listId: number): Promise<FlashcardTerm[]> {
+  const { data, error } = await supabase
+    .from('flashcard_term')
+    .select('id, list_id, word, part_of_speech, phonetic, definition, example, image_url, display_order')
+    .eq('list_id', listId)
+    .order('display_order', { ascending: true })
+  if (error) throw error
+  return data ?? []
+}
+
+/** Fetch user progress for all terms in a list */
+export async function fetchUserProgress(userId: string, listId: number): Promise<UserProgress[]> {
+  const { data, error } = await supabase
+    .from('user_flashcard_progress')
+    .select('id, user_id, term_id, list_id, status, ease_factor, review_count, last_reviewed_at, next_review_at')
+    .eq('user_id', userId)
+    .eq('list_id', listId)
+  if (error) throw error
+  return data ?? []
+}
+
+/** Upsert user progress for a term (SRS update) */
+export async function upsertTermProgress(
+  userId: string,
+  termId: number,
+  listId: number,
+  status: UserProgress['status'],
+  easeFactor: number,
+): Promise<void> {
+  const now = new Date().toISOString()
+  // Compute next review date based on ease_factor
+  const intervalDays = easeFactor <= 0 ? 0 : easeFactor >= 1 ? 7 : easeFactor >= 0.65 ? 3 : 1
+  const nextReview = new Date(Date.now() + intervalDays * 24 * 60 * 60 * 1000).toISOString()
+
+  const { error } = await supabase
+    .from('user_flashcard_progress')
+    .upsert(
+      {
+        user_id: userId,
+        term_id: termId,
+        list_id: listId,
+        status,
+        ease_factor: easeFactor,
+        last_reviewed_at: now,
+        next_review_at: nextReview,
+      },
+      { onConflict: 'user_id,term_id,list_id' },
+    )
+  if (error) console.error('Failed to upsert term progress:', error.message)
+}

src/features/flash-card/components/FlashCardLearnPage.tsx

@@ -0,0 +1,301 @@
+import { useState, useCallback } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+import { useAuthStore } from '@/store/auth-store'
+import { fetchFlashcardTerms, fetchUserProgress, upsertTermProgress } from '../api/flashcard-api'
+import type { FlashcardTerm, UserProgress } from '../api/flashcard-api'
+
+const EASE = {
+  ignored: -1,
+  hard: 0.1,
+  easy: 0.65,
+  known: 1.0,
+} as const
+
+type EaseKey = keyof typeof EASE
+
+interface Props {
+  listId: number
+}
+
+export function FlashCardLearnPage({ listId }: Props) {
+  const navigate = useNavigate()
+  const user = useAuthStore(s => s.user)
+  const queryClient = useQueryClient()
+
+  const [isFlipped, setIsFlipped] = useState(false)
+  const [currentIdx, setCurrentIdx] = useState(0)
+  const [sessionStats, setSessionStats] = useState({ known: 0, learning: 0, ignored: 0 })
+  const [isDone, setIsDone] = useState(false)
+
+  const { data: terms = [], isLoading: loadingTerms } = useQuery({
+    queryKey: ['flashcard-terms', listId],
+    queryFn: () => fetchFlashcardTerms(listId),
+  })
+
+  const { data: progress = [] } = useQuery({
+    queryKey: ['flashcard-progress', user?.id, listId],
+    queryFn: () => fetchUserProgress(user!.id, listId),
+    enabled: !!user,
+  })
+
+  const progressMap: Record<number, UserProgress> = {}
+  progress.forEach(p => { progressMap[p.term_id] = p })
+
+  // Prioritize: new + learning terms first, then known
+  const sessionTerms: FlashcardTerm[] = [
+    ...terms.filter(t => {
+      const s = progressMap[t.id]?.status ?? 'new'
+      return s === 'new' || s === 'learning'
+    }),
+    ...terms.filter(t => progressMap[t.id]?.status === 'known'),
+  ]
+
+  const { mutate: saveProgress } = useMutation({
+    mutationFn: ({ termId, status, easeFactor }: { termId: number; status: UserProgress['status']; easeFactor: number }) =>
+      upsertTermProgress(user!.id, termId, listId, status, easeFactor),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['flashcard-progress', user?.id, listId] })
+    },
+  })
+
+  const handleAnswer = useCallback((key: EaseKey) => {
+    const term = sessionTerms[currentIdx]
+    if (!term || !user) return
+
+    const easeFactor = EASE[key]
+    const status: UserProgress['status'] =
+      key === 'known' ? 'known' :
+      key === 'ignored' ? 'ignored' :
+      'learning'
+
+    saveProgress({ termId: term.id, status, easeFactor })
+
+    setSessionStats(prev => ({
+      known: prev.known + (key === 'known' ? 1 : 0),
+      learning: prev.learning + (key === 'easy' || key === 'hard' ? 1 : 0),
+      ignored: prev.ignored + (key === 'ignored' ? 1 : 0),
+    }))
+
+    if (currentIdx + 1 >= sessionTerms.length) {
+      setIsDone(true)
+    } else {
+      setCurrentIdx(i => i + 1)
+      setIsFlipped(false)
+    }
+  }, [currentIdx, sessionTerms, user, saveProgress])
+
+  const total = sessionTerms.length
+  const progressPct = total > 0 ? Math.round((currentIdx / total) * 100) : 0
+  const current = sessionTerms[currentIdx]
+
+  if (loadingTerms) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="w-8 h-8 border-2 border-blue-100 border-t-blue-600 rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (sessionTerms.length === 0) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center gap-4 px-4">
+        <span className="material-symbols-outlined text-slate-300" style={{ fontSize: 56, fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+        <h2 className="text-xl font-bold text-slate-700">Không có thẻ nào để học!</h2>
+        <p className="text-slate-400 text-sm text-center">Bộ thẻ này chưa có từ nào. Vui lòng thêm từ trước.</p>
+        <button
+          onClick={() => navigate({ to: '/flash-card/$listId', params: { listId: String(listId) } })}
+          className="mt-2 px-6 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors"
+        >
+          Quay lại
+        </button>
+      </div>
+    )
+  }
+
+  if (isDone) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center gap-6 px-4">
+        <div className="text-center">
+          <span className="material-symbols-outlined text-emerald-500 block mb-3" style={{ fontSize: 64, fontVariationSettings: "'FILL' 1" }}>celebration</span>
+          <h2 className="text-2xl font-extrabold text-slate-800 mb-1">Hoàn thành phiên học!</h2>
+          <p className="text-slate-500">Bạn đã ôn xong {total} thẻ trong phiên này</p>
+        </div>
+        <div className="flex gap-4">
+          <div className="text-center px-5 py-3 bg-emerald-50 rounded-xl border border-emerald-100">
+            <div className="text-2xl font-extrabold text-emerald-600">{sessionStats.known}</div>
+            <div className="text-xs text-slate-400 mt-0.5">Đã biết</div>
+          </div>
+          <div className="text-center px-5 py-3 bg-blue-50 rounded-xl border border-blue-100">
+            <div className="text-2xl font-extrabold text-blue-600">{sessionStats.learning}</div>
+            <div className="text-xs text-slate-400 mt-0.5">Đang học</div>
+          </div>
+          <div className="text-center px-5 py-3 bg-slate-50 rounded-xl border border-slate-200">
+            <div className="text-2xl font-extrabold text-slate-500">{sessionStats.ignored}</div>
+            <div className="text-xs text-slate-400 mt-0.5">Bỏ qua</div>
+          </div>
+        </div>
+        <div className="flex gap-3">
+          <button
+            onClick={() => {
+              setCurrentIdx(0)
+              setIsFlipped(false)
+              setIsDone(false)
+              setSessionStats({ known: 0, learning: 0, ignored: 0 })
+            }}
+            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>
+            Học lại
+          </button>
+          <button
+            onClick={() => navigate({ to: '/flash-card/$listId', params: { listId: String(listId) } })}
+            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 }}>list</span>
+            Xem danh sách
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col bg-slate-50">
+      {/* Header */}
+      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-xl border-b border-slate-100">
+        <div className="max-w-3xl mx-auto px-6 py-3.5 flex items-center justify-between">
+          <span className="text-base font-bold text-slate-800">Phiên học từ vựng</span>
+          <div className="flex items-center gap-4">
+            <span className="text-sm text-slate-500 font-medium">{currentIdx + 1} / {total} từ</span>
+            <button
+              onClick={() => navigate({ to: '/flash-card/$listId', params: { listId: String(listId) } })}
+              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors"
+            >
+              <span className="material-symbols-outlined text-slate-500" style={{ fontSize: 20 }}>close</span>
+            </button>
+          </div>
+        </div>
+        {/* Progress bar */}
+        <div className="w-full bg-slate-100 h-1 overflow-hidden">
+          <div
+            className="h-full bg-blue-600 transition-all duration-500"
+            style={{ width: `${progressPct}%` }}
+          />
+        </div>
+      </header>
+
+      <main className="flex-1 max-w-3xl mx-auto w-full px-4 py-10 flex flex-col items-center">
+        {/* Session stats pills */}
+        <div className="flex items-center gap-3 mb-10">
+          <div className="px-4 py-1.5 rounded-full bg-emerald-50 text-emerald-700 text-sm font-semibold flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-emerald-500" />
+            {sessionStats.known} biết
+          </div>
+          <div className="px-4 py-1.5 rounded-full bg-blue-50 text-blue-700 text-sm font-semibold flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-blue-500" />
+            {sessionStats.learning} đang học
+          </div>
+          <div className="px-4 py-1.5 rounded-full bg-slate-100 text-slate-500 text-sm font-semibold flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-slate-400" />
+            {sessionStats.ignored} bỏ qua
+          </div>
+        </div>
+
+        {/* Flashcard */}
+        {current && (
+          <div className="relative group w-full max-w-xl">
+            <div className="absolute -inset-4 bg-blue-600/5 blur-3xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
+            <div
+              className="relative w-full min-h-[280px] bg-white rounded-2xl shadow-lg border border-slate-200/60 flex flex-col items-center justify-between py-8 px-8 cursor-pointer hover:scale-[1.01] hover:border-blue-200 transition-all duration-300 select-none"
+              onClick={() => setIsFlipped(v => !v)}
+              role="button"
+              aria-label={isFlipped ? 'Nhấp để xem từ' : 'Nhấp để xem nghĩa'}
+            >
+              {!isFlipped ? (
+                <>
+                  <div className="text-xs font-bold tracking-widest text-slate-400 uppercase">TIẾNG ANH</div>
+                  <div className="flex flex-col items-center gap-2 text-center">
+                    <h1 className="text-5xl font-extrabold tracking-tight text-blue-600">{current.word}</h1>
+                    {current.phonetic && (
+                      <span className="text-slate-500 italic font-light text-lg">{current.phonetic}</span>
+                    )}
+                    {current.part_of_speech && (
+                      <span className="mt-3 px-3 py-1 bg-blue-50 text-blue-600 text-[11px] font-bold uppercase tracking-wider rounded-lg">
+                        {current.part_of_speech}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 text-slate-400 hover:text-slate-600 transition-colors">
+                    <span className="material-symbols-outlined" style={{ fontSize: 18 }}>flip</span>
+                    <span className="text-sm font-medium">Nhấp để xem nghĩa</span>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="text-xs font-bold tracking-widest text-slate-400 uppercase">NGHĨA</div>
+                  <div className="flex flex-col items-center gap-3 text-center">
+                    <p className="text-2xl font-bold text-slate-800">{current.definition ?? '—'}</p>
+                    {current.example && (
+                      <p className="text-sm text-slate-500 italic bg-slate-50 rounded-xl px-4 py-2.5 border border-slate-100 max-w-sm">
+                        "{current.example}"
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 text-slate-400 hover:text-slate-600 transition-colors">
+                    <span className="material-symbols-outlined" style={{ fontSize: 18 }}>flip</span>
+                    <span className="text-sm font-medium">Nhấp để xem từ</span>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Action buttons */}
+        <div className="mt-12 flex flex-col items-center gap-4 w-full max-w-xl">
+          <div className={cn(
+            'flex items-stretch gap-3 w-full h-14 transition-all duration-300',
+            !isFlipped && 'opacity-40 pointer-events-none',
+          )}>
+            <button
+              onClick={() => handleAnswer('ignored')}
+              className="flex-1 flex items-center justify-center gap-2 rounded-2xl border-2 border-slate-200 text-slate-500 font-bold text-sm hover:bg-slate-100 transition-all"
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>close</span>
+              Bỏ qua
+            </button>
+            <button
+              onClick={() => handleAnswer('hard')}
+              className="flex-1 flex items-center justify-center gap-2 rounded-2xl bg-amber-500 text-white font-bold text-sm shadow-md shadow-amber-500/20 hover:bg-amber-600 transition-all"
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>warning</span>
+              Khó
+            </button>
+            <button
+              onClick={() => handleAnswer('easy')}
+              className="flex-1 flex items-center justify-center gap-2 rounded-2xl bg-blue-600 text-white font-bold text-sm shadow-md shadow-blue-600/20 hover:bg-blue-700 transition-all"
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: 18, fontVariationSettings: "'FILL' 1" }}>thumb_up</span>
+              Dễ
+            </button>
+            <button
+              onClick={() => handleAnswer('known')}
+              className="flex-1 flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 text-white font-bold text-sm shadow-md shadow-emerald-600/20 hover:bg-emerald-700 transition-all"
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: 18, fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+              Đã biết
+            </button>
+          </div>
+          {!isFlipped && (
+            <p className="text-sm text-slate-400 font-medium">Lật thẻ trước khi đánh giá</p>
+          )}
+          {isFlipped && (
+            <p className="text-sm text-slate-400 font-medium">Còn {total - currentIdx - 1} thẻ trong phiên này</p>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}

src/features/flash-card/components/FlashCardListPage.tsx

@@ -0,0 +1,152 @@
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { fetchFlashcardLists } from '../api/flashcard-api'
+import { useAuthStore } from '@/store/auth-store'
+import { fetchUserProgress } from '../api/flashcard-api'
+import type { FlashcardList } from '../api/flashcard-api'
+
+function ListCard({ list, userId }: { list: FlashcardList; userId: string | null }) {
+  const navigate = useNavigate()
+
+  const { data: progress = [] } = useQuery({
+    queryKey: ['flashcard-progress', userId, list.id],
+    queryFn: () => fetchUserProgress(userId!, list.id),
+    enabled: !!userId,
+  })
+
+  const countNew = list.total_words - progress.filter(p => p.status !== 'new').length
+  const countLearning = progress.filter(p => p.status === 'learning').length
+  const countKnown = progress.filter(p => p.status === 'known').length
+  const progressPct = list.total_words > 0
+    ? Math.round(((countLearning + countKnown) / list.total_words) * 100)
+    : 0
+
+  return (
+    <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 flex flex-col hover:-translate-y-1 transition-transform duration-300">
+      <div className="flex justify-between items-start mb-4">
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center flex-shrink-0">
+            <span className="material-symbols-outlined text-blue-600" style={{ fontSize: 24 }}>layers</span>
+          </div>
+          <div>
+            <h3 className="text-base font-bold text-slate-800 leading-tight">{list.title}</h3>
+            <div className="flex items-center gap-1.5 mt-0.5">
+              <span className="material-symbols-outlined text-slate-400" style={{ fontSize: 14 }}>book</span>
+              <span className="text-xs text-slate-500 font-medium">{list.total_words} từ</span>
+            </div>
+          </div>
+        </div>
+        <span className={`text-[11px] font-bold tracking-wide uppercase px-2.5 py-1 rounded-full ${
+          list.is_public ? 'bg-blue-50 text-blue-700' : 'bg-slate-100 text-slate-500'
+        }`}>
+          {list.is_public ? 'Công khai' : 'Riêng tư'}
+        </span>
+      </div>
+
+      {list.description && (
+        <p className="text-xs text-slate-500 mb-3 line-clamp-2">{list.description}</p>
+      )}
+
+      <div className="mt-2 mb-4">
+        <div className="flex justify-between items-center mb-1.5">
+          <span className="text-xs font-bold text-emerald-600">Tiến độ: {progressPct}%</span>
+        </div>
+        <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-emerald-500 rounded-full transition-all duration-500"
+            style={{ width: `${progressPct}%` }}
+          />
+        </div>
+      </div>
+
+      <div className="flex gap-2 mb-5">
+        <div className="flex-1 py-2 bg-slate-50 rounded-lg text-center">
+          <p className="text-[10px] uppercase font-bold text-slate-400">Mới</p>
+          <p className="text-sm font-bold text-slate-600">{countNew}</p>
+        </div>
+        <div className="flex-1 py-2 bg-blue-50 rounded-lg text-center">
+          <p className="text-[10px] uppercase font-bold text-blue-500">Học</p>
+          <p className="text-sm font-bold text-blue-600">{countLearning}</p>
+        </div>
+        <div className="flex-1 py-2 bg-emerald-50 rounded-lg text-center">
+          <p className="text-[10px] uppercase font-bold text-emerald-600">Biết</p>
+          <p className="text-sm font-bold text-emerald-600">{countKnown}</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3 mt-auto">
+        <button
+          onClick={() => navigate({ to: '/flash-card/$listId', params: { listId: String(list.id) } })}
+          className="border-2 border-blue-600 text-blue-600 font-bold py-2.5 rounded-xl text-sm hover:bg-blue-50 transition-colors"
+        >
+          Xem thẻ
+        </button>
+        <button
+          onClick={() => navigate({ to: '/flash-card/$listId/learn', params: { listId: String(list.id) } })}
+          className="bg-gradient-to-br from-blue-600 to-blue-500 text-white font-bold py-2.5 rounded-xl text-sm shadow-md shadow-blue-500/20 hover:opacity-90 active:scale-95 transition-all"
+        >
+          Học ngay
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export function FlashCardListPage() {
+  const user = useAuthStore(s => s.user)
+  const { data: lists = [], isLoading, isError } = useQuery({
+    queryKey: ['flashcard-lists'],
+    queryFn: fetchFlashcardLists,
+  })
+
+  return (
+    <div className="px-4 lg:px-6 py-6 max-w-6xl mx-auto page-enter">
+      <div className="flex justify-between items-end mb-8">
+        <div>
+          <h1 className="text-2xl font-extrabold text-slate-800 tracking-tight">Bộ Thẻ Từ Vựng</h1>
+          <p className="text-slate-500 mt-1">Chọn bộ thẻ để bắt đầu học</p>
+        </div>
+        <div className="hidden lg:flex items-center gap-2 bg-slate-100 px-4 py-2 rounded-full text-slate-500 text-sm font-medium border border-slate-200">
+          <span className="material-symbols-outlined" style={{ fontSize: 16 }}>filter_list</span>
+          Sắp xếp: Mới nhất
+        </div>
+      </div>
+
+      {isLoading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="bg-white rounded-2xl border border-slate-200 p-6 h-64 animate-pulse">
+              <div className="flex gap-3 mb-4">
+                <div className="w-12 h-12 bg-slate-100 rounded-xl" />
+                <div className="flex-1">
+                  <div className="h-4 bg-slate-100 rounded mb-2" />
+                  <div className="h-3 bg-slate-100 rounded w-2/3" />
+                </div>
+              </div>
+              <div className="h-2 bg-slate-100 rounded-full mb-4" />
+              <div className="flex gap-2">
+                {[0, 1, 2].map(j => <div key={j} className="flex-1 h-12 bg-slate-100 rounded-lg" />)}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : isError ? (
+        <div className="bg-red-50 border border-red-100 rounded-2xl p-10 text-center">
+          <p className="text-red-500 text-sm">Không thể tải danh sách bộ thẻ. Vui lòng thử lại.</p>
+        </div>
+      ) : lists.length === 0 ? (
+        <div className="bg-white border border-slate-200 rounded-2xl p-16 text-center">
+          <span className="material-symbols-outlined text-slate-300 mb-3 block" style={{ fontSize: 48 }}>library_books</span>
+          <p className="text-slate-500 font-medium">Chưa có bộ thẻ nào.</p>
+          <p className="text-slate-400 text-sm mt-1">Bộ thẻ từ vựng TOEIC sẽ được thêm sớm!</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {lists.map(list => (
+            <ListCard key={list.id} list={list} userId={user?.id ?? null} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

src/features/flash-card/components/FlashCardTermsPage.tsx

@@ -0,0 +1,187 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+import { useAuthStore } from '@/store/auth-store'
+import { fetchFlashcardTerms, fetchUserProgress } from '../api/flashcard-api'
+import type { FlashcardTerm, UserProgress } from '../api/flashcard-api'
+
+type FilterStatus = 'all' | 'new' | 'learning' | 'known' | 'ignored'
+
+const STATUS_LABEL: Record<string, string> = {
+  new: 'Mới',
+  learning: 'Đang học',
+  known: 'Đã biết',
+  ignored: 'Bỏ qua',
+}
+
+const STATUS_STYLE: Record<string, string> = {
+  new: 'bg-slate-100 text-slate-500',
+  learning: 'bg-blue-50 text-blue-700',
+  known: 'bg-emerald-50 text-emerald-700',
+  ignored: 'bg-rose-50 text-rose-600',
+}
+
+interface Props {
+  listId: number
+}
+
+export function FlashCardTermsPage({ listId }: Props) {
+  const navigate = useNavigate()
+  const user = useAuthStore(s => s.user)
+  const [filter, setFilter] = useState<FilterStatus>('all')
+  const [search, setSearch] = useState('')
+
+  const { data: terms = [], isLoading: loadingTerms } = useQuery({
+    queryKey: ['flashcard-terms', listId],
+    queryFn: () => fetchFlashcardTerms(listId),
+  })
+
+  const { data: progress = [] } = useQuery({
+    queryKey: ['flashcard-progress', user?.id, listId],
+    queryFn: () => fetchUserProgress(user!.id, listId),
+    enabled: !!user,
+  })
+
+  const progressMap: Record<number, UserProgress> = {}
+  progress.forEach(p => { progressMap[p.term_id] = p })
+
+  const getStatus = (termId: number): UserProgress['status'] =>
+    progressMap[termId]?.status ?? 'new'
+
+  const countAll = terms.length
+  const countNew = terms.filter(t => getStatus(t.id) === 'new').length
+  const countLearning = terms.filter(t => getStatus(t.id) === 'learning').length
+  const countKnown = terms.filter(t => getStatus(t.id) === 'known').length
+
+  const filtered = terms.filter(t => {
+    if (filter !== 'all' && getStatus(t.id) !== filter) return false
+    if (search.trim()) {
+      const q = search.toLowerCase()
+      return (
+        t.word.toLowerCase().includes(q) ||
+        (t.definition ?? '').toLowerCase().includes(q)
+      )
+    }
+    return true
+  })
+
+  return (
+    <div className="px-4 lg:px-6 py-6 max-w-6xl mx-auto page-enter">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-6">
+        <button
+          onClick={() => navigate({ to: '/flash-card' })}
+          className="w-9 h-9 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors"
+        >
+          <span className="material-symbols-outlined text-slate-600" style={{ fontSize: 22 }}>arrow_back</span>
+        </button>
+        <div>
+          <h1 className="text-xl font-bold text-slate-800 tracking-tight">Bộ thẻ từ vựng</h1>
+          <span className="text-sm text-slate-400 font-medium">{countAll} từ</span>
+        </div>
+      </div>
+
+      {/* Hero actions + stats */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => navigate({ to: '/flash-card/$listId/learn', params: { listId: String(listId) } })}
+            className="bg-gradient-to-br from-blue-600 to-blue-500 text-white px-6 py-3 rounded-xl flex items-center gap-2 font-bold text-sm shadow-md shadow-blue-500/20 hover:opacity-90 active:scale-95 transition-all"
+          >
+            <span className="material-symbols-outlined" style={{ fontSize: 18, fontVariationSettings: "'FILL' 1" }}>play_arrow</span>
+            Bắt đầu học
+          </button>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <span className="px-3 py-1.5 bg-slate-100 text-slate-600 rounded-full text-xs font-semibold">Tổng: {countAll}</span>
+          <span className="px-3 py-1.5 bg-slate-100 text-slate-500 rounded-full text-xs font-semibold">Mới: {countNew}</span>
+          <span className="px-3 py-1.5 bg-blue-50 text-blue-600 rounded-full text-xs font-semibold">Đang học: {countLearning}</span>
+          <span className="px-3 py-1.5 bg-emerald-50 text-emerald-600 rounded-full text-xs font-semibold">Đã biết: {countKnown}</span>
+        </div>
+      </div>
+
+      {/* Filter + Search */}
+      <div className="bg-slate-50 rounded-2xl p-5 mb-6">
+        <div className="flex flex-col md:flex-row md:items-center gap-4 justify-between">
+          <div className="relative flex-1 max-w-sm">
+            <span className="material-symbols-outlined absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" style={{ fontSize: 18 }}>search</span>
+            <input
+              type="text"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder="Tìm kiếm từ..."
+              className="w-full pl-10 pr-4 py-2.5 bg-white rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 transition-all"
+            />
+          </div>
+          <div className="flex items-center gap-2 overflow-x-auto pb-1 md:pb-0">
+            {(['all', 'new', 'learning', 'known', 'ignored'] as FilterStatus[]).map(f => (
+              <button
+                key={f}
+                onClick={() => setFilter(f)}
+                className={cn(
+                  'px-4 py-2 rounded-full text-xs font-bold whitespace-nowrap transition-colors',
+                  filter === f
+                    ? 'bg-slate-800 text-white'
+                    : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-100',
+                )}
+              >
+                {f === 'all' ? 'Tất cả' : STATUS_LABEL[f]}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Terms list */}
+      {loadingTerms ? (
+        <div className="space-y-3">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="bg-white rounded-xl border border-slate-100 p-5 h-16 animate-pulse" />
+          ))}
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="bg-white border border-slate-200 rounded-2xl p-12 text-center">
+          <p className="text-slate-400 text-sm">Không tìm thấy từ nào phù hợp.</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {filtered.map(term => (
+            <TermRow key={term.id} term={term} status={getStatus(term.id)} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function TermRow({ term, status }: { term: FlashcardTerm; status: UserProgress['status'] }) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-100 p-5 flex items-center gap-4 hover:shadow-sm transition-shadow">
+      <div className="w-1/4 min-w-0">
+        <div className="flex items-baseline gap-2 mb-1 flex-wrap">
+          <h3 className="text-base font-extrabold text-blue-600 tracking-tight truncate">{term.word}</h3>
+          {term.phonetic && (
+            <span className="text-xs text-slate-400 font-medium shrink-0">{term.phonetic}</span>
+          )}
+        </div>
+        {term.part_of_speech && (
+          <span className="text-[10px] uppercase tracking-wider font-bold px-2 py-0.5 bg-slate-100 text-slate-500 rounded">
+            {term.part_of_speech}
+          </span>
+        )}
+      </div>
+      <div className="flex-1 min-w-0 text-slate-700 font-medium text-sm line-clamp-2">
+        {term.definition ?? '—'}
+      </div>
+      <div className="flex items-center gap-4 flex-shrink-0">
+        <span className={cn('px-3 py-1.5 rounded-full text-xs font-bold', STATUS_STYLE[status])}>
+          {STATUS_LABEL[status]}
+        </span>
+        <button className="text-slate-300 hover:text-slate-500 transition-colors">
+          <span className="material-symbols-outlined" style={{ fontSize: 20 }}>more_vert</span>
+        </button>
+      </div>
+    </div>
+  )
+}

src/features/home/components/Home.tsx

@@ -28,7 +28,7 @@ const FEATURES = [
     stat: '3 lượt / ngày',
   },
   {
-    to: '/vocab',
+    to: '/flash-card',
     icon: 'menu_book',
     iconBg: 'bg-amber-50',
     iconColor: 'text-amber-600',

src/features/toeic/api/test-list-api.ts

@@ -0,0 +1,53 @@
+import { supabase } from '@/lib/supabase'
+import type { TestRecord, PartRecord } from '@/types'
+
+export async function fetchTests(): Promise<TestRecord[]> {
+  const { data, error } = await supabase
+    .from('test')
+    .select('id, title, description, total_questions, duration_minutes, test_category(name)')
+    .order('id')
+  if (error) throw error
+  return (data ?? []).map((row: Record<string, unknown>) => ({
+    id: row.id as number,
+    title: row.title as string,
+    description: row.description as string | null,
+    totalQuestions: row.total_questions as number,
+    durationMinutes: row.duration_minutes as number,
+    categoryName: (row.test_category as { name: string } | null)?.name ?? null,
+  }))
+}
+
+export async function fetchTestWithParts(testId: number): Promise<{ test: TestRecord; parts: PartRecord[] }> {
+  const { data: testRow, error: testErr } = await supabase
+    .from('test')
+    .select('id, title, description, total_questions, duration_minutes, test_category(name)')
+    .eq('id', testId)
+    .single()
+  if (testErr) throw testErr
+
+  const { data: partRows, error: partErr } = await supabase
+    .from('part')
+    .select('id, test_id, part_number, title, question_count')
+    .eq('test_id', testId)
+    .order('part_number')
+  if (partErr) throw partErr
+
+  const row = testRow as Record<string, unknown>
+  return {
+    test: {
+      id: row.id as number,
+      title: row.title as string,
+      description: row.description as string | null,
+      totalQuestions: row.total_questions as number,
+      durationMinutes: row.duration_minutes as number,
+      categoryName: (row.test_category as { name: string } | null)?.name ?? null,
+    },
+    parts: (partRows ?? []).map((p: Record<string, unknown>) => ({
+      id: p.id as number,
+      testId: p.test_id as number,
+      partNumber: p.part_number as number,
+      title: p.title as string,
+      questionCount: p.question_count as number,
+    })),
+  }
+}

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,
+      testId,
-      partName,
+      selectedParts: parts.map(p => p.partNumber),
-      score: answers.filter((a, i) => a === questions[i]?.correctAnswer).length,
+      score: correct,
-      total: questions.length,
+      total: allQuestions.length,
       timeUsed,
-      answers: questions.map((q, i) => ({
+      answers: allQuestions.map(q => ({
         questionId: q.id,
-        selected: answers[i],
+        selected: answers[q.id] ?? null,
-        correct: answers[i] === q.correctAnswer,
+        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
+  if (allQuestions.length === 0) {
-  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) {
     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
+        <button onClick={() => navigate({ to: '/toeic' })}
-          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">
-          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
-        >
-          Chọn Part để luyệ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
+              <circle cx="60" cy="60" r="52" fill="none"
-                cx="60"
-                cy="60"
-                r="52"
-                fill="none"
                 stroke={percent >= 70 ? '#16a34a' : percent >= 50 ? '#2563eb' : '#dc2626'}
-                strokeWidth="8"
+                strokeWidth="8" strokeLinecap="round"
-                strokeLinecap="round"
+                strokeDasharray={circumference} strokeDashoffset={offset}
-                strokeDasharray={circumference}
+                className="transition-all duration-700" />
-                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">
+            <div className="text-sm text-slate-400 mb-4">{testName}</div>
-              Part {partId} — {partName}
-            </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>
+                { label: 'Đúng', value: correct, cls: 'bg-green-50 border-green-100 text-green-600' },
-                <div className="text-xs text-slate-400">Đúng</div>
+                { label: 'Sai', value: wrong, cls: 'bg-red-50 border-red-100 text-red-600' },
-              </div>
+                { label: 'Bỏ qua', value: skipped, cls: 'bg-slate-50 border-slate-200 text-slate-500' },
-              <div className="bg-red-50 border border-red-100 rounded-xl px-4 py-2 text-center">
+                { label: 'Thời gian', value: formatTime(timeUsed), cls: 'bg-blue-50 border-blue-100 text-blue-600' },
-                <div className="text-xl font-extrabold text-red-600">{wrong}</div>
+              ].map(({ label, value, cls }) => (
-                <div className="text-xs text-slate-400">Sai</div>
+                <div key={label} className={cn('border rounded-xl px-4 py-2 text-center', cls)}>
-              </div>
+                  <div className="text-xl font-extrabold">{value}</div>
-              <div className="bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-center">
+                  <div className="text-xs text-slate-400">{label}</div>
-                <div className="text-xl font-extrabold text-slate-500">{skipped}</div>
+                </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>
             </div>
           </div>
 
-          {/* Actions */}
           <div className="flex lg:flex-col gap-3 flex-shrink-0">
-            <button
+            <button onClick={() => navigate({ to: '/toeic/session' })}
-              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">
-              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
-            >
-              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>replay</span>
-              Làm lại
             </button>
-            <button
+            <button onClick={() => { reset(); navigate({ to: '/toeic' }) }}
-              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">
-              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ủ
-            >
-              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>home</span>
-              Về trang chủ
             </button>
           </div>
         </div>
       </div>
 
-      {/* Answer review */}
+      {/* Answer review grouped by part */}
-      <div className="bg-white rounded-2xl border border-slate-200 p-6">
+      {parts.map(part => (
-        <h2 className="text-base font-bold text-slate-800 mb-4">Xem lại đáp án</h2>
+        <div key={part.partNumber} className="bg-white rounded-2xl border border-slate-200 p-6 mb-4">
-        <div className="space-y-4">
+          <h2 className="text-base font-bold text-slate-800 mb-4">Part {part.partNumber} — {part.partName}</h2>
-          {questions.map((q, i) => {
+          <div className="space-y-4">
-            const userAnswer = answers[i]
+            {part.questions.map((q, i) => {
-            const isCorrect = userAnswer === q.correctAnswer
+              const userAnswer = answers[q.id] ?? null
-            const isSkipped = userAnswer === null
+              const isCorrect = userAnswer === q.correctAnswer
-
+              const isSkipped = userAnswer === null || userAnswer === undefined
-            return (
+              return (
-              <div
+                <div key={q.id} className={cn(
-                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">
-                <div className="flex items-start gap-3">
+                    <span className={cn(
-                  <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">
-                    {i + 1}
+                      {q.text && <p className="text-sm font-medium text-slate-800 mb-2">{q.text}</p>}
-                  </span>
+                      <div className="flex flex-wrap gap-2 mb-2">
-                  <div className="flex-1 min-w-0">
+                        {q.options.map((opt, j) => (
-                    <p className="text-sm font-medium text-slate-800 mb-2">{q.text}</p>
+                          <span key={j} className={cn(
-                    <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
+                            j === q.correctAnswer ? 'bg-green-100 text-green-700 border border-green-200'
-                              ? '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 === userAnswer && !isCorrect
-                                ? 'bg-red-100 text-red-700 border border-red-200 line-through'
                                 : 'bg-slate-100 text-slate-500',
-                          )}
+                          )}>
-                        >
+                            {ANSWER_LABELS[j]}. {opt}
-                          {['A', 'B', 'C', 'D'][j]}. {opt}
+                          </span>
-                        </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 && (
+                    <span className="flex-shrink-0">
-                      <p className="text-xs text-slate-500 bg-white rounded-lg px-3 py-2 border border-slate-100">
+                      {isCorrect
-                        <span className="font-semibold text-slate-600">Giải thích: </span>
+                        ? <span className="material-symbols-outlined text-green-600" style={{ fontSize: 20 }}>check_circle</span>
-                        {q.explanation}
+                        : isSkipped
-                      </p>
+                          ? <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) {
+function QuestionCard({
-  return `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`
+  question, globalNum, answer, onSelect,
-}
+}: {
-
+  question: Question
-export function TestSession() {
+  globalNum: number
-  const navigate = useNavigate()
+  answer: number | null
-  const { partId, partName, questions, answers, setAnswer, submitExam } = useTestStore()
+  onSelect: (idx: number) => void
-  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
-
   return (
-    <div className="px-4 lg:px-6 py-6 max-w-6xl mx-auto page-enter">
+    <div className="bg-white rounded-2xl border border-slate-200 p-6 mb-4">
-      {/* Mobile progress bar */}
+      <span className="inline-block bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
-      <div className="lg:hidden mb-4">
+        Câu {globalNum}
-        <div className="flex justify-between text-sm font-semibold mb-2">
+      </span>
-          <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')}>
+      {question.passageText && (
-            {formatTime(timeLeft)}
+        <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">
-          </span>
+          {question.passageText}
         </div>
-        <div className="h-1.5 w-full rounded-full bg-slate-200">
+      )}
-          <div
+      {question.audioUrl && (
-            className="h-full bg-blue-600 rounded-full transition-all"
+        <audio controls src={question.audioUrl} className="w-full mb-4 rounded-lg" />
-            style={{ width: `${((currentQ + 1) / questions.length) * 100}%` }}
+      )}
-          />
+      {question.imageUrl && (
-        </div>
+        <img src={question.imageUrl} alt="" className="max-h-64 rounded-xl mb-4 object-contain" />
-      </div>
+      )}
-
+      {question.text && (
-      <div className="flex gap-5">
+        <p className="text-base font-medium text-slate-800 leading-relaxed mb-5">{question.text}</p>
-        {/* 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>
 
+      <div className="space-y-2.5">
+        {question.options.map((opt, i) => (
           <button
-            onClick={handleSubmit}
+            key={i}
-            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"
+            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>
+            <span className={cn(
-            Nộp bài
+              '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>
+  )
+}

src/hooks/use-questions.ts

@@ -1,35 +1,96 @@
-import { useQuery } from "@tanstack/react-query"
 import { supabase } from "@/lib/supabase"
-import type { Question } from "@/types"
+import type { Question, SessionPart } from "@/types"
 
-const ANSWER_INDEX: Record<string, number> = { A: 0, B: 1, C: 2, D: 3 }
+type AnswerChoiceRow = { value: string; label_text: string | null; is_correct: boolean }
+type QuestionRow = { id: number; question_text: string | null; explanation: string | null; group_id: number; answer_choice: AnswerChoiceRow[] }
+type GroupRow = { id: number; part_id: number; audio_url: string | null; image_url: string | null; passage_text: string | null }
+type PartRow = { id: number; part_number: number }
 
-// Maps a Supabase row to the shared Question interface.
+function buildOptions(choices: AnswerChoiceRow[]): string[] {
-// DB uses `content` + `answer` ('A'–'D'); interface uses `text` + `correctAnswer` (0–3).
+  return [...choices].sort((a, b) => a.value.localeCompare(b.value)).map(c => c.label_text ?? '')
-function rowToQuestion(row: Record<string, unknown>): Question {
+}
+
+function getCorrectIndex(choices: AnswerChoiceRow[]): number {
+  const sorted = [...choices].sort((a, b) => a.value.localeCompare(b.value))
+  const idx = sorted.findIndex(c => c.is_correct)
+  return idx >= 0 ? idx : 0
+}
+
+function rowToQuestion(row: QuestionRow, group: GroupRow, partNumber: number): Question {
   return {
-    id: row.id as string,
+    id: row.id,
-    part: row.part as number,
+    partNumber,
-    text: row.content as string,
+    text: row.question_text,
-    options: row.options as string[],
+    options: buildOptions(row.answer_choice),
-    correctAnswer: ANSWER_INDEX[(row.answer as string).toUpperCase()] ?? 0,
+    correctAnswer: getCorrectIndex(row.answer_choice),
-    explanation: (row.explanation as string) ?? '',
+    explanation: row.explanation,
+    groupId: row.group_id,
+    audioUrl: group.audio_url ?? undefined,
+    imageUrl: group.image_url ?? undefined,
+    passageText: group.passage_text ?? undefined,
   }
 }
 
-// Exported for imperative use (e.g. ToeicPractice click handler).
+/**
-// part=0 fetches all parts (Full Test).
+ * Fetch all questions for a test, optionally filtered to specific part numbers.
-export async function fetchQuestions(part: number, limit = 10): Promise<Question[]> {
+ * partNumbers=[] or undefined → fetch all parts of the test.
-  let query = supabase.from('questions').select('*').limit(limit)
+ * Returns questions grouped into SessionPart[] ordered by part_number.
-  if (part > 0) query = query.eq('part', part)
+ */
-  const { data, error } = await query
+export async function fetchQuestionsForTest(
-  if (error) throw error
+  testId: number,
-  return (data ?? []).map(rowToQuestion)
+  partNumbers?: number[],
-}
+): Promise<SessionPart[]> {
+  // Step 1: Get parts for this test
+  let partsQuery = supabase.from('part').select('id, part_number, title').eq('test_id', testId).order('part_number')
+  if (partNumbers?.length) partsQuery = partsQuery.in('part_number', partNumbers)
+  const { data: parts, error: partsError } = await partsQuery
+  if (partsError) throw partsError
+  if (!parts?.length) return []
 
-export function useQuestions(part: number, limit = 10) {
+  const partRows = parts as (PartRow & { title: string })[]
-  return useQuery({
+  const partIds = partRows.map(p => p.id)
-    queryKey: ['questions', part, limit],
+  const partNumberById = new Map(partRows.map(p => [p.id, p.part_number]))
-    queryFn: () => fetchQuestions(part, limit),
+  const partTitleByNumber = new Map(partRows.map(p => [p.part_number, p.title]))
-  })
+
+  // Step 2: Get question_groups for those parts
+  const { data: groups, error: groupsError } = await supabase
+    .from('question_group')
+    .select('id, part_id, audio_url, image_url, passage_text')
+    .in('part_id', partIds)
+  if (groupsError) throw groupsError
+  if (!groups?.length) return []
+
+  const groupMap = new Map<number, GroupRow>((groups as GroupRow[]).map(g => [g.id, g]))
+  const groupIds = (groups as GroupRow[]).map(g => g.id)
+
+  // Step 3: Get questions with answer choices
+  const { data: rows, error } = await supabase
+    .from('question')
+    .select('id, question_text, explanation, group_id, answer_choice(value, label_text, is_correct)')
+    .in('group_id', groupIds)
+    .order('question_number')
+  if (error) throw error
+
+  const questions = (rows as QuestionRow[] ?? [])
+    .map(row => {
+      const group = groupMap.get(row.group_id)!
+      const partNumber = partNumberById.get(group.part_id)!
+      return rowToQuestion(row, group, partNumber)
+    })
+    .filter(q => q.options.length > 0)
+
+  // Group into SessionPart[] ordered by partNumber
+  const byPart = new Map<number, Question[]>()
+  for (const q of questions) {
+    if (!byPart.has(q.partNumber)) byPart.set(q.partNumber, [])
+    byPart.get(q.partNumber)!.push(q)
+  }
+
+  return partRows
+    .filter(p => byPart.has(p.part_number))
+    .map(p => ({
+      partNumber: p.part_number,
+      partName: partTitleByNumber.get(p.part_number) ?? `Part ${p.part_number}`,
+      questions: byPart.get(p.part_number)!,
+    }))
 }

src/lib/progress-service.ts

@@ -1,22 +1,47 @@
 import { supabase } from '@/lib/supabase'
 
+const ANSWER_VALUES = ['A', 'B', 'C', 'D'] as const
+
 interface TestResultData {
-  partId: number
+  testId: number | null
-  partName: string
+  selectedParts: number[]
   score: number
   total: number
   timeUsed: number
-  answers: { questionId: string; selected: number | null; correct: boolean }[]
+  answers: { questionId: number; selected: number | null; correct: boolean }[]
 }
 
 /** Fire-and-forget: save test result. Failures are logged but don't block UI. */
 export async function saveTestResult(userId: string, data: TestResultData): Promise<void> {
-  const { error } = await supabase.from('user_progress').insert({
+  const { data: attempt, error: attemptError } = await supabase
-    user_id: userId,
+    .from('user_test_attempt')
-    type: 'test',
+    .insert({
-    data,
+      user_id: userId,
-  })
+      test_id: data.testId,
-  if (error) console.error('Failed to save test result:', error.message)
+      selected_parts: data.selectedParts,
+      time_limit_minutes: 10,
+      submitted_at: new Date().toISOString(),
+      time_spent_seconds: data.timeUsed,
+      total_correct: data.score,
+      total_questions: data.total,
+    })
+    .select('id')
+    .single()
+
+  if (attemptError) {
+    console.error('Failed to save test attempt:', attemptError.message)
+    return
+  }
+
+  const answerRows = data.answers.map(a => ({
+    attempt_id: attempt.id,
+    question_id: a.questionId,
+    selected_value: a.selected !== null ? ANSWER_VALUES[a.selected] : null,
+    is_correct: a.correct,
+  }))
+
+  const { error: answersError } = await supabase.from('user_answer').insert(answerRows)
+  if (answersError) console.error('Failed to save answers:', answersError.message)
 }
 
 /** Fire-and-forget: save writing submission with AI feedback. */
@@ -48,10 +73,9 @@ export async function countTodayWritingSubmissions(userId: string): Promise<numb
 /** Fetch test history for a user (most recent first, max 20). */
 export async function fetchTestHistory(userId: string) {
   const { data, error } = await supabase
-    .from('user_progress')
+    .from('user_test_attempt')
-    .select('*')
+    .select('id, selected_parts, time_spent_seconds, total_correct, total_questions, score, submitted_at, created_at')
     .eq('user_id', userId)
-    .eq('type', 'test')
     .order('created_at', { ascending: false })
     .limit(20)
   if (error) throw error

src/routes/flash-card.$listId.learn.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { FlashCardLearnPage } from "@/features/flash-card/components/FlashCardLearnPage"
+
+export const Route = createFileRoute("/flash-card/$listId/learn")({
+  component: LearnPage,
+})
+
+function LearnPage() {
+  const { listId } = Route.useParams()
+  return <FlashCardLearnPage listId={Number(listId)} />
+}

src/routes/flash-card.$listId.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { FlashCardTermsPage } from "@/features/flash-card/components/FlashCardTermsPage"
+
+export const Route = createFileRoute("/flash-card/$listId")({
+  component: TermsPage,
+})
+
+function TermsPage() {
+  const { listId } = Route.useParams()
+  return <FlashCardTermsPage listId={Number(listId)} />
+}

src/routes/flash-card.index.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { FlashCardListPage } from "@/features/flash-card/components/FlashCardListPage"
+
+export const Route = createFileRoute("/flash-card/")({
+  component: FlashCardListPage,
+})

src/routes/flash-card.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/flash-card")({
+  component: () => <Outlet />,
+})

src/routes/toeic.$testId.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ToeicTestDetail } from '@/features/toeic/components/ToeicTestDetail'
+
+export const Route = createFileRoute('/toeic/$testId')({
+  component: TestDetailPage,
+})
+
+function TestDetailPage() {
+  const { testId } = Route.useParams()
+  return <ToeicTestDetail testId={Number(testId)} />
+}

src/routes/toeic.index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router"
-import { ToeicPractice } from "@/features/toeic/components/ToeicPractice"
+import { ToeicTestList } from "@/features/toeic/components/ToeicTestList"
 
 export const Route = createFileRoute("/toeic/")({
-  component: ToeicPractice,
+  component: ToeicTestList,
 })

src/routes/vocab.tsx

@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router"
-import { Vocabulary } from "@/features/vocab/components/Vocabulary"
-
-export const Route = createFileRoute("/vocab")({
-  component: Vocabulary,
-})

src/store/test-store.ts

@@ -1,52 +1,66 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import type { Question } from '@/types'
+import type { SessionPart } from '@/types'
+
+interface StartExamConfig {
+  testId: number | null
+  testName: string
+  parts: SessionPart[]
+  totalSeconds: number  // 0 = no limit
+}
 
 interface TestStore {
-  partId: number
+  testId: number | null
-  partName: string
+  testName: string
-  questions: Question[]
+  parts: SessionPart[]
-  answers: (number | null)[]
+  currentPartIndex: number
+  answers: Record<number, number | null>  // questionId → answerIndex (0-3), null=unanswered
   isSubmitted: boolean
-  timeUsed: number // seconds elapsed when submitted
+  timeUsed: number     // seconds elapsed when submitted
+  totalSeconds: number // time limit (0 = no limit)
 
-  startExam: (partId: number, partName: string, questions: Question[]) => void
+  startExam: (config: StartExamConfig) => void
-  setAnswer: (questionIndex: number, answerIndex: number) => void
+  setAnswer: (questionId: number, answerIndex: number) => void
+  setCurrentPart: (partIndex: number) => void
   submitExam: (timeUsed: number) => void
   reset: () => void
 }
 
+const INITIAL_STATE = {
+  testId: null,
+  testName: '',
+  parts: [],
+  currentPartIndex: 0,
+  answers: {},
+  isSubmitted: false,
+  timeUsed: 0,
+  totalSeconds: 0,
+}
+
 export const useTestStore = create<TestStore>()(
   persist(
     (set) => ({
-      partId: 2,
+      ...INITIAL_STATE,
-      partName: '',
-      questions: [],
-      answers: [],
-      isSubmitted: false,
-      timeUsed: 0,
 
-      startExam: (partId, partName, questions) =>
+      startExam: ({ testId, testName, parts, totalSeconds }) => {
-        set({
+        // Pre-fill all question IDs with null (unanswered)
-          partId,
+        const answers: Record<number, number | null> = {}
-          partName,
+        for (const part of parts) {
-          questions,
+          for (const q of part.questions) answers[q.id] = null
-          answers: new Array(questions.length).fill(null),
+        }
-          isSubmitted: false,
+        set({ testId, testName, parts, currentPartIndex: 0, answers, isSubmitted: false, timeUsed: 0, totalSeconds })
-          timeUsed: 0,
+      },
-        }),
 
-      setAnswer: (questionIndex, answerIndex) =>
+      setAnswer: (questionId, answerIndex) =>
-        set((state) => {
+        set((state) => ({
-          const answers = [...state.answers]
+          answers: { ...state.answers, [questionId]: answerIndex },
-          answers[questionIndex] = answerIndex
+        })),
-          return { answers }
+
-        }),
+      setCurrentPart: (partIndex) => set({ currentPartIndex: partIndex }),
 
       submitExam: (timeUsed) => set({ isSubmitted: true, timeUsed }),
 
-      reset: () =>
+      reset: () => set(INITIAL_STATE),
-        set({ partId: 2, partName: '', questions: [], answers: [], isSubmitted: false, timeUsed: 0 }),
     }),
     { name: 'test-store' },
   ),

src/temp/local-data.ts

@@ -11,7 +11,7 @@
  * When real database data is available, remove the relevant export and update the consumer.
  */
 
-import type { Question, VocabWord, WritingFeedback, ToeicPart } from '@/types'
+import type { VocabWord, WritingFeedback, ToeicPart } from '@/types'
 
 // ─── [ACTIVE TEMP] ─────────────────────────────────────────────────────────────
 // Used by: src/pages/ToeicPractice.tsx
@@ -28,8 +28,9 @@ export const TOEIC_PARTS: ToeicPart[] = [
 ]
 
 // ─── [UNUSED] ──────────────────────────────────────────────────────────────────
-// Real questions come from Supabase via fetchQuestions() in src/hooks/use-questions.ts
+// Real questions come from Supabase via fetchQuestionsForTest() in src/hooks/use-questions.ts
-export const MOCK_QUESTIONS: Question[] = [
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const MOCK_QUESTIONS: any[] = [
   { id: 'q1', part: 2, text: 'What does the man suggest the woman do about the budget report?', options: ['A. Submit it immediately', 'B. Review it again carefully', 'C. Postpone the deadline', 'D. Ask a colleague for help'], correctAnswer: 1, explanation: 'Người đàn ông nói "You should review it carefully before submitting" — gợi ý xem xét lại báo cáo trước khi nộp.' },
   { id: 'q2', part: 2, text: 'Where most likely are the speakers?', options: ['A. In a restaurant', 'B. At a conference', 'C. In an office', 'D. At an airport'], correctAnswer: 2, explanation: 'Các từ như "meeting room", "printer", "desk" cho biết cuộc trò chuyện diễn ra trong văn phòng.' },
   { id: 'q3', part: 2, text: 'Why is the man calling?', options: ['A. To confirm a reservation', 'B. To cancel an appointment', 'C. To reschedule a meeting', 'D. To order supplies'], correctAnswer: 0, explanation: 'Từ "confirm" và "booking number" trong hội thoại chỉ rõ mục đích của cuộc gọi là xác nhận đặt chỗ.' },

src/types/index.ts

@@ -1,10 +1,40 @@
 export interface Question {
-  id: string
+  id: number            // SERIAL from question table
-  part: number
+  partNumber: number    // from part.part_number — needed for session grouping
-  text: string
+  text: string | null   // question_text (null for photo/audio-only questions)
-  options: string[]
+  options: string[]     // answer_choice.label_text ordered A→D
-  correctAnswer: number // 0-3
+  correctAnswer: number // 0-3 derived from answer_choice.is_correct
-  explanation: string
+  explanation: string | null
+  groupId: number
+  audioUrl?: string     // from question_group
+  imageUrl?: string     // from question_group
+  passageText?: string  // from question_group (Part 6/7)
+}
+
+// One part's worth of questions inside a test session
+export interface SessionPart {
+  partNumber: number
+  partName: string    // e.g. "Mô tả hình ảnh"
+  questions: Question[]
+}
+
+// A test record from the test table
+export interface TestRecord {
+  id: number
+  title: string
+  description: string | null
+  totalQuestions: number
+  durationMinutes: number
+  categoryName: string | null
+}
+
+// A part record from the part table
+export interface PartRecord {
+  id: number
+  testId: number
+  partNumber: number
+  title: string
+  questionCount: number
 }
 
 export interface VocabWord {

supabase/create/update.sql

@@ -0,0 +1,7 @@
+CREATE TABLE test_category (
+                               id    SERIAL PRIMARY KEY,
+                               name  VARCHAR(100) NOT NULL,  -- "TOEIC", "IELTS Academic", "HSK 1"...
+                               slug  VARCHAR(100) UNIQUE     -- "toeic", "ielts", "hsk-1"
+);
+
+ALTER TABLE test ADD COLUMN category_id INT REFERENCES test_category(id);

supabase/migrations/004_full_schema_reset.sql

@@ -0,0 +1,302 @@
+-- Migration 004: Full schema reset
+-- Drops legacy flat tables (questions, vocab, user_progress)
+-- Creates new hierarchical schema from supabase/create/ files
+-- Adapted for Supabase: users(id) → auth.users(id) UUID
+-- Tables kept intact: writing_submissions, user_gamification, xu_transactions, weekly_leaderboard
+
+-- ============================================================
+-- DROP LEGACY TABLES
+-- ============================================================
+DROP TABLE IF EXISTS user_progress CASCADE;
+DROP TABLE IF EXISTS vocab CASCADE;
+DROP TABLE IF EXISTS questions CASCADE;
+
+-- ============================================================
+-- TEST STRUCTURE
+-- (from create/test.sql + create/update.sql merged)
+-- ============================================================
+
+CREATE TABLE test_category (
+  id    SERIAL PRIMARY KEY,
+  name  VARCHAR(100) NOT NULL,
+  slug  VARCHAR(100) UNIQUE
+);
+
+CREATE TABLE test (
+  id                SERIAL PRIMARY KEY,
+  title             VARCHAR(255) NOT NULL,
+  description       TEXT,
+  total_questions   INT DEFAULT 0,
+  duration_minutes  INT DEFAULT 120,
+  category_id       INT REFERENCES test_category(id),
+  created_at        TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE part (
+  id              SERIAL PRIMARY KEY,
+  test_id         INT NOT NULL REFERENCES test(id) ON DELETE CASCADE,
+  part_number     INT NOT NULL,
+  title           VARCHAR(100) NOT NULL,
+  question_count  INT DEFAULT 0,
+  display_order   INT DEFAULT 0,
+  UNIQUE (test_id, part_number)
+);
+
+CREATE TABLE tag (
+  id    SERIAL PRIMARY KEY,
+  name  VARCHAR(255) NOT NULL UNIQUE
+);
+
+CREATE TABLE part_tag (
+  part_id  INT NOT NULL REFERENCES part(id) ON DELETE CASCADE,
+  tag_id   INT NOT NULL REFERENCES tag(id) ON DELETE CASCADE,
+  PRIMARY KEY (part_id, tag_id)
+);
+
+CREATE TABLE question_group (
+  id             SERIAL PRIMARY KEY,
+  part_id        INT NOT NULL REFERENCES part(id) ON DELETE CASCADE,
+  audio_url      VARCHAR(500),
+  image_url      VARCHAR(500),
+  passage_text   TEXT,
+  display_order  INT DEFAULT 0
+);
+
+CREATE TABLE question (
+  id               SERIAL PRIMARY KEY,
+  group_id         INT NOT NULL REFERENCES question_group(id) ON DELETE CASCADE,
+  question_number  INT NOT NULL,
+  question_text    TEXT,
+  explanation      TEXT,
+  display_order    INT DEFAULT 0
+);
+
+CREATE TABLE answer_choice (
+  id           SERIAL PRIMARY KEY,
+  question_id  INT NOT NULL REFERENCES question(id) ON DELETE CASCADE,
+  value        CHAR(1) NOT NULL CHECK (value IN ('A', 'B', 'C', 'D')),
+  label_text   TEXT,
+  is_correct   BOOLEAN NOT NULL DEFAULT FALSE
+);
+
+-- ============================================================
+-- FLASHCARD SYSTEM
+-- (from create/flash_card.sql)
+-- adapted: user_id / created_by → auth.users(id) UUID
+-- ============================================================
+
+CREATE TABLE flashcard_list (
+  id           SERIAL PRIMARY KEY,
+  title        VARCHAR(255) NOT NULL,
+  description  TEXT,
+  total_words  INT DEFAULT 0,
+  is_public    BOOLEAN DEFAULT TRUE,
+  created_by   UUID REFERENCES auth.users(id) ON DELETE SET NULL,
+  created_at   TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE flashcard_term (
+  id              SERIAL PRIMARY KEY,
+  list_id         INT NOT NULL REFERENCES flashcard_list(id) ON DELETE CASCADE,
+  word            VARCHAR(255) NOT NULL,
+  part_of_speech  VARCHAR(50),
+  phonetic        VARCHAR(100),
+  definition      TEXT,
+  example         TEXT,
+  image_url       VARCHAR(500),
+  audio_tts_text  VARCHAR(255),
+  audio_lang      VARCHAR(10) DEFAULT 'en-US',
+  display_order   INT DEFAULT 0,
+  created_at      TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE user_flashcard_list (
+  user_id      UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  list_id      INT NOT NULL REFERENCES flashcard_list(id) ON DELETE CASCADE,
+  enrolled_at  TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (user_id, list_id)
+);
+
+CREATE TABLE user_flashcard_progress (
+  id                SERIAL PRIMARY KEY,
+  user_id           UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  term_id           INT NOT NULL REFERENCES flashcard_term(id) ON DELETE CASCADE,
+  list_id           INT NOT NULL REFERENCES flashcard_list(id) ON DELETE CASCADE,
+  status            VARCHAR(20) NOT NULL DEFAULT 'new',  -- new | learning | known | ignored
+  ease_factor       DECIMAL(4,2) DEFAULT 1.0,            -- 1.0=easy | 0.65=medium | 0.1=hard | -1=known/ignored
+  review_count      INT DEFAULT 0,
+  last_reviewed_at  TIMESTAMP,
+  next_review_at    TIMESTAMP,
+  UNIQUE (user_id, term_id, list_id)
+);
+
+CREATE TABLE user_flashcard_session (
+  id              SERIAL PRIMARY KEY,
+  user_id         UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  list_id         INT NOT NULL REFERENCES flashcard_list(id) ON DELETE CASCADE,
+  started_at      TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  ended_at        TIMESTAMP,
+  terms_reviewed  INT DEFAULT 0,
+  terms_new       INT DEFAULT 0
+);
+
+CREATE TABLE user_flashcard_review_log (
+  id            SERIAL PRIMARY KEY,
+  session_id    INT NOT NULL REFERENCES user_flashcard_session(id) ON DELETE CASCADE,
+  term_id       INT NOT NULL REFERENCES flashcard_term(id) ON DELETE CASCADE,
+  user_id       UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  action_value  DECIMAL(4,2) NOT NULL,  -- 1 | 0.65 | 0.1 | -1
+  reviewed_at   TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE user_flashcard_settings (
+  user_id          UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  list_id          INT NOT NULL REFERENCES flashcard_list(id) ON DELETE CASCADE,
+  daily_new_limit  INT DEFAULT 20,
+  shuffle          BOOLEAN DEFAULT TRUE,
+  front_side       VARCHAR(10) DEFAULT 'word',  -- 'word' | 'definition'
+  show_all_terms   BOOLEAN DEFAULT FALSE,
+  PRIMARY KEY (user_id, list_id)
+);
+
+-- ============================================================
+-- USER TEST HISTORY
+-- (from create/user_test_history.sql)
+-- adapted: user_id → auth.users(id) UUID
+-- ============================================================
+
+CREATE TABLE user_test_attempt (
+  id                  SERIAL PRIMARY KEY,
+  user_id             UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  test_id             INT NOT NULL REFERENCES test(id) ON DELETE CASCADE,
+  selected_parts      INT[],
+  time_limit_minutes  INT,
+  started_at          TIMESTAMP,
+  submitted_at        TIMESTAMP,
+  time_spent_seconds  INT,
+  total_correct       INT DEFAULT 0,
+  total_questions     INT DEFAULT 0,
+  score               DECIMAL(5,2),
+  created_at          TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE user_answer (
+  id              SERIAL PRIMARY KEY,
+  attempt_id      INT NOT NULL REFERENCES user_test_attempt(id) ON DELETE CASCADE,
+  question_id     INT NOT NULL REFERENCES question(id),
+  selected_value  CHAR(1),
+  is_correct      BOOLEAN,
+  UNIQUE (attempt_id, question_id)
+);
+
+-- ============================================================
+-- INDEXES
+-- ============================================================
+
+-- test structure
+CREATE INDEX idx_part_test_id        ON part(test_id);
+CREATE INDEX idx_qgroup_part_id      ON question_group(part_id);
+CREATE INDEX idx_question_group_id   ON question(group_id);
+CREATE INDEX idx_answer_question_id  ON answer_choice(question_id);
+CREATE INDEX idx_test_category_id    ON test(category_id);
+
+-- flashcard
+CREATE INDEX idx_term_list_id           ON flashcard_term(list_id);
+CREATE INDEX idx_term_display_order     ON flashcard_term(list_id, display_order);
+CREATE INDEX idx_progress_user          ON user_flashcard_progress(user_id);
+CREATE INDEX idx_progress_next_review   ON user_flashcard_progress(user_id, next_review_at);
+CREATE INDEX idx_progress_status        ON user_flashcard_progress(user_id, list_id, status);
+CREATE INDEX idx_review_log_session     ON user_flashcard_review_log(session_id);
+CREATE INDEX idx_enrolled_user          ON user_flashcard_list(user_id);
+
+-- test history
+CREATE INDEX idx_attempt_user_id   ON user_test_attempt(user_id);
+CREATE INDEX idx_attempt_test_id   ON user_test_attempt(test_id);
+CREATE INDEX idx_answer_attempt_id ON user_answer(attempt_id);
+
+-- ============================================================
+-- ROW LEVEL SECURITY
+-- ============================================================
+
+-- test content: public read, no direct user writes
+ALTER TABLE test_category   ENABLE ROW LEVEL SECURITY;
+ALTER TABLE test             ENABLE ROW LEVEL SECURITY;
+ALTER TABLE part             ENABLE ROW LEVEL SECURITY;
+ALTER TABLE tag              ENABLE ROW LEVEL SECURITY;
+ALTER TABLE part_tag         ENABLE ROW LEVEL SECURITY;
+ALTER TABLE question_group   ENABLE ROW LEVEL SECURITY;
+ALTER TABLE question         ENABLE ROW LEVEL SECURITY;
+ALTER TABLE answer_choice    ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Public read test_category"  ON test_category  FOR SELECT USING (true);
+CREATE POLICY "Public read test"           ON test           FOR SELECT USING (true);
+CREATE POLICY "Public read part"           ON part           FOR SELECT USING (true);
+CREATE POLICY "Public read tag"            ON tag            FOR SELECT USING (true);
+CREATE POLICY "Public read part_tag"       ON part_tag       FOR SELECT USING (true);
+CREATE POLICY "Public read question_group" ON question_group FOR SELECT USING (true);
+CREATE POLICY "Public read question"       ON question       FOR SELECT USING (true);
+CREATE POLICY "Public read answer_choice"  ON answer_choice  FOR SELECT USING (true);
+
+-- flashcard lists/terms: public lists readable by all, private by owner only
+ALTER TABLE flashcard_list ENABLE ROW LEVEL SECURITY;
+ALTER TABLE flashcard_term ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Public read public lists"
+  ON flashcard_list FOR SELECT
+  USING (is_public = true OR auth.uid() = created_by);
+
+CREATE POLICY "Owners can insert lists"
+  ON flashcard_list FOR INSERT
+  WITH CHECK (auth.uid() = created_by);
+
+CREATE POLICY "Public read terms of public lists"
+  ON flashcard_term FOR SELECT
+  USING (
+    EXISTS (
+      SELECT 1 FROM flashcard_list fl
+      WHERE fl.id = flashcard_term.list_id
+        AND (fl.is_public = true OR fl.created_by = auth.uid())
+    )
+  );
+
+-- flashcard user data: users own their rows
+ALTER TABLE user_flashcard_list        ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_flashcard_progress    ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_flashcard_session     ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_flashcard_review_log  ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_flashcard_settings    ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users own flashcard_list enrollment"   ON user_flashcard_list       FOR ALL USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+CREATE POLICY "Users own flashcard progress"          ON user_flashcard_progress   FOR ALL USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+CREATE POLICY "Users own flashcard sessions"          ON user_flashcard_session    FOR ALL USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+CREATE POLICY "Users own review logs"                 ON user_flashcard_review_log FOR ALL USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+CREATE POLICY "Users own flashcard settings"          ON user_flashcard_settings   FOR ALL USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+
+-- test attempt history: users own their rows
+ALTER TABLE user_test_attempt  ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_answer        ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Users own test attempts"
+  ON user_test_attempt FOR ALL
+  USING (auth.uid() = user_id)
+  WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can read own answers"
+  ON user_answer FOR SELECT
+  USING (
+    EXISTS (
+      SELECT 1 FROM user_test_attempt uta
+      WHERE uta.id = user_answer.attempt_id
+        AND uta.user_id = auth.uid()
+    )
+  );
+
+CREATE POLICY "Users can insert own answers"
+  ON user_answer FOR INSERT
+  WITH CHECK (
+    EXISTS (
+      SELECT 1 FROM user_test_attempt uta
+      WHERE uta.id = user_answer.attempt_id
+        AND uta.user_id = auth.uid()
+    )
+  );

supabase/migrations/005_nullable_test_id.sql

@@ -0,0 +1,3 @@
+-- Migration 005: Make test_id nullable on user_test_attempt
+-- Practice sessions (part-based) don't belong to a specific test record.
+ALTER TABLE user_test_attempt ALTER COLUMN test_id DROP NOT NULL;