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

feat: Total Cost of Ownership (TCO) per Vehicle #28

Merged
egullickson merged 11 commits from issue-15-add-tco-feature into main 2026-01-14 03:08:35 +00:00
Conversation 0 Commits 11 Files Changed 33 +191 -2
3 changed files with 191 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5e40754c68 - Show all commits

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 } from '../types/vehicles.types';
import { Vehicle, CreateVehicleRequest, UpdateVehicleRequest, DecodedVehicleData, TCOResponse } from '../types/vehicles.types';
// All requests (including dropdowns) use authenticated apiClient
@@ -88,5 +88,13 @@ 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;
}
};

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

@@ -7,12 +7,19 @@ import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Button } from '../../../shared-minimal/components/Button';
import { CreateVehicleRequest, Vehicle } from '../types/vehicles.types';
import { CreateVehicleRequest, Vehicle, CostInterval } 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),
@@ -28,6 +35,14 @@ 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) => {
@@ -824,6 +839,131 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
/>
</div>
{/* Ownership Costs Section (TCO) */}
<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
</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>
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
Purchase Price
</label>
<input
{...register('purchasePrice', { 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., 25000"
style={{ fontSize: '16px' }}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
Purchase Date
</label>
<input
{...register('purchaseDate')}
type="date"
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"
style={{ fontSize: '16px' }}
/>
</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">
<label className="flex items-center gap-3 cursor-pointer min-h-[44px]">
<input
{...register('tcoEnabled')}
type="checkbox"
className="w-5 h-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:bg-scuro"
/>
<span className="text-sm font-medium text-gray-700 dark:text-avus">
Display Total Cost of Ownership on vehicle details
</span>
</label>
<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">
<Button variant="secondary" onClick={onCancel} type="button">
Cancel

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

@@ -2,6 +2,9 @@
* @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;
@@ -22,6 +25,14 @@ 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 {
@@ -38,6 +49,14 @@ 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 {
@@ -54,6 +73,28 @@ 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;
fuelCosts: number;
maintenanceCosts: number;
lifetimeTotal: number;
costPerDistance: number;
distanceUnit: string;
currencyCode: string;
}
/**