Added some data to the card + react.moment for date handling.

client/src/components/white-board-card/white-board-card.component.jsx

@@ -1,7 +1,15 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { Menu, Dropdown, Card, Icon, Avatar } from "antd";
+import { Menu, Dropdown, Card, Icon, Avatar, Row, Col } from "antd";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Moment from "react-moment";
+
+//The following styled div is required because of a smooth-dnd style used by react-trello to prevent wrapping of columns.
+const WrappedSpan = styled.span`
+  white-space: normal;
+`;
+
 export default function WhiteBoardCard({ metadata }) {
   // const {
   //   onClick,
@@ -60,6 +68,7 @@ export default function WhiteBoardCard({ metadata }) {
           (metadata.owner?.last_name ?? "")
         }
         style={{ width: 300, marginTop: 10 }}
+        bodyStyle={{ padding: 10 }}
         actions={[
           <Link to={`/manage/jobs/${metadata.id}`}>
             <Icon type='eye' key='view' />
@@ -69,8 +78,39 @@ export default function WhiteBoardCard({ metadata }) {
             <Icon type='ellipsis' />
           </Dropdown>
         ]}>
-        <Avatar alt='Job' />
-        This is the card data.
+        <Row>
+          <Col span={6}>
+            <Avatar
+              size='large'
+              alt='Vehicle Image'
+              src='https://picolio.auto123.com/auto123-media/articles/2017/9/64008/101530569fr.jpg?scaledown=450'
+            />
+          </Col>
+          <Col span={18}>
+            <Row>
+              <WrappedSpan>
+                {`${metadata.vehicle?.v_model_yr ?? "N/A"} ${metadata.vehicle
+                  ?.v_make_desc ?? "N/A"} ${metadata.vehicle?.v_model_desc ??
+                  "N/A"}`}
+              </WrappedSpan>
+            </Row>
+            {metadata.vehicle?.v_vin ? (
+              <Row>
+                <WrappedSpan>{`VIN: ${metadata.vehicle?.v_vin}`}</WrappedSpan>
+              </Row>
+            ) : null}
+          </Col>
+        </Row>
+        <Row>
+          <Col span={12}>
+            {t("general.labels.in")}
+            <Moment format='MM/DD/YYYY'>{metadata.actual_in}</Moment>
+          </Col>
+          <Col span={12}>
+            {t("general.labels.out")}
+            <Moment format='MM/DD/YYYY'>{metadata.scheduled_completion}</Moment>
+          </Col>
+        </Row>
       </Card>
     </div>
   );