From 5e40754c68ca4828fee65a1500b4e4da06166230 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Mon, 12 Jan 2026 20:04:21 -0600
Subject: [PATCH] feat: add ownership cost fields to vehicle form (refs #15)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add CostInterval type and TCOResponse interface
- Add TCO fields to Vehicle, CreateVehicleRequest, UpdateVehicleRequest
- Add "Ownership Costs" section to VehicleForm with:
  - Purchase price and date
  - Insurance cost and interval
  - Registration cost and interval
  - TCO display toggle
- Add getTCO API method
- Mobile-responsive grid layout with 44px touch targets

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/features/vehicles/api/vehicles.api.ts |  10 +-
 .../vehicles/components/VehicleForm.tsx       | 142 +++++++++++++++++-
 .../features/vehicles/types/vehicles.types.ts |  41 +++++
 3 files changed, 191 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/vehicles/api/vehicles.api.ts b/frontend/src/features/vehicles/api/vehicles.api.ts
index ed409c7..d24d6b0 100644
--- a/frontend/src/features/vehicles/api/vehicles.api.ts
+++ b/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;
   }
 };
diff --git a/frontend/src/features/vehicles/components/VehicleForm.tsx b/frontend/src/features/vehicles/components/VehicleForm.tsx
index 559d351..094becf 100644
--- a/frontend/src/features/vehicles/components/VehicleForm.tsx
+++ b/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
diff --git a/frontend/src/features/vehicles/types/vehicles.types.ts b/frontend/src/features/vehicles/types/vehicles.types.ts
index 13bab8e..ca66436 100644
--- a/frontend/src/features/vehicles/types/vehicles.types.ts
+++ b/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;
 }
 
 /**