Added selected header navigation BOD-164

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

@@ -26,7 +26,10 @@ import {
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { selectRecentItems } from "../../redux/application/application.selectors";
+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";
@@ -36,6 +39,7 @@ import "./header.styles.scss";
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   recentItems: selectRecentItems,
+  selectedHeader: selectSelectedHeader,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -51,6 +55,7 @@ const mapDispatchToProps = (dispatch) => ({
 function Header({
   handleMenuClick,
   currentUser,
+  selectedHeader,
   signOutStart,
   setInvoiceEnterContext,
   setTimeTicketContext,
@@ -64,7 +69,7 @@ function Header({
       mode="horizontal"
       theme="dark"
       className="header-main-menu"
-      selectedKeys={["home"]}
+      selectedKeys={[selectedHeader]}
       onClick={handleMenuClick}
     >
       <Menu.Item key="home">

client/src/components/header/header.styles.scss

@@ -4,6 +4,6 @@
   max-height: 3.5rem;
 }
 .header-main-menu {
-  width: 80vw;
+  //width: 95vw;
-  float: left;
+  //float: left;
 }

client/src/components/job-search-select/job-search-select.component.jsx

@@ -32,7 +32,7 @@ const JobSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
   const [option, setOption] = useState(value);
 
   useEffect(() => {
-    if (value === option) {
+    if (value === option && value) {
       callIdSearch({ variables: { id: value } });
     }
   }, [value, option, callIdSearch]);
@@ -46,7 +46,7 @@ const JobSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
   const handleSelect = (value) => {
     setOption(value);
     if (value !== option && onChange) {
-      onChange(option);
+      onChange(value);
     }
   };
 
@@ -69,6 +69,7 @@ const JobSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
         filterOption={false}
         onSearch={handleSearch}
         //     onChange={setOption}
+        onChange={handleSelect}
         onSelect={handleSelect}
         notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
         onBlur={onBlur}

client/src/pages/accounting-payables/accounting-payables.container.jsx

@@ -6,7 +6,10 @@ import { createStructuredSelector } from "reselect";
 import AccountingPayablesTable from "../../components/accounting-payables-table/accounting-payables-table.component";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_INVOICES_FOR_EXPORT } from "../../graphql/accounting.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 const mapStateToProps = createStructuredSelector({
@@ -15,19 +18,25 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
-export function AccountingPayablesContainer({ bodyshop, setBreadcrumbs }) {
+export function AccountingPayablesContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const { t } = useTranslation();
 
   useEffect(() => {
     document.title = t("titles.accounting-payables");
+    setSelectedHeader("payables");
     setBreadcrumbs([
       {
         link: "/manage/accounting/payables",
         label: t("titles.bc.accounting-payables"),
       },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   const { loading, error, data } = useQuery(QUERY_INVOICES_FOR_EXPORT);
 

client/src/pages/accounting-payments/accounting-payments.container.jsx

@@ -6,7 +6,10 @@ import { createStructuredSelector } from "reselect";
 import AccountingPaymentsTable from "../../components/accounting-payments-table/accounting-payments-table.component";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_PAYMENTS_FOR_EXPORT } from "../../graphql/accounting.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
@@ -16,19 +19,25 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
-export function AccountingPaymentsContainer({ bodyshop, setBreadcrumbs }) {
+export function AccountingPaymentsContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const { t } = useTranslation();
 
   useEffect(() => {
     document.title = t("titles.accounting-payments");
+    setSelectedHeader("payments");
     setBreadcrumbs([
       {
         link: "/manage/accounting/payments",
         label: t("titles.bc.accounting-payments"),
       },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   const { loading, error, data } = useQuery(QUERY_PAYMENTS_FOR_EXPORT);
 

client/src/pages/accounting-receivables/accounting-receivables.container.jsx

@@ -6,7 +6,10 @@ import { createStructuredSelector } from "reselect";
 import AccountingReceivablesTable from "../../components/accounting-receivables-table/accounting-receivables-table.component";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_JOBS_FOR_EXPORT } from "../../graphql/accounting.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
@@ -16,19 +19,25 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
-export function AccountingReceivablesContainer({ bodyshop, setBreadcrumbs }) {
+export function AccountingReceivablesContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const { t } = useTranslation();
 
   useEffect(() => {
     document.title = t("titles.accounting-receivables");
+    setSelectedHeader("receivables");
     setBreadcrumbs([
       {
         link: "/manage/accounting/receivables",
         label: t("titles.bc.accounting-receivables"),
       },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   const { loading, error, data } = useQuery(QUERY_JOBS_FOR_EXPORT, {
     variables: {

client/src/pages/contract-create/contract-create.page.container.jsx

@@ -7,7 +7,10 @@ import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ContractCreatePageComponent from "./contract-create.page.component";
 
@@ -16,9 +19,14 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
+export function ContractCreatePageContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const history = useHistory();
@@ -70,6 +78,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
 
   useEffect(() => {
     document.title = t("titles.contracts-create");
+    setSelectedHeader("newcontract");
     setBreadcrumbs([
       { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
       {
@@ -81,7 +90,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
         label: t("titles.bc.contracts-create"),
       },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
     <RbacWrapper action="contracts:create">

client/src/pages/contract-detail/contract-detail.page.container.jsx

@@ -16,6 +16,7 @@ import {
 import {
   addRecentItem,
   setBreadcrumbs,
+  setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { CreateRecentItem } from "../../utils/create-recent-item";
 import ContractDetailPageComponent from "./contract-detail.page.component";
@@ -24,9 +25,14 @@ import NotFound from "../../components/not-found/not-found.component";
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
   addRecentItem: (item) => dispatch(addRecentItem(item)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
+export function ContractDetailPageContainer({
+  setBreadcrumbs,
+  addRecentItem,
+  setSelectedHeader,
+}) {
   const { t } = useTranslation();
   const [updateContract] = useMutation(UPDATE_CONTRACT);
   const [form] = Form.useForm();
@@ -37,6 +43,7 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
   });
 
   useEffect(() => {
+    setSelectedHeader("contracts");
     document.title = loading
       ? t("titles.app")
       : error
@@ -76,7 +83,16 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
           `/manage/courtesycars/contracts/${contractId}`
         )
       );
-  }, [t, data, error, loading, setBreadcrumbs, addRecentItem, contractId]);
+  }, [
+    t,
+    data,
+    error,
+    loading,
+    setBreadcrumbs,
+    addRecentItem,
+    contractId,
+    setSelectedHeader,
+  ]);
 
   const handleFinish = async (values) => {
     const result = await updateContract({

client/src/pages/contracts/contracts.page.container.jsx

@@ -4,7 +4,10 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_ACTIVE_CONTRACTS_PAGINATED } from "../../graphql/cccontracts.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import ContractsPageComponent from "./contracts.page.component";
 import queryString from "query-string";
 import { useLocation } from "react-router-dom";
@@ -13,12 +16,12 @@ import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function ContractsPageContainer({ setBreadcrumbs }) {
+export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, start, end } = searchParams;
-  console.log("ContractsPageContainer -> searchParams", searchParams);
 
   const { loading, error, data, refetch } = useQuery(
     QUERY_ACTIVE_CONTRACTS_PAGINATED,
@@ -46,7 +49,7 @@ export function ContractsPageContainer({ setBreadcrumbs }) {
   const { t } = useTranslation();
   useEffect(() => {
     document.title = t("titles.contracts");
-
+    setSelectedHeader("contracts");
     setBreadcrumbs([
       { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
       {
@@ -54,7 +57,7 @@ export function ContractsPageContainer({ setBreadcrumbs }) {
         label: t("titles.bc.contracts"),
       },
     ]);
-  }, [setBreadcrumbs, t]);
+  }, [setBreadcrumbs, t, setSelectedHeader]);
 
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (

client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx

@@ -8,7 +8,10 @@ import { INSERT_NEW_COURTESY_CAR } from "../../graphql/courtesy-car.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CourtesyCarCreateComponent from "./courtesy-car-create.page.component";
 import { useHistory } from "react-router-dom";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -16,8 +19,13 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
-export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs }) {
+export function CourtesyCarCreateContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const [form] = Form.useForm();
   const [insertCourtesyCar] = useMutation(INSERT_NEW_COURTESY_CAR);
   const { t } = useTranslation();
@@ -37,6 +45,7 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs }) {
   };
 
   useEffect(() => {
+    setSelectedHeader("courtesycarsall");
     document.title = t("titles.courtesycars-create");
     setBreadcrumbs([
       { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
@@ -45,12 +54,12 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs }) {
         label: t("titles.bc.courtesycars-new"),
       },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
     <RbacWrapper action="courtesycar:create">
       <Form form={form} autoComplete="new-password" onFinish={handleFinish}>
-        <CourtesyCarCreateComponent />
+        <CourtesyCarCreateComponent form={form} />
       </Form>
     </RbacWrapper>
   );

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

@@ -11,6 +11,7 @@ import { QUERY_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries";
 import {
   addRecentItem,
   setBreadcrumbs,
+  setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { CreateRecentItem } from "../../utils/create-recent-item";
 import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
@@ -22,10 +23,12 @@ import { useLocation } from "react-router-dom";
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
   addRecentItem: (item) => dispatch(addRecentItem(item)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 export function CourtesyCarDetailPageContainer({
   setBreadcrumbs,
   addRecentItem,
+  setSelectedHeader,
 }) {
   const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder } = searchParams;
@@ -53,6 +56,8 @@ export function CourtesyCarDetailPageContainer({
   });
 
   useEffect(() => {
+    setSelectedHeader("courtesycarsall");
+
     document.title = loading
       ? t("titles.app")
       : error
@@ -89,7 +94,16 @@ export function CourtesyCarDetailPageContainer({
           `/manage/courtesycars/${ccId}`
         )
       );
-  }, [t, data, error, loading, setBreadcrumbs, ccId, addRecentItem]);
+  }, [
+    t,
+    data,
+    error,
+    loading,
+    setBreadcrumbs,
+    ccId,
+    addRecentItem,
+    setSelectedHeader,
+  ]);
 
   const handleFinish = async (values) => {
     setSaveLoading(true);

client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx

@@ -5,23 +5,31 @@ import { connect } from "react-redux";
 import AlertComponent from "../../components/alert/alert.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { QUERY_ALL_CC } from "../../graphql/courtesy-car.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import CourtesyCarsPageComponent from "./courtesy-cars.page.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function CourtesyCarsPageContainer({ setBreadcrumbs }) {
+export function CourtesyCarsPageContainer({
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_CC);
   const { t } = useTranslation();
   useEffect(() => {
     document.title = t("titles.courtesycars");
-
+    setSelectedHeader("courtesycarsall");
     setBreadcrumbs([
       { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
     ]);
-  }, [setBreadcrumbs, t]);
+  }, [setBreadcrumbs, t, setSelectedHeader]);
+
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
     <RbacWrapper action="courtesycar:list">

client/src/pages/invoices/invoices.page.container.jsx

@@ -6,26 +6,31 @@ import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
 import InvoiceDetailEditContainer from "../../components/invoice-detail-edit/invoice-detail-edit.container";
 import { QUERY_ALL_INVOICES_PAGINATED } from "../../graphql/invoices.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import InvoicesPageComponent from "./invoices.page.component";
 import AlertComponent from "../../components/alert/alert.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function InvoicesPageContainer({ setBreadcrumbs }) {
+export function InvoicesPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
   const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, search } = searchParams;
 
   useEffect(() => {
     document.title = t("titles.invoices-list");
+    setSelectedHeader("invoices");
     setBreadcrumbs([
       { link: "/manage/invoices", label: t("titles.bc.invoices-list") },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   const { loading, error, data, refetch } = useQuery(
     QUERY_ALL_INVOICES_PAGINATED,

client/src/pages/jobs-all/jobs-all.container.jsx

@@ -8,7 +8,10 @@ import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import JobsListPaginated from "../../components/jobs-list-paginated/jobs-list-paginated.component";
 import { QUERY_ALL_JOBS_PAGINATED } from "../../graphql/jobs.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -17,9 +20,10 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function AllJobs({ setBreadcrumbs }) {
+export function AllJobs({ setBreadcrumbs, setSelectedHeader }) {
   const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, search } = searchParams;
 
@@ -43,8 +47,9 @@ export function AllJobs({ setBreadcrumbs }) {
 
   useEffect(() => {
     document.title = t("titles.jobs-all");
+    setSelectedHeader("alljobs");
     setBreadcrumbs([{ link: "/manage/jobs", label: t("titles.bc.jobs-all") }]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (

client/src/pages/jobs-available/jobs-available.page.container.jsx

@@ -9,12 +9,19 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function JobsAvailablePageContainer({ setBreadcrumbs }) {
+export function JobsAvailablePageContainer({
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const [deleteJob] = useMutation(DELETE_AVAILABLE_JOB);
   const { t } = useTranslation();
 
@@ -22,10 +29,11 @@ export function JobsAvailablePageContainer({ setBreadcrumbs }) {
 
   useEffect(() => {
     document.title = t("titles.jobsavailable");
+    setSelectedHeader("availablejobs");
     setBreadcrumbs([
       { link: "/manage/available", label: t("titles.bc.availablejobs") },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
     <RbacWrapper action="jobs:available-list">

client/src/pages/jobs-close/jobs-close.container.jsx

@@ -8,22 +8,27 @@ import LoadingSpinner from "../../components/loading-spinner/loading-spinner.com
 import NotFound from "../../components/not-found/not-found.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { QUERY_JOB_CLOSE_DETAILS } from "../../graphql/jobs.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import JobsCloseComponent from "./jobs-close.component";
 import { Result } from "antd";
 import JobCalculateTotals from "../../components/job-calculate-totals/job-calculate-totals.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function JobsCloseContainer({ setBreadcrumbs }) {
+export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { jobId } = useParams();
   const { loading, error, data } = useQuery(QUERY_JOB_CLOSE_DETAILS, {
     variables: { id: jobId },
   });
   const { t } = useTranslation();
   useEffect(() => {
+    setSelectedHeader("activejobs");
     document.title = t("titles.jobs-close", {
       number: data ? data.jobs_by_pk && data.jobs_by_pk.ro_number : null,
     });
@@ -44,7 +49,7 @@ export function JobsCloseContainer({ setBreadcrumbs }) {
         label: t("titles.bc.jobs-close"),
       },
     ]);
-  }, [setBreadcrumbs, t, jobId, data]);
+  }, [setBreadcrumbs, t, jobId, data, setSelectedHeader]);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -9,7 +9,10 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { useTranslation } from "react-i18next";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -17,8 +20,9 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
-function JobsCreateContainer({ bodyshop, setBreadcrumbs }) {
+function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
   const contextState = useState({
     vehicle: { new: false, search: "", selectedid: null, vehicleObj: null },
@@ -46,6 +50,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs }) {
 
   useEffect(() => {
     document.title = t("titles.jobs-create");
+    setSelectedHeader("availablejobs");
     setBreadcrumbs([
       { link: "/manage/available", label: t("titles.bc.availablejobs") },
       {
@@ -53,7 +58,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs }) {
         label: t("titles.bc.jobs-new"),
       },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   const runInsertJob = (job) => {
     insertJob({ variables: { job: job } })

client/src/pages/jobs-deliver/jobs-delivery.page.container.jsx

@@ -8,7 +8,10 @@ import AlertComponent from "../../components/alert/alert.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { QUERY_DELIVER_CHECKLIST } from "../../graphql/bodyshop.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import JobchecklistComponent from "../../components/job-checklist/job-checklist.component";
 
@@ -18,9 +21,14 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function JobsDeliverContainer({ bodyshop, setBreadcrumbs }) {
+export function JobsDeliverContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const { t } = useTranslation();
   const { jobId } = useParams();
   const { loading, error, data } = useQuery(QUERY_DELIVER_CHECKLIST, {
@@ -29,6 +37,7 @@ export function JobsDeliverContainer({ bodyshop, setBreadcrumbs }) {
 
   useEffect(() => {
     document.title = t("titles.jobs-deliver");
+    setSelectedHeader("activejobs");
     setBreadcrumbs([
       { link: "/manage/jobs", label: t("titles.bc.jobs") },
       {
@@ -42,7 +51,7 @@ export function JobsDeliverContainer({ bodyshop, setBreadcrumbs }) {
         label: t("titles.bc.jobs-deliver"),
       },
     ]);
-  }, [t, setBreadcrumbs, jobId, data]);
+  }, [t, setBreadcrumbs, jobId, data, setSelectedHeader]);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;

client/src/pages/jobs-intake/jobs-intake.page.container.jsx

@@ -8,7 +8,10 @@ import AlertComponent from "../../components/alert/alert.component";
 import JobChecklist from "../../components/job-checklist/job-checklist.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_INTAKE_CHECKLIST } from "../../graphql/bodyshop.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
@@ -18,9 +21,14 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function JobsIntakeContainer({ bodyshop, setBreadcrumbs }) {
+export function JobsIntakeContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const { t } = useTranslation();
   const { jobId } = useParams();
 
@@ -30,6 +38,7 @@ export function JobsIntakeContainer({ bodyshop, setBreadcrumbs }) {
 
   useEffect(() => {
     document.title = t("titles.jobs-intake");
+    setSelectedHeader("activejobs");
     setBreadcrumbs([
       { link: "/manage/jobs", label: t("titles.bc.jobs") },
       {
@@ -45,7 +54,7 @@ export function JobsIntakeContainer({ bodyshop, setBreadcrumbs }) {
         label: t("titles.bc.jobs-intake"),
       },
     ]);
-  }, [t, setBreadcrumbs, jobId, data]);
+  }, [t, setBreadcrumbs, jobId, data, setSelectedHeader]);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;

client/src/pages/jobs/jobs.page.jsx

@@ -3,22 +3,27 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
 import JobsList from "../../components/jobs-list/jobs-list.component";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function JobsPage({ setBreadcrumbs }) {
+export function JobsPage({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
 
   useEffect(() => {
     document.title = t("titles.jobs");
+    setSelectedHeader("activejobs");
     setBreadcrumbs([
       { link: "/manage/jobs", label: t("titles.bc.jobs-active") },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
     <RbacWrapper action="jobs:list-active">

client/src/pages/owners/owners.page.container.jsx

@@ -1,20 +1,25 @@
 import React, { useEffect } from "react";
 import OwnersPageComponent from "./owners.page.component";
 import { useTranslation } from "react-i18next";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import { connect } from "react-redux";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function OwnersPageContainer({ setBreadcrumbs }) {
+export function OwnersPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
   useEffect(() => {
     document.title = t("titles.owners");
+    setSelectedHeader("owners");
     setBreadcrumbs([{ link: "/manage/owners", label: t("titles.bc.owners") }]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
     <RbacWrapper action="owners:list">

client/src/pages/shop-csi/shop-csi.container.page.jsx

@@ -10,7 +10,10 @@ import AlertComponent from "../../components/alert/alert.component";
 import CsiResponseFormContainer from "../../components/csi-response-form/csi-response-form.container";
 import CsiResponseListPaginated from "../../components/csi-response-list-paginated/csi-response-list-paginated.component";
 import { QUERY_CSI_RESPONSE_PAGINATED } from "../../graphql/csi.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 const mapStateToProps = createStructuredSelector({
@@ -19,9 +22,14 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function ShopCsiContainer({ bodyshop, setBreadcrumbs }) {
+export function ShopCsiContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const { t } = useTranslation();
 
   const searchParams = queryString.parse(useLocation().search);
@@ -49,6 +57,7 @@ export function ShopCsiContainer({ bodyshop, setBreadcrumbs }) {
 
   useEffect(() => {
     document.title = t("titles.shop-csi");
+    setSelectedHeader("shop-csi");
     setBreadcrumbs([
       {
         link: "/manage/shop",
@@ -56,7 +65,7 @@ export function ShopCsiContainer({ bodyshop, setBreadcrumbs }) {
       },
       { link: "/manage/shop/csi", label: t("titles.bc.shop-csi") },
     ]);
-  }, [t, setBreadcrumbs, bodyshop.shopname]);
+  }, [t, setBreadcrumbs, bodyshop.shopname, setSelectedHeader]);
 
   if (error) return <AlertComponent message={error.message} type="error" />;
 

client/src/pages/shop-templates/shop-templates.container.js

@@ -6,7 +6,10 @@ import { createStructuredSelector } from "reselect";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import ShopTemplateEditor from "../../components/shop-template-editor/shop-template-editor.container";
 import ShopTemplatesListContainer from "../../components/shop-templates-list/shop-templates-list.container";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
@@ -14,13 +17,19 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function ShopTemplatesContainer({ setBreadcrumbs, bodyshop }) {
+export function ShopTemplatesContainer({
+  setBreadcrumbs,
+  bodyshop,
+  setSelectedHeader,
+}) {
   const { t } = useTranslation();
   const drawerVisibility = useState(false);
   useEffect(() => {
     document.title = t("titles.shop-templates");
+    setSelectedHeader("shop-templates");
     setBreadcrumbs([
       {
         link: "/manage/shop",
@@ -28,7 +37,7 @@ export function ShopTemplatesContainer({ setBreadcrumbs, bodyshop }) {
       },
       { link: "/manage/shop/templates", label: t("titles.bc.shop-templates") },
     ]);
-  }, [t, setBreadcrumbs, bodyshop.shopname]);
+  }, [t, setBreadcrumbs, bodyshop.shopname, setSelectedHeader]);
 
   return (
     <RbacWrapper action="shop:templates">

client/src/pages/shop-vendor/shop-vendor.page.container.jsx

@@ -3,11 +3,38 @@ import { useTranslation } from "react-i18next";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import ShopVendorPageComponent from "./shop-vendor.page.component";
 
-export default function ShopVendorPageContainer() {
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+});
+
+export function ShopVendorPageContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const { t } = useTranslation();
   useEffect(() => {
     document.title = t("titles.shop_vendors");
-  }, [t]);
+    setSelectedHeader("shop-vendors");
+    setBreadcrumbs([
+      {
+        link: "/manage/shop",
+        label: t("titles.bc.shop", { shopname: bodyshop.shopname }),
+      },
+      { link: "/manage/shop/vendors", label: t("titles.bc.shop-vendors") },
+    ]);
+  }, [t, bodyshop.shopname, setBreadcrumbs, setSelectedHeader]);
 
   return (
     <RbacWrapper action="shop:vendors">
@@ -15,3 +42,7 @@ export default function ShopVendorPageContainer() {
     </RbacWrapper>
   );
 }
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShopVendorPageContainer);

client/src/pages/time-tickets/time-tickets.container.jsx

@@ -12,25 +12,34 @@ import TimeTicketsDatesSelector from "../../components/ticket-tickets-dates-sele
 import TimeTicketList from "../../components/time-ticket-list/time-ticket-list.component";
 import TimeTicketsSummary from "../../components/time-tickets-summary/time-tickets-summary.component";
 import { QUERY_TIME_TICKETS_IN_RANGE } from "../../graphql/timetickets.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 
 const mapStateToProps = createStructuredSelector({});
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function TimeTicketsContainer({ bodyshop, setBreadcrumbs }) {
+export function TimeTicketsContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
   const { t } = useTranslation();
   useEffect(() => {
     document.title = t("titles.timetickets");
+    setSelectedHeader("timetickets");
     setBreadcrumbs([
       {
         link: "/manage/timetickets",
         label: t("titles.bc.timetickets"),
       },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   const searchParams = queryString.parse(useLocation().search);
   const { start, end } = searchParams;

client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import {
   setBreadcrumbs,
   addRecentItem,
+  setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { connect } from "react-redux";
 import { CreateRecentItem } from "../../utils/create-recent-item";
@@ -16,12 +17,14 @@ import NotFound from "../../components/not-found/not-found.component";
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
   addRecentItem: (item) => dispatch(addRecentItem(item)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
 export function VehicleDetailContainer({
   match,
   setBreadcrumbs,
   addRecentItem,
+  setSelectedHeader,
 }) {
   const { vehId } = match.params;
   const { t } = useTranslation();
@@ -40,6 +43,8 @@ export function VehicleDetailContainer({
             } ${data.vehicles_by_pk && data.vehicles_by_pk.v_model_desc}`
           : "",
     });
+    setSelectedHeader("vehicles");
+
     setBreadcrumbs([
       { link: "/manage/vehicles", label: t("titles.bc.vehicles") },
       {
@@ -62,7 +67,7 @@ export function VehicleDetailContainer({
           `/manage/vehicles/${vehId}`
         )
       );
-  }, [t, data, setBreadcrumbs, vehId, addRecentItem]);
+  }, [t, data, setBreadcrumbs, vehId, addRecentItem, setSelectedHeader]);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;

client/src/pages/vehicles/vehicles.page.container.jsx

@@ -3,20 +3,25 @@ import VehiclesPageComponent from "./vehicles.page.component";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function VehiclesPageContainer({ setBreadcrumbs }) {
+export function VehiclesPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
 
   useEffect(() => {
     document.title = t("titles.vehicles");
+    setSelectedHeader("vehicles");
     setBreadcrumbs([
       { link: "/manage/vehicles", label: t("titles.bc.vehicles") },
     ]);
-  }, [t, setBreadcrumbs]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return <VehiclesPageComponent />;
 }

client/src/redux/application/application.actions.js

@@ -33,3 +33,8 @@ export const addRecentItem = (item) => ({
   type: ApplicationActionTypes.ADD_RECENT_ITEM,
   payload: item,
 });
+
+export const setSelectedHeader = (key) => ({
+  type: ApplicationActionTypes.SET_SELECTED_HEADER,
+  payload: key,
+});

client/src/redux/application/application.reducer.js

@@ -4,6 +4,7 @@ const INITIAL_STATE = {
   loading: false,
   breadcrumbs: [],
   recentItems: [],
+  selectedHeader: "home",
   scheduleLoad: {
     load: {},
     calculating: false,
@@ -13,6 +14,11 @@ const INITIAL_STATE = {
 
 const applicationReducer = (state = INITIAL_STATE, action) => {
   switch (action.type) {
+    case ApplicationActionTypes.SET_SELECTED_HEADER:
+      return {
+        ...state,
+        selectedHeader: action.payload,
+      };
     case ApplicationActionTypes.ADD_RECENT_ITEM:
       return {
         ...state,

client/src/redux/application/application.selectors.js

@@ -26,3 +26,8 @@ export const selectScheduleLoadCalculating = createSelector(
   [selectApplication],
   (application) => application.scheduleLoad.calculating
 );
+
+export const selectSelectedHeader = createSelector(
+  [selectApplication],
+  (application) => application.selectedHeader
+);

client/src/redux/application/application.types.js

@@ -6,5 +6,6 @@ const ApplicationActionTypes = {
   CALCULATE_SCHEDULE_LOAD_SUCCESS: "CALCULATE_SCHEDULE_LOAD_SUCCESS",
   CALCULATE_SCHEDULE_LOAD_FAILURE: "CALCULATE_SCHEDULE_LOAD_FAILURE",
   ADD_RECENT_ITEM: "ADD_RECENT_ITEM",
+  SET_SELECTED_HEADER: "SET_SELECTED_HEADER",
 };
 export default ApplicationActionTypes;