418 lines
14 KiB
JavaScript
418 lines
14 KiB
JavaScript
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,
|
|
} from "@ant-design/icons";
|
|
import { useTreatments } from "@splitsoftware/splitio-react";
|
|
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";
|
|
|
|
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()),
|
|
});
|
|
|
|
function Header({
|
|
handleMenuClick,
|
|
currentUser,
|
|
bodyshop,
|
|
selectedHeader,
|
|
signOutStart,
|
|
setBillEnterContext,
|
|
setTimeTicketContext,
|
|
setPaymentContext,
|
|
setReportCenterContext,
|
|
recentItems,
|
|
}) {
|
|
const { Simple_Inventory } = useTreatments(
|
|
["Simple_Inventory"],
|
|
{},
|
|
bodyshop && bodyshop.imexshopid
|
|
);
|
|
const { DmsAp } = useTreatments(
|
|
["DmsAp"],
|
|
{},
|
|
bodyshop && bodyshop.imexshopid
|
|
);
|
|
|
|
const { t } = useTranslation();
|
|
|
|
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>
|
|
<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,
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
{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>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Header);
|