Complete refactor of jobs detail screen.

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -0,0 +1,117 @@
+import {
+  Avatar,
+  Button,
+  Descriptions,
+  notification,
+  PageHeader,
+  Tag,
+  Input,
+  Form,
+  Checkbox
+} from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import Moment from "react-moment";
+import { Link } from "react-router-dom";
+import CarImage from "../../assets/car.svg";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+
+export default function JobsDetailHeader({
+  job,
+  mutationConvertJob,
+  refetch,
+  getFieldDecorator
+}) {
+  const { t } = useTranslation();
+
+  const tombstoneTitle = (
+    <div>
+      <Avatar size='large' alt='Vehicle Image' src={CarImage} />
+      {`${t("jobs.fields.ro_number")} ${
+        job.ro_number ? job.ro_number : t("general.labels.na")
+      }`}
+    </div>
+  );
+
+  const tombstoneSubtitle = (
+    <div>
+      {job.owner
+        ? (job.owner.first_name || "") + " " + (job.owner.last_name || "")
+        : t("jobs.errors.noowner")}
+
+      {job.vehicle ? (
+        <Link to={`/manage/vehicles/${job.vehicle.id}`}>
+          {job.vehicle.v_model_yr || t("general.labels.na")}{" "}
+          {job.vehicle.v_make_desc || t("general.labels.na")}{" "}
+          {job.vehicle.v_model_desc || t("general.labels.na")} |{" "}
+          {job.vehicle.plate_no || t("general.labels.na")} |{" "}
+          {job.vehicle.v_vin || t("general.labels.na")}
+        </Link>
+      ) : null}
+    </div>
+  );
+
+  const menuExtra = [
+    <Button
+      key='convert'
+      type='dashed'
+      disabled={job.converted}
+      onClick={() => {
+        mutationConvertJob({
+          variables: { jobId: job.id }
+        }).then(r => {
+          refetch();
+
+          notification["success"]({
+            message: t("jobs.successes.converted")
+          });
+        });
+      }}>
+      {t("jobs.actions.convert")}
+    </Button>,
+    <Button type='primary' key='submit' htmlType='submit'>
+      {t("general.labels.save")}
+    </Button>
+  ];
+
+  return (
+    <PageHeader
+      style={{
+        border: "1px solid rgb(235, 237, 240)"
+      }}
+      title={tombstoneTitle}
+      subTitle={tombstoneSubtitle}
+      tags={
+        <span key='job-status'>
+          {job.job_status ? (
+            <Tag color='blue'>{job.job_status.name}</Tag>
+          ) : null}
+        </span>
+      }
+      extra={menuExtra}>
+      <Descriptions size='small' column={5}>
+        <Descriptions.Item label={t("jobs.fields.repairtotal")}>
+          <CurrencyFormatter>{job.claim_total}</CurrencyFormatter>
+        </Descriptions.Item>
+
+        <Descriptions.Item label={t("jobs.fields.customerowing")}>
+          $NO BINDING YET
+        </Descriptions.Item>
+
+        <Descriptions.Item label={t("jobs.fields.specialcoveragepolicy")}>
+          <Checkbox checked={job.special_coverage_policy} />
+        </Descriptions.Item>
+
+        <Descriptions.Item label={t("jobs.fields.scheduled_completion")}>
+          {job.scheduled_completion ? (
+            <Moment format='MM/DD/YYYY'>{job.scheduled_completion}</Moment>
+          ) : null}
+        </Descriptions.Item>
+
+        <Descriptions.Item label={t("jobs.fields.servicecar")}>
+          {job.service_car}
+        </Descriptions.Item>
+      </Descriptions>
+    </PageHeader>
+  );
+}