commit

plans/responsive-qa-after-management-change.md

@@ -0,0 +1,193 @@
+You are a Senior Frontend QA Engineer.
+
+Project:
+Training Management System (TMS)
+
+Current task:
+Perform responsive QA after management UI changes.
+
+Important constraints:
+
+- Do NOT add new business features.
+- Do NOT change database schema.
+- Do NOT rewrite layout from scratch.
+- Fix only responsive/UI issues found.
+- Keep Thai UI.
+- Keep existing desktop layout working.
+- Minimal-impact changes only.
+
+Screen sizes to test:
+
+- 360px
+- 390px
+- 412px
+- 768px
+- 1024px
+- 1440px
+
+Browsers:
+
+- Chrome
+- Microsoft Edge
+
+Pages to test:
+
+Employee:
+
+1. /dashboard/overview
+2. /dashboard/training-records
+3. /dashboard/training-records/create
+4. /dashboard/training-records/[id]
+5. /dashboard/announcements
+6. /dashboard/announcements/[id]
+7. /dashboard/notifications
+
+HRD/Admin:
+
+1. /dashboard/overview
+2. /dashboard/pending-review
+3. /dashboard/training-records
+4. /dashboard/training-records/[id]/review
+5. /dashboard/courses
+6. /dashboard/training-policy
+7. /dashboard/import-employees
+8. /dashboard/announcements
+9. /dashboard/reports
+10. /dashboard/audit-logs
+
+Focus areas:
+
+1. Sidebar / Navigation
+
+- Employee sidebar must not show Reports.
+- Employee sidebar must not show Announcements if announcements are moved to dashboard.
+- Employee sidebar must not show Notifications if notification is moved to bell icon.
+- HRD/Admin sidebar must not show Organizations.
+- HRD/Admin sidebar must not show Master Review.
+- Sidebar drawer works on mobile.
+- Sidebar closes after menu selection on mobile.
+- Menu labels do not overflow.
+
+2. Header
+
+- Notification bell is visible on desktop and mobile.
+- Notification badge does not overflow.
+- User dropdown displays:
+  - name
+  - employee code
+  - email
+- Profile menu is removed.
+- User dropdown does not overflow mobile screen.
+
+3. Dashboard
+
+- Compact filter toolbar does not overflow.
+- Filter controls wrap correctly on mobile.
+- Announcement widget displays correctly on employee dashboard.
+- KPI cards stack correctly.
+- Charts do not overflow.
+- Thai text wraps correctly.
+
+4. Training Record Form
+
+- Course dropdown fits mobile screen.
+- "อื่น ๆ" option works without layout breaking.
+- Custom course text input fits mobile screen.
+- Training type dropdown with new 4 options fits mobile screen.
+- TimePicker for training hours fits mobile screen.
+- Date picker fits mobile screen.
+- File upload area fits mobile screen.
+- Submit/cancel buttons are usable on mobile.
+
+5. Certificate Preview
+
+- Image preview fits dialog.
+- Close button stays inside dialog.
+- Unsupported files show certificate icon.
+- Broken images show certificate icon.
+- Download/open action works.
+- Dialog does not overflow on 360px.
+
+6. Tables
+
+- Tables scroll horizontally where needed.
+- Table toolbar filters wrap correctly.
+- Pagination works on mobile.
+- Action buttons remain accessible.
+- No table breaks page width.
+
+7. Dialogs / Popovers
+
+- Notification popover fits mobile.
+- User dropdown fits mobile.
+- Certificate dialog fits mobile.
+- Review dialog fits mobile.
+- Course dropdown/select popover fits mobile.
+
+8. Reports
+
+- HRD reports filter area fits mobile.
+- Export buttons stack correctly.
+- Report tables scroll horizontally.
+- Employee cannot access reports.
+
+9. Error / Loading / Empty States
+
+- Loading skeleton does not overflow.
+- Error pages are readable on mobile.
+- Empty states are centered/clean.
+
+Required fixes:
+
+- Add max-w-full where needed.
+- Add overflow-x-auto to wide tables.
+- Use flex-col md:flex-row where controls overflow.
+- Use w-full on mobile buttons/inputs.
+- Use min-w-0 for long Thai text containers.
+- Use truncate or break-words where appropriate.
+- Keep desktop layout unchanged as much as possible.
+
+Output Review File:
+
+Create:
+docs/responsive-qa-after-management-change-review.md
+
+Include:
+
+1. Summary
+2. Screens Tested
+3. Pages Reviewed
+4. Issues Found
+5. Issues Fixed
+6. Files Changed
+7. Responsive Patterns Applied
+8. Remaining Risks
+9. Manual Test Checklist
+10. Responsive Readiness Score
+
+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.
+
+Return:
+
+- Complete code changes with file paths.
+- Content of docs/responsive-qa-after-management-change-review.md.
+- Remaining issues if any.