Additional Menu Refactors

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2023-12-29 15:18:38 -05:00
parent 07b46ed92b
commit a0cb30f986
4 changed files with 454 additions and 415 deletions

View File

@@ -1,430 +1,469 @@
import Icon, {
BankFilled,
BarChartOutlined,
CarFilled,
CheckCircleOutlined,
ClockCircleFilled,
DashboardFilled,
DollarCircleFilled,
ExportOutlined,
FieldTimeOutlined,
FileAddFilled,
FileAddOutlined,
FileFilled,
//GlobalOutlined,
HomeFilled,
ImportOutlined,
LineChartOutlined,
PaperClipOutlined,
PhoneOutlined,
QuestionCircleFilled,
ScheduleOutlined,
SettingOutlined,
TeamOutlined,
ToolFilled,
UnorderedListOutlined,
UserOutlined,
BankFilled,
BarChartOutlined,
CarFilled,
CheckCircleOutlined,
ClockCircleFilled,
DashboardFilled,
DollarCircleFilled,
ExportOutlined,
FieldTimeOutlined,
FileAddFilled,
FileAddOutlined,
FileFilled,
HomeFilled,
ImportOutlined,
LineChartOutlined,
PaperClipOutlined,
PhoneOutlined,
QuestionCircleFilled,
ScheduleOutlined,
SettingOutlined,
TeamOutlined,
ToolFilled,
UnorderedListOutlined,
UserOutlined,
} from "@ant-design/icons";
import {useSplitTreatments} from "@splitsoftware/splitio-react";
import { Layout, Menu } from "antd";
import {Layout, Menu} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { BsKanban } from "react-icons/bs";
import {
FaCalendarAlt,
FaCarCrash,
FaCreditCard,
FaFileInvoiceDollar,
} from "react-icons/fa";
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 {useTranslation} from "react-i18next";
import {BsKanban} from "react-icons/bs";
import {FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar,} from "react-icons/fa";
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 {FiLogOut} from "react-icons/fi";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
recentItems: selectRecentItems,
selectedHeader: selectSelectedHeader,
bodyshop: selectBodyshop,
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" })),
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"})),
});
function Header({
handleMenuClick,
currentUser,
bodyshop,
selectedHeader,
signOutStart,
setBillEnterContext,
setTimeTicketContext,
setPaymentContext,
setReportCenterContext,
recentItems,
setCardPaymentContext,
}) {
// TODO: Client Update - New Split Treatments usage example
const { treatments: {ImEXPay, DmsAp, Simple_Inventory} } = useSplitTreatments({
attributes: {},
names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
splitKey: bodyshop && bodyshop.imexshopid,
});
function Header({handleMenuClick, currentUser, bodyshop, selectedHeader, signOutStart, setBillEnterContext, setTimeTicketContext, setPaymentContext, setReportCenterContext, recentItems, setCardPaymentContext}) {
const { t } = useTranslation();
const {treatments: {ImEXPay, DmsAp, Simple_Inventory}} = useSplitTreatments({
attributes: {},
names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
splitKey: bodyshop && bodyshop.imexshopid,
});
return (
<Layout.Header>
<Menu
mode="horizontal"
//theme="light"
theme={"dark"}
selectedKeys={[selectedHeader]}
onClick={handleMenuClick}
subMenuCloseDelay={0.3}
>
<Menu.Item key="home" icon={<HomeFilled />}>
<Link to="/manage/">{t("menus.header.home")}</Link>
</Menu.Item>
<Menu.Item key="schedule" icon={<Icon component={FaCalendarAlt} />}>
<Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
</Menu.Item>
<Menu.SubMenu
key="jobssubmenu"
icon={<Icon component={FaCarCrash} />}
title={t("menus.header.jobs")}
>
<Menu.Item key="activejobs" icon={<FileFilled />}>
<Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
</Menu.Item>
<Menu.Item key="readyjobs" icon={<CheckCircleOutlined />}>
<Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
</Menu.Item>
<Menu.Item key="parts-queue" icon={<ToolFilled />}>
<Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
</Menu.Item>
<Menu.Item key="availablejobs" icon={<ImportOutlined />}>
<Link to="/manage/available">
{t("menus.header.availablejobs")}
</Link>
</Menu.Item>
<Menu.Item key="newjob" icon={<FileAddOutlined />}>
<Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
</Menu.Item>
<Menu.Divider key="div1" />
<Menu.Item key="alljobs" icon={<UnorderedListOutlined />}>
<Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
</Menu.Item>
<Menu.Divider key="div2" />
<Menu.Item key="productionlist" icon={<ScheduleOutlined />}>
<Link to="/manage/production/list">
{t("menus.header.productionlist")}
</Link>
</Menu.Item>
<Menu.Item key="productionboard" icon={<Icon component={BsKanban} />}>
<Link to="/manage/production/board">
{t("menus.header.productionboard")}
</Link>
</Menu.Item>
<Menu.Divider key="div3" />
<Menu.Item key="scoreboard" icon={<LineChartOutlined />}>
<Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu
key="customers"
icon={<UserOutlined />}
title={t("menus.header.customers")}
>
<Menu.Item key="owners" icon={<TeamOutlined />}>
<Link to="/manage/owners">{t("menus.header.owners")}</Link>
</Menu.Item>
<Menu.Item key="vehicles" icon={<CarFilled />}>
<Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu
key="ccs"
icon={<CarFilled />}
title={t("menus.header.courtesycars")}
>
<Menu.Item key="courtesycarsall" icon={<CarFilled />}>
<Link to="/manage/courtesycars">
{t("menus.header.courtesycars-all")}
</Link>
</Menu.Item>
<Menu.Item key="contracts" icon={<FileFilled />}>
<Link to="/manage/courtesycars/contracts">
{t("menus.header.courtesycars-contracts")}
</Link>
</Menu.Item>
<Menu.Item key="newcontract" icon={<FileAddFilled />}>
<Link to="/manage/courtesycars/contracts/new">
{t("menus.header.courtesycars-newcontract")}
</Link>
</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu
key="accounting"
icon={<DollarCircleFilled />}
title={t("menus.header.accounting")}
>
<Menu.Item
key="bills"
icon={<Icon component={FaFileInvoiceDollar} />}
>
<Link to="/manage/bills">{t("menus.header.bills")}</Link>
</Menu.Item>
<Menu.Item
key="enterbills"
icon={<Icon component={GiPayMoney} />}
onClick={() => {
setBillEnterContext({
actions: {},
context: {},
});
}}
>
{t("menus.header.enterbills")}
</Menu.Item>
{Simple_Inventory.treatment === "on" && (
<>
<Menu.Divider key="div4" />
<Menu.Item
key="inventory"
icon={<Icon component={FaFileInvoiceDollar} />}
>
<Link to="/manage/inventory">
{t("menus.header.inventory")}
</Link>
</Menu.Item>
</>
)}
<Menu.Divider key="div7" />
<Menu.Item key="allpayments" icon={<BankFilled />}>
<Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
</Menu.Item>
<Menu.Item
key="enterpayments"
onClick={() => {
setPaymentContext({
actions: {},
context: null,
});
}}
icon={<Icon component={FaCreditCard} />}
>
{t("menus.header.enterpayment")}
</Menu.Item>
{ImEXPay.treatment === "on" && (
<Menu.Item
key="entercardpayments"
onClick={() => {
setCardPaymentContext({
actions: {},
context: {},
const {t} = useTranslation();
const accountingChildren = [
{
key: 'bills',
icon: <Icon component={FaFileInvoiceDollar}/>,
label: (<Link to="/manage/bills">{t("menus.header.bills")}</Link>)
},
{
key: 'enterbills',
icon: <Icon component={GiPayMoney}/>,
label: t("menus.header.enterbills"),
onClick: () => {
setBillEnterContext({
actions: {},
context: {},
});
}}
icon={<Icon component={FaCreditCard} />}
>
{t("menus.header.entercardpayment")}
</Menu.Item>
)}
<Menu.Divider key="div5" />
<Menu.Item key="timetickets" icon={<FieldTimeOutlined />}>
<Link to="/manage/timetickets">
{t("menus.header.timetickets")}
</Link>
</Menu.Item>
<Menu.Item
key="entertimetickets"
icon={<Icon component={GiPlayerTime} />}
onClick={() => {
setTimeTicketContext({
actions: {},
context: {
created_by: currentUser.displayName
? currentUser.email.concat(" | ", currentUser.displayName)
: currentUser.email,
}
},
];
if (Simple_Inventory.treatment === "on") {
accountingChildren.push(
{
type: 'divider',
},
{
key: 'inventory',
icon: <Icon component={FaFileInvoiceDollar}/>,
label: (<Link to="/manage/inventory">{t("menus.header.inventory")}</Link>)
}
);
}
accountingChildren.push(
{
type: 'divider'
},
{
key: 'allpayments',
icon: <BankFilled/>,
label: (<Link to="/manage/payments">{t("menus.header.allpayments")}</Link>)
},
{
key: 'enterpayments',
icon: <Icon component={FaCreditCard}/>,
label: t("menus.header.enterpayment"),
onClick: () => {
setPaymentContext({
actions: {},
context: null,
});
},
}
);
if (ImEXPay.treatment === "on") {
accountingChildren.push({
key: 'entercardpayments',
icon: <Icon component={FaCreditCard}/>,
label: t("menus.header.entercardpayment"),
onClick: () => {
setCardPaymentContext({
actions: {},
context: {},
});
},
});
}
accountingChildren.push(
{
type: 'divider',
},
{
key: 'timetickets',
icon: <FieldTimeOutlined/>,
label: (<Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>)
},
{
key: 'entertimetickets',
icon: <Icon component={GiPlayerTime}/>,
label: t("menus.header.entertimeticket"),
onClick: () => {
setTimeTicketContext({
actions: {},
context: {
created_by: currentUser.displayName
? currentUser.email.concat(" | ", currentUser.displayName)
: currentUser.email,
},
});
},
},
{
type: 'divider',
}
);
const accountingExportChildren = [
{
key: 'receivables',
label: (<Link to="/manage/accounting/receivables">{t("menus.header.accounting-receivables")}</Link>)
}
]
if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
accountingExportChildren.push({
key: 'payables',
label: (<Link to="/manage/accounting/payables">{t("menus.header.accounting-payables")}</Link>)
});
}
if (!(
(bodyshop && bodyshop.cdk_dealerid) ||
(bodyshop && bodyshop.pbs_serialnumber)
)) {
accountingExportChildren.push({
key: 'payments',
label: (<Link to="/manage/accounting/payments">{t("menus.header.accounting-payments")}</Link>)
});
}
accountingExportChildren.push(
{
key: 'exportlogs',
label: (<Link to="/manage/accounting/exportlogs">{t("menus.header.export-logs")}</Link>)
},
{
key: 'accountingexport',
icon: <ExportOutlined/>,
label: t("menus.header.export"),
children: accountingExportChildren
}
);
const menuItems = [
{
key: 'home',
icon: <HomeFilled/>,
label: (<Link to="/manage/">{t("menus.header.home")}</Link>)
},
{
key: 'schedule',
icon: <Icon component={FaCalendarAlt}/>,
label: (<Link to="/manage/schedule">{t("menus.header.schedule")}</Link>)
},
{
key: 'jobssubmenu',
icon: <Icon component={FaCarCrash}/>,
label: t("menus.header.jobs"),
children: [
{
key: 'activejobs',
icon: <FileFilled/>,
label: (<Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>)
},
});
}}
>
{t("menus.header.entertimeticket")}
</Menu.Item>
<Menu.Divider key="div6" />
<Menu.SubMenu
key="accountingexport"
title={t("menus.header.export")}
icon={<ExportOutlined />}
>
<Menu.Item key="receivables">
<Link to="/manage/accounting/receivables">
{t("menus.header.accounting-receivables")}
</Link>
</Menu.Item>
{(!(
(bodyshop && bodyshop.cdk_dealerid) ||
(bodyshop && bodyshop.pbs_serialnumber)
) ||
DmsAp.treatment === "on") && (
<Menu.Item key="payables">
<Link to="/manage/accounting/payables">
{t("menus.header.accounting-payables")}
</Link>
</Menu.Item>
)}
{!(
(bodyshop && bodyshop.cdk_dealerid) ||
(bodyshop && bodyshop.pbs_serialnumber)
) && (
<Menu.Item key="payments">
<Link to="/manage/accounting/payments">
{t("menus.header.accounting-payments")}
</Link>
</Menu.Item>
)}
<Menu.Item key="export-logs">
<Link to="/manage/accounting/exportlogs">
{t("menus.header.export-logs")}
</Link>
</Menu.Item>
</Menu.SubMenu>
</Menu.SubMenu>
<Menu.Item key="phonebook" icon={<PhoneOutlined />}>
<Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
</Menu.Item>
<Menu.Item key="temporarydocs" icon={<PaperClipOutlined />}>
<Link to="/manage/temporarydocs">
{t("menus.header.temporarydocs")}
</Link>
</Menu.Item>
<Menu.SubMenu
key="shopsubmenu"
title={t("menus.header.shop")}
icon={<SettingOutlined />}
>
<Menu.Item key="shop" icon={<Icon component={GiSettingsKnobs} />}>
<Link to="/manage/shop?tab=info">
{t("menus.header.shop_config")}
</Link>
</Menu.Item>
<Menu.Item key="dashboard" icon={<DashboardFilled />}>
<Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
</Menu.Item>
<Menu.Item
key="reportcenter"
icon={<BarChartOutlined />}
onClick={() => {
setReportCenterContext({
actions: {},
context: {},
});
}}
>
{t("menus.header.reportcenter")}
</Menu.Item>
<Menu.Item
key="shop-vendors"
icon={<Icon component={IoBusinessOutline} />}
>
<Link to="/manage/shop/vendors">
{t("menus.header.shop_vendors")}
</Link>
</Menu.Item>
<Menu.Item key="shop-csi" icon={<Icon component={RiSurveyLine} />}>
<Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu
key="user"
title={
currentUser.displayName ||
currentUser.email ||
t("general.labels.unknown")
}
>
<Menu.Item key="signout" danger onClick={() => signOutStart()}>
{t("user.actions.signout")}
</Menu.Item>
<Menu.Item
key="help"
onClick={() => {
window.open("https://help.imex.online/", "_blank");
}}
icon={<Icon component={QuestionCircleFilled} />}
>
{t("menus.header.help")}
</Menu.Item>
<Menu.Item
key="rescue"
onClick={() => {
window.open("https://imexrescue.com/", "_blank");
}}
>
{t("menus.header.rescueme")}
</Menu.Item>
<Menu.Item key="shiftclock">
<Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
</Menu.Item>
<Menu.Item key="profile">
<Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
</Menu.Item>
{
// <Menu.SubMenu
// key="langselecter"
// title={
// <span>
// <GlobalOutlined />
// <span>{t("menus.currentuser.languageselector")}</span>
// </span>
// }
// >
// <Menu.Item actiontype="lang-select" key="en-US">
// {t("general.languages.english")}
// </Menu.Item>
// <Menu.Item actiontype="lang-select" key="fr-CA">
// {t("general.languages.french")}
// </Menu.Item>
// <Menu.Item actiontype="lang-select" key="es-MX">
// {t("general.languages.spanish")}
// </Menu.Item>
// </Menu.SubMenu>
}
</Menu.SubMenu>
<Menu.SubMenu key="recent" title={<ClockCircleFilled />}>
{recentItems.map((i, idx) => (
<Menu.Item key={idx}>
<Link to={i.url}>{i.label}</Link>
</Menu.Item>
))}
</Menu.SubMenu>
</Menu>
</Layout.Header>
);
{
key: 'readyjobs',
icon: <CheckCircleOutlined/>,
label: (<Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>)
},
{
key: 'parts-queue',
icon: <ToolFilled/>,
label: (<Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>)
},
{
key: 'availablejobs',
icon: <ImportOutlined/>,
label: (<Link to="/manage/available">{t("menus.header.availablejobs")}</Link>)
},
{
key: 'newjob',
icon: <FileAddOutlined/>,
label: (<Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>)
},
{
type: 'divider',
},
{
key: 'alljobs',
icon: <UnorderedListOutlined/>,
label: (<Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>)
},
{
key: 'productionlist',
icon: <ScheduleOutlined/>,
label: (<Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>)
},
{
key: 'productionboard',
icon: <Icon component={BsKanban}/>,
label: (<Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>)
},
{
type: 'divider',
},
{
key: 'scoreboard',
icon: <LineChartOutlined/>,
label: (<Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>)
},
]
},
{
key: 'customers',
icon: <UserOutlined/>,
label: t("menus.header.customers"),
children: [
{
key: 'owners',
icon: <TeamOutlined/>,
label: (<Link to="/manage/owners">{t("menus.header.owners")}</Link>)
},
{
key: 'vehicles',
icon: <CarFilled/>,
label: (<Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>)
},
]
},
{
key: 'ccs',
icon: <CarFilled/>,
label: t("menus.header.courtesycars"),
children: [
{
key: 'courtesycarsall',
icon: <CarFilled/>,
label: (<Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>)
},
{
key: 'contracts',
icon: <FileFilled/>,
label: (<Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>)
},
{
key: 'newcontract',
icon: <FileAddFilled/>,
label: (<Link
to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>)
},
]
},
{
key: 'accounting',
icon: <DollarCircleFilled/>,
label: t("menus.header.accounting"),
children: accountingChildren,
},
{
key: 'phonebook',
icon: <PhoneOutlined/>,
label: (<Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>)
},
{
key: 'temporarydocs',
icon: <PaperClipOutlined/>,
label: (<Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>)
},
{
key: 'shopsubmenu',
icon: <SettingOutlined/>,
label: t("menus.header.shop"),
children: [
{
key: 'shop',
icon: <Icon component={GiSettingsKnobs}/>,
label: (<Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>)
},
{
key: 'dashboard',
icon: <DashboardFilled/>,
label: (<Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>)
},
{
key: 'reportcenter',
icon: <BarChartOutlined/>,
label: t("menus.header.reportcenter"),
onClick: () => {
setReportCenterContext({
actions: {},
context: {},
});
}
},
{
key: 'shop-vendors',
icon: <Icon component={IoBusinessOutline}/>,
label: (<Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>)
},
{
key: 'shop-csi',
icon: <Icon component={RiSurveyLine}/>,
label: (<Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>)
},
]
},
{
key: 'user',
label: (
currentUser.displayName ||
currentUser.email ||
t("general.labels.unknown")
),
children: [
{
key: 'signout',
icon: <Icon component={FiLogOut}/>,
danger: true,
label: t("user.actions.signout"),
onClick: () => signOutStart()
},
{
key: 'help',
icon: <Icon component={QuestionCircleFilled}/>,
label: t("menus.header.help"),
onClick: () => {
window.open("https://help.imex.online/", "_blank");
}
},
{
key: 'rescue',
icon: <Icon component={CarFilled}/>,
label: t("menus.header.rescueme"),
onClick: () => {
window.open("https://imexrescue.com/", "_blank");
}
},
{
key: 'shiftclock',
icon: <Icon component={GiPlayerTime}/>,
label: (<Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>)
},
{
key: 'profile',
icon: <UserOutlined/>,
label: (<Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>)
},
// {
// key: 'langselecter',
// label: t("menus.currentuser.languageselector"),
// children: [
// {
// key: 'en-US',
// label: t("general.languages.english"),
// onClick: () => {
// window.location.href = "/?lang=en-US";
// }
// },
// {
// key: 'fr-CA',
// label: t("general.languages.french"),
// onClick: () => {
// window.location.href = "/?lang=fr-CA";
// }
// },
// {
// key: 'es-MX',
// label: t("general.languages.spanish"),
// onClick: () => {
// window.location.href = "/?lang=es-MX";
// }
// },
// ]
// },
]
},
{
key: 'recent',
icon: <ClockCircleFilled/>,
children: recentItems.map((i, idx) => ({
key: idx,
label: (<Link to={i.url}>{i.label}</Link>)
})),
}
]
return (
<Layout.Header>
<Menu
mode="horizontal"
//theme="light"
theme={"dark"}
selectedKeys={[selectedHeader]}
onClick={handleMenuClick}
subMenuCloseDelay={0.3}
items={menuItems}
/>
</Layout.Header>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(Header);

View File

@@ -54,7 +54,7 @@ export function ScheduleEventColor({ bodyshop, event }) {
label: color.label,
style: { color: color.color.hex },
})),
{ key: "divider", label: <hr />, disabled: true },
{ type: "divider" },
{ key: "null", label: t("general.actions.clear") },
]
};

View File

@@ -416,7 +416,7 @@ export function JobLinesComponent({
{ key: "PAN", label: t("joblines.fields.part_types.PAN") },
{ key: "PAL", label: t("joblines.fields.part_types.PAL") },
{ key: "PAS", label: t("joblines.fields.part_types.PAS") },
{ key: "divider", label: <hr />, disabled: true },
{ type: 'divider' },
{ key: "clear", label: t("general.labels.clear") },
]
}

View File

@@ -89,7 +89,7 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
})),
...(job.converted
? [
{ key: "divider", label: <hr />, disabled: true },
{ type: "divider" },
...otherStages.map((item) => ({
key: item,
label: item,