IO-2013 Add IOU flag to job header in certain areas.

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

@@ -2,8 +2,9 @@ import {
   ExclamationCircleFilled,
   PauseCircleOutlined,
   WarningFilled,
+  BranchesOutlined,
 } from "@ant-design/icons";
-import { Card, Col, Row, Space, Tag } from "antd";
+import { Card, Col, Row, Space, Tag, Tooltip } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -78,6 +79,13 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
                 {job.suspended && (
                   <PauseCircleOutlined style={{ color: "orangered" }} />
                 )}
+                {job.iouparent && (
+                  <Link to={`/manage/jobs/${job.iouparent}`}>
+                    <Tooltip title={t("jobs.labels.iou")}>
+                      <BranchesOutlined style={{ color: "orangered" }} />
+                    </Tooltip>
+                  </Link>
+                )}
                 {job.production_vars && job.production_vars.alert ? (
                   <ExclamationCircleFilled className="production-alert" />
                 ) : null}

client/src/components/jobs-list/jobs-list.component.jsx

@@ -2,9 +2,10 @@ import {
   SyncOutlined,
   ExclamationCircleFilled,
   PauseCircleOutlined,
+  BranchesOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Card, Grid, Input, Space, Table } from "antd";
+import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -128,6 +129,11 @@ export function JobsList({ bodyshop }) {
             {record.suspended && (
               <PauseCircleOutlined style={{ color: "orangered" }} />
             )}
+            {record.iouparent && (
+              <Tooltip title={t("jobs.labels.iou")}>
+                <BranchesOutlined style={{ color: "orangered" }} />
+              </Tooltip>
+            )}
           </Space>
         </Link>
       ),

client/src/components/jobs-ready-list/jobs-ready-list.component.jsx

@@ -2,9 +2,10 @@ import {
   ExclamationCircleFilled,
   PauseCircleOutlined,
   SyncOutlined,
+  BranchesOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Card, Grid, Input, Space, Table } from "antd";
+import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
 import queryString from "query-string";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -140,6 +141,11 @@ export function JobsReadyList({ bodyshop }) {
             {record.suspended && (
               <PauseCircleOutlined style={{ color: "orangered" }} />
             )}
+            {record.iouparent && (
+              <Tooltip title={t("jobs.labels.iou")}>
+                <BranchesOutlined style={{ color: "orangered" }} />
+              </Tooltip>
+            )}
           </Space>
         </Link>
       ),

client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx

@@ -3,8 +3,9 @@ import {
   EyeFilled,
   DownloadOutlined,
   PauseCircleOutlined,
+  BranchesOutlined,
 } from "@ant-design/icons";
-import { Card, Col, Row, Space } from "antd";
+import { Card, Col, Row, Space, Tooltip } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -63,6 +64,11 @@ export default function ProductionBoardCard(
           {card.suspended && (
             <PauseCircleOutlined style={{ color: "orangered" }} />
           )}
+          {card.iouparent && (
+            <Tooltip title={t("jobs.labels.iou")}>
+              <BranchesOutlined style={{ color: "orangered" }} />
+            </Tooltip>
+          )}
           <span style={{ fontWeight: "bolder" }}>
             <Link
               to={

client/src/components/production-list-columns/production-list-columns.data.js

@@ -1,5 +1,5 @@
-import { PauseCircleOutlined } from "@ant-design/icons";
-import { Space } from "antd";
+import { PauseCircleOutlined, BranchesOutlined } from "@ant-design/icons";
+import { Space, Tooltip } from "antd";
 import i18n from "i18next";
 import moment from "moment";
 import { Link } from "react-router-dom";
@@ -61,6 +61,11 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
               {record.suspended && (
                 <PauseCircleOutlined style={{ color: "orangered" }} />
               )}
+              {record.iouparent && (
+                <Tooltip title={i18n.t("jobs.labels.iou")}>
+                  <BranchesOutlined style={{ color: "orangered" }} />
+                </Tooltip>
+              )}
             </Space>
           </Link>
         ),