You are a Senior Full Stack Engineer.

Project:
Training Management System (TMS)

Current task:
Update submitted training hours input to use TimePicker UI.

Requirement:
In Create/Edit Training Record form, change submitted hours input from number input to TimePicker-style input.

Important constraints:

- Do NOT change folder structure.
- Do NOT change database schema.
- Do NOT store Date object in database for hours.
- Keep existing submittedHours/hours database field as numeric/decimal.
- Keep Thai UI.
- Keep responsive/mobile behavior.
- Minimal-impact changes only.

Business logic:

1. Training hours should be selected using TimePicker UI.

Use existing component if available:

- src/components/ui/datetime-picker
- TimePicker

Example usage:
import { TimePicker } from "@/components/ui/datetime-picker";

2. The TimePicker value is a Date object in UI only.

Convert TimePicker value to decimal hours before submit.

Conversion examples:

- 00:30 -> 0.5
- 01:00 -> 1
- 01:30 -> 1.5
- 02:15 -> 2.25
- 07:30 -> 7.5

3. Convert decimal hours back to TimePicker value in edit mode.

Examples:

- 1.5 -> 01:30
- 2 -> 02:00
- 2.25 -> 02:15
- 7.5 -> 07:30

4. Add helper functions:

decimalHoursToDate(hours: number): Date
dateToDecimalHours(date: Date): number

Recommended behavior:

- Use a fixed base date, e.g. 1970-01-01
- Hours come from date.getHours()
- Minutes come from date.getMinutes()
- Decimal = hours + minutes / 60

5. Validation:

Rules:

- submittedHours is required.
- submittedHours must be greater than 0.
- submittedHours should not exceed 24 unless business requires otherwise.
- Minutes should support 15-minute or 30-minute increments if TimePicker supports it.

Thai validation messages:

- กรุณาระบุจำนวนชั่วโมงอบรม
- จำนวนชั่วโมงอบรมต้องมากกว่า 0
- จำนวนชั่วโมงอบรมต้องไม่เกิน 24 ชั่วโมง

6. UI label:

Label:

- จำนวนชั่วโมงอบรม \*

Helper text:

- เลือกระยะเวลาอบรม เช่น 01:30 = 1.5 ชั่วโมง

Display calculated text under input:

- รวม 1.5 ชั่วโมง

7. Do not break existing dashboard/report calculations.

Database should still save:

- submittedHours / hours as decimal number

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/app/api/training-records/route.ts
- src/app/api/training-records/[id]/route.ts
- src/lib/time-utils.ts or src/features/training-records/utils/time-utils.ts

9. Output Review File

Create:
docs/management-change-training-hours-timepicker-review.md

Include:

1. Summary
2. Files Changed
3. UI Changes
4. TimePicker Behavior
5. Decimal Conversion Logic
6. Validation Rules
7. Edit Mode Behavior
8. Dashboard/Report Impact
9. Manual Test Checklist
10. Known Limitations

Manual Test Checklist:

- Create form shows TimePicker for training hours.
- Selecting 01:30 saves 1.5 hours.
- Selecting 02:00 saves 2 hours.
- Selecting 02:15 saves 2.25 hours.
- Empty value is blocked.
- 00:00 is blocked.
- Value above 24 hours is blocked.
- Edit form converts 1.5 back to 01:30.
- Dashboard still calculates approved hours correctly.
- Reports still export decimal hours correctly.
- Mobile layout works.

Return:

- Complete code changes with file paths.
- Content of docs/management-change-training-hours-timepicker-review.md.