Added visual indicators for possibly incorrect vehicle alerts. RPS-53

src/components/atoms/vehicle-group-alert/vehicle-group-alert.atom.jsx

@@ -0,0 +1,47 @@
+import { AlertFilled } from "@ant-design/icons";
+import { Tooltip } from "antd";
+import React from "react";
+const models = [
+  "equinox",
+  "expedition",
+  "pickup",
+  "tucson",
+  "terrain",
+  "sorento",
+  "sienna",
+  "grandcaravan",
+  "grand caravan",
+  "journey",
+  "nv200",
+  "rav4",
+];
+
+export default function VehicleGroupAlertAtom({ job, showGroup = false }) {
+  const shouldWarn = models.includes(job.v_model.toLowerCase());
+
+  const vehicleText = `${job.v_model_yr} ${job.v_makedesc} ${job.v_model} (${
+    job.v_type
+  })${
+    showGroup
+      ? `- ${job.group} @ ${
+          job.v_age === 1 ? `${job.v_age} year` : `${job.v_age} years`
+        }`
+      : ""
+  }
+`;
+
+  if (shouldWarn)
+    return (
+      <Tooltip title="This vehicle might be in the wrong group. Please confirm the group manually and update it if it is incorrect.">
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <span>{vehicleText}</span>
+          <AlertFilled
+            style={{ color: "tomato", marginLeft: ".3rem" }}
+            className="blink_me"
+          />
+        </div>
+      </Tooltip>
+    );
+
+  return vehicleText;
+}

src/components/molecules/jobs-detail-description/jobs-detail-description.molecule.jsx

@@ -6,6 +6,7 @@ import TimeAgoFormatter from "../../atoms/time-ago-formatter/time-ago-formatter.
 import CloseDateDisplayMolecule from "../close-date-display/close-date-display.molecule";
 import JobGroupMolecule from "../job-group/job-group.molecule";
 import DeleteJobAtom from "../../atoms/delete-job/delete-job.atom";
+import VehicleGroupAlertAtom from "../../atoms/vehicle-group-alert/vehicle-group-alert.atom";
 
 export default function JobsDetailDescriptionMolecule({ loading, job }) {
   if (loading) return <Skeleton active />;
@@ -28,7 +29,9 @@ export default function JobsDetailDescriptionMolecule({ loading, job }) {
       >
         <Descriptions column={{ xxl: 5, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}>
           <Descriptions.Item label="Owner">{`${job.ownr_fn} ${job.ownr_ln}`}</Descriptions.Item>
-          <Descriptions.Item label="Vehicle">{`${job.v_model_yr} ${job.v_makedesc} ${job.v_model} (${job.v_type})`}</Descriptions.Item>
+          <Descriptions.Item label="Vehicle">
+            <VehicleGroupAlertAtom job={job} />
+          </Descriptions.Item>
           <Descriptions.Item label="Claim Total">
             <CurrencyFormatterAtom>{job.clm_total}</CurrencyFormatterAtom>
           </Descriptions.Item>

src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx

@@ -1,18 +1,18 @@
 import { Input, Table } from "antd";
+import moment from "moment";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import ipcTypes from "../../../ipc.types";
 import { setSelectedJobId } from "../../../redux/application/application.actions";
-
 import {
   selectReportData,
   selectReportLoading,
-  selectScorecard,
+  selectScorecard
 } from "../../../redux/reporting/reporting.selectors";
 import { alphaSort } from "../../../util/sorters";
-import moment from "moment";
+import VehicleGroupAlertAtom from "../../atoms/vehicle-group-alert/vehicle-group-alert.atom";
 
 const { ipcRenderer } = window;
 
@@ -76,12 +76,9 @@ export function ReportingJobsListMolecule({
       title: "Vehicle",
       dataIndex: "vehicle",
       key: "vehicle",
-      render: (text, record) =>
-        `${record.v_model_yr} ${record.v_makedesc} ${record.v_model} (${
-          record.v_type
-        }) - ${record.group} @ ${
-          record.v_age === 1 ? `${record.v_age} year` : `${record.v_age} years`
-        }`,
+      render: (text, record) => (
+        <VehicleGroupAlertAtom job={record} showGroup />
+      ),
     },
     {
       title: "Database Price Sum",