Solution (#373): The vehicleCardHeader component is not visible on UI

path/to/services/web/src/components/dashboard/dashboard.tsx

@@ -0,0 +1,26 @@
+# complete code
+import React from 'react';
+import { Card } from 'antd';
+import vehicleCardHeader from './vehicleCardHeader';
+import vehicleCardContent from './vehicleCardContent';
+
+interface Props {
+  vehicle: any;
+  handleVehicleServiceClick: () => void;
+  handleContactMechanic: () => void;
+}
+
+const Dashboard: React.FC<Props> = ({
+  vehicle,
+  handleVehicleServiceClick,
+  handleContactMechanic,
+}) => {
+  return (
+    <Card>
+      {vehicleCardHeader(vehicle, handleVehicleServiceClick, handleContactMechanic)}
+      {vehicleCardContent(vehicle)}
+    </Card>
+  );
+};
+
+export default Dashboard;

path/to/services/web/src/components/dashboard/vehicleCardContent.tsx

@@ -0,0 +1,17 @@
+# complete code
+import React from 'react';
+
+interface Props {
+  vehicle: any;
+}
+
+const VehicleCardContent: React.FC<Props> = ({ vehicle }) => {
+  return (
+    <div>
+      <h3>{vehicle.make} {vehicle.model}</h3>
+      <p>{vehicle.year}</p>
+    </div>
+  );
+};
+
+export default VehicleCardContent;

path/to/services/web/src/components/dashboard/vehicleCardHeader.tsx

@@ -0,0 +1,24 @@
+# complete code
+import React from 'react';
+
+interface Props {
+  vehicle: any;
+  handleVehicleServiceClick: () => void;
+  handleContactMechanic: () => void;
+}
+
+const VehicleCardHeader: React.FC<Props> = ({
+  vehicle,
+  handleVehicleServiceClick,
+  handleContactMechanic,
+}) => {
+  return (
+    <div>
+      <h2>{vehicle.vin}</h2>
+      <button onClick={handleVehicleServiceClick}>Vehicle Service History</button>
+      <button onClick={handleContactMechanic}>Contact Mechanic</button>
+    </div>
+  );
+};
+
+export default VehicleCardHeader;