From 20f864cd432acdeba646eb5aa9bf17f346aa9bee Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Mon, 13 Jul 2020 09:55:24 -0700
Subject: [PATCH] Added in-session recent items with cross tab support. BOD-178

---
 bodyshop_translations.babel                   | 112 +++++++++++++++++-
 client/package.json                           |   1 +
 client/src/App/App.styles.scss                |   1 +
 .../breadcrumbs/breadcrumbs.component.jsx     |  14 ++-
 .../tech-job-clock-in-form.container.jsx      |   5 -
 .../contract-detail.page.container.jsx        |  21 +++-
 .../courtesy-car-detail.page.container.jsx    |  24 +++-
 .../jobs-detail.page.container.jsx            |  23 +++-
 .../owners-detail.page.container.jsx          |  40 +++++--
 .../vehicles-detail.page.container.jsx        |  27 ++++-
 .../redux/application/application.reducer.js  |  17 ++-
 client/src/redux/root.reducer.js              |   6 +-
 client/src/redux/store.js                     |  16 ++-
 client/src/translations/en_us/common.json     |   7 ++
 client/src/translations/es/common.json        |   7 ++
 client/src/translations/fr/common.json        |   7 ++
 client/src/utils/create-recent-item.js        |   9 ++
 client/yarn.lock                              |  64 ++++++++++
 18 files changed, 362 insertions(+), 39 deletions(-)
 create mode 100644 client/src/utils/create-recent-item.js

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index c1a7af70f..e8977f658 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.6.1">
+<babeledit_project be_version="2.6.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -5508,6 +5508,116 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>itemtypes</name>
+                                <children>
+                                    <concept_node>
+                                        <name>contract</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>courtesycar</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>job</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>owner</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>vehicle</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>labels</name>
                                 <children>
diff --git a/client/package.json b/client/package.json
index 5062a61e9..a9271d13e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -55,6 +55,7 @@
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
+    "redux-state-sync": "^3.1.1",
     "reselect": "^4.0.0",
     "styled-components": "^5.1.1",
     "subscriptions-transport-ws": "^0.9.16"
diff --git a/client/src/App/App.styles.scss b/client/src/App/App.styles.scss
index fc3a8e10e..30257838c 100644
--- a/client/src/App/App.styles.scss
+++ b/client/src/App/App.styles.scss
@@ -14,6 +14,7 @@
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
+  align-items: center;
 
   &__grow {
     flex: 1;
diff --git a/client/src/components/breadcrumbs/breadcrumbs.component.jsx b/client/src/components/breadcrumbs/breadcrumbs.component.jsx
index b85e438db..9ce8d7af6 100644
--- a/client/src/components/breadcrumbs/breadcrumbs.component.jsx
+++ b/client/src/components/breadcrumbs/breadcrumbs.component.jsx
@@ -19,18 +19,24 @@ export function BreadCrumbs({ breadcrumbs, recentItems }) {
   const menu = (
     <Menu>
       {recentItems.map((i, idx) => (
-        <Menu.Item key={idx}>{i.label}</Menu.Item>
+        <Menu.Item key={idx}>
+          <Link to={i.url}>{i.label}</Link>
+        </Menu.Item>
       ))}
     </Menu>
   );
 
   return (
-    <div className='breadcrumb-container'>
-      <Dropdown overlay={menu} trigger={["click"]}>
+    <div className="breadcrumb-container imex-flex-row">
+      <Dropdown
+        className="imex-flex-row__margin-large"
+        overlay={menu}
+        trigger={["click"]}
+      >
         <ClockCircleFilled onClick={(e) => e.preventDefault()} />
       </Dropdown>
 
-      <Breadcrumb separator='>'>
+      <Breadcrumb separator=">">
         <Breadcrumb.Item>
           <Link to={`/manage`}>
             <HomeFilled />
diff --git a/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.container.jsx b/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.container.jsx
index 9d6c823fb..67685a07e 100644
--- a/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.container.jsx
+++ b/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.container.jsx
@@ -33,11 +33,6 @@ export function TechClockInContainer({ technician, bodyshop }) {
           ciecacode: Object.keys(
             bodyshop.md_responsibility_centers.defaults.costs
           ).find((key) => {
-            console.log(
-              "key",
-              key,
-              bodyshop.md_responsibility_centers.defaults.costs[key]
-            );
             return (
               bodyshop.md_responsibility_centers.defaults.costs[key] ===
               values.cost_center
diff --git a/client/src/pages/contract-detail/contract-detail.page.container.jsx b/client/src/pages/contract-detail/contract-detail.page.container.jsx
index 2f88551d8..f975f60aa 100644
--- a/client/src/pages/contract-detail/contract-detail.page.container.jsx
+++ b/client/src/pages/contract-detail/contract-detail.page.container.jsx
@@ -11,14 +11,19 @@ import {
   QUERY_CONTRACT_BY_PK,
   UPDATE_CONTRACT,
 } from "../../graphql/cccontracts.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  addRecentItem,
+} from "../../redux/application/application.actions";
 import ContractDetailPageComponent from "./contract-detail.page.component";
+import { CreateRecentItem } from "../../utils/create-recent-item";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  addRecentItem: (item) => dispatch(addRecentItem(item)),
 });
 
-export function ContractDetailPageContainer({ setBreadcrumbs }) {
+export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
   const { t } = useTranslation();
   const [updateContract] = useMutation(UPDATE_CONTRACT);
   const [form] = Form.useForm();
@@ -50,7 +55,17 @@ export function ContractDetailPageContainer({ setBreadcrumbs }) {
         }),
       },
     ]);
-  }, [t, data, error, loading, setBreadcrumbs]);
+
+    if (data)
+      addRecentItem(
+        CreateRecentItem(
+          contractId,
+          "contract",
+          data.cccontracts_by_pk.agreementnumber,
+          `/manage/courtesycars/contracts/${contractId}`
+        )
+      );
+  }, [t, data, error, loading, setBreadcrumbs, addRecentItem]);
 
   const handleFinish = (values) => {
     updateContract({
diff --git a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
index a595be0a6..a72e6c2ef 100644
--- a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
+++ b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
@@ -7,13 +7,21 @@ import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  addRecentItem,
+  setBreadcrumbs,
+} from "../../redux/application/application.actions";
+import { CreateRecentItem } from "../../utils/create-recent-item";
 import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  addRecentItem: (item) => dispatch(addRecentItem(item)),
 });
-export function CourtesyCarDetailPageContainer({ setBreadcrumbs }) {
+export function CourtesyCarDetailPageContainer({
+  setBreadcrumbs,
+  addRecentItem,
+}) {
   const { t } = useTranslation();
   const [insertCourtesyCar] = useMutation(UPDATE_CC);
   const [form] = Form.useForm();
@@ -42,7 +50,17 @@ export function CourtesyCarDetailPageContainer({ setBreadcrumbs }) {
         }),
       },
     ]);
-  }, [t, data, error, loading, setBreadcrumbs]);
+
+    if (data)
+      addRecentItem(
+        CreateRecentItem(
+          ccId,
+          "courtesycar",
+          data.courtesycars_by_pk.fleet_number || data.courtesycars_by_pk.vin,
+          `/manage/courtesycars/${ccId}`
+        )
+      );
+  }, [t, data, error, loading, setBreadcrumbs, addRecentItem]);
 
   const handleFinish = (values) => {
     insertCourtesyCar({
diff --git a/client/src/pages/jobs-detail/jobs-detail.page.container.jsx b/client/src/pages/jobs-detail/jobs-detail.page.container.jsx
index 23ad9f659..4a7360daf 100644
--- a/client/src/pages/jobs-detail/jobs-detail.page.container.jsx
+++ b/client/src/pages/jobs-detail/jobs-detail.page.container.jsx
@@ -2,6 +2,7 @@ import { useMutation, useQuery } from "@apollo/react-hooks";
 import { notification } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import AlertComponent from "../../components/alert/alert.component";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
 import {
@@ -10,12 +11,12 @@ import {
   UPDATE_JOB,
   UPDATE_JOB_STATUS,
 } from "../../graphql/jobs.queries";
-import JobsDetailPage from "./jobs-detail.page.component";
 import {
-  setBreadcrumbs,
   addRecentItem,
+  setBreadcrumbs,
 } from "../../redux/application/application.actions";
-import { connect } from "react-redux";
+import { CreateRecentItem } from "../../utils/create-recent-item";
+import JobsDetailPage from "./jobs-detail.page.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -71,13 +72,23 @@ function JobsDetailPageContainer({ match, setBreadcrumbs, addRecentItem }) {
         }),
       },
     ]);
-  }, [loading, data, t, error, setBreadcrumbs, jobId]);
+
+    if (data)
+      addRecentItem(
+        CreateRecentItem(
+          jobId,
+          "job",
+          `${data.jobs_by_pk.est_number || ""} | ${
+            data.jobs_by_pk.ro_number || ""
+          }`,
+          `/manage/jobs/${jobId}`
+        )
+      );
+  }, [loading, data, t, error, setBreadcrumbs, jobId, addRecentItem]);
 
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
-  if (data) addRecentItem({ id: 1234, label: " abcd" });
-
   return data.jobs_by_pk ? (
     <JobsDetailPage
       job={data.jobs_by_pk}
diff --git a/client/src/pages/owners-detail/owners-detail.page.container.jsx b/client/src/pages/owners-detail/owners-detail.page.container.jsx
index 042b7022f..6f5e50343 100644
--- a/client/src/pages/owners-detail/owners-detail.page.container.jsx
+++ b/client/src/pages/owners-detail/owners-detail.page.container.jsx
@@ -1,17 +1,27 @@
-import React, { useEffect } from "react";
-import OwnersDetailComponent from "./owners-detail.page.component";
-import { useTranslation } from "react-i18next";
 import { useQuery } from "@apollo/react-hooks";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import AlertComponent from "../../components/alert/alert.component";
-import { QUERY_OWNER_BY_ID } from "../../graphql/owners.queries";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import AlertComponent from "../../components/alert/alert.component";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import { QUERY_OWNER_BY_ID } from "../../graphql/owners.queries";
+import {
+  addRecentItem,
+  setBreadcrumbs,
+} from "../../redux/application/application.actions";
+import { CreateRecentItem } from "../../utils/create-recent-item";
+import OwnersDetailComponent from "./owners-detail.page.component";
+
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  addRecentItem: (item) => dispatch(addRecentItem(item)),
 });
 
-export function OwnersDetailContainer({ match, setBreadcrumbs }) {
+export function OwnersDetailContainer({
+  match,
+  setBreadcrumbs,
+  addRecentItem,
+}) {
   const { ownerId } = match.params;
   const { t } = useTranslation();
 
@@ -42,7 +52,19 @@ export function OwnersDetailContainer({ match, setBreadcrumbs }) {
         }),
       },
     ]);
-  }, [setBreadcrumbs, t, data, ownerId]);
+
+    if (data)
+      addRecentItem(
+        CreateRecentItem(
+          ownerId,
+          "owner",
+          `${data.owners_by_pk.ownr_fn || ""} ${
+            data.owners_by_pk.ownr_ln || ""
+          } ${data.owners_by_pk.ownr_co_nm || ""}`,
+          `/manage/owners/${ownerId}`
+        )
+      );
+  }, [setBreadcrumbs, t, data, ownerId, addRecentItem]);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
diff --git a/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx b/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx
index dc2817762..3cc16a419 100644
--- a/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx
+++ b/client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx
@@ -5,17 +5,26 @@ import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../../components/alert/alert.component";
 import { useTranslation } from "react-i18next";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  addRecentItem,
+} from "../../redux/application/application.actions";
 import { connect } from "react-redux";
+import { CreateRecentItem } from "../../utils/create-recent-item";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  addRecentItem: (item) => dispatch(addRecentItem(item)),
 });
 
-export function VehicleDetailContainer({ match, setBreadcrumbs }) {
+export function VehicleDetailContainer({
+  match,
+  setBreadcrumbs,
+  addRecentItem,
+}) {
   const { vehId } = match.params;
   const { t } = useTranslation();
-  
+
   const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, {
     variables: { id: vehId },
     fetchPolicy: "network-only",
@@ -40,7 +49,17 @@ export function VehicleDetailContainer({ match, setBreadcrumbs }) {
         }),
       },
     ]);
-  }, [t, data, setBreadcrumbs, vehId]);
+
+    if (data)
+      addRecentItem(
+        CreateRecentItem(
+          vehId,
+          "vehicle",
+          `${data.vehicles_by_pk.v_vin} | ${data.vehicles_by_pk.v_model_yr} ${data.vehicles_by_pk.v_make_desc} ${data.vehicles_by_pk.v_model_desc}`,
+          `/manage/vehicles/${vehId}`
+        )
+      );
+  }, [t, data, setBreadcrumbs, vehId, addRecentItem]);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
diff --git a/client/src/redux/application/application.reducer.js b/client/src/redux/application/application.reducer.js
index fb9c30157..b55f4efdd 100644
--- a/client/src/redux/application/application.reducer.js
+++ b/client/src/redux/application/application.reducer.js
@@ -16,7 +16,7 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
     case ApplicationActionTypes.ADD_RECENT_ITEM:
       return {
         ...state,
-        recentItems: [action.payload, ...state.recentItems.slice(0, 9)],
+        recentItems: updateRecentItemsArray(state, action.payload),
       };
     case ApplicationActionTypes.SET_BREAD_CRUMBS:
       return {
@@ -63,3 +63,18 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
 };
 
 export default applicationReducer;
+
+const updateRecentItemsArray = (state, newItem) => {
+  //Check to see if the new item is in the list.
+  const matchingIndex = state.recentItems.findIndex((i) => i.id === newItem.id);
+
+  if (matchingIndex >= 0) {
+    return [
+      newItem,
+      ...state.recentItems.slice(0, matchingIndex),
+      ...state.recentItems.slice(matchingIndex + 1, 9),
+    ];
+  } else {
+    return [newItem, ...state.recentItems.slice(0, 9)];
+  }
+};
diff --git a/client/src/redux/root.reducer.js b/client/src/redux/root.reducer.js
index 45b7c5a2c..973ef8656 100644
--- a/client/src/redux/root.reducer.js
+++ b/client/src/redux/root.reducer.js
@@ -1,6 +1,7 @@
 import { combineReducers } from "redux";
 import { persistReducer } from "redux-persist";
 import storage from "redux-persist/lib/storage";
+import { withReduxStateSync } from "redux-state-sync";
 
 import userReducer from "./user/user.reducer";
 import messagingReducer from "./messaging/messaging.reducer";
@@ -8,10 +9,11 @@ import emailReducer from "./email/email.reducer";
 import modalsReducer from "./modals/modals.reducer";
 import applicationReducer from "./application/application.reducer";
 import techReducer from "./tech/tech.reducer";
+
 const persistConfig = {
   key: "root",
   storage,
-  whitelist: ["messaging", "tech"],
+  whitelist: ["messaging", "tech", "application"],
   blacklist: ["user", "email", "modals"],
 };
 
@@ -24,4 +26,4 @@ const rootReducer = combineReducers({
   tech: techReducer,
 });
 
-export default persistReducer(persistConfig, rootReducer);
+export default withReduxStateSync(persistReducer(persistConfig, rootReducer));
diff --git a/client/src/redux/store.js b/client/src/redux/store.js
index 0dfd35ffa..b266307b6 100644
--- a/client/src/redux/store.js
+++ b/client/src/redux/store.js
@@ -2,11 +2,24 @@ import { createStore, applyMiddleware, compose } from "redux";
 import { persistStore } from "redux-persist";
 import { createLogger } from "redux-logger";
 import createSagaMiddleware from "redux-saga";
+import {
+  createStateSyncMiddleware,
+  initMessageListener,
+} from "redux-state-sync";
+
 import rootReducer from "./root.reducer";
 import rootSaga from "./root.saga";
 
 const sagaMiddleWare = createSagaMiddleware();
-const middlewares = [sagaMiddleWare];
+
+const reduxSyncConfig = {
+  whitelist: ["ADD_RECENT_ITEM"],
+};
+
+const middlewares = [
+  sagaMiddleWare,
+  createStateSyncMiddleware(reduxSyncConfig),
+];
 if (process.env.NODE_ENV === "development") {
   middlewares.push(createLogger({ collapsed: true, diff: true }));
 }
@@ -25,6 +38,7 @@ const enhancer = composeEnhancers(
 
 export const store = createStore(rootReducer, enhancer);
 sagaMiddleWare.run(rootSaga);
+initMessageListener(store);
 
 export const persistor = persistStore(store);
 
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 969edc9df..139e3906d 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -368,6 +368,13 @@
 				"submit": "Submit",
 				"submitticket": "Submit a Support Ticket"
 			},
+			"itemtypes": {
+				"contract": "CC Contract",
+				"courtesycar": "Courtesy Car",
+				"job": "Job",
+				"owner": "Owner",
+				"vehicle": "Vehicle"
+			},
 			"labels": {
 				"actions": "Actions",
 				"areyousure": "Are you sure?",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 0ed722fe3..c4a4e843d 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -368,6 +368,13 @@
 				"submit": "",
 				"submitticket": ""
 			},
+			"itemtypes": {
+				"contract": "",
+				"courtesycar": "",
+				"job": "",
+				"owner": "",
+				"vehicle": ""
+			},
 			"labels": {
 				"actions": "Comportamiento",
 				"areyousure": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 61ade57e0..53d2257f3 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -368,6 +368,13 @@
 				"submit": "",
 				"submitticket": ""
 			},
+			"itemtypes": {
+				"contract": "",
+				"courtesycar": "",
+				"job": "",
+				"owner": "",
+				"vehicle": ""
+			},
 			"labels": {
 				"actions": "actes",
 				"areyousure": "",
diff --git a/client/src/utils/create-recent-item.js b/client/src/utils/create-recent-item.js
new file mode 100644
index 000000000..5f2374004
--- /dev/null
+++ b/client/src/utils/create-recent-item.js
@@ -0,0 +1,9 @@
+import i18n from "i18next";
+
+export function CreateRecentItem(id, type, labelid, url) {
+  return {
+    id,
+    label: `${i18n.t(`general.itemtypes.${type}`)}: ${labelid}`,
+    url,
+  };
+}
diff --git a/client/yarn.lock b/client/yarn.lock
index 87729e454..24b610573 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1300,6 +1300,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.6.2":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.4.tgz#a6724f1a6b8d2f6ea5236dbfe58c7d7ea9c5eb99"
+  integrity sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.8.4":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
@@ -3409,6 +3416,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+big-integer@^1.6.16:
+  version "1.6.48"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.48.tgz#8fd88bd1632cba4a1c8c3e3d7159f08bb95b4b9e"
+  integrity sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -3517,6 +3529,19 @@ braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+broadcast-channel@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.1.0.tgz#b4a6970fc72c4d68fc859321a6af850e66cb2dfa"
+  integrity sha512-zrjTunJRva1aFW9UlLtoMnB05tu8hbb7qbv3PxXXGnxp3t9VA/KcTIwcC0+u7oLBdlXSnv0yy7pB+UemLjANyQ==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    detect-node "^2.0.4"
+    js-sha3 "0.8.0"
+    microseconds "0.2.0"
+    nano-time "1.0.0"
+    rimraf "3.0.2"
+    unload "2.2.0"
+
 brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
@@ -7888,6 +7913,11 @@ js-cookie@^2.2.1:
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
   integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
 
+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -8587,6 +8617,11 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+microseconds@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
+  integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -8849,6 +8884,13 @@ nano-css@^5.2.1:
     stacktrace-js "^2.0.0"
     stylis "3.5.0"
 
+nano-time@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
+  integrity sha1-sFVPaa2J4i0JB/ehKwmTpdlhN+8=
+  dependencies:
+    big-integer "^1.6.16"
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -11868,6 +11910,13 @@ redux-saga@^1.1.3:
   dependencies:
     "@redux-saga/core" "^1.1.3"
 
+redux-state-sync@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/redux-state-sync/-/redux-state-sync-3.1.1.tgz#cd5d53edb48688cbad38aba52983cdb88ef6ff46"
+  integrity sha512-cYz2+DCXMKD+Tz0jxHY8fOby3X+7l5QmSMoeNLW+RoZnixZgqKKqAfaTKjw18UG6gsN8Wd4PSwCdeyuqxPrgSA==
+  dependencies:
+    broadcast-channel "^3.1.0"
+
 redux@^4.0.0, redux@^4.0.4, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
@@ -12231,6 +12280,13 @@ rimraf@2.6.3, rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
+rimraf@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@@ -13741,6 +13797,14 @@ universalify@^0.1.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
+unload@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
+  integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    detect-node "^2.0.4"
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"