IO-1558

client/src/App/App.styles.scss

@@ -91,15 +91,14 @@
   color: blue;
 }
 
-.production-completion-1 {
-  color: rgba(207, 12, 12, 0.8);
-
-//  animation: production-completion-1-blinker 1s linear infinite;
+.production-completion-soon {
+  color: rgba(255, 140, 0, 0.8);
+  font-weight: bold;
+}
+.production-completion-past {
+  color: rgba(255, 0, 0, 0.8);
+  font-weight: bold;
 }
-// @keyframes production-completion-1-blinker {
-//   50% {
-//   }
-// }
 
 .react-resizable {
   position: relative;

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

@@ -109,7 +109,7 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         state.sortedInfo.columnKey === "scheduled_completion" &&
         state.sortedInfo.order,
       render: (text, record) => (
-        <ProductionListDate record={record} field="scheduled_completion" />
+        <ProductionListDate record={record} field="scheduled_completion" pastIndicator />
       ),
     },
     {
@@ -156,7 +156,7 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
         state.sortedInfo.columnKey === "scheduled_delivery" &&
         state.sortedInfo.order,
       render: (text, record) => (
-        <ProductionListDate record={record} field="scheduled_delivery" />
+        <ProductionListDate record={record} field="scheduled_delivery" pastIndicator/>
       ),
     },
     {

client/src/components/production-list-columns/production-list-columns.date.component.jsx

@@ -8,7 +8,12 @@ import { DateFormatter } from "../../utils/DateFormatter";
 
 import { useTranslation } from "react-i18next";
 
-export default function ProductionListDate({ record, field, time }) {
+export default function ProductionListDate({
+  record,
+  field,
+  time,
+  pastIndicator,
+}) {
   const [updateAlert] = useMutation(UPDATE_JOB);
   const [visible, setVisible] = useState(false);
   const { t } = useTranslation();
@@ -31,6 +36,15 @@ export default function ProductionListDate({ record, field, time }) {
     });
   };
 
+  let className = "";
+  if (pastIndicator) {
+    className =
+      !!record[field] &&
+      ((moment().isSameOrAfter(moment(record[field]), "day") &&
+        "production-completion-past") ||
+        (moment().add(1, "day").isSame(moment(record[field]), "day") &&
+          "production-completion-soon"));
+  }
   return (
     <div>
       <Dropdown
@@ -69,11 +83,7 @@ export default function ProductionListDate({ record, field, time }) {
           style={{
             height: "19px",
           }}
-          className={
-            !!record[field] && moment().isSame(moment(record[field]), "day")
-              ? "production-completion-1"
-              : ""
-          }
+          className={className}
         >
           <DateFormatter bordered={false}>{record[field]}</DateFormatter>
         </div>