feature/IO-3255-simplified-parts-management - Merge release / resolve conflicts

client/package.json

@@ -13,15 +13,15 @@
     "@emotion/is-prop-valid": "^1.3.1",
     "@fingerprintjs/fingerprintjs": "^4.6.1",
     "@firebase/analytics": "^0.10.17",
-    "@firebase/app": "^0.13.2",
+    "@firebase/app": "^0.14.0",
     "@firebase/auth": "^1.10.8",
     "@firebase/firestore": "^4.8.0",
     "@firebase/messaging": "^0.12.22",
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.8.2",
-    "@sentry/cli": "^2.46.0",
+    "@sentry/cli": "^2.50.0",
-    "@sentry/react": "^9.35.0",
+    "@sentry/react": "^9.40.0",
-    "@sentry/vite-plugin": "^3.5.0",
+    "@sentry/vite-plugin": "^3.6.1",
     "@splitsoftware/splitio-react": "^2.3.1",
     "@tanem/react-nprogress": "^5.0.53",
     "antd": "^5.26.4",
@@ -41,9 +41,9 @@
     "i18next": "^24.2.3",
     "i18next-browser-languagedetector": "^8.2.0",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.9",
+    "libphonenumber-js": "^1.12.10",
     "logrocket": "^9.0.2",
-    "markerjs2": "^2.32.4",
+    "markerjs2": "^2.32.6",
     "memoize-one": "^6.0.0",
     "normalize-url": "^8.0.2",
     "object-hash": "^3.0.0",
@@ -131,12 +131,12 @@
     "@ant-design/icons": "^6.0.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.27.1",
-    "@dotenvx/dotenvx": "^1.45.2",
+    "@dotenvx/dotenvx": "^1.48.0",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.30.1",
+    "@eslint/js": "^9.31.0",
-    "@playwright/test": "^1.53.2",
+    "@playwright/test": "^1.54.1",
-    "@sentry/webpack-plugin": "^3.5.0",
+    "@sentry/webpack-plugin": "^3.6.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -151,7 +151,7 @@
     "jsdom": "^26.0.0",
     "memfs": "^4.17.2",
     "os-browserify": "^0.3.0",
-    "playwright": "^1.53.2",
+    "playwright": "^1.54.1",
     "react-error-overlay": "^6.1.0",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",

client/src/components/bill-line-search-select/bill-line-search-select.component.jsx

@@ -1,5 +1,5 @@
 import { Select } from "antd";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import InstanceRenderMgr from "../../utils/instanceRenderMgr";
 
@@ -43,7 +43,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
             item.oem_partno ? ` - ${item.oem_partno}` : ""
           }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(),
           label: (
-            <div style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>
+            <div style={{ whiteSpace: "normal", wordBreak: "break-word" }}>
               <span>
                 {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
                   item.oem_partno ? ` - ${item.oem_partno}` : ""

client/src/components/contract-status-select/contract-status-select.component.jsx

@@ -1,10 +1,10 @@
-import React, { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";
 
 const { Option } = Select;
 
-const ContractStatusComponent = ({ value, onChange }, ref) => {
+const ContractStatusComponent = ({ value, onChange }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
 

client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx

@@ -1,5 +1,5 @@
 import { Slider } from "antd";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 
 const CourtesyCarFuelComponent = (props, ref) => {

client/src/components/dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx

@@ -0,0 +1,411 @@
+import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons";
+import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { TimeFormatter } from "../../../utils/DateFormatter";
+import { onlyUnique } from "../../../utils/arrayHelper";
+import dayjs from "../../../utils/day";
+import { alphaSort, dateSort } from "../../../utils/sorters";
+import useLocalStorage from "../../../utils/useLocalStorage";
+import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
+import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../../owner-name-display/owner-name-display.component";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardScheduledDeliveryToday({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: {}
+  });
+  const [isTvModeScheduledDelivery, setIsTvModeScheduledDelivery] = useLocalStorage("isTvModeScheduledDelivery", false);
+  if (!data) return null;
+  if (!data.scheduled_delivery_today) return <DashboardRefreshRequired {...cardProps} />;
+
+  const scheduledDeliveryToday = data.scheduled_delivery_today.map((item) => {
+    const joblines_body = item.joblines
+      ? item.joblines.filter((l) => l.mod_lbr_ty !== "LAR").reduce((acc, val) => acc + val.mod_lb_hrs, 0)
+      : 0;
+    const joblines_ref = item.joblines
+      ? item.joblines.filter((l) => l.mod_lbr_ty === "LAR").reduce((acc, val) => acc + val.mod_lb_hrs, 0)
+      : 0;
+    return {
+      ...item,
+      joblines_body,
+      joblines_ref
+    };
+  });
+
+  const tvFontSize = 18;
+  const tvFontWeight = "bold";
+
+  const tvColumns = [
+    {
+      title: t("jobs.fields.scheduled_delivery"),
+      dataIndex: "scheduled_delivery",
+      key: "scheduled_delivery",
+      ellipsis: true,
+      sorter: (a, b) => dateSort(a.scheduled_delivery, b.scheduled_delivery),
+      sortOrder: state.sortedInfo.columnKey === "scheduled_delivery" && state.sortedInfo.order,
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          <TimeFormatter>{record.scheduled_delivery}</TimeFormatter>
+        </span>
+      )
+    },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder: state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Link to={"/manage/jobs/" + record.jobid} onClick={(e) => e.stopPropagation()}>
+          <Space>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              {record.ro_number || t("general.labels.na")}
+              {record.production_vars && record.production_vars.alert ? (
+                <ExclamationCircleFilled className="production-alert" />
+              ) : null}
+              {record.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
+              {record.iouparent && (
+                <Tooltip title={t("jobs.labels.iou")}>
+                  <BranchesOutlined style={{ color: "orangered" }} />
+                </Tooltip>
+              )}
+            </span>
+          </Space>
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              <OwnerNameDisplay ownerObject={record} />
+            </span>
+          </Link>
+        ) : (
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${a.v_model_desc || ""}`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder: state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link to={"/manage/vehicles/" + record.vehicleid} onClick={(e) => e.stopPropagation()}>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}
+            </span>
+          </Link>
+        ) : (
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{`${
+            record.v_model_yr || ""
+          } ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
+        );
+      }
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder: state.sortedInfo.columnKey === "alt_transport" && state.sortedInfo.order,
+      filters:
+        (scheduledDeliveryToday &&
+          scheduledDeliveryToday
+            .map((j) => j.alt_transport)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || t("dashboard.errors.atp"),
+                value: [s]
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.alt_transport),
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{record.alt_transport}</span>
+      )
+    },
+    {
+      title: t("jobs.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.status, b.status),
+      sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters:
+        (scheduledDeliveryToday &&
+          scheduledDeliveryToday
+            .map((j) => j.status)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || t("dashboard.errors.status"),
+                value: [s]
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.status),
+      render: (text, record) => <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{record.status}</span>
+    },
+    {
+      title: t("jobs.fields.lab"),
+      dataIndex: "joblines_body",
+      key: "joblines_body",
+      sorter: (a, b) => a.joblines_body - b.joblines_body,
+      sortOrder: state.sortedInfo.columnKey === "joblines_body" && state.sortedInfo.order,
+      align: "right",
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{record.joblines_body.toFixed(1)}</span>
+      )
+    },
+    {
+      title: t("jobs.fields.lar"),
+      dataIndex: "joblines_ref",
+      key: "joblines_ref",
+      sorter: (a, b) => a.joblines_ref - b.joblines_ref,
+      sortOrder: state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order,
+      align: "right",
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{record.joblines_ref.toFixed(1)}</span>
+      )
+    }
+  ];
+
+  const columns = [
+    {
+      title: t("jobs.fields.scheduled_delivery"),
+      dataIndex: "scheduled_delivery",
+      key: "scheduled_delivery",
+      ellipsis: true,
+      sorter: (a, b) => dateSort(a.scheduled_delivery, b.scheduled_delivery),
+      sortOrder: state.sortedInfo.columnKey === "scheduled_delivery" && state.sortedInfo.order,
+      render: (text, record) => <TimeFormatter>{record.scheduled_delivery}</TimeFormatter>
+    },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder: state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Link to={"/manage/jobs/" + record.jobid} onClick={(e) => e.stopPropagation()}>
+          <Space>
+            {record.ro_number || t("general.labels.na")}
+            {record.production_vars && record.production_vars.alert ? (
+              <ExclamationCircleFilled className="production-alert" />
+            ) : null}
+            {record.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
+            {record.iouparent && (
+              <Tooltip title={t("jobs.labels.iou")}>
+                <BranchesOutlined style={{ color: "orangered" }} />
+              </Tooltip>
+            )}
+          </Space>
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}>
+            <OwnerNameDisplay ownerObject={record} />
+          </Link>
+        ) : (
+          <span>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      }
+    },
+    {
+      title: t("dashboard.labels.phone"),
+      dataIndex: "ownr_ph",
+      key: "ownr_ph",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <Space size="small" wrap>
+          <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+
+          <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+        </Space>
+      )
+    },
+    {
+      title: t("jobs.fields.ownr_ea"),
+      dataIndex: "ownr_ea",
+      key: "ownr_ea",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => <a href={`mailto:${record.ownr_ea}`}>{record.ownr_ea}</a>
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${a.v_model_desc || ""}`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder: state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link to={"/manage/vehicles/" + record.vehicleid} onClick={(e) => e.stopPropagation()}>
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}
+          </Link>
+        ) : (
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.ins_co_nm"),
+      dataIndex: "ins_co_nm",
+      key: "ins_co_nm",
+      ellipsis: true,
+      responsive: ["md"],
+      sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
+      sortOrder: state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
+      filters:
+        (scheduledDeliveryToday &&
+          scheduledDeliveryToday
+            .map((j) => j.ins_co_nm)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || t("dashboard.errors.insco"),
+                value: [s]
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.ins_co_nm)
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder: state.sortedInfo.columnKey === "alt_transport" && state.sortedInfo.order,
+      filters:
+        (scheduledDeliveryToday &&
+          scheduledDeliveryToday
+            .map((j) => j.alt_transport)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || t("dashboard.errors.atp"),
+                value: [s]
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.alt_transport)
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  return (
+    <Card
+      title={t("dashboard.titles.scheduleddeliverydate", {
+        date: dayjs().startOf("day").format("MM/DD/YYYY")
+      })}
+      extra={
+        <Space>
+          <Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
+          <Switch
+            onClick={() => setIsTvModeScheduledDelivery(!isTvModeScheduledDelivery)}
+            defaultChecked={isTvModeScheduledDelivery}
+          />
+        </Space>
+      }
+      {...cardProps}
+    >
+      <div style={{ height: "100%" }}>
+        <Table
+          onChange={handleTableChange}
+          pagination={false}
+          columns={isTvModeScheduledDelivery ? tvColumns : columns}
+          scroll={{ x: true, y: "calc(100% - 2em)" }}
+          rowKey="id"
+          style={{ height: "85%" }}
+          dataSource={scheduledDeliveryToday}
+          size={isTvModeScheduledDelivery ? "small" : "middle"}
+        />
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardScheduledDeliveryTodayGql = `
+  scheduled_delivery_today: jobs(where: {
+    date_invoiced: {_is_null: true}, 
+    ro_number: {_is_null: false}, 
+    voided: {_eq: false}, 
+    scheduled_delivery: {_gte: "${dayjs().startOf("day").toISOString()}", 
+    _lte: "${dayjs().endOf("day").toISOString()}"}}) {
+      alt_transport
+      clm_no
+      jobid: id
+      joblines(where: {removed: {_eq: false}}) {
+        mod_lb_hrs
+        mod_lbr_ty
+      }
+      ins_co_nm
+      iouparent
+      ownerid
+      ownr_co_nm
+      ownr_ea
+      ownr_fn
+      ownr_ln
+      ownr_ph1
+      ownr_ph2
+      production_vars
+      ro_number
+      scheduled_delivery
+      status
+      suspended
+      v_make_desc
+      v_model_desc
+      v_model_yr
+      v_vin
+      vehicleid
+  }
+`;

client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx

@@ -1,11 +1,11 @@
 import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons";
 import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
-import dayjs from "../../../utils/day";
+import { useState } from "react";
-import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { TimeFormatter } from "../../../utils/DateFormatter";
 import { onlyUnique } from "../../../utils/arrayHelper";
+import dayjs from "../../../utils/day";
 import { alphaSort, dateSort } from "../../../utils/sorters";
 import useLocalStorage from "../../../utils/useLocalStorage";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
@@ -169,7 +169,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Alt. Transport",
+                text: s || t("dashboard.errors.atp"),
                 value: [s]
               };
             })
@@ -313,7 +313,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Ins. Co.*",
+                text: s || t("dashboard.errors.insco"),
                 value: [s]
               };
             })
@@ -335,7 +335,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Alt. Transport",
+                text: s || t("dashboard.errors.atp"),
                 value: [s]
               };
             })

client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx

@@ -1,11 +1,11 @@
 import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons";
 import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
-import dayjs from "../../../utils/day";
+import { useState } from "react";
-import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { TimeFormatter } from "../../../utils/DateFormatter";
 import { onlyUnique } from "../../../utils/arrayHelper";
+import dayjs from "../../../utils/day";
 import { alphaSort, dateSort } from "../../../utils/sorters";
 import useLocalStorage from "../../../utils/useLocalStorage";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
@@ -138,7 +138,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Alt. Transport*",
+                text: s || t("dashboard.errors.atp"),
                 value: [s]
               };
             })
@@ -154,7 +154,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       dataIndex: "status",
       key: "status",
       ellipsis: true,
-      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       filters:
         (scheduledOutToday &&
@@ -163,7 +163,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Status*",
+                text: s || t("dashboard.errors.status"),
                 value: [s]
               };
             })
@@ -306,7 +306,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Ins. Co.*",
+                text: s || t("dashboard.errors.insco"),
                 value: [s]
               };
             })
@@ -328,7 +328,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Alt. Transport*",
+                text: s || t("dashboard.errors.atp"),
                 value: [s]
               };
             })

client/src/components/dashboard-grid/componentList.js

@@ -1,30 +1,33 @@
 import i18next from "i18next";
-import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component.jsx";
+import JobLifecycleDashboardComponent, {
-import {
+  JobLifecycleDashboardGQL
-  DashboardTotalProductionHours,
+} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx";
-  DashboardTotalProductionHoursGql
-} from "../dashboard-components/total-production-hours/total-production-hours.component.jsx";
-import DashboardProjectedMonthlySales, {
-  DashboardProjectedMonthlySalesGql
-} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx";
-import DashboardMonthlyRevenueGraph, {
-  DashboardMonthlyRevenueGraphGql
-} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx";
-import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx";
-import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx";
-import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx";
 import DashboardMonthlyEmployeeEfficiency, {
   DashboardMonthlyEmployeeEfficiencyGql
 } from "../dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx";
+import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx";
+import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx";
+import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx";
+import DashboardMonthlyRevenueGraph, {
+  DashboardMonthlyRevenueGraphGql
+} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx";
+import DashboardProjectedMonthlySales, {
+  DashboardProjectedMonthlySalesGql
+} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx";
+import DashboardScheduledDeliveryToday, {
+  DashboardScheduledDeliveryTodayGql
+} from "../dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx";
 import DashboardScheduledInToday, {
   DashboardScheduledInTodayGql
 } from "../dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx";
 import DashboardScheduledOutToday, {
   DashboardScheduledOutTodayGql
 } from "../dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx";
-import JobLifecycleDashboardComponent, {
+import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component.jsx";
-  JobLifecycleDashboardGQL
+import {
-} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx";
+  DashboardTotalProductionHours,
+  DashboardTotalProductionHoursGql
+} from "../dashboard-components/total-production-hours/total-production-hours.component.jsx";
 
 const componentList = {
   ProductionDollars: {
@@ -118,6 +121,15 @@ const componentList = {
     w: 10,
     h: 3
   },
+  ScheduleDeliveryToday: {
+    label: i18next.t("dashboard.titles.scheduleddeliverytoday"),
+    component: DashboardScheduledDeliveryToday,
+    gqlFragment: DashboardScheduledDeliveryTodayGql,
+    minW: 6,
+    minH: 2,
+    w: 10,
+    h: 3
+  },
   JobLifecycle: {
     label: i18next.t("dashboard.titles.joblifecycle"),
     component: JobLifecycleDashboardComponent,

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

@@ -1,6 +1,6 @@
 import { DatePicker, Space, TimePicker } from "antd";
 import PropTypes from "prop-types";
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -94,7 +94,24 @@ const DateTimePicker = ({
             showTime={false}
             format="MM/DD/YYYY"
             value={value ? dayjs(value) : null}
-            onChange={handleChange}
+            onChange={(dateValue) => {
+              if (dateValue) {
+                // When date changes, preserve the existing time if it exists
+                if (value && dayjs(value).isValid()) {
+                  const existingTime = dayjs(value);
+                  const newDateTime = dayjs(dateValue)
+                    .hour(existingTime.hour())
+                    .minute(existingTime.minute())
+                    .second(existingTime.second());
+                  handleChange(newDateTime);
+                } else {
+                  // If no existing time, just set the date without time
+                  handleChange(dateValue);
+                }
+              } else {
+                handleChange(dateValue);
+              }
+            }}
             placeholder={t("general.labels.date")}
             onBlur={handleBlur}
             disabledDate={handleDisabledDate}
@@ -105,13 +122,25 @@ const DateTimePicker = ({
             <TimePicker
               format="hh:mm a"
               minuteStep={15}
+              value={value && dayjs(value).hour() === 0 && dayjs(value).minute() === 0 ? null : dayjs(value)}
               defaultOpenValue={dayjs(value)
                 .hour(dayjs().hour())
                 .minute(Math.floor(dayjs().minute() / 15) * 15)
                 .second(0)}
-              onChange={(value) => {
+              onChange={(timeValue) => {
-                handleChange(value);
+                if (timeValue) {
-                onBlur();
+                  // When time changes, combine it with the existing date
+                  const existingDate = dayjs(value);
+                  const newDateTime = existingDate
+                    .hour(timeValue.hour())
+                    .minute(timeValue.minute())
+                    .second(0);
+                  handleChange(newDateTime);
+                } else {
+                  // If time is cleared, just update with null time but keep date
+                  handleChange(timeValue);
+                }
+                if (onBlur) onBlur();
               }}
               placeholder={t("general.labels.time")}
               {...restProps}

client/src/components/header/buildAccountingChildren.jsx

@@ -0,0 +1,190 @@
+import { Link } from "react-router-dom";
+import { FaCreditCard, FaFileInvoiceDollar } from "react-icons/fa";
+import { GiPayMoney, GiPlayerTime } from "react-icons/gi";
+import { BankFilled, ExportOutlined, FieldTimeOutlined } from "@ant-design/icons";
+import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx";
+import { HasFeatureAccess } from "../../components/feature-wrapper/feature-wrapper.component";
+
+// --- Menu Item Builders ---
+const buildAccountingChildren = ({
+  t,
+  bodyshop,
+  currentUser,
+  setBillEnterContext,
+  setPaymentContext,
+  setCardPaymentContext,
+  setTimeTicketContext,
+  ImEXPay,
+  DmsAp,
+  Simple_Inventory
+}) => [
+  {
+    key: "bills",
+    id: "header-accounting-bills",
+    icon: <FaFileInvoiceDollar />,
+    label: (
+      <Link to="/manage/bills">
+        <LockWrapper featureName="bills" bodyshop={bodyshop}>
+          {t("menus.header.bills")}
+        </LockWrapper>
+      </Link>
+    )
+  },
+  {
+    key: "enterbills",
+    id: "header-accounting-enterbills",
+    icon: <GiPayMoney />,
+    label: (
+      <LockWrapper featureName="bills" bodyshop={bodyshop}>
+        {t("menus.header.enterbills")}
+      </LockWrapper>
+    ),
+    onClick: () =>
+      HasFeatureAccess({ featureName: "bills", bodyshop }) && setBillEnterContext({ actions: {}, context: {} })
+  },
+  ...(Simple_Inventory.treatment === "on"
+    ? [
+        { type: "divider" },
+        {
+          key: "inventory",
+          id: "header-accounting-inventory",
+          icon: <FaFileInvoiceDollar />,
+          label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
+        }
+      ]
+    : []),
+  { type: "divider" },
+  {
+    key: "allpayments",
+    id: "header-accounting-allpayments",
+    icon: <BankFilled />,
+    label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
+  },
+  {
+    key: "enterpayments",
+    id: "header-accounting-enterpayments",
+    icon: <FaCreditCard />,
+    label: t("menus.header.enterpayment"),
+    onClick: () => setPaymentContext({ actions: {}, context: null })
+  },
+  ...(ImEXPay.treatment === "on"
+    ? [
+        {
+          key: "entercardpayments",
+          id: "header-accounting-entercardpayments",
+          icon: <FaCreditCard />,
+          label: t("menus.header.entercardpayment"),
+          onClick: () => setCardPaymentContext({ actions: {}, context: {} })
+        }
+      ]
+    : []),
+  { type: "divider" },
+  {
+    key: "timetickets",
+    id: "header-accounting-timetickets",
+    icon: <FieldTimeOutlined />,
+    label: (
+      <Link to="/manage/timetickets">
+        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+          {t("menus.header.timetickets")}
+        </LockWrapper>
+      </Link>
+    )
+  },
+  ...(bodyshop?.md_tasks_presets?.use_approvals
+    ? [
+        {
+          key: "ttapprovals",
+          id: "header-accounting-ttapprovals",
+          icon: <FieldTimeOutlined />,
+          label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
+        }
+      ]
+    : []),
+  {
+    key: "entertimetickets",
+    id: "header-accounting-entertimetickets",
+    icon: <GiPlayerTime />,
+    label: (
+      <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+        {t("menus.header.entertimeticket")}
+      </LockWrapper>
+    ),
+    onClick: () =>
+      HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
+      setTimeTicketContext({
+        actions: {},
+        context: {
+          created_by: currentUser.displayName ? `${currentUser.email} | ${currentUser.displayName}` : currentUser.email
+        }
+      })
+  },
+  { type: "divider" },
+  {
+    key: "accountingexport",
+    id: "header-accounting-export",
+    icon: <ExportOutlined />,
+    label: (
+      <LockWrapper featureName="export" bodyshop={bodyshop}>
+        {t("menus.header.export")}
+      </LockWrapper>
+    ),
+    children: [
+      {
+        key: "receivables",
+        id: "header-accounting-receivables",
+        label: (
+          <Link to="/manage/accounting/receivables">
+            <LockWrapper featureName="export" bodyshop={bodyshop}>
+              {t("menus.header.accounting-receivables")}
+            </LockWrapper>
+          </Link>
+        )
+      },
+      ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on"
+        ? [
+            {
+              key: "payables",
+              id: "header-accounting-payables",
+              label: (
+                <Link to="/manage/accounting/payables">
+                  <LockWrapper featureName="export" bodyshop={bodyshop}>
+                    {t("menus.header.accounting-payables")}
+                  </LockWrapper>
+                </Link>
+              )
+            }
+          ]
+        : []),
+      ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))
+        ? [
+            {
+              key: "payments",
+              id: "header-accounting-payments",
+              label: (
+                <Link to="/manage/accounting/payments">
+                  <LockWrapper featureName="export" bodyshop={bodyshop}>
+                    {t("menus.header.accounting-payments")}
+                  </LockWrapper>
+                </Link>
+              )
+            }
+          ]
+        : []),
+      { type: "divider" },
+      {
+        key: "exportlogs",
+        id: "header-accounting-exportlogs",
+        label: (
+          <Link to="/manage/accounting/exportlogs">
+            <LockWrapper featureName="export" bodyshop={bodyshop}>
+              {t("menus.header.export-logs")}
+            </LockWrapper>
+          </Link>
+        )
+      }
+    ]
+  }
+];
+
+export default buildAccountingChildren;

client/src/components/header/buildLeftMenuItems.jsx

@@ -0,0 +1,390 @@
+import { Link } from "react-router-dom";
+import {
+  BarChartOutlined,
+  CarFilled,
+  CheckCircleOutlined,
+  ClockCircleFilled,
+  DashboardFilled,
+  DollarCircleFilled,
+  FileAddFilled,
+  FileAddOutlined,
+  FileFilled,
+  HomeFilled,
+  ImportOutlined,
+  LineChartOutlined,
+  OneToOneOutlined,
+  PaperClipOutlined,
+  PhoneOutlined,
+  PlusCircleOutlined,
+  QuestionCircleFilled,
+  ScheduleOutlined,
+  SettingOutlined,
+  TeamOutlined,
+  ToolFilled,
+  UnorderedListOutlined,
+  UsergroupAddOutlined,
+  UserOutlined
+} from "@ant-design/icons";
+import { FaCalendarAlt, FaCarCrash, FaTasks } from "react-icons/fa";
+import { BsKanban } from "react-icons/bs";
+import { FiLogOut } from "react-icons/fi";
+import { GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
+import { RiSurveyLine } from "react-icons/ri";
+import { IoBusinessOutline } from "react-icons/io5";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx";
+
+const buildLeftMenuItems = ({
+  t,
+  bodyshop,
+  recentItems,
+  setTaskUpsertContext,
+  setReportCenterContext,
+  signOutStart,
+  accountingChildren
+}) => {
+  return [
+    {
+      key: "home",
+      id: "header-home",
+      icon: <HomeFilled />,
+      label: <Link to="/manage/">{t("menus.header.home")}</Link>
+    },
+    {
+      key: "schedule",
+      id: "header-schedule",
+      icon: <FaCalendarAlt />,
+      label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
+    },
+    {
+      key: "jobssubmenu",
+      id: "header-jobs",
+      icon: <FaCarCrash />,
+      label: t("menus.header.jobs"),
+      children: [
+        {
+          key: "activejobs",
+          id: "header-active-jobs",
+          icon: <FileFilled />,
+          label: <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
+        },
+        {
+          key: "readyjobs",
+          id: "header-ready-jobs",
+          icon: <CheckCircleOutlined />,
+          label: <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
+        },
+        {
+          key: "parts-queue",
+          id: "header-parts-queue",
+          icon: <ToolFilled />,
+          label: <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
+        },
+        {
+          key: "availablejobs",
+          id: "header-jobs-available",
+          icon: <ImportOutlined />,
+          label: <Link to="/manage/available">{t("menus.header.availablejobs")}</Link>
+        },
+        {
+          key: "newjob",
+          id: "header-new-job",
+          icon: <FileAddOutlined />,
+          label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
+        },
+        { type: "divider" },
+        {
+          key: "alljobs",
+          id: "header-all-jobs",
+          icon: <UnorderedListOutlined />,
+          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
+        },
+        { type: "divider" },
+        {
+          key: "productionlist",
+          id: "header-production-list",
+          icon: <ScheduleOutlined />,
+          label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
+        },
+        {
+          key: "productionboard",
+          id: "header-production-board",
+          icon: <BsKanban />,
+          label: (
+            <Link to="/manage/production/board">
+              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
+                {t("menus.header.productionboard")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        { type: "divider" },
+        {
+          key: "scoreboard",
+          id: "header-scoreboard",
+          icon: <LineChartOutlined />,
+          label: (
+            <Link to="/manage/scoreboard">
+              <LockWrapper featureName="scoreboard" bodyshop={bodyshop}>
+                {t("menus.header.scoreboard")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },
+    {
+      key: "customers",
+      id: "header-customers",
+      icon: <UserOutlined />,
+      label: t("menus.header.customers"),
+      children: [
+        {
+          key: "owners",
+          id: "header-owners",
+          icon: <TeamOutlined />,
+          label: <Link to="/manage/owners">{t("menus.header.owners")}</Link>
+        },
+        {
+          key: "vehicles",
+          id: "header-vehicles",
+          icon: <CarFilled />,
+          label: <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
+        }
+      ]
+    },
+    {
+      key: "ccs",
+      id: "header-css",
+      icon: <CarFilled />,
+      label: (
+        <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+          {t("menus.header.courtesycars")}
+        </LockWrapper>
+      ),
+      children: [
+        {
+          key: "courtesycarsall",
+          id: "header-courtesycars-all",
+          icon: <CarFilled />,
+          label: (
+            <Link to="/manage/courtesycars">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-all")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "contracts",
+          id: "header-contracts",
+          icon: <FileFilled />,
+          label: (
+            <Link to="/manage/courtesycars/contracts">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-contracts")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "newcontract",
+          id: "header-newcontract",
+          icon: <FileAddFilled />,
+          label: (
+            <Link to="/manage/courtesycars/contracts/new">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-newcontract")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },
+    ...(accountingChildren.length > 0
+      ? [
+          {
+            key: "accounting",
+            id: "header-accounting",
+            icon: <DollarCircleFilled />,
+            label: t("menus.header.accounting"),
+            children: accountingChildren
+          }
+        ]
+      : []),
+    {
+      key: "phonebook",
+      id: "header-phonebook",
+      icon: <PhoneOutlined />,
+      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
+    },
+    {
+      key: "temporarydocs",
+      id: "header-temporarydocs",
+      icon: <PaperClipOutlined />,
+      label: (
+        <Link to="/manage/temporarydocs">
+          <LockWrapper featureName="media" bodyshop={bodyshop}>
+            {t("menus.header.temporarydocs")}
+          </LockWrapper>
+        </Link>
+      )
+    },
+    {
+      key: "tasks",
+      id: "tasks",
+      icon: <FaTasks />,
+      label: t("menus.header.tasks"),
+      children: [
+        {
+          key: "createTask",
+          id: "header-create-task",
+          icon: <PlusCircleOutlined />,
+          label: t("menus.header.create_task"),
+          onClick: () => setTaskUpsertContext({ actions: {}, context: {} })
+        },
+        {
+          key: "mytasks",
+          id: "header-my-tasks",
+          icon: <FaTasks />,
+          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
+        },
+        {
+          key: "all_tasks",
+          id: "header-all-tasks",
+          icon: <FaTasks />,
+          label: <Link to="/manage/tasks/alltasks">{t("menus.header.all_tasks")}</Link>
+        }
+      ]
+    },
+    {
+      key: "shopsubmenu",
+      id: "header-shopsubmenu",
+      icon: <SettingOutlined />,
+      label: t("menus.header.shop"),
+      children: [
+        {
+          key: "shop",
+          id: "header-shop",
+          icon: <GiSettingsKnobs />,
+          label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
+        },
+        {
+          key: "dashboard",
+          id: "header-dashboard",
+          icon: <DashboardFilled />,
+          label: (
+            <Link to="/manage/dashboard">
+              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "reportcenter",
+          id: "header-reportcenter",
+          icon: <BarChartOutlined />,
+          label: t("menus.header.reportcenter"),
+          onClick: () => setReportCenterContext({ actions: {}, context: {} })
+        },
+        {
+          key: "shop-vendors",
+          id: "header-shop-vendors",
+          icon: <IoBusinessOutline />,
+          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
+        },
+        {
+          key: "shop-csi",
+          id: "header-shop-csi",
+          icon: <RiSurveyLine />,
+          label: (
+            <Link to="/manage/shop/csi">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.shop_csi")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },
+    {
+      key: "recent",
+      id: "header-recent",
+      icon: <ClockCircleFilled />,
+      label: t("menus.header.recent"),
+      children: recentItems.map((i, idx) => ({
+        key: idx,
+        id: `header-recent-${idx}`,
+        label: <Link to={i.url}>{i.label}</Link>
+      }))
+    },
+    {
+      key: "user",
+      id: "header-user",
+      icon: <UserOutlined />,
+      label: t("menus.currentuser.profile"),
+      children: [
+        {
+          key: "signout",
+          id: "header-signout",
+          icon: <FiLogOut />,
+          danger: true,
+          label: t("user.actions.signout"),
+          onClick: () => signOutStart()
+        },
+        {
+          key: "help",
+          id: "header-help",
+          icon: <QuestionCircleFilled />,
+          label: t("menus.header.help"),
+          onClick: () => window.open("https://help.imex.online/", "_blank")
+        },
+        {
+          key: "remoteassist",
+          id: "header-remote-assist",
+          icon: <OneToOneOutlined />,
+          label: t("menus.header.remoteassist"),
+          children: [
+            ...(InstanceRenderManager({ imex: true, rome: false })
+              ? [
+                  {
+                    key: "rescue",
+                    id: "header-rescue",
+                    icon: <PlusCircleOutlined />,
+                    label: t("menus.header.rescueme"),
+                    onClick: () => window.open("https://imexrescue.com/", "_blank")
+                  }
+                ]
+              : []),
+            {
+              key: "rescue-zoho",
+              id: "header-rescue-zoho",
+              icon: <UsergroupAddOutlined />,
+              label: t("menus.header.rescuemezoho"),
+              onClick: () => window.open("https://join.zoho.com/", "_blank")
+            }
+          ]
+        },
+        {
+          key: "shiftclock",
+          id: "header-shiftclock",
+          icon: <GiPlayerTime />,
+          label: (
+            <Link to="/manage/shiftclock">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.shiftclock")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "profile",
+          id: "header-profile",
+          icon: <UserOutlined />,
+          label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
+        }
+      ]
+    }
+  ];
+};
+
+export default buildLeftMenuItems;

client/src/components/header/header.component.jsx

@@ -1,61 +1,29 @@
-import {
+// noinspection RegExpAnonymousGroup
-  BankFilled,
+
-  BarChartOutlined,
+import { BellFilled } from "@ant-design/icons";
-  BellFilled,
-  CarFilled,
-  CheckCircleOutlined,
-  ClockCircleFilled,
-  DashboardFilled,
-  DollarCircleFilled,
-  ExportOutlined,
-  FieldTimeOutlined,
-  FileAddFilled,
-  FileAddOutlined,
-  FileFilled,
-  HomeFilled,
-  ImportOutlined,
-  LineChartOutlined,
-  OneToOneOutlined,
-  PaperClipOutlined,
-  PhoneOutlined,
-  PlusCircleOutlined,
-  QuestionCircleFilled,
-  ScheduleOutlined,
-  SettingOutlined,
-  TeamOutlined,
-  ToolFilled,
-  UnorderedListOutlined,
-  UsergroupAddOutlined,
-  UserOutlined
-} from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Badge, Layout, Menu, Spin } from "antd";
+import { Badge, Layout, Menu, Spin, Tooltip } from "antd";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { BsKanban } from "react-icons/bs";
+import { FaTasks } from "react-icons/fa";
-import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
-import { FiLogOut } from "react-icons/fi";
-import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
-import { IoBusinessOutline } from "react-icons/io5";
-import { RiSurveyLine } from "react-icons/ri";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import { TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
+import { QUERY_MY_TASKS_COUNT } from "../../graphql/tasks.queries.js";
 import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import day from "../../utils/day.js";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import LockWrapper from "../lock-wrapper/lock-wrapper.component";
 import NotificationCenterContainer from "../notification-center/notification-center.container.jsx";
+import TaskCenterContainer from "../task-center/task-center.container.jsx";
+import buildAccountingChildren from "./buildAccountingChildren.jsx";
+import buildLeftMenuItems from "./buildLeftMenuItems.jsx";
 
-// Redux mappings
+// --- Redux mappings ---
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   recentItems: selectRecentItems,
@@ -73,36 +41,8 @@ const mapDispatchToProps = (dispatch) => ({
   setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
-function Header({
+// --- Utility Hooks ---
-  handleMenuClick,
+function useUnreadNotifications(userAssociationId, isConnected, scenarioNotificationsOn) {
-  currentUser,
-  bodyshop,
-  selectedHeader,
-  signOutStart,
-  setBillEnterContext,
-  setTimeTicketContext,
-  setPaymentContext,
-  setReportCenterContext,
-  recentItems,
-  setCardPaymentContext,
-  setTaskUpsertContext
-}) {
-  const {
-    treatments: { ImEXPay, DmsAp, Simple_Inventory }
-  } = useSplitTreatments({
-    attributes: {},
-    names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
-    splitKey: bodyshop && bodyshop.imexshopid
-  });
-
-  const { t } = useTranslation();
-  const { isConnected, scenarioNotificationsOn } = useSocket();
-  const [notificationVisible, setNotificationVisible] = useState(false);
-  const baseTitleRef = useRef(document.title || "");
-  const lastSetTitleRef = useRef("");
-  const userAssociationId = bodyshop?.associations?.[0]?.id;
-  const isEmployee = useIsEmployee(bodyshop, currentUser);
-
   const {
     data: unreadData,
     refetch: refetchUnread,
@@ -128,633 +68,286 @@ function Header({
     }
   }, [isConnected, unreadLoading, refetchUnread, userAssociationId]);
 
-  // Keep The unread count in the title.
+  return { unreadCount, unreadLoading };
+}
+
+function useIncompleteTaskCount(assignedToId, bodyshopId, isEmployee, isConnected) {
+  const { data: taskCountData, loading: taskCountLoading } = useQuery(QUERY_MY_TASKS_COUNT, {
+    variables: { assigned_to: assignedToId, bodyshopid: bodyshopId },
+    skip: !assignedToId || !bodyshopId || !isEmployee,
+    fetchPolicy: "network-only",
+    pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL
+  });
+
+  const incompleteTaskCount = taskCountData?.tasks_aggregate?.aggregate?.count ?? 0;
+  return { incompleteTaskCount, taskCountLoading };
+}
+
+// --- Main Component ---
+function Header(props) {
+  const {
+    handleMenuClick,
+    currentUser,
+    bodyshop,
+    selectedHeader,
+    signOutStart,
+    setBillEnterContext,
+    setTimeTicketContext,
+    setPaymentContext,
+    setReportCenterContext,
+    recentItems,
+    setCardPaymentContext,
+    setTaskUpsertContext
+  } = props;
+
+  // Feature flags
+  const {
+    treatments: { ImEXPay, DmsAp, Simple_Inventory }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
+
+  // Contexts and hooks
+  const { t } = useTranslation();
+  const { isConnected, scenarioNotificationsOn } = useSocket();
+  const [notificationVisible, setNotificationVisible] = useState(false);
+  const [taskCenterVisible, setTaskCenterVisible] = useState(false);
+  const baseTitleRef = useRef(document.title || "");
+  const lastSetTitleRef = useRef("");
+  const taskCenterRef = useRef(null);
+  const notificationRef = useRef(null);
+  const userAssociationId = bodyshop?.associations?.[0]?.id;
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
+
+  // Data hooks
+  const { unreadCount, unreadLoading } = useUnreadNotifications(
+    userAssociationId,
+    isConnected,
+    scenarioNotificationsOn
+  );
+  const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id;
+  const { incompleteTaskCount, taskCountLoading } = useIncompleteTaskCount(
+    assignedToId,
+    bodyshop?.id,
+    isEmployee,
+    isConnected
+  );
+
+  // --- Effects ---
+
+  // Update document title with unread count
   useEffect(() => {
     const updateTitle = () => {
       const currentTitle = document.title;
-      // Check if the current title differs from what we last set
       if (currentTitle !== lastSetTitleRef.current) {
-        // Extract base title by removing any unread count prefix
         const baseTitleMatch = currentTitle.match(/^\(\d+\)\s*(.*)$/);
         baseTitleRef.current = baseTitleMatch ? baseTitleMatch[1] : currentTitle;
       }
-
-      // Apply unread count to the base title
       const newTitle = unreadCount > 0 ? `(${unreadCount}) ${baseTitleRef.current}` : baseTitleRef.current;
-
-      // Only update if the title has changed to avoid unnecessary DOM writes
       if (document.title !== newTitle) {
         document.title = newTitle;
-        lastSetTitleRef.current = newTitle; // Store what we set
+        lastSetTitleRef.current = newTitle;
+      }
+    };
+    updateTitle();
+    const interval = setInterval(updateTitle, 100);
+    return () => {
+      clearInterval(interval);
+      document.title = baseTitleRef.current;
+    };
+  }, [unreadCount]);
+
+  // Handle outside clicks for popovers
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const isNotificationClick = event.target.closest("#header-notifications");
+      const isTaskCenterClick = event.target.closest("#header-taskcenter");
+
+      if (isNotificationClick && scenarioNotificationsOn) {
+        setTaskCenterVisible(false); // Close task center
+        return;
+      }
+
+      if (isTaskCenterClick) {
+        setNotificationVisible(scenarioNotificationsOn ? false : notificationVisible); // Close notification center if enabled
+        return;
+      }
+
+      if (taskCenterVisible && taskCenterRef.current && !taskCenterRef.current.contains(event.target)) {
+        setTaskCenterVisible(false);
+      }
+
+      if (
+        scenarioNotificationsOn &&
+        notificationVisible &&
+        notificationRef.current &&
+        !notificationRef.current.contains(event.target)
+      ) {
+        setNotificationVisible(false);
       }
     };
 
-    // Initial update
+    document.addEventListener("mousedown", handleClickOutside);
-    updateTitle();
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [taskCenterVisible, notificationVisible, scenarioNotificationsOn]);
 
-    // Poll every 100ms to catch child component changes
+  // --- Event Handlers ---
-    const interval = setInterval(updateTitle, 100);
+  const handleTaskCenterClick = useCallback(
+    (e) => {
+      setTaskCenterVisible((prev) => {
+        if (prev) return false;
+        return true;
+      });
+      if (handleMenuClick) handleMenuClick(e);
+    },
+    [handleMenuClick]
+  );
 
-    // Cleanup
+  const handleNotificationClick = useCallback(
-    return () => {
+    (e) => {
-      clearInterval(interval);
+      setNotificationVisible((prev) => {
-      document.title = baseTitleRef.current; // Reset to base title on unmount
+        if (prev) return false;
-    };
+        return true;
-  }, [unreadCount]); // Re-run when unreadCount changes
+      });
+      if (handleMenuClick) handleMenuClick(e);
+    },
+    [handleMenuClick]
+  );
 
-  const handleNotificationClick = (e) => {
+  // --- Menu Items ---
-    setNotificationVisible(!notificationVisible);
-    if (handleMenuClick) handleMenuClick(e);
-  };
 
-  const accountingChildren = [
+  // built externally to keep the component clean, but on this level to prevent unnecessary re-renders
-    {
+  const accountingChildren = useMemo(
-      key: "bills",
+    () =>
-      id: "header-accounting-bills",
+      buildAccountingChildren({
-      icon: <FaFileInvoiceDollar />,
+        t,
-      label: (
+        bodyshop,
-        <Link to="/manage/bills">
+        currentUser,
-          <LockWrapper featureName="bills" bodyshop={bodyshop}>
+        setBillEnterContext,
-            {t("menus.header.bills")}
+        setPaymentContext,
-          </LockWrapper>
+        setCardPaymentContext,
-        </Link>
+        setTimeTicketContext,
-      )
+        ImEXPay,
-    },
+        DmsAp,
-    {
+        Simple_Inventory
-      key: "enterbills",
+      }),
-      id: "header-accounting-enterbills",
+    [
-      icon: <GiPayMoney />,
+      t,
-      label: (
+      bodyshop,
-        <LockWrapper featureName="bills" bodyshop={bodyshop}>
+      currentUser,
-          {t("menus.header.enterbills")}
+      setBillEnterContext,
-        </LockWrapper>
+      setPaymentContext,
-      ),
+      setCardPaymentContext,
-      onClick: () =>
+      setTimeTicketContext,
-        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
+      ImEXPay,
-        setBillEnterContext({
+      DmsAp,
-          actions: {},
+      Simple_Inventory
-          context: {}
+    ]
-        })
+  );
-    },
+
-    ...(Simple_Inventory.treatment === "on"
+  // Built externally to keep the component clean
-      ? [
+  const leftMenuItems = useMemo(
-          { type: "divider" },
+    () =>
-          {
+      buildLeftMenuItems({
-            key: "inventory",
+        t,
-            id: "header-accounting-inventory",
+        bodyshop,
-            icon: <FaFileInvoiceDollar />,
+        recentItems,
-            label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
+        setTaskUpsertContext,
-          }
+        setReportCenterContext,
-        ]
+        signOutStart,
-      : []),
+        accountingChildren
-    { type: "divider" },
+      }),
-    {
+    [t, bodyshop, recentItems, setTaskUpsertContext, setReportCenterContext, signOutStart, accountingChildren]
-      key: "allpayments",
+  );
-      id: "header-accounting-allpayments",
+
-      icon: <BankFilled />,
+  const rightMenuItems = useMemo(() => {
-      label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
+    const items = [];
-    },
+    if (scenarioNotificationsOn) {
-    {
+      items.push({
-      key: "enterpayments",
+        key: "notifications",
-      id: "header-accounting-enterpayments",
+        id: "header-notifications",
-      icon: <FaCreditCard />,
+        icon: unreadLoading ? (
-      label: t("menus.header.enterpayment"),
+          <Spin size="small" />
-      onClick: () =>
+        ) : (
-        setPaymentContext({
+          <Badge offset={[8, 0]} size="small" count={isEmployee ? unreadCount : 0}>
-          actions: {},
+            <BellFilled />
-          context: null
+          </Badge>
-        })
+        ),
-    },
+        onClick: handleNotificationClick
-    ...(ImEXPay.treatment === "on"
+      });
-      ? [
-          {
-            key: "entercardpayments",
-            id: "header-accounting-entercardpayments",
-            icon: <FaCreditCard />,
-            label: t("menus.header.entercardpayment"),
-            onClick: () => setCardPaymentContext({ actions: {}, context: {} })
-          }
-        ]
-      : []),
-    { type: "divider" },
-    {
-      key: "timetickets",
-      id: "header-accounting-timetickets",
-      icon: <FieldTimeOutlined />,
-      label: (
-        <Link to="/manage/timetickets">
-          <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
-            {t("menus.header.timetickets")}
-          </LockWrapper>
-        </Link>
-      )
-    },
-    ...(bodyshop?.md_tasks_presets?.use_approvals
-      ? [
-          {
-            key: "ttapprovals",
-            id: "header-accounting-ttapprovals",
-            icon: <FieldTimeOutlined />,
-            label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
-          }
-        ]
-      : []),
-    {
-      key: "entertimetickets",
-      id: "header-accounting-entertimetickets",
-      icon: <GiPlayerTime />,
-      label: (
-        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
-          {t("menus.header.entertimeticket")}
-        </LockWrapper>
-      ),
-      onClick: () =>
-        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
-        setTimeTicketContext({
-          actions: {},
-          context: {
-            created_by: currentUser.displayName
-              ? `${currentUser.email} | ${currentUser.displayName}`
-              : currentUser.email
-          }
-        })
-    },
-    { type: "divider" },
-    {
-      key: "accountingexport",
-      id: "header-accounting-export",
-      icon: <ExportOutlined />,
-      label: (
-        <LockWrapper featureName="export" bodyshop={bodyshop}>
-          {t("menus.header.export")}
-        </LockWrapper>
-      ),
-      children: [
-        {
-          key: "receivables",
-          id: "header-accounting-receivables",
-          label: (
-            <Link to="/manage/accounting/receivables">
-              <LockWrapper featureName="export" bodyshop={bodyshop}>
-                {t("menus.header.accounting-receivables")}
-              </LockWrapper>
-            </Link>
-          )
-        },
-        ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) ||
-        DmsAp.treatment === "on"
-          ? [
-              {
-                key: "payables",
-                id: "header-accounting-payables",
-                label: (
-                  <Link to="/manage/accounting/payables">
-                    <LockWrapper featureName="export" bodyshop={bodyshop}>
-                      {t("menus.header.accounting-payables")}
-                    </LockWrapper>
-                  </Link>
-                )
-              }
-            ]
-          : []),
-        ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))
-          ? [
-              {
-                key: "payments",
-                id: "header-accounting-payments",
-                label: (
-                  <Link to="/manage/accounting/payments">
-                    <LockWrapper featureName="export" bodyshop={bodyshop}>
-                      {t("menus.header.accounting-payments")}
-                    </LockWrapper>
-                  </Link>
-                )
-              }
-            ]
-          : []),
-        { type: "divider" },
-        {
-          key: "exportlogs",
-          id: "header-accounting-exportlogs",
-          label: (
-            <Link to="/manage/accounting/exportlogs">
-              <LockWrapper featureName="export" bodyshop={bodyshop}>
-                {t("menus.header.export-logs")}
-              </LockWrapper>
-            </Link>
-          )
-        }
-      ]
     }
-  ];
+    items.push({
-
+      key: "taskcenter",
-  // Left menu items (includes original navigation items)
+      id: "header-taskcenter",
-  const leftMenuItems = [
+      icon: taskCountLoading ? (
-    {
+        <Spin size="small" />
-      key: "home",
+      ) : (
-      id: "header-home",
+        <Badge offset={[8, 0]} size="small" count={incompleteTaskCount > 0 ? incompleteTaskCount : 0} showZero={false}>
-      icon: <HomeFilled />,
+          <Tooltip title={t("menus.header.tasks")}>
-      label: <Link to="/manage/">{t("menus.header.home")}</Link>
+            <FaTasks />
-    },
+          </Tooltip>
-    {
+        </Badge>
-      key: "schedule",
-      id: "header-schedule",
-      icon: <FaCalendarAlt />,
-      label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
-    },
-    {
-      key: "jobssubmenu",
-      id: "header-jobs",
-      icon: <FaCarCrash />,
-      label: t("menus.header.jobs"),
-      children: [
-        {
-          key: "activejobs",
-          id: "header-active-jobs",
-          icon: <FileFilled />,
-          label: <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
-        },
-        {
-          key: "readyjobs",
-          id: "header-ready-jobs",
-          icon: <CheckCircleOutlined />,
-          label: <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
-        },
-        {
-          key: "parts-queue",
-          id: "header-parts-queue",
-          icon: <ToolFilled />,
-          label: <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
-        },
-        {
-          key: "availablejobs",
-          id: "header-jobs-available",
-          icon: <ImportOutlined />,
-          label: <Link to="/manage/available">{t("menus.header.availablejobs")}</Link>
-        },
-        {
-          key: "newjob",
-          id: "header-new-job",
-          icon: <FileAddOutlined />,
-          label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
-        },
-        { type: "divider" },
-        {
-          key: "alljobs",
-          id: "header-all-jobs",
-          icon: <UnorderedListOutlined />,
-          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
-        },
-        { type: "divider" },
-        {
-          key: "productionlist",
-          id: "header-production-list",
-          icon: <ScheduleOutlined />,
-          label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
-        },
-        {
-          key: "productionboard",
-          id: "header-production-board",
-          icon: <BsKanban />,
-          label: (
-            <Link to="/manage/production/board">
-              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
-                {t("menus.header.productionboard")}
-              </LockWrapper>
-            </Link>
-          )
-        },
-        { type: "divider" },
-        {
-          key: "scoreboard",
-          id: "header-scoreboard",
-          icon: <LineChartOutlined />,
-          label: (
-            <Link to="/manage/scoreboard">
-              <LockWrapper featureName="scoreboard" bodyshop={bodyshop}>
-                {t("menus.header.scoreboard")}
-              </LockWrapper>
-            </Link>
-          )
-        }
-      ]
-    },
-    {
-      key: "customers",
-      id: "header-customers",
-      icon: <UserOutlined />,
-      label: t("menus.header.customers"),
-      children: [
-        {
-          key: "owners",
-          id: "header-owners",
-          icon: <TeamOutlined />,
-          label: <Link to="/manage/owners">{t("menus.header.owners")}</Link>
-        },
-        {
-          key: "vehicles",
-          id: "header-vehicles",
-          icon: <CarFilled />,
-          label: <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
-        }
-      ]
-    },
-    {
-      key: "ccs",
-      id: "header-css",
-      icon: <CarFilled />,
-      label: (
-        <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
-          {t("menus.header.courtesycars")}
-        </LockWrapper>
       ),
-      children: [
+      onClick: handleTaskCenterClick
-        {
+    });
-          key: "courtesycarsall",
+    return items;
-          id: "header-courtesycars-all",
+  }, [
-          icon: <CarFilled />,
+    scenarioNotificationsOn,
-          label: (
+    unreadLoading,
-            <Link to="/manage/courtesycars">
+    unreadCount,
-              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+    taskCountLoading,
-                {t("menus.header.courtesycars-all")}
+    incompleteTaskCount,
-              </LockWrapper>
+    isEmployee,
-            </Link>
+    handleNotificationClick,
-          )
+    handleTaskCenterClick,
-        },
+    t
-        {
+  ]);
-          key: "contracts",
-          id: "header-contracts",
-          icon: <FileFilled />,
-          label: (
-            <Link to="/manage/courtesycars/contracts">
-              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
-                {t("menus.header.courtesycars-contracts")}
-              </LockWrapper>
-            </Link>
-          )
-        },
-        {
-          key: "newcontract",
-          id: "header-newcontract",
-          icon: <FileAddFilled />,
-          label: (
-            <Link to="/manage/courtesycars/contracts/new">
-              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
-                {t("menus.header.courtesycars-newcontract")}
-              </LockWrapper>
-            </Link>
-          )
-        }
-      ]
-    },
-    ...(accountingChildren.length > 0
-      ? [
-          {
-            key: "accounting",
-            id: "header-accounting",
-            icon: <DollarCircleFilled />,
-            label: t("menus.header.accounting"),
-            children: accountingChildren
-          }
-        ]
-      : []),
-    {
-      key: "phonebook",
-      id: "header-phonebook",
-      icon: <PhoneOutlined />,
-      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
-    },
-    {
-      key: "temporarydocs",
-      id: "header-temporarydocs",
-      icon: <PaperClipOutlined />,
-      label: (
-        <Link to="/manage/temporarydocs">
-          <LockWrapper featureName="media" bodyshop={bodyshop}>
-            {t("menus.header.temporarydocs")}
-          </LockWrapper>
-        </Link>
-      )
-    },
-    {
-      key: "tasks",
-      id: "tasks",
-      icon: <FaTasks />,
-      label: t("menus.header.tasks"),
-      children: [
-        {
-          key: "createTask",
-          id: "header-create-task",
-          icon: <PlusCircleOutlined />,
-          label: t("menus.header.create_task"),
-          onClick: () => setTaskUpsertContext({ actions: {}, context: {} })
-        },
-        {
-          key: "mytasks",
-          id: "header-my-tasks",
-          icon: <FaTasks />,
-          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
-        },
-        {
-          key: "all_tasks",
-          id: "header-all-tasks",
-          icon: <FaTasks />,
-          label: <Link to="/manage/tasks/alltasks">{t("menus.header.all_tasks")}</Link>
-        }
-      ]
-    },
-    {
-      key: "shopsubmenu",
-      id: "header-shopsubmenu",
-      icon: <SettingOutlined />,
-      label: t("menus.header.shop"),
-      children: [
-        {
-          key: "shop",
-          id: "header-shop",
-          icon: <GiSettingsKnobs />,
-          label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
-        },
-        {
-          key: "dashboard",
-          id: "header-dashboard",
-          icon: <DashboardFilled />,
-          label: (
-            <Link to="/manage/dashboard">
-              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
-            </Link>
-          )
-        },
-        {
-          key: "reportcenter",
-          id: "header-reportcenter",
-          icon: <BarChartOutlined />,
-          label: t("menus.header.reportcenter"),
-          onClick: () => setReportCenterContext({ actions: {}, context: {} })
-        },
-        {
-          key: "shop-vendors",
-          id: "header-shop-vendors",
-          icon: <IoBusinessOutline />,
-          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
-        },
-        {
-          key: "shop-csi",
-          id: "header-shop-csi",
-          icon: <RiSurveyLine />,
-          label: (
-            <Link to="/manage/shop/csi">
-              <LockWrapper featureName="export" bodyshop={bodyshop}>
-                {t("menus.header.shop_csi")}
-              </LockWrapper>
-            </Link>
-          )
-        }
-      ]
-    },
-    {
-      key: "recent",
-      id: "header-recent",
-      icon: <ClockCircleFilled />,
-      label: t("menus.header.recent"),
-      children: recentItems.map((i, idx) => ({
-        key: idx,
-        id: `header-recent-${idx}`,
-        label: <Link to={i.url}>{i.label}</Link>
-      }))
-    },
-    {
-      key: "user",
-      id: "header-user",
-      icon: <UserOutlined />,
-      label: t("menus.currentuser.profile"),
-      children: [
-        {
-          key: "signout",
-          id: "header-signout",
-          icon: <FiLogOut />,
-          danger: true,
-          label: t("user.actions.signout"),
-          onClick: () => signOutStart()
-        },
-        {
-          key: "help",
-          id: "header-help",
-          icon: <QuestionCircleFilled />,
-          label: t("menus.header.help"),
-          onClick: () => window.open("https://help.imex.online/", "_blank")
-        },
-        {
-          key: "remoteassist",
-          id: "header-remote-assist",
-          icon: <OneToOneOutlined />,
-          label: t("menus.header.remoteassist"),
-          children: [
-            ...(InstanceRenderManager({ imex: true, rome: false })
-              ? [
-                  {
-                    key: "rescue",
-                    id: "header-rescue",
-                    icon: <PlusCircleOutlined />,
-                    label: t("menus.header.rescueme"),
-                    onClick: () => window.open("https://imexrescue.com/", "_blank")
-                  }
-                ]
-              : []),
-            {
-              key: "rescue-zoho",
-              id: "header-rescue-zoho",
-              icon: <UsergroupAddOutlined />,
-              label: t("menus.header.rescuemezoho"),
-              onClick: () => window.open("https://join.zoho.com/", "_blank")
-            }
-          ]
-        },
-        {
-          key: "shiftclock",
-          id: "header-shiftclock",
-          icon: <GiPlayerTime />,
-          label: (
-            <Link to="/manage/shiftclock">
-              <LockWrapper featureName="export" bodyshop={bodyshop}>
-                {t("menus.header.shiftclock")}
-              </LockWrapper>
-            </Link>
-          )
-        },
-        {
-          key: "profile",
-          id: "header-profile",
-          icon: <UserOutlined />,
-          label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
-        }
-      ]
-    }
-  ];
-
-  // Notifications item (always on the right)
-  const notificationItem = scenarioNotificationsOn
-    ? [
-        {
-          key: "notifications",
-          id: "header-notifications",
-          icon: unreadLoading ? (
-            <Spin size="small" />
-          ) : (
-            <Badge offset={[8, 0]} size="small" count={isEmployee ? unreadCount : 0}>
-              <BellFilled />
-            </Badge>
-          ),
-          onClick: handleNotificationClick
-        }
-      ]
-    : [];
 
+  // --- Render ---
   return (
     <Layout.Header style={{ padding: 0, background: "#001529" }}>
-      <div
+      <div style={{ display: "flex", alignItems: "center", height: "100%", overflow: "hidden" }}>
-        style={{
+        <div style={{ flexGrow: 1, overflowX: "auto", whiteSpace: "nowrap" }}>
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          height: "100%",
-          overflow: "hidden"
-        }}
-      >
-        <Menu
-          mode="horizontal"
-          theme="dark"
-          selectedKeys={[selectedHeader]}
-          onClick={handleMenuClick}
-          subMenuCloseDelay={0.3}
-          items={leftMenuItems}
-          style={{
-            flex: "1 1 auto",
-            minWidth: 0,
-            overflowX: "auto",
-            borderBottom: "none",
-            background: "transparent"
-          }}
-        />
-        {scenarioNotificationsOn && (
           <Menu
             mode="horizontal"
             theme="dark"
             selectedKeys={[selectedHeader]}
             onClick={handleMenuClick}
             subMenuCloseDelay={0.3}
-            items={notificationItem}
+            items={leftMenuItems}
-            style={{ flex: "0 0 auto", minWidth: 0, borderBottom: "none", background: "transparent" }}
+            style={{ borderBottom: "none", background: "transparent", minWidth: "100%" }}
           />
-        )}
+        </div>
+        <div style={{ width: 120, flexShrink: 0 }}>
+          <Menu
+            mode="horizontal"
+            theme="dark"
+            selectedKeys={[selectedHeader]}
+            onClick={handleMenuClick}
+            subMenuCloseDelay={0.3}
+            items={rightMenuItems}
+            style={{ borderBottom: "none", background: "transparent", justifyContent: "flex-end" }}
+          />
+        </div>
       </div>
       {scenarioNotificationsOn && (
-        <NotificationCenterContainer
+        <div ref={notificationRef}>
-          visible={notificationVisible}
+          <NotificationCenterContainer
-          onClose={() => setNotificationVisible(false)}
+            visible={notificationVisible}
-          unreadCount={unreadCount}
+            onClose={() => setNotificationVisible(false)}
-        />
+            unreadCount={unreadCount}
+          />
+        </div>
       )}
+      <div ref={taskCenterRef}>
+        <TaskCenterContainer
+          incompleteTaskCount={incompleteTaskCount}
+          visible={taskCenterVisible}
+          onClose={() => setTaskCenterVisible(false)}
+        />
+      </div>
     </Layout.Header>
   );
 }

client/src/components/job-at-change/schedule-event.component.jsx

@@ -385,7 +385,9 @@ export function ScheduleEventComponent({
                   previousEvent: event.id,
                   color: event.color,
                   alt_transport: event.job && event.job.alt_transport,
-                  note: event.note
+                  note: event.note,
+                  scheduled_in: event.job && event.job.scheduled_in,
+                  scheduled_completion: event.job && event.job.scheduled_completion
                 }
               });
             }}

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

@@ -5,9 +5,9 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import dayjs from "../../utils/day";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import FormRow from "../layout-form-row/layout-form-row.component";
-import dayjs from "../../utils/day";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -43,14 +43,14 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
         </Form.Item>
         <Form.Item label={t("jobs.fields.estimate_sent_approval")} name="estimate_sent_approval">
           <DateTimePicker
-            disabled={true}
+            disabled={jobRO}
             value={job.estimate_sent_approval ? dayjs(job.estimate_sent_approval) : null}
             placeholder={t("general.labels.na")}
           />
         </Form.Item>
         <Form.Item label={t("jobs.fields.estimate_approved")} name="estimate_approved">
           <DateTimePicker
-            disabled={true}
+            disabled={jobRO}
             value={job.estimate_approved ? dayjs(job.estimate_approved) : null}
             placeholder={t("general.labels.na")}
           />
@@ -63,7 +63,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
         </Form.Item>
         <Tooltip title={t("jobs.labels.scheduledinchange")}>
           <Form.Item label={t("jobs.fields.scheduled_in")} name="scheduled_in">
-            <DateTimePicker disabled={true || jobRO} />
+            <DateTimePicker disabled={true} />
           </Form.Item>
         </Tooltip>
         <Form.Item label={t("jobs.fields.actual_in")} name="actual_in">
@@ -110,16 +110,16 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
       </FormRow>
       <FormRow header={t("jobs.forms.admindates")}>
         <Form.Item label={t("jobs.fields.date_invoiced")} name="date_invoiced">
-          <DateTimePicker disabled={true || jobRO} />
+          <DateTimePicker disabled={true} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.date_exported")} name="date_exported">
-          <DateTimePicker disabled={true || jobRO} />
+          <DateTimePicker disabled={true} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.date_void")} name="date_void">
-          <DateTimePicker disabled={true || jobRO} />
+          <DateTimePicker disabled={true} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.date_lost_sale")} name="date_lost_sale">
-          <DateTimePicker disabled={true || jobRO} />
+          <DateTimePicker disabled={true} />
         </Form.Item>
       </FormRow>
     </div>

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -673,7 +673,9 @@ export function JobsDetailHeaderActions({
           context: {
             jobId: job.id,
             job: job,
-            alt_transport: job.alt_transport
+            alt_transport: job.alt_transport,
+            scheduled_in: job.scheduled_in,
+            scheduled_completion: job.scheduled_completion
           }
         });
       }
@@ -1090,11 +1092,7 @@ export function JobsDetailHeaderActions({
             {t("menus.jobsactions.deletejob")}
           </Popconfirm>
         ) : (
-          <Popconfirm
+          <Popconfirm title={t("jobs.labels.deletewatchers")} onClick={(e) => e.stopPropagation()} showCancel={false}>
-            title={t("jobs.labels.deletewatchers")}
-            onClick={(e) => e.stopPropagation()}
-            showCancel={false}
-          >
             {t("menus.jobsactions.deletejob")}
           </Popconfirm>
         )

client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx

@@ -11,7 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -25,7 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyDownloadButton);
 
-export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, identifier, jobId }) {
+export function JobsDocumentsImgproxyDownloadButton({ galleryImages, identifier, jobId }) {
   const { t } = useTranslation();
   const [download, setDownload] = useState(null);
   const [loading, setLoading] = useState(false);

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -20,7 +20,7 @@ const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -203,6 +203,8 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
 
   return (
     <Card
+      id="all-jobs-list"
+      title={t("titles.bc.jobs-all")}
       extra={
         <Space wrap>
           {search.search && (
@@ -256,6 +258,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
         rowKey="id"
         dataSource={search?.search ? openSearchResults : jobs}
         onChange={handleTableChange}
+        id="all-jobs-list-table"
       />
     </Card>
   );

client/src/components/jobs-list/jobs-list.component.jsx

@@ -2,7 +2,7 @@ import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined, SyncOut
 import { useQuery } from "@apollo/client";
 import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
 import queryString from "query-string";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -22,7 +22,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});
 
 export function JobsList({ bodyshop }) {
   const searchParams = queryString.parse(useLocation().search);
@@ -342,13 +342,14 @@ export function JobsList({ bodyshop }) {
           type: "radio"
         }}
         onChange={handleTableChange}
-        onRow={(record, rowIndex) => {
+        onRow={(record) => {
           return {
-            onClick: (event) => {
+            onClick: () => {
               handleOnRowClick(record);
             }
           };
         }}
+        id="active-jobs-list-table"
       />
     </Card>
   );

client/src/components/notification-center/notification-center.component.jsx

@@ -131,4 +131,6 @@ const NotificationCenterComponent = forwardRef(
   }
 );
 
+NotificationCenterComponent.displayName = "NotificationCenterComponent";
+
 export default NotificationCenterComponent;

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx

@@ -1,9 +1,9 @@
 import Icon from "@ant-design/icons";
 import { Card, Popover, Space } from "antd";
-import _ from "lodash";
+import { groupBy } from "lodash";
 import dayjs from "../../utils/day";
 
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { MdFileDownload, MdFileUpload } from "react-icons/md";
 import { connect } from "react-redux";
@@ -26,21 +26,12 @@ const mapStateToProps = createStructuredSelector({
   calculating: selectScheduleLoadCalculating
 });
 
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});
 
-export function ScheduleCalendarHeaderComponent({
+export function ScheduleCalendarHeaderComponent({ bodyshop, label, refetch, date, load, calculating, events }) {
-  bodyshop,
-  label,
-  refetch,
-  date,
-  load,
-  calculating,
-  events,
-  ...otherProps
-}) {
   const ATSToday = useMemo(() => {
     if (!events) return [];
-    return _.groupBy(
+    return groupBy(
       events.filter((e) => !e.vacation && e.isintake && dayjs(date).isSame(dayjs(e.start), "day")),
       "job.alt_transport"
     );
@@ -155,7 +146,11 @@ export function ScheduleCalendarHeaderComponent({
           <Space size="small">
             <Icon component={MdFileDownload} style={{ color: "green" }} />
             <BlurWrapper featureName="smartscheduling">
-              <span>{`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}</span>
+              <span>
+                {`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${
+                  (loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)
+                }/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}
+              </span>
             </BlurWrapper>
           </Space>
         </Popover>

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form, Modal } from "antd";
-import dayjs from "../../utils/day";
+import { useEffect, useState } from "react";
-import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
   CANCEL_APPOINTMENT_BY_ID,
@@ -19,9 +19,9 @@ import { selectSchedule } from "../../redux/modals/modals.selectors";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormat } from "../../utils/DateFormatter";
+import dayjs from "../../utils/day";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ScheduleJobModalComponent from "./schedule-job-modal.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -72,7 +72,7 @@ export function ScheduleJobModalContainer({
     variables: { jobid: jobId },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: !open || !!!jobId
+    skip: !open || !jobId
   });
 
   useEffect(() => {
@@ -93,12 +93,12 @@ export function ScheduleJobModalContainer({
     logImEXEvent("schedule_new_appointment");
 
     setLoading(true);
-    if (!!previousEvent) {
+    if (previousEvent) {
       const cancelAppt = await cancelAppointment({
         variables: { appid: previousEvent }
       });
 
-      if (!!cancelAppt.errors) {
+      if (cancelAppt.errors) {
         notification["error"]({
           message: t("appointments.errors.canceling", {
             message: JSON.stringify(cancelAppt.errors)
@@ -146,7 +146,7 @@ export function ScheduleJobModalContainer({
       });
     }
 
-    if (!!appt.errors) {
+    if (appt.errors) {
       notification["error"]({
         message: t("appointments.errors.saving", {
           message: JSON.stringify(appt.errors)
@@ -172,7 +172,7 @@ export function ScheduleJobModalContainer({
         }
       });
 
-      if (!!jobUpdate.errors) {
+      if (jobUpdate.errors) {
         notification["error"]({
           message: t("appointments.errors.saving", {
             message: JSON.stringify(jobUpdate.errors)
@@ -222,9 +222,9 @@ export function ScheduleJobModalContainer({
         initialValues={{
           notifyCustomer: !!(job && job.ownr_ea),
           email: (job && job.ownr_ea) || "",
-          start: null,
           // smartDates: [],
-          scheduled_completion: null,
+          start: context.scheduled_in,
+          scheduled_completion: context.scheduled_completion ,
           color: context.color,
           alt_transport: context.alt_transport,
           note: context.note

client/src/components/scoreboard-chart/scoreboard-chart.component.jsx

@@ -1,8 +1,7 @@
 import { Card } from "antd";
 import Dinero from "dinero.js";
-import _ from "lodash";
+import { round } from "lodash";
 import dayjs from "../../utils/day";
-import React from "react";
 import { connect } from "react-redux";
 import {
   Area,
@@ -29,7 +28,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardChart);
@@ -40,7 +39,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
   const data = listOfBusDays.reduce((acc, val) => {
     //Sum up the current day.
     let dayhrs;
-    if (!!sbEntriesByDate[val]) {
+    if (sbEntriesByDate[val]) {
       dayhrs = sbEntriesByDate[val].reduce(
         (dayAcc, dayVal) => {
           return {
@@ -61,9 +60,9 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
 
     const theValue = {
       date: dayjs(val).format("D ddd"),
-      paintHrs: _.round(dayhrs.painthrs, 1),
+      paintHrs: round(dayhrs.painthrs, 1),
-      bodyHrs: _.round(dayhrs.bodyhrs, 1),
+      bodyHrs: round(dayhrs.bodyhrs, 1),
-      accTargetHrs: _.round(
+      accTargetHrs: round(
         Utils.AsOfDateTargetHours(
           bodyshop.scoreboard_target.dailyBodyTarget + bodyshop.scoreboard_target.dailyPaintTarget,
           val
@@ -72,14 +71,14 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
           bodyshop.scoreboard_target.dailyPaintTarget,
         1
       ),
-      accHrs: _.round(
+      accHrs: round(
         acc.length > 0
           ? acc[acc.length - 1].accHrs + dayhrs.painthrs + dayhrs.bodyhrs
           : dayhrs.painthrs + dayhrs.bodyhrs,
         1
       ),
-      sales: _.round(dayhrs.sales, 2),
+      sales: round(dayhrs.sales, 2),
-      accSales: _.round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2)
+      accSales: round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2)
     };
 
     return [...acc, theValue];

client/src/components/scoreboard-display/scoreboard-display.component.jsx

@@ -1,23 +1,25 @@
-import { Col, Row } from "antd";
+import { Col, Row, Spin } from "antd";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component";
 import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component";
 import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
-
 import { useApolloClient, useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { GET_BLOCKED_DAYS, QUERY_SCOREBOARD } from "../../graphql/scoreboard.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import dayjs from "../../utils/day";
+import {
+  clearHolidays,
+  clearWorkingWeekdays,
+  setHolidays,
+  setWorkingWeekdays
+} from "../scoreboard-targets-table/scoreboard-targets-table.util";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({});
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
 export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardDisplayComponent);
 
 export function ScoreboardDisplayComponent({ bodyshop }) {
@@ -32,7 +34,6 @@ export function ScoreboardDisplayComponent({ bodyshop }) {
   const { data } = scoreboardSubscription;
   const client = useApolloClient();
   const scoreBoardlist = data?.scoreboard || [];
-
   const sbEntriesByDate = {};
 
   scoreBoardlist.forEach((i) => {
@@ -43,35 +44,52 @@ export function ScoreboardDisplayComponent({ bodyshop }) {
     sbEntriesByDate[entryDate].push(i);
   });
 
-  useEffect(() => {
+  const [loading, setLoading] = useState(true); // Loading state
-    //Update the locals.
-    async function setDayJSSettings() {
-      let appointments;
 
-      if (!bodyshop.scoreboard_target.ignoreblockeddays) {
+  useEffect(() => {
-        const { data } = await client.query({
+    async function setDayJSSettings() {
-          query: GET_BLOCKED_DAYS,
+      try {
-          variables: {
+        let appointments;
-            start: dayjs().startOf("month"),
+
-            end: dayjs().endOf("month")
+        if (!bodyshop.scoreboard_target.ignoreblockeddays) {
-          }
+          const { data } = await client.query({
-        });
+            query: GET_BLOCKED_DAYS,
-        appointments = data.appointments;
+            variables: {
-      }
+              start: dayjs().startOf("month"),
-      dayjs.updateLocale(dayjs.locale(), {
+              end: dayjs().endOf("month")
-        workingWeekdays: translateSettingsToWorkingDays(bodyshop.workingdays),
-        ...(appointments?.length
-          ? {
-              holidays: appointments.map((h) => dayjs(h.start).format("MM-DD-YYYY"))
             }
-          : {}),
+          });
-        holidayFormat: "MM-DD-YYYY"
+          appointments = data.appointments;
-      });
+        }
+
+        const holidays = appointments ? appointments.map((h) => dayjs(h.start).format("MM-DD-YYYY")) : [];
+        const workingWeekdays = translateSettingsToWorkingDays(bodyshop.workingdays);
+
+        // Set holidays and working weekdays
+        setHolidays(holidays);
+        setWorkingWeekdays(workingWeekdays);
+      } finally {
+        setLoading(false); // Set loading to false after processing
+      }
     }
 
     setDayJSSettings();
+
+    // Cleanup on unmount
+    return () => {
+      clearHolidays();
+      clearWorkingWeekdays();
+    };
   }, [client, bodyshop]);
 
+  if (loading) {
+    return (
+      <Row justify="center" align="middle" style={{ minHeight: "100vh" }}>
+        <Spin size="large" />
+      </Row>
+    );
+  }
+
   return (
     <Row gutter={[16, 16]}>
       <Col span={24}>
@@ -89,27 +107,12 @@ export function ScoreboardDisplayComponent({ bodyshop }) {
 
 function translateSettingsToWorkingDays(workingdays) {
   const days = [];
-
+  if (workingdays.monday) days.push(1);
-  if (workingdays.monday) {
+  if (workingdays.tuesday) days.push(2);
-    days.push(1);
+  if (workingdays.wednesday) days.push(3);
-  }
+  if (workingdays.thursday) days.push(4);
-  if (workingdays.tuesday) {
+  if (workingdays.friday) days.push(5);
-    days.push(2);
+  if (workingdays.saturday) days.push(6);
-  }
+  if (workingdays.sunday) days.push(0);
-  if (workingdays.wednesday) {
-    days.push(3);
-  }
-  if (workingdays.thursday) {
-    days.push(4);
-  }
-  if (workingdays.friday) {
-    days.push(5);
-  }
-  if (workingdays.saturday) {
-    days.push(6);
-  }
-  if (workingdays.sunday) {
-    days.push(0);
-  }
   return days;
 }

client/src/components/scoreboard-last-days/scoreboard-last-days.component.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -10,7 +9,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -26,7 +25,7 @@ export function ScoreboardLastDays({ bodyshop, sbEntriesByDate }) {
     <Row>
       {ArrayOfDate.map((a) => (
         <Col span={2} key={a}>
-          {!!sbEntriesByDate ? <ScoreboardDayStat date={a} entries={sbEntriesByDate[a] || []} /> : <LoadingSkeleton />}
+          {sbEntriesByDate ? <ScoreboardDayStat date={a} entries={sbEntriesByDate[a] || []} /> : <LoadingSkeleton />}
         </Col>
       ))}
     </Row>

client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx

@@ -1,8 +1,8 @@
 import { CalendarOutlined } from "@ant-design/icons";
 import { Card, Col, Divider, Row, Statistic } from "antd";
-import _ from "lodash";
+import { groupBy } from "lodash";
 import dayjs from "../../utils/day";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -13,7 +13,7 @@ import * as Util from "./scoreboard-targets-table.util";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -24,7 +24,7 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
   const { t } = useTranslation();
 
   const values = useMemo(() => {
-    const dateHash = _.groupBy(scoreBoardlist, "date");
+    const dateHash = groupBy(scoreBoardlist, "date");
 
     let ret = {
       todayBody: 0,
@@ -213,4 +213,5 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
     </Card>
   );
 }
+
 export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardTargetsTable);

client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js

@@ -1,29 +1,172 @@
 import dayjs from "../../utils/day";
 
-export const CalculateWorkingDaysThisMonth = () => dayjs().endOf("month").businessDaysInMonth().length;
+const DEFAULT_WORKING_DAYS = [1, 2, 3, 4, 5]; // Default to Monday-Friday
 
-export const CalculateWorkingDaysInPeriod = (start, end) => dayjs(end).businessDiff(dayjs(start));
+// Module-level state for holidays and working weekdays
+let holidays = [];
+let workingWeekdays = DEFAULT_WORKING_DAYS;
 
-export const CalculateWorkingDaysAsOfToday = () => dayjs().endOf("day").businessDiff(dayjs().startOf("month"));
+/**
+ * Sets the holidays for the business logic.
+ * @param newHolidays
+ */
+export const setHolidays = (newHolidays = []) => {
+  holidays = newHolidays;
+};
 
-export const CalculateWorkingDaysLastMonth = () =>
+/**
-  dayjs().subtract(1, "month").endOf("month").businessDaysInMonth().length;
+ * Clears the holidays.
+ */
+export const clearHolidays = () => {
+  holidays = [];
+};
 
+/**
+ * Sets the working weekdays for the business logic.
+ * @param newWorkingWeekdays
+ */
+export const setWorkingWeekdays = (newWorkingWeekdays = DEFAULT_WORKING_DAYS) => {
+  workingWeekdays = newWorkingWeekdays;
+};
+
+/**
+ * Clears the working weekdays, resetting to default (Monday-Friday).
+ */
+export const clearWorkingWeekdays = () => {
+  workingWeekdays = DEFAULT_WORKING_DAYS; // Reset to default
+};
+
+/**
+ * Translates the bodyshop working days settings to an array of weekdays.
+ * @returns {*[]}
+ */
+export const getHolidays = () => {
+  return holidays;
+};
+
+/**
+ * Translates the working days settings from the bodyshop to an array of weekdays.
+ * @returns {number[]}
+ */
+export const getWorkingWeekdays = () => {
+  return workingWeekdays;
+};
+
+/**
+ * Calculates the number of working days in the current month, excluding holidays.
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysThisMonth = () => {
+  const businessDays = dayjs().businessDaysInMonth();
+  return businessDays.filter((day) => !holidays.includes(dayjs(day).format("MM-DD-YYYY"))).length;
+};
+
+/**
+ * Calculates the number of working days in a given period, excluding holidays.
+ * @param start
+ * @param end
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysInPeriod = (start, end) => {
+  let businessDays = dayjs(end).businessDiff(dayjs(start));
+  if (dayjs(end).isBusinessDay() && !holidays.includes(dayjs(end).format("MM-DD-YYYY"))) {
+    businessDays += 1;
+  }
+  return businessDays;
+};
+
+/**
+ * Calculates the number of working days as of today, excluding holidays.
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysAsOfToday = () => {
+  const today = dayjs().startOf("day");
+  let businessDays = today.businessDiff(dayjs().startOf("month"));
+  if (today.isBusinessDay() && !holidays.includes(today.format("MM-DD-YYYY"))) {
+    businessDays += 1;
+  }
+  return businessDays;
+};
+
+/**
+ * Calculates the number of working days in the last month, excluding holidays.
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysLastMonth = () => {
+  const businessDays = dayjs().subtract(1, "month").businessDaysInMonth();
+  return businessDays.filter((day) => !holidays.includes(dayjs(day).format("MM-DD-YYYY"))).length;
+};
+
+/**
+ * Calculates the weekly target hours based on daily target hours and the number of working days in the current week.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const WeeklyTargetHrs = (dailyTargetHrs) =>
   dailyTargetHrs * CalculateWorkingDaysInPeriod(dayjs().startOf("week"), dayjs().endOf("week"));
 
+/**
+ * Calculates the weekly target hours for a specific period.
+ * @param dailyTargetHrs
+ * @param start
+ * @param end
+ * @returns {number}
+ * @constructor
+ */
 export const WeeklyTargetHrsInPeriod = (dailyTargetHrs, start, end) =>
   dailyTargetHrs * CalculateWorkingDaysInPeriod(start, end);
 
+/**
+ * Calculates the monthly target hours based on daily target hours and the number of working days in the current month.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const MonthlyTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysThisMonth();
 
+/**
+ * Calculates the monthly target hours for the last month based on daily target hours and the number of working days
+ * in the last month.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const LastMonthTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysLastMonth();
 
+/**
+ * Calculates the target hours as of today based on daily target hours and the number of working days as of today.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const AsOfTodayTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysAsOfToday();
 
-export const AsOfDateTargetHours = (dailyTargetHours, date) =>
+/**
-  dailyTargetHours * dayjs(date).businessDiff(dayjs().startOf("month"));
+ * Calculates the target hours as of a specific date based on daily target hours and the number of business days up to
+ * that date.
+ * @param dailyTargetHours
+ * @param date
+ * @returns {number}
+ * @constructor
+ */
+export const AsOfDateTargetHours = (dailyTargetHours, date) => {
+  let businessDays = dayjs(date).businessDiff(dayjs().startOf("month"));
+  if (dayjs(date).isBusinessDay() && !holidays.includes(dayjs(date).format("MM-DD-YYYY"))) {
+    businessDays += 1;
+  }
+  return dailyTargetHours * businessDays;
+};
 
+/**
+ * Generates a list of all days in the current month.
+ * @returns {*[]}
+ * @constructor
+ */
 export const ListOfDaysInCurrentMonth = () => {
   const days = [];
   let dateStart = dayjs().startOf("month");
@@ -36,6 +179,13 @@ export const ListOfDaysInCurrentMonth = () => {
   return days;
 };
 
+/**
+ * Generates a list of all days between two dates.
+ * @param start
+ * @param end
+ * @returns {*[]}
+ * @constructor
+ */
 export const ListDaysBetween = ({ start, end }) => {
   const days = [];
   let dateStart = dayjs(start);

client/src/components/task-center/task-center.component.jsx

@@ -0,0 +1,156 @@
+import { Virtuoso } from "react-virtuoso";
+import { Badge, Button, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { forwardRef, useMemo, useRef } from "react";
+import day from "../../utils/day.js";
+import "./task-center.styles.scss";
+import {
+  ArrowRightOutlined,
+  CalendarOutlined,
+  ClockCircleOutlined,
+  PlusCircleOutlined,
+  QuestionCircleOutlined
+} from "@ant-design/icons";
+
+const TaskCenterComponent = forwardRef(
+  ({ visible, tasks, loading, error, onTaskClick, onLoadMore, hasMore, createNewTask, incompleteTaskCount }, ref) => {
+    const { t } = useTranslation();
+    const virtuosoRef = useRef(null);
+
+    const sectionIcons = {
+      [t("tasks.labels.overdue")]: <ClockCircleOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.due_today")]: <CalendarOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.upcoming")]: <ArrowRightOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.no_due_date")]: <QuestionCircleOutlined style={{ marginRight: 8 }} />
+    };
+
+    const groups = useMemo(() => {
+      const now = day();
+      const today = now.startOf("day");
+
+      const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
+      const dueToday = tasks.filter((t) => t.due_date && day(t.due_date).isSame(today, "day"));
+      const upcoming = tasks.filter(
+        (t) => t.due_date && day(t.due_date).isAfter(today) && !day(t.due_date).isSame(today, "day")
+      );
+      const noDueDate = tasks.filter((t) => !t.due_date);
+
+      return [
+        { label: t("tasks.labels.overdue"), tasks: overdue },
+        { label: t("tasks.labels.due_today"), tasks: dueToday },
+        { label: t("tasks.labels.upcoming"), tasks: upcoming },
+        { label: t("tasks.labels.no_due_date"), tasks: noDueDate }
+      ].filter((group) => group.tasks.length > 0);
+    }, [tasks, t]);
+
+    const groupCounts = useMemo(() => groups.map((group) => group.tasks.length), [groups]);
+
+    const flatTasks = useMemo(() => groups.flatMap((group) => group.tasks), [groups]);
+
+    const priorityColors = {
+      1: "red",
+      2: "orange",
+      3: "green"
+    };
+
+    const getPriorityColor = (priority) => priorityColors[priority] || null;
+
+    const groupContent = (groupIndex) => {
+      const { label, tasks } = groups[groupIndex];
+      let displayCount = tasks.length;
+      if (label === t("tasks.labels.no_due_date")) {
+        displayCount =
+          incompleteTaskCount -
+          groups.reduce((sum, group, idx) => (idx !== groupIndex ? sum + group.tasks.length : sum), 0);
+      }
+      return (
+        <div className="section-title">
+          {sectionIcons[label]}
+          {label} ({displayCount})
+        </div>
+      );
+    };
+
+    const itemContent = (index) => {
+      const task = flatTasks[index];
+      const priorityColor = getPriorityColor(task.priority);
+      return (
+        <div
+          className="task-row"
+          onClick={() => onTaskClick(task.id)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              onTaskClick(task.id);
+            }
+          }}
+        >
+          <div className="task-title-cell">
+            <div className="task-row-container">
+              <div className="task-title">{task.title}</div>
+              <div className="task-ro-number">
+                {t("tasks.labels.ro-number", {
+                  ro_number: task.job?.ro_number || t("general.labels.na")
+                })}
+              </div>
+            </div>
+          </div>
+          <div className="task-due-cell">
+            {task.due_date && <span>{day(task.due_date).fromNow()}</span>}
+            {!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
+          </div>
+        </div>
+      );
+    };
+
+    if (error) {
+      return (
+        <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
+          <div className="task-header">
+            <h3>{t("tasks.labels.my_tasks_center")}</h3>
+          </div>
+          <div className="error-message">{t("tasks.errors.load_failed")}</div>
+        </div>
+      );
+    }
+
+    return (
+      <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
+        <div className="task-header">
+          <Badge count={incompleteTaskCount} size="medium" offset={[13, -5]}>
+            <h3>{t("tasks.labels.my_tasks_center")}</h3>
+          </Badge>
+          <div className="task-header-actions">
+            <Button className="create-task-button" type="link" icon={<PlusCircleOutlined />} onClick={createNewTask} />
+            {loading && <Spin spinning={loading} size="small" />}
+          </div>
+        </div>
+
+        {tasks.length === 0 && !loading ? (
+          <div className="no-tasks-message">{t("tasks.labels.no_tasks")}</div>
+        ) : (
+          <Virtuoso
+            ref={virtuosoRef}
+            style={{ height: "550px", width: "100%" }}
+            groupCounts={groupCounts}
+            groupContent={groupContent}
+            itemContent={itemContent}
+            endReached={hasMore && !loading ? onLoadMore : undefined}
+            components={{
+              Footer: () =>
+                loading ? (
+                  <div className="loading-footer">
+                    <Spin />
+                  </div>
+                ) : null
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+TaskCenterComponent.displayName = "TaskCenterComponent";
+export default TaskCenterComponent;

client/src/components/task-center/task-center.container.jsx

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery } from "@apollo/client";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { INITIAL_TASKS, TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket";
+import { useIsEmployee } from "../../utils/useIsEmployee";
+import TaskCenterComponent from "./task-center.component";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { QUERY_TASKS_NO_DUE_DATE_PAGINATED, QUERY_TASKS_WITH_DUE_DATES } from "../../graphql/tasks.queries";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
+});
+
+const TaskCenterContainer = ({
+  visible,
+  onClose,
+  bodyshop,
+  currentUser,
+  setTaskUpsertContext,
+  incompleteTaskCount
+}) => {
+  const [tasks, setTasks] = useState([]);
+  const { isConnected } = useSocket();
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
+
+  const assignedToId = useMemo(() => {
+    const employee = bodyshop?.employees?.find((e) => e.user_email === currentUser?.email);
+    return employee?.id || null;
+  }, [bodyshop, currentUser]);
+
+  // Query 1: Tasks with due dates
+  const {
+    data: dueDateData,
+    loading: dueLoading,
+    error: dueError
+  } = useQuery(QUERY_TASKS_WITH_DUE_DATES, {
+    variables: {
+      bodyshop: bodyshop?.id,
+      assigned_to: assignedToId,
+      order: [{ due_date: "asc" }, { created_at: "desc" }]
+    },
+    skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
+    fetchPolicy: "cache-and-network",
+    pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL
+  });
+
+  // Query 2: Tasks with no due date (paginated)
+  const {
+    data: noDueDateData,
+    loading: noDueLoading,
+    error: noDueError,
+    fetchMore
+  } = useQuery(QUERY_TASKS_NO_DUE_DATE_PAGINATED, {
+    variables: {
+      bodyshop: bodyshop?.id,
+      assigned_to: assignedToId,
+      order: [{ priority: "asc" }, { created_at: "desc" }],
+      limit: INITIAL_TASKS, // Adjust this constant as needed
+      offset: 0
+    },
+    skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
+    fetchPolicy: "cache-and-network",
+    pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL
+  });
+
+  // Combine tasks from both queries
+  useEffect(() => {
+    const dueDateTasks = dueDateData?.tasks || [];
+    const noDueDateTasks = noDueDateData?.tasks || [];
+    setTasks([...dueDateTasks, ...noDueDateTasks]);
+  }, [dueDateData, noDueDateData]);
+
+  const noDueDateLength = noDueDateData?.tasks?.length || 0;
+  const totalNoDueDate = noDueDateData?.tasks_aggregate?.aggregate?.count || 0;
+  const hasMore = noDueDateLength < totalNoDueDate;
+
+  // Handle pagination for no-due-date tasks
+  const handleLoadMore = () => {
+    fetchMore({
+      variables: {
+        offset: noDueDateData?.tasks?.length || 0
+      },
+      updateQuery: (prev, { fetchMoreResult }) => {
+        if (!fetchMoreResult) return prev;
+        return {
+          ...prev,
+          tasks: [...prev.tasks, ...fetchMoreResult.tasks],
+          tasks_aggregate: fetchMoreResult.tasks_aggregate
+        };
+      }
+    });
+  };
+
+  const handleTaskClick = useCallback(
+    (id) => {
+      const task = tasks.find((t) => t.id === id);
+      if (task) {
+        setTaskUpsertContext({
+          context: {
+            existingTask: task
+          }
+        });
+      }
+    },
+    [tasks, setTaskUpsertContext]
+  );
+
+  const createNewTask = () => {
+    setTaskUpsertContext({ actions: {}, context: {} });
+  };
+
+  return (
+    <TaskCenterComponent
+      visible={visible}
+      onClose={onClose}
+      tasks={tasks}
+      loading={dueLoading || noDueLoading}
+      error={dueError || noDueError}
+      onTaskClick={handleTaskClick}
+      onLoadMore={handleLoadMore}
+      hasMore={hasMore}
+      createNewTask={createNewTask}
+      incompleteTaskCount={incompleteTaskCount}
+    />
+  );
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskCenterContainer);

client/src/components/task-center/task-center.styles.scss

@@ -0,0 +1,147 @@
+.task-center {
+  position: absolute;
+  top: 64px;
+  right: 0;
+  width: 500px;
+  max-width: 500px;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.85);
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
+  z-index: 1000;
+  display: none;
+  overflow-x: hidden;
+
+  &.visible {
+    display: block;
+  }
+
+  .task-header {
+    padding: 4px 10px;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #fafafa;
+
+    h3 {
+      font-size: 14px;
+      margin: 0;
+    }
+
+    .create-task-button {
+      border: none;
+      color: white;
+      padding: 4px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 500;
+
+      &:hover {
+        background-color: #40a9ff;
+      }
+    }
+  }
+
+  .task-section {
+    margin: 0;
+    padding: 0;
+  }
+
+  .section-title {
+    padding: 0px 10px;
+    margin: 0px;
+    //font-size: 12px;
+    background: #f5f5f5;
+    font-weight: 650;
+    border-bottom: 1px solid #e8e8e8;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .task-row-container {
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  .task-row {
+    cursor: pointer;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    &:hover {
+      background: #f5f5f5;
+    }
+
+    .task-title-cell {
+      flex: 1;
+      padding: 6px 8px;
+      vertical-align: top;
+      //font-size: 12px;
+      line-height: 1.2;
+      max-width: 350px; // or whatever fits your layout
+
+      .task-title {
+        font-size: 16px;
+        font-weight: 550;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%; // Or a specific width if you want more control
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      .task-ro-number {
+        margin-top: 20px;
+        color: #1677ff;
+      }
+    }
+
+    .task-due-cell {
+      padding: 6px 8px;
+      vertical-align: top;
+      //font-size: 12px;
+      line-height: 1.2;
+      text-align: right;
+      white-space: nowrap;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  button {
+    margin: 8px auto;
+    padding: 4px 10px;
+    background-color: #1677ff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    //font-size: 12px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #4096ff;
+    }
+
+    &:disabled {
+      background-color: #d9d9d9;
+      cursor: not-allowed;
+    }
+  }
+
+  .no-tasks-message,
+  .error-message {
+    padding: 16px;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.45);
+  }
+
+  .loading-footer {
+    padding: 16px;
+    text-align: center;
+  }
+}

client/src/components/task-list/task-list.component.jsx

@@ -4,13 +4,12 @@ import {
   DeleteFilled,
   DeleteOutlined,
   EditFilled,
-  ExclamationCircleFilled,
   PlusCircleFilled,
   SyncOutlined
 } from "@ant-design/icons";
 import { Button, Card, Space, Switch, Table } from "antd";
 import queryString from "query-string";
-import React, { useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -19,6 +18,7 @@ import { pageLimit } from "../../utils/config";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter.jsx";
 import dayjs from "../../utils/day";
 import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
+import PriorityLabel from "../../utils/tasksPriorityLabel.jsx";
 
 /**
  * Task List Component
@@ -54,47 +54,12 @@ const RemindAtRecord = ({ remindAt }) => {
   );
 };
 
-/**
- * Priority Label Component
- * @param priority
- * @returns {Element}
- * @constructor
- */
-const PriorityLabel = ({ priority }) => {
-  switch (priority) {
-    case 1:
-      return (
-        <div>
-          High <ExclamationCircleFilled style={{ marginLeft: "5px", color: "red" }} />
-        </div>
-      );
-    case 2:
-      return (
-        <div>
-          Medium <ExclamationCircleFilled style={{ marginLeft: "5px", color: "yellow" }} />
-        </div>
-      );
-    case 3:
-      return (
-        <div>
-          Low <ExclamationCircleFilled style={{ marginLeft: "5px", color: "green" }} />
-        </div>
-      );
-    default:
-      return (
-        <div>
-          None <ExclamationCircleFilled style={{ marginLeft: "5px" }} />
-        </div>
-      );
-  }
-};
-
 const mapDispatchToProps = (dispatch) => ({
   // Existing dispatch props...
   setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = () => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(TaskListComponent);
 

client/src/components/task-list/task-list.container.jsx

@@ -4,7 +4,6 @@ import { useMutation, useQuery } from "@apollo/client";
 import { MUTATION_TOGGLE_TASK_COMPLETED, MUTATION_TOGGLE_TASK_DELETED } from "../../graphql/tasks.queries.js";
 import { pageLimit } from "../../utils/config.js";
 import AlertComponent from "../alert/alert.component.jsx";
-import React from "react";
 import TaskListComponent from "./task-list.component.jsx";
 import { useTranslation } from "react-i18next";
 import { connect, useDispatch } from "react-redux";
@@ -20,7 +19,7 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
 });
 
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(TaskListContainer);
 
@@ -55,8 +54,8 @@ export function TaskListContainer({
       bodyshop: bodyshop.id,
       [relationshipType]: relationshipId,
       deleted: deleted === "true",
-      completed: completed === "true", //TODO: Find where mine is set.
+      completed: completed === "true",
-      assigned_to: onlyMine ? bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id : undefined, // replace currentUserID with the actual ID of the current user
+      assigned_to: onlyMine ? bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id : undefined,
       offset: page ? (page - 1) * pageLimit : 0,
       limit: pageLimit,
       order: [

client/src/components/task-upsert-modal/task-upsert-modal.component.jsx

@@ -1,5 +1,4 @@
 import { Col, Form, Input, Row, Select, Switch } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
@@ -8,6 +7,7 @@ import { connect } from "react-redux";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component.jsx";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import { Link } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -42,7 +42,7 @@ export function TaskUpsertModalComponent({
   ];
 
   const generatePresets = (job) => {
-    if (!job || !selectedJobDetails) return datePickerPresets; // return default presets if no job selected
+    if (!job || !selectedJobDetails) return datePickerPresets;
     const relativePresets = [];
 
     if (selectedJobDetails?.scheduled_completion) {
@@ -97,13 +97,8 @@ export function TaskUpsertModalComponent({
     });
   };
 
-  /**
-   * Change the selected job id
-   * @param jobId
-   */
   const changeJobId = (jobId) => {
     setSelectedJobId(jobId || null);
-    // Reset the form fields when selectedJobId changes
     clearRelations();
   };
 
@@ -163,6 +158,13 @@ export function TaskUpsertModalComponent({
                 required: true
               }
             ]}
+            extra={
+              existingTask && selectedJobId ? (
+                <div style={{ textAlign: "right" }}>
+                  <Link to={`/manage/jobs/${selectedJobId}`}>{t("tasks.labels.go_to_job")}</Link>
+                </div>
+              ) : null
+            }
           >
             <JobSearchSelectComponent
               placeholder={t("tasks.placeholders.jobid")}
@@ -203,7 +205,18 @@ export function TaskUpsertModalComponent({
           </Form.Item>
         </Col>
         <Col span={8}>
-          <Form.Item label={t("tasks.fields.billid")} name="billid">
+          <Form.Item
+            label={t("tasks.fields.billid")}
+            name="billid"
+            extra={
+              form.getFieldValue("billid") ? (
+                <Link to={`/manage/bills?billid=${form.getFieldValue("billid")}`}>
+                  {t("tasks.links.go_to_bill")} (
+                  {selectedJobDetails?.bills?.find((bill) => bill.id === form.getFieldValue("billid"))?.invoice_number})
+                </Link>
+              ) : null
+            }
+          >
             <Select
               allowClear
               placeholder={t("tasks.placeholders.billid")}

client/src/components/task-upsert-modal/task-upsert-modal.container.jsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form, Modal } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/contexts/SocketIO/socketProvider.jsx

@@ -1,4 +1,3 @@
-// SocketProvider.js
 import { useEffect, useRef, useState } from "react";
 import SocketIO from "socket.io-client";
 import { auth } from "../../firebase/firebase.utils";
@@ -18,6 +17,8 @@ import { useTranslation } from "react-i18next";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { INITIAL_NOTIFICATIONS, SocketContext } from "./useSocket.js";
 
+const LIMIT = INITIAL_NOTIFICATIONS;
+
 /**
  * Socket Provider - Scenario Notifications / Web Socket related items
  * @param children
@@ -31,6 +32,7 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
   const socketRef = useRef(null);
   const [clientId, setClientId] = useState(null);
   const [isConnected, setIsConnected] = useState(false);
+  const [socketInitialized, setSocketInitialized] = useState(false);
   const notification = useNotification();
   const userAssociationId = bodyshop?.associations?.[0]?.id;
   const { t } = useTranslation();
@@ -146,6 +148,13 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
     onError: (err) => console.error("MARK_ALL_NOTIFICATIONS_READ error:", err)
   });
 
+  const checkAndReconnect = () => {
+    if (socketRef.current && !socketRef.current.connected) {
+      console.log("Attempting manual reconnect due to event trigger");
+      socketRef.current.connect();
+    }
+  };
+
   useEffect(() => {
     const initializeSocket = async (token) => {
       if (!bodyshop || !bodyshop.id || socketRef.current) return;
@@ -164,18 +173,95 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
       });
 
       socketRef.current = socketInstance;
+      setSocketInitialized(true);
 
       const handleBodyshopMessage = (message) => {
         if (!message || !message.type) return;
         switch (message.type) {
           case "alert-update":
             store.dispatch(addAlerts(message.payload));
+            break;
+          case "task-created":
+          case "task-updated":
+          case "task-deleted":
+            const payload = message.payload;
+            const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser?.email)?.id;
+            if (!assignedToId || payload.assigned_to !== assignedToId) return;
+
+            const dueVars = {
+              bodyshop: bodyshop?.id,
+              assigned_to: assignedToId,
+              order: [{ due_date: "asc" }, { created_at: "desc" }]
+            };
+            const noDueVars = {
+              bodyshop: bodyshop?.id,
+              assigned_to: assignedToId,
+              order: [{ created_at: "desc" }],
+              limit: LIMIT,
+              offset: 0
+            };
+
+            const whereBase = {
+              bodyshopid: { _eq: bodyshop?.id },
+              assigned_to: { _eq: assignedToId },
+              deleted: { _eq: false },
+              completed: { _eq: false }
+            };
+            const whereDue = { ...whereBase, due_date: { _is_null: false } };
+            const whereNoDue = { ...whereBase, due_date: { _is_null: true } };
+
+            // Helper to invalidate a cache entry
+            const invalidateCache = (fieldName, args) => {
+              try {
+                client.cache.evict({
+                  id: "ROOT_QUERY",
+                  fieldName,
+                  args
+                });
+              } catch (error) {
+                console.error("Error invalidating cache:", error);
+              }
+            };
+
+            // Invalidate lists and aggregates based on event type
+            if (message.type === "task-deleted" || message.type === "task-updated") {
+              // Invalidate both lists and no due aggregate for deletes and updates
+              invalidateCache("tasks", { where: whereDue, order_by: dueVars.order });
+              invalidateCache("tasks", {
+                where: whereNoDue,
+                order_by: noDueVars.order,
+                limit: noDueVars.limit,
+                offset: noDueVars.offset
+              });
+              invalidateCache("tasks_aggregate", { where: whereNoDue });
+            } else if (message.type === "task-created") {
+              // For creates, invalidate the target list and no due aggregate if applicable
+              const hasDue = !!payload.due_date;
+              if (hasDue) {
+                invalidateCache("tasks", { where: whereDue, order_by: dueVars.order });
+              } else {
+                invalidateCache("tasks", {
+                  where: whereNoDue,
+                  order_by: noDueVars.order,
+                  limit: noDueVars.limit,
+                  offset: noDueVars.offset
+                });
+                invalidateCache("tasks_aggregate", { where: whereNoDue });
+              }
+            }
+
+            // Always invalidate the total count for all events (handles creates, deletes, updates including completions)
+            invalidateCache("tasks_aggregate", { where: whereBase });
+
+            // Garbage collect after evictions
+            client.cache.gc();
+
             break;
           default:
             break;
         }
       };
-
+      
       const handleConnect = () => {
         socketInstance.emit("join-bodyshop-room", bodyshop.id);
         setClientId(socketInstance.id);
@@ -472,6 +558,57 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
     t
   ]);
 
+  useEffect(() => {
+    if (!socketInitialized) return;
+
+    const onVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        checkAndReconnect();
+      }
+    };
+
+    const onFocus = () => {
+      checkAndReconnect();
+    };
+
+    const onOnline = () => {
+      checkAndReconnect();
+    };
+
+    const onPageShow = (event) => {
+      if (event.persisted) {
+        checkAndReconnect();
+      }
+    };
+
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    window.addEventListener("focus", onFocus);
+    window.addEventListener("online", onOnline);
+    window.addEventListener("pageshow", onPageShow);
+
+    // Sleep/wake detection using timer
+    let lastTime = Date.now();
+    const intervalMs = 1000; // Check every second
+    const thresholdMs = 2000; // If more than 2 seconds elapsed, assume sleep/wake
+
+    const sleepCheckInterval = setInterval(() => {
+      const currentTime = Date.now();
+      if (currentTime > lastTime + intervalMs + thresholdMs) {
+        console.log("Detected potential wake from sleep/hibernate");
+        checkAndReconnect();
+      }
+      lastTime = currentTime;
+    }, intervalMs);
+
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      window.removeEventListener("focus", onFocus);
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("pageshow", onPageShow);
+      clearInterval(sleepCheckInterval);
+    };
+  }, [socketInitialized]);
+
   return (
     <SocketContext.Provider
       value={{

client/src/contexts/SocketIO/useSocket.js

@@ -3,6 +3,8 @@ import { createContext, useContext } from "react";
 const SocketContext = createContext(null);
 
 const INITIAL_NOTIFICATIONS = 10;
+const INITIAL_TASKS = 5;
+const TASKS_CENTER_POLL_INTERVAL = 60 * 60 * 1000; // 1 hour in milliseconds
 
 const useSocket = () => {
   const context = useContext(SocketContext);
@@ -10,4 +12,4 @@ const useSocket = () => {
   return context;
 };
 
-export { SocketContext, INITIAL_NOTIFICATIONS, useSocket };
+export { SocketContext, INITIAL_NOTIFICATIONS, INITIAL_TASKS, TASKS_CENTER_POLL_INTERVAL, useSocket };

client/src/graphql/appointments.queries.js

@@ -31,6 +31,8 @@ export const QUERY_ALL_ACTIVE_APPOINTMENTS = gql`
       color
       note
       job {
+        scheduled_in
+        scheduled_completion
         alt_transport
         ro_number
         ownr_ln

client/src/graphql/tasks.queries.js

@@ -67,6 +67,105 @@ export const PARTIAL_TASK_FIELDS = gql`
   }
 `;
 
+export const PARTIAL_TASK_CENTER_FIELDS = gql`
+  fragment PartialTaskFields on tasks {
+    id
+    title
+    description
+    due_date
+    priority
+    jobid
+    job {
+      ro_number
+    }
+    joblineid
+    partsorderid
+    billid
+    remind_at
+    created_at
+    assigned_to
+    bodyshopid
+    deleted
+    completed
+  }
+`;
+
+export const QUERY_TASKS_WITH_DUE_DATES = gql`
+  ${PARTIAL_TASK_CENTER_FIELDS}
+  query QUERY_TASKS_WITH_DUE_DATES($bodyshop: uuid!, $assigned_to: uuid!, $order: [tasks_order_by!]!) {
+    tasks(
+      where: {
+        bodyshopid: { _eq: $bodyshop }
+        assigned_to: { _eq: $assigned_to }
+        deleted: { _eq: false }
+        completed: { _eq: false }
+        due_date: { _is_null: false }
+      }
+      order_by: $order
+    ) {
+      ...PartialTaskFields
+    }
+  }
+`;
+export const QUERY_TASKS_NO_DUE_DATE_PAGINATED = gql`
+  ${PARTIAL_TASK_CENTER_FIELDS}
+  query QUERY_TASKS_NO_DUE_DATE_PAGINATED(
+    $bodyshop: uuid!
+    $assigned_to: uuid!
+    $order: [tasks_order_by!]!
+    $limit: Int!
+    $offset: Int!
+  ) {
+    tasks(
+      where: {
+        bodyshopid: { _eq: $bodyshop }
+        assigned_to: { _eq: $assigned_to }
+        deleted: { _eq: false }
+        completed: { _eq: false }
+        due_date: { _is_null: true }
+      }
+      order_by: $order
+      limit: $limit
+      offset: $offset
+    ) {
+      ...PartialTaskFields
+    }
+    tasks_aggregate(
+      where: {
+        bodyshopid: { _eq: $bodyshop }
+        assigned_to: { _eq: $assigned_to }
+        deleted: { _eq: false }
+        completed: { _eq: false }
+        due_date: { _is_null: true }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+/**
+ * Query to get the count of my tasks
+ * @type {DocumentNode}
+ */
+export const QUERY_MY_TASKS_COUNT = gql`
+  query QUERY_MY_TASKS_COUNT($assigned_to: uuid!, $bodyshopid: uuid!) {
+    tasks_aggregate(
+      where: {
+        assigned_to: { _eq: $assigned_to }
+        bodyshopid: { _eq: $bodyshopid }
+        completed: { _eq: false }
+        deleted: { _eq: false }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
 export const QUERY_GET_TASK_BY_ID = gql`
   ${PARTIAL_TASK_FIELDS}
   query QUERY_GET_TASK_BY_ID($id: uuid!) {
@@ -287,6 +386,43 @@ export const QUERY_JOB_TASKS_PAGINATED = gql`
   }
 `;
 
+export const QUERY_MY_ACTIVE_TASKS_PAGINATED = gql`
+  ${PARTIAL_TASK_FIELDS}
+  query QUERY_MY_ACTIVE_TASKS_PAGINATED(
+    $assigned_to: uuid!
+    $bodyshop: uuid!
+    $offset: Int
+    $limit: Int
+    $order: [tasks_order_by!]!
+  ) {
+    tasks(
+      offset: $offset
+      limit: $limit
+      order_by: $order
+      where: {
+        assigned_to: { _eq: $assigned_to }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: false }
+        completed: { _eq: false }
+      }
+    ) {
+      ...TaskFields
+    }
+    tasks_aggregate(
+      where: {
+        assigned_to: { _eq: $assigned_to }
+        bodyshopid: { _eq: $bodyshop }
+        deleted: { _eq: false }
+        completed: { _eq: false }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
 export const QUERY_MY_TASKS_PAGINATED = gql`
   ${PARTIAL_TASK_FIELDS}
   query QUERY_MY_TASKS_PAGINATED(

client/src/pages/tasks/allTasksPageContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import TasksPageComponent from "./tasks.page.component";
 import queryString from "query-string";

client/src/pages/tasks/myTasksPageContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import TasksPageComponent from "./tasks.page.component";
 

client/src/pages/tasks/tasks.page.component.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import TaskListContainer from "../../components/task-list/task-list.container.jsx";
 import { QUERY_ALL_TASKS_PAGINATED, QUERY_MY_TASKS_PAGINATED } from "../../graphql/tasks.queries.js";
 import taskPageTypes from "./taskPageTypes.jsx";
@@ -10,7 +9,7 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(TasksPageComponent);
 

client/src/translations/en_us/common.json

@@ -975,7 +975,10 @@
         "addcomponent": "Add Component"
       },
       "errors": {
+        "atp": "No Alt. Transport*",
+        "insco": "No Ins. Co.*",
         "refreshrequired": "You must refresh the dashboard data to see this component.",
+        "status": "No Status*",
         "updatinglayout": "Error saving updated layout {{message}}"
       },
       "labels": {
@@ -998,6 +1001,8 @@
         "productiondollars": "Total Dollars in Production",
         "productionhours": "Total Hours in Production",
         "projectedmonthlysales": "Projected Monthly Sales",
+        "scheduleddeliverydate": "Scheduled Delivery Date: {{date}}",
+        "scheduleddeliverytoday": "Scheduled Delivery Today",
         "scheduledindate": "Scheduled In Today: {{date}}",
         "scheduledintoday": "Scheduled In Today",
         "scheduledoutdate": "Scheduled Out Today: {{date}}",
@@ -3295,6 +3300,16 @@
       }
     },
     "tasks": {
+      "labels": {
+        "my_tasks_center": "Task Center",
+        "go_to_job": "Go to Job",
+        "overdue": "Overdue",
+        "due_today": "Today",
+        "upcoming": "Upcoming",
+        "no_due_date": "Incomplete",
+        "ro-number": "RO #{{ro_number}}",
+        "no_tasks": "No Tasks Found"
+      },
       "actions": {
         "edit": "Edit Task",
         "new": "New Task",
@@ -3309,6 +3324,9 @@
         "myTasks": "Mine",
         "refresh": "Refresh"
       },
+      "errors": {
+        "load_failure": "Failed to load Tasks."
+      },
       "date_presets": {
         "completion": "Completion",
         "day": "Day",
@@ -3505,7 +3523,7 @@
         "dashboard": "Dashboard",
         "dms": "DMS Export",
         "export-logs": "Export Logs",
-        "feature-request": "Feature Requet",
+        "feature-request": "Feature Request",
         "inventory": "Inventory",
         "jobs": "Jobs",
         "jobs-active": "Active Jobs",

client/src/translations/es/common.json

@@ -975,7 +975,10 @@
         "addcomponent": ""
       },
       "errors": {
+        "atp": "",
+        "insco": "",
         "refreshrequired": "",
+        "status": "",
         "updatinglayout": ""
       },
       "labels": {
@@ -998,6 +1001,8 @@
         "productiondollars": "",
         "productionhours": "",
         "projectedmonthlysales": "",
+        "scheduleddeliverydate": "",
+        "scheduleddeliverytoday": "",
         "scheduledindate": "",
         "scheduledintoday": "",
         "scheduledoutdate": "",
@@ -3297,6 +3302,16 @@
       }
     },
     "tasks": {
+      "labels": {
+        "my_tasks_center": "",
+        "go_to_job": "",
+        "overdue": "",
+        "due_today": "",
+        "upcoming": "",
+        "no_due_date": "",
+        "ro-number": "",
+        "no_tasks": ""
+      },
       "actions": {
         "edit": "",
         "new": "",
@@ -3311,6 +3326,9 @@
         "myTasks": "",
         "refresh": ""
       },
+      "errors": {
+        "load_failure": ""
+      },
       "date_presets": {
         "completion": "",
         "day": "",

client/src/translations/fr/common.json

@@ -975,7 +975,10 @@
         "addcomponent": ""
       },
       "errors": {
+        "atp": "",
+        "insco": "",
         "refreshrequired": "",
+        "status": "",
         "updatinglayout": ""
       },
       "labels": {
@@ -998,6 +1001,8 @@
         "productiondollars": "",
         "productionhours": "",
         "projectedmonthlysales": "",
+        "scheduleddeliverydate": "",
+        "scheduleddeliverytoday": "",
         "scheduledindate": "",
         "scheduledintoday": "",
         "scheduledoutdate": "",
@@ -3297,6 +3302,16 @@
       }
     },
     "tasks": {
+      "labels": {
+        "my_tasks_center": "",
+        "go_to_job": "",
+        "overdue": "",
+        "due_today": "",
+        "upcoming": "",
+        "no_due_date": "",
+        "ro-number": "",
+        "no_tasks": ""
+      },
       "actions": {
         "edit": "",
         "new": "",
@@ -3311,6 +3326,9 @@
         "myTasks": "",
         "refresh": ""
       },
+      "errors": {
+        "load_failure": ""
+      },
       "date_presets": {
         "completion": "",
         "day": "",

client/src/utils/tasksPriorityLabel.jsx

@@ -0,0 +1,38 @@
+import { ExclamationCircleFilled } from "@ant-design/icons";
+
+/**
+ * Priority Label Component
+ * @param priority
+ * @returns {Element}
+ * @constructor
+ */
+const PriorityLabel = ({ priority }) => {
+  switch (priority) {
+    case 1:
+      return (
+        <div>
+          High <ExclamationCircleFilled style={{ marginLeft: "5px", color: "red" }} />
+        </div>
+      );
+    case 2:
+      return (
+        <div>
+          Medium <ExclamationCircleFilled style={{ marginLeft: "5px", color: "yellow" }} />
+        </div>
+      );
+    case 3:
+      return (
+        <div>
+          Low <ExclamationCircleFilled style={{ marginLeft: "5px", color: "green" }} />
+        </div>
+      );
+    default:
+      return (
+        <div>
+          None <ExclamationCircleFilled style={{ marginLeft: "5px" }} />
+        </div>
+      );
+  }
+};
+
+export default PriorityLabel;

hasura/metadata/tables.yaml

@@ -6344,11 +6344,13 @@
             - joblineid
             - assigned_to
             - due_date
+            - deleted
             - partsorderid
             - completed
             - description
             - billid
             - title
+            - jobid
             - priority
       retry_conf:
         interval_sec: 10

package.json

@@ -16,14 +16,14 @@
     "job-totals-fixtures:local": "docker exec node-app /usr/bin/node /app/download-job-totals-fixtures.js"
   },
   "dependencies": {
-    "@aws-sdk/client-cloudwatch-logs": "^3.840.0",
+    "@aws-sdk/client-cloudwatch-logs": "^3.848.0",
-    "@aws-sdk/client-elasticache": "^3.840.0",
+    "@aws-sdk/client-elasticache": "^3.848.0",
-    "@aws-sdk/client-s3": "^3.842.0",
+    "@aws-sdk/client-s3": "^3.848.0",
-    "@aws-sdk/client-secrets-manager": "^3.840.0",
+    "@aws-sdk/client-secrets-manager": "^3.848.0",
-    "@aws-sdk/client-ses": "^3.840.0",
+    "@aws-sdk/client-ses": "^3.848.0",
-    "@aws-sdk/credential-provider-node": "^3.840.0",
+    "@aws-sdk/credential-provider-node": "^3.848.0",
-    "@aws-sdk/lib-storage": "^3.842.0",
+    "@aws-sdk/lib-storage": "^3.848.0",
-    "@aws-sdk/s3-request-presigner": "^3.842.0",
+    "@aws-sdk/s3-request-presigner": "^3.848.0",
     "@opensearch-project/opensearch": "^2.13.0",
     "@socket.io/admin-ui": "^0.5.1",
     "@socket.io/redis-adapter": "^8.3.0",
@@ -31,14 +31,14 @@
     "aws4": "^1.13.2",
     "axios": "^1.10.0",
     "better-queue": "^3.8.12",
-    "bullmq": "^5.56.1",
+    "bullmq": "^5.56.4",
     "chart.js": "^4.5.0",
     "cloudinary": "^2.7.0",
-    "compression": "^1.8.0",
+    "compression": "^1.8.1",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
     "crisp-status-reporter": "^1.2.2",
-    "dd-trace": "^5.57.1",
+    "dd-trace": "^5.59.0",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
@@ -65,7 +65,7 @@
     "socket.io": "^4.8.1",
     "socket.io-adapter": "^2.5.5",
     "ssh2-sftp-client": "^11.0.0",
-    "twilio": "^5.7.2",
+    "twilio": "^5.7.3",
     "uuid": "^11.1.0",
     "winston": "^3.17.0",
     "winston-cloudwatch": "^6.3.0",
@@ -74,14 +74,14 @@
     "yazl": "^3.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
+    "@eslint/js": "^9.31.0",
-    "eslint": "^9.30.1",
+    "eslint": "^9.31.0",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^15.15.0",
     "mock-require": "^3.0.3",
     "p-limit": "^3.1.0",
     "prettier": "^3.6.2",
-    "supertest": "^7.1.1",
+    "supertest": "^7.1.3",
     "vitest": "^3.2.4"
   }
 }

server/job/job-lifecycle.js

@@ -81,7 +81,7 @@ const jobLifecycle = async (req, res) => {
     const finalTotal = Object.values(flatGroupedAllDurations).reduce((total, statusArr) => {
       return total + statusArr.reduce((acc, curr) => acc + curr.value, 0);
     }, 0);
-
+ 
     Object.keys(flatGroupedAllDurations).forEach((status) => {
       const value = flatGroupedAllDurations[status].reduce((acc, curr) => acc + curr.value, 0);
       const humanReadable = durationToHumanReadable(moment.duration(value));

server/notifications/autoAddWatchers.js

@@ -50,7 +50,12 @@ const autoAddWatchers = async (req) => {
   try {
     // Fetch bodyshop data from Redis
     const bodyshopData = await getBodyshopFromRedis(shopId);
-    const notificationFollowers = bodyshopData?.notification_followers || [];
+    let notificationFollowers = bodyshopData?.notification_followers;
+
+    // Bail if notification_followers is missing or not an array
+    if (!notificationFollowers || !Array.isArray(notificationFollowers)) {
+      return;
+    }
 
     // Execute queries in parallel
     const [notificationData, existingWatchersData] = await Promise.all([

server/notifications/eventHandlers.js

@@ -145,15 +145,70 @@ const handleNotesChange = async (req, res) =>
 const handlePaymentsChange = async (req, res) =>
   processNotificationEvent(req, res, "req.body.event.new.jobid", "Payments Changed Notification Event Handled.");
 
+/**
+ * Handle task socket emit.
+ * @param req
+ */
+const handleTaskSocketEmit = (req) => {
+  const {
+    logger,
+    ioRedis,
+    ioHelpers: { getBodyshopRoom }
+  } = req;
+  const event = req.body.event;
+  const op = event.op;
+  let taskData;
+  let type;
+  let bodyshopId;
+
+  if (op === "INSERT") {
+    taskData = event.data.new;
+    if (taskData.deleted) {
+      logger.log("tasks-event-insert-deleted", "warn", "notifications", null, { id: taskData.id });
+    } else {
+      type = "task-created";
+      bodyshopId = taskData.bodyshopid;
+    }
+  } else if (op === "UPDATE") {
+    const newData = event.data.new;
+    const oldData = event.data.old;
+    taskData = newData;
+    bodyshopId = newData.bodyshopid;
+
+    if (newData.deleted && !oldData.deleted) {
+      type = "task-deleted";
+      taskData = { id: newData.id, assigned_to: newData.assigned_to };
+    } else if (!newData.deleted && oldData.deleted) {
+      type = "task-created";
+    } else if (!newData.deleted) {
+      type = "task-updated";
+    }
+  } else {
+    logger.log("tasks-event-unknown-op", "warn", "notifications", null, { op });
+  }
+
+  if (bodyshopId && ioRedis && type) {
+    const room = getBodyshopRoom(bodyshopId);
+    ioRedis.to(room).emit("bodyshop-message", { type, payload: taskData });
+    logger.log("tasks-event-emitted", "info", "notifications", null, { type, bodyshopId });
+  } else if (type) {
+    logger.log("tasks-event-missing-data", "error", "notifications", null, { bodyshopId, hasIo: !!ioRedis, type });
+  }
+};
+
 /**
  * Handle tasks change notifications.
+ * Note: this also handles task center notifications.
  *
  * @param {Object} req - Express request object.
  * @param {Object} res - Express response object.
  * @returns {Promise<Object>} JSON response with a success message.
  */
-const handleTasksChange = async (req, res) =>
+const handleTasksChange = async (req, res) => {
+  // Handle Notification Event
   processNotificationEvent(req, res, "req.body.event.new.jobid", "Tasks Notifications Event Handled.");
+  handleTaskSocketEmit(req);
+};
 
 /**
  * Handle time tickets change notifications.

server/web-sockets/redisSocketEvents.js

@@ -26,6 +26,7 @@ const redisSocketEvents = ({
     try {
       const user = await admin.auth().verifyIdToken(token);
       socket.user = user;
+      socket.bodyshopId = bodyshopId;
       await addUserSocketMapping(user.email, socket.id, bodyshopId);
       next();
     } catch (error) {
@@ -55,12 +56,8 @@ const redisSocketEvents = ({
             return;
           }
           socket.user = user;
+          socket.bodyshopId = bodyshopId;
           await refreshUserSocketTTL(user.email, bodyshopId);
-          createLogEvent(
-            socket,
-            "debug",
-            `Token updated successfully for socket ID: ${socket.id} (bodyshop: ${bodyshopId})`
-          );
           socket.emit("token-updated", { success: true });
         } catch (error) {
           if (error.code === "auth/id-token-expired") {
@@ -82,7 +79,6 @@ const redisSocketEvents = ({
         try {
           const room = getBodyshopRoom(bodyshopUUID);
           socket.join(room);
-          // createLogEvent(socket, "debug", `Client joined bodyshop room: ${room}`);
         } catch (error) {
           createLogEvent(socket, "error", `Error joining room: ${error}`);
         }
@@ -92,7 +88,6 @@ const redisSocketEvents = ({
         try {
           const room = getBodyshopRoom(bodyshopUUID);
           socket.leave(room);
-          createLogEvent(socket, "debug", `Client left bodyshop room: ${room}`);
         } catch (error) {
           createLogEvent(socket, "error", `Error joining room: ${error}`);
         }
@@ -102,8 +97,6 @@ const redisSocketEvents = ({
         try {
           const room = getBodyshopRoom(bodyshopUUID);
           io.to(room).emit("bodyshop-message", message);
-          // We do not need this as these can be debugged live
-          // createLogEvent(socket, "debug", `Broadcast message to bodyshop ${room}`);
         } catch (error) {
           createLogEvent(socket, "error", `Error getting room: ${error}`);
         }
@@ -200,11 +193,6 @@ const redisSocketEvents = ({
                 io.to(socketId).emit("sync-notification-read", { notificationId, timestamp });
               }
             });
-            createLogEvent(
-              socket,
-              "debug",
-              `Synced notification ${notificationId} read for ${userEmail} in bodyshop ${bodyshopId}`
-            );
           }
         } catch (error) {
           createLogEvent(socket, "error", `Error syncing notification read: ${error.message}`);
@@ -223,7 +211,6 @@ const redisSocketEvents = ({
                 io.to(socketId).emit("sync-all-notifications-read", { timestamp });
               }
             });
-            createLogEvent(socket, "debug", `Synced all notifications read for ${email} in bodyshop ${bodyshopId}`);
           }
         } catch (error) {
           createLogEvent(socket, "error", `Error syncing all notifications read: ${error.message}`);
@@ -231,12 +218,34 @@ const redisSocketEvents = ({
       });
     };
 
+    // Task Events
+    const registerTaskEvents = (socket) => {
+      socket.on("task-created", (payload) => {
+        if (!payload) return;
+        const room = getBodyshopRoom(socket.bodyshopId);
+        io.to(room).emit("bodyshop-message", { type: "task-created", payload });
+      });
+
+      socket.on("task-updated", (payload) => {
+        if (!payload) return;
+        const room = getBodyshopRoom(socket.bodyshopId);
+        io.to(room).emit("bodyshop-message", { type: "task-updated", payload });
+      });
+
+      socket.on("task-deleted", (payload) => {
+        if (!payload || !payload.id) return;
+        const room = getBodyshopRoom(socket.bodyshopId);
+        io.to(room).emit("bodyshop-message", { type: "task-deleted", payload });
+      });
+    };
+
     // Call Handlers
     registerRoomAndBroadcastEvents(socket);
     registerUpdateEvents(socket);
     registerMessagingEvents(socket);
     registerDisconnectEvents(socket);
     registerSyncEvents(socket);
+    registerTaskEvents(socket);
   };
 
   // Associate Middleware and Handlers