194 lines
4.5 KiB
Markdown
194 lines
4.5 KiB
Markdown
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.
|