feat: add TCO display component (refs #15)

- Create TCODisplay component showing lifetime cost and cost per distance
- Display cost breakdown (purchase, insurance, registration, fuel, maintenance)
- Integrate into VehicleDetailPage right-justified next to vehicle details
- Responsive layout: stacks vertically on mobile, side-by-side on desktop
- Only shows when tcoEnabled is true

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

backend/src/features/maintenance/domain/maintenance.service.ts

@@ -9,7 +9,8 @@ import type {
   MaintenanceRecordResponse,
   MaintenanceScheduleResponse,
   MaintenanceCategory,
-  ScheduleType
+  ScheduleType,
+  MaintenanceCostStats
 } from './maintenance.types';
 import { validateSubtypes } from './maintenance.types';
 import { MaintenanceRepository } from '../data/maintenance.repository';
@@ -63,6 +64,19 @@ export class MaintenanceService {
     return records.map(r => this.toRecordResponse(r));
   }
 
+  async getVehicleMaintenanceCosts(vehicleId: string, userId: string): Promise<MaintenanceCostStats> {
+    const records = await this.repo.findRecordsByVehicleId(vehicleId, userId);
+    const totalCost = records.reduce((sum, r) => {
+      if (r.cost === null || r.cost === undefined) return sum;
+      const cost = Number(r.cost);
+      if (isNaN(cost)) {
+        throw new Error(`Invalid cost value for maintenance record ${r.id}`);
+      }
+      return sum + cost;
+    }, 0);
+    return { totalCost, recordCount: records.length };
+  }
+
   async updateRecord(userId: string, id: string, patch: UpdateMaintenanceRecordRequest): Promise<MaintenanceRecordResponse | null> {
     const existing = await this.repo.findRecordById(id, userId);
     if (!existing) return null;

backend/src/features/maintenance/domain/maintenance.types.ts

@@ -162,6 +162,12 @@ export interface MaintenanceRecordResponse extends MaintenanceRecord {
   subtypeCount: number;
 }
 
+// TCO aggregation stats
+export interface MaintenanceCostStats {
+  totalCost: number;
+  recordCount: number;
+}
+
 export interface MaintenanceScheduleResponse extends MaintenanceSchedule {
   subtypeCount: number;
   isDueSoon?: boolean;

backend/src/features/vehicles/api/vehicles.controller.ts

@@ -166,20 +166,20 @@ export class VehiclesController {
     try {
       const userId = (request as any).user.sub;
       const { id } = request.params;
-      
+
       await this.vehiclesService.deleteVehicle(id, userId);
-      
+
       return reply.code(204).send();
     } catch (error: any) {
       logger.error('Error deleting vehicle', { error, vehicleId: request.params.id, userId: (request as any).user?.sub });
-      
+
       if (error.message === 'Vehicle not found' || error.message === 'Unauthorized') {
         return reply.code(404).send({
           error: 'Not Found',
           message: 'Vehicle not found'
         });
       }
-      
+
       return reply.code(500).send({
         error: 'Internal server error',
         message: 'Failed to delete vehicle'
@@ -187,6 +187,37 @@ export class VehiclesController {
     }
   }
 
+  async getTCO(request: FastifyRequest<{ Params: VehicleParams }>, reply: FastifyReply) {
+    try {
+      const userId = (request as any).user.sub;
+      const { id } = request.params;
+
+      const tco = await this.vehiclesService.getTCO(id, userId);
+      return reply.code(200).send(tco);
+    } catch (error: any) {
+      logger.error('Error getting vehicle TCO', { error, vehicleId: request.params.id, userId: (request as any).user?.sub });
+
+      if (error.statusCode === 404 || error.message === 'Vehicle not found') {
+        return reply.code(404).send({
+          error: 'Not Found',
+          message: 'Vehicle not found'
+        });
+      }
+
+      if (error.statusCode === 403 || error.message === 'Unauthorized') {
+        return reply.code(403).send({
+          error: 'Forbidden',
+          message: 'Not authorized to access this vehicle'
+        });
+      }
+
+      return reply.code(500).send({
+        error: 'Internal server error',
+        message: 'Failed to calculate TCO'
+      });
+    }
+  }
+
   async getDropdownMakes(request: FastifyRequest<{ Querystring: { year: number } }>, reply: FastifyReply) {
     try {
       const { year } = request.query;

backend/src/features/vehicles/api/vehicles.routes.ts

@@ -100,6 +100,12 @@ export const vehiclesRoutes: FastifyPluginAsync = async (
     handler: vehiclesController.deleteImage.bind(vehiclesController)
   });
 
+  // GET /api/vehicles/:id/tco - Get vehicle Total Cost of Ownership
+  fastify.get<{ Params: VehicleParams }>('/vehicles/:id/tco', {
+    preHandler: [fastify.authenticate],
+    handler: vehiclesController.getTCO.bind(vehiclesController)
+  });
+
   // Dynamic :id routes MUST come last to avoid matching specific paths like "dropdown"
   // GET /api/vehicles/:id - Get specific vehicle
   fastify.get<{ Params: VehicleParams }>('/vehicles/:id', {

backend/src/features/vehicles/api/vehicles.validation.ts

@@ -6,6 +6,9 @@
 import { z } from 'zod';
 import { isValidVIN } from '../../../shared-minimal/utils/validators';
 
+// Cost interval enum for TCO recurring costs
+const costIntervalSchema = z.enum(['monthly', 'semi_annual', 'annual']);
+
 export const createVehicleSchema = z.object({
   vin: z.string()
     .length(17, 'VIN must be exactly 17 characters')
@@ -14,6 +17,14 @@ export const createVehicleSchema = z.object({
   color: z.string().min(1).max(50).optional(),
   licensePlate: z.string().min(1).max(20).optional(),
   odometerReading: z.number().min(0).max(9999999).optional(),
+  // TCO fields
+  purchasePrice: z.number().min(0).max(99999999.99).optional(),
+  purchaseDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, 'Date must be YYYY-MM-DD').optional(),
+  insuranceCost: z.number().min(0).max(9999999.99).optional(),
+  insuranceInterval: costIntervalSchema.optional(),
+  registrationCost: z.number().min(0).max(9999999.99).optional(),
+  registrationInterval: costIntervalSchema.optional(),
+  tcoEnabled: z.boolean().optional(),
 });
 
 export const updateVehicleSchema = z.object({
@@ -30,6 +41,14 @@ export const updateVehicleSchema = z.object({
   color: z.string().min(1).max(50).optional(),
   licensePlate: z.string().min(1).max(20).optional(),
   odometerReading: z.number().min(0).max(9999999).optional(),
+  // TCO fields
+  purchasePrice: z.number().min(0).max(99999999.99).optional().nullable(),
+  purchaseDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, 'Date must be YYYY-MM-DD').optional().nullable(),
+  insuranceCost: z.number().min(0).max(9999999.99).optional().nullable(),
+  insuranceInterval: costIntervalSchema.optional().nullable(),
+  registrationCost: z.number().min(0).max(9999999.99).optional().nullable(),
+  registrationInterval: costIntervalSchema.optional().nullable(),
+  tcoEnabled: z.boolean().optional(),
 });
 
 export const vehicleIdSchema = z.object({

backend/src/features/vehicles/data/vehicles.repository.ts

@@ -4,7 +4,7 @@
  */
 
 import { Pool } from 'pg';
-import { Vehicle, CreateVehicleRequest, VehicleImageMeta } from '../domain/vehicles.types';
+import { Vehicle, CreateVehicleRequest, VehicleImageMeta, CostInterval } from '../domain/vehicles.types';
 
 export class VehiclesRepository {
   constructor(private pool: Pool) {}
@@ -12,14 +12,16 @@ export class VehiclesRepository {
   async create(data: CreateVehicleRequest & { userId: string, make?: string, model?: string, year?: number }): Promise<Vehicle> {
     const query = `
       INSERT INTO vehicles (
-        user_id, vin, make, model, year, 
+        user_id, vin, make, model, year,
         engine, transmission, trim_level, drive_type, fuel_type,
-        nickname, color, license_plate, odometer_reading
+        nickname, color, license_plate, odometer_reading,
+        purchase_price, purchase_date, insurance_cost, insurance_interval,
+        registration_cost, registration_interval, tco_enabled
       )
-      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, $19, $20, $21)
       RETURNING *
     `;
-    
+
     const values = [
       data.userId,
       (data.vin && data.vin.trim().length > 0) ? data.vin.trim() : null,
@@ -34,7 +36,14 @@ export class VehiclesRepository {
       data.nickname,
       data.color,
       data.licensePlate,
-      data.odometerReading || 0
+      data.odometerReading || 0,
+      data.purchasePrice ?? null,
+      data.purchaseDate ?? null,
+      data.insuranceCost ?? null,
+      data.insuranceInterval ?? null,
+      data.registrationCost ?? null,
+      data.registrationInterval ?? null,
+      data.tcoEnabled ?? false
     ];
 
     const result = await this.pool.query(query, values);
@@ -142,6 +151,35 @@ export class VehiclesRepository {
       fields.push(`odometer_reading = $${paramCount++}`);
       values.push(data.odometerReading);
     }
+    // TCO fields
+    if (data.purchasePrice !== undefined) {
+      fields.push(`purchase_price = $${paramCount++}`);
+      values.push(data.purchasePrice);
+    }
+    if (data.purchaseDate !== undefined) {
+      fields.push(`purchase_date = $${paramCount++}`);
+      values.push(data.purchaseDate);
+    }
+    if (data.insuranceCost !== undefined) {
+      fields.push(`insurance_cost = $${paramCount++}`);
+      values.push(data.insuranceCost);
+    }
+    if (data.insuranceInterval !== undefined) {
+      fields.push(`insurance_interval = $${paramCount++}`);
+      values.push(data.insuranceInterval);
+    }
+    if (data.registrationCost !== undefined) {
+      fields.push(`registration_cost = $${paramCount++}`);
+      values.push(data.registrationCost);
+    }
+    if (data.registrationInterval !== undefined) {
+      fields.push(`registration_interval = $${paramCount++}`);
+      values.push(data.registrationInterval);
+    }
+    if (data.tcoEnabled !== undefined) {
+      fields.push(`tco_enabled = $${paramCount++}`);
+      values.push(data.tcoEnabled);
+    }
 
     if (fields.length === 0) {
       return this.findById(id);
@@ -193,10 +231,17 @@ export class VehiclesRepository {
         vehicle.nickname,
         vehicle.color,
         vehicle.licensePlate,
-        vehicle.odometerReading || 0
+        vehicle.odometerReading || 0,
+        vehicle.purchasePrice ?? null,
+        vehicle.purchaseDate ?? null,
+        vehicle.insuranceCost ?? null,
+        vehicle.insuranceInterval ?? null,
+        vehicle.registrationCost ?? null,
+        vehicle.registrationInterval ?? null,
+        vehicle.tcoEnabled ?? false
       ];
 
-      const placeholder = `($${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++})`;
+      const placeholder = `($${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++})`;
       placeholders.push(placeholder);
       values.push(...vehicleParams);
     });
@@ -205,7 +250,9 @@ export class VehiclesRepository {
       INSERT INTO vehicles (
         user_id, vin, make, model, year,
         engine, transmission, trim_level, drive_type, fuel_type,
-        nickname, color, license_plate, odometer_reading
+        nickname, color, license_plate, odometer_reading,
+        purchase_price, purchase_date, insurance_cost, insurance_interval,
+        registration_cost, registration_interval, tco_enabled
       )
       VALUES ${placeholders.join(', ')}
       RETURNING *
@@ -292,6 +339,14 @@ export class VehiclesRepository {
       imageFileName: row.image_file_name,
       imageContentType: row.image_content_type,
       imageFileSize: row.image_file_size,
+      // TCO fields
+      purchasePrice: row.purchase_price ? Number(row.purchase_price) : undefined,
+      purchaseDate: row.purchase_date,
+      insuranceCost: row.insurance_cost ? Number(row.insurance_cost) : undefined,
+      insuranceInterval: row.insurance_interval as CostInterval | undefined,
+      registrationCost: row.registration_cost ? Number(row.registration_cost) : undefined,
+      registrationInterval: row.registration_interval as CostInterval | undefined,
+      tcoEnabled: row.tco_enabled,
     };
   }
 }

backend/src/features/vehicles/domain/vehicles.service.ts

@@ -10,7 +10,10 @@ import {
   CreateVehicleRequest,
   UpdateVehicleRequest,
   VehicleResponse,
-  VehicleImageMeta
+  VehicleImageMeta,
+  TCOResponse,
+  CostInterval,
+  PAYMENTS_PER_YEAR
 } from './vehicles.types';
 import { logger } from '../../../core/logging/logger';
 import { cacheService } from '../../../core/config/redis';
@@ -25,6 +28,10 @@ import { NHTSAClient, NHTSADecodeResponse, DecodedVehicleData, MatchedField } fr
 import { canAddVehicle, getVehicleLimitConfig } from '../../../core/config/feature-tiers';
 import { UserProfileRepository } from '../../user-profile/data/user-profile.repository';
 import { SubscriptionTier } from '../../user-profile/domain/user-profile.types';
+import { FuelLogsService } from '../../fuel-logs/domain/fuel-logs.service';
+import { FuelLogsRepository } from '../../fuel-logs/data/fuel-logs.repository';
+import { MaintenanceService } from '../../maintenance/domain/maintenance.service';
+import { UserSettingsService } from '../../fuel-logs/external/user-settings.service';
 
 export class VehicleLimitExceededError extends Error {
   constructor(
@@ -378,6 +385,108 @@ export class VehiclesService {
     ).catch(err => logger.error('Failed to log vehicle delete audit event', { error: err }));
   }
 
+  async getTCO(id: string, userId: string): Promise<TCOResponse> {
+    // Get vehicle and verify ownership
+    const vehicle = await this.repository.findById(id);
+    if (!vehicle) {
+      const err: any = new Error('Vehicle not found');
+      err.statusCode = 404;
+      throw err;
+    }
+    if (vehicle.userId !== userId) {
+      const err: any = new Error('Unauthorized');
+      err.statusCode = 403;
+      throw err;
+    }
+
+    // Get user preferences for units
+    const userSettings = await UserSettingsService.getUserSettings(userId);
+    const distanceUnit = userSettings.unitSystem === 'metric' ? 'km' : 'mi';
+    const currencyCode = userSettings.currencyCode || 'USD';
+
+    // Get fuel costs from fuel-logs service
+    const fuelLogsRepository = new FuelLogsRepository(this.pool);
+    const fuelLogsService = new FuelLogsService(fuelLogsRepository);
+    let fuelCosts = 0;
+    try {
+      const fuelStats = await fuelLogsService.getVehicleStats(id, userId);
+      fuelCosts = fuelStats.totalCost || 0;
+    } catch {
+      // Vehicle may have no fuel logs
+      fuelCosts = 0;
+    }
+
+    // Get maintenance costs from maintenance service
+    const maintenanceService = new MaintenanceService();
+    let maintenanceCosts = 0;
+    try {
+      const maintenanceStats = await maintenanceService.getVehicleMaintenanceCosts(id, userId);
+      maintenanceCosts = maintenanceStats.totalCost || 0;
+    } catch {
+      // Vehicle may have no maintenance records
+      maintenanceCosts = 0;
+    }
+
+    // Get fixed costs from vehicle record
+    const purchasePrice = vehicle.purchasePrice || 0;
+
+    // Normalize recurring costs based on purchase date
+    const insuranceCosts = this.normalizeRecurringCost(
+      vehicle.insuranceCost,
+      vehicle.insuranceInterval,
+      vehicle.purchaseDate
+    );
+    const registrationCosts = this.normalizeRecurringCost(
+      vehicle.registrationCost,
+      vehicle.registrationInterval,
+      vehicle.purchaseDate
+    );
+
+    // Calculate lifetime total
+    const lifetimeTotal = purchasePrice + insuranceCosts + registrationCosts + fuelCosts + maintenanceCosts;
+
+    // Calculate cost per distance
+    const odometerReading = vehicle.odometerReading || 0;
+    const costPerDistance = odometerReading > 0 ? lifetimeTotal / odometerReading : 0;
+
+    return {
+      vehicleId: id,
+      purchasePrice,
+      insuranceCosts,
+      registrationCosts,
+      fuelCosts,
+      maintenanceCosts,
+      lifetimeTotal,
+      costPerDistance,
+      distanceUnit,
+      currencyCode
+    };
+  }
+
+  private normalizeRecurringCost(
+    cost: number | null | undefined,
+    interval: CostInterval | null | undefined,
+    purchaseDate: string | null | undefined
+  ): number {
+    if (!cost || !interval || !purchaseDate) return 0;
+
+    const monthsOwned = Math.max(1, this.calculateMonthsOwned(purchaseDate));
+    const paymentsPerYear = PAYMENTS_PER_YEAR[interval];
+    if (!paymentsPerYear) {
+      throw new Error(`Invalid cost interval: ${interval}`);
+    }
+    const totalPayments = (monthsOwned / 12) * paymentsPerYear;
+    return cost * totalPayments;
+  }
+
+  private calculateMonthsOwned(purchaseDate: string): number {
+    const purchase = new Date(purchaseDate);
+    const now = new Date();
+    const yearDiff = now.getFullYear() - purchase.getFullYear();
+    const monthDiff = now.getMonth() - purchase.getMonth();
+    return yearDiff * 12 + monthDiff;
+  }
+
   async getVehicleRaw(id: string, userId: string): Promise<Vehicle | null> {
     const vehicle = await this.repository.findById(id);
     if (!vehicle || vehicle.userId !== userId) {

backend/src/features/vehicles/domain/vehicles.types.ts

@@ -3,6 +3,15 @@
  * @ai-context Core business types, no external dependencies
  */
 
+// TCO cost interval types
+export type CostInterval = 'monthly' | 'semi_annual' | 'annual';
+
+export const PAYMENTS_PER_YEAR: Record<CostInterval, number> = {
+  monthly: 12,
+  semi_annual: 2,
+  annual: 1,
+} as const;
+
 export interface Vehicle {
   id: string;
   userId: string;
@@ -28,6 +37,14 @@ export interface Vehicle {
   imageFileName?: string;
   imageContentType?: string;
   imageFileSize?: number;
+  // TCO fields
+  purchasePrice?: number;
+  purchaseDate?: string;
+  insuranceCost?: number;
+  insuranceInterval?: CostInterval;
+  registrationCost?: number;
+  registrationInterval?: CostInterval;
+  tcoEnabled?: boolean;
 }
 
 export interface CreateVehicleRequest {
@@ -44,6 +61,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 {
@@ -60,6 +85,14 @@ export interface UpdateVehicleRequest {
   color?: string;
   licensePlate?: string;
   odometerReading?: number;
+  // TCO fields
+  purchasePrice?: number;
+  purchaseDate?: string;
+  insuranceCost?: number;
+  insuranceInterval?: CostInterval;
+  registrationCost?: number;
+  registrationInterval?: CostInterval;
+  tcoEnabled?: boolean;
 }
 
 export interface VehicleResponse {
@@ -82,6 +115,14 @@ export interface VehicleResponse {
   createdAt: string;
   updatedAt: string;
   imageUrl?: string;
+  // TCO fields
+  purchasePrice?: number;
+  purchaseDate?: string;
+  insuranceCost?: number;
+  insuranceInterval?: CostInterval;
+  registrationCost?: number;
+  registrationInterval?: CostInterval;
+  tcoEnabled?: boolean;
 }
 
 export interface VehicleImageMeta {
@@ -116,6 +157,14 @@ export interface CreateVehicleBody {
   color?: string;
   licensePlate?: string;
   odometerReading?: number;
+  // TCO fields
+  purchasePrice?: number;
+  purchaseDate?: string;
+  insuranceCost?: number;
+  insuranceInterval?: CostInterval;
+  registrationCost?: number;
+  registrationInterval?: CostInterval;
+  tcoEnabled?: boolean;
 }
 
 export interface UpdateVehicleBody {
@@ -132,8 +181,30 @@ export interface UpdateVehicleBody {
   color?: string;
   licensePlate?: string;
   odometerReading?: number;
+  // TCO fields
+  purchasePrice?: number;
+  purchaseDate?: string;
+  insuranceCost?: number;
+  insuranceInterval?: CostInterval;
+  registrationCost?: number;
+  registrationInterval?: CostInterval;
+  tcoEnabled?: boolean;
 }
 
 export interface VehicleParams {
   id: string;
 }
+
+// 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;
+}

backend/src/features/vehicles/migrations/006_add_tco_fields.sql

@@ -0,0 +1,33 @@
+-- Migration: Add TCO (Total Cost of Ownership) fields to vehicles table
+-- Issue: #15
+
+ALTER TABLE vehicles
+  ADD COLUMN IF NOT EXISTS purchase_price DECIMAL(12,2),
+  ADD COLUMN IF NOT EXISTS purchase_date DATE,
+  ADD COLUMN IF NOT EXISTS insurance_cost DECIMAL(10,2),
+  ADD COLUMN IF NOT EXISTS insurance_interval VARCHAR(20),
+  ADD COLUMN IF NOT EXISTS registration_cost DECIMAL(10,2),
+  ADD COLUMN IF NOT EXISTS registration_interval VARCHAR(20),
+  ADD COLUMN IF NOT EXISTS tco_enabled BOOLEAN DEFAULT false;
+
+-- Add CHECK constraints to enforce valid interval values
+ALTER TABLE vehicles
+  ADD CONSTRAINT chk_insurance_interval
+    CHECK (insurance_interval IS NULL OR insurance_interval IN ('monthly', 'semi_annual', 'annual'));
+
+ALTER TABLE vehicles
+  ADD CONSTRAINT chk_registration_interval
+    CHECK (registration_interval IS NULL OR registration_interval IN ('monthly', 'semi_annual', 'annual'));
+
+-- Add CHECK constraints for non-negative costs
+ALTER TABLE vehicles
+  ADD CONSTRAINT chk_purchase_price_non_negative
+    CHECK (purchase_price IS NULL OR purchase_price >= 0);
+
+ALTER TABLE vehicles
+  ADD CONSTRAINT chk_insurance_cost_non_negative
+    CHECK (insurance_cost IS NULL OR insurance_cost >= 0);
+
+ALTER TABLE vehicles
+  ADD CONSTRAINT chk_registration_cost_non_negative
+    CHECK (registration_cost IS NULL OR registration_cost >= 0);

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

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

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

@@ -0,0 +1,134 @@
+/**
+ * @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.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

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

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

@@ -15,6 +15,7 @@ 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';
@@ -300,8 +301,8 @@ export const VehicleDetailPage: React.FC = () => {
       </Box>
 
       <Card>
-        <Box sx={{ display: 'flex', gap: 3, mb: 3 }}>
+        <Box sx={{ display: 'flex', gap: 3, mb: 3, flexWrap: { xs: 'wrap', md: 'nowrap' } }}>
-          <Box sx={{ width: 200, flexShrink: 0 }}>
+          <Box sx={{ width: { xs: '100%', sm: 200 }, flexShrink: 0 }}>
             <VehicleImage vehicle={vehicle} height={150} />
           </Box>
           <Box sx={{ flex: 1 }}>
@@ -318,6 +319,14 @@ 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,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;
 }
 
 /**