IO-1430 add Last Contacted date to job.

client/src/components/job-detail-cards/job-detail-cards.dates.component.jsx

@@ -26,6 +26,12 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
           ) ? (
             <div>{t("jobs.errors.nodates")}</div>
           ) : null}
+          {data.date_last_contacted ? (
+            <Timeline.Item>
+              <label>{t("jobs.fields.date_last_contacted")}: </label>
+              <DateTimeFormatter>{data.date_last_contacted}</DateTimeFormatter>
+            </Timeline.Item>
+          ) : null}
           {data.date_open ? (
             <Timeline.Item>
               <label>{t("jobs.fields.date_open")}: </label>

client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx

@@ -74,7 +74,12 @@ export default function JobsAdminDatesChange({ job }) {
           <Form.Item label={t("jobs.fields.actual_in")} name="actual_in">
             <DateTimePicker />
           </Form.Item>
-
+          <Form.Item
+            label={t("jobs.fields.date_last_contacted")}
+            name="date_last_contacted"
+          >
+            <DateTimePicker />
+          </Form.Item>
           <Form.Item
             label={t("jobs.fields.scheduled_completion")}
             name="scheduled_completion"

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

@@ -69,6 +69,12 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
         </Tooltip>
       </FormRow>
       <FormRow header={t("jobs.forms.repairdates")}>
+        <Form.Item
+          label={t("jobs.fields.date_last_contacted")}
+          name="date_last_contacted"
+        >
+          <DateTimePicker />
+        </Form.Item>
         <Form.Item
           label={t("jobs.fields.scheduled_completion")}
           name="scheduled_completion"
@@ -93,7 +99,6 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
             );
           }}
         </Form.Item>
-
         <Form.Item
           label={t("jobs.fields.scheduled_delivery")}
           name="scheduled_delivery"

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

@@ -97,6 +97,19 @@ const r = ({ technician, state }) => {
         <ProductionListDate record={record} field="scheduled_completion" />
       ),
     },
+    {
+      title: i18n.t("jobs.fields.date_last_contacted"),
+      dataIndex: "date_last_contacted",
+      key: "date_last_contacted",
+      ellipsis: true,
+      sorter: (a, b) => dateSort(a.date_last_contacted, b.date_last_contacted),
+      sortOrder:
+        state.sortedInfo.columnKey === "date_last_contacted" &&
+        state.sortedInfo.order,
+      render: (text, record) => (
+        <ProductionListDate time record={record} field="date_last_contacted" />
+      ),
+    },
     {
       title: i18n.t("jobs.fields.scheduled_delivery"),
       dataIndex: "scheduled_delivery",

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

@@ -1,17 +1,20 @@
 import { useMutation } from "@apollo/client";
-import { DatePicker, Dropdown } from "antd";
+import { DatePicker, Dropdown, TimePicker, Button, Card } from "antd";
 import moment from "moment";
-import React from "react";
+import React, { useState } from "react";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { DateFormatter } from "../../utils/DateFormatter";
 
+import { useTranslation } from "react-i18next";
+
 const OneCalendarDay = 60 * 60 * 24 * 1000;
 const Now = new Date();
 
-export default function ProductionListDate({ record, field }) {
+export default function ProductionListDate({ record, field, time }) {
   const [updateAlert] = useMutation(UPDATE_JOB);
-
+  const [visible, setVisible] = useState(false);
+  const { t } = useTranslation();
   const handleChange = (date) => {
     logImEXEvent("product_toggle_date", { field });
 
@@ -25,27 +28,47 @@ export default function ProductionListDate({ record, field }) {
       },
     }).then(() => {
       if (record.refetch) record.refetch();
+      if (!time) {
+        setVisible(false);
+      }
     });
   };
 
   return (
     <div>
       <Dropdown
-        trigger={["click"]}
+        //trigger={["click"]}
+        visible={visible}
         style={{
           height: "19px",
         }}
         overlay={
-          <div onClick={(e) => e.stopPropagation()}>
+          <Card
+            style={{ padding: "1rem" }}
+            onClick={(e) => e.stopPropagation()}
+          >
             <DatePicker
               onClick={(e) => e.stopPropagation()}
               value={(record[field] && moment(record[field])) || null}
               onChange={handleChange}
+              format="MM/DD/YYYY"
             />
-          </div>
+            {time && (
+              <TimePicker
+                onClick={(e) => e.stopPropagation()}
+                value={(record[field] && moment(record[field])) || null}
+                onChange={handleChange}
+                format="hh:mm a"
+              />
+            )}
+            <Button onClick={() => setVisible(false)}>
+              {t("general.actions.close")}
+            </Button>
+          </Card>
         }
       >
         <div
+          onClick={() => setVisible(true)}
           style={{
             height: "19px",
           }}