MVP with new UX

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

@@ -0,0 +1,138 @@
+/**
+ * @ai-summary Mobile vehicle detail screen with Material Design 3
+ */
+
+import React from 'react';
+import { Box, Typography, Button, Card, CardContent, Divider } from '@mui/material';
+import { Vehicle } from '../types/vehicles.types';
+
+// Theme colors now defined in Tailwind config
+
+interface VehicleDetailMobileProps {
+  vehicle: Vehicle;
+  onBack: () => void;
+  onLogFuel?: () => void;
+}
+
+const Section: React.FC<{ title: string; children: React.ReactNode }> = ({
+  title,
+  children
+}) => (
+  <Box sx={{ mb: 3 }}>
+    <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 1 }}>
+      {title}
+    </Typography>
+    {children}
+  </Box>
+);
+
+const CarThumb: React.FC<{ color?: string }> = ({ color = "#F2EAEA" }) => (
+  <Box 
+    sx={{ 
+      height: 96, 
+      bgcolor: color, 
+      borderRadius: 3,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}
+  />
+);
+
+export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
+  vehicle,
+  onBack,
+  onLogFuel
+}) => {
+  const displayName = vehicle.nickname || 
+    (vehicle.year && vehicle.make ? `${vehicle.year} ${vehicle.make}` : 'Vehicle');
+  const displayModel = vehicle.model || 'Unknown Model';
+
+  return (
+    <Box sx={{ pb: 10 }}>
+      <Button variant="text" onClick={onBack}>
+        ← Back
+      </Button>
+      <Typography variant="h4" sx={{ mt: 1, mb: 2 }}>
+        {displayName}
+      </Typography>
+      <Divider sx={{ my: 2 }} />
+      
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 3 }}>
+        <Box sx={{ width: 112 }}>
+          <CarThumb color={vehicle.color || "#F2EAEA"} />
+        </Box>
+        <Box>
+          <Typography variant="h5" sx={{ fontWeight: 600 }}>
+            {displayName}
+          </Typography>
+          <Typography color="text.secondary">{displayModel}</Typography>
+          {vehicle.licensePlate && (
+            <Typography variant="body2" color="text.secondary">
+              {vehicle.licensePlate}
+            </Typography>
+          )}
+        </Box>
+      </Box>
+      
+      <Box sx={{ display: 'flex', gap: 1.5, mb: 3 }}>
+        <Button 
+          variant="contained"
+          onClick={onLogFuel}
+        >
+          Add Fuel
+        </Button>
+        <Button variant="outlined">
+          Maintenance
+        </Button>
+      </Box>
+      
+      <Section title="Vehicle Details">
+        <Card>
+          <CardContent>
+            {vehicle.vin && (
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                <Typography color="text.secondary">VIN</Typography>
+                <Typography sx={{ fontFamily: 'monospace', fontSize: 'small' }}>
+                  {vehicle.vin}
+                </Typography>
+              </Box>
+            )}
+            {vehicle.year && (
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                <Typography color="text.secondary">Year</Typography>
+                <Typography>{vehicle.year}</Typography>
+              </Box>
+            )}
+            {vehicle.make && (
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                <Typography color="text.secondary">Make</Typography>
+                <Typography>{vehicle.make}</Typography>
+              </Box>
+            )}
+            {vehicle.model && (
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                <Typography color="text.secondary">Model</Typography>
+                <Typography>{vehicle.model}</Typography>
+              </Box>
+            )}
+            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Typography color="text.secondary">Odometer</Typography>
+              <Typography>{vehicle.odometerReading.toLocaleString()} mi</Typography>
+            </Box>
+          </CardContent>
+        </Card>
+      </Section>
+      
+      <Section title="Recent Activity">
+        <Card>
+          <CardContent sx={{ textAlign: 'center', py: 8 }}>
+            <Typography color="text.secondary" variant="body2">
+              No recent activity
+            </Typography>
+          </CardContent>
+        </Card>
+      </Section>
+    </Box>
+  );
+};