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

2025-07-18 11:26:51 -04:00
parent 7a1e7bd4f9 cf9d8d649d
commit 139ee46dc0
52 changed files with 3331 additions and 2452 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/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/react": "^9.35.0",
-    "@sentry/vite-plugin": "^3.5.0",
+    "@sentry/cli": "^2.50.0",
+    "@sentry/react": "^9.40.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",
-    "@playwright/test": "^1.53.2",
-    "@sentry/webpack-plugin": "^3.5.0",
+    "@eslint/js": "^9.31.0",
+    "@playwright/test": "^1.54.1",
+    "@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",
--- a/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx
+++ b/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}` : ""
--- a/client/src/components/contract-status-select/contract-status-select.component.jsx
+++ b/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();

--- a/client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx
+++ b/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) => {
--- a/client/src/components/dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx
+++ b/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
+  }
+`;
--- a/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx
+++ b/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 React, { useState } from "react";
+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";
@@ -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]
              };
            })
--- a/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
+++ b/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 React, { useState } from "react";
+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";
@@ -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]
              };
            })
--- a/client/src/components/dashboard-grid/componentList.js
+++ b/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 {
-  DashboardTotalProductionHours,
-  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 JobLifecycleDashboardComponent, {
+  JobLifecycleDashboardGQL
+} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.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, {
-  JobLifecycleDashboardGQL
-} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx";
+import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component.jsx";
+import {
+  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,
--- a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
+++ b/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) => {
-                handleChange(value);
-                onBlur();
+              onChange={(timeValue) => {
+                if (timeValue) {
+                  // 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}
--- a/client/src/components/header/buildAccountingChildren.jsx
+++ b/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;
--- a/client/src/components/header/buildLeftMenuItems.jsx
+++ b/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;
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -1,61 +1,29 @@
-import {
-  BankFilled,
-  BarChartOutlined,
-  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";
+// noinspection RegExpAnonymousGroup
+
+import { BellFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Badge, Layout, Menu, Spin } from "antd";
-import { useEffect, useRef, useState } from "react";
+import { Badge, Layout, Menu, Spin, Tooltip } from "antd";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { BsKanban } from "react-icons/bs";
-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 { FaTasks } from "react-icons/fa";
 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({
-  handleMenuClick,
-  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);
-
+// --- Utility Hooks ---
+function useUnreadNotifications(userAssociationId, isConnected, scenarioNotificationsOn) {
  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
-    updateTitle();
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [taskCenterVisible, notificationVisible, scenarioNotificationsOn]);

-    // Poll every 100ms to catch child component changes
-    const interval = setInterval(updateTitle, 100);
+  // --- Event Handlers ---
+  const handleTaskCenterClick = useCallback(
+    (e) => {
+      setTaskCenterVisible((prev) => {
+        if (prev) return false;
+        return true;
+      });
+      if (handleMenuClick) handleMenuClick(e);
+    },
+    [handleMenuClick]
+  );

-    // Cleanup
-    return () => {
-      clearInterval(interval);
-      document.title = baseTitleRef.current; // Reset to base title on unmount
-    };
-  }, [unreadCount]); // Re-run when unreadCount changes
+  const handleNotificationClick = useCallback(
+    (e) => {
+      setNotificationVisible((prev) => {
+        if (prev) return false;
+        return true;
+      });
+      if (handleMenuClick) handleMenuClick(e);
+    },
+    [handleMenuClick]
+  );

-  const handleNotificationClick = (e) => {
-    setNotificationVisible(!notificationVisible);
-    if (handleMenuClick) handleMenuClick(e);
-  };
+  // --- Menu Items ---

-  const accountingChildren = [
-    {
-      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>
-          )
-        }
-      ]
+  // built externally to keep the component clean, but on this level to prevent unnecessary re-renders
+  const accountingChildren = useMemo(
+    () =>
+      buildAccountingChildren({
+        t,
+        bodyshop,
+        currentUser,
+        setBillEnterContext,
+        setPaymentContext,
+        setCardPaymentContext,
+        setTimeTicketContext,
+        ImEXPay,
+        DmsAp,
+        Simple_Inventory
+      }),
+    [
+      t,
+      bodyshop,
+      currentUser,
+      setBillEnterContext,
+      setPaymentContext,
+      setCardPaymentContext,
+      setTimeTicketContext,
+      ImEXPay,
+      DmsAp,
+      Simple_Inventory
+    ]
+  );
+
+  // Built externally to keep the component clean
+  const leftMenuItems = useMemo(
+    () =>
+      buildLeftMenuItems({
+        t,
+        bodyshop,
+        recentItems,
+        setTaskUpsertContext,
+        setReportCenterContext,
+        signOutStart,
+        accountingChildren
+      }),
+    [t, bodyshop, recentItems, setTaskUpsertContext, setReportCenterContext, signOutStart, accountingChildren]
+  );
+
+  const rightMenuItems = useMemo(() => {
+    const items = [];
+    if (scenarioNotificationsOn) {
+      items.push({
+        key: "notifications",
+        id: "header-notifications",
+        icon: unreadLoading ? (
+          <Spin size="small" />
+        ) : (
+          <Badge offset={[8, 0]} size="small" count={isEmployee ? unreadCount : 0}>
+            <BellFilled />
+          </Badge>
+        ),
+        onClick: handleNotificationClick
+      });
    }
-  ];
-
-  // Left menu items (includes original navigation items)
-  const leftMenuItems = [
-    {
-      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>
+    items.push({
+      key: "taskcenter",
+      id: "header-taskcenter",
+      icon: taskCountLoading ? (
+        <Spin size="small" />
+      ) : (
+        <Badge offset={[8, 0]} size="small" count={incompleteTaskCount > 0 ? incompleteTaskCount : 0} showZero={false}>
+          <Tooltip title={t("menus.header.tasks")}>
+            <FaTasks />
+          </Tooltip>
+        </Badge>
      ),
-      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>
-        }
-      ]
-    }
-  ];
-
-  // 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
-        }
-      ]
-    : [];
+      onClick: handleTaskCenterClick
+    });
+    return items;
+  }, [
+    scenarioNotificationsOn,
+    unreadLoading,
+    unreadCount,
+    taskCountLoading,
+    incompleteTaskCount,
+    isEmployee,
+    handleNotificationClick,
+    handleTaskCenterClick,
+    t
+  ]);

+  // --- Render ---
  return (
    <Layout.Header style={{ padding: 0, background: "#001529" }}>
-      <div
-        style={{
-          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 && (
+      <div style={{ display: "flex", alignItems: "center", height: "100%", overflow: "hidden" }}>
+        <div style={{ flexGrow: 1, overflowX: "auto", whiteSpace: "nowrap" }}>
          <Menu
            mode="horizontal"
            theme="dark"
            selectedKeys={[selectedHeader]}
            onClick={handleMenuClick}
            subMenuCloseDelay={0.3}
-            items={notificationItem}
-            style={{ flex: "0 0 auto", minWidth: 0, borderBottom: "none", background: "transparent" }}
+            items={leftMenuItems}
+            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
-          visible={notificationVisible}
-          onClose={() => setNotificationVisible(false)}
-          unreadCount={unreadCount}
-        />
+        <div ref={notificationRef}>
+          <NotificationCenterContainer
+            visible={notificationVisible}
+            onClose={() => setNotificationVisible(false)}
+            unreadCount={unreadCount}
+          />
+        </div>
      )}
+      <div ref={taskCenterRef}>
+        <TaskCenterContainer
+          incompleteTaskCount={incompleteTaskCount}
+          visible={taskCenterVisible}
+          onClose={() => setTaskCenterVisible(false)}
+        />
+      </div>
    </Layout.Header>
  );
 }
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/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
                }
              });
            }}
--- a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
+++ b/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>
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/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
-            title={t("jobs.labels.deletewatchers")}
-            onClick={(e) => e.stopPropagation()}
-            showCancel={false}
-          >
+          <Popconfirm title={t("jobs.labels.deletewatchers")} onClick={(e) => e.stopPropagation()} showCancel={false}>
            {t("menus.jobsactions.deletejob")}
          </Popconfirm>
        )
--- a/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx
+++ b/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);
--- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/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>
  );
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/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>
  );
--- a/client/src/components/notification-center/notification-center.component.jsx
+++ b/client/src/components/notification-center/notification-center.component.jsx
@@ -131,4 +131,6 @@ const NotificationCenterComponent = forwardRef(
  }
 );

+NotificationCenterComponent.displayName = "NotificationCenterComponent";
+
 export default NotificationCenterComponent;
--- a/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx
+++ b/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({
-  bodyshop,
-  label,
-  refetch,
-  date,
-  load,
-  calculating,
-  events,
-  ...otherProps
-}) {
+export function ScheduleCalendarHeaderComponent({ bodyshop, label, refetch, date, load, calculating, events }) {
  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>
--- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
+++ b/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 React, { useEffect, useState } from "react";
+import { 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
--- a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
+++ b/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),
-      bodyHrs: _.round(dayhrs.bodyhrs, 1),
-      accTargetHrs: _.round(
+      paintHrs: round(dayhrs.painthrs, 1),
+      bodyHrs: round(dayhrs.bodyhrs, 1),
+      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),
-      accSales: _.round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2)
+      sales: round(dayhrs.sales, 2),
+      accSales: round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2)
    };

    return [...acc, theValue];
--- a/client/src/components/scoreboard-display/scoreboard-display.component.jsx
+++ b/client/src/components/scoreboard-display/scoreboard-display.component.jsx
@@ -1,23 +1,25 @@
-import { Col, Row } from "antd";
-import { useEffect } from "react";
+import { Col, Row, Spin } from "antd";
+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) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
 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(() => {
-    //Update the locals.
-    async function setDayJSSettings() {
-      let appointments;
+  const [loading, setLoading] = useState(true); // Loading state

-      if (!bodyshop.scoreboard_target.ignoreblockeddays) {
-        const { data } = await client.query({
-          query: GET_BLOCKED_DAYS,
-          variables: {
-            start: dayjs().startOf("month"),
-            end: dayjs().endOf("month")
-          }
-        });
-        appointments = data.appointments;
-      }
-      dayjs.updateLocale(dayjs.locale(), {
-        workingWeekdays: translateSettingsToWorkingDays(bodyshop.workingdays),
-        ...(appointments?.length
-          ? {
-              holidays: appointments.map((h) => dayjs(h.start).format("MM-DD-YYYY"))
+  useEffect(() => {
+    async function setDayJSSettings() {
+      try {
+        let appointments;
+
+        if (!bodyshop.scoreboard_target.ignoreblockeddays) {
+          const { data } = await client.query({
+            query: GET_BLOCKED_DAYS,
+            variables: {
+              start: dayjs().startOf("month"),
+              end: dayjs().endOf("month")
            }
-          : {}),
-        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.tuesday) {
-    days.push(2);
-  }
-  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);
-  }
+  if (workingdays.monday) days.push(1);
+  if (workingdays.tuesday) days.push(2);
+  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;
 }
--- a/client/src/components/scoreboard-last-days/scoreboard-last-days.component.jsx
+++ b/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>
--- a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
+++ b/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);
--- a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js
+++ b/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);
--- a/client/src/components/task-center/task-center.component.jsx
+++ b/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;
--- a/client/src/components/task-center/task-center.container.jsx
+++ b/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);
--- a/client/src/components/task-center/task-center.styles.scss
+++ b/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;
+  }
+}
--- a/client/src/components/task-list/task-list.component.jsx
+++ b/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);

--- a/client/src/components/task-list/task-list.container.jsx
+++ b/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.
-      assigned_to: onlyMine ? bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id : undefined, // replace currentUserID with the actual ID of the current user
+      completed: completed === "true",
+      assigned_to: onlyMine ? bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id : undefined,
      offset: page ? (page - 1) * pageLimit : 0,
      limit: pageLimit,
      order: [
--- a/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx
+++ b/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")}
--- a/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx
+++ b/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";
--- a/client/src/contexts/SocketIO/socketProvider.jsx
+++ b/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,12 +173,89 @@ 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;
@@ -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={{
--- a/client/src/contexts/SocketIO/useSocket.js
+++ b/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 };
--- a/client/src/graphql/appointments.queries.js
+++ b/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
--- a/client/src/graphql/tasks.queries.js
+++ b/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(
--- a/client/src/pages/tasks/allTasksPageContainer.jsx
+++ b/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";
--- a/client/src/pages/tasks/myTasksPageContainer.jsx
+++ b/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";

--- a/client/src/pages/tasks/tasks.page.component.jsx
+++ b/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);

--- a/client/src/translations/en_us/common.json
+++ b/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",
--- a/client/src/translations/es/common.json
+++ b/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": "",
--- a/client/src/translations/fr/common.json
+++ b/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": "",
--- a/client/src/utils/tasksPriorityLabel.jsx
+++ b/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;
--- a/hasura/metadata/tables.yaml
+++ b/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
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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-elasticache": "^3.840.0",
-    "@aws-sdk/client-s3": "^3.842.0",
-    "@aws-sdk/client-secrets-manager": "^3.840.0",
-    "@aws-sdk/client-ses": "^3.840.0",
-    "@aws-sdk/credential-provider-node": "^3.840.0",
-    "@aws-sdk/lib-storage": "^3.842.0",
-    "@aws-sdk/s3-request-presigner": "^3.842.0",
+    "@aws-sdk/client-cloudwatch-logs": "^3.848.0",
+    "@aws-sdk/client-elasticache": "^3.848.0",
+    "@aws-sdk/client-s3": "^3.848.0",
+    "@aws-sdk/client-secrets-manager": "^3.848.0",
+    "@aws-sdk/client-ses": "^3.848.0",
+    "@aws-sdk/credential-provider-node": "^3.848.0",
+    "@aws-sdk/lib-storage": "^3.848.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": "^9.30.1",
+    "@eslint/js": "^9.31.0",
+    "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"
  }
 }
--- a/server/notifications/autoAddWatchers.js
+++ b/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([
--- a/server/notifications/eventHandlers.js
+++ b/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.
--- a/server/web-sockets/redisSocketEvents.js
+++ b/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