130 route trong kho partner-web, xếp vào sáu kiểu bố cục. V1 giữ nguyên 100% element hiện có, chỉ đổi cách xếp. V2 được phép sắp xếp lại và lược bớt. Mỗi hướng ba phương án, xem được ở điện thoại, iPad và máy tính.
Hai hướng khác nhau ở ràng buộc. V1 không được bỏ bất cứ cột, trường, tab hay nút nào của bản máy tính — ba phương án chỉ khác nhau ở cách xếp. V2 được phép ưu tiên, gộp, hoãn sang máy tính; đổi lại màn gọn hơn nhưng mất dữ liệu.
Khung máy. Dựng bằng HTML tĩnh với dữ liệu mẫu, không phải ảnh ứng dụng. Mỗi phương án chỉ có MỘT bản dựng, tự co theo bề rộng khung nhờ @container — ba khổ máy cho thấy đúng hành vi của cùng một phương án. Bảng Học sinh trong khung giữ đủ 7 cột thật; biểu mẫu Tạo lớp giữ đủ 10 trường; thanh soạn thảo giữ đủ 12 nút.
Ảnh hiện trạng. Bốn ảnh chụp thật từ nhánh main v3.38.7 dựng bằng next build, tài khoản staging. Chỉ được bốn màn: ứng dụng liên tục đẩy ngược về cổng chọn trường và tài khoản thử nghiệm có 0 học sinh, 0 lớp. Đã thử sáu cách.
Prompt. 05/10/2026: Build cho anh 100% các màn hình trong project responsive… Ở mỗi màn hình đưa ra 3 options
; Chia làm 2 version
; làm filter để chọn v1, v2… đủ phone, iPad + desktop
; v1 này cũng sẽ cần các màn responsive, đề xuất dựa trên 100% các elements hiện tại
.
Giới hạn. Ba phương án đặt theo kiểu bố cục, các màn cùng kiểu dùng chung một bộ — không vẽ riêng 130 bộ. Ước lượng thời gian là phỏng đoán theo số màn, chưa hỏi đội phát triển.
| Kiểu | Số màn | Gồm những gì | V1 đề xuất (giữ 100%) | V2 đề xuất (sắp lại) |
|---|---|---|---|---|
| Bảng danh sách | 32 | Danh sách nhiều cột: học sinh, bài đã giao, kho đề, lớp, kỳ thi. | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết |
| Biểu mẫu | 30 | Màn nhập liệu: tạo lớp, thêm học sinh, cấu hình, hồ sơ, thanh toán. | Một cột, đủ 10 trường | Một cột, nhãn trên |
| Trang chi tiết có tab | 15 | Trang nhiều tab con: lớp học, hồ sơ học sinh, kỳ thi, cài đặt. | Tab cuộn ngang | Tab cuộn ngang |
| Trình soạn thảo | 7 | Soạn câu hỏi, soạn đề, chấm viết — nơi có vùng gõ văn bản. | Một hàng cuộn ngang | Thanh công cụ gọn |
| Màn ghi âm và giám sát | 6 | Ghi bài nói, phát lại, theo dõi kỳ thi đang diễn ra. | Điều khiển trong tấm trượt | Toàn màn hình dọc |
| Số liệu và biểu đồ | 1 | Trang báo cáo, bảng điều khiển, thống kê. | Đủ 8 chỉ số, hai cột | Thẻ số hai cột |
| Màn đơn giản | 39 | Đăng nhập, chuyển hướng, trang trạng thái (31 màn dưới 1,2 KB) | đã dùng được, không cần đổi | |
Chọn hướng, kiểu bố cục và khổ máy. Khung giữ kích thước thật rồi thu nhỏ bằng transform nên cách chữ xuống dòng và cách bảng tràn là thật. Địa chỉ đổi theo lựa chọn, gửi link là mở ra đúng màn.
Mỗi màn đã xếp vào một kiểu, nên đã có ba phương án V1 và ba phương án V2 tương ứng ở trên. Cột cuối cho biết màn đó đã có ảnh chụp hiện trạng hay chưa.
| # | Đường dẫn | Kiểu | V1 đề xuất | V2 đề xuất | Ảnh hiện trạng |
|---|---|---|---|---|---|
| 1 | /[classId]/dashboard | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | route động |
| 2 | /[classId]/placement-test | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | route động |
| 3 | /[classId]/students/[studentId] | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | route động |
| 4 | /assigned-tests/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 5 | /assigned-tests/[id] | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | route động |
| 6 | /centralized-exam/[id]/monitor/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | route động |
| 7 | /centralized-exam/[id]/report/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | route động |
| 8 | /challenge/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 9 | /classes/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 10 | /flyer-ai/speaking/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 11 | /flyer-ai/writing/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 12 | /program/[id]/assign-schedule | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | route động |
| 13 | /report/class-low-study-time/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 14 | /report/class-low-test-completion/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 15 | /report/classes-accuracy-ranking/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 16 | /report/classes-conversation-time-ranking/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 17 | /report/classes-study-time-ranking/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 18 | /report/skills-accuracy/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 19 | /report/student-incomplete/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 20 | /report/student-low-score/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 21 | /report/teacher-low-assignment/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 22 | /report/teachers-performance/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 23 | /report/total-accuracy/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 24 | /report/total-completed-tests/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 25 | /report/total-students/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 26 | /report/total-study-time/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 27 | /student-list/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | đã chụp |
| 28 | /student-management/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 29 | /study-lesson/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 30 | /teacher/list/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 31 | /transfer-diamond/ | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | chưa chụp |
| 32 | /tuition-management/group/[id] | Bảng danh sách | Hai cột ưu tiên, bấm bung phần còn lại | Hai cột ưu tiên, bung chi tiết | route động |
| 33 | /centralized-exam/test-library/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 34 | /creator/ai-teacher/[id] | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | route động |
| 35 | /document/[id] | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | route động |
| 36 | /explore/[id] | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | route động |
| 37 | /explore/playlist/[id] | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | route động |
| 38 | /flyer-ai-anonymous/writing/tool/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 39 | /flyer-ai-free-demo/writing/tool/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 40 | /flyer-ai/speaking/[id] | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | route động |
| 41 | /flyer-ai/writing/[id] | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | route động |
| 42 | /flyer-ai/writing/tool/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 43 | /forgot | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 44 | /login | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 45 | /onboarding/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 46 | /onboarding/create-class/[classCode] | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | route động |
| 47 | /placement/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 48 | /preview/checkpoint/[id]/worksheets | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | route động |
| 49 | /program/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 50 | /program/create/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 51 | /program/edit/[id] | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | route động |
| 52 | /program/generate/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 53 | /report/activities/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 54 | /report/average-accuracy-rate/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 55 | /report/average-score/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 56 | /school-setup/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 57 | /sepay/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 58 | /signup | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 59 | /store/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 60 | /tuition-management/ | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 61 | /tuition-management/create | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 62 | /verify-account | Biểu mẫu | Một cột, đủ 10 trường | Một cột, nhãn trên | chưa chụp |
| 63 | /billing/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 64 | /bingo-ai-co-teacher/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 65 | /creator/select-question-type | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | đã chụp |
| 66 | /home/profile | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 67 | /notification-list/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 68 | /package-ai-speaking/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 69 | /package/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 70 | /profile-parent/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 71 | /profile-teacher/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 72 | /report/attendance/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 73 | /report/daily-study/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 74 | /school-portal/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | đã chụp |
| 75 | /school-portal/system-performance/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 76 | /school-settings/ | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | chưa chụp |
| 77 | /teacher/detail/[id] | Trang chi tiết có tab | Tab cuộn ngang | Tab cuộn ngang | route động |
| 78 | /assistant/[id]/ | Trình soạn thảo | Một hàng cuộn ngang | Thanh công cụ gọn | route động |
| 79 | /creator/[id] | Trình soạn thảo | Một hàng cuộn ngang | Thanh công cụ gọn | route động |
| 80 | /creator/ai-teacher-builder | Trình soạn thảo | Một hàng cuộn ngang | Thanh công cụ gọn | chưa chụp |
| 81 | /flyer-ai/speaking/record | Trình soạn thảo | Một hàng cuộn ngang | Thanh công cụ gọn | chưa chụp |
| 82 | /give-score/[id] | Trình soạn thảo | Một hàng cuộn ngang | Thanh công cụ gọn | route động |
| 83 | /give-score/ielts-writing-test-result/[id] | Trình soạn thảo | Một hàng cuộn ngang | Thanh công cụ gọn | route động |
| 84 | /test-result/[testResultId] | Trình soạn thảo | Một hàng cuộn ngang | Thanh công cụ gọn | route động |
| 85 | /explore/ | Màn ghi âm và giám sát | Điều khiển trong tấm trượt | Toàn màn hình dọc | chưa chụp |
| 86 | /lessons/result/[id] | Màn ghi âm và giám sát | Điều khiển trong tấm trượt | Toàn màn hình dọc | route động |
| 87 | /practice-test-result/[id] | Màn ghi âm và giám sát | Điều khiển trong tấm trượt | Toàn màn hình dọc | route động |
| 88 | /speaking-test-result/[id] | Màn ghi âm và giám sát | Điều khiển trong tấm trượt | Toàn màn hình dọc | route động |
| 89 | /speaking-test-result/ielts/[id] | Màn ghi âm và giám sát | Điều khiển trong tấm trượt | Toàn màn hình dọc | route động |
| 90 | /speaking-test-result/ket-pet/[id] | Màn ghi âm và giám sát | Điều khiển trong tấm trượt | Toàn màn hình dọc | route động |
| 91 | /report/ | Số liệu và biểu đồ | Đủ 8 chỉ số, hai cột | Thẻ số hai cột | đã chụp |
| 92 | /[classId]/ | Màn đơn giản | — | — | route động |
| 93 | /assigned-tests/parent/ | Màn đơn giản | — | — | chưa chụp |
| 94 | /assistant/ | Màn đơn giản | — | — | chưa chụp |
| 95 | /bank-account/ | Màn đơn giản | — | — | chưa chụp |
| 96 | /billing-parent/ | Màn đơn giản | — | — | chưa chụp |
| 97 | /bingo-ai-co-teacher/[studentId] | Màn đơn giản | — | — | route động |
| 98 | /centralized-exam/ | Màn đơn giản | — | — | chưa chụp |
| 99 | /centralized-exam/[id]/ | Màn đơn giản | — | — | route động |
| 100 | /centralized-exam/create/ | Màn đơn giản | — | — | chưa chụp |
| 101 | /challenge/[code] | Màn đơn giản | — | — | route động |
| 102 | /course/ | Màn đơn giản | — | — | chưa chụp |
| 103 | /course/[id] | Màn đơn giản | — | — | route động |
| 104 | /course/create | Màn đơn giản | — | — | chưa chụp |
| 105 | /creator/[id]/add-question/ | Màn đơn giản | — | — | route động |
| 106 | /dashboard-parent/ | Màn đơn giản | — | — | chưa chụp |
| 107 | /exams/ | Màn đơn giản | — | — | chưa chụp |
| 108 | /flyer-ai-anonymous/ | Màn đơn giản | — | — | chưa chụp |
| 109 | /flyer-ai-free-demo/ | Màn đơn giản | — | — | chưa chụp |
| 110 | /flyer-ai/ | Màn đơn giản | — | — | chưa chụp |
| 111 | /flyer-ai/speaking/upload | Màn đơn giản | — | — | chưa chụp |
| 112 | /flyer-ai/writing/ielts/[id] | Màn đơn giản | — | — | route động |
| 113 | /flyer-ai/writing/ket-pet/[id] | Màn đơn giản | — | — | route động |
| 114 | /invite-teachers/ | Màn đơn giản | — | — | chưa chụp |
| 115 | /invite-teachers/[id] | Màn đơn giản | — | — | route động |
| 116 | /monthly-report/[id] | Màn đơn giản | — | — | route động |
| 117 | /onboarding/create-class/ | Màn đơn giản | — | — | chưa chụp |
| 118 | /preview/checkpoint/[id]/ | Màn đơn giản | — | — | route động |
| 119 | /program/[id]/ | Màn đơn giản | — | — | route động |
| 120 | /quick-start/ | Màn đơn giản | — | — | chưa chụp |
| 121 | /report/weekly-report/ | Màn đơn giản | — | — | chưa chụp |
| 122 | /review/[id] | Màn đơn giản | — | — | route động |
| 123 | /school-calendar/ | Màn đơn giản | — | — | chưa chụp |
| 124 | /settings/ | Màn đơn giản | — | — | chưa chụp |
| 125 | /student-list/create | Màn đơn giản | — | — | chưa chụp |
| 126 | /test-results/[id] | Màn đơn giản | — | — | route động |
| 127 | /topic-talk-result/[id] | Màn đơn giản | — | — | route động |
| 128 | /verification/email | Màn đơn giản | — | — | chưa chụp |
| 129 | /weekly-report/[id] | Màn đơn giản | — | — | route động |
| 130 | /whats-new/ | Màn đơn giản | — | — | chưa chụp |
| Đợt | Việc | Phủ | Ước lượng |
|---|---|---|---|
| 1 | Cổng chọn trường — màn đầu tiên sau đăng nhập, đang tràn 252px trên điện thoại và 16px trên iPad | 1 màn | 2 ngày |
| 2 | Vỏ ứng dụng: thanh bên thành ngăn kéo, thanh trên thu gọn, vùng chạm tối thiểu 44px | mọi màn | 1–2 tuần |
| 3 | Bảng theo phương án đã chọn — nguồn khó chịu lớn nhất | 32 màn | 1–7 tuần tuỳ phương án |
| 4 | Biểu mẫu một cột | 30 màn | 1–2 tuần |
| 5 | Tab và số liệu | 16 màn | 2–3 tuần |
| 6 | Soạn thảo và ghi/giám sát — khó nhất, để sau cùng | 13 màn | 3–5 tuần |
Cập nhật 05/10/2026 · V1 từ main v3.38.7 · V2 là bản dựng đề xuất · 130 route