Files
alla-tms/docs/management-change-pending-review-action-menu-review.md
2026-07-16 09:53:14 +07:00

2.2 KiB

Summary

Updated the Pending Review table action UI from a full-width ตรวจสอบ button to a compact three-dot action menu. The review workflow, routes, and backend behavior remain unchanged.

Files Changed

  • src/features/training-records/components/pending-review-action-menu.tsx
  • src/features/training-records/components/pending-review-columns.tsx
  • docs/management-change-pending-review-action-menu-review.md

UI Changes

  • Replaced the full text button in the Pending Review action column with a compact icon button.
  • Used the existing DropdownMenu component and the existing icon system.
  • Kept the action column compact with w-[60px] min-w-[60px].
  • Right-aligned the action trigger so it stays table-friendly.

Action Menu Behavior

  • Trigger button uses:
    • variant="ghost"
    • size="icon"
    • Icons.ellipsis
    • aria-label="เมนูการดำเนินการ"
  • Dropdown items:
    1. ตรวจสอบ
      • navigates to /dashboard/training-records/[id]/review
      • keeps the same behavior as the previous full button
    2. ดูรายละเอียด
      • navigates to /dashboard/training-records/[id]

Responsive Notes

  • The action column is now narrower, which reduces table width pressure on smaller screens.
  • The dropdown content uses right alignment and a viewport-safe max width.
  • Horizontal table scrolling behavior remains controlled by the existing table container.
  • No route, data, or workflow changes were introduced.

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.

Known Limitations

  • This change only updates the Pending Review table action UI.
  • Other training record tables keep their existing action patterns.
  • Final mobile behavior should still be verified in-browser because table overflow depends on real viewport width and row content.