alla-tms/plans/change-training-hours-timepicker.md

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.