UX Improvements

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

@@ -4,7 +4,7 @@
 
 import React, { useMemo, useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Box, Typography, Button as MuiButton, Divider, FormControl, InputLabel, Select, MenuItem, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
+import { Box, Typography, Button as MuiButton, Divider, FormControl, InputLabel, Select, MenuItem, Table, TableHead, TableRow, TableCell, TableBody, Dialog, DialogTitle, DialogContent, useMediaQuery } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import EditIcon from '@mui/icons-material/Edit';
@@ -17,6 +17,8 @@ import { VehicleForm } from '../components/VehicleForm';
 import { useFuelLogs } from '../../fuel-logs/hooks/useFuelLogs';
 import { FuelLogResponse, UpdateFuelLogRequest } from '../../fuel-logs/types/fuel-logs.types';
 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';
 
 const DetailField: React.FC<{ 
@@ -49,6 +51,9 @@ export const VehicleDetailPage: React.FC = () => {
   const { fuelLogs, isLoading: isFuelLoading } = useFuelLogs(id);
   const queryClient = useQueryClient();
   const [editingLog, setEditingLog] = useState<FuelLogResponse | null>(null);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const isSmallScreen = useMediaQuery('(max-width:600px)');
+  // Unit conversions now handled by backend
 
   // Define records list hooks BEFORE any early returns to keep hooks order stable
   type VehicleRecord = {
@@ -62,11 +67,35 @@ export const VehicleDetailPage: React.FC = () => {
   const records: VehicleRecord[] = useMemo(() => {
     const list: VehicleRecord[] = [];
     if (fuelLogs && Array.isArray(fuelLogs)) {
+      // Build a map of prior odometer readings to compute trip distance when missing
+      const logsAsc = [...(fuelLogs as FuelLogResponse[])].sort(
+        (a, b) => new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime()
+      );
+      const prevOdoById = new Map<string, number | undefined>();
+      let lastOdo: number | undefined = undefined;
+      for (const l of logsAsc) {
+        prevOdoById.set(l.id, lastOdo);
+        if (typeof l.odometerReading === 'number' && !isNaN(l.odometerReading)) {
+          lastOdo = l.odometerReading;
+        }
+      }
+
       for (const log of fuelLogs as FuelLogResponse[]) {
         const parts: string[] = [];
-        if (log.fuelUnits) parts.push(`${Number(log.fuelUnits).toFixed(3)} units`);
-        if (log.fuelType) parts.push(`${log.fuelType}${log.fuelGrade ? ' ' + log.fuelGrade : ''}`);
-        if (log.efficiencyLabel) parts.push(log.efficiencyLabel);
+
+        // Efficiency: Use backend calculation (primary display)
+        if (typeof log.efficiency === 'number' && log.efficiency > 0) {
+          parts.push(`${log.efficiencyLabel || 'MPG'}: ${log.efficiency.toFixed(3)}`);
+        }
+
+        // Grade label (secondary display)
+        if (log.fuelGrade) {
+          parts.push(`Grade: ${log.fuelGrade}`);
+        } else if (log.fuelType) {
+          const ft = String(log.fuelType);
+          parts.push(ft.charAt(0).toUpperCase() + ft.slice(1));
+        }
+
         const summary = parts.join(' • ');
         const amount = (typeof log.totalCost === 'number') ? `$${log.totalCost.toFixed(2)}` : undefined;
         list.push({ id: log.id, type: 'Fuel Logs', date: log.dateTime, summary, amount });
@@ -240,10 +269,11 @@ export const VehicleDetailPage: React.FC = () => {
       </Box>
 
       <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
-        <MuiButton 
-          variant="contained" 
+        <MuiButton
+          variant="contained"
           startIcon={<LocalGasStationIcon />}
           sx={{ borderRadius: '999px' }}
+          onClick={() => setShowAddDialog(true)}
         >
           Add Fuel Log
         </MuiButton>
@@ -343,7 +373,7 @@ export const VehicleDetailPage: React.FC = () => {
               )}
               {!isFuelLoading && filteredRecords.map((rec) => (
                 <TableRow key={rec.id} hover sx={{ cursor: 'pointer' }} onClick={() => handleRowClick(rec.id, rec.type)}>
-                  <TableCell>{new Date(rec.date).toLocaleString()}</TableCell>
+                  <TableCell>{new Date(rec.date).toLocaleDateString()}</TableCell>
                   <TableCell>{rec.type}</TableCell>
                   <TableCell>{rec.summary}</TableCell>
                   <TableCell align="right">{rec.amount || '—'}</TableCell>
@@ -360,6 +390,33 @@ export const VehicleDetailPage: React.FC = () => {
           onClose={handleCloseEdit}
           onSave={handleSaveEdit}
         />
+
+        {/* Add Fuel Log Dialog */}
+        <Dialog
+          open={showAddDialog}
+          onClose={() => setShowAddDialog(false)}
+          maxWidth="md"
+          fullWidth
+          fullScreen={isSmallScreen}
+          PaperProps={{
+            sx: { maxHeight: '90vh' }
+          }}
+        >
+          <DialogTitle>Add Fuel Log</DialogTitle>
+          <DialogContent>
+            <Box sx={{ mt: 1 }}>
+              <FuelLogForm
+                initial={{ vehicleId: vehicle?.id }}
+                onSuccess={() => {
+                  setShowAddDialog(false);
+                  // Refresh fuel logs data
+                  queryClient.invalidateQueries({ queryKey: ['fuelLogs', vehicle?.id] });
+                  queryClient.invalidateQueries({ queryKey: ['fuelLogs'] });
+                }}
+              />
+            </Box>
+          </DialogContent>
+        </Dialog>
       </Card>
     </Box>
   );