Merge pull request 'fix: remove legacy TCO fields from vehicle forms (refs #37)' (#38) from issue-37-remove-tco-fields into main

Reviewed-on: #38

frontend/src/features/vehicles/api/vehicles.api.ts

@@ -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;
   }
 };

frontend/src/features/vehicles/components/TCODisplay.tsx

@@ -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>
-  );
-};

frontend/src/features/vehicles/components/VehicleForm.tsx

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

frontend/src/features/vehicles/pages/VehicleDetailPage.tsx

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

frontend/src/features/vehicles/types/vehicles.types.ts

@@ -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;
 }
 
 /**