From 9845c1cea546e5d0adf8bd6001039005875f853f Mon Sep 17 00:00:00 2001
From: Dave Richer <dave@imexsystems.ca>
Date: Mon, 7 Jul 2025 18:10:40 -0400
Subject: [PATCH] feature/IO-3291-Tasks-Notifications: Checkpoint

---
 .../components/header/buildLeftMenuItems.jsx  | 390 +++++++++++++++++
 .../components/header/header.component.jsx    | 394 +-----------------
 2 files changed, 406 insertions(+), 378 deletions(-)
 create mode 100644 client/src/components/header/buildLeftMenuItems.jsx

diff --git a/client/src/components/header/buildLeftMenuItems.jsx b/client/src/components/header/buildLeftMenuItems.jsx
new file mode 100644
index 000000000..166779572
--- /dev/null
+++ 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;
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index 32522a0d8..fe73718f1 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -1,45 +1,13 @@
 // noinspection RegExpAnonymousGroup
 
-import {
-  BarChartOutlined,
-  BellFilled,
-  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 { BellFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-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, FaTasks } from "react-icons/fa";
-import { FiLogOut } from "react-icons/fi";
-import { 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 { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
@@ -49,12 +17,11 @@ 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 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 ---
 const mapStateToProps = createStructuredSelector({
@@ -247,6 +214,8 @@ function Header(props) {
     [handleMenuClick]
   );
   // --- Menu Items ---
+
+  // built externally to keep the component clean
   const accountingChildren = useMemo(
     () =>
       buildAccountingChildren({
@@ -275,349 +244,18 @@ function Header(props) {
     ]
   );
 
+  // Built externally to keep the component clean
   const leftMenuItems = useMemo(
-    () => [
-      {
-        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>
-          }
-        ]
-      }
-    ],
+    () =>
+      buildLeftMenuItems({
+        t,
+        bodyshop,
+        recentItems,
+        setTaskUpsertContext,
+        setReportCenterContext,
+        signOutStart,
+        accountingChildren
+      }),
     [t, bodyshop, recentItems, setTaskUpsertContext, setReportCenterContext, signOutStart, accountingChildren]
   );