Page List

เอกสารอ่านง่ายสำหรับดูว่ามีหน้าอะไรบ้างใน prototype พร้อมลิงก์เข้าแต่ละหน้าและไฟล์สำคัญที่เกี่ยวข้อง

Prototype Pages

หน้าหลักที่ทีมใช้ตรวจ flow และ role ต่าง ๆ

หน้า Role หน้าที่ URL

Teacher Workspace ครู จัดการใบงาน มอบหมายแผนการสอน ติดตามการบ้าน และดูรายงานสรุป /teacher/ Homework Tracking ครู ติดตามการบ้านที่มอบหมายแล้ว ดูอัตราการเปิดดู และรายชื่อที่ยังไม่เปิด /teacher/homework/ Homework Report ครู รายงานสรุปการบ้าน ภาพรวมการเปิดดู และข้อมูลสำหรับติดตามทั้งห้องเรียน /teacher/report/ Year-End Graduation Summary ครู Workflow จบปีการศึกษา ม.3 / ม.6 ยืนยันข้อมูล สร้างลิงก์แบบสอบถาม และ preview รายงาน PDF /teacher/year-end/ Student Assignments นักเรียน ดูใบงานที่ได้รับมอบหมาย สถานะการเปิดอ่าน และงานที่รอดำเนินการ /student/ School Dashboard โรงเรียน Dashboard โรงเรียนและ partner พร้อม custom theme /teacher/collab/ School Partnership Admin รายการโรงเรียนพาร์ทเนอร์และ workflow การจัดการข้อมูลโรงเรียน /admin/admin/ Theme Setup Admin ตั้งค่า theme และ visual identity สำหรับ dashboard โรงเรียน /admin/admin-theme/ Career Content คลังอาชีพ หน้าคลังข้อมูลอาชีพ พร้อม search/filter และ content discovery /career-content/ Career Category หมวดอาชีพ หน้ารวมหมวดอาชีพและทางเข้าของแต่ละกลุ่มอาชีพ /career-category/ Career Detail รายละเอียดอาชีพ หน้าเจาะลึกอาชีพ ตัวอย่างเนื้อหา วิดีโอ และเส้นทางการเรียนรู้ /career-detail/

Year-End Notification — Scenarios

Logic และ Test Scenarios สำหรับระบบแจ้งเตือนจบปีการศึกษา ม.3 / ม.6 — ใช้เป็น reference ก่อน implement

Logic การจบการศึกษา ม.6

State หลักของงานจบปีตั้งแต่ Admin แจ้งเตือนจนถึงครูยืนยันและส่งลิงก์ประเมินให้นักเรียน

flag Trigger

Admin ส่งงานจบปีการศึกษาให้ห้องที่อยู่ใน scope ม.3 / ม.6 แต่ prototype หน้า Teacher ปัจจุบันเปิด flow จริงที่ ม.6

pending_actions Pending

ถ้ายังไม่มี confirmation ใน localStorage ห้องนั้นต้องขึ้น Banner, Bell dot และ Sidebar badge เพื่อพาครูไปตรวจข้อมูลนักเรียน

fact_check Confirm

ครูต้องตรวจสถานะนักเรียนในตาราง กด ยืนยันการจบชั้นเรียน และเลือกเหตุผลให้เด็กที่ข้อมูลไม่ครบก่อน submit

lock Locked

หลังยืนยัน ระบบบันทึก teacherYearEndConfirmations แล้วล็อก dropdown สถานะนักเรียนของห้องนั้น

link Send Link

หลังยืนยันแล้วครูส่งลิงก์ประเมิน ระบบบันทึก teacherYearEndLinkSent และเริ่มแสดงคอลัมน์ข้อมูลจบปี / เรียนต่อ

done_all Complete

ห้องถือว่าเสร็จเมื่อยืนยันแล้วและไม่มี pending room เหลือ Banner จึงหาย Dot/Breadcrumb badge ถูก clear

person_check Tester State

Prototype จำ state ด้วย localStorage แยกตาม browser/profile ของแต่ละ tester จึงส่งให้หลายคนลองได้โดย state ไม่ชนกัน และ reset ได้ด้วยการ clear site data

Notification ควรมี 3 Layers

Dot เดียวไม่พอสำหรับงานที่ต้อง action ก่อน deadline · แต่ละ Layer รับมือคนละ Scenario

campaign

Layer 1 — Banner บน Dashboard โชว์ทันทีที่ Admin ส่ง ไม่ต้องรอกดระฆัง ยังแสดงอยู่จนกว่าจะยืนยันครบทุกห้อง

สำคัญที่สุด

notifications

Layer 2 — Dot บน Bell แดง = ยังไม่อ่าน · ส้ม = อ่านแล้วแต่ยังไม่ทำ · หาย = ทำเสร็จครบทุกห้อง

school

Layer 3 — Badge บน Sidebar ห้อง แสดง [!] ข้างห้องที่ยังค้าง ให้รู้ทันทีว่าห้องไหนต้องทำโดยไม่ต้องเข้าไปดูทีละห้อง

Success

ครูยืนยันการจบการศึกษาครบทุกห้อง

check_circle เปิดอ่าน check_circle Follow ขั้นตอน check_circle กดยืนยัน

Notification หายไป · Banner ถูกซ่อน

Pending

ครูเปิดอ่าน Notification แต่ไม่ Follow ต่อ

check_circle เปิดอ่าน cancel Follow ขั้นตอน cancel กดยืนยัน

Dot เปลี่ยนเป็นสีส้ม · Banner ยังแสดงอยู่

info การแค่ "อ่าน" ไม่นับว่าทำเสร็จ

Pending

ครูปิดเว็บกลางคัน ยังไม่กดยืนยัน

check_circle เปิดอ่าน check_circle Follow ขั้นตอน cancel กดยืนยัน

State "pending" ยังอยู่หลัง refresh ผ่าน localStorage

info ต้อง persist state เพื่อรับมือ Scenario นี้

Not Started

ครูไม่เปิด Notification เลย

cancel เปิดอ่าน cancel Follow ขั้นตอน cancel กดยืนยัน

Banner บน Dashboard โชว์อยู่เลย ไม่ต้องรอกดระฆัง

info นี่คือเหตุผลที่ต้องมี Banner ไม่ใช่แค่ Dot

#5 แนะนำเพิ่ม

Partial

ครูมี 2 ห้อง ยืนยันเสร็จแค่ 1 ห้อง

check_circle เปิดอ่าน check_circle Follow ขั้นตอน rule กดยืนยัน

Badge count ลดจาก 2 → 1 · Banner แสดงเฉพาะห้องที่ค้าง

info ต้องตัดสินใจก่อน implement: dot แบบ count หรือ on/off

#6 แนะนำเพิ่ม

Pending

ครู refresh หน้า หลังอ่านแล้วแต่ยังไม่ยืนยัน

check_circle เปิดอ่าน cancel Follow ขั้นตอน cancel กดยืนยัน

Dot สีส้ม (pending) ยังแสดงอยู่หลัง refresh

info state "read" ต้อง persist ใน localStorage

#7 แนะนำเพิ่ม

Done

ครูยืนยันครบแล้ว กลับมาดูหน้า year-end อีกครั้ง

check_circle เปิดอ่าน check_circle Follow ขั้นตอน check_circle กดยืนยัน

Dot ไม่กลับมา · Dashboard แสดง "ดำเนินการเรียบร้อยแล้ว"

Scenarios 1–4 จาก spreadsheet ต้นฉบับ · Scenarios 5–7 เพิ่มจากการวิเคราะห์ edge cases

Documentation

ไฟล์ markdown/html เดิมยังเปิดได้จาก public docs

Design Tokens open_in_new คู่มือ --ci-* และ --sb-* CSS tokens พร้อม live preview สลับ Teacher / Admin portal /docs/design-tokens/ เอกสารถอดตรรกะ Teacher V2 open_in_new ถอดตรรกะการทำงานหน้า Teacher V2 Curriculum เป็นเอกสารส่งต่อ PO/Dev /docs/teacher-v2-dev-handoff/ Prototype handoff open_in_new เป้าหมาย flow, global UI reference rule, design system, behavior notes /teacher/docs/work.md Custom Theme Guide open_in_new คู่มือ custom theme สำหรับ dashboard โรงเรียน /teacher/docs/custom.md Career filter logic open_in_new สรุป logic ของ filter/search ในหน้า Career Content /teacher/docs/career-content-filter-logic.md M-OVEC integration brief open_in_new Brief ระบบเชื่อมโยงข้อมูลอาชีวศึกษาจาก M-OVEC /teacher/docs/movec-data-integration-brief.md

Scripts And Styles

ไฟล์สำคัญที่ใช้ประกอบหน้า prototype

CSS style.css Shared font-face และ CSS เสริม /prototype/css/style.css CSS prototype-tailwind.css Compiled Tailwind CSS /prototype/css/prototype-tailwind.css CSS collab.css Dashboard โรงเรียนและ custom theme styles /prototype/css/collab.css CSS admin.css Styles สำหรับหน้า admin และ setup theme /prototype/css/admin.css JS index.js Interaction ของ Teacher Workspace /prototype/js/teacher/index.js JS data.js Mock data ที่ใช้ร่วมกันใน Teacher Workspace /prototype/js/teacher/data.js JS student.js Mock state และ interaction ของหน้านักเรียน /prototype/js/student.js JS collab.js Dashboard และ theme controls /prototype/js/collab.js