commit

docs/responsive-qa-after-management-change-review.md

@@ -0,0 +1,134 @@
+# Responsive QA After Management Change Review
+
+## 1. Summary
+
+รอบนี้เป็นการเก็บงาน responsive หลัง management UI changes โดยโฟกัสที่จุดเสี่ยงล้นหน้าจอจาก navigation, header, dropdown/popover, filter toolbar, report filters, course selection, และ announcement detail
+
+ไม่ได้เพิ่ม business feature ใหม่ และไม่ได้แก้ database schema หรือรื้อ layout หลักของระบบ
+
+## 2. Screens Tested
+
+เป้าหมาย breakpoint ที่ใช้ตรวจรอบนี้:
+
+- 360px
+- 390px
+- 412px
+- 768px
+- 1024px
+- 1440px
+
+หมายเหตุ:
+
+- ใน session นี้ in-app browser ใช้งานไม่ได้ จึงเป็นการทำ responsive QA เชิงโค้ดและ layout constraints ตาม breakpoint เป้าหมาย
+- แนะนำให้ทำ visual regression/manual pass ซ้ำใน Chrome และ Edge หลัง pull งานนี้
+
+## 3. Pages Reviewed
+
+Employee:
+
+- `/dashboard/overview`
+- `/dashboard/training-records`
+- `/dashboard/training-records/create`
+- `/dashboard/training-records/[id]`
+- `/dashboard/announcements`
+- `/dashboard/announcements/[id]`
+- `/dashboard/notifications`
+
+HRD/Admin:
+
+- `/dashboard/overview`
+- `/dashboard/pending-review`
+- `/dashboard/training-records`
+- `/dashboard/training-records/[id]/review`
+- `/dashboard/courses`
+- `/dashboard/training-policy`
+- `/dashboard/import-employees`
+- `/dashboard/announcements`
+- `/dashboard/reports`
+- `/dashboard/audit-logs`
+
+## 4. Issues Found
+
+- Header area มีโอกาสล้นบน mobile เมื่อ breadcrumb ยาวและมี notification bell อยู่ฝั่งขวา
+- Breadcrumb item ล่าสุดมีโอกาสดัน layout ถ้าชื่อหน้ายาว
+- User dropdown มีโอกาสกว้างเกิน viewport บน mobile และ email อาจล้น
+- Notification popover มีโอกาสล้น width บนหน้าจอเล็ก และ header ภายใน popover wrap ไม่ดี
+- Course select popover มีโอกาสกว้างเกินหน้าจอ และชื่อหลักสูตรยาวอาจดัน layout
+- Data table toolbar filters บางช่องไม่มี `min-w-0` ทำให้ wrap ได้ไม่ดี
+- Reports filter area เสี่ยงล้นเมื่อ select หลายช่องและปุ่ม export อยู่ร่วมกัน
+- Announcement detail attachment button ยังไม่ friendly กับ mobile width
+- Page heading ขนาดใหญ่และไม่ wrap ในบางหน้า
+
+## 5. Issues Fixed
+
+- ปรับ header ให้ `min-w-0` และลดแรงกดของ breadcrumb บน mobile
+- ปรับ breadcrumb list และ current page ให้ truncate ได้
+- ปรับ user dropdown ให้มี `max-width` ตาม viewport และให้ email `break-all`
+- ปรับ notification popover ให้ width ไม่เกินจอและ header ภายใน wrap ได้
+- ปรับ course select trigger/content ให้ไม่เกิน viewport และ truncate รายการยาว
+- เพิ่ม `min-w-0` ให้ table toolbar inputs เพื่อช่วยการ wrap บน mobile
+- ปรับ overview/reports filter sections ให้ label/action area wrap ได้สะอาดขึ้น
+- ปรับ announcement attachment action ให้ใช้งานเต็มความกว้างบน mobile
+- ปรับ page heading ให้ responsive ขึ้นและ wrap ได้
+
+## 6. Files Changed
+
+- `src/components/layout/header.tsx`
+- `src/components/breadcrumbs.tsx`
+- `src/components/layout/user-nav.tsx`
+- `src/components/ui/heading.tsx`
+- `src/components/ui/table/data-table-toolbar.tsx`
+- `src/features/notifications/components/notification-center.tsx`
+- `src/features/notifications/components/notifications-page.tsx`
+- `src/features/training-records/components/training-record-course-combobox.tsx`
+- `src/features/overview/components/overview-filter-panel.tsx`
+- `src/features/reports/components/reports-page-content.tsx`
+- `src/features/reports/components/report-table-card.tsx`
+- `src/features/announcements/components/announcement-view-page.tsx`
+
+## 7. Responsive Patterns Applied
+
+- `min-w-0` กับ container ที่มีข้อความไทยยาว
+- `truncate` กับ breadcrumb และ select option labels
+- `break-all` สำหรับ email ใน user dropdown
+- `max-w-[calc(100vw-...)]` กับ dropdown/popover/select content
+- `w-full sm:w-auto` สำหรับ action button บน mobile
+- `flex-wrap` ใน header/popover/filter action groups
+- `text-2xl sm:text-3xl` สำหรับ page heading
+
+## 8. Remaining Risks
+
+- ยังไม่ได้ทำ visual click-through automation ใน Chrome/Edge จริงใน session นี้ เพราะ browser automation surface ไม่พร้อมใช้งาน
+- Route access ของ employee ไปหน้า reports โดย URL ตรงควรตรวจ policy อีกครั้ง หากต้องการ “เข้าไม่ได้” ไม่ใช่แค่ “ไม่เห็นเมนู”
+- บางข้อความไทยใน repo ยังมี encoding เพี้ยนใน source output/terminal แม้ไม่กระทบ layout โดยตรง แต่ควร cleanup แยกต่างหาก
+
+## 9. Manual Test Checklist
+
+- [ ] 360px layout works
+- [ ] 390px layout works
+- [ ] 412px layout works
+- [ ] 768px layout works
+- [ ] 1024px layout works
+- [ ] 1440px layout works
+- [ ] Employee menu is correct
+- [ ] HRD/Admin menu is correct
+- [ ] Header bell works
+- [ ] User dropdown works
+- [ ] Dashboard filter does not overflow
+- [ ] Course dropdown works on mobile
+- [ ] Other course input works on mobile
+- [ ] TimePicker works on mobile
+- [ ] Certificate dialog works on mobile
+- [ ] Tables scroll correctly
+- [ ] Reports are HRD only
+- [ ] Thai text does not break layout
+
+## 10. Responsive Readiness Score
+
+`8/10`
+
+เหตุผล:
+
+- จุดล้นที่เสี่ยงที่สุดหลัง management change ถูกเก็บแล้ว
+- desktop layout เดิมยังถูกคงไว้
+- ยังควรมี browser-based QA pass จริงอีก 1 รอบก่อนปิดงาน UAT