alla-tms/plans/change-training-course-dropdown.md

You are a Senior Full Stack Engineer.

Project: Training Management System (TMS)

Current task: Update the Create/Edit Training Record form course field.

Requirement: Change the course input behavior to a dropdown first, and only show text input when the employee selects "อื่น ๆ".

Important constraints:

• Do NOT change folder structure.
• Do NOT change database schema unless absolutely necessary.
• Do NOT remove existing courseName field.
• Do NOT break existing create/edit training record flow.
• Reuse existing Course Master data.
• Reuse existing Auth.js and Drizzle ORM.
• Keep Thai UI.
• Keep responsive/mobile behavior.
• Minimal-impact changes only.

Business behavior:

1. Course field should be displayed as a dropdown/select by default.

Label:

• ชื่อหลักสูตร *

Placeholder:

• เลือกหลักสูตร

Dropdown options:

• Active courses from Course Master
• Last option must be: อื่น ๆ

2. Course option display format:

If courseCode exists:

• courseCode - courseName

Example:

• IT001 - Cyber Security Awareness

If courseCode does not exist:

• courseName

3. When employee selects a Course Master item:

Set:

• courseId = selected course id
• courseName = selected course name

Optional auto-fill if data exists:

• provider / organizer
• submittedHours / standardHours

Do not show custom text input.

4. When employee selects "อื่น ๆ":

Behavior:

• Hide or replace the dropdown with a text input field.
• Show text input for custom course name.

Text input label:

• ชื่อหลักสูตรอื่น ๆ *

Placeholder:

• กรอกชื่อหลักสูตร

Set:

• courseId = null
• courseName = custom text value

Also show a small button/link:

• เปลี่ยนกลับไปเลือกจากหลักสูตร

When clicked:

• Clear custom course name
• Show dropdown again
• courseId = selected/default state
• courseName = ""

5. Validation rules:

If selected course is from Course Master:

• courseId is required or courseName must be derived from selected course.

If selected "อื่น ๆ":

• custom courseName is required.

Thai validation messages:

• กรุณาเลือกหลักสูตร
• กรุณากรอกชื่อหลักสูตร
• กรุณาระบุจำนวนชั่วโมงอบรม

6. Edit mode behavior:

If existing record has courseId:

• show dropdown selected to that course.

If existing record has courseId = null but has courseName:

• show custom text input with existing courseName.

7. API / Data fetching:

Use existing Course Master API/query if available.

Course list should only show active courses.

Return course fields:

• id
• courseCode
• name
• standardHours
• organizer
• certificateRequired

8. Database behavior:

Training record must always save:

• courseName

Training record should save:

• courseId if selected from master

Training record should save:

• courseId = null if "อื่น ๆ"

Do not remove courseName because it is needed for historical reporting.

9. UI/UX:

Desktop:

• Dropdown full width
• Custom input full width

Mobile:

• Dropdown/input must fit screen width

Use existing UI components:

• Select
• Input
• Button
• FormField

Do not use complex combobox unless existing project already uses one.

10. Files likely involved:

• src/features/training-records/components/training-record-form.tsx
• src/features/training-records/schemas/training-record.ts
• src/features/training-records/api/types.ts
• src/features/training-records/server/training-record-data.ts
• src/app/api/training-records/route.ts
• src/app/api/training-records/[id]/route.ts
• src/app/api/courses/route.ts
• src/features/courses/server/course-data.ts

11. Output Review File

Create: docs/management-change-training-course-dropdown-review.md

The file must include:

1. Summary
2. Files Changed
3. UI Changes
4. Course Dropdown Behavior
5. Custom Course Behavior
6. Edit Mode Behavior
7. Validation Rules
8. Database Behavior
9. Manual Test Checklist
10. Known Limitations

Manual Test Checklist:

• Create form shows course dropdown by default.
• Active Course Master records are shown in dropdown.
• "อื่น ๆ" appears as the last option.
• Selecting Course Master saves courseId and courseName.
• Selecting Course Master auto-fills provider if available.
• Selecting Course Master auto-fills hours if available.
• Selecting "อื่น ๆ" changes dropdown to text input.
• Custom course name is required when "อื่น ๆ" is selected.
• "เปลี่ยนกลับไปเลือกจากหลักสูตร" works.
• Edit existing master course shows dropdown selected.
• Edit existing custom course shows text input.
• HRD review page still shows course name correctly.
• Reports still show course name correctly.
• Mobile layout works.

Return:

• Complete code changes with file paths.
• Content of docs/management-change-training-course-dropdown-review.md.