commit

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

@@ -0,0 +1,107 @@
+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.