bodyshop/client/src/components/header/header.component.jsx

import Icon, {
  CarFilled,
  ClockCircleFilled,
  DollarCircleFilled,
  FileAddFilled,
  FileFilled,
  GlobalOutlined,
  HomeFilled,
  ImportOutlined,
  LineChartOutlined,
  ScheduleOutlined,
  TeamOutlined,
  UnorderedListOutlined,
  UserOutlined,
  ToolFilled,
} from "@ant-design/icons";
import { Avatar, 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 { 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 { selectCurrentUser } from "../../redux/user/user.selectors";
import GlobalSearch from "../global-search/global-search.component";
import "./header.styles.scss";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  recentItems: selectRecentItems,
  selectedHeader: selectSelectedHeader,
});

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" })),
  signOutStart: () => dispatch(signOutStart()),
});

function Header({
  handleMenuClick,
  currentUser,
  selectedHeader,
  signOutStart,
  setBillEnterContext,
  setTimeTicketContext,
  setPaymentContext,
  recentItems,
}) {
  const { t } = useTranslation();

  return (
    <Menu
      mode="horizontal"
      theme="dark"
      // style={{ backgroundColor: "#eee" }}
      className="header-main-menu"
      selectedKeys={[selectedHeader]}
      onClick={handleMenuClick}
    >
      <Menu.Item key="home">
        <Link to="/manage">
          <HomeFilled />
          {t("menus.header.home")}
        </Link>
      </Menu.Item>
      <Menu.Item key="schedule">
        <Link to="/manage/schedule">
          <Icon component={FaCalendarAlt} />
          {t("menus.header.schedule")}
        </Link>
      </Menu.Item>
      <Menu.SubMenu
        title={
          <span>
            <Icon component={FaCarCrash} />
            <span>{t("menus.header.jobs")}</span>
          </span>
        }
      >
        <Menu.Item key="activejobs">
          <FileFilled />
          <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
        </Menu.Item>
        <Menu.Item key="parts-queue">
          <Link to="/manage/partsqueue">
            <ToolFilled /> {t("menus.header.parts-queue")}
          </Link>
        </Menu.Item>
        <Menu.Item key="availablejobs">
          <Link to="/manage/available">
            <ImportOutlined /> {t("menus.header.availablejobs")}
          </Link>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="alljobs">
          <UnorderedListOutlined />
          <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
        </Menu.Item>
        <Menu.Divider />

        <Menu.Item key="productionlist">
          <Link to="/manage/production/list">
            <ScheduleOutlined />
            {t("menus.header.productionlist")}
          </Link>
        </Menu.Item>
        <Menu.Item key="productionboard">
          <Link to="/manage/production/board">
            <Icon component={BsKanban} />
            {t("menus.header.productionboard")}
          </Link>
        </Menu.Item>
        <Menu.Divider />

        <Menu.Item key="scoreboard">
          <LineChartOutlined />
          <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
        </Menu.Item>
      </Menu.SubMenu>
      <Menu.SubMenu
        title={
          <span>
            <UserOutlined />
            <span>{t("menus.header.customers")}</span>
          </span>
        }
      >
        <Menu.Item key="owners">
          <Link to="/manage/owners">
            <TeamOutlined />
            {t("menus.header.owners")}
          </Link>
        </Menu.Item>
        <Menu.Item key="vehicles">
          <Link to="/manage/vehicles">
            <CarFilled />
            {t("menus.header.vehicles")}
          </Link>
        </Menu.Item>
      </Menu.SubMenu>
      <Menu.SubMenu
        title={
          <span>
            <CarFilled />
            <span>{t("menus.header.courtesycars")}</span>
          </span>
        }
      >
        <Menu.Item key="courtesycarsall">
          <Link to="/manage/courtesycars">
            <CarFilled />
            {t("menus.header.courtesycars-all")}
          </Link>
        </Menu.Item>
        <Menu.Item key="contracts">
          <Link to="/manage/courtesycars/contracts">
            <FileFilled />
            {t("menus.header.courtesycars-contracts")}
          </Link>
        </Menu.Item>
        <Menu.Item key="newcontract">
          <Link to="/manage/courtesycars/contracts/new">
            <FileAddFilled />
            {t("menus.header.courtesycars-newcontract")}
          </Link>
        </Menu.Item>
      </Menu.SubMenu>
      <Menu.SubMenu
        title={
          <span>
            <DollarCircleFilled />
            <span>{t("menus.header.accounting")}</span>
          </span>
        }
      >
        <Menu.Item key="bills">
          <Link to="/manage/bills">{t("menus.header.bills")}</Link>
        </Menu.Item>
        <Menu.Item
          key="enterbills"
          onClick={() => {
            setBillEnterContext({
              actions: {},
              context: {},
            });
          }}
        >
          <Icon component={FaFileInvoiceDollar} />
          {t("menus.header.enterbills")}
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="allpayments">
          <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
        </Menu.Item>
        <Menu.Item
          key="enterpayments"
          onClick={() => {
            setPaymentContext({
              actions: {},
              context: null,
            });
          }}
        >
          <Icon component={FaCreditCard} />
          {t("menus.header.enterpayment")}
        </Menu.Item>
        <Menu.Divider />

        <Menu.Item key="timetickets">
          <Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>
        </Menu.Item>
        <Menu.Item
          key="entertimetickets"
          onClick={() => {
            setTimeTicketContext({
              actions: {},
              context: {},
            });
          }}
        >
          {t("menus.header.entertimeticket")}
        </Menu.Item>
        <Menu.Divider />

        <Menu.SubMenu title={t("menus.header.export")}>
          <Menu.Item key="receivables">
            <Link to="/manage/accounting/receivables">
              {t("menus.header.accounting-receivables")}
            </Link>
          </Menu.Item>
          <Menu.Item key="payables">
            <Link to="/manage/accounting/payables">
              {t("menus.header.accounting-payables")}
            </Link>
          </Menu.Item>
          <Menu.Item key="payments">
            <Link to="/manage/accounting/payments">
              {t("menus.header.accounting-payments")}
            </Link>
          </Menu.Item>
        </Menu.SubMenu>
      </Menu.SubMenu>
      <Menu.SubMenu title={t("menus.header.shop")}>
        <Menu.Item key="shop">
          <Link to="/manage/shop">{t("menus.header.shop_config")}</Link>
        </Menu.Item>

        <Menu.Item key="shop-templates">
          <Link to="/manage/shop/templates">
            {t("menus.header.shop_templates")}
          </Link>
        </Menu.Item>

        <Menu.Item key="shop-vendors">
          <Link to="/manage/shop/vendors">
            {t("menus.header.shop_vendors")}
          </Link>
        </Menu.Item>
        <Menu.Item key="shop-csi">
          <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
        </Menu.Item>
      </Menu.SubMenu>
      <Menu.Item>
        <GlobalSearch />
      </Menu.Item>
      <Menu.SubMenu title={<ClockCircleFilled />}>
        {recentItems.map((i, idx) => (
          <Menu.Item key={idx}>
            <Link to={i.url}>{i.label}</Link>
          </Menu.Item>
        ))}
      </Menu.SubMenu>
      <Menu.SubMenu
        title={
          <div>
            {currentUser.photoURL ? (
              <Avatar
                src={currentUser.photoURL}
                style={{
                  margin: "10px",
                }}
              />
            ) : (
              <Avatar
                style={{
                  backgroundColor: "#87d068",
                  margin: "10px",
                }}
                icon={<UserOutlined />}
              />
            )}

            {currentUser.displayName ||
              currentUser.email ||
              t("general.labels.unknown")}
          </div>
        }
      >
        <Menu.Item danger onClick={() => signOutStart()}>
          {t("user.actions.signout")}
        </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
          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>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);