Added breadcrumb object + breadcrumbs for major pages.

client/src/components/breadcrumbs/breadcrumbs.component.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Breadcrumb } from "antd";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBreadcrumbs } from "../../redux/application/application.selectors";
+import { Link } from "react-router-dom";
+
+const mapStateToProps = createStructuredSelector({
+  breadcrumbs: selectBreadcrumbs,
+});
+
+export function BreadCrumbs({ breadcrumbs }) {
+  return (
+    <Breadcrumb>
+      <Breadcrumb.Item>Home</Breadcrumb.Item>
+      {breadcrumbs.map((item) =>
+        item.link ? (
+          <Breadcrumb.Item key={item.label}>
+            <Link to={item.link}>{item.label} </Link>
+          </Breadcrumb.Item>
+        ) : (
+          <Breadcrumb.Item key={item.label}>{item.label}</Breadcrumb.Item>
+        )
+      )}
+    </Breadcrumb>
+  );
+}
+export default connect(mapStateToProps, null)(BreadCrumbs);

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

@@ -15,14 +15,26 @@ import { Link } from "react-router-dom";
 import UserImage from "../../assets/User.svg";
 import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
 
-export default ({
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setModalContext } from "../../redux/modals/modals.actions";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = (dispatch) => ({
+  setInvoiceEnterContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
+});
+
+function Header({
   landingHeader,
   selectedNavItem,
   logo,
   handleMenuClick,
   currentUser,
   signOutStart,
-}) => {
+  setInvoiceEnterContext,
+}) {
   const { t } = useTranslation();
   //TODO Add
 
@@ -175,6 +187,17 @@ export default ({
                 </span>
               }
             >
+              <Menu.Item
+                key="enterinvoices"
+                onClick={() => {
+                  setInvoiceEnterContext({
+                    actions: {},
+                    context: {},
+                  });
+                }}
+              >
+                {t("menus.header.enterinvoices")}
+              </Menu.Item>
               <Menu.Item key="invoices">
                 <Link to="/manage/invoices">{t("menus.header.invoices")}</Link>
               </Menu.Item>
@@ -238,4 +261,6 @@ export default ({
       </Col>
     </Row>
   );
-};
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header);

client/src/components/job-totals-table/job-totals-table.component.jsx

@@ -1,8 +1,7 @@
+import { Col, List, Row } from "antd";
 import React from "react";
-import { List, Row, Col } from "antd";
-import { useTranslation } from "react-i18next";
 export default function JobsTotalsTableComponent({ totals }) {
-  const { t } = useTranslation();
+  //const { t } = useTranslation();
   if (!!!totals) return null;
 
   return (