- Final DateTimePicker update

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/index.html

@@ -46,23 +46,77 @@
   <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
   <meta name="description" content="Rome Online"/>
   <title>Rome Online</title>
-  <script type="text/javascript" id="zsiqchat">
-    var $zoho = $zoho || {};
-    $zoho.salesiq = $zoho.salesiq || {
-      widgetcode: "siq01bb8ac617280bdacddfeb528f07734dadc64ef3f05efef9f769c1ec171af666",
-      values: {},
-      ready: function () {
-      }
-    };
-    var d = document;
-    s = d.createElement("script");
-    s.type = "text/javascript";
-    s.id = "zsiqscript";
-    s.defer = true;
-    s.src = "https://salesiq.zohopublic.com/widget";
-    t = d.getElementsByTagName("script")[0];
-    t.parentNode.insertBefore(s, t);
-  </script>
+
+  <!--Use the below code snippet to provide real time updates to the live chat plugin without the need of copying and paste each time to your website when changes are made via PBX-->
+
+  <call-us-selector phonesystem-url=https://rometech.east.3cx.us:5001
+                    party="LiveChat528346"></call-us-selector>
+
+  <!--Incase you don't want real time updates to the live chat plugin when options are changed, use the below code snippet. Please note that each time you change the settings you will need to copy and paste the snippet code to your website-->
+
+  <!--<call-us
+  
+  phonesystem-url=https://rometech.east.3cx.us:5001
+  
+  style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;right: 20px; bottom: 20px;"
+  
+  id="wp-live-chat-by-3CX"
+  
+  minimized="true"
+  
+  animation-style="noanimation"
+  
+  party="LiveChat528346"
+  
+  minimized-style="bubbleright"
+  
+  allow-call="true"
+  
+  allow-video="false"
+  
+  allow-soundnotifications="true"
+  
+  enable-mute="true"
+  
+  enable-onmobile="true"
+  
+  offline-enabled="true"
+  
+  enable="true"
+  
+  ignore-queueownership="false"
+  
+  authentication="both"
+  
+  show-operator-actual-name="true"
+  
+  aknowledge-received="true"
+  
+  gdpr-enabled="false"
+  
+  message-userinfo-format="name"
+  
+  message-dateformat="both"
+  
+  lang="browser"
+  
+  button-icon-type="default"
+  
+  greeting-visibility="none"
+  
+  greeting-offline-visibility="none"
+  
+  chat-delay="2000"
+  
+  enable-direct-call="true"
+  
+  enable-ga="false"
+  
+  ></call-us>-->
+
+  <script defer src=https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js
+          id="tcx-callus-js" charset="utf-8"></script>
+
 
   <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
   <title>ProManager</title>

client/src/components/form-date-time-picker/form-date-time-picker.component.jsx

@@ -1,18 +1,18 @@
-import React, { useCallback, useState } from "react";
 import { DatePicker } from "antd";
-import dayjs from "../../utils/day";
-import { formats, shorthandFormats } from "./formats.js";
 import PropTypes from "prop-types";
+import React, { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import dayjs from "../../utils/day";
+import { fuzzyMatchDate } from "./formats.js";
 
 const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, isDateOnly = false, ...restProps }) => {
   const [isManualInput, setIsManualInput] = useState(false);
+  const { t } = useTranslation();
 
   const handleChange = useCallback(
     (newDate) => {
-      if (newDate === null && onChange) {
-        onChange(null);
-      } else if (newDate && onChange) {
-        onChange(newDate);
+      if (onChange) {
+        onChange(newDate || null);
       }
       setIsManualInput(false);
     },
@@ -21,57 +21,24 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
 
   const handleBlur = useCallback(
     (e) => {
+      // Bail if this is not a manual input
       if (!isManualInput) {
         return;
       }
-
+      // Reset manual input flag
       setIsManualInput(false);
 
-      const v = e.target.value;
+      const v = e?.target?.value;
+
       if (!v) return;
 
-      const upperV = v.toUpperCase();
+      let parsedDate = isDateOnly ? fuzzyMatchDate(v)?.startOf("day") : fuzzyMatchDate(v);
 
-      let _a;
-
-      for (const format of shorthandFormats) {
-        _a = dayjs(upperV, format);
-        if (_a.isValid()) break;
-      }
-
-      if (!_a || !_a.isValid()) {
-        for (const format of formats) {
-          _a = dayjs(upperV, format);
-          if (_a.isValid()) break;
-        }
-      }
-
-      if (_a && _a.isValid()) {
-        if (isDateOnly) {
-          _a = _a.startOf("day");
-        }
-
-        if (value && value.isValid && value.isValid()) {
-          _a.set({
-            hours: value.hours(),
-            minutes: value.minutes(),
-            seconds: value.seconds(),
-            milliseconds: value.milliseconds()
-          });
-        }
-
-        if (onlyFuture) {
-          if (dayjs().subtract(1, "day").isBefore(_a)) {
-            onChange(_a);
-          } else {
-            onChange(dayjs().startOf("day"));
-          }
-        } else {
-          onChange(_a);
-        }
+      if (parsedDate && onChange) {
+        onChange(parsedDate);
       }
     },
-    [isManualInput, isDateOnly, onlyFuture, onChange, value]
+    [isManualInput, isDateOnly, onChange]
   );
 
   const handleKeyDown = useCallback(
@@ -79,6 +46,7 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
       setIsManualInput(true);
 
       if (e.key.toLowerCase() === "t" && onChange) {
+        e.preventDefault();
         setIsManualInput(false);
         onChange(dayjs());
       } else if (e.key.toLowerCase() === "enter") {
@@ -115,6 +83,7 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
         format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
         value={value ? dayjs(value) : null}
         onChange={handleChange}
+        placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
         onBlur={onBlur || handleBlur}
         disabledDate={handleDisabledDate}
         {...restProps}

client/src/components/form-date-time-picker/formats.js

@@ -1,93 +1,63 @@
-export const shorthandFormats = [
-  "M/D/YY hA",
-  "M/D/YY h:mmA",
-  "M/D/YYYY hA",
-  "M/D/YYYY h:mmA",
-  "M/D/YY ha",
-  "M/D/YY h:mma",
-  "M/D/YYYY ha",
-  "M/D/YYYY h:mma"
+import dayjs from "../../utils/day";
+
+const dateFormats = [
+  "MMDDYYYY",
+  "MMDDYY",
+  "M/D/YYYY",
+  "MM/D/YYYY",
+  "M/DD/YYYY",
+  "MM/DD/YYYY",
+  "M/D/YY",
+  "MM/D/YY",
+  "M/DD/YY",
+  "MM/DD/YY"
 ];
 
-export const formats = [
-  "MMDDYY",
-  "MMDDYYYY",
-  "MM/DD/YY",
-  "MM/DD/YYYY",
-  "M/DD/YY",
-  "M/DD/YYYY",
-  "MM/D/YY",
-  "MM/D/YYYY",
-  "M/D/YY",
+const timeFormats = ["h:mm A", "h:mmA", "h A", "hA", "hh:mm A", "hh:mm:ss A"];
+
+const dateTimeFormats = [
+  ...["M/D/YYYY", "MM/D/YYYY", "M/DD/YYYY", "MM/DD/YYYY", "M/D/YY", "MM/D/YY", "M/DD/YY", "MM/DD/YY"].flatMap(
+    (dateFormat) => timeFormats.map((timeFormat) => `${dateFormat} ${timeFormat}`)
+  ),
+
+  ...["MMDDYYYY", "MMDDYY"].flatMap((dateFormat) => timeFormats.map((timeFormat) => `${dateFormat} ${timeFormat}`)),
+
   "M/D/YYYY",
-  "D/MM/YY",
-  "D/MM/YYYY",
-  "DD/M/YY",
-  "DD/M/YYYY",
-  "D/M/YY",
-  "D/M/YYYY",
-  "MMDDYY hh:mm A",
-  "MMDDYYYY hh:mm A",
-  "MM/DD/YY hh:mm A",
-  "MM/DD/YYYY hh:mm A",
-  "M/DD/YY hh:mm A",
-  "M/DD/YYYY hh:mm A",
-  "MM/D/YY hh:mm A",
-  "MM/D/YYYY hh:mm A",
-  "M/D/YY hh:mm A",
-  "M/D/YYYY hh:mm A",
-  "D/MM/YY hh:mm A",
-  "D/MM/YYYY hh:mm A",
-  "DD/M/YY hh:mm A",
-  "DD/M/YYYY hh:mm A",
-  "D/M/YY hh:mm A",
-  "D/M/YYYY hh:mm A",
-  "MMDDYY hh:mm:ss A",
-  "MMDDYYYY hh:mm:ss A",
-  "MM/DD/YY hh:mm:ss A",
-  "MM/DD/YYYY hh:mm:ss A",
-  "M/DD/YY hh:mm:ss A",
-  "M/DD/YYYY hh:mm:ss A",
-  "MM/D/YY hh:mm:ss A",
-  "MM/D/YYYY hh:mm:ss A",
-  "M/D/YY hh:mm:ss A",
-  "M/D/YYYY hh:mm:ss A",
-  "D/MM/YY hh:mm:ss A",
-  "D/MM/YYYY hh:mm:ss A",
-  "DD/M/YY hh:mm:ss A",
-  "DD/M/YYYY hh:mm:ss A",
-  "D/M/YY hh:mm:ss A",
-  "D/M/YYYY hh:mm:ss A",
-  "MMDDYY HH:mm",
-  "MMDDYYYY HH:mm",
-  "MM/DD/YY HH:mm",
-  "MM/DD/YYYY HH:mm",
-  "M/DD/YY HH:mm",
-  "M/DD/YYYY HH:mm",
-  "MM/D/YY HH:mm",
-  "MM/D/YYYY HH:mm",
-  "M/D/YY HH:mm",
-  "M/D/YYYY HH:mm",
-  "D/MM/YY HH:mm",
-  "D/MM/YYYY HH:mm",
-  "DD/M/YY HH:mm",
-  "DD/M/YYYY HH:mm",
-  "D/M/YY HH:mm",
-  "D/M/YYYY HH:mm",
-  "MMDDYY HH:mm:ss",
-  "MMDDYYYY HH:mm:ss",
-  "MM/DD/YY HH:mm:ss",
-  "MM/DD/YYYY HH:mm:ss",
-  "M/DD/YY HH:mm:ss",
-  "M/DD/YYYY HH:mm:ss",
-  "MM/D/YY HH:mm:ss",
-  "MM/D/YYYY HH:mm:ss",
-  "M/D/YY HH:mm:ss",
-  "M/D/YYYY HH:mm:ss",
-  "D/MM/YY HH:mm:ss",
-  "D/MM/YYYY HH:mm:ss",
-  "DD/M/YY HH:mm:ss",
-  "DD/M/YYYY HH:mm:ss",
-  "D/M/YY HH:mm:ss",
-  "D/M/YYYY HH:mm:ss"
+  "MM/D/YYYY",
+  "M/DD/YYYY",
+  "MM/DD/YYYY",
+  "M/D/YY",
+  "MM/D/YY",
+  "M/DD/YY",
+  "MM/DD/YY",
+  "MMDDYYYY",
+  "MMDDYY"
 ];
+
+const sanitizeInput = (input) =>
+  input
+    .trim()
+    .toUpperCase()
+    .replace(/\s*(am|pm)\s*/i, " $1")
+    .replaceAll(".", "/")
+    .replaceAll("-", "/");
+
+export const fuzzyMatchDate = (dateString) => {
+  const sanitizedInput = sanitizeInput(dateString);
+
+  for (const format of dateFormats) {
+    const parsedDate = dayjs(sanitizedInput, format, true);
+    if (parsedDate.isValid()) {
+      return parsedDate;
+    }
+  }
+
+  for (const format of dateTimeFormats) {
+    const parsedDateTime = dayjs(sanitizedInput, format, true);
+    if (parsedDateTime.isValid()) {
+      return parsedDateTime; // Return the dayjs object
+    }
+  }
+
+  return null; // If no matching format is found
+};

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

@@ -28,6 +28,11 @@ import ProductionListColumnCategory from "./production-list-columns.status.categ
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionListColumnTouchTime from "./prodution-list-columns.touchtime.component";
 
+const getEmployeeName = (employeeId, employees) => {
+  const employee = employees.find((e) => e.id === employeeId);
+  return employee ? `${employee.first_name} ${employee.last_name}` : "";
+};
+
 const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatments }) => {
   const { Enhanced_Payroll } = treatments;
   return [
@@ -426,8 +431,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       sortOrder: state.sortedInfo.columnKey === "employee_body" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees?.find((e) => e.id === a.employee_body)?.first_name,
-          bodyshop.employees?.find((e) => e.id === b.employee_body)?.first_name
+          getEmployeeName(a.employee_body, bodyshop.employees),
+          getEmployeeName(b.employee_body, bodyshop.employees)
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment refetch={refetch} record={record} type="employee_body" />
@@ -440,8 +445,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       sortOrder: state.sortedInfo.columnKey === "employee_prep" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees?.find((e) => e.id === a.employee_prep)?.first_name,
-          bodyshop.employees?.find((e) => e.id === b.employee_prep)?.first_name
+          getEmployeeName(a.employee_prep, bodyshop.employees),
+          getEmployeeName(b.employee_prep, bodyshop.employees)
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment record={record} refetch={refetch} type="employee_prep" />
@@ -460,8 +465,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       sortOrder: state.sortedInfo.columnKey === "employee_csr" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees?.find((e) => e.id === a.employee_csr)?.first_name,
-          bodyshop.employees?.find((e) => e.id === b.employee_csr)?.first_name
+          getEmployeeName(a.employee_csr, bodyshop.employees),
+          getEmployeeName(b.employee_csr, bodyshop.employees)
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment refetch={refetch} record={record} type="employee_csr" />
@@ -474,8 +479,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       sortOrder: state.sortedInfo.columnKey === "employee_refinish" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees?.find((e) => e.id === a.employee_refinish)?.first_name,
-          bodyshop.employees?.find((e) => e.id === b.employee_refinish)?.first_name
+          getEmployeeName(a.employee_refinish, bodyshop.employees),
+          getEmployeeName(b.employee_refinish, bodyshop.employees)
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment record={record} refetch={refetch} type="employee_refinish" />

client/src/translations/en_us/common.json

@@ -1189,6 +1189,8 @@
         "clear": "Clear",
         "confirmpassword": "Confirm Password",
         "created_at": "Created At",
+        "date": "Select Date",
+        "datetime": "Select Date & Time",
         "email": "Email",
         "errors": "Errors",
         "excel": "Excel",
@@ -2737,7 +2739,7 @@
       }
     },
     "production": {
-      "constants":{
+      "constants": {
         "main_profile": "Default"
       },
       "options": {

client/src/translations/fr/common.json

@@ -1189,6 +1189,8 @@
         "clear": "",
         "confirmpassword": "",
         "created_at": "",
+        "date": "",
+        "datetime": "",
         "email": "",
         "errors": "",
         "excel": "",
@@ -2737,7 +2739,7 @@
       }
     },
     "production": {
-      "constants":{
+      "constants": {
         "main_profile": ""
       },
       "options": {