alla-tms/plans/change-import-button-in-users.md

You are a Senior Frontend Engineer.

Project: Training Management System (TMS)

Current task: Move Import Employees from sidebar into Users/Employees page as an action button.

Requirement: Remove "นำเข้าพนักงาน" from sidebar navigation and add it as a button inside the Users/Employees page.

Important constraints:

• Do NOT delete /dashboard/import-employees route.
• Do NOT delete import employee API.
• Do NOT change database schema.
• Do NOT change permissions.
• Do NOT create nested sidebar menu.
• Keep Thai UI.
• Keep responsive behavior.
• Minimal-impact changes only.

Navigation change:

1. Remove root-level sidebar menu:

• นำเข้าพนักงาน

2. Do NOT add it as sidebar submenu.

3. Keep sidebar structure:

ข้อมูลหลัก ├─ พนักงาน ├─ หลักสูตร ├─ นโยบาย └─ ประกาศ

Users/Employees page change:

1. On Users/Employees page, add action button:

Label:

• นำเข้าพนักงาน

Icon:

• Upload or
• FileUp

Button behavior:

• Click redirects to: /dashboard/import-employees

2. Place the button in page header action area.

Recommended layout:

Title:

• พนักงาน

Description:

• จัดการข้อมูลพนักงานและสิทธิ์การใช้งานระบบ

Actions:

• นำเข้าพนักงาน
• เพิ่มพนักงาน

If Add User already exists:

• Keep Add User button.
• Add Import Employees button beside it.

If space is limited on mobile:

• Stack buttons vertically or make full width.

3. Permission:

Button visible only for HRD/Admin.

Employee users should not see this button.

4. Direct route:

/dashboard/import-employees should remain protected as HRD/Admin only.

5. Responsive:

Desktop:

• Buttons align right in page header.

Mobile:

• Buttons stack full width.
• No overflow.

Files likely involved:

• src/config/nav-config.ts
• src/app/dashboard/users/page.tsx
• src/features/users/components/*
• src/components/ui/heading.tsx or page header component if used
• src/app/dashboard/import-employees/page.tsx only if redirect/back button needed

Output Review File:

Create: docs/management-change-import-button-in-users-review.md

Include:

1. Summary
2. Files Changed
3. Sidebar Changes
4. Users Page Changes
5. Permission Rules
6. Responsive Notes
7. Manual Test Checklist
8. Known Limitations

Manual Test Checklist:

• Sidebar no longer shows "นำเข้าพนักงาน".
• Sidebar still shows "พนักงาน".
• Users page shows "นำเข้าพนักงาน" button for HRD/Admin.
• Button links to /dashboard/import-employees.
• Add User button still works if present.
• Employee user does not see import button.
• Direct /dashboard/import-employees remains HRD/Admin only.
• Mobile layout does not overflow.

Return:

• Complete code changes with file paths.
• Content of docs/management-change-import-button-in-users-review.md.