feat: integrate ownership-costs UI into vehicle detail pages (refs #15)

- Add OwnershipCostsList to desktop VehicleDetailPage
- Add OwnershipCostsList to mobile VehicleDetailMobile
- Users can now view, add, edit, and delete recurring costs directly
  from the vehicle detail view

backend/src/app.ts

@@ -32,6 +32,7 @@ import { onboardingRoutes } from './features/onboarding';
 import { userPreferencesRoutes } from './features/user-preferences';
 import { userExportRoutes } from './features/user-export';
 import { userImportRoutes } from './features/user-import';
+import { ownershipCostsRoutes } from './features/ownership-costs';
 import { pool } from './core/config/database';
 import { configRoutes } from './core/config/config.routes';
 
@@ -93,7 +94,7 @@ async function buildApp(): Promise<FastifyInstance> {
       status: 'healthy',
       timestamp: new Date().toISOString(),
       environment: process.env['NODE_ENV'],
-      features: ['admin', 'auth', 'config', 'onboarding', 'vehicles', 'documents', 'fuel-logs', 'stations', 'maintenance', 'platform', 'notifications', 'user-profile', 'user-preferences', 'user-export', 'user-import']
+      features: ['admin', 'auth', 'config', 'onboarding', 'vehicles', 'documents', 'fuel-logs', 'stations', 'maintenance', 'platform', 'notifications', 'user-profile', 'user-preferences', 'user-export', 'user-import', 'ownership-costs']
     });
   });
 
@@ -103,7 +104,7 @@ async function buildApp(): Promise<FastifyInstance> {
       status: 'healthy',
       scope: 'api',
       timestamp: new Date().toISOString(),
-      features: ['admin', 'auth', 'config', 'onboarding', 'vehicles', 'documents', 'fuel-logs', 'stations', 'maintenance', 'platform', 'notifications', 'user-profile', 'user-preferences', 'user-export', 'user-import']
+      features: ['admin', 'auth', 'config', 'onboarding', 'vehicles', 'documents', 'fuel-logs', 'stations', 'maintenance', 'platform', 'notifications', 'user-profile', 'user-preferences', 'user-export', 'user-import', 'ownership-costs']
     });
   });
 
@@ -145,6 +146,7 @@ async function buildApp(): Promise<FastifyInstance> {
   await app.register(userPreferencesRoutes, { prefix: '/api' });
   await app.register(userExportRoutes, { prefix: '/api' });
   await app.register(userImportRoutes, { prefix: '/api' });
+  await app.register(ownershipCostsRoutes, { prefix: '/api' });
   await app.register(configRoutes, { prefix: '/api' });
 
   // 404 handler

backend/src/features/ownership-costs/api/ownership-costs.controller.ts

@@ -0,0 +1,225 @@
+/**
+ * @ai-summary Fastify route handlers for ownership costs API
+ * @ai-context HTTP request/response handling with Fastify reply methods
+ */
+
+import { FastifyRequest, FastifyReply } from 'fastify';
+import { OwnershipCostsService } from '../domain/ownership-costs.service';
+import { pool } from '../../../core/config/database';
+import { logger } from '../../../core/logging/logger';
+import {
+  OwnershipCostParams,
+  VehicleParams,
+  CreateOwnershipCostBody,
+  UpdateOwnershipCostBody
+} from '../domain/ownership-costs.types';
+
+export class OwnershipCostsController {
+  private service: OwnershipCostsService;
+
+  constructor() {
+    this.service = new OwnershipCostsService(pool);
+  }
+
+  async create(request: FastifyRequest<{ Body: CreateOwnershipCostBody }>, reply: FastifyReply) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const userId = (request as any).user.sub;
+      const cost = await this.service.create(request.body, userId);
+
+      return reply.code(201).send(cost);
+    } catch (error: unknown) {
+      const err = error as Error;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      logger.error('Error creating ownership cost', { error: err, userId: (request as any).user?.sub });
+
+      if (err.message.includes('not found')) {
+        return reply.code(404).send({
+          error: 'Not Found',
+          message: err.message
+        });
+      }
+      if (err.message.includes('Unauthorized')) {
+        return reply.code(403).send({
+          error: 'Forbidden',
+          message: err.message
+        });
+      }
+
+      return reply.code(500).send({
+        error: 'Internal server error',
+        message: 'Failed to create ownership cost'
+      });
+    }
+  }
+
+  async getByVehicle(request: FastifyRequest<{ Params: VehicleParams }>, reply: FastifyReply) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const userId = (request as any).user.sub;
+      const { vehicleId } = request.params;
+
+      const costs = await this.service.getByVehicleId(vehicleId, userId);
+
+      return reply.code(200).send(costs);
+    } catch (error: unknown) {
+      const err = error as Error;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      logger.error('Error listing ownership costs', { error: err, vehicleId: request.params.vehicleId, userId: (request as any).user?.sub });
+
+      if (err.message.includes('not found')) {
+        return reply.code(404).send({
+          error: 'Not Found',
+          message: err.message
+        });
+      }
+      if (err.message.includes('Unauthorized')) {
+        return reply.code(403).send({
+          error: 'Forbidden',
+          message: err.message
+        });
+      }
+
+      return reply.code(500).send({
+        error: 'Internal server error',
+        message: 'Failed to get ownership costs'
+      });
+    }
+  }
+
+  async getById(request: FastifyRequest<{ Params: OwnershipCostParams }>, reply: FastifyReply) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const userId = (request as any).user.sub;
+      const { id } = request.params;
+
+      const cost = await this.service.getById(id, userId);
+
+      return reply.code(200).send(cost);
+    } catch (error: unknown) {
+      const err = error as Error;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      logger.error('Error getting ownership cost', { error: err, costId: request.params.id, userId: (request as any).user?.sub });
+
+      if (err.message.includes('not found')) {
+        return reply.code(404).send({
+          error: 'Not Found',
+          message: err.message
+        });
+      }
+      if (err.message.includes('Unauthorized')) {
+        return reply.code(403).send({
+          error: 'Forbidden',
+          message: err.message
+        });
+      }
+
+      return reply.code(500).send({
+        error: 'Internal server error',
+        message: 'Failed to get ownership cost'
+      });
+    }
+  }
+
+  async update(request: FastifyRequest<{ Params: OwnershipCostParams; Body: UpdateOwnershipCostBody }>, reply: FastifyReply) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const userId = (request as any).user.sub;
+      const { id } = request.params;
+
+      const updatedCost = await this.service.update(id, request.body, userId);
+
+      return reply.code(200).send(updatedCost);
+    } catch (error: unknown) {
+      const err = error as Error;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      logger.error('Error updating ownership cost', { error: err, costId: request.params.id, userId: (request as any).user?.sub });
+
+      if (err.message.includes('not found')) {
+        return reply.code(404).send({
+          error: 'Not Found',
+          message: err.message
+        });
+      }
+      if (err.message.includes('Unauthorized')) {
+        return reply.code(403).send({
+          error: 'Forbidden',
+          message: err.message
+        });
+      }
+
+      return reply.code(500).send({
+        error: 'Internal server error',
+        message: 'Failed to update ownership cost'
+      });
+    }
+  }
+
+  async delete(request: FastifyRequest<{ Params: OwnershipCostParams }>, reply: FastifyReply) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const userId = (request as any).user.sub;
+      const { id } = request.params;
+
+      await this.service.delete(id, userId);
+
+      return reply.code(204).send();
+    } catch (error: unknown) {
+      const err = error as Error;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      logger.error('Error deleting ownership cost', { error: err, costId: request.params.id, userId: (request as any).user?.sub });
+
+      if (err.message.includes('not found')) {
+        return reply.code(404).send({
+          error: 'Not Found',
+          message: err.message
+        });
+      }
+      if (err.message.includes('Unauthorized')) {
+        return reply.code(403).send({
+          error: 'Forbidden',
+          message: err.message
+        });
+      }
+
+      return reply.code(500).send({
+        error: 'Internal server error',
+        message: 'Failed to delete ownership cost'
+      });
+    }
+  }
+
+  async getVehicleStats(request: FastifyRequest<{ Params: VehicleParams }>, reply: FastifyReply) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const userId = (request as any).user.sub;
+      const { vehicleId } = request.params;
+
+      const stats = await this.service.getVehicleCostStats(vehicleId, userId);
+
+      return reply.code(200).send(stats);
+    } catch (error: unknown) {
+      const err = error as Error;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      logger.error('Error getting ownership cost stats', { error: err, vehicleId: request.params.vehicleId, userId: (request as any).user?.sub });
+
+      if (err.message.includes('not found')) {
+        return reply.code(404).send({
+          error: 'Not Found',
+          message: err.message
+        });
+      }
+      if (err.message.includes('Unauthorized')) {
+        return reply.code(403).send({
+          error: 'Forbidden',
+          message: err.message
+        });
+      }
+
+      return reply.code(500).send({
+        error: 'Internal server error',
+        message: 'Failed to get ownership cost stats'
+      });
+    }
+  }
+}

backend/src/features/ownership-costs/api/ownership-costs.routes.ts

@@ -0,0 +1,56 @@
+/**
+ * @ai-summary Fastify routes for ownership costs API
+ * @ai-context Route definitions with Fastify plugin pattern and authentication
+ */
+
+import { FastifyInstance, FastifyPluginOptions } from 'fastify';
+import { FastifyPluginAsync } from 'fastify';
+import { OwnershipCostsController } from './ownership-costs.controller';
+
+export const ownershipCostsRoutes: FastifyPluginAsync = async (
+  fastify: FastifyInstance,
+  _opts: FastifyPluginOptions
+) => {
+  const controller = new OwnershipCostsController();
+
+  // POST /api/ownership-costs - Create new ownership cost
+  fastify.post('/ownership-costs', {
+    preHandler: [fastify.authenticate],
+    handler: controller.create.bind(controller)
+  });
+
+  // GET /api/ownership-costs/:id - Get specific ownership cost
+  fastify.get('/ownership-costs/:id', {
+    preHandler: [fastify.authenticate],
+    handler: controller.getById.bind(controller)
+  });
+
+  // PUT /api/ownership-costs/:id - Update ownership cost
+  fastify.put('/ownership-costs/:id', {
+    preHandler: [fastify.authenticate],
+    handler: controller.update.bind(controller)
+  });
+
+  // DELETE /api/ownership-costs/:id - Delete ownership cost
+  fastify.delete('/ownership-costs/:id', {
+    preHandler: [fastify.authenticate],
+    handler: controller.delete.bind(controller)
+  });
+
+  // GET /api/ownership-costs/vehicle/:vehicleId - Get costs for a vehicle
+  fastify.get('/ownership-costs/vehicle/:vehicleId', {
+    preHandler: [fastify.authenticate],
+    handler: controller.getByVehicle.bind(controller)
+  });
+
+  // GET /api/ownership-costs/vehicle/:vehicleId/stats - Get aggregated cost stats
+  fastify.get('/ownership-costs/vehicle/:vehicleId/stats', {
+    preHandler: [fastify.authenticate],
+    handler: controller.getVehicleStats.bind(controller)
+  });
+};
+
+// For backward compatibility during migration
+export function registerOwnershipCostsRoutes() {
+  throw new Error('registerOwnershipCostsRoutes is deprecated - use ownershipCostsRoutes Fastify plugin instead');
+}

backend/src/features/ownership-costs/data/ownership-costs.repository.ts

@@ -0,0 +1,210 @@
+/**
+ * @ai-summary Data access layer for ownership costs
+ * @ai-context Handles database operations for vehicle ownership costs
+ */
+
+import { Pool } from 'pg';
+import {
+  OwnershipCost,
+  CreateOwnershipCostRequest,
+  UpdateOwnershipCostRequest,
+  CostInterval,
+  OwnershipCostType
+} from '../domain/ownership-costs.types';
+
+export class OwnershipCostsRepository {
+  constructor(private pool: Pool) {}
+
+  async create(data: CreateOwnershipCostRequest & { userId: string }): Promise<OwnershipCost> {
+    const query = `
+      INSERT INTO ownership_costs (
+        user_id, vehicle_id, document_id, cost_type, description,
+        amount, interval, start_date, end_date
+      )
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
+      RETURNING *
+    `;
+
+    const values = [
+      data.userId,
+      data.vehicleId,
+      data.documentId ?? null,
+      data.costType,
+      data.description ?? null,
+      data.amount,
+      data.interval,
+      data.startDate,
+      data.endDate ?? null
+    ];
+
+    const result = await this.pool.query(query, values);
+    return this.mapRow(result.rows[0]);
+  }
+
+  async findByVehicleId(vehicleId: string, userId: string): Promise<OwnershipCost[]> {
+    const query = `
+      SELECT * FROM ownership_costs
+      WHERE vehicle_id = $1 AND user_id = $2
+      ORDER BY start_date DESC, created_at DESC
+    `;
+
+    const result = await this.pool.query(query, [vehicleId, userId]);
+    return result.rows.map(row => this.mapRow(row));
+  }
+
+  async findByUserId(userId: string): Promise<OwnershipCost[]> {
+    const query = `
+      SELECT * FROM ownership_costs
+      WHERE user_id = $1
+      ORDER BY start_date DESC, created_at DESC
+    `;
+
+    const result = await this.pool.query(query, [userId]);
+    return result.rows.map(row => this.mapRow(row));
+  }
+
+  async findById(id: string): Promise<OwnershipCost | null> {
+    const query = 'SELECT * FROM ownership_costs WHERE id = $1';
+    const result = await this.pool.query(query, [id]);
+
+    if (result.rows.length === 0) {
+      return null;
+    }
+
+    return this.mapRow(result.rows[0]);
+  }
+
+  async findByDocumentId(documentId: string): Promise<OwnershipCost[]> {
+    const query = `
+      SELECT * FROM ownership_costs
+      WHERE document_id = $1
+      ORDER BY start_date DESC
+    `;
+
+    const result = await this.pool.query(query, [documentId]);
+    return result.rows.map(row => this.mapRow(row));
+  }
+
+  async update(id: string, data: UpdateOwnershipCostRequest): Promise<OwnershipCost | null> {
+    const fields = [];
+    const values = [];
+    let paramCount = 1;
+
+    // Build dynamic update query
+    if (data.documentId !== undefined) {
+      fields.push(`document_id = $${paramCount++}`);
+      values.push(data.documentId);
+    }
+    if (data.costType !== undefined) {
+      fields.push(`cost_type = $${paramCount++}`);
+      values.push(data.costType);
+    }
+    if (data.description !== undefined) {
+      fields.push(`description = $${paramCount++}`);
+      values.push(data.description);
+    }
+    if (data.amount !== undefined) {
+      fields.push(`amount = $${paramCount++}`);
+      values.push(data.amount);
+    }
+    if (data.interval !== undefined) {
+      fields.push(`interval = $${paramCount++}`);
+      values.push(data.interval);
+    }
+    if (data.startDate !== undefined) {
+      fields.push(`start_date = $${paramCount++}`);
+      values.push(data.startDate);
+    }
+    if (data.endDate !== undefined) {
+      fields.push(`end_date = $${paramCount++}`);
+      values.push(data.endDate);
+    }
+
+    if (fields.length === 0) {
+      return this.findById(id);
+    }
+
+    values.push(id);
+    const query = `
+      UPDATE ownership_costs
+      SET ${fields.join(', ')}
+      WHERE id = $${paramCount}
+      RETURNING *
+    `;
+
+    const result = await this.pool.query(query, values);
+
+    if (result.rows.length === 0) {
+      return null;
+    }
+
+    return this.mapRow(result.rows[0]);
+  }
+
+  async delete(id: string): Promise<boolean> {
+    const query = 'DELETE FROM ownership_costs WHERE id = $1';
+    const result = await this.pool.query(query, [id]);
+    return (result.rowCount ?? 0) > 0;
+  }
+
+  async batchInsert(
+    costs: Array<CreateOwnershipCostRequest & { userId: string }>,
+    client?: Pool
+  ): Promise<OwnershipCost[]> {
+    if (costs.length === 0) {
+      return [];
+    }
+
+    const queryClient = client || this.pool;
+    const placeholders: string[] = [];
+    const values: unknown[] = [];
+    let paramCount = 1;
+
+    costs.forEach((cost) => {
+      const costParams = [
+        cost.userId,
+        cost.vehicleId,
+        cost.documentId ?? null,
+        cost.costType,
+        cost.description ?? null,
+        cost.amount,
+        cost.interval,
+        cost.startDate,
+        cost.endDate ?? null
+      ];
+
+      const placeholder = `($${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++}, $${paramCount++})`;
+      placeholders.push(placeholder);
+      values.push(...costParams);
+    });
+
+    const query = `
+      INSERT INTO ownership_costs (
+        user_id, vehicle_id, document_id, cost_type, description,
+        amount, interval, start_date, end_date
+      )
+      VALUES ${placeholders.join(', ')}
+      RETURNING *
+    `;
+
+    const result = await queryClient.query(query, values);
+    return result.rows.map((row: Record<string, unknown>) => this.mapRow(row));
+  }
+
+  private mapRow(row: Record<string, unknown>): OwnershipCost {
+    return {
+      id: row.id as string,
+      userId: row.user_id as string,
+      vehicleId: row.vehicle_id as string,
+      documentId: row.document_id as string | undefined,
+      costType: row.cost_type as OwnershipCostType,
+      description: row.description as string | undefined,
+      amount: Number(row.amount),
+      interval: row.interval as CostInterval,
+      startDate: row.start_date as Date,
+      endDate: row.end_date as Date | undefined,
+      createdAt: row.created_at as Date,
+      updatedAt: row.updated_at as Date,
+    };
+  }
+}

backend/src/features/ownership-costs/domain/ownership-costs.service.ts

@@ -0,0 +1,199 @@
+/**
+ * @ai-summary Business logic for ownership costs feature
+ * @ai-context Handles ownership cost operations and TCO aggregation
+ */
+
+import { Pool } from 'pg';
+import { OwnershipCostsRepository } from '../data/ownership-costs.repository';
+import {
+  OwnershipCost,
+  CreateOwnershipCostRequest,
+  UpdateOwnershipCostRequest,
+  OwnershipCostResponse,
+  OwnershipCostStats,
+  PAYMENTS_PER_YEAR,
+  OwnershipCostType
+} from './ownership-costs.types';
+import { logger } from '../../../core/logging/logger';
+import { VehiclesRepository } from '../../vehicles/data/vehicles.repository';
+
+export class OwnershipCostsService {
+  private repository: OwnershipCostsRepository;
+  private vehiclesRepository: VehiclesRepository;
+
+  constructor(pool: Pool) {
+    this.repository = new OwnershipCostsRepository(pool);
+    this.vehiclesRepository = new VehiclesRepository(pool);
+  }
+
+  async create(data: CreateOwnershipCostRequest, userId: string): Promise<OwnershipCostResponse> {
+    logger.info('Creating ownership cost', { userId, vehicleId: data.vehicleId, costType: data.costType });
+
+    // Verify vehicle ownership
+    const vehicle = await this.vehiclesRepository.findById(data.vehicleId);
+    if (!vehicle) {
+      throw new Error('Vehicle not found');
+    }
+    if (vehicle.userId !== userId) {
+      throw new Error('Unauthorized');
+    }
+
+    const cost = await this.repository.create({ ...data, userId });
+    return this.toResponse(cost);
+  }
+
+  async getByVehicleId(vehicleId: string, userId: string): Promise<OwnershipCostResponse[]> {
+    // Verify vehicle ownership
+    const vehicle = await this.vehiclesRepository.findById(vehicleId);
+    if (!vehicle) {
+      throw new Error('Vehicle not found');
+    }
+    if (vehicle.userId !== userId) {
+      throw new Error('Unauthorized');
+    }
+
+    const costs = await this.repository.findByVehicleId(vehicleId, userId);
+    return costs.map(cost => this.toResponse(cost));
+  }
+
+  async getById(id: string, userId: string): Promise<OwnershipCostResponse> {
+    const cost = await this.repository.findById(id);
+
+    if (!cost) {
+      throw new Error('Ownership cost not found');
+    }
+
+    if (cost.userId !== userId) {
+      throw new Error('Unauthorized');
+    }
+
+    return this.toResponse(cost);
+  }
+
+  async update(id: string, data: UpdateOwnershipCostRequest, userId: string): Promise<OwnershipCostResponse> {
+    // Verify ownership
+    const existing = await this.repository.findById(id);
+    if (!existing) {
+      throw new Error('Ownership cost not found');
+    }
+    if (existing.userId !== userId) {
+      throw new Error('Unauthorized');
+    }
+
+    const updated = await this.repository.update(id, data);
+    if (!updated) {
+      throw new Error('Update failed');
+    }
+
+    return this.toResponse(updated);
+  }
+
+  async delete(id: string, userId: string): Promise<void> {
+    // Verify ownership
+    const existing = await this.repository.findById(id);
+    if (!existing) {
+      throw new Error('Ownership cost not found');
+    }
+    if (existing.userId !== userId) {
+      throw new Error('Unauthorized');
+    }
+
+    await this.repository.delete(id);
+    logger.info('Ownership cost deleted', { id, userId });
+  }
+
+  /**
+   * Get aggregated cost statistics for a vehicle
+   * Used by TCO calculation in vehicles service
+   */
+  async getVehicleCostStats(vehicleId: string, userId: string): Promise<OwnershipCostStats> {
+    const costs = await this.repository.findByVehicleId(vehicleId, userId);
+    const now = new Date();
+
+    const stats: OwnershipCostStats = {
+      insuranceCosts: 0,
+      registrationCosts: 0,
+      taxCosts: 0,
+      otherCosts: 0,
+      totalCosts: 0
+    };
+
+    for (const cost of costs) {
+      const startDate = new Date(cost.startDate);
+      const endDate = cost.endDate ? new Date(cost.endDate) : now;
+
+      // Skip future costs
+      if (startDate > now) continue;
+
+      // Calculate effective end date (either specified end, or now for ongoing costs)
+      const effectiveEnd = endDate < now ? endDate : now;
+      const monthsCovered = this.calculateMonthsBetween(startDate, effectiveEnd);
+      const normalizedCost = this.normalizeToTotal(cost.amount, cost.interval, monthsCovered);
+
+      // Type-safe key access
+      const keyMap: Record<OwnershipCostType, keyof Omit<OwnershipCostStats, 'totalCosts'>> = {
+        insurance: 'insuranceCosts',
+        registration: 'registrationCosts',
+        tax: 'taxCosts',
+        other: 'otherCosts'
+      };
+
+      const key = keyMap[cost.costType];
+      if (key) {
+        stats[key] += normalizedCost;
+      } else {
+        logger.warn('Unknown cost type in aggregation', { costType: cost.costType, costId: cost.id });
+      }
+    }
+
+    stats.totalCosts = stats.insuranceCosts + stats.registrationCosts + stats.taxCosts + stats.otherCosts;
+    return stats;
+  }
+
+  /**
+   * Calculate months between two dates
+   */
+  private calculateMonthsBetween(startDate: Date, endDate: Date): number {
+    const yearDiff = endDate.getFullYear() - startDate.getFullYear();
+    const monthDiff = endDate.getMonth() - startDate.getMonth();
+    return Math.max(1, yearDiff * 12 + monthDiff);
+  }
+
+  /**
+   * Normalize recurring cost to total based on interval and months covered
+   */
+  private normalizeToTotal(amount: number, interval: string, monthsCovered: number): number {
+    // One-time costs are just the amount
+    if (interval === 'one_time') {
+      return amount;
+    }
+
+    const paymentsPerYear = PAYMENTS_PER_YEAR[interval as keyof typeof PAYMENTS_PER_YEAR];
+    if (!paymentsPerYear) {
+      logger.warn('Invalid cost interval', { interval });
+      return 0;
+    }
+
+    // Calculate total payments over the covered period
+    const yearsOwned = monthsCovered / 12;
+    const totalPayments = yearsOwned * paymentsPerYear;
+    return amount * totalPayments;
+  }
+
+  private toResponse(cost: OwnershipCost): OwnershipCostResponse {
+    return {
+      id: cost.id,
+      userId: cost.userId,
+      vehicleId: cost.vehicleId,
+      documentId: cost.documentId,
+      costType: cost.costType,
+      description: cost.description,
+      amount: cost.amount,
+      interval: cost.interval,
+      startDate: cost.startDate instanceof Date ? cost.startDate.toISOString().split('T')[0] : cost.startDate as unknown as string,
+      endDate: cost.endDate ? (cost.endDate instanceof Date ? cost.endDate.toISOString().split('T')[0] : cost.endDate as unknown as string) : undefined,
+      createdAt: cost.createdAt instanceof Date ? cost.createdAt.toISOString() : cost.createdAt as unknown as string,
+      updatedAt: cost.updatedAt instanceof Date ? cost.updatedAt.toISOString() : cost.updatedAt as unknown as string,
+    };
+  }
+}

backend/src/features/ownership-costs/domain/ownership-costs.types.ts

@@ -0,0 +1,108 @@
+/**
+ * @ai-summary Type definitions for ownership-costs feature
+ * @ai-context Tracks vehicle ownership costs (insurance, registration, tax, other)
+ */
+
+// Cost types supported by ownership-costs feature
+export type OwnershipCostType = 'insurance' | 'registration' | 'tax' | 'other';
+
+// Cost interval types (one_time added for things like purchase price)
+export type CostInterval = 'monthly' | 'semi_annual' | 'annual' | 'one_time';
+
+// Payments per year for each interval type
+export const PAYMENTS_PER_YEAR: Record<CostInterval, number> = {
+  monthly: 12,
+  semi_annual: 2,
+  annual: 1,
+  one_time: 0, // Special case: calculated differently
+} as const;
+
+export interface OwnershipCost {
+  id: string;
+  userId: string;
+  vehicleId: string;
+  documentId?: string;
+  costType: OwnershipCostType;
+  description?: string;
+  amount: number;
+  interval: CostInterval;
+  startDate: Date;
+  endDate?: Date;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface CreateOwnershipCostRequest {
+  vehicleId: string;
+  documentId?: string;
+  costType: OwnershipCostType;
+  description?: string;
+  amount: number;
+  interval: CostInterval;
+  startDate: string; // ISO date string
+  endDate?: string;  // ISO date string
+}
+
+export interface UpdateOwnershipCostRequest {
+  documentId?: string | null;
+  costType?: OwnershipCostType;
+  description?: string | null;
+  amount?: number;
+  interval?: CostInterval;
+  startDate?: string;
+  endDate?: string | null;
+}
+
+export interface OwnershipCostResponse {
+  id: string;
+  userId: string;
+  vehicleId: string;
+  documentId?: string;
+  costType: OwnershipCostType;
+  description?: string;
+  amount: number;
+  interval: CostInterval;
+  startDate: string;
+  endDate?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// Aggregated cost statistics for TCO calculation
+export interface OwnershipCostStats {
+  insuranceCosts: number;
+  registrationCosts: number;
+  taxCosts: number;
+  otherCosts: number;
+  totalCosts: number;
+}
+
+// Fastify-specific types for HTTP handling
+export interface CreateOwnershipCostBody {
+  vehicleId: string;
+  documentId?: string;
+  costType: OwnershipCostType;
+  description?: string;
+  amount: number;
+  interval: CostInterval;
+  startDate: string;
+  endDate?: string;
+}
+
+export interface UpdateOwnershipCostBody {
+  documentId?: string | null;
+  costType?: OwnershipCostType;
+  description?: string | null;
+  amount?: number;
+  interval?: CostInterval;
+  startDate?: string;
+  endDate?: string | null;
+}
+
+export interface OwnershipCostParams {
+  id: string;
+}
+
+export interface VehicleParams {
+  vehicleId: string;
+}

backend/src/features/ownership-costs/index.ts

@@ -0,0 +1,22 @@
+/**
+ * @ai-summary Public API for ownership-costs feature capsule
+ */
+
+// Export service for use by other features
+export { OwnershipCostsService } from './domain/ownership-costs.service';
+
+// Export types
+export type {
+  OwnershipCost,
+  CreateOwnershipCostRequest,
+  UpdateOwnershipCostRequest,
+  OwnershipCostResponse,
+  OwnershipCostStats,
+  OwnershipCostType,
+  CostInterval
+} from './domain/ownership-costs.types';
+
+export { PAYMENTS_PER_YEAR } from './domain/ownership-costs.types';
+
+// Internal: Register routes with Fastify app
+export { ownershipCostsRoutes, registerOwnershipCostsRoutes } from './api/ownership-costs.routes';

backend/src/features/ownership-costs/migrations/001_create_ownership_costs_table.sql

@@ -0,0 +1,61 @@
+-- Migration: Create ownership_costs table
+-- Issue: #15
+-- Description: Store vehicle ownership costs (insurance, registration, tax, other)
+-- with explicit date ranges and optional document association
+
+CREATE TABLE IF NOT EXISTS ownership_costs (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  user_id VARCHAR(255) NOT NULL,
+  vehicle_id UUID NOT NULL,
+  document_id UUID,
+  cost_type VARCHAR(50) NOT NULL,
+  description TEXT,
+  amount DECIMAL(12, 2) NOT NULL,
+  interval VARCHAR(20) NOT NULL,
+  start_date DATE NOT NULL,
+  end_date DATE,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+
+  -- Foreign key to vehicles (cascade delete)
+  CONSTRAINT fk_ownership_costs_vehicle
+    FOREIGN KEY (vehicle_id)
+    REFERENCES vehicles(id)
+    ON DELETE CASCADE,
+
+  -- Foreign key to documents (set null on delete)
+  CONSTRAINT fk_ownership_costs_document
+    FOREIGN KEY (document_id)
+    REFERENCES documents(id)
+    ON DELETE SET NULL,
+
+  -- Enforce valid cost types
+  CONSTRAINT chk_ownership_costs_type
+    CHECK (cost_type IN ('insurance', 'registration', 'tax', 'other')),
+
+  -- Enforce valid intervals
+  CONSTRAINT chk_ownership_costs_interval
+    CHECK (interval IN ('monthly', 'semi_annual', 'annual', 'one_time')),
+
+  -- Enforce non-negative amounts
+  CONSTRAINT chk_ownership_costs_amount_non_negative
+    CHECK (amount >= 0),
+
+  -- Enforce end_date >= start_date when end_date is provided
+  CONSTRAINT chk_ownership_costs_date_range
+    CHECK (end_date IS NULL OR end_date >= start_date)
+);
+
+-- Create indexes for common queries
+CREATE INDEX IF NOT EXISTS idx_ownership_costs_user_id ON ownership_costs(user_id);
+CREATE INDEX IF NOT EXISTS idx_ownership_costs_vehicle_id ON ownership_costs(vehicle_id);
+CREATE INDEX IF NOT EXISTS idx_ownership_costs_cost_type ON ownership_costs(cost_type);
+CREATE INDEX IF NOT EXISTS idx_ownership_costs_start_date ON ownership_costs(start_date DESC);
+CREATE INDEX IF NOT EXISTS idx_ownership_costs_document_id ON ownership_costs(document_id) WHERE document_id IS NOT NULL;
+
+-- Add updated_at trigger
+DROP TRIGGER IF EXISTS update_ownership_costs_updated_at ON ownership_costs;
+CREATE TRIGGER update_ownership_costs_updated_at
+  BEFORE UPDATE ON ownership_costs
+  FOR EACH ROW
+  EXECUTE FUNCTION update_updated_at_column();

backend/src/features/ownership-costs/migrations/002_migrate_vehicle_tco_data.sql

@@ -0,0 +1,73 @@
+-- Migration: Migrate existing vehicle TCO data to ownership_costs table
+-- Issue: #15
+-- Description: Copy insurance and registration costs from vehicles table to ownership_costs
+
+-- Insert insurance costs from vehicles that have insurance data
+INSERT INTO ownership_costs (
+  user_id,
+  vehicle_id,
+  document_id,
+  cost_type,
+  description,
+  amount,
+  interval,
+  start_date,
+  end_date
+)
+SELECT
+  v.user_id,
+  v.id AS vehicle_id,
+  NULL AS document_id,
+  'insurance' AS cost_type,
+  'Migrated from vehicle record' AS description,
+  v.insurance_cost AS amount,
+  v.insurance_interval AS interval,
+  COALESCE(v.purchase_date, v.created_at::date) AS start_date,
+  NULL AS end_date
+FROM vehicles v
+WHERE v.insurance_cost IS NOT NULL
+  AND v.insurance_cost > 0
+  AND v.insurance_interval IS NOT NULL
+  AND v.is_active = true
+  AND NOT EXISTS (
+    -- Only migrate if no insurance cost already exists for this vehicle
+    SELECT 1 FROM ownership_costs oc
+    WHERE oc.vehicle_id = v.id
+      AND oc.cost_type = 'insurance'
+      AND oc.description = 'Migrated from vehicle record'
+  );
+
+-- Insert registration costs from vehicles that have registration data
+INSERT INTO ownership_costs (
+  user_id,
+  vehicle_id,
+  document_id,
+  cost_type,
+  description,
+  amount,
+  interval,
+  start_date,
+  end_date
+)
+SELECT
+  v.user_id,
+  v.id AS vehicle_id,
+  NULL AS document_id,
+  'registration' AS cost_type,
+  'Migrated from vehicle record' AS description,
+  v.registration_cost AS amount,
+  v.registration_interval AS interval,
+  COALESCE(v.purchase_date, v.created_at::date) AS start_date,
+  NULL AS end_date
+FROM vehicles v
+WHERE v.registration_cost IS NOT NULL
+  AND v.registration_cost > 0
+  AND v.registration_interval IS NOT NULL
+  AND v.is_active = true
+  AND NOT EXISTS (
+    -- Only migrate if no registration cost already exists for this vehicle
+    SELECT 1 FROM ownership_costs oc
+    WHERE oc.vehicle_id = v.id
+      AND oc.cost_type = 'registration'
+      AND oc.description = 'Migrated from vehicle record'
+  );

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

@@ -28,6 +28,7 @@ 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 { OwnershipCostsService } from '../../ownership-costs';
 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';
@@ -430,20 +431,35 @@ export class VehiclesService {
     // 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
-    );
+    // Get recurring ownership costs from ownership-costs service
+    const ownershipCostsService = new OwnershipCostsService(this.pool);
+    let insuranceCosts = 0;
+    let registrationCosts = 0;
+    let taxCosts = 0;
+    let otherCosts = 0;
+    try {
+      const ownershipStats = await ownershipCostsService.getVehicleCostStats(id, userId);
+      insuranceCosts = ownershipStats.insuranceCosts || 0;
+      registrationCosts = ownershipStats.registrationCosts || 0;
+      taxCosts = ownershipStats.taxCosts || 0;
+      otherCosts = ownershipStats.otherCosts || 0;
+    } catch {
+      // Vehicle may have no ownership cost records
+      // Fall back to legacy vehicle fields if they exist
+      insuranceCosts = this.normalizeRecurringCost(
+        vehicle.insuranceCost,
+        vehicle.insuranceInterval,
+        vehicle.purchaseDate
+      );
+      registrationCosts = this.normalizeRecurringCost(
+        vehicle.registrationCost,
+        vehicle.registrationInterval,
+        vehicle.purchaseDate
+      );
+    }
 
-    // Calculate lifetime total
-    const lifetimeTotal = purchasePrice + insuranceCosts + registrationCosts + fuelCosts + maintenanceCosts;
+    // Calculate lifetime total (includes all ownership costs: insurance, registration, tax, other)
+    const lifetimeTotal = purchasePrice + insuranceCosts + registrationCosts + taxCosts + otherCosts + fuelCosts + maintenanceCosts;
 
     // Calculate cost per distance
     const odometerReading = vehicle.odometerReading || 0;
@@ -454,6 +470,8 @@ export class VehiclesService {
       purchasePrice,
       insuranceCosts,
       registrationCosts,
+      taxCosts,
+      otherCosts,
       fuelCosts,
       maintenanceCosts,
       lifetimeTotal,

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

@@ -201,6 +201,8 @@ export interface TCOResponse {
   purchasePrice: number;
   insuranceCosts: number;
   registrationCosts: number;
+  taxCosts: number;
+  otherCosts: number;
   fuelCosts: number;
   maintenanceCosts: number;
   lifetimeTotal: number;

frontend/src/features/ownership-costs/api/ownership-costs.api.ts

@@ -0,0 +1,60 @@
+/**
+ * @ai-summary API calls for ownership-costs feature
+ */
+
+import { apiClient } from '../../../core/api/client';
+import {
+  OwnershipCost,
+  CreateOwnershipCostRequest,
+  UpdateOwnershipCostRequest,
+  OwnershipCostStats
+} from '../types/ownership-costs.types';
+
+export const ownershipCostsApi = {
+  /**
+   * Get all ownership costs for a vehicle
+   */
+  getByVehicle: async (vehicleId: string): Promise<OwnershipCost[]> => {
+    const response = await apiClient.get(`/ownership-costs/vehicle/${vehicleId}`);
+    return response.data;
+  },
+
+  /**
+   * Get a single ownership cost by ID
+   */
+  getById: async (id: string): Promise<OwnershipCost> => {
+    const response = await apiClient.get(`/ownership-costs/${id}`);
+    return response.data;
+  },
+
+  /**
+   * Create a new ownership cost
+   */
+  create: async (data: CreateOwnershipCostRequest): Promise<OwnershipCost> => {
+    const response = await apiClient.post('/ownership-costs', data);
+    return response.data;
+  },
+
+  /**
+   * Update an existing ownership cost
+   */
+  update: async (id: string, data: UpdateOwnershipCostRequest): Promise<OwnershipCost> => {
+    const response = await apiClient.put(`/ownership-costs/${id}`, data);
+    return response.data;
+  },
+
+  /**
+   * Delete an ownership cost
+   */
+  delete: async (id: string): Promise<void> => {
+    await apiClient.delete(`/ownership-costs/${id}`);
+  },
+
+  /**
+   * Get aggregated cost stats for a vehicle
+   */
+  getVehicleStats: async (vehicleId: string): Promise<OwnershipCostStats> => {
+    const response = await apiClient.get(`/ownership-costs/vehicle/${vehicleId}/stats`);
+    return response.data;
+  },
+};

frontend/src/features/ownership-costs/components/OwnershipCostForm.tsx

@@ -0,0 +1,214 @@
+/**
+ * @ai-summary Form component for adding/editing ownership costs
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Button } from '../../../shared-minimal/components/Button';
+import {
+  OwnershipCost,
+  OwnershipCostType,
+  CostInterval,
+  COST_TYPE_LABELS,
+  INTERVAL_LABELS
+} from '../types/ownership-costs.types';
+
+interface OwnershipCostFormProps {
+  vehicleId: string;
+  initialData?: OwnershipCost;
+  onSubmit: (data: {
+    costType: OwnershipCostType;
+    description?: string;
+    amount: number;
+    interval: CostInterval;
+    startDate: string;
+    endDate?: string;
+  }) => Promise<void>;
+  onCancel: () => void;
+  loading?: boolean;
+}
+
+export const OwnershipCostForm: React.FC<OwnershipCostFormProps> = ({
+  initialData,
+  onSubmit,
+  onCancel,
+  loading,
+}) => {
+  const [costType, setCostType] = useState<OwnershipCostType>(initialData?.costType || 'insurance');
+  const [description, setDescription] = useState(initialData?.description || '');
+  const [amount, setAmount] = useState(initialData?.amount?.toString() || '');
+  const [interval, setInterval] = useState<CostInterval>(initialData?.interval || 'monthly');
+  const [startDate, setStartDate] = useState(initialData?.startDate || new Date().toISOString().split('T')[0]);
+  const [endDate, setEndDate] = useState(initialData?.endDate || '');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (initialData) {
+      setCostType(initialData.costType);
+      setDescription(initialData.description || '');
+      setAmount(initialData.amount.toString());
+      setInterval(initialData.interval);
+      setStartDate(initialData.startDate);
+      setEndDate(initialData.endDate || '');
+    }
+  }, [initialData]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate amount
+    const parsedAmount = parseFloat(amount);
+    if (isNaN(parsedAmount) || parsedAmount < 0) {
+      setError('Please enter a valid amount');
+      return;
+    }
+
+    // Validate dates
+    if (!startDate) {
+      setError('Start date is required');
+      return;
+    }
+
+    if (endDate && new Date(endDate) < new Date(startDate)) {
+      setError('End date must be after start date');
+      return;
+    }
+
+    try {
+      await onSubmit({
+        costType,
+        description: description.trim() || undefined,
+        amount: parsedAmount,
+        interval,
+        startDate,
+        endDate: endDate || undefined,
+      });
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to save cost';
+      setError(message);
+    }
+  };
+
+  const isEditMode = !!initialData;
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {error && (
+        <div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-md text-sm">
+          {error}
+        </div>
+      )}
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
+          Cost Type
+        </label>
+        <select
+          value={costType}
+          onChange={(e) => setCostType(e.target.value as OwnershipCostType)}
+          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"
+          style={{ fontSize: '16px' }}
+        >
+          {(Object.entries(COST_TYPE_LABELS) as [OwnershipCostType, string][]).map(([value, label]) => (
+            <option key={value} value={value}>
+              {label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
+          Description (optional)
+        </label>
+        <input
+          type="text"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="e.g., Geico Full Coverage"
+          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"
+          style={{ fontSize: '16px' }}
+        />
+      </div>
+
+      <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">
+            Amount
+          </label>
+          <input
+            type="number"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            placeholder="0.00"
+            inputMode="decimal"
+            step="0.01"
+            min="0"
+            required
+            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"
+            style={{ fontSize: '16px' }}
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
+            Payment Interval
+          </label>
+          <select
+            value={interval}
+            onChange={(e) => setInterval(e.target.value as CostInterval)}
+            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"
+            style={{ fontSize: '16px' }}
+          >
+            {(Object.entries(INTERVAL_LABELS) as [CostInterval, string][]).map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <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">
+            Start Date
+          </label>
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            required
+            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"
+            style={{ fontSize: '16px' }}
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
+            End Date (optional)
+          </label>
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            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"
+            style={{ fontSize: '16px' }}
+          />
+          <p className="text-xs text-gray-500 dark:text-titanio mt-1">
+            Leave blank for ongoing costs
+          </p>
+        </div>
+      </div>
+
+      <div className="flex gap-3 justify-end pt-4">
+        <Button variant="secondary" onClick={onCancel} type="button">
+          Cancel
+        </Button>
+        <Button type="submit" loading={loading}>
+          {isEditMode ? 'Update Cost' : 'Add Cost'}
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/features/ownership-costs/components/OwnershipCostsList.tsx

@@ -0,0 +1,201 @@
+/**
+ * @ai-summary List component for displaying ownership costs
+ */
+
+import React, { useState } from 'react';
+import {
+  OwnershipCost,
+  CreateOwnershipCostRequest,
+  COST_TYPE_LABELS,
+  INTERVAL_LABELS
+} from '../types/ownership-costs.types';
+import { OwnershipCostForm } from './OwnershipCostForm';
+import { useOwnershipCosts } from '../hooks/useOwnershipCosts';
+import { Button } from '../../../shared-minimal/components/Button';
+
+interface OwnershipCostsListProps {
+  vehicleId: string;
+}
+
+export const OwnershipCostsList: React.FC<OwnershipCostsListProps> = ({
+  vehicleId,
+}) => {
+  const { costs, isLoading, error, createCost, updateCost, deleteCost } = useOwnershipCosts(vehicleId);
+  const [showForm, setShowForm] = useState(false);
+  const [editingCost, setEditingCost] = useState<OwnershipCost | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+
+  const handleSubmit = async (data: Omit<CreateOwnershipCostRequest, 'vehicleId'>) => {
+    setIsSubmitting(true);
+    try {
+      if (editingCost) {
+        await updateCost(editingCost.id, data);
+      } else {
+        await createCost({ ...data, vehicleId });
+      }
+      setShowForm(false);
+      setEditingCost(null);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleEdit = (cost: OwnershipCost) => {
+    setEditingCost(cost);
+    setShowForm(true);
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteCost(id);
+      setDeleteConfirm(null);
+    } catch (err) {
+      console.error('Failed to delete cost:', err);
+    }
+  };
+
+  const handleCancel = () => {
+    setShowForm(false);
+    setEditingCost(null);
+  };
+
+  // Format currency
+  const formatCurrency = (value: number): string => {
+    return value.toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  };
+
+  // Format date
+  const formatDate = (dateString: string): string => {
+    return new Date(dateString).toLocaleDateString();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="animate-pulse space-y-4">
+        {[1, 2].map((i) => (
+          <div key={i} className="h-24 bg-gray-200 dark:bg-silverstone rounded-lg" />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-red-500 dark:text-red-400 text-sm p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h3 className="text-lg font-medium text-gray-900 dark:text-avus">
+          Recurring Costs
+        </h3>
+        {!showForm && (
+          <Button
+            variant="secondary"
+            onClick={() => setShowForm(true)}
+            className="text-sm"
+          >
+            Add Cost
+          </Button>
+        )}
+      </div>
+
+      {showForm && (
+        <div className="p-4 bg-gray-50 dark:bg-scuro rounded-lg border border-gray-200 dark:border-silverstone">
+          <h4 className="text-md font-medium text-gray-900 dark:text-avus mb-4">
+            {editingCost ? 'Edit Cost' : 'Add New Cost'}
+          </h4>
+          <OwnershipCostForm
+            vehicleId={vehicleId}
+            initialData={editingCost || undefined}
+            onSubmit={handleSubmit}
+            onCancel={handleCancel}
+            loading={isSubmitting}
+          />
+        </div>
+      )}
+
+      {costs.length === 0 && !showForm ? (
+        <div className="text-center py-8 text-gray-500 dark:text-titanio">
+          <p>No recurring costs added yet.</p>
+          <p className="text-sm mt-1">Track insurance, registration, and other recurring vehicle costs.</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {costs.map((cost) => (
+            <div
+              key={cost.id}
+              className="p-4 bg-white dark:bg-jet rounded-lg border border-gray-200 dark:border-silverstone"
+            >
+              <div className="flex justify-between items-start">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium text-gray-900 dark:text-avus">
+                      {COST_TYPE_LABELS[cost.costType]}
+                    </span>
+                    <span className="text-xs px-2 py-0.5 bg-gray-100 dark:bg-silverstone text-gray-600 dark:text-titanio rounded">
+                      {INTERVAL_LABELS[cost.interval]}
+                    </span>
+                  </div>
+                  {cost.description && (
+                    <p className="text-sm text-gray-500 dark:text-titanio mt-1">
+                      {cost.description}
+                    </p>
+                  )}
+                  <p className="text-xs text-gray-400 dark:text-canna mt-2">
+                    {formatDate(cost.startDate)}
+                    {cost.endDate ? ` - ${formatDate(cost.endDate)}` : ' - Ongoing'}
+                  </p>
+                </div>
+                <div className="text-right">
+                  <div className="text-lg font-semibold text-gray-900 dark:text-avus">
+                    ${formatCurrency(cost.amount)}
+                  </div>
+                  <div className="flex gap-2 mt-2">
+                    <button
+                      onClick={() => handleEdit(cost)}
+                      className="text-sm text-primary-600 dark:text-abudhabi hover:underline"
+                    >
+                      Edit
+                    </button>
+                    {deleteConfirm === cost.id ? (
+                      <div className="flex gap-1">
+                        <button
+                          onClick={() => handleDelete(cost.id)}
+                          className="text-sm text-red-600 hover:underline"
+                        >
+                          Confirm
+                        </button>
+                        <button
+                          onClick={() => setDeleteConfirm(null)}
+                          className="text-sm text-gray-500 hover:underline"
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => setDeleteConfirm(cost.id)}
+                        className="text-sm text-red-600 hover:underline"
+                      >
+                        Delete
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/features/ownership-costs/hooks/useOwnershipCosts.ts

@@ -0,0 +1,75 @@
+/**
+ * @ai-summary React hook for ownership costs management
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { ownershipCostsApi } from '../api/ownership-costs.api';
+import {
+  OwnershipCost,
+  CreateOwnershipCostRequest,
+  UpdateOwnershipCostRequest
+} from '../types/ownership-costs.types';
+
+interface UseOwnershipCostsResult {
+  costs: OwnershipCost[];
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+  createCost: (data: CreateOwnershipCostRequest) => Promise<OwnershipCost>;
+  updateCost: (id: string, data: UpdateOwnershipCostRequest) => Promise<OwnershipCost>;
+  deleteCost: (id: string) => Promise<void>;
+}
+
+export function useOwnershipCosts(vehicleId: string): UseOwnershipCostsResult {
+  const [costs, setCosts] = useState<OwnershipCost[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchCosts = useCallback(async () => {
+    if (!vehicleId) return;
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await ownershipCostsApi.getByVehicle(vehicleId);
+      setCosts(data);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to load ownership costs';
+      setError(message);
+      console.error('Failed to fetch ownership costs:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [vehicleId]);
+
+  useEffect(() => {
+    fetchCosts();
+  }, [fetchCosts]);
+
+  const createCost = useCallback(async (data: CreateOwnershipCostRequest): Promise<OwnershipCost> => {
+    const newCost = await ownershipCostsApi.create(data);
+    setCosts(prev => [newCost, ...prev]);
+    return newCost;
+  }, []);
+
+  const updateCost = useCallback(async (id: string, data: UpdateOwnershipCostRequest): Promise<OwnershipCost> => {
+    const updated = await ownershipCostsApi.update(id, data);
+    setCosts(prev => prev.map(cost => cost.id === id ? updated : cost));
+    return updated;
+  }, []);
+
+  const deleteCost = useCallback(async (id: string): Promise<void> => {
+    await ownershipCostsApi.delete(id);
+    setCosts(prev => prev.filter(cost => cost.id !== id));
+  }, []);
+
+  return {
+    costs,
+    isLoading,
+    error,
+    refresh: fetchCosts,
+    createCost,
+    updateCost,
+    deleteCost,
+  };
+}

frontend/src/features/ownership-costs/index.ts

@@ -0,0 +1,25 @@
+/**
+ * @ai-summary Public API for ownership-costs frontend feature
+ */
+
+// Export components
+export { OwnershipCostForm } from './components/OwnershipCostForm';
+export { OwnershipCostsList } from './components/OwnershipCostsList';
+
+// Export hooks
+export { useOwnershipCosts } from './hooks/useOwnershipCosts';
+
+// Export API
+export { ownershipCostsApi } from './api/ownership-costs.api';
+
+// Export types
+export type {
+  OwnershipCost,
+  CreateOwnershipCostRequest,
+  UpdateOwnershipCostRequest,
+  OwnershipCostStats,
+  OwnershipCostType,
+  CostInterval
+} from './types/ownership-costs.types';
+
+export { COST_TYPE_LABELS, INTERVAL_LABELS } from './types/ownership-costs.types';

frontend/src/features/ownership-costs/types/ownership-costs.types.ts

@@ -0,0 +1,70 @@
+/**
+ * @ai-summary Type definitions for ownership-costs feature
+ */
+
+// Cost types supported by ownership-costs feature
+export type OwnershipCostType = 'insurance' | 'registration' | 'tax' | 'other';
+
+// Cost interval types
+export type CostInterval = 'monthly' | 'semi_annual' | 'annual' | 'one_time';
+
+export interface OwnershipCost {
+  id: string;
+  userId: string;
+  vehicleId: string;
+  documentId?: string;
+  costType: OwnershipCostType;
+  description?: string;
+  amount: number;
+  interval: CostInterval;
+  startDate: string;
+  endDate?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateOwnershipCostRequest {
+  vehicleId: string;
+  documentId?: string;
+  costType: OwnershipCostType;
+  description?: string;
+  amount: number;
+  interval: CostInterval;
+  startDate: string;
+  endDate?: string;
+}
+
+export interface UpdateOwnershipCostRequest {
+  documentId?: string | null;
+  costType?: OwnershipCostType;
+  description?: string | null;
+  amount?: number;
+  interval?: CostInterval;
+  startDate?: string;
+  endDate?: string | null;
+}
+
+// Aggregated cost statistics
+export interface OwnershipCostStats {
+  insuranceCosts: number;
+  registrationCosts: number;
+  taxCosts: number;
+  otherCosts: number;
+  totalCosts: number;
+}
+
+// Display labels for cost types
+export const COST_TYPE_LABELS: Record<OwnershipCostType, string> = {
+  insurance: 'Insurance',
+  registration: 'Registration',
+  tax: 'Tax',
+  other: 'Other',
+};
+
+// Display labels for intervals
+export const INTERVAL_LABELS: Record<CostInterval, string> = {
+  monthly: 'Monthly',
+  semi_annual: 'Semi-Annual (6 months)',
+  annual: 'Annual',
+  one_time: 'One-Time',
+};

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

@@ -121,6 +121,12 @@ export const TCODisplay: React.FC<TCODisplayProps> = ({ vehicleId, tcoEnabled })
           {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>
           )}

frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx

@@ -11,6 +11,7 @@ import { FuelLogResponse, UpdateFuelLogRequest } from '../../fuel-logs/types/fue
 import { FuelLogEditDialog } from '../../fuel-logs/components/FuelLogEditDialog';
 import { fuelLogsApi } from '../../fuel-logs/api/fuel-logs.api';
 import { VehicleImage } from '../components/VehicleImage';
+import { OwnershipCostsList } from '../../ownership-costs';
 
 interface VehicleDetailMobileProps {
   vehicle: Vehicle;
@@ -224,7 +225,15 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
           </CardContent>
         </Card>
       </Section>
-      
+
+      <Section title="Recurring Costs">
+        <Card>
+          <CardContent>
+            <OwnershipCostsList vehicleId={vehicle.id} />
+          </CardContent>
+        </Card>
+      </Section>
+
       <Section title="Vehicle Records">
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
           <Typography variant="body2" color="text.secondary">

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

@@ -22,6 +22,7 @@ import { FuelLogEditDialog } from '../../fuel-logs/components/FuelLogEditDialog'
 import { FuelLogForm } from '../../fuel-logs/components/FuelLogForm';
 // Unit conversions now handled by backend
 import { fuelLogsApi } from '../../fuel-logs/api/fuel-logs.api';
+import { OwnershipCostsList } from '../../ownership-costs';
 
 const DetailField: React.FC<{
   label: string;
@@ -356,14 +357,19 @@ export const VehicleDetailPage: React.FC = () => {
             <DetailField label="License Plate" value={vehicle.licensePlate} />
           </div>
 
-          <DetailField 
-            label="Current Odometer Reading" 
-            value={vehicle.odometerReading ? `${vehicle.odometerReading.toLocaleString()} mi` : undefined} 
+          <DetailField
+            label="Current Odometer Reading"
+            value={vehicle.odometerReading ? `${vehicle.odometerReading.toLocaleString()} mi` : undefined}
           />
         </form>
 
         <Divider sx={{ my: 4 }} />
 
+        {/* Recurring Ownership Costs */}
+        <OwnershipCostsList vehicleId={vehicle.id} />
+
+        <Divider sx={{ my: 4 }} />
+
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
           <Typography variant="h6" sx={{ fontWeight: 600 }}>
             Vehicle Records

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

@@ -89,6 +89,8 @@ export interface TCOResponse {
   purchasePrice: number;
   insuranceCosts: number;
   registrationCosts: number;
+  taxCosts: number;
+  otherCosts: number;
   fuelCosts: number;
   maintenanceCosts: number;
   lifetimeTotal: number;