From cb93e3ccc58f06808c0048c079bb5af8ce6d2dea Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Tue, 13 Jan 2026 07:57:23 -0600
Subject: [PATCH] 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
---
 .../features/vehicles/mobile/VehicleDetailMobile.tsx | 11 ++++++++++-
 .../features/vehicles/pages/VehicleDetailPage.tsx    | 12 +++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx b/frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx
index 9847f20..2f15bef 100644
--- a/frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx
+++ b/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">
diff --git a/frontend/src/features/vehicles/pages/VehicleDetailPage.tsx b/frontend/src/features/vehicles/pages/VehicleDetailPage.tsx
index 65027a1..e5a5894 100644
--- a/frontend/src/features/vehicles/pages/VehicleDetailPage.tsx
+++ b/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