MVP Build

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

@@ -0,0 +1,64 @@
+/**
+ * @ai-summary Vehicle card component
+ */
+
+import React from 'react';
+import { Vehicle } from '../types/vehicles.types';
+import { Card } from '../../../shared-minimal/components/Card';
+import { Button } from '../../../shared-minimal/components/Button';
+
+interface VehicleCardProps {
+  vehicle: Vehicle;
+  onEdit: (vehicle: Vehicle) => void;
+  onDelete: (id: string) => void;
+  onSelect: (id: string) => void;
+}
+
+export const VehicleCard: React.FC<VehicleCardProps> = ({
+  vehicle,
+  onEdit,
+  onDelete,
+  onSelect,
+}) => {
+  return (
+    <Card className="hover:shadow-md transition-shadow cursor-pointer" onClick={() => onSelect(vehicle.id)}>
+      <div className="flex justify-between items-start">
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold text-gray-900">
+            {vehicle.nickname || `${vehicle.year} ${vehicle.make} ${vehicle.model}`}
+          </h3>
+          <p className="text-sm text-gray-500 mt-1">VIN: {vehicle.vin}</p>
+          {vehicle.licensePlate && (
+            <p className="text-sm text-gray-500">License: {vehicle.licensePlate}</p>
+          )}
+          <p className="text-sm text-gray-600 mt-2">
+            Odometer: {vehicle.odometerReading.toLocaleString()} miles
+          </p>
+        </div>
+        
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit(vehicle);
+            }}
+          >
+            Edit
+          </Button>
+          <Button
+            size="sm"
+            variant="danger"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(vehicle.id);
+            }}
+          >
+            Delete
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+};