alla-tms/plans/change-pending-review-action-menu.md

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.