Cardlish Phonics Assistant

S01

Màn hình chào và giới thiệu

9:41

●●● 5G ▮▮▮

CARDLISH

Học phát âm tiếng Anh
cùng Cardlish

Cần hỗ trợ? Bấm vào đây

States

DEFAULT Static brand intro — no data dependency
AUTH-REDIRECT Valid JWT in localStorage thì auto-redirect to S06/S08

Interactions

Tap Đăng ký miễn phí 5 tháng chuyển đến màn hình S02
Tap Đã có tài khoản? chuyển đến màn hình S04
Tap Liên hệ hỗ trợ sẽ mở support modal

Data

Reads: localStorage jwt for auto-redirect
Writes: none

S02

Đăng ký tài khoản mới

9:41

●●● 5G ▮▮▮

←Đăng ký

Email

Số điện thoại

Email

Họ và tên

Mật khẩu

👁

Tối thiểu 8 ký tự, gồm chữ và số

Con bạn đang học lớp nào? (không bắt buộc)

✓Tôi đồng ý với Điều khoản & Chính sách

hoặc

Bạn đã có tài khoản? Đăng nhập ngay

States

DEFAULT Empty form, submit disabled until terms ticked
EMAIL-EXISTS Inline: "Email này đã được đăng ký"
NETWORK-ERR Toast: "Không thể kết nối"
SUBMITTING Button spinner

Interactions

Tap tab để chuyển Email / Phone format
Tap Tạo tài khoản rồi gọi API POST /auth/register chuyển đến màn hình S03
Tap Google thì OAuth và bỏ qua bước OTP chuyển đến màn hình S06

Data

Reads: GET /classes dropdown
Writes: POST /auth/register, creates trial=5mo user
Validation: email regex · VN phone (+84/0 + 9–10 digits) · password ≥8 chars +1 letter +1 number

S03

Xác minh mã OTP

9:41

●●● 5G ▮▮▮

←Xác minh tài khoản

📩

Mã OTP đã gửi tới

pa****@gmail.com

4

8

2

Có thể gửi lại mã sau 0 phút 42 giây

Bạn nhập sai mã? Quay lại bước đăng ký

States

DEFAULT 6 empty boxes, 60s countdown
TYPING Auto-advance focus per digit
INVALID Red boxes + "Còn 2 lần thử"
EXPIRED "Mã đã hết hạn" + active Gửi lại
LOCKED 3 wrong rồi tạm khoá 5 phút

Interactions

Type digit để tự động sang ô kế
Paste 6-digit code để tự động điền
Tap Xác nhận rồi gọi API POST /auth/otp/verify chuyển đến màn hình S06
Tap Gửi lại mã rồi gọi API POST /auth/otp/resend rồi đặt lại bộ đếm 60 giây

Data

Reads: session_id from S02
Writes: POST /auth/otp/verify { session_id, code }
TTL: 5 minutes server-side

S04

Đăng nhập tài khoản

9:41

●●● 5G ▮▮▮

←Đăng nhập

Email hoặc số điện thoại

Mật khẩu

👁

Bạn quên mật khẩu?

hoặc

Bạn chưa có tài khoản? Đăng ký ngay

States

DEFAULT Empty form
SUBMITTING Button spinner
WRONG-CREDS Inline: "Email/SĐT hoặc mật khẩu không đúng"
LOCKED "Tạm khoá 15 phút"
TRIAL-EXPIRED On success rồi chuyển sang S17 instead of S08

Interactions

Tap Đăng nhập rồi gọi API POST /auth/login chuyển đến màn hình S06 (≥2 profiles) or S08 (1)
Tap Quên mật khẩu chuyển đến màn hình S05
5× failed khiến hệ thống khoá tạm thời

Data

Writes: localStorage jwt, refresh_token (24h JWT rotation)

S05. Bước 1 trong 3

Quên mật khẩu (bước nhập tài khoản)

9:41

●●● 5G ▮▮▮

←Quên mật khẩu

🔑

Vui lòng nhập email hoặc số điện thoại bạn đã đăng ký. Chúng tôi sẽ gửi mã OTP để bạn đặt lại mật khẩu mới.

Email hoặc số điện thoại

Bạn đã nhớ mật khẩu rồi? Đăng nhập ngay

Các bước: Bước 1 nhập tài khoản. Bước 2 nhập mã OTP (giao diện giống S03). Bước 3 đặt mật khẩu mới và xác nhận. Sau khi thành công sẽ hiển thị thông báo và chuyển về màn hình đăng nhập.

States

STEP-1 Input email/phone — request reset
NOT-FOUND "Không tìm thấy tài khoản"
STEP-2 OTP entry (reuses S03 layout)
STEP-3 New password + confirm
MISMATCH "Hai mật khẩu không khớp"
SUCCESS Toast rồi chuyển sang S04

Interactions

Step 1 rồi gọi API POST /auth/forgot rồi sang Bước 2
Step 2 rồi gọi API POST /auth/forgot/verify rồi trả về reset_token rồi sang Bước 3
Step 3 rồi gọi API POST /auth/forgot/reset with reset_token chuyển đến màn hình S04

Data

Writes: bcrypt password update on users table
TTL: reset_token valid 10 minutes

S06

Chọn hồ sơ học viên

9:41

●●● 5G ▮▮▮

Chọn học viên

👤

▾

Hôm nay bé nào sẽ luyện tập đây?

Mỗi tài khoản được tạo tối đa 5 hồ sơ học viên

States

DEFAULT Grid of 1–5 profile cards + "Thêm" card
ZERO-PROFILES Auto-redirect to S07 with empty form
MAX-PROFILES "Thêm" disabled with tooltip "Đã đạt tối đa 5 hồ sơ"
LOADING Skeleton cards

Interactions

Tap profile card thì set active_profile_id chuyển đến màn hình S08
Tap Thêm học viên mới chuyển đến màn hình S07 (Add mode)
Tap top-right account menu thì Settings / Logout

Data

Reads: GET /profiles (max 5)
Writes: session.active_profile_id

S07

Thêm hoặc chỉnh sửa hồ sơ

9:41

●●● 5G ▮▮▮

←Thêm học viên

Chọn ảnh đại diện

👧

👦

👶

🦊

🐼

🦁

Tên hiển thị *

Tuổi (không bắt buộc)

Lớp đang học (không bắt buộc)

(chỉ hiển thị trong chế độ chỉnh sửa)

States

ADD-MODE Title "Thêm học viên", no delete button
EDIT-MODE Title "Sửa hồ sơ", Xoá button visible
VALIDATION-ERR Inline error under name input
DELETE-CONFIRM Modal: "Xoá hồ sơ Bé An? Hành động không thể hoàn tác"
DELETE-BLOCKED "Không thể xoá hồ sơ đang có phiên luyện tập"

Interactions

Tap avatar tile thì select active radio
Tap Lưu thì POST/PATCH /profiles chuyển đến màn hình S06
Tap Xoá hồ sơ rồi hiện modal xác nhận rồi gọi API DELETE /profiles/:id

Data

Validation: name 1–100 chars · age 3–99
Writes: profiles table

S08

Trang chủ với danh sách bài học

9:41

●●● 5G ▮▮▮

👧

Bé An▾

Còn 142 ngày dùng thử

🔥

Học liên tục

5 ngày

⭐

Đã hoàn thành

12 trên 48 bài

Bài học

01

Bài giới thiệu

Bài này chưa có thẻ luyện tập

○

02

Âm /æ/ với "ack" và "ap"

Có 8 thẻ. Đã hoàn thành.

✓

03

Âm /ɪ/ với "ick" và "ip"

Có 6 thẻ. Bé đã học 50%.

●

04

Âm /ɒ/ với "ock" và "op"

Có 7 thẻ. Bé chưa học.

○

05

Âm /ʌ/ với "uck" và "up"

Có 7 thẻ. Bé chưa học.

○

Còn 43 bài học bên dưới

🏠

Trang chủ

📊

Lịch sử

⚙

Cài đặt

States

DEFAULT Lessons fetched, status icons per progress
LOADING Skeleton tiles
TRIAL-EXPIRING Yellow banner: "Dùng thử còn 5 ngày. [Nâng cấp]"
TRIAL-EXPIRED Redirect to S17
NO-CARDS Lesson tile disabled with "—" icon

Interactions

Tap profile chip chuyển đến màn hình S06 (switch profile)
Tap lesson tile chuyển đến màn hình S09 (if has cards) / no-op (if disabled)
Tap trial badge chuyển đến màn hình S16 (Subscription)
Bottom nav thì Home / History (S13) / Settings (S15)

Data

Reads: GET /lessons (48), GET /profiles/:id/progress

S09

Chi tiết bài học và danh sách thẻ

9:41

●●● 5G ▮▮▮

←Bài 02: Âm /æ/

Bài này có 8 thẻ. Lần luyện gần nhất vào ngày 22/05/2026

1

Thẻ "ack" âm /æk/

Các từ: back và pack

✓

2

Thẻ "ap" âm /æp/

Các từ: cap và map

✓

3

Thẻ "ad" âm /æd/

Các từ: bad và sad

✗

4

Thẻ "an" âm /æn/

Các từ: can và man

○

Còn 4 thẻ bên dưới

States

DEFAULT Both CTAs enabled
NO-CARDS Empty list + "Bài này chưa có thẻ luyện tập"
NEVER-PRACTICED Sub-header: "Chưa luyện"
LOADING Skeleton card rows

Interactions

Tap card row thì preview modal (read-only)
Tap Bắt đầu luyện tập chuyển đến màn hình S10 in mode=practice
Tap Nộp bài chuyển đến màn hình S10 in mode=submit (4-step disabled)

Data

Reads: GET /lessons/:id/cards, GET /profiles/:id/lessons/:id/last_attempt

S10 · Core Screen

Màn hình luyện tập với mic

9:41

●●● 5G ▮▮▮

✕

Thẻ 3 / 8

ack

/æk/

🎒

back

📦

pack

Xem mặt sau

🎤

BẤM VÀO ĐÂY ĐỂ ĐỌC

Bé hãy đọc âm chính trước, sau đó đọc từng từ nhé

States

IDLE Blue mic circle, "NHẤN ĐỂ ĐỌC"
RECORDING Red pulsing 🔴 + timer "0:03" + "NHẤN ĐỂ DỪNG"
PROCESSING Spinner + "Đang chấm điểm…" (Azure call, target <3s)
FEEDBACK Transition to S11a–e overlay
FLIPPED Card shows back-side (4–8 word list)
MIC-DENIED Modal C04 with browser instructions
NETWORK-FAIL Banner: "[Thử lại] [Lưu để gửi sau]"
TIMEOUT-10S Auto-stop + warn toast
ABANDONED ✕ thì confirm "Thoát giữa chừng?" rồi lưu trạng thái bỏ dở

Interactions

Tap Xem mặt sau để lật thẻ
Tap Nghe âm mẫu để phát audio_phoneme_url
Tap MIC (idle) để bắt đầu ghi âm within 200ms
Tap MIC (recording) để dừng và tải lên hoặc tự động dừng at 5s silence / 10s max
Tap ✕ rồi hiện modal xác nhận chuyển đến màn hình S09

Data

Reads: GET /cards/:id (phoneme, IPA, images, audio_urls)
Writes: POST /attempts (audio blob, max 10MB) rồi trả về Azure score
All attempts logged to pronunciation_attempts table (BR-3)

S11a

Phản hồi: Bé đọc đúng

9:41

●●● 5G ▮▮▮

✕

Thẻ 3 / 8

⭐ ⭐ ⭐

✓

BÉ GIỎI QUÁ!

Bé đã phát âm chuẩn âm /æk/ rồi đó

⭐ ⭐ ⭐

Tự động chuyển sang thẻ tiếp theo sau 1,5 giây

Thẻ "ack" âm /æk/. Từ: back và pack

State

CORRECT Green theme, star burst animation

Interactions

Auto-advance after 1.5s OR tap Tiếp theo rồi sang card / S12 if last

Data

Increment correct_attempts, log to pronunciation_attempts

S11b

Phản hồi: Sai lần thứ nhất

9:41

●●● 5G ▮▮▮

✕

Thẻ 3 / 8

⚠

BÉ ĐỌC GẦN ĐÚNG RỒI!

Bé phát âm chưa rõ âm /k/ trong từ "back".

Bé hãy nghe lại Thẻ số 3 để ôn âm /æk/ nhé.

Lần thử thứ 1 trên 4. Bé còn 3 lần thử.

Thẻ "ack" âm /æk/. Từ: back và pack

State

ATTEMPT-1-WRONG Amber theme, error phoneme highlighted

Interactions

Tap Nghe lại thẻ để phát audio_phoneme_url
Tap Thử lại rồi quay về S10 ở trạng thái chờ, attempt counter = 2

Data

Azure response includes per-phoneme score; surface lowest scoring phoneme

S11c

Phản hồi: Sai lần thứ hai

9:41

●●● 5G ▮▮▮

✕

Thẻ 3 / 8

⚠

BÉ HÃY NGHE KỸ NHÉ

Bé nghe cô đọc mẫu rồi đọc theo nha:

🔊 Đang phát âm mẫu của từ "back" 2 giây trên 4 giây

Lần thử thứ 2 trên 4. Bé còn 2 lần thử.

Thẻ "ack" âm /æk/. Từ: back và pack

State

ATTEMPT-2-AUTO-PLAY Reference audio auto-plays on entry
AUDIO-FALLBACK-TTS If audio_words_url missing thì Azure TTS Neural Voice en-US

Interactions

Same buttons as S11b

Data

Audio source priority (BR-6): real-human word audio thì TTS fallback

S11d

Phản hồi: Lần thử cuối cùng

9:41

●●● 5G ▮▮▮

✕

Thẻ 3 / 8

⚠

BÉ CÒN MỘT LẦN THỬ CUỐI

CỐ LÊN NÀO 💪

Bé nghe thật kỹ âm mẫu rồi đọc theo nhé:

🔊 Đang phát âm mẫu của từ "back" 3 giây trên 4 giây

Lần thử thứ 3 trên 4. Bé còn 1 lần thử cuối cùng.

Thẻ "ack" âm /æk/. Từ: back và pack

State

ATTEMPT-3-LAST Orange-amber theme, encouraging tone, reference audio re-plays

Interactions

Same as S11c

Data

Tracks attempt_count = 3

S11e

Phản hồi: Hết lượt, ghi nhận lỗi

9:41

●●● 5G ▮▮▮

✕

Thẻ 3 / 8

🤗

KHÔNG SAO BÉ NHÉ

Bé hãy nghe lại Thẻ 3 và luyện tập thêm nha.

Mình cùng sang thẻ tiếp theo nhé.

Bé đã thử đủ 4 trên 4 lần. Hết lượt rồi.

Đã ghi nhận lỗi để bé luyện thêm sau

Tự động chuyển sang thẻ tiếp theo sau 3 giây

Thẻ "ack" âm /æk/. Từ: back và pack

State

ATTEMPT-4-SKIP Neutral/friendly orange, NOT punishing

Interactions

Auto-advance after 3s OR tap Tiếp tục ngay
Tap Nghe lại thẻ này để phát audio_phoneme_url

Data

Mark card with error_logged=true; surface in S12 top-5 errors

S12

Kết quả nộp bài

9:41

●●● 5G ▮▮▮

Kết quả bài 02

🎊 ⭐ 🎊 ⭐ 🎊

85%

🎉 Bé đã đạt yêu cầu

Đọc đúng 17 trên 20 từ Thời gian làm bài 6 phút

Những lỗi bé cần chú ý:

1. Từ "back", âm /k/Hãy ôn Thẻ 3

2. Từ "sad", âm /d/Hãy ôn Thẻ 5

3. Từ "man", âm /n/Hãy ôn Thẻ 7

States

PASS Score ≥90, green, confetti, "🎉 Đạt!"
NEAR-PASS Score 70–89, orange, "Cần luyện thêm"
FAIL Score <70, red, emphasize errors
NO-ERRORS-PASS Hide "Lỗi cần chú ý" section

Interactions

Tap Luyện tập lại chuyển đến màn hình S10 (practice mode)
Tap Về trang chủ chuyển đến màn hình S08
Tap Xem chi tiết chuyển đến màn hình S14
Tap error row thì jump to that card in S09

Data

Reads: GET /sessions/:id/summary
Writes: session saved with type=submit, score, top_errors

S13

Lịch sử luyện tập

9:41

●●● 5G ▮▮▮

Lịch sử luyện tập

👧

▾

7 ngày qua

30 ngày qua

Tất cả lịch sử

Hôm nay

Bài 02. Âm /æ/

Lúc 18 giờ 32, làm trong 6 phút

📝 Nộp bài

85%

Bài 02. Âm /æ/

Lúc 18 giờ 10, làm trong 4 phút

📖 Luyện tập

8 thẻ

Hôm qua

Bài 03. Âm /ɪ/

Lúc 19 giờ 45, làm trong 5 phút

📖 Luyện tập

6 thẻ

Ngày 21 tháng 5

Bài 03. Âm /ɪ/

Lúc 20 giờ 15, làm trong 7 phút

📝 Nộp bài

72%

Kéo xuống để xem thêm

🏠

Trang chủ

📊

Lịch sử

⚙

Cài đặt

States

DEFAULT Last 7 days grouped by date
EMPTY Illustration + "Chưa có buổi luyện tập nào" + CTA chuyển đến màn hình S08
LOADING Skeleton rows
FILTER-30D / ALL Reload with date range
INFINITE-SCROLL Load more on scroll end

Interactions

Tap chip rồi truy vấn lại with date range (debounced)
Tap session row chuyển đến màn hình S14
Tap profile chip chuyển đến màn hình S06

Data

Reads: GET /profiles/:id/sessions?range=7d|30d|all&page=N

S14

Chi tiết một buổi luyện tập

9:41

●●● 5G ▮▮▮

←Chi tiết buổi luyện tập

Bài 02. Âm /æ/ với "ack" và "ap"

Ngày 23 tháng 5, lúc 18 giờ 32. Hình thức: Nộp bài lấy điểm.

Điểm tổng kết

85%

Tổng số lần thử

24 lần

Số từ bé đọc sai

3 từ

Thời gian làm bài

6 phút

Kết quả từng thẻ

Thẻ 1. Âm /æk/ "ack"

✓ back (đọc đúng ngay lần đầu)

✓ pack (đọc đúng ngay lần đầu)

Thẻ 2. Âm /æp/ "ap"

✓ cap (đọc đúng ngay lần đầu)

✗ map (bé thử 2 lần)

Thẻ 3. Âm /æd/ "ad"

✗ bad (thử 4 lần, đã bỏ qua)

✓ sad (đọc đúng ngay lần đầu)

Còn 5 thẻ bên dưới

States

DEFAULT Session loaded with per-card breakdown
AUDIO-EXPIRED If >30d for practice sessions: "Audio đã hết hạn lưu trữ" (BR-7)
LOADING Skeleton

Interactions

Tap card row rồi xem nhanh (phoneme + words)
Tap Luyện lại bài này chuyển đến màn hình S10 (practice mode)

Data

Reads: GET /sessions/:id/details (per-card attempts, audio_url if within retention)

S15

Cài đặt tài khoản

9:41

●●● 5G ▮▮▮

Cài đặt

Hồ sơ

👧

Bé An

7 tuổi · Lớp 2

›

Tài khoản

Địa chỉ email

parent@email.com

Đổi mật khẩu

›

Ngôn ngữ hiển thị

Tiếng Việt

Gói đăng ký

Trạng thái hiện tại

Đang dùng thử

Thời gian còn lại

142 ngày

Hỗ trợ & thông tin

Cần hỗ trợ? Liên hệ với chúng tôi

›

Điều khoản và Chính sách

›

🏠

Trang chủ

📊

Lịch sử

⚙

Cài đặt

States

DEFAULT Trial badge yellow
ACTIVE-SUB Green badge "Đang hoạt động", "Còn lại 22 ngày"
EXPIRED Red badge "Đã hết hạn"
LANG-DROPDOWN Tiếng Việt (selected) + English/日本語/한국어/ລາວ (Sắp có)
DELETE-CONFIRM Modal: 2-step confirmation with typed "XOÁ"

Interactions

Tap profile row chuyển đến màn hình S07 (Edit mode)
Tap Đổi mật khẩu mở luồng đổi mật khẩu (reuses S05 step 3)
Tap Quản lý gói chuyển đến màn hình S16
Tap Đăng xuất thì confirm rồi xoá localStorage chuyển đến màn hình S01
Tap Xoá tài khoản rồi mở modal rồi gọi API DELETE /users/me (30d soft delete per PDPA)

Data

Reads: GET /users/me, GET /subscriptions/me
Writes: PATCH on password change; DELETE for account

S16

Đăng ký gói và thanh toán

9:41

●●● 5G ▮▮▮

←Chọn gói

Bạn đang ở giai đoạn dùng thử

Sẽ hết hạn vào ngày 12 tháng 10 năm 2026, còn 142 ngày nữa

Gói theo tháng

30.000đ mỗi tháng

Linh hoạt, có thể huỷ bất kỳ lúc nào

Đề xuất

Gói 6 tháng

100.000đ cho 6 tháng

💰 Tiết kiệm 80.000đ so với gói theo tháng

Phương thức thanh toán

VNPay. Thanh toán qua thẻ ATM, mã QR, ví điện tử Stripe. Thanh toán bằng thẻ quốc tế Visa, Master

Lịch sử thanh toán

Gói 6 tháng

Ngày 12 tháng 4 năm 2026

100.000đ

Đã thanh toán thành công

Gói theo tháng

Ngày 15 tháng 10 năm 2025

30.000đ

Đã thanh toán thành công

States

DEFAULT Plan B pre-selected with Đề xuất badge
PROCESSING Button: "Đang chuyển đến VNPay…"
REDIRECT Opens VNPay/Stripe hosted page
SUCCESS-RETURN Toast: "Thanh toán thành công"
FAIL-RETURN Toast + retry CTA
NO-HISTORY Empty state under history

Interactions

Tap plan radio thì highlight + update button amount
Tap payment radio để chuyển gateway
Tap Thanh toán rồi gọi API POST /payments/create rồi chuyển sang to gateway
Tap history row rồi mở modal hoá đơn

Data

Reads: GET /subscriptions/me, GET /payments?user_id=me
Writes: POST /payments/create; webhook khi thành công sẽ subscription_status=active

S17

Hết hạn dùng thử (chặn truy cập)

9:41

●●● 5G ▮▮▮

🎈📚
👋

Cảm ơn bạn đã đồng hành cùng Cardlish

Để tiếp tục cho bé luyện tập, bạn vui lòng chọn gói phù hợp với gia đình mình nhé.

Đăng xuất khỏi tài khoản

States

BLOCKED Full-screen, non-dismissible, no nav available
MID-SESSION-EXPIRED If session expires mid-practice và lưu phần đã làm rồi bắt buộc S17

Interactions

Tap Xem các gói chuyển đến màn hình S16
Tap Đăng xuất thì clear session chuyển đến màn hình S01
Back button / swipe và bị chặn (intercepted)

Data

Reads: subscription_status from JWT claims or /me
Writes: none

T01

Trang chủ Giáo viên

app.cardlish.edu.vn/teacher

Cardlish

Giáo viên

🏠 Dashboard

👥 Học viên

📊 Báo cáo

⚙ Cài đặt

👩 Cô Mai

Tổng quan lớp

Tổng học viên

28

Thêm 2 em trong tuần này

Hoạt động 7 ngày

19

68% tham gia

Điểm trung bình

82%

Tăng 3% so với tuần trước

Âm sai nhiều nhất

/θ/

Sai 142 lần (âm "th")

Danh sách học viên

Tên học viên	Lớp	Số phiên 7 ngày	Điểm trung bình	Âm sai nhiều nhất	Hoạt động gần nhất
👧Bé An	Lớp 2	5 phiên	88%	`/æ/`	Hôm nay
👦Bé Bin	Lớp 4	7 phiên	92%	`/θ/`	Hôm qua
👶Bé Cốm	Lớp 1	3 phiên	74%	`/ɪ/`	2 ngày trước
👧Bé Đào	Lớp 2	0 phiên	chưa có	chưa có	Chưa hoạt động
👦Bé Em	Lớp 3	4 phiên	81%	`/s/`	3 ngày trước

Trang 1 trên 3 (tổng 28 học viên)

States

DEFAULT 20 rows/page, sortable
LOADING Skeleton rows
EMPTY-CLASS "Chưa có học viên nào được gán"
SEARCH-NO-MATCH "Không tìm thấy học viên khớp"
ROW-INACTIVE Greyed + "Chưa hoạt động"

Interactions

Tap column header thì sort asc/desc
Type in search thì debounced filter (300ms)
Bấm vào dòng để mở T02 (Student Detail)
Side nav thì T01/T02/T03/Settings

Responsive

Mobile (375px): hamburger menu replaces side nav; table thì card list
Desktop (1024px+): side nav fixed 240px, content fluid

Data

Reads: GET /teachers/me/classes, GET /teachers/me/students?sort=&q=&page=

T02

Chi tiết học viên (góc nhìn Giáo viên)

app.cardlish.edu.vn/teacher/students/be-an

Cardlish

Giáo viên

🏠 Dashboard

👥 Học viên

📊 Báo cáo

⚙ Cài đặt

Quay lại danh sách

👧

Bé An

7 tuổi · Lớp 2

Bài đã hoàn thành

12 trên 48

Tổng phiên luyện tập

28 phiên

Điểm trung bình

85%

Học liên tục

5 ngày

Xu hướng điểm nộp bài trong 30 ngày qua

Những âm bé hay phát âm sai

Âm	Số lần sai	Thẻ nên ôn lại	Ví dụ từ
`/æ/`	14 lần	Thẻ số 3 và 5	back, sad
`/θ/`	9 lần	Thẻ số 18 và 22	think, three
`/s/`	6 lần	Thẻ số 9	sun, sip

Các phiên luyện tập gần đây

Ngày 23/05, Bài 02 Nộp bài đạt 85%
Ngày 22/05, Bài 03 Luyện 6 thẻ
Ngày 21/05, Bài 03 Nộp bài được 72%

States

DEFAULT Chart + tables populated
NO-SUBMITS Hide chart, show "Chưa có lần nộp bài nào"
LOADING Skeleton chart bars
DATA-EXPORT (sẽ phát triển ở giai đoạn 2) nút Tải CSV

Interactions

Tap chart point rồi hiện chú thích with exact score + date
Tap error row rồi hiển thị danh sách of attempts for that phoneme
Tap session bullet thì session detail (read-only T14 equivalent)

Data

Reads: GET /students/:id/summary, /errors, /sessions

T03

Báo cáo lỗi của cả lớp

app.cardlish.edu.vn/teacher/analytics

Cardlish

Giáo viên

🏠 Dashboard

👥 Học viên

📊 Báo cáo

⚙ Cài đặt

Báo cáo lỗi

Bảng xếp hạng 10 âm bị sai nhiều nhất

/θ/142

/æ/118

/ɪ/89

/s/72

/d/58

/k/47

/v/35

/n/28

/p/19

/b/12

Bản đồ nhiệt thể hiện tỷ lệ lỗi của từng thẻ

Bài

T1

T2

T3

T4

T5

T6

T7

T8

01

02

03

04

Tỷ lệ lỗi dưới 10% Từ 10% đến 30% Trên 30% lỗi

States

DEFAULT All classes, 30d default
EMPTY "Chưa có dữ liệu cho khoảng thời gian này"
LOADING Skeleton bars
EXPORT-PENDING Spinner during CSV generation (sẽ phát triển ở giai đoạn 2)

Interactions

Change class dropdown rồi tải lại dữ liệu
Change date range rồi tải lại dữ liệu
Tap bar rồi hiển thị danh sách students who erred this phoneme
Tap heatmap cell để xem chi tiết down to card-level errors

Data

Reads: GET /analytics/errors?class_id=&range=

A01

Quản lý danh sách người dùng

app.cardlish.edu.vn/admin/users

Cardlish

Admin

👤 Người dùng

🏫 Lớp học

📊 Thống kê

⚙ Hệ thống

Người dùng

Đã chọn 3 người

Họ và tên	Email	Vai trò	Gói đăng ký	Ngày tạo	Hành động
Chị Nguyễn Lan Anh	lananh.nguyen@gmail.com	Học viên	Dùng thử	01/05	⋮
Anh Trần Văn Hùng	vanhung.tran@gmail.com	Học viên	Đang hoạt động	03/05	⋮
Chị Phạm Thu Hương	thuhuong.pham@gmail.com	Học viên	Hết hạn	12/01	⋮
Cô Lê Thị Mai	mai.le@cardlish.edu.vn	Giáo viên	không áp dụng	15/04	⋮
Anh Lê Quang Minh	quangminh.le@gmail.com	Học viên	Dùng thử	22/04	⋮
Chị Vũ Mai Hoa	maihoa.vu@gmail.com	Học viên	Đang hoạt động	28/04	⋮

Trang 1 trong tổng 5 trang (tổng cộng 227 người dùng)

States

DEFAULT Table loaded, 50/page
BULK-ACTIVE When ≥1 row checked rồi hiện thanh công cụ thao tác hàng loạt
SEARCH-NO-MATCH Empty results message
FILTER-APPLIED Chip-style filter badges
DELETE-CONFIRM Modal: "Xoá 3 người dùng? Không thể hoàn tác"

Interactions

Type in search thì debounced filter (300ms)
Toggle role/subscription filter rồi tải lại dữ liệu
Bấm vào dòng để xem chi tiết người dùng (sẽ phát triển ở giai đoạn 2)
Tap Gán lớp (bulk) thì A02 modal
Tap Thêm người dùng mới rồi mở modal mời

Data

Reads: GET /admin/users?q=&role=&sub=&page=
Writes: POST /admin/users/bulk/assign-class, DELETE bulk

A02

Gán học viên vào lớp (cửa sổ chồng)

app.cardlish.edu.vn/admin/users

Cardlish

Admin

👤 Người dùng

🏫 Lớp học

📊 Thống kê

⚙ Hệ thống

Người dùng

Tên	Email	Gói
Bé An	pa@x.com	Trial
Bé Bin	pb@x.com	Active

Gán 3 học viên vào lớp học

✕

Danh sách học viên đã chọn:

Bé An, con chị Lan Anh
Bé Bin, con anh Văn Hùng
Bé Cốm, con chị Thu Hương

Chọn lớp học

✓Gửi email thông báo cho phụ huynh

📋 Nhật ký hoạt động gần nhất (20 mục)

Ngày 23/05 lúc 14 giờ 32. Admin đã gán 5 học viên vào Lớp 2.
Ngày 23/05 lúc 10 giờ 15. Admin đã gán 2 học viên vào Lớp 4.
Ngày 22/05 lúc 18 giờ 02. Admin đã bỏ gán 1 học viên khỏi Lớp 1.
Ngày 22/05 lúc 09 giờ 45. Super Admin đã tạo Lớp 5 và phân cho Cô Lan.
Ngày 21/05 lúc 16 giờ 20. Admin đã gán 8 học viên vào Lớp 3.
Bấm để xem thêm hoạt động cũ hơn

States

DEFAULT Modal open with selected students listed
NO-CLASS-SELECTED Confirm button disabled
SUBMITTING Spinner on button
SUCCESS Toast rồi đóng modal rồi làm mới A01
ERROR Inline "Không thể gán. Vui lòng thử lại"

Interactions

Tap ✕ / Huỷ rồi đóng modal, retain selection in A01
Select dropdown để bật confirm
Tap Xác nhận rồi gọi API POST /admin/students/bulk/assign và ghi nhật ký entry
Audit log scroll để tải thêm

Data

Reads: GET /admin/classes, GET /admin/audit?type=assign
Writes: POST /admin/students/bulk/assign { class_id, student_ids[], notify }

A03

Thống kê tổng quan hệ thống

app.cardlish.edu.vn/admin/stats

Cardlish

Admin

👤 Người dùng

🏫 Lớp học

📊 Thống kê

⚙ Hệ thống

Thống kê tổng quan toàn hệ thống

Phân loại người dùng theo vai trò

Học viên

1.847

Thêm 184 người trong tuần

Giáo viên

12

Thêm 1 người trong tuần

Quản trị viên

3

Quản trị cấp cao

1

Mức độ hoạt động

Người dùng hàng ngày

412

Người dùng hàng tuần

1.205

Người dùng hàng tháng

1.793

Doanh thu tháng này

Tổng doanh thu

18.500.000đ

Tăng 22% so với tháng trước

Gói theo tháng: 4.200.000đ (140 đơn hàng)

Gói 6 tháng: 14.300.000đ (143 đơn hàng)

Tổng gói đang hoạt động: 328 gói

Số người đăng ký mới

Hôm nay

27 người

Trong tuần này

184 người

Trong tháng này

642 người

Top âm bị sai nhiều nhất trên toàn hệ thống trong 30 ngày qua

/θ/2,184

/æ/1,627

/ɪ/1,212

/s/892

/v/612

States

DEFAULT Stats fetched as of "now"
LOADING Skeleton cards
STALE Banner: "Dữ liệu cập nhật 5 phút trước"
ERROR Card-level error with retry per section

Interactions

Bấm vào ô thống kê để lọc và xem chi tiết trong A01 (sẽ phát triển ở giai đoạn 2)
Tap "Gói active" rồi hiển thị danh sách view filtered to active

Data

Reads: GET /admin/stats/{users, activity, revenue, errors}

SA01

Bảng điều khiển hệ thống

app.cardlish.edu.vn/sa/system

Cardlish

Super Admin

⚡ Hệ thống

🏫 Lớp & GV

📊 Thống kê

⚙ Cài đặt

Tình trạng sức khoẻ hệ thống

Các chỉ số hiệu năng

Tốc độ phản hồi của API

842 mili giây

Tốc độ chấm điểm của Azure

1,6 giây

Tốc độ tải trang lớn nhất

2,1 giây

Tỷ lệ hoạt động trong 30 ngày

99,72%

Chi phí dịch vụ Azure trong tháng này

Tên dịch vụ	Chi phí	Lượng sử dụng
Chấm điểm phát âm	284,50 đô la	12.847 lượt gọi
Tổng hợp giọng nói	38,20 đô la	1.920 nghìn ký tự

Dự kiến tổng chi phí tháng này: 412 đô la, tương đương khoảng 10,3 triệu đồng

Dung lượng lưu trữ

Cloudflare R2

Đã dùng 412 GB trên 1 TB

Cơ sở dữ liệu

Đã dùng 38 GB

Âm thanh luyện tập: 186 GB, tự động xoá sau 30 ngày. Âm thanh nộp bài: 226 GB, lưu giữ trong 12 tháng.

Lỗi hệ thống trong 24 giờ qua (báo cáo từ Sentry)

🔴 12 lỗi nghiêm trọng

🟠 38 lỗi thường

🟡 142 cảnh báo

Xem chi tiết

States

DEFAULT All metrics green dots
DEGRADED Yellow dot on metric exceeding threshold
CRITICAL Red dot + auto-alert badge
STORAGE-WARN R2 > 80% thì red bar
COST-WARN If month projection > budget threshold thì highlight

Interactions

Tap metric row rồi sang trang ngoài link (Datadog / Sentry / Posthog)
Tap Mở Sentry rồi sang trang ngoài auth thì Sentry dashboard
Tap "Xem chi tiết" thì Sentry critical errors view

Data

Reads: GET /sa/health, /sa/azure-usage, /sa/storage, integrations with Sentry/Posthog APIs

SA02

Quản lý Lớp học và Giáo viên

app.cardlish.edu.vn/sa/classes

Cardlish

Super Admin

⚡ Hệ thống

🏫 Lớp & GV

📊 Thống kê

⚙ Cài đặt

Lớp học

Tên lớp	Giáo viên phụ trách	Sĩ số	Đang hoạt động	Hành động
Lớp 1	Cô Lan	18 học viên	16 trên 18	⋮
Lớp 2	Cô Mai	28 học viên	24 trên 28	⋮
Lớp 3	Cô Linh	22 học viên	19 trên 22	⋮
Lớp 4	Thầy Hùng	25 học viên	21 trên 25	⋮
Lớp 5	Chưa có giáo viên	14 học viên	9 trên 14	⋮

Giáo viên

Họ và tên	Email	Lớp phụ trách	Trạng thái
👩Cô Nguyễn Thị Lan	lan.nguyen@cardlish.edu.vn	Lớp 1	Đang hoạt động
👩Cô Lê Thị Mai	mai.le@cardlish.edu.vn	Lớp 2	Đang hoạt động
👩Cô Phạm Mỹ Linh	linh.pham@cardlish.edu.vn	Lớp 3	Đang hoạt động
👨Thầy Trần Quang Hùng	hung.tran@cardlish.edu.vn	Lớp 4	Đang hoạt động
👩Cô Vũ Thu Hà	ha.vu@cardlish.edu.vn	Chưa được phân lớp	Đang chờ kích hoạt

Thống kê nhanh

Tổng số lớp: 5 lớp

Tổng số giáo viên: 5 người (4 người đang hoạt động)

Lớp chưa có giáo viên: 1 lớp

Học viên chưa phân lớp: 43 em

States

DEFAULT Both tables loaded
CLASS-NO-TEACHER Row highlighted with "(chưa gán)" + CTA
TEACHER-PENDING Status "Chờ kích hoạt" (invite sent, not accepted)
CRUD-MODAL Add/Edit class or teacher modal
DELETE-CONFIRM "Xoá Lớp 5? 14 học viên sẽ bị bỏ gán"

Interactions

Tap Thêm lớp học mới rồi mở modal với tên lớp và giáo viên (có thể bỏ qua)
Tap Mời giáo viên tham gia rồi mở modal với email và họ tên rồi gửi email mời
Tap row ⋮ rồi mở menu ngữ cảnh với Sửa / Xoá / Gán giáo viên
Bấm vào dòng để sang trang chi tiết lớp với danh sách học viên (Phase 2)
Tap "Gán giáo viên cho Lớp 5" rồi mở modal with teacher dropdown

Data

Reads: GET /sa/classes, /sa/teachers
Writes: POST/PATCH/DELETE on /sa/classes, /sa/teachers/invite

🎓 Học viên (P1 cốt lõi)

States

Interactions

Data

States

Interactions

Data

States

Interactions

Data

States

Interactions

Data

States

Interactions

Data

States

Interactions

Data

States

Interactions

Data

States

Interactions

Data

States

Interactions

Data

States

Interactions

Data

State

Interactions

Data

State

Interactions

Data

State

Interactions

Data

State

Interactions

Data

State

Interactions

Data

Những lỗi bé cần chú ý:

States

Interactions

Data

📅 Học viên (P2 gắn kết)

States

Interactions

Data

States

Interactions

Data

States

Interactions

Data

States

Interactions

Data

Cảm ơn bạn đã đồng hành cùng Cardlish

States

Interactions

Data

👩‍🏫 Giao diện dành cho Giáo viên

Tổng quan lớp

Danh sách học viên

States

Interactions

Responsive

Data

Xu hướng điểm nộp bài trong 30 ngày qua

Những âm bé hay phát âm sai

Các phiên luyện tập gần đây

States

Interactions