147 lines
3.5 KiB
Markdown
147 lines
3.5 KiB
Markdown
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.
|