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

client/package.json

@@ -18,6 +18,7 @@
     "react-apollo": "^3.1.3",
     "react-dom": "^16.12.0",
     "react-i18next": "^11.2.7",
+    "react-moment": "^0.9.7",
     "react-number-format": "^4.3.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",

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>
   );

client/src/graphql/jobs.queries.js

@@ -87,8 +87,7 @@ export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql`
       id
       jobs {
         id
-        actual_completion
-        actual_delivery
+        scheduled_completion
         actual_in
         est_number
         ro_number
@@ -96,6 +95,7 @@ export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql`
           v_model_yr
           v_model_desc
           v_make_desc
+          v_vin
         }
         owner {
           first_name

client/src/translations/en_us/common.json

@@ -6,6 +6,10 @@
         "french": "French",
         "spanish": "Spanish"
       },
+      "labels": {
+        "in": "In",
+        "out": "Out"
+      },
       "title": "Welcome to {{framework}}",
       "greetings": "Hello2!",
       "intro": "To get started, edit <1><0></0></1> and save to reload."
@@ -16,7 +20,8 @@
       "postInvoices": "Post Invoices",
       "notes": "Job Notes",
       "partStatus": "Part Status",
-      "receiveParts": "Receive Parts"
+      "receiveParts": "Receive Parts",
+      "card": {}
     }
   }
 }

client/yarn.lock

@@ -10316,6 +10316,11 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.2, react-lifecycles
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-moment@^0.9.7:
+  version "0.9.7"
+  resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.9.7.tgz#ca570466595b1aa4f7619e62da18b3bb2de8b6f3"
+  integrity sha512-ifzUrUGF6KRsUN2pRG5k56kO0mJBr8kRkWb0wNvtFIsBIxOuPxhUpL1YlXwpbQCbHq23hUu6A0VEk64HsFxk9g==
+
 react-number-format@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.3.1.tgz#eccfc851d88d74c894ba463620ccb467defbdefb"