108 lines
2.7 KiB
Markdown
108 lines
2.7 KiB
Markdown
You are a Senior Frontend Engineer.
|
|
|
|
Project:
|
|
Training Management System (TMS)
|
|
|
|
Current task:
|
|
Update Pending Review table action button UI.
|
|
|
|
Requirement:
|
|
Change the current full "ตรวจสอบ" button in the Pending Review table to a compact three-dot action menu.
|
|
|
|
Important constraints:
|
|
|
|
- Do NOT change database schema.
|
|
- Do NOT change business logic.
|
|
- Do NOT change route behavior.
|
|
- Do NOT break review workflow.
|
|
- Keep Thai UI.
|
|
- Keep responsive/mobile behavior.
|
|
- Minimal-impact changes only.
|
|
|
|
Current UI:
|
|
|
|
- Table row has full button:
|
|
"ตรวจสอบ"
|
|
|
|
New UI:
|
|
|
|
- Replace the full button with a compact three-dot action button:
|
|
"..."
|
|
- Clicking it opens dropdown menu.
|
|
|
|
Dropdown menu items:
|
|
|
|
1. ตรวจสอบ
|
|
- Icon: Check, Eye, or ClipboardCheck
|
|
- Navigate to existing review route
|
|
- Same behavior as current ตรวจสอบ button
|
|
|
|
Optional item if useful: 2. ดูรายละเอียด
|
|
|
|
- Navigate to training record detail page if existing route exists
|
|
|
|
Action button behavior:
|
|
|
|
- Use existing DropdownMenu component if available.
|
|
- Use icon button style.
|
|
- Button should be small and table-friendly.
|
|
- Align to center or right in action column.
|
|
- Keep accessible label:
|
|
aria-label="เมนูการดำเนินการ"
|
|
|
|
Recommended UI:
|
|
|
|
- Button variant="ghost"
|
|
- size="icon"
|
|
- Icon: MoreHorizontal
|
|
|
|
Action column:
|
|
|
|
- Header can be blank or "จัดการ"
|
|
- Width should be compact:
|
|
w-[60px] or min-w-[60px]
|
|
- Do not let this column expand table width.
|
|
|
|
Responsive:
|
|
|
|
- On mobile/tablet, the action menu must remain visible.
|
|
- Dropdown must not overflow viewport.
|
|
- Table should still horizontally scroll inside container if needed.
|
|
|
|
Files likely involved:
|
|
|
|
- src/features/training-records/components/pending-review-columns.tsx
|
|
- src/features/training-records/components/pending-review-table.tsx
|
|
- src/features/training-records/components/training-record-tables/columns.tsx
|
|
- src/components/ui/dropdown-menu.tsx if existing
|
|
|
|
Output Review File:
|
|
Create:
|
|
docs/management-change-pending-review-action-menu-review.md
|
|
|
|
Include:
|
|
|
|
1. Summary
|
|
2. Files Changed
|
|
3. UI Changes
|
|
4. Action Menu Behavior
|
|
5. Responsive Notes
|
|
6. Manual Test Checklist
|
|
7. Known Limitations
|
|
|
|
Manual Test Checklist:
|
|
|
|
- Pending Review table no longer shows full "ตรวจสอบ" button.
|
|
- Three-dot button appears in action column.
|
|
- Clicking three-dot button opens action menu.
|
|
- "ตรวจสอบ" menu item opens existing review page.
|
|
- Review workflow still works.
|
|
- Table width is reduced.
|
|
- Mobile layout works.
|
|
- Dropdown does not overflow viewport.
|
|
|
|
Return:
|
|
|
|
- Complete code changes with file paths.
|
|
- Content of docs/management-change-pending-review-action-menu-review.md.
|