784 lines
22 KiB
JavaScript
784 lines
22 KiB
JavaScript
import Icon, {
|
|
BankFilled,
|
|
BarChartOutlined,
|
|
BellFilled,
|
|
CarFilled,
|
|
CheckCircleOutlined,
|
|
ClockCircleFilled,
|
|
DashboardFilled,
|
|
DollarCircleFilled,
|
|
ExportOutlined,
|
|
FieldTimeOutlined,
|
|
FileAddFilled,
|
|
FileAddOutlined,
|
|
FileFilled,
|
|
HomeFilled,
|
|
ImportOutlined,
|
|
LineChartOutlined,
|
|
PaperClipOutlined,
|
|
PhoneOutlined,
|
|
PlusCircleOutlined,
|
|
QuestionCircleFilled,
|
|
ScheduleOutlined,
|
|
SettingOutlined,
|
|
TeamOutlined,
|
|
ToolFilled,
|
|
UnorderedListOutlined,
|
|
UserOutlined
|
|
} from "@ant-design/icons";
|
|
import { useSplitTreatments } from "@splitsoftware/splitio-react";
|
|
import { Layout, Menu, Space } from "antd";
|
|
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 { connect } from "react-redux";
|
|
import { Link } from "react-router-dom";
|
|
import { createStructuredSelector } from "reselect";
|
|
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 InstanceRenderManager from "../../utils/instanceRenderMgr";
|
|
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
|
|
import LockWrapper from "../lock-wrapper/lock-wrapper.component";
|
|
import { useState, useEffect } from "react";
|
|
import { debounce } from "lodash";
|
|
|
|
// Used to Determine if the Header is in Mobile Mode, and to toggle the multiple menus
|
|
const HEADER_MOBILE_BREAKPOINT = 576;
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser,
|
|
recentItems: selectRecentItems,
|
|
selectedHeader: selectSelectedHeader,
|
|
bodyshop: selectBodyshop
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setBillEnterContext: (context) =>
|
|
dispatch(
|
|
setModalContext({
|
|
context: context,
|
|
modal: "billEnter"
|
|
})
|
|
),
|
|
setTimeTicketContext: (context) =>
|
|
dispatch(
|
|
setModalContext({
|
|
context: context,
|
|
modal: "timeTicket"
|
|
})
|
|
),
|
|
setPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "payment" })),
|
|
setReportCenterContext: (context) =>
|
|
dispatch(
|
|
setModalContext({
|
|
context: context,
|
|
modal: "reportCenter"
|
|
})
|
|
),
|
|
signOutStart: () => dispatch(signOutStart()),
|
|
setCardPaymentContext: (context) =>
|
|
dispatch(
|
|
setModalContext({
|
|
context: context,
|
|
modal: "cardPayment"
|
|
})
|
|
),
|
|
setTaskUpsertContext: (context) =>
|
|
dispatch(
|
|
setModalContext({
|
|
context: 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 [isMobile, setIsMobile] = useState(() => {
|
|
const effectiveWidth = window.innerWidth / (window.devicePixelRatio || 1);
|
|
return effectiveWidth <= HEADER_MOBILE_BREAKPOINT;
|
|
});
|
|
|
|
const handleResize = debounce(() => {
|
|
const effectiveWidth = window.innerWidth / (window.devicePixelRatio || 1);
|
|
setIsMobile(effectiveWidth <= HEADER_MOBILE_BREAKPOINT);
|
|
}, 200);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener("resize", handleResize);
|
|
window.addEventListener("orientationchange", handleResize);
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
window.removeEventListener("orientationchange", handleResize);
|
|
handleResize.cancel(); // Cancel any pending debounced calls on cleanup
|
|
};
|
|
}, [handleResize]);
|
|
|
|
// Accounting children setup (unchanged)
|
|
const accountingChildren = [];
|
|
accountingChildren.push(
|
|
{
|
|
key: "bills",
|
|
id: "header-accounting-bills",
|
|
icon: <Icon component={FaFileInvoiceDollar} />,
|
|
label: (
|
|
<Link to="/manage/bills">
|
|
<LockWrapper featureName="bills" bodyshop={bodyshop}>
|
|
{t("menus.header.bills")}
|
|
</LockWrapper>
|
|
</Link>
|
|
)
|
|
},
|
|
{
|
|
key: "enterbills",
|
|
id: "header-accounting-enterbills",
|
|
icon: <Icon component={GiPayMoney} />,
|
|
label: (
|
|
<Space>
|
|
<LockWrapper featureName="bills" bodyshop={bodyshop}>
|
|
{t("menus.header.enterbills")}
|
|
</LockWrapper>
|
|
</Space>
|
|
),
|
|
onClick: () => {
|
|
HasFeatureAccess({ featureName: "bills", bodyshop }) &&
|
|
setBillEnterContext({
|
|
actions: {},
|
|
context: {}
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
if (Simple_Inventory.treatment === "on") {
|
|
accountingChildren.push(
|
|
{
|
|
type: "divider"
|
|
},
|
|
{
|
|
key: "inventory",
|
|
id: "header-accounting-inventory",
|
|
icon: <Icon component={FaFileInvoiceDollar} />,
|
|
label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
|
|
}
|
|
);
|
|
}
|
|
|
|
accountingChildren.push(
|
|
{
|
|
type: "divider"
|
|
},
|
|
{
|
|
key: "allpayments",
|
|
id: "header-accounting-allpayments",
|
|
icon: <BankFilled />,
|
|
label: (
|
|
<Link to="/manage/payments">
|
|
<LockWrapper featureName="payments" bodyshop={bodyshop}>
|
|
{t("menus.header.allpayments")}
|
|
</LockWrapper>
|
|
</Link>
|
|
)
|
|
},
|
|
{
|
|
key: "enterpayments",
|
|
id: "header-accounting-enterpayments",
|
|
icon: <Icon component={FaCreditCard} />,
|
|
label: (
|
|
<LockWrapper featureName="payments" bodyshop={bodyshop}>
|
|
{t("menus.header.enterpayment")}
|
|
</LockWrapper>
|
|
),
|
|
onClick: () => {
|
|
HasFeatureAccess({ featureName: "payments", bodyshop }) &&
|
|
setPaymentContext({
|
|
actions: {},
|
|
context: null
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
if (ImEXPay.treatment === "on") {
|
|
accountingChildren.push({
|
|
key: "entercardpayments",
|
|
id: "header-accounting-entercardpayments",
|
|
icon: <Icon component={FaCreditCard} />,
|
|
label: t("menus.header.entercardpayment"),
|
|
onClick: () => {
|
|
setCardPaymentContext({
|
|
actions: {},
|
|
context: {}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
accountingChildren.push(
|
|
{
|
|
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>
|
|
)
|
|
}
|
|
);
|
|
|
|
if (bodyshop?.md_tasks_presets?.use_approvals) {
|
|
accountingChildren.push({
|
|
key: "ttapprovals",
|
|
id: "header-accounting-ttapprovals",
|
|
icon: <FieldTimeOutlined />,
|
|
label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
|
|
});
|
|
}
|
|
accountingChildren.push(
|
|
{
|
|
key: "entertimetickets",
|
|
icon: <Icon component={GiPlayerTime} />,
|
|
label: (
|
|
<LockWrapper featureName="timetickets" bodyshop={bodyshop}>
|
|
{t("menus.header.entertimeticket")}
|
|
</LockWrapper>
|
|
),
|
|
id: "header-accounting-entertimetickets",
|
|
onClick: () => {
|
|
HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
|
|
setTimeTicketContext({
|
|
actions: {},
|
|
context: {
|
|
created_by: currentUser.displayName
|
|
? currentUser.email.concat(" | ", currentUser.displayName)
|
|
: currentUser.email
|
|
}
|
|
});
|
|
}
|
|
},
|
|
{
|
|
type: "divider"
|
|
}
|
|
);
|
|
|
|
const accountingExportChildren = [
|
|
{
|
|
key: "receivables",
|
|
id: "header-accounting-receivables",
|
|
label: (
|
|
<Link to="/manage/accounting/receivables">
|
|
<LockWrapper featureName="export" bodyshop={bodyshop}>
|
|
{t("menus.header.accounting-receivables")}
|
|
</LockWrapper>
|
|
</Link>
|
|
)
|
|
}
|
|
];
|
|
|
|
if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
|
|
accountingExportChildren.push({
|
|
key: "payables",
|
|
id: "header-accounting-payables",
|
|
label: (
|
|
<Link to="/manage/accounting/payables">
|
|
<LockWrapper featureName="export" bodyshop={bodyshop}>
|
|
{t("menus.header.accounting-payables")}
|
|
</LockWrapper>
|
|
</Link>
|
|
)
|
|
});
|
|
}
|
|
|
|
if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))) {
|
|
accountingExportChildren.push({
|
|
key: "payments",
|
|
id: "header-accounting-payments",
|
|
label: (
|
|
<Link to="/manage/accounting/payments">
|
|
<LockWrapper featureName="export" bodyshop={bodyshop}>
|
|
{t("menus.header.accounting-payments")}
|
|
</LockWrapper>
|
|
</Link>
|
|
)
|
|
});
|
|
}
|
|
|
|
accountingExportChildren.push(
|
|
{
|
|
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>
|
|
)
|
|
}
|
|
);
|
|
|
|
accountingChildren.push({
|
|
key: "accountingexport",
|
|
id: "header-accounting-export",
|
|
icon: <ExportOutlined />,
|
|
label: (
|
|
<LockWrapper featureName="export" bodyshop={bodyshop}>
|
|
{t("menus.header.export")}
|
|
</LockWrapper>
|
|
),
|
|
children: accountingExportChildren
|
|
});
|
|
|
|
// Define all menu items
|
|
const menuItems = [
|
|
{
|
|
key: "home",
|
|
icon: <HomeFilled />,
|
|
id: "header-home",
|
|
label: <Link to="/manage/">{t("menus.header.home")}</Link>
|
|
},
|
|
{
|
|
key: "schedule",
|
|
id: "header-schedule",
|
|
icon: <Icon component={FaCalendarAlt} />,
|
|
label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
|
|
},
|
|
{
|
|
key: "jobssubmenu",
|
|
id: "header-jobs",
|
|
icon: <Icon component={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",
|
|
id: "header-jobs-divider"
|
|
},
|
|
{
|
|
key: "alljobs",
|
|
id: "header-all-jobs",
|
|
icon: <UnorderedListOutlined />,
|
|
label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
|
|
},
|
|
{
|
|
type: "divider",
|
|
id: "header-jobs-divider2"
|
|
},
|
|
{
|
|
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: <Icon component={BsKanban} />,
|
|
label: (
|
|
<Link to="/manage/production/board">
|
|
<LockWrapper featureName="visualboard" bodyshop={bodyshop}>
|
|
{t("menus.header.productionboard")}
|
|
</LockWrapper>
|
|
</Link>
|
|
)
|
|
},
|
|
{
|
|
type: "divider",
|
|
id: "header-jobs-divider3"
|
|
},
|
|
{
|
|
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",
|
|
icon: <UserOutlined />,
|
|
id: "header-customers",
|
|
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: <Icon component={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: <Icon component={IoBusinessOutline} />,
|
|
label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
|
|
},
|
|
{
|
|
key: "shop-csi",
|
|
id: "header-shop-csi",
|
|
icon: <Icon component={RiSurveyLine} />,
|
|
label: (
|
|
<Link to="/manage/shop/csi">
|
|
<LockWrapper featureName="export" bodyshop={bodyshop}>
|
|
{t("menus.header.shop_csi")}
|
|
</LockWrapper>
|
|
</Link>
|
|
)
|
|
}
|
|
]
|
|
},
|
|
// Right-aligned items on desktop, merged on mobile
|
|
{
|
|
key: "notifications",
|
|
icon: <BellFilled />,
|
|
id: "header-notifications"
|
|
},
|
|
{
|
|
key: "recent",
|
|
icon: <ClockCircleFilled />,
|
|
id: "header-recent",
|
|
children: recentItems.map((i, idx) => ({
|
|
key: idx,
|
|
id: `header-recent-${idx}`,
|
|
label: <Link to={i.url}>{i.label}</Link>
|
|
}))
|
|
},
|
|
{
|
|
key: "user",
|
|
icon: <UserOutlined />,
|
|
// label: currentUser.displayName || currentUser.email || t("general.labels.unknown"),
|
|
children: [
|
|
{
|
|
key: "signout",
|
|
id: "header-signout",
|
|
icon: <Icon component={FiLogOut} />,
|
|
danger: true,
|
|
label: t("user.actions.signout"),
|
|
onClick: () => signOutStart()
|
|
},
|
|
{
|
|
key: "help",
|
|
id: "header-help",
|
|
icon: <Icon component={QuestionCircleFilled} />,
|
|
label: t("menus.header.help"),
|
|
onClick: () => {
|
|
window.open("https://help.imex.online/", "_blank");
|
|
}
|
|
},
|
|
...(InstanceRenderManager({
|
|
imex: true,
|
|
rome: false
|
|
})
|
|
? [
|
|
{
|
|
key: "rescue",
|
|
id: "header-rescue",
|
|
icon: <Icon component={CarFilled} />,
|
|
label: t("menus.header.rescueme"),
|
|
onClick: () => {
|
|
window.open("https://imexrescue.com/", "_blank");
|
|
}
|
|
}
|
|
]
|
|
: []),
|
|
{
|
|
key: "shiftclock",
|
|
id: "header-shiftclock",
|
|
icon: <Icon component={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>
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Layout.Header style={{ padding: 0 }}>
|
|
{isMobile ? (
|
|
<Menu
|
|
mode="horizontal"
|
|
theme="dark"
|
|
selectedKeys={[selectedHeader]}
|
|
onClick={handleMenuClick}
|
|
subMenuCloseDelay={0.3}
|
|
items={menuItems}
|
|
style={{ width: "100%" }}
|
|
/>
|
|
) : (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
width: "100%"
|
|
}}
|
|
>
|
|
<Menu
|
|
mode="horizontal"
|
|
theme="dark"
|
|
selectedKeys={[selectedHeader]}
|
|
onClick={handleMenuClick}
|
|
subMenuCloseDelay={0.3}
|
|
items={menuItems.slice(0, -3)}
|
|
style={{
|
|
flex: "0 1 auto",
|
|
justifyContent: "flex-start",
|
|
minWidth: 0,
|
|
overflow: "visible"
|
|
}}
|
|
/>
|
|
<div style={{ flex: "1 0 0" }} />
|
|
<Menu
|
|
mode="horizontal"
|
|
theme="dark"
|
|
selectedKeys={[selectedHeader]}
|
|
onClick={handleMenuClick}
|
|
subMenuCloseDelay={0.3}
|
|
items={menuItems.slice(-3)}
|
|
style={{
|
|
flex: "0 0 auto",
|
|
justifyContent: "flex-end",
|
|
overflow: "visible"
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Layout.Header>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Header);
|