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: ,
+ label: {t("menus.header.home")}
+ },
+ {
+ key: "schedule",
+ id: "header-schedule",
+ icon: ,
+ label: {t("menus.header.schedule")}
+ },
+ {
+ key: "jobssubmenu",
+ id: "header-jobs",
+ icon: ,
+ label: t("menus.header.jobs"),
+ children: [
+ {
+ key: "activejobs",
+ id: "header-active-jobs",
+ icon: ,
+ label: {t("menus.header.activejobs")}
+ },
+ {
+ key: "readyjobs",
+ id: "header-ready-jobs",
+ icon: ,
+ label: {t("menus.header.readyjobs")}
+ },
+ {
+ key: "parts-queue",
+ id: "header-parts-queue",
+ icon: ,
+ label: {t("menus.header.parts-queue")}
+ },
+ {
+ key: "availablejobs",
+ id: "header-jobs-available",
+ icon: ,
+ label: {t("menus.header.availablejobs")}
+ },
+ {
+ key: "newjob",
+ id: "header-new-job",
+ icon: ,
+ label: {t("menus.header.newjob")}
+ },
+ { type: "divider" },
+ {
+ key: "alljobs",
+ id: "header-all-jobs",
+ icon: ,
+ label: {t("menus.header.alljobs")}
+ },
+ { type: "divider" },
+ {
+ key: "productionlist",
+ id: "header-production-list",
+ icon: ,
+ label: {t("menus.header.productionlist")}
+ },
+ {
+ key: "productionboard",
+ id: "header-production-board",
+ icon: ,
+ label: (
+
+
+ {t("menus.header.productionboard")}
+
+
+ )
+ },
+ { type: "divider" },
+ {
+ key: "scoreboard",
+ id: "header-scoreboard",
+ icon: ,
+ label: (
+
+
+ {t("menus.header.scoreboard")}
+
+
+ )
+ }
+ ]
+ },
+ {
+ key: "customers",
+ id: "header-customers",
+ icon: ,
+ label: t("menus.header.customers"),
+ children: [
+ {
+ key: "owners",
+ id: "header-owners",
+ icon: ,
+ label: {t("menus.header.owners")}
+ },
+ {
+ key: "vehicles",
+ id: "header-vehicles",
+ icon: ,
+ label: {t("menus.header.vehicles")}
+ }
+ ]
+ },
+ {
+ key: "ccs",
+ id: "header-css",
+ icon: ,
+ label: (
+
+ {t("menus.header.courtesycars")}
+
+ ),
+ children: [
+ {
+ key: "courtesycarsall",
+ id: "header-courtesycars-all",
+ icon: ,
+ label: (
+
+
+ {t("menus.header.courtesycars-all")}
+
+
+ )
+ },
+ {
+ key: "contracts",
+ id: "header-contracts",
+ icon: ,
+ label: (
+
+
+ {t("menus.header.courtesycars-contracts")}
+
+
+ )
+ },
+ {
+ key: "newcontract",
+ id: "header-newcontract",
+ icon: ,
+ label: (
+
+
+ {t("menus.header.courtesycars-newcontract")}
+
+
+ )
+ }
+ ]
+ },
+ ...(accountingChildren.length > 0
+ ? [
+ {
+ key: "accounting",
+ id: "header-accounting",
+ icon: ,
+ label: t("menus.header.accounting"),
+ children: accountingChildren
+ }
+ ]
+ : []),
+ {
+ key: "phonebook",
+ id: "header-phonebook",
+ icon: ,
+ label: {t("menus.header.phonebook")}
+ },
+ {
+ key: "temporarydocs",
+ id: "header-temporarydocs",
+ icon: ,
+ label: (
+
+
+ {t("menus.header.temporarydocs")}
+
+
+ )
+ },
+ {
+ key: "tasks",
+ id: "tasks",
+ icon: ,
+ label: t("menus.header.tasks"),
+ children: [
+ {
+ key: "createTask",
+ id: "header-create-task",
+ icon: ,
+ label: t("menus.header.create_task"),
+ onClick: () => setTaskUpsertContext({ actions: {}, context: {} })
+ },
+ {
+ key: "mytasks",
+ id: "header-my-tasks",
+ icon: ,
+ label: {t("menus.header.my_tasks")}
+ },
+ {
+ key: "all_tasks",
+ id: "header-all-tasks",
+ icon: ,
+ label: {t("menus.header.all_tasks")}
+ }
+ ]
+ },
+ {
+ key: "shopsubmenu",
+ id: "header-shopsubmenu",
+ icon: ,
+ label: t("menus.header.shop"),
+ children: [
+ {
+ key: "shop",
+ id: "header-shop",
+ icon: ,
+ label: {t("menus.header.shop_config")}
+ },
+ {
+ key: "dashboard",
+ id: "header-dashboard",
+ icon: ,
+ label: (
+
+ {t("menus.header.dashboard")}
+
+ )
+ },
+ {
+ key: "reportcenter",
+ id: "header-reportcenter",
+ icon: ,
+ label: t("menus.header.reportcenter"),
+ onClick: () => setReportCenterContext({ actions: {}, context: {} })
+ },
+ {
+ key: "shop-vendors",
+ id: "header-shop-vendors",
+ icon: ,
+ label: {t("menus.header.shop_vendors")}
+ },
+ {
+ key: "shop-csi",
+ id: "header-shop-csi",
+ icon: ,
+ label: (
+
+
+ {t("menus.header.shop_csi")}
+
+
+ )
+ }
+ ]
+ },
+ {
+ key: "recent",
+ id: "header-recent",
+ icon: ,
+ label: t("menus.header.recent"),
+ children: recentItems.map((i, idx) => ({
+ key: idx,
+ id: `header-recent-${idx}`,
+ label: {i.label}
+ }))
+ },
+ {
+ key: "user",
+ id: "header-user",
+ icon: ,
+ label: t("menus.currentuser.profile"),
+ children: [
+ {
+ key: "signout",
+ id: "header-signout",
+ icon: ,
+ danger: true,
+ label: t("user.actions.signout"),
+ onClick: () => signOutStart()
+ },
+ {
+ key: "help",
+ id: "header-help",
+ icon: ,
+ label: t("menus.header.help"),
+ onClick: () => window.open("https://help.imex.online/", "_blank")
+ },
+ {
+ key: "remoteassist",
+ id: "header-remote-assist",
+ icon: ,
+ label: t("menus.header.remoteassist"),
+ children: [
+ ...(InstanceRenderManager({ imex: true, rome: false })
+ ? [
+ {
+ key: "rescue",
+ id: "header-rescue",
+ icon: ,
+ label: t("menus.header.rescueme"),
+ onClick: () => window.open("https://imexrescue.com/", "_blank")
+ }
+ ]
+ : []),
+ {
+ key: "rescue-zoho",
+ id: "header-rescue-zoho",
+ icon: ,
+ label: t("menus.header.rescuemezoho"),
+ onClick: () => window.open("https://join.zoho.com/", "_blank")
+ }
+ ]
+ },
+ {
+ key: "shiftclock",
+ id: "header-shiftclock",
+ icon: ,
+ label: (
+
+
+ {t("menus.header.shiftclock")}
+
+
+ )
+ },
+ {
+ key: "profile",
+ id: "header-profile",
+ icon: ,
+ label: {t("menus.currentuser.profile")}
+ }
+ ]
+ }
+ ];
+};
+
+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: ,
- label: {t("menus.header.home")}
- },
- {
- key: "schedule",
- id: "header-schedule",
- icon: ,
- label: {t("menus.header.schedule")}
- },
- {
- key: "jobssubmenu",
- id: "header-jobs",
- icon: ,
- label: t("menus.header.jobs"),
- children: [
- {
- key: "activejobs",
- id: "header-active-jobs",
- icon: ,
- label: {t("menus.header.activejobs")}
- },
- {
- key: "readyjobs",
- id: "header-ready-jobs",
- icon: ,
- label: {t("menus.header.readyjobs")}
- },
- {
- key: "parts-queue",
- id: "header-parts-queue",
- icon: ,
- label: {t("menus.header.parts-queue")}
- },
- {
- key: "availablejobs",
- id: "header-jobs-available",
- icon: ,
- label: {t("menus.header.availablejobs")}
- },
- {
- key: "newjob",
- id: "header-new-job",
- icon: ,
- label: {t("menus.header.newjob")}
- },
- { type: "divider" },
- {
- key: "alljobs",
- id: "header-all-jobs",
- icon: ,
- label: {t("menus.header.alljobs")}
- },
- { type: "divider" },
- {
- key: "productionlist",
- id: "header-production-list",
- icon: ,
- label: {t("menus.header.productionlist")}
- },
- {
- key: "productionboard",
- id: "header-production-board",
- icon: ,
- label: (
-
-
- {t("menus.header.productionboard")}
-
-
- )
- },
- { type: "divider" },
- {
- key: "scoreboard",
- id: "header-scoreboard",
- icon: ,
- label: (
-
-
- {t("menus.header.scoreboard")}
-
-
- )
- }
- ]
- },
- {
- key: "customers",
- id: "header-customers",
- icon: ,
- label: t("menus.header.customers"),
- children: [
- {
- key: "owners",
- id: "header-owners",
- icon: ,
- label: {t("menus.header.owners")}
- },
- {
- key: "vehicles",
- id: "header-vehicles",
- icon: ,
- label: {t("menus.header.vehicles")}
- }
- ]
- },
- {
- key: "ccs",
- id: "header-css",
- icon: ,
- label: (
-
- {t("menus.header.courtesycars")}
-
- ),
- children: [
- {
- key: "courtesycarsall",
- id: "header-courtesycars-all",
- icon: ,
- label: (
-
-
- {t("menus.header.courtesycars-all")}
-
-
- )
- },
- {
- key: "contracts",
- id: "header-contracts",
- icon: ,
- label: (
-
-
- {t("menus.header.courtesycars-contracts")}
-
-
- )
- },
- {
- key: "newcontract",
- id: "header-newcontract",
- icon: ,
- label: (
-
-
- {t("menus.header.courtesycars-newcontract")}
-
-
- )
- }
- ]
- },
- ...(accountingChildren.length > 0
- ? [
- {
- key: "accounting",
- id: "header-accounting",
- icon: ,
- label: t("menus.header.accounting"),
- children: accountingChildren
- }
- ]
- : []),
- {
- key: "phonebook",
- id: "header-phonebook",
- icon: ,
- label: {t("menus.header.phonebook")}
- },
- {
- key: "temporarydocs",
- id: "header-temporarydocs",
- icon: ,
- label: (
-
-
- {t("menus.header.temporarydocs")}
-
-
- )
- },
- {
- key: "tasks",
- id: "tasks",
- icon: ,
- label: t("menus.header.tasks"),
- children: [
- {
- key: "createTask",
- id: "header-create-task",
- icon: ,
- label: t("menus.header.create_task"),
- onClick: () => setTaskUpsertContext({ actions: {}, context: {} })
- },
- {
- key: "mytasks",
- id: "header-my-tasks",
- icon: ,
- label: {t("menus.header.my_tasks")}
- },
- {
- key: "all_tasks",
- id: "header-all-tasks",
- icon: ,
- label: {t("menus.header.all_tasks")}
- }
- ]
- },
- {
- key: "shopsubmenu",
- id: "header-shopsubmenu",
- icon: ,
- label: t("menus.header.shop"),
- children: [
- {
- key: "shop",
- id: "header-shop",
- icon: ,
- label: {t("menus.header.shop_config")}
- },
- {
- key: "dashboard",
- id: "header-dashboard",
- icon: ,
- label: (
-
- {t("menus.header.dashboard")}
-
- )
- },
- {
- key: "reportcenter",
- id: "header-reportcenter",
- icon: ,
- label: t("menus.header.reportcenter"),
- onClick: () => setReportCenterContext({ actions: {}, context: {} })
- },
- {
- key: "shop-vendors",
- id: "header-shop-vendors",
- icon: ,
- label: {t("menus.header.shop_vendors")}
- },
- {
- key: "shop-csi",
- id: "header-shop-csi",
- icon: ,
- label: (
-
-
- {t("menus.header.shop_csi")}
-
-
- )
- }
- ]
- },
- {
- key: "recent",
- id: "header-recent",
- icon: ,
- label: t("menus.header.recent"),
- children: recentItems.map((i, idx) => ({
- key: idx,
- id: `header-recent-${idx}`,
- label: {i.label}
- }))
- },
- {
- key: "user",
- id: "header-user",
- icon: ,
- label: t("menus.currentuser.profile"),
- children: [
- {
- key: "signout",
- id: "header-signout",
- icon: ,
- danger: true,
- label: t("user.actions.signout"),
- onClick: () => signOutStart()
- },
- {
- key: "help",
- id: "header-help",
- icon: ,
- label: t("menus.header.help"),
- onClick: () => window.open("https://help.imex.online/", "_blank")
- },
- {
- key: "remoteassist",
- id: "header-remote-assist",
- icon: ,
- label: t("menus.header.remoteassist"),
- children: [
- ...(InstanceRenderManager({ imex: true, rome: false })
- ? [
- {
- key: "rescue",
- id: "header-rescue",
- icon: ,
- label: t("menus.header.rescueme"),
- onClick: () => window.open("https://imexrescue.com/", "_blank")
- }
- ]
- : []),
- {
- key: "rescue-zoho",
- id: "header-rescue-zoho",
- icon: ,
- label: t("menus.header.rescuemezoho"),
- onClick: () => window.open("https://join.zoho.com/", "_blank")
- }
- ]
- },
- {
- key: "shiftclock",
- id: "header-shiftclock",
- icon: ,
- label: (
-
-
- {t("menus.header.shiftclock")}
-
-
- )
- },
- {
- key: "profile",
- id: "header-profile",
- icon: ,
- label: {t("menus.currentuser.profile")}
- }
- ]
- }
- ],
+ () =>
+ buildLeftMenuItems({
+ t,
+ bodyshop,
+ recentItems,
+ setTaskUpsertContext,
+ setReportCenterContext,
+ signOutStart,
+ accountingChildren
+ }),
[t, bodyshop, recentItems, setTaskUpsertContext, setReportCenterContext, signOutStart, accountingChildren]
);