alla-tms/plans/change-course-selection.md

You are a Senior Full Stack Engineer.

Project: Training Management System (TMS)

Current task: Update Employee Training Record form course selection.

Requirement: Change the course name field from plain text input to a searchable course combobox that supports both HRD Course Master and custom course name.

Important constraints:

• Do NOT change folder structure.
• Do NOT migrate ORM unless absolutely necessary.
• Reuse existing Course Master.
• Reuse existing Training Records module.
• Keep Thai UI.
• Keep responsive/mobile behavior.
• Minimal-impact changes only.

Behavior:

1. Course selection field

Replace current plain text input:

• courseName

With searchable combobox:

• Select from Course Master
• Search course by course name or course code
• Show active courses only
• Display course label as: courseCode - courseName

Example: IT001 - Cyber Security Awareness

2. Custom course option

Add option:

• อื่น ๆ / กรอกชื่อหลักสูตรเอง

When selected:

• courseId = null
• Show text input: ชื่อหลักสูตรอื่น ๆ
• This input is required

3. When selecting Course Master

When employee selects a master course:

• courseId = selected course id
• courseName = selected course name
• Optional auto-fill:
  • provider from course organizer/provider
  • submittedHours from standardHours/defaultHours if available

Employee can still edit:

• training date
• training type
• submitted hours
• provider
• remark
• certificate

4. Validation

Rules:

• If courseId is selected:
  • courseName should come from selected course
• If custom course is selected:
  • custom courseName is required
• courseName cannot be empty
• submittedHours must be greater than 0
• certificate is still required if current rule requires it

Thai validation messages:

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

5. Database behavior

Training record should save:

• courseId when selected from master
• courseName always
• courseId = null for custom course

Do not remove existing courseName field.

6. API / data fetching

Add or reuse course list API/query:

• GET active courses
• Support search keyword
• Return:
  • id
  • courseCode
  • name
  • category
  • standardHours
  • organizer
  • certificateRequired

7. UI

Use existing shadcn/ui components if available:

• Command
• Popover
• Button
• Input
• Select

Combobox UX:

• Placeholder: เลือกหรือค้นหาหลักสูตร
• Empty state: ไม่พบหลักสูตร
• Custom option: อื่น ๆ / กรอกชื่อหลักสูตรเอง
• Mobile friendly

8. 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/features/courses/server/course-data.ts
• src/app/api/courses/route.ts

9. Output Review File

Create: docs/management-change-course-selection-review.md

Include:

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

Manual Test Checklist:

• Employee can search course from Course Master.
• Employee can select course from Course Master.
• Selected course fills course name.
• Selected course fills provider if available.
• Selected course fills default hours if available.
• Employee can choose custom course.
• Custom course name is required.
• Saving master course stores courseId.
• Saving custom course stores courseId as null.
• HRD review still displays course name correctly.
• Duplicate warning still works.
• Mobile layout works.

Return:

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