feat: dashboard back link in expand mode.

client/src/components/Dashboard/DashboardBackLink.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
+import { useHistory } from 'react-router-dom';
+import routes from 'routes/dashboard';
+import { If, Icon } from 'components';
+import withDashboard from 'containers/Dashboard/withDashboard';
+import { compose } from 'utils';
+
+function DashboardBackLink({ dashboardBackLink, breadcrumbs }) {
+  const history = useHistory();
+  const crumb = breadcrumbs[breadcrumbs.length - 2];
+
+  const handleClick = (event) => {
+    const url =
+      typeof dashboardBackLink === 'string'
+        ? dashboardBackLink
+        : crumb.match.url;
+    history.push(url);
+    event.preventDefault();
+  };
+
+  return (
+    <If condition={dashboardBackLink && crumb}>
+      <div class="dashboard__back-link">
+        <a href="#no-link" onClick={handleClick}>
+          <Icon icon={'arrow-left'} iconSize={18} /> Back to list.
+        </a>
+      </div>
+    </If>
+  );
+}
+
+export default compose(
+  withBreadcrumbs(routes),
+  withDashboard(({ dashboardBackLink }) => ({
+    dashboardBackLink,
+  })),
+)(DashboardBackLink);

client/src/components/Dashboard/DashboardBreadcrumbs.js

@@ -9,7 +9,7 @@ import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
 import routes from 'routes/dashboard';
 import { useHistory } from 'react-router-dom';
 
-function DashboardBreadcrumbs( {breadcrumbs }){
+function DashboardBreadcrumbs({ breadcrumbs }){
   const history = useHistory();
 
   return(

client/src/components/Dashboard/DashboardTopbar.js

@@ -13,6 +13,7 @@ import { FormattedMessage as T } from 'react-intl';
 
 import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
 import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
+import DashboardBackLink from 'components/Dashboard/DashboardBackLink';
 import { Icon, Hint, If } from 'components';
 
 import withSearch from 'containers/GeneralSearch/withSearch';
@@ -114,6 +115,8 @@ function DashboardTopbar({
         <div class="dashboard__breadcrumbs">
           <DashboardBreadcrumbs />
         </div>
+
+        <DashboardBackLink />
       </div>
 
       <div class="dashboard__topbar-right">

client/src/config/sidebarMenu.js

@@ -130,7 +130,7 @@ export default [
     children: [
       {
         text: <T id={'expenses'} />,
-        href: '/expenses-list',
+        href: '/expenses',
       },
       {
         text: <T id={'new_expense'} />,

client/src/containers/Accounting/MakeJournalEntriesPage.js

@@ -32,7 +32,8 @@ function MakeJournalEntriesPage({
 
   // #withDashboardActions
   setSidebarShrink,
-  resetSidebarPreviousExpand
+  resetSidebarPreviousExpand,
+  setDashboardBackLink
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -40,10 +41,14 @@ function MakeJournalEntriesPage({
   useEffect(() => {
     // Shrink the sidebar by foce.
     setSidebarShrink();
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink('/manual-journals');
 
     return () => {
       // Reset the sidebar to the previous status.
       resetSidebarPreviousExpand();
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
     };
   }, [resetSidebarPreviousExpand, setSidebarShrink]);
 

client/src/containers/Dashboard/withDashboard.js

@@ -10,6 +10,7 @@ export default (mapState) => {
       editViewId: state.dashboard.topbarEditViewId,
       sidebarExpended: state.dashboard.sidebarExpended,
       preferencesPageTitle: state.dashboard.preferencesPageTitle,
+      dashboardBackLink: state.dashboard.backLink,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Dashboard/withDashboardActions.js

@@ -57,6 +57,11 @@ const mapActionsToProps = (dispatch) => ({
   recordSidebarPreviousExpand: () => dispatch({
     type: t.RECORD_SIDEBAR_PREVIOUS_EXPAND,
   }),
+
+  setDashboardBackLink: (backLink) => dispatch({
+    type: t.SET_DASHBOARD_BACK_LINK,
+    payload: { backLink }
+  })
 });
 
 export default connect(null, mapActionsToProps);

client/src/containers/Expenses/Expenses.js

@@ -30,6 +30,7 @@ function Expenses({
   // #withDashboardActions
   setSidebarShrink,
   resetSidebarPreviousExpand,
+  setDashboardBackLink,
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -37,12 +38,16 @@ function Expenses({
   useEffect(() => {
     // Shrink the sidebar by foce.
     setSidebarShrink();
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink(true);
 
     return () => {
       // Reset the sidebar to the previous status.
       resetSidebarPreviousExpand();
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
     };
-  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+  }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
 
   const fetchAccounts = useQuery('accounts-list', (key) =>
     requestFetchAccounts(),

client/src/containers/Purchases/Bill/Bills.js

@@ -33,6 +33,7 @@ function Bills({
   // #withDashboardActions
   setSidebarShrink,
   resetSidebarPreviousExpand,
+  setDashboardBackLink
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -40,12 +41,16 @@ function Bills({
   useEffect(() => {
     // Shrink the sidebar by foce.
     setSidebarShrink();
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink(true);
 
     return () => {
       // Reset the sidebar to the previous status.
       resetSidebarPreviousExpand();
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
     };
-  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+  }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
 
   // Handle fetch accounts
   const fetchAccounts = useQuery('accounts-list', (key) =>

client/src/containers/Purchases/PaymentMades/PaymentMade.js

@@ -36,6 +36,7 @@ function PaymentMade({
   changePageTitle,
   setSidebarShrink,
   resetSidebarPreviousExpand,
+  setDashboardBackLink
 }) {
   const { id: paymentMadeId } = useParams();
   const { formatMessage } = useIntl();
@@ -43,12 +44,16 @@ function PaymentMade({
   useEffect(() => {
     // Shrink the sidebar by foce.
     setSidebarShrink();
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink(true);
 
     return () => {
       // Reset the sidebar to the previous status.
       resetSidebarPreviousExpand();
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
     };
-  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+  }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
 
   // Handle page title change in new and edit mode.
   useEffect(() => {

client/src/containers/Sales/Estimate/Estimates.js

@@ -28,7 +28,8 @@ function Estimates({
 
   // #withDashboardActions
   setSidebarShrink,
-  resetSidebarPreviousExpand
+  resetSidebarPreviousExpand,
+  setDashboardBackLink,
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -36,12 +37,16 @@ function Estimates({
   useEffect(() => {
     // Shrink the sidebar by foce.
     setSidebarShrink();
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink(true);
 
     return () => {
       // Reset the sidebar to the previous status.
       resetSidebarPreviousExpand();
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
     };
-  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+  }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
 
   const fetchEstimate = useQuery(
     ['estimate', id],

client/src/containers/Sales/Invoice/Invoices.js

@@ -29,6 +29,7 @@ function Invoices({
   // #withDashboardActions
   setSidebarShrink,
   resetSidebarPreviousExpand,
+  setDashboardBackLink,
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -36,18 +37,22 @@ function Invoices({
   useEffect(() => {
     // Shrink the sidebar by foce.
     setSidebarShrink();
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink(true);
 
     return () => {
       // Reset the sidebar to the previous status.
       resetSidebarPreviousExpand();
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
     };
-  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+  }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
 
   const fetchInvoice = useQuery(
     ['invoice', id],
     (key, _id) => requsetFetchInvoice(_id),
     { enabled: !!id },
-);
+  );
 
   const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
 

client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js

@@ -6,7 +6,7 @@ import { useQuery } from 'react-query';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import PaymentReceiveForm from './PaymentReceiveForm';
-import withDashboardActions from "containers/Dashboard/withDashboardActions";
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
@@ -18,7 +18,6 @@ import { compose } from 'utils';
  * Payment receive form page.
  */
 function PaymentReceiveFormPage({
-
   // #withDashboardAction
   changePageTitle,
 
@@ -37,25 +36,30 @@ function PaymentReceiveFormPage({
   // #withDashboardActions
   setSidebarShrink,
   resetSidebarPreviousExpand,
+  setDashboardBackLink,
 }) {
   const { id: paymentReceiveId } = useParams();
 
   useEffect(() => {
     // Shrink the sidebar by foce.
     setSidebarShrink();
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink(true);
 
     return () => {
       // Reset the sidebar to the previous status.
       resetSidebarPreviousExpand();
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
     };
-  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+  }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
 
   // Fetches payment recevie details.
   const fetchPaymentReceive = useQuery(
     ['payment-receive', paymentReceiveId],
     (key, _id) => requestFetchPaymentReceive(_id),
     { enabled: paymentReceiveId },
-  )
+  );
 
   // Handle fetch accounts data.
   const fetchAccounts = useQuery('accounts-list', (key) =>
@@ -66,8 +70,8 @@ function PaymentReceiveFormPage({
   const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
 
   // Fetches customers list.
-  const fetchCustomers = useQuery(
+  const fetchCustomers = useQuery(['customers-list'], () =>
-    ['customers-list'], () => requestFetchCustomers(),
+    requestFetchCustomers(),
   );
 
   return (
@@ -80,11 +84,9 @@ function PaymentReceiveFormPage({
       }
       name={'payment-receive-form'}
     >
-      <PaymentReceiveForm
+      <PaymentReceiveForm paymentReceiveId={paymentReceiveId} />
-        paymentReceiveId={paymentReceiveId}
-      />
     </DashboardInsider>
-  )
+  );
 }
 
 export default compose(

client/src/containers/Sales/Receipt/Receipts.js

@@ -33,6 +33,7 @@ function Receipts({
   // #withDashboardActions
   setSidebarShrink,
   resetSidebarPreviousExpand,
+  setDashboardBackLink,
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -40,12 +41,16 @@ function Receipts({
   useEffect(() => {
     // Shrink the sidebar by foce.
     setSidebarShrink();
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink(true);
 
     return () => {
       // Reset the sidebar to the previous status.
       resetSidebarPreviousExpand();
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
     };
-  }, [resetSidebarPreviousExpand, setSidebarShrink]);  
+  }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
 
   const fetchReceipt = useQuery(
     ['receipt', id],
@@ -101,5 +106,5 @@ export default compose(
   withItemsActions,
   withAccountsActions,
   withSettingsActions,
-  withDashboardActions
+  withDashboardActions,
 )(Receipts);

client/src/routes/dashboard.js

@@ -174,7 +174,7 @@ export default [
     breadcrumb: 'Edit',
   },
   {
-    path: `/expenses-list`,
+    path: `/expenses`,
     component: LazyLoader({
       loader: () => import('containers/Expenses/ExpensesList'),
     }),

client/src/static/json/icons.js

@@ -349,5 +349,11 @@ export default {
       'M19 14V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-9-1c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-6v11c0 1.1-.9 2-2 2H4v-2h17V7h2z',
     ],
     viewBox: '0 0 24 24',
+  },
+  "arrow-left": {
+    path: [
+      'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z',
+    ],
+    viewBox: '0 0 24 24',
   }
 };

client/src/store/dashboard/dashboard.reducer.js

@@ -13,6 +13,7 @@ const initialState = {
   dialogs: {},
   topbarEditViewId: null,
   requestsLoading: 0,
+  backLink: false,
 };
 
 const reducerInstance = createReducer(initialState, {
@@ -82,6 +83,11 @@ const reducerInstance = createReducer(initialState, {
   [t.RESET_SIDEBAR_PREVIOUS_EXPAND]: (state) => {
     state.sidebarExpended = state.previousSidebarExpended;
   },
+
+  [t.SET_DASHBOARD_BACK_LINK]: (state, action) => {
+    const { backLink } = action.payload;
+    state.backLink = backLink;
+  }
 });
 
 export default persistReducer({

client/src/store/dashboard/dashboard.types.js

@@ -17,4 +17,5 @@ export default {
   SIDEBAR_SHRINK: 'SIDEBAR_SHRINK',
   RESET_SIDEBAR_PREVIOUS_EXPAND: 'RESET_SIDEBAR_PREVIOUS_EXPAND',
   RECORD_SIDEBAR_PREVIOUS_EXPAND: 'RECORD_SIDEBAR_PREVIOUS_EXPAND',
+  SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK'
 };

client/src/style/pages/dashboard.scss

@@ -111,6 +111,15 @@
     }
   }
 
+  &__back-link{
+    margin-left: 24px;
+    display: flex;
+
+    a{
+      margin: auto 0;
+    }
+  }
+
   &__actions-bar{
     border-bottom: 2px solid #EAEAEA;