Added react icons. Additional work on Job tombstone page.

client/src/components/job-tombstone/job-tombstone.component.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import AlertComponent from "../alert/alert.component";
 import {
   Form,
@@ -9,12 +10,15 @@ import {
   Typography,
   PageHeader,
   Descriptions,
-  Tag
+  Tag,
+  notification,
+  Avatar
 } from "antd";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { useMutation } from "@apollo/react-hooks";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
 import { useTranslation } from "react-i18next";
+import CarImage from "../../assets/car.svg";
 
 const formItemLayout = {
   labelCol: {
@@ -33,22 +37,27 @@ function JobTombstone({ job, ...otherProps }) {
   const { t } = useTranslation();
 
   if (!job) {
-    return (
-      <AlertComponent
-        message='This job does not exist or you do not have access to it.'
-        type='error'
-      />
-    );
+    return <AlertComponent message={t("jobs.errors.noaccess")} type='error' />;
   }
 
   const handleSubmit = e => {
     e.preventDefault();
 
     otherProps.form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        notification["error"]({
+          message: t("jobs.errors.validationtitle"),
+          description: t("jobs.errors.validation")
+        });
+      }
       if (!err) {
         mutationUpdateJob({
           variables: { jobId: jobContext.id, job: values }
-        }).then(r => console.log("result", r));
+        }).then(r =>
+          notification["success"]({
+            message: t("jobs.successes.savetitle")
+          })
+        );
       }
     });
   };
@@ -59,13 +68,21 @@ function JobTombstone({ job, ...otherProps }) {
   };
 
   const { getFieldDecorator } = otherProps.form;
+
+  const tombstoneTitle = (
+    <div>
+      <Avatar size='large' alt='Vehicle Image' src={CarImage} />
+      {t("jobs.fields.ro_number") + " " + jobContext.ro_number ?? "0"}
+    </div>
+  );
+
   return (
     <Form onSubmit={handleSubmit} {...formItemLayout}>
       <PageHeader
         style={{
           border: "1px solid rgb(235, 237, 240)"
         }}
-        title={"RO " + jobContext.ro_number ?? "0"}
+        title={tombstoneTitle}
         subTitle={
           jobContext.owner
             ? (jobContext.owner?.first_name ?? "") +
@@ -77,15 +94,29 @@ function JobTombstone({ job, ...otherProps }) {
         extra={[
           <Form.Item key='1'>
             <Button type='primary' htmlType='submit'>
-              Save
+              {t("general.labels.save")}
             </Button>
           </Form.Item>
         ]}>
-        <Descriptions size='small' column={3}>
-          <Descriptions.Item label='Claim Total'>
+        <Descriptions size='small' column={5}>
+          <Descriptions.Item label={t("jobs.labels.vehicle_info")}>
+            <Link to={`/manage/vehicles/${jobContext.vehicle?.id}`}>
+              {jobContext.vehicle?.v_model_yr ?? t("general.labels.na")}{" "}
+              {jobContext.vehicle?.v_make_desc ?? t("general.labels.na")}{" "}
+              {jobContext.vehicle?.v_model_desc ?? t("general.labels.na")} |{" "}
+              {jobContext.vehicle?.plate_no ?? t("general.labels.na")}
+            </Link>
+          </Descriptions.Item>
+
+          <Descriptions.Item label={t("jobs.fields.est_number")}>
+            {jobContext.est_number}
+          </Descriptions.Item>
+
+          <Descriptions.Item label={t("jobs.fields.claim_total")}>
             $ {jobContext.claim_total?.toFixed(2)}
           </Descriptions.Item>
-          <Descriptions.Item label='Deductible'>
+
+          <Descriptions.Item label={t("jobs.fields.deductible")}>
             $ {jobContext.deductible?.toFixed(2)}
           </Descriptions.Item>
         </Descriptions>
@@ -93,17 +124,13 @@ function JobTombstone({ job, ...otherProps }) {
 
       <Row>
         <Typography.Title level={4}>Information</Typography.Title>
-        <Form.Item label='RO #'>
-          {getFieldDecorator("ro_number", {
-            initialValue: jobContext.ro_number
-          })(<Input name='ro_number' readOnly onChange={handleChange} />)}
-        </Form.Item>
-
-        <Form.Item label='Estimate #'>
-          {getFieldDecorator("est_number", {
-            initialValue: jobContext.est_number
-          })(<Input name='est_number' readOnly onChange={handleChange} />)}
-        </Form.Item>
+{        
+  // <Form.Item label='Estimate #'>
+  //         {getFieldDecorator("est_number", {
+  //           initialValue: jobContext.est_number
+  //         })(<Input name='est_number' readOnly onChange={handleChange} />)}
+  //       </Form.Item>
+      }
       </Row>
 
       <Row>

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

@@ -4,6 +4,7 @@ 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";
+import CarImage from "../../assets/car.svg";
 
 //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`
@@ -80,11 +81,7 @@ export default function WhiteBoardCard({ metadata }) {
         ]}>
         <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'
-            />
+            <Avatar size='large' alt='Vehicle Image' src={CarImage} />
           </Col>
           <Col span={18}>
             <Row>
@@ -103,12 +100,14 @@ export default function WhiteBoardCard({ metadata }) {
         </Row>
         <Row>
           <Col span={12}>
-            {t("general.labels.in")}
-            <Moment format='MM/DD/YYYY'>{metadata.actual_in}</Moment>
+            {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>
+            {t("general.labels.out")}:
+            <Moment format='MM/DD/YYYY'>
+              {metadata.scheduled_completion}
+            </Moment>
           </Col>
         </Row>
       </Card>

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

@@ -11,6 +11,7 @@ export default function WhiteBoardKanBan({ data, eventBus }) {
     <Board
       tagStyle={{ fontSize: "80%" }}
       data={data}
+      style={{ backgroundColor: "none" }}
       laneDraggable={false}
       eventBusHandle={setEventBus}
       components={{ Card: WhiteBoardCard }}