+ {/* XU */}
+
+
+
+
Số dư Xu
+
+
+ Dùng để mở tính năng premium, freeze streak hoặc đổi giao diện.
+
+
+
+
+ {/* STREAK (featured, ink) */}
+
+
+ ♦
+
+
+ Chuỗi học tập
+
+
+
+ {streak}
+
+
ngày
+
+ local_fire_department
+
+
+
Giữ vững chuỗi học mỗi ngày nhé!
+
+
+ {/* LEVEL */}
+
+
Cấp độ
+
+
+
+ {numericLevel}
+
+
Level
+
+
+ emoji_events
+
+
+
+
+
+ Hạng {levelLabel}
+
+
+
+
-
-
+ {/* Row 2 — level ring + week goal + history */}
+
+ {/* Level progress ring */}
+
+
+
+ Tiến độ cấp độ
+
+
+ Lv.{numericLevel} → Lv.{numericLevel + 1}
+
+
+
+
+
+
+ Chỉ còn {xpLeft} XP nữa để đạt Level {numericLevel + 1}!
+
+
+
+
+ {/* Week goal + history */}
+
+
+
+
+
+ Mục tiêu tuần
+
+
+ Hoàn thành {weekGoalTotal} bài học mỗi tuần
+
+
+
+ {weeklyCompleted}
+ /{weekGoalTotal}
+
+
+
+
+
+
+ Đã hoàn thành
+ {weeklyCompleted >= weekGoalTotal ? (
+
+ Đạt mục tiêu! · +50 XP thưởng
+
+ ) : (
+
+ Còn {weekGoalTotal - weeklyCompleted} bài
+
+ )}
+
+
+
+
+
+
+ Lịch sử rèn luyện
+
+
7 ngày qua
+
+
+ {history.map((h, i) => {
+ const isDone = h.state === 'done'
+ const isToday = h.state === 'today'
+ return (
+
+
+ {isToday ? 'H.NAY' : h.d}
+
+
+ {isDone && check}
+ {isToday && play_arrow}
+
+
+ )
+ })}
+
+
+
-
-
-
+ {/* Row 3 — Xu shop + leaderboard */}
+
+ {/* Xu shop */}
+
+
+
+ Cửa hàng Xu
+
+
+ {xu} xu
+
+
+
+
+ Kiếm xu
+
+ {EARN_ITEMS.map((e, i) => (
+
+ {e.label}
+
+ +{e.amt}
+
+
+ ))}
+
+
+ Tiêu xu
+
+ {SPEND_ITEMS.map((s, i) => (
+
+ ))}
+
+
+ {/* Leaderboard */}
+
+
+
+
+ Bảng xếp hạng tuần
+
+
Top học viên tuần này
+
+
+
+ Top tuần này
+
+
+
+ Hạng
+ Người học
+ XP tuần
+
+ {board.length === 0 ? (
+
+ Chưa có ai trên bảng xếp hạng tuần này.
+
+ ) : (
+ board.map((p) => {
+ const rankColors: Record
= { 1: '#F5B94A', 2: '#BFC5CC', 3: '#C8844A' }
+ const rc = rankColors[p.rank]
+ return (
+
+
+ {p.rank}
+
+
+
+ {p.avatar}
+
+
+
+ {p.name}
+
+
+
+
+ {p.xp}
+ XP
+
+
-
-
play_arrow
-
+ {/* Row 4 — Badges */}
+
+
+
+
Huy hiệu
+
+ Thành tựu đã mở
+
+
+
+ {BADGES.filter((b) => b.earned).length} / {BADGES.length} mở khoá
+
+
+
+ {BADGES.map((b) => (
+
+
+ {b.icon}
+
+
+ {b.name}
+
+
{b.desc}
+ {b.earned ? (
+
+
+ Đã mở
+
+ ) : (
+
+
+
+
+
+ {b.progress ?? 0}% tiến độ
+
+
+ )}
+
+ ))}
+
+
+
+ )
+}
+
+function LevelRing({ value, xpInto, xpGoal }: { value: number; xpInto: number; xpGoal: number }) {
+ const r = 80
+ const c = 2 * Math.PI * r
+ const offset = c - (value / 100) * c
+ return (
+
+
+
+
+ {value}%
+
+
+ {xpInto} / {xpGoal} XP
+
+
)
}
diff --git a/src/features/dashboard/components/LeaderboardCard.tsx b/src/features/dashboard/components/LeaderboardCard.tsx
deleted file mode 100644
index a61f1a7..0000000
--- a/src/features/dashboard/components/LeaderboardCard.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { cn } from '@/lib/utils'
-import { useAuthStore } from '@/store/auth-store'
-import { useLeaderboard } from '@/hooks/use-gamification'
-
-function RankBadge({ rank }: { rank: number }) {
- return (
-
- {rank}
-
- )
-}
-
-function initials(name: string) {
- return name.split(' ').map((w) => w[0]).slice(-2).join('').toUpperCase()
-}
-
-export function LeaderboardCard() {
- const user = useAuthStore((s) => s.user)
- const { data: rows, isLoading } = useLeaderboard()
-
- return (
-
-
-
Bảng xếp hạng tuần
- Top tuần này
-
-
- {isLoading && (
-
- {[1, 2, 3].map((i) => (
-
- ))}
-
- )}
-
- {!isLoading && (!rows || rows.length === 0) && (
-
- leaderboard
- Chưa có dữ liệu tuần này. Hãy hoàn thành bài học để xuất hiện trên bảng!
-
- )}
-
- {!isLoading && rows && rows.length > 0 && (
-
-
-
- | Hạng |
- Người học |
- XP tuần |
-
-
-
- {rows.map((row) => {
- const isMe = row.userId === user?.id
- return (
-
- |
-
- |
-
-
-
- {initials(row.displayName)}
-
-
- {isMe ? `${row.displayName} (Bạn)` : row.displayName}
-
- |
-
-
- {row.xpEarned.toLocaleString('vi-VN')} XP
-
- |
-
- )
- })}
-
-
- )}
-
- )
-}
diff --git a/src/features/dashboard/components/StatsRow.tsx b/src/features/dashboard/components/StatsRow.tsx
deleted file mode 100644
index 410cf09..0000000
--- a/src/features/dashboard/components/StatsRow.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { UserLevel } from '@/types'
-import { calcNumericLevel } from './Dashboard'
-
-const LEVEL_NAMES: Record
= {
- beginner: 'Beginner',
- bronze: 'Đồng',
- silver: 'Bạc',
- gold: 'Vàng',
- master: 'Master',
-}
-
-interface Props {
- xu: number
- streak: number
- xp: number
- level: UserLevel
-}
-
-export function StatsRow({ xu, streak, xp, level }: Props) {
- const numericLevel = calcNumericLevel(xp)
-
- return (
-
- {/* Xu Balance */}
-
-
-
Số dư Xu
-
- {xu.toLocaleString('vi-VN')}
-
- monetization_on
-
-
-
Dùng để mở tính năng premium
-
-
- {/* Streak */}
-
-
-
-
Chuỗi học tập
-
- {streak} Ngày
-
- local_fire_department
-
-
-
- {streak >= 7 ? 'Bạn thuộc top 5% người học!' : 'Giữ vững chuỗi học mỗi ngày nhé!'}
-
-
-
-
- {/* Level */}
-
-
-
Cấp độ
-
- Level {numericLevel}
-
-
- Hạng {LEVEL_NAMES[level]}
-
-
-
- military_tech
-
-
-
- {/* Weekly goal */}
-
-
-
-
Mục tiêu tuần
-
Hoàn thành {WEEKLY_GOAL} bài học mỗi tuần
-
-
- {weeklyCompleted}/{WEEKLY_GOAL}
-
-
-
-
-
- {/* Weekly heatmap */}
-
-
Lịch sử rèn luyện
-
- {DAY_LABELS.map((label, i) => {
- const isToday = i === todayIdx
- const done = weekActivity[i]
- const future = i > todayIdx
-
- return (
-
-
- {isToday ? 'H.Nay' : label}
-
- {isToday ? (
-
- play_arrow
-
- ) : done ? (
-
- check
-
- ) : (
-
- )}
-
- )
- })}
-
-
-
-
-
- {percent}%
-
- {xp.toLocaleString()} / {xpNext.toLocaleString()} XP
-
-
-
-
Tiến độ Cấp độ
-
-
-
-
- Chỉ còn {(xpNext - xp).toLocaleString()} XP nữa để đạt Level {nextLevel}!
-
-
-
-
-
Cửa hàng Xu
-
-
- {/* Earn */}
-
-
Kiếm Xu
-
- {EARN_ITEMS.map((item) => (
-
- {item.label}
- {item.reward}
-
- ))}
-
-
-
- {/* Spend */}
-
-
Tiêu Xu
-
- {SPEND_ITEMS.map((item) => (
-
- {item.label}
- {item.cost}
-
- ))}
-
-
-
-
-
+
)
}
if (sessionTerms.length === 0) {
return (
-
-
check_circle
-
Không có thẻ nào để học!
-
Bộ thẻ này chưa có từ nào. Vui lòng thêm từ trước.
+
+
All clear.
+
+ Không có thẻ nào cần học ngay bây giờ. Quay lại sau khi đến lịch ôn tập.
+
)
@@ -116,24 +262,24 @@ export function FlashCardLearnPage({ listId }: Props) {
if (isDone) {
return (
-
+
-
celebration
-
Hoàn thành phiên học!
-
Bạn đã ôn xong {total} thẻ trong phiên này
+
Bravo.
+
Hoàn thành phiên học
+
Bạn đã ôn xong {total} thẻ trong phiên này
-
-
-
{sessionStats.known}
-
Đã biết
+
+
+
{sessionStats.known}
+
Đã biết
-
-
{sessionStats.learning}
-
Đang học
+
+
{sessionStats.learning}
+
Đang học
-
-
{sessionStats.ignored}
-
Bỏ qua
+
+
{sessionStats.ignored}
+
Bỏ qua
@@ -143,17 +289,19 @@ export function FlashCardLearnPage({ listId }: Props) {
setIsFlipped(false)
setIsDone(false)
setSessionStats({ known: 0, learning: 0, ignored: 0 })
+ sessionIdRef.current = null
+ answeredNewIdsRef.current = new Set()
+ newTermIdsAtStartRef.current = new Set()
+ if (user) startSession(user.id, listId).then(s => { sessionIdRef.current = s.id })
}}
- 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="px-5 py-2.5 bg-[var(--at-ink)] text-[var(--at-paper)] rounded-xl text-sm font-semibold hover:opacity-90 transition"
>
- replay
Học lại
@@ -161,141 +309,296 @@ export function FlashCardLearnPage({ listId }: Props) {
)
}
+ // Jump to a specific card in the deck (no progress write — just navigate)
+ const jumpTo = (idx: number) => {
+ setCurrentIdx(idx)
+ setIsFlipped(false)
+ }
+
return (
-
- {/* Header */}
-
-
-
Phiên học từ vựng
-
-
{currentIdx + 1} / {total} từ
+
+ {/* Header row: breadcrumb + serif title on left, actions on right */}
+
+
+
+
+ /
+
+ Thẻ {currentIdx + 1}
+ / {total}
+
- {/* Progress bar */}
-
-
-
-
- {/* Session stats pills */}
-
-
-
- {sessionStats.known} biết
-
-
-
- {sessionStats.learning} đang học
-
-
-
- {sessionStats.ignored} bỏ qua
-
-
-
-
setIsFlipped(v => !v)}
- role="button"
- aria-label={isFlipped ? 'Nhấp để xem từ' : 'Nhấp để xem nghĩa'}
+
+
+
+
+ {/* Body: card column + sidebar */}
+
+ {/* Main: card + actions + progress */}
+
+ {/* Card */}
+ {current && (
+
+
setIsFlipped(v => !v)}
+ role="button"
+ tabIndex={0}
+ aria-label={isFlipped ? 'Lật để xem từ' : 'Lật để xem nghĩa'}
+ >
+ {/* FRONT */}
+
+
+
+
+ {current.part_of_speech?.toUpperCase() ?? 'TỪ VỰNG'}
+
+
+
+
+
+
{current.word}
+ {(current.phonetic || current.part_of_speech) && (
+
+ {current.phonetic}
{current.part_of_speech && (
-
- {current.part_of_speech}
-
+ · {current.part_of_speech}
)}
-
- flip
- Nhấp để xem nghĩa
+ )}
+
+
+
+ Space
+ để lật thẻ
+
+
+
+ {/* BACK */}
+
+
+
+
+ NGHĨA
+
+
+
+
+
+
{current.definition ?? '—'}
+ {current.example && (
+
+
+ "{current.example}"
+
-
- ) : (
- <>
-
NGHĨA
-
-
{current.definition ?? '—'}
- {current.example && (
-
- "{current.example}"
-
- )}
-
-
- flip
- Nhấp để xem từ
-
-
- )}
+ )}
+
+
+
+ ↵
+ lật lại
+
- )}
-
- {/* Action buttons */}
-
-
-
-
-
-
-
- {!isFlipped && (
-
Lật thẻ trước khi đánh giá
- )}
- {isFlipped && (
-
Còn {total - currentIdx - 1} thẻ trong phiên này
- )}
-
+ )}
+
+ {/* Actions */}
+
+
+
+
+
+
+
+
+ {/* Progress */}
+
+
+
+ {currentIdx + 1} / {total} ·{' '}
+ {sessionStats.known} biết · {sessionStats.learning} học · {sessionStats.ignored} bỏ
+
+ {progressPct}%
+
+
+
+
+
+
+
+ {/* Right sidebar */}
+
+
)
}
diff --git a/src/features/flash-card/components/FlashCardListPage.tsx b/src/features/flash-card/components/FlashCardListPage.tsx
index 7ccf9c8..d67c285 100644
--- a/src/features/flash-card/components/FlashCardListPage.tsx
+++ b/src/features/flash-card/components/FlashCardListPage.tsx
@@ -14,7 +14,6 @@ function ListCard({ list, userId }: { list: FlashcardList; userId: string | null
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
@@ -22,68 +21,78 @@ function ListCard({ list, userId }: { list: FlashcardList; userId: string | null
: 0
return (
-
+
-
-
layers
+
+ {list.title.charAt(0).toUpperCase()}
-
-
{list.title}
-
-
book
-
{list.total_words} từ
+
+
+ {list.title}
+
+
+ book
+
+ {list.total_words} từ
+
-
+
+
{list.is_public ? 'Công khai' : 'Riêng tư'}
{list.description && (
-
{list.description}
+
+ {list.description}
+
)}
-
-
Tiến độ: {progressPct}%
+
+ Tiến độ
+
+ {progressPct}%
+
-
-
-
-
-
Học
-
{countLearning}
-
-
+
+
+
+
-
+
@@ -92,6 +101,22 @@ function ListCard({ list, userId }: { list: FlashcardList; userId: string | null
)
}
+function Stat({ num, label, color }: { num: number; label: string; color?: string }) {
+ return (
+
+
+ {num}
+
+
+ {label}
+
+
+ )
+}
+
export function FlashCardListPage() {
const user = useAuthStore(s => s.user)
const { data: lists = [], isLoading, isError } = useQuery({
@@ -100,48 +125,49 @@ export function FlashCardListPage() {
})
return (
-
-
+
+
-
Bộ Thẻ Từ Vựng
-
Chọn bộ thẻ để bắt đầu học
-
-
-
filter_list
- Sắp xếp: Mới nhất
+
Từ vựng TOEIC
+
+ Bộ thẻ ghi nhớ
+
+
+ Chọn bộ thẻ để bắt đầu — {lists.length} bộ sưu tầm
+
{isLoading ? (
-
+
{Array.from({ length: 6 }).map((_, i) => (
-
-
-
-
- {[0, 1, 2].map(j =>
)}
-
-
+
))}
) : isError ? (
-
-
Không thể tải danh sách bộ thẻ. Vui lòng thử lại.
+
+
+ Không thể tải danh sách bộ thẻ. Vui lòng thử lại.
+
) : lists.length === 0 ? (
-
-
library_books
-
Chưa có bộ thẻ nào.
-
Bộ thẻ từ vựng TOEIC sẽ được thêm sớm!
+
+
library_books
+
Chưa có bộ thẻ nào.
+
Bộ thẻ từ vựng TOEIC sẽ được thêm sớm!
) : (
-
+
{lists.map(list => (
))}
diff --git a/src/features/flash-card/components/FlashCardTermsPage.tsx b/src/features/flash-card/components/FlashCardTermsPage.tsx
index 2bab35f..c56daeb 100644
--- a/src/features/flash-card/components/FlashCardTermsPage.tsx
+++ b/src/features/flash-card/components/FlashCardTermsPage.tsx
@@ -5,6 +5,7 @@ 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'
+import { resolveMediaUrl } from '../lib/media-url'
type FilterStatus = 'all' | 'new' | 'learning' | 'known' | 'ignored'
@@ -15,11 +16,11 @@ const STATUS_LABEL: Record
= {
ignored: 'Bỏ qua',
}
-const STATUS_STYLE: Record = {
- 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',
+const STATUS_CLASS: Record = {
+ new: 'at-chip',
+ learning: 'at-chip at-chip-brand',
+ known: 'at-chip at-chip-good',
+ ignored: 'at-chip at-chip-warm',
}
interface Props {
@@ -67,85 +68,107 @@ export function FlashCardTermsPage({ listId }: Props) {
})
return (
-
- {/* Header */}
-
-
-
-
Bộ thẻ từ vựng
- {countAll} từ
-
-
-
- {/* Hero actions + stats */}
-
-
+
+ {/* Editorial head */}
+
+
+
+
Bộ thẻ từ vựng
+
+ {countAll} từ
+
+
-
- Tổng: {countAll}
- Mới: {countNew}
- Đang học: {countLearning}
- Đã biết: {countKnown}
-
+
- {/* Filter + Search */}
-
-
+ {/* Stats + filters */}
+
+
- search
+
+ search
+
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"
+ className="w-full pl-10 pr-4 py-2.5 rounded-full text-sm focus:outline-none"
+ style={{
+ background: 'var(--at-paper-2)',
+ border: '1px solid var(--at-line)',
+ color: 'var(--at-ink)',
+ }}
/>
-
+
{(['all', 'new', 'learning', 'known', 'ignored'] as FilterStatus[]).map(f => (
))}
+
+
+
+
+
+
{/* Terms list */}
{loadingTerms ? (
-
+
{Array.from({ length: 5 }).map((_, i) => (
-
+
))}
) : filtered.length === 0 ? (
-
-
Không tìm thấy từ nào phù hợp.
+
+
Không tìm thấy từ nào phù hợp.
) : (
-
+
{filtered.map(term => (
))}
@@ -155,33 +178,72 @@ export function FlashCardTermsPage({ listId }: Props) {
)
}
-function TermRow({ term, status }: { term: FlashcardTerm; status: UserProgress['status'] }) {
+function HeadStat({ num, label, color }: { num: number; label: string; color?: string }) {
return (
-
-
-
-
{term.word}
- {term.phonetic && (
- {term.phonetic}
- )}
-
- {term.part_of_speech && (
-
- {term.part_of_speech}
-
- )}
+
+
+ {num}
-
- {term.definition ?? '—'}
-
-
-
- {STATUS_LABEL[status]}
-
-
+
+ {label}
)
}
+
+function TermRow({ term, status }: { term: FlashcardTerm; status: UserProgress['status'] }) {
+ const imageSrc = resolveMediaUrl(term.image_url)
+ return (
+
+ {imageSrc && (
+
{ (e.currentTarget as HTMLImageElement).style.display = 'none' }}
+ />
+ )}
+
+
+
+ {term.word}
+
+ {term.phonetic && (
+
+ {term.phonetic}
+
+ )}
+
+ {term.part_of_speech && (
+
+ · {term.part_of_speech}
+
+ )}
+
+
+ {term.definition ?? '—'}
+
+
+
+ {STATUS_LABEL[status]}
+
+
+ )
+}
diff --git a/src/features/flash-card/lib/media-url.ts b/src/features/flash-card/lib/media-url.ts
new file mode 100644
index 0000000..362261a
--- /dev/null
+++ b/src/features/flash-card/lib/media-url.ts
@@ -0,0 +1,7 @@
+const MEDIA_BASE_URL = 'https://study4.com'
+
+export function resolveMediaUrl(path: string | null | undefined): string | null {
+ if (!path) return null
+ if (path.startsWith('http://') || path.startsWith('https://')) return path
+ return `${MEDIA_BASE_URL}${path.startsWith('/') ? path : `/${path}`}`
+}
diff --git a/src/features/flash-card/lib/srs-intervals.ts b/src/features/flash-card/lib/srs-intervals.ts
new file mode 100644
index 0000000..f057fc2
--- /dev/null
+++ b/src/features/flash-card/lib/srs-intervals.ts
@@ -0,0 +1,30 @@
+import type { UserProgress } from '../api/flashcard-api'
+
+export const EASE = {
+ ignored: -1,
+ hard: 0.1,
+ easy: 0.65,
+ known: 1.0,
+} as const
+
+export type EaseKey = keyof typeof EASE
+
+const INTERVAL_LADDER: Record
, number[]> = {
+ // count: 0 1 2 3 4 5+
+ known: [1, 3, 7, 14, 30, 60],
+ easy: [1, 2, 4, 8, 14, 30],
+ hard: [1, 1, 1, 2, 3, 5],
+}
+
+export function computeNextReview(key: EaseKey, reviewCount: number): string | null {
+ if (key === 'ignored') return null
+ const ladder = INTERVAL_LADDER[key]
+ const days = ladder[Math.min(reviewCount, ladder.length - 1)]
+ return new Date(Date.now() + days * 24 * 60 * 60 * 1000).toISOString()
+}
+
+export function statusFor(key: EaseKey): UserProgress['status'] {
+ if (key === 'known') return 'known'
+ if (key === 'ignored') return 'ignored'
+ return 'learning'
+}
diff --git a/src/features/home/components/Home.tsx b/src/features/home/components/Home.tsx
index 5cb64a8..856e18a 100644
--- a/src/features/home/components/Home.tsx
+++ b/src/features/home/components/Home.tsx
@@ -6,199 +6,293 @@ const FEATURES = [
{
to: '/toeic',
icon: 'assignment',
- iconBg: 'bg-blue-50',
- iconColor: 'text-blue-600',
- borderColor: 'border-l-blue-600',
- title: 'Luyện đề TOEIC',
- desc: 'Kho đề thi cập nhật theo cấu trúc mới nhất. Phân tích điểm yếu chi tiết từng Part.',
- cta: 'Bắt đầu ngay',
- ctaColor: 'text-blue-600',
+ title: 'Luyện đề',
+ accent: 'TOEIC',
+ desc: 'Kho đề thi cập nhật theo cấu trúc mới nhất. Phân tích điểm yếu từng Part.',
stat: '350+ câu hỏi',
},
{
to: '/writing',
icon: 'auto_fix_high',
- iconBg: 'bg-green-50',
- iconColor: 'text-green-600',
- borderColor: 'border-l-green-600',
- title: 'AI Chấm Writing',
- desc: 'Phản hồi tức thì về ngữ pháp, từ vựng, cấu trúc và bài viết mẫu từ AI.',
- cta: 'Thử ngay',
- ctaColor: 'text-green-600',
+ title: 'AI chấm',
+ accent: 'Writing',
+ desc: 'Phản hồi tức thì về ngữ pháp, từ vựng, cấu trúc và bài viết mẫu.',
stat: '3 lượt / ngày',
},
{
to: '/flash-card',
icon: 'menu_book',
- iconBg: 'bg-amber-50',
- iconColor: 'text-amber-600',
- borderColor: 'border-l-amber-600',
- title: 'Từ vựng thông minh',
- desc: '720 từ TOEIC theo 6 chủ đề. Flashcard với hiệu ứng lật 3D.',
- cta: 'Khám phá',
- ctaColor: 'text-amber-600',
- stat: '720 từ vựng',
+ title: 'Từ vựng',
+ accent: 'thông minh',
+ desc: 'Bộ thẻ TOEIC với spaced-repetition, lật 3D, ảnh minh hoạ.',
+ stat: '18 000+ từ',
},
]
export function Home() {
const user = useUser()
const openModal = useAuthModalStore((s) => s.open)
+ const firstName = user?.name ?? 'bạn'
return (
-
- {/* Hero */}
-
-
-
- auto_awesome
- AI-Powered Learning
-
-
- Luyện TOEIC
thông minh
- cùng AI
+
+ {/* Page head — editorial */}
+
+
+
Học TOEIC cùng AI
+
+ Chào {firstName},
+ hôm nay học 15 phút?
-
- Cá nhân hóa lộ trình học tập để bứt phá điểm số trong thời gian ngắn nhất. AI phân tích điểm yếu và tối ưu bài tập cho bạn.
-
-
-
- Bắt đầu ngay
-
-
- Thử AI Writing
-
-
-
-
-
-
-
-
+
+ Mục tiêu 850
+
+ hiện tại 720
+
+ còn 130 điểm nữa
+
+
+ Học từ vựng
+
+
+ play_arrow
+ Tiếp tục học
+
+
+
- {/* Preview card — hidden on mobile */}
-
-
-
+
+ {/* MAIN COL */}
+
+ {/* Progress hero */}
+
+
+
+
Lộ trình
+
+ Bạn đang đi đúng hướng — tuần này 4/7 ngày.
+
+
+
+
+
+ {/* Feature cards */}
+
+
Khám phá
+
+ Tính năng nổi bật
+
+
+ {FEATURES.map((f) => (
+
+
+
+ {f.icon}
+
+
+
+ {f.stat}
+
+
+
+ {f.title} {f.accent}
+
+
{f.desc}
+
+ ))}
+
+
+
+ {/* 7-day journey */}
+
+
-
Tiến độ tuần này
-
Bạn đang làm rất tốt!
+
Tuần này
+
+ Lộ trình 7 ngày
+
-
+12%
+
+
+ +24% so với tuần trước
+
-
-
- Reading Score420/495
-
-
-
-
-
- Listening Score380/495
-
-
-
-
-
-
local_fire_department
-
14
-
Ngày Streak
-
-
-
star
-
1,250
-
Điểm tích lũy
-
-
-
-
- psychology
-
-
- AI gợi ý: Ôn thêm Part 5 — Ngữ pháp
-
+
+ {['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'].map((d, i) => {
+ const h = [60, 85, 40, 90, 75, 0, 0][i]
+ const done = h > 0
+ const today = i === 4
+ return (
+
+ )
+ })}
-
- {/* Feature cards */}
-
- Tính năng nổi bật
- Hệ sinh thái học tập toàn diện được thiết kế để tối ưu hoá điểm số.
-
- {FEATURES.map((f) => (
-
-
-
{f.icon}
+ {/* SIDE COL */}
+
+ {/* Streak card (inky) */}
+
+
+
+ Streak
-
{f.title}
-
{f.desc}
-
- {f.cta}
-
arrow_forward
+
+ local_fire_department
-
- ))}
-
-
-
- {/* CTA banner */}
-
-
-
- emoji_events
+
+
+ 7 ngày
+
+
Kỷ lục: 21 ngày
+
+ {['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'].map((d, i) => (
+
+ {d}
+
+ ))}
+
-
Sẵn sàng chinh phục 990 TOEIC?
-
- {user
- ? `Chào ${user.name}! Tiếp tục luyện thi hôm nay.`
- : 'Đăng ký miễn phí để lưu tiến độ và luyện thi không giới hạn.'}
-
- {user ? (
-
- Luyện thi ngay
-
- ) : (
+
+ {/* AI nudge */}
+
+
+
+ auto_awesome
+
+
+ AI gợi ý
+
+
+
+ "Bạn yếu nhất Part 3 — dành 10 phút hôm nay có thể tăng 30+ điểm."
+
+
— EnglishAI Coach
+
+
+ {/* Pro tip */}
+
+
Pro tip
+
+ Học theo cụm từ (collocations) giúp bạn ghi nhớ nhanh hơn{' '}
+ 40% so với học từ đơn lẻ.
+
+
+
+ {/* Guest CTA (only if not logged in) */}
+ {!user && (
+
+
Khách
+
+ Đăng ký để lưu tiến độ.
+
- )}
-
+
-
+
+
+ )
+}
+
+function Stat({ num, label, color }: { num: string; label: string; color?: string }) {
+ return (
+
+ )
+}
+
+function ProgressRing({ value }: { value: number }) {
+ const r = 58
+ const c = 2 * Math.PI * r
+ const offset = c - (value / 100) * c
+ return (
+
)
}
diff --git a/src/features/toeic/components/ToeicPractice.tsx b/src/features/toeic/components/ToeicPractice.tsx
index 180c7bc..2a80dcf 100644
--- a/src/features/toeic/components/ToeicPractice.tsx
+++ b/src/features/toeic/components/ToeicPractice.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from '@tanstack/react-router'
import { CircularProgress } from '@/components/CircularProgress'
import { useTestStore } from '@/store/test-store'
import { TOEIC_PARTS } from '@/temp/local-data'
-import { fetchQuestions } from '@/hooks/use-questions'
+import { fetchQuestionsForTest } from '@/hooks/use-questions'
import { useRequireAuth } from '@/hooks/use-require-auth'
export function ToeicPractice() {
@@ -16,8 +16,9 @@ export function ToeicPractice() {
if (!requireAuth()) return
setLoadingPartId(partId)
try {
- const questions = await fetchQuestions(partId, 10)
- startExam(partId, partName, questions)
+ // TODO: replace hardcoded testId=1 with real test selection
+ const parts = await fetchQuestionsForTest(1, [partId])
+ startExam({ testId: 1, testName: partName, parts, totalSeconds: 0 })
navigate({ to: '/toeic/session' })
} catch (err) {
console.error('Failed to load questions:', err)
diff --git a/src/features/toeic/components/ToeicTestList.tsx b/src/features/toeic/components/ToeicTestList.tsx
index 1c7bcc4..85d229f 100644
--- a/src/features/toeic/components/ToeicTestList.tsx
+++ b/src/features/toeic/components/ToeicTestList.tsx
@@ -10,66 +10,96 @@ export function ToeicTestList() {
})
return (
-
-
-
Đề Thi TOEIC
-
Chọn đề thi để bắt đầu luyện tập hoặc thi thử toàn bộ.
+
+ {/* Editorial head */}
+
+
+
Luyện đề
+
+ TOEIC Mock Tests
+
+
+ Chọn đề để bắt đầu luyện tập — {tests.length} đề thi
+
+
{isLoading && (
-
+
{Array.from({ length: 6 }).map((_, i) => (
-
+
))}
)}
{error && (
-
+
Không thể tải danh sách đề thi. Vui lòng thử lại.
)}
{!isLoading && !error && tests.length === 0 && (
-
-
library_books
-
Chưa có đề thi nào. Dữ liệu đang được cập nhật.
+
+
+ library_books
+
+
Chưa có đề thi nào.
+
Dữ liệu đang được cập nhật.
)}
{tests.length > 0 && (
-
+
{tests.map((test) => (
- {/* Category badge */}
{test.categoryName && (
-
+
+
{test.categoryName}
)}
- {test.title}
+
+ {test.title}
+
{test.description && (
- {test.description}
+
+ {test.description}
+
)}
-
+
- list_alt
- {test.totalQuestions} câu
+ list_alt
+ {test.totalQuestions} câu
- timer
- {test.durationMinutes} phút
+ timer
+ {test.durationMinutes} phút
diff --git a/src/features/writing/components/WritingChecker.tsx b/src/features/writing/components/WritingChecker.tsx
index f3f12ff..ee4e02e 100644
--- a/src/features/writing/components/WritingChecker.tsx
+++ b/src/features/writing/components/WritingChecker.tsx
@@ -95,60 +95,104 @@ export function WritingChecker() {
)
}
+ const sentenceCount = text.split(/[.!?]+/).filter(s => s.trim()).length
+ const wordCount = text.split(/\s+/).filter(Boolean).length
+
return (
-
-
-
AI Chấm Writing
-
Nhận phản hồi tức thì về ngữ pháp, từ vựng và cấu trúc bài viết.
+
+ {/* Editorial page head */}
+
+
+
+ auto_awesome
+ AI Writing Checker
+
+
+ Kiểm tra bài viết
+
+
+ Dán bài viết — AI sẽ kiểm tra ngữ pháp, chính tả, và chấm điểm IELTS/TOEIC
+
+
+
+
+
+
-
+
{/* Left: Input */}
-
-
-
-
Bài writing của bạn
-
MAX_CHARS ? 'text-red-500 font-bold' : 'text-slate-400')}>
- {charCount}/{MAX_CHARS}
-
+
+
+
+
+
+
+ Đề: Working from home
+
+
+
+ Essay · Band 6-7
+
+
+
MAX_CHARS ? 'var(--at-bad)' : 'var(--at-mute)' }}>
+ {wordCount} từ · {sentenceCount} câu · {charCount}/{MAX_CHARS}
+
-