From abf9d0b7f455a676b13c00519a00a1cf69dab574 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Wed, 19 Jan 2022 12:03:30 -0800
Subject: [PATCH] IO-1558

---
 client/src/App/App.styles.scss                | 15 ++++++-------
 .../production-list-columns.data.js           |  4 ++--
 ...production-list-columns.date.component.jsx | 22 ++++++++++++++-----
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/client/src/App/App.styles.scss b/client/src/App/App.styles.scss
index c188f8a14..e7243044d 100644
--- a/client/src/App/App.styles.scss
+++ b/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;
diff --git a/client/src/components/production-list-columns/production-list-columns.data.js b/client/src/components/production-list-columns/production-list-columns.data.js
index 00f279a66..d8d547665 100644
--- a/client/src/components/production-list-columns/production-list-columns.data.js
+++ b/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/>
       ),
     },
     {
diff --git a/client/src/components/production-list-columns/production-list-columns.date.component.jsx b/client/src/components/production-list-columns/production-list-columns.date.component.jsx
index 4381d3b52..1b201032e 100644
--- a/client/src/components/production-list-columns/production-list-columns.date.component.jsx
+++ b/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>