Fixes#41 - Purchase information not displayed and save fails on vehicle detail page
Changes
Add purchase price and purchase date display to vehicle detail page under "Current Odometer Reading"
Fix form validation to properly handle empty number inputs (NaN → null preprocessing)
Root Cause
Display Issue: Purchase info fields existed in the Vehicle type but were not rendered in VehicleDetailPage.tsx
Validation Issue: When number inputs with valueAsNumber: true are empty, React Hook Form returns NaN. The zod .min(0) check failed on NaN values, causing validation errors.
Files Changed
frontend/src/features/vehicles/pages/VehicleDetailPage.tsx - Added purchase info display section
frontend/src/features/vehicles/components/VehicleForm.tsx - Added z.preprocess(nanToNull, ...) for number fields
Test Plan
View vehicle detail page - purchase info should display
Edit vehicle without purchase info - should save without validation error
Edit vehicle with purchase info - should save successfully
## Summary
Fixes #41 - Purchase information not displayed and save fails on vehicle detail page
### Changes
- Add purchase price and purchase date display to vehicle detail page under "Current Odometer Reading"
- Fix form validation to properly handle empty number inputs (NaN → null preprocessing)
### Root Cause
1. **Display Issue**: Purchase info fields existed in the Vehicle type but were not rendered in VehicleDetailPage.tsx
2. **Validation Issue**: When number inputs with `valueAsNumber: true` are empty, React Hook Form returns `NaN`. The zod `.min(0)` check failed on NaN values, causing validation errors.
### Files Changed
- `frontend/src/features/vehicles/pages/VehicleDetailPage.tsx` - Added purchase info display section
- `frontend/src/features/vehicles/components/VehicleForm.tsx` - Added `z.preprocess(nanToNull, ...)` for number fields
## Test Plan
- [ ] View vehicle detail page - purchase info should display
- [ ] Edit vehicle without purchase info - should save without validation error
- [ ] Edit vehicle with purchase info - should save successfully
- [ ] Test on mobile viewport (320px, 768px)
- [ ] Test on desktop viewport (1920px)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
- Add purchase price and purchase date display to vehicle detail page
- Fix form validation to handle NaN from empty number inputs using z.preprocess
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <[email protected]>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Summary
Fixes #41 - Purchase information not displayed and save fails on vehicle detail page
Changes
Root Cause
valueAsNumber: trueare empty, React Hook Form returnsNaN. The zod.min(0)check failed on NaN values, causing validation errors.Files Changed
frontend/src/features/vehicles/pages/VehicleDetailPage.tsx- Added purchase info display sectionfrontend/src/features/vehicles/components/VehicleForm.tsx- Addedz.preprocess(nanToNull, ...)for number fieldsTest Plan
🤖 Generated with Claude Code