Photos for vehicles

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

@@ -8,6 +8,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Vehicle } from '../types/vehicles.types';
 import { useUnits } from '../../../core/units/UnitsContext';
+import { VehicleImage } from './VehicleImage';
 
 interface VehicleCardProps {
   vehicle: Vehicle;
@@ -16,20 +17,6 @@ interface VehicleCardProps {
   onSelect: (id: string) => void;
 }
 
-const CarThumb: React.FC<{ color?: string }> = ({ color = "#F2EAEA" }) => (
-  <Box 
-    sx={{ 
-      height: 96, 
-      bgcolor: color, 
-      borderRadius: 2, 
-      mb: 2,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}
-  />
-);
-
 export const VehicleCard: React.FC<VehicleCardProps> = ({
   vehicle,
   onEdit,
@@ -57,7 +44,7 @@ export const VehicleCard: React.FC<VehicleCardProps> = ({
         sx={{ flexGrow: 1 }}
       >
         <CardContent>
-          <CarThumb color={vehicle.color || "#F2EAEA"} />
+          <VehicleImage vehicle={vehicle} height={96} />
           
           <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
             {displayName}