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

Merge pull request 'fix: remove legacy TCO fields from vehicle forms (refs #37)' (#38) from issue-37-remove-tco-fields into main
All checks were successful
Deploy to Staging / Build Images (push) Successful in 26s
Details
Deploy to Staging / Deploy to Staging (push) Successful in 28s
Details
Deploy to Staging / Verify Staging (push) Successful in 6s
Details
Deploy to Staging / Notify Staging Ready (push) Successful in 6s
Details
Deploy to Staging / Notify Staging Failure (push) Has been skipped
Details

Browse Source 
Reviewed-on: #38
This commit was merged in pull request #38.
This commit is contained in:
egullickson
2026-01-16 02:11:07 +00:00
parent 60aa0acbe0 96440104c8
commit 913e084127
5 changed files with 5 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/features/vehicles/api/vehicles.api.ts
View File

@@ -3,7 +3,7 @@
*/
import { apiClient } from '../../../core/api/client';
import { Vehicle, CreateVehicleRequest, UpdateVehicleRequest, DecodedVehicleData, TCOResponse } from '../types/vehicles.types';
import { Vehicle, CreateVehicleRequest, UpdateVehicleRequest, DecodedVehicleData } from '../types/vehicles.types';
// All requests (including dropdowns) use authenticated apiClient
@@ -88,13 +88,5 @@ export const vehiclesApi = {
decodeVin: async (vin: string): Promise<DecodedVehicleData> => {
const response = await apiClient.post('/vehicles/decode-vin', { vin });
return response.data;
},
/**
* Get Total Cost of Ownership data for a vehicle
*/
getTCO: async (vehicleId: string): Promise<TCOResponse> => {
const response = await apiClient.get(`/vehicles/${vehicleId}/tco`);
return response.data;
}
};

140
frontend/src/features/vehicles/components/TCODisplay.tsx
View File

@@ -1,140 +0,0 @@
/**
* @ai-summary TCO (Total Cost of Ownership) display component
* Right-justified display showing lifetime cost and cost per mile/km
*/
import React, { useEffect, useState } from 'react';
import { TCOResponse } from '../types/vehicles.types';
import { vehiclesApi } from '../api/vehicles.api';
interface TCODisplayProps {
vehicleId: string;
tcoEnabled?: boolean;
}
// Currency symbol mapping
const CURRENCY_SYMBOLS: Record<string, string> = {
USD: '$',
EUR: '€',
GBP: '£',
CAD: 'CA$',
AUD: 'A$',
};
export const TCODisplay: React.FC<TCODisplayProps> = ({ vehicleId, tcoEnabled }) => {
const [tco, setTco] = useState<TCOResponse | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!tcoEnabled) {
setTco(null);
return;
}
const fetchTCO = async () => {
setIsLoading(true);
setError(null);
try {
const data = await vehiclesApi.getTCO(vehicleId);
setTco(data);
} catch (err: any) {
console.error('Failed to fetch TCO:', err);
setError('Unable to load TCO data');
} finally {
setIsLoading(false);
}
};
fetchTCO();
}, [vehicleId, tcoEnabled]);
// Don't render if TCO is disabled
if (!tcoEnabled) {
return null;
}
// Loading state
if (isLoading) {
return (
<div className="text-right animate-pulse" role="region" aria-label="Total Cost of Ownership">
<div className="h-8 bg-gray-200 dark:bg-silverstone rounded w-32 ml-auto mb-1"></div>
<div className="h-4 bg-gray-200 dark:bg-silverstone rounded w-24 ml-auto mb-2"></div>
<div className="h-6 bg-gray-200 dark:bg-silverstone rounded w-20 ml-auto mb-1"></div>
<div className="h-4 bg-gray-200 dark:bg-silverstone rounded w-24 ml-auto"></div>
</div>
);
}
// Error state
if (error) {
return (
<div className="text-right text-sm text-gray-500 dark:text-titanio" role="region" aria-label="Total Cost of Ownership">
<span>{error}</span>
</div>
);
}
// No data
if (!tco) {
return null;
}
const currencySymbol = CURRENCY_SYMBOLS[tco.currencyCode] || tco.currencyCode;
// Format currency with proper separators
const formatCurrency = (value: number): string => {
return value.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
};
return (
<div className="text-right" role="region" aria-label="Total Cost of Ownership">
<div className="text-2xl font-bold text-gray-900 dark:text-avus">
{currencySymbol}{formatCurrency(tco.lifetimeTotal)}
</div>
<div className="text-sm text-gray-500 dark:text-titanio mb-2">
Lifetime Total
</div>
{tco.costPerDistance > 0 && (
<>
<div className="text-lg text-gray-700 dark:text-canna">
{currencySymbol}{formatCurrency(tco.costPerDistance)}/{tco.distanceUnit}
</div>
<div className="text-sm text-gray-500 dark:text-titanio">
Cost per {tco.distanceUnit}
</div>
</>
)}
{/* Cost breakdown tooltip/details */}
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-silverstone">
<div className="text-xs text-gray-500 dark:text-titanio text-right space-y-1">
{tco.purchasePrice > 0 && (
<div>Purchase: {currencySymbol}{formatCurrency(tco.purchasePrice)}</div>
)}
{tco.insuranceCosts > 0 && (
<div>Insurance: {currencySymbol}{formatCurrency(tco.insuranceCosts)}</div>
)}
{tco.registrationCosts > 0 && (
<div>Registration: {currencySymbol}{formatCurrency(tco.registrationCosts)}</div>
)}
{tco.taxCosts > 0 && (
<div>Tax: {currencySymbol}{formatCurrency(tco.taxCosts)}</div>
)}
{tco.otherCosts > 0 && (
<div>Other: {currencySymbol}{formatCurrency(tco.otherCosts)}</div>
)}
{tco.fuelCosts > 0 && (
<div>Fuel: {currencySymbol}{formatCurrency(tco.fuelCosts)}</div>
)}
{tco.maintenanceCosts > 0 && (
<div>Maintenance: {currencySymbol}{formatCurrency(tco.maintenanceCosts)}</div>
)}
</div>
</div>
</div>
);
};

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">

9
frontend/src/features/vehicles/pages/VehicleDetailPage.tsx
View File

@@ -16,7 +16,6 @@ import { vehiclesApi } from '../api/vehicles.api';
import { Card } from '../../../shared-minimal/components/Card';
import { VehicleForm } from '../components/VehicleForm';
import { VehicleImage } from '../components/VehicleImage';
import { TCODisplay } from '../components/TCODisplay';
import { useFuelLogs } from '../../fuel-logs/hooks/useFuelLogs';
import { FuelLogResponse, UpdateFuelLogRequest } from '../../fuel-logs/types/fuel-logs.types';
import { FuelLogEditDialog } from '../../fuel-logs/components/FuelLogEditDialog';
@@ -383,14 +382,6 @@ export const VehicleDetailPage: React.FC = () => {
</Typography>
)}
</Box>
{/* TCO Display - right-justified */}
<Box sx={{
width: { xs: '100%', md: 'auto' },
minWidth: { md: 200 },
mt: { xs: 2, md: 0 }
}}>
<TCODisplay vehicleId={vehicle.id} tcoEnabled={vehicle.tcoEnabled} />
</Box>
</Box>
<form className="space-y-4">

37
frontend/src/features/vehicles/types/vehicles.types.ts
View File

@@ -2,9 +2,6 @@
* @ai-summary Type definitions for vehicles feature
*/
// TCO cost interval types
export type CostInterval = 'monthly' | 'semi_annual' | 'annual';
export interface Vehicle {
id: string;
userId: string;
@@ -25,14 +22,8 @@ export interface Vehicle {
createdAt: string;
updatedAt: string;
imageUrl?: string;
// TCO fields
purchasePrice?: number;
purchaseDate?: string;
insuranceCost?: number;
insuranceInterval?: CostInterval;
registrationCost?: number;
registrationInterval?: CostInterval;
tcoEnabled?: boolean;
}
export interface CreateVehicleRequest {
@@ -49,14 +40,8 @@ export interface CreateVehicleRequest {
color?: string;
licensePlate?: string;
odometerReading?: number;
// TCO fields
purchasePrice?: number;
purchaseDate?: string;
insuranceCost?: number;
insuranceInterval?: CostInterval;
registrationCost?: number;
registrationInterval?: CostInterval;
tcoEnabled?: boolean;
}
export interface UpdateVehicleRequest {
@@ -73,30 +58,8 @@ export interface UpdateVehicleRequest {
color?: string;
licensePlate?: string;
odometerReading?: number;
// TCO fields
purchasePrice?: number | null;
purchaseDate?: string | null;
insuranceCost?: number | null;
insuranceInterval?: CostInterval | null;
registrationCost?: number | null;
registrationInterval?: CostInterval | null;
tcoEnabled?: boolean;
}
// TCO (Total Cost of Ownership) response
export interface TCOResponse {
vehicleId: string;
purchasePrice: number;
insuranceCosts: number;
registrationCosts: number;
taxCosts: number;
otherCosts: number;
fuelCosts: number;
maintenanceCosts: number;
lifetimeTotal: number;
costPerDistance: number;
distanceUnit: string;
currencyCode: string;
}
/**