538 lines
16 KiB
JavaScript
538 lines
16 KiB
JavaScript
import { useTreatments } from "@splitsoftware/splitio-react";
|
|
import Icon, {
|
|
BankFilled,
|
|
BarChartOutlined,
|
|
CarFilled,
|
|
ClockCircleFilled,
|
|
CheckCircleOutlined,
|
|
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 { 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={(e) => {
|
|
handleMenuClick(e);
|
|
}}
|
|
subMenuCloseDelay={0.3}
|
|
items={[
|
|
{
|
|
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>
|
|
),
|
|
},
|
|
{
|
|
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>
|
|
),
|
|
},
|
|
{ type: "divider" },
|
|
{
|
|
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: [
|
|
{
|
|
key: "bills",
|
|
icon: <Icon component={FaFileInvoiceDollar} />,
|
|
label: (
|
|
<Link to="/manage/bills">{t("menus.header.bills")}</Link>
|
|
),
|
|
},
|
|
{
|
|
key: "enterbills",
|
|
icon: <Icon component={GiPayMoney} />,
|
|
onClick: () => {
|
|
setBillEnterContext({
|
|
actions: {},
|
|
context: {},
|
|
});
|
|
},
|
|
label: t("menus.header.enterbills"),
|
|
},
|
|
...(Simple_Inventory.treatment === "on"
|
|
? [
|
|
{
|
|
type: "divider",
|
|
},
|
|
{
|
|
key: "inventory",
|
|
icon: <Icon component={FaFileInvoiceDollar} />,
|
|
label: (
|
|
<Link to="/manage/inventory">
|
|
{t("menus.header.inventory")}
|
|
</Link>
|
|
),
|
|
},
|
|
]
|
|
: []),
|
|
{ type: "divider" },
|
|
{
|
|
key: "allpayments",
|
|
icon: <BankFilled />,
|
|
label: (
|
|
<Link to="/manage/payments">
|
|
{t("menus.header.allpayments")}
|
|
</Link>
|
|
),
|
|
},
|
|
{
|
|
key: "enterpayments",
|
|
onClick: () => {
|
|
setPaymentContext({
|
|
actions: {},
|
|
context: null,
|
|
});
|
|
},
|
|
icon: <Icon component={FaCreditCard} />,
|
|
label: t("menus.header.enterpayment"),
|
|
},
|
|
{ type: "divider" },
|
|
{
|
|
key: "timetickets",
|
|
icon: <FieldTimeOutlined />,
|
|
label: (
|
|
<Link to="/manage/timetickets">
|
|
{t("menus.header.timetickets")}
|
|
</Link>
|
|
),
|
|
},
|
|
{
|
|
key: "entertimetickets",
|
|
icon: <Icon component={GiPlayerTime} />,
|
|
onClick: () => {
|
|
setTimeTicketContext({
|
|
actions: {},
|
|
context: {},
|
|
});
|
|
},
|
|
label: t("menus.header.entertimeticket"),
|
|
},
|
|
{ type: "divider" },
|
|
{
|
|
key: "accountingexport",
|
|
icon: <ExportOutlined />,
|
|
|
|
label: t("menus.header.export"),
|
|
children: [
|
|
{
|
|
key: "receivables",
|
|
label: (
|
|
<Link to="/manage/accounting/receivables">
|
|
{t("menus.header.accounting-receivables")}
|
|
</Link>
|
|
),
|
|
},
|
|
...(!(
|
|
(bodyshop && bodyshop.cdk_dealerid) ||
|
|
(bodyshop && bodyshop.pbs_serialnumber)
|
|
) || DmsAp.treatment === "on"
|
|
? [
|
|
{
|
|
key: "payables",
|
|
label: (
|
|
<Link to="/manage/accounting/payables">
|
|
{t("menus.header.accounting-payables")}
|
|
</Link>
|
|
),
|
|
},
|
|
]
|
|
: []),
|
|
|
|
...(!(
|
|
(bodyshop && bodyshop.cdk_dealerid) ||
|
|
(bodyshop && bodyshop.pbs_serialnumber)
|
|
)
|
|
? [
|
|
{
|
|
key: "payments",
|
|
label: (
|
|
<Link to="/manage/accounting/payments">
|
|
{t("menus.header.accounting-payments")}
|
|
</Link>
|
|
),
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
key: "export-logs",
|
|
label: (
|
|
<Link to="/manage/accounting/exportlogs">
|
|
{t("menus.header.export-logs")}
|
|
</Link>
|
|
),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
|
|
{
|
|
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">{t("menus.header.shop_config")}</Link>
|
|
),
|
|
},
|
|
{
|
|
key: "dashboard",
|
|
icon: <DashboardFilled />,
|
|
label: (
|
|
<Link to="/manage/dashboard">
|
|
{t("menus.header.dashboard")}
|
|
</Link>
|
|
),
|
|
},
|
|
{
|
|
key: "reportcenter",
|
|
icon: <BarChartOutlined />,
|
|
onClick: () => {
|
|
setReportCenterContext({
|
|
actions: {},
|
|
context: {},
|
|
});
|
|
},
|
|
label: t("menus.header.reportcenter"),
|
|
},
|
|
{
|
|
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",
|
|
danger: true,
|
|
onClick: () => signOutStart(),
|
|
label: t("user.actions.signout"),
|
|
},
|
|
{
|
|
key: "help",
|
|
icon: <Icon component={QuestionCircleFilled} />,
|
|
onClick: () => {
|
|
window.open("https://help.imex.online/", "_blank");
|
|
},
|
|
label: t("menus.header.help"),
|
|
},
|
|
{
|
|
key: "rescue",
|
|
onClick: () => {
|
|
window.open("https://imexrescue.com/", "_blank");
|
|
},
|
|
label: t("menus.header.rescueme"),
|
|
},
|
|
{
|
|
key: "shiftclock",
|
|
label: (
|
|
<Link to="/manage/shiftclock">
|
|
{t("menus.header.shiftclock")}
|
|
</Link>
|
|
),
|
|
},
|
|
{
|
|
key: "profile",
|
|
label: (
|
|
<Link to="/manage/profile">
|
|
{t("menus.currentuser.profile")}
|
|
</Link>
|
|
),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: "recent",
|
|
label: <ClockCircleFilled />,
|
|
children: recentItems.map((i, idx) => ({
|
|
key: idx,
|
|
label: <Link to={i.url}>{i.label}</Link>,
|
|
})),
|
|
},
|
|
]}
|
|
/>
|
|
</Layout.Header>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Header);
|