commit

plans/change-training-hours-timepicker.md

@@ -0,0 +1,146 @@
+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.