diff --git a/client/src/components/Dashboard/DashboardBackLink.js b/client/src/components/Dashboard/DashboardBackLink.js
new file mode 100644
index 000000000..06700039e
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+export default compose(
+ withBreadcrumbs(routes),
+ withDashboard(({ dashboardBackLink }) => ({
+ dashboardBackLink,
+ })),
+)(DashboardBackLink);
diff --git a/client/src/components/Dashboard/DashboardBreadcrumbs.js b/client/src/components/Dashboard/DashboardBreadcrumbs.js
index bf73a8916..840e0b1cd 100644
--- a/client/src/components/Dashboard/DashboardBreadcrumbs.js
+++ b/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(
diff --git a/client/src/components/Dashboard/DashboardTopbar.js b/client/src/components/Dashboard/DashboardTopbar.js
index a99b738b4..591586207 100644
--- a/client/src/components/Dashboard/DashboardTopbar.js
+++ b/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({
diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js
index 1d26a16bc..7d7bb45aa 100644
--- a/client/src/config/sidebarMenu.js
+++ b/client/src/config/sidebarMenu.js
@@ -130,7 +130,7 @@ export default [
children: [
{
text:
,
- href: '/expenses-list',
+ href: '/expenses',
},
{
text:
,
diff --git a/client/src/containers/Accounting/MakeJournalEntriesPage.js b/client/src/containers/Accounting/MakeJournalEntriesPage.js
index 035881408..0e823f2da 100644
--- a/client/src/containers/Accounting/MakeJournalEntriesPage.js
+++ b/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]);
diff --git a/client/src/containers/Dashboard/withDashboard.js b/client/src/containers/Dashboard/withDashboard.js
index bd88b9f31..5400d48f1 100644
--- a/client/src/containers/Dashboard/withDashboard.js
+++ b/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;
};
diff --git a/client/src/containers/Dashboard/withDashboardActions.js b/client/src/containers/Dashboard/withDashboardActions.js
index b8b2a156a..d55dee24a 100644
--- a/client/src/containers/Dashboard/withDashboardActions.js
+++ b/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);
diff --git a/client/src/containers/Expenses/Expenses.js b/client/src/containers/Expenses/Expenses.js
index 6cda447f8..a08f94c78 100644
--- a/client/src/containers/Expenses/Expenses.js
+++ b/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(),
diff --git a/client/src/containers/Purchases/Bill/Bills.js b/client/src/containers/Purchases/Bill/Bills.js
index 8d91e6da9..e6279e279 100644
--- a/client/src/containers/Purchases/Bill/Bills.js
+++ b/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) =>
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMade.js b/client/src/containers/Purchases/PaymentMades/PaymentMade.js
index 91fe1fcc3..49e34c61b 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMade.js
+++ b/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(() => {
diff --git a/client/src/containers/Sales/Estimate/Estimates.js b/client/src/containers/Sales/Estimate/Estimates.js
index 6a7816873..60dda9d08 100644
--- a/client/src/containers/Sales/Estimate/Estimates.js
+++ b/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],
diff --git a/client/src/containers/Sales/Invoice/Invoices.js b/client/src/containers/Sales/Invoice/Invoices.js
index 0b46cef1c..892c208f4 100644
--- a/client/src/containers/Sales/Invoice/Invoices.js
+++ b/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({}));
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js
index 7232e7a1c..f8d1a23e2 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js
+++ b/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(
- ['customers-list'], () => requestFetchCustomers(),
+ const fetchCustomers = useQuery(['customers-list'], () =>
+ requestFetchCustomers(),
);
return (
@@ -75,16 +79,14 @@ function PaymentReceiveFormPage({
loading={
fetchPaymentReceive.isFetching ||
fetchAccounts.isFetching ||
- // fetchSettings.isFetching ||
+ // fetchSettings.isFetching ||
fetchCustomers.isFetching
}
name={'payment-receive-form'}
>
-
+
- )
+ );
}
export default compose(
@@ -93,4 +95,4 @@ export default compose(
withSettingsActions,
withPaymentReceivesActions,
withCustomersActions,
-)(PaymentReceiveFormPage);
\ No newline at end of file
+)(PaymentReceiveFormPage);
diff --git a/client/src/containers/Sales/Receipt/Receipts.js b/client/src/containers/Sales/Receipt/Receipts.js
index 9b9b3e85e..6e2603249 100644
--- a/client/src/containers/Sales/Receipt/Receipts.js
+++ b/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);
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index 89893843f..d52caa21a 100644
--- a/client/src/routes/dashboard.js
+++ b/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'),
}),
diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js
index 5ecb9dad1..e2e64654e 100644
--- a/client/src/static/json/icons.js
+++ b/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',
}
};
diff --git a/client/src/store/dashboard/dashboard.reducer.js b/client/src/store/dashboard/dashboard.reducer.js
index 94f2bf660..1336f48f7 100644
--- a/client/src/store/dashboard/dashboard.reducer.js
+++ b/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({
diff --git a/client/src/store/dashboard/dashboard.types.js b/client/src/store/dashboard/dashboard.types.js
index b89c33ac9..d57336ce9 100644
--- a/client/src/store/dashboard/dashboard.types.js
+++ b/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'
};
\ No newline at end of file
diff --git a/client/src/style/pages/dashboard.scss b/client/src/style/pages/dashboard.scss
index ac9d903d8..d45db8e6b 100644
--- a/client/src/style/pages/dashboard.scss
+++ b/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;