commit

docs/pre-sprint-6-mobile-ux-review.md

@@ -0,0 +1,97 @@
+# Pre-Sprint 6 Mobile UX Review
+
+## Summary
+
+รอบนี้เป็น final Mobile and Tablet UX review ต่อจาก responsive audit เดิม โดยเน้นความใช้งานได้จริงบนจอเล็กมากขึ้น ไม่ใช่แค่ “ไม่ล้นจอ” แต่ต้อง “กดใช้งานได้, มองเห็น action, และอ่านข้อความไทยได้ชัด”
+
+งานที่เก็บเพิ่มหลัก ๆ:
+
+- เพิ่มการเข้าถึง search บน mobile
+- ขยาย touch target ของ header/sidebar controls
+- ปรับ mobile drawer/sidebar ให้ใช้งานง่ายขึ้นและปิดเองหลังเลือกเมนู
+- ปรับ review dialog ให้เหมาะกับ mobile และข้อความไทย
+- ตรวจซ้ำ shared surfaces ที่กระทบทุกหน้าของ TMS
+
+## Screens Reviewed
+
+Breakpoint targets:
+
+- `360px`
+- `390px`
+- `412px`
+- `768px`
+- `1024px`
+- `1440px`
+
+TMS surfaces reviewed:
+
+- `/dashboard/overview`
+- `/dashboard/training-records`
+- `/dashboard/training-records/[id]`
+- `/dashboard/training-records/[id]/review`
+- `/dashboard/pending-review`
+- `/dashboard/courses`
+- `/dashboard/training-policy`
+- `/dashboard/import-employees`
+- `/dashboard/master-review`
+- `/dashboard/reports`
+- shared sidebar / header / dialog / table toolbar / pagination
+
+## Issues Found
+
+1. Search ถูกซ่อนไว้บน mobile ทำให้ค้นหาใช้งานไม่ได้ในจอเล็ก
+2. Sidebar trigger และ notification trigger มี touch target เล็กเกินไปสำหรับมือถือ
+3. Sidebar menu item / sub item บน mobile สูงค่อนข้างเตี้ย กดพลาดได้ง่าย
+4. Mobile sidebar drawer ยังไม่ปิดอัตโนมัติหลังเลือกเมนู ทำให้ flow ใช้งานช้ากว่าที่ควร
+5. User dropdown ใน sidebar มีความเสี่ยงชนขอบจอเล็ก
+6. Training record review dialog ยังเป็นอังกฤษ และ action buttons ยังไม่ optimize สำหรับ mobile
+7. Mobile drawer width เดิมค่อนข้างแคบสำหรับข้อความไทยและชื่อเมนูยาว
+
+## Issues Fixed
+
+1. `SearchInput` รองรับ `compact` mode และแสดงปุ่มค้นหาใน header บน mobile
+2. ขยาย touch target ของ:
+   - sidebar trigger
+   - notification button
+3. ปรับ `SidebarMenuButton` และ `SidebarMenuSubButton` ให้มีความสูงขั้นต่ำเหมาะกับ touch บน mobile
+4. ปรับ mobile sidebar width ให้กว้างขึ้นแต่ยังไม่เกิน viewport
+5. เพิ่ม behavior ปิด `setOpenMobile(false)` หลังเลือกเมนูหรือ sub menu ใน sidebar
+6. จำกัดความกว้าง user dropdown ให้พอดีกับหน้าจอมือถือ
+7. ปรับ `training-record-review-dialog` เป็นภาษาไทย และทำ action buttons เป็น full width บน mobile
+
+## Remaining Risks
+
+1. รอบนี้ยังเป็น code-based UX review ร่วมกับ type/lint verification ยังไม่มี screenshot automation หรือ manual device run จริงใน session นี้
+2. บาง data table ยังต้องพึ่ง horizontal scroll ตามธรรมชาติของข้อมูล เพราะไม่เหมาะกับการ collapse cell แบบ card ในรอบนี้
+3. Notification panel และ non-TMS legacy surfaces ยังไม่ได้ทำ localization ทั้งหมด เพราะอยู่นอกขอบเขต sprint นี้
+
+## Go-Live Mobile Readiness Score
+
+`8.8 / 10`
+
+เหตุผล:
+
+- Shared mobile UX blockers หลักถูกปิดแล้ว
+- ไม่มี type error
+- ไม่มี lint error ที่บล็อกงาน
+- TMS pages หลักอยู่ในสภาพพร้อม QA ต่อบนอุปกรณ์จริง
+
+คะแนนยังไม่เต็มเพราะ:
+
+- ยังไม่มี visual/device verification จริง
+- ยังมีบางส่วนที่ใช้ horizontal scroll โดยตั้งใจ
+
+## Recommendation
+
+พร้อมเข้าสู่ Sprint 6 ได้ แต่ควรทำ final manual QA จริงก่อน go-live บน:
+
+- iPhone width class: `390px`
+- Android width class: `360px` และ `412px`
+- iPad / tablet portrait: `768px`
+
+จุดที่ควรเช็กด้วยคนจริงเป็นพิเศษ:
+
+1. sidebar drawer flow หลังเปลี่ยน organization และเปลี่ยนหน้า
+2. training records review flow บน mobile
+3. report filters และ table scroll บน tablet
+4. long Thai labels ในข้อมูลจริงที่ยาวกว่าชุด mock/development data