egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove legacy TCO fields from vehicle forms (refs #37)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 2m42s
Details
Deploy to Staging / Deploy to Staging (pull_request) Successful in 29s
Details
Deploy to Staging / Verify Staging (pull_request) Successful in 8s
Details
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 6s
Details
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
Details

Browse Source 
- Remove CostInterval type and TCOResponse interface from frontend types
- Remove insurance/registration cost fields from VehicleForm schema and UI
- Keep purchasePrice and purchaseDate fields on vehicle form
- Remove TCODisplay component from VehicleDetailPage
- Delete TCODisplay.tsx component file
- Remove getTCO method from vehicles API client

Legacy TCO fields moved to ownership-costs feature in #29.
Backend endpoint preserved for future reporting feature.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-01-15 11:03:31 -06:00
parent 60aa0acbe0
commit 96440104c8
5 changed files with 5 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
frontend/src/features/vehicles/components/VehicleForm.tsx
View File

@@ -3,24 +3,16 @@
*/
import React, { useState, useEffect, useRef } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Checkbox, FormControlLabel } from '@mui/material';
import { Button } from '../../../shared-minimal/components/Button';
import { CreateVehicleRequest, Vehicle, CostInterval } from '../types/vehicles.types';
import { CreateVehicleRequest, Vehicle } from '../types/vehicles.types';
import { vehiclesApi } from '../api/vehicles.api';
import { VehicleImageUpload } from './VehicleImageUpload';
import { useTierAccess } from '../../../core/hooks/useTierAccess';
import { UpgradeRequiredDialog } from '../../../shared-minimal/components/UpgradeRequiredDialog';
// Cost interval options
const costIntervalOptions: { value: CostInterval; label: string }[] = [
{ value: 'monthly', label: 'Monthly' },
{ value: 'semi_annual', label: 'Semi-Annual (6 months)' },
{ value: 'annual', label: 'Annual' },
];
const vehicleSchema = z
.object({
vin: z.string().max(17).nullable().optional().transform(val => val ?? undefined),
@@ -36,14 +28,8 @@ const vehicleSchema = z
color: z.string().nullable().optional(),
licensePlate: z.string().nullable().optional(),
odometerReading: z.number().min(0).nullable().optional(),
// TCO fields
purchasePrice: z.number().min(0).nullable().optional(),
purchaseDate: z.string().nullable().optional(),
insuranceCost: z.number().min(0).nullable().optional(),
insuranceInterval: z.enum(['monthly', 'semi_annual', 'annual']).nullable().optional(),
registrationCost: z.number().min(0).nullable().optional(),
registrationInterval: z.enum(['monthly', 'semi_annual', 'annual']).nullable().optional(),
tcoEnabled: z.boolean().nullable().optional(),
})
.refine(
(data) => {
@@ -137,7 +123,6 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
watch,
setValue,
reset,
control,
} = useForm<CreateVehicleRequest>({
resolver: zodResolver(vehicleSchema),
defaultValues: initialData,
@@ -841,14 +826,11 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
/>
</div>
{/* Ownership Costs Section (TCO) */}
{/* Purchase Information Section */}
<div className="border-t border-gray-200 dark:border-silverstone pt-6 mt-6">
<h3 className="text-lg font-medium text-gray-900 dark:text-avus mb-4">
Ownership Costs
Purchase Information
</h3>
<p className="text-sm text-gray-600 dark:text-titanio mb-4">
Track your total cost of ownership including purchase price and recurring costs.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
@@ -878,107 +860,6 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
/>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
Insurance Cost
</label>
<input
{...register('insuranceCost', { valueAsNumber: true })}
type="number"
inputMode="decimal"
step="0.01"
className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
placeholder="e.g., 150"
style={{ fontSize: '16px' }}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
Insurance Interval
</label>
<select
{...register('insuranceInterval')}
className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
style={{ fontSize: '16px' }}
>
<option value="">Select Interval</option>
{costIntervalOptions.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
Registration Cost
</label>
<input
{...register('registrationCost', { valueAsNumber: true })}
type="number"
inputMode="decimal"
step="0.01"
className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
placeholder="e.g., 200"
style={{ fontSize: '16px' }}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
Registration Interval
</label>
<select
{...register('registrationInterval')}
className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
style={{ fontSize: '16px' }}
>
<option value="">Select Interval</option>
{costIntervalOptions.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
</div>
</div>
<div className="mt-4">
<Controller
name="tcoEnabled"
control={control}
render={({ field }) => (
<FormControlLabel
control={
<Checkbox
checked={field.value ?? false}
onChange={(e) => field.onChange(e.target.checked)}
color="primary"
sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
/>
}
label="Display Total Cost of Ownership on vehicle details"
sx={{
minHeight: 44,
'& .MuiFormControlLabel-label': {
fontSize: '0.875rem',
fontWeight: 500,
color: 'text.primary',
},
}}
/>
)}
/>
<p className="text-xs text-gray-500 dark:text-titanio mt-1 ml-8">
When enabled, shows lifetime cost and cost per mile/km on the vehicle detail page.
</p>
</div>
</div>
<div className="flex gap-3 justify-end pt-4">