WIP feature/breadcrumb/fix_localize

2026-02-16 12:50:38 +00:00 · 2020-05-13 00:02:21 +02:00
parent 4ab85eaf09
commit e6f63fbc88
69 changed files with 610 additions and 394 deletions
--- a/client/src/containers/Accounting/MakeJournalEntriesPage.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesPage.js
@@ -26,11 +26,11 @@ function MakeJournalEntriesPage({

  const handleFormSubmit = useCallback((payload) => {
    payload.redirect && 
-      history.push('/dashboard/accounting/manual-journals');
+      history.push('/manual-journals');
  }, [history]);

  const handleCancel = useCallback(() => {
-    history.push('/dashboard/accounting/manual-journals');
+    history.push('/manual-journals');
  }, [history]);

  return (
--- a/client/src/containers/Accounting/ManualJournalActionsBar.js
+++ b/client/src/containers/Accounting/ManualJournalActionsBar.js
@@ -53,7 +53,7 @@ function ManualJournalActionsBar({
  });

  const onClickNewManualJournal = useCallback(() => {
-    history.push('/dashboard/accounting/make-journal-entry');
+    history.push('/make-journal-entry');
  }, [history]);

  const filterDropdown = FilterDropdown({
--- a/client/src/containers/Accounting/ManualJournalsList.js
+++ b/client/src/containers/Accounting/ManualJournalsList.js
@@ -97,7 +97,7 @@ function ManualJournalsTable({

  const handleEditJournal = useCallback(
    (journal) => {
-      history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
+      history.push(`/manual-journals/${journal.id}/edit`);
    },
    [history]
  );
@@ -162,8 +162,8 @@ function ManualJournalsTable({
          <Route
            exact={true}
            path={[
-              '/dashboard/accounting/manual-journals/:custom_view_id/custom_view',
-              '/dashboard/accounting/manual-journals',
+              '/manual-journals/:custom_view_id/custom_view',
+              '/manual-journals',
            ]}> 
          </Route>
        </Switch>
--- a/client/src/containers/Accounting/ManualJournalsViewTabs.js
+++ b/client/src/containers/Accounting/ManualJournalsViewTabs.js
@@ -39,7 +39,7 @@ function ManualJournalsViewTabs({

  const handleClickNewView = () => {
    setTopbarEditView(null);
-    history.push('/dashboard/custom_views/manual_journals/new');
+    history.push('/custom_views/manual_journals/new');
  };
  const handleViewLinkClick = () => {
    setTopbarEditView(customViewId);
@@ -61,7 +61,7 @@ function ManualJournalsViewTabs({
  }, [customViewId]);

  const tabs = manualJournalsViews.map((view) => {
-    const baseUrl = '/dashboard/accounting/manual-journals';
+    const baseUrl = '/manual-journals';
    const link = (
      <Link
        to={`${baseUrl}/${view.id}/custom_view`}
@@ -85,7 +85,7 @@ function ManualJournalsViewTabs({
          <Tab
            id='all'
            title={
-              <Link to={`/dashboard/accounting/manual-journals`}>All</Link>
+              <Link to={`/manual-journals`}>All</Link>
            }
          />
          {tabs}
--- a/client/src/containers/Accounts/AccountsActionsBar.js
+++ b/client/src/containers/Accounts/AccountsActionsBar.js
@@ -51,7 +51,7 @@ function AccountsActionsBar({
  const onClickNewAccount = () => { openDialog('account-form', {}); };
  const onClickViewItem = (view) => {
    history.push(view
-      ? `/dashboard/accounts/${view.id}/custom_view` : '/dashboard/accounts');
+      ? `/accounts/${view.id}/custom_view` : '/accounts');
  };

  const viewsMenuItems = accountsViews.map((view) => {
--- a/client/src/containers/Accounts/AccountsChart.js
+++ b/client/src/containers/Accounts/AccountsChart.js
@@ -96,7 +96,7 @@ function AccountsChart({
    }
    if (errors.find((e) => e.type === 'ACCOUNT.HAS.ASSOCIATED.TRANSACTIONS')) {
      AppToaster.show({
-        message: 'cannot_delete_account_has_associated_transactions'
+        message: formatMessage({id:'cannot_delete_account_has_associated_transactions'})
      });
    }
  }
@@ -250,8 +250,8 @@ function AccountsChart({
          <Route
            exact={true}
            path={[
-              '/dashboard/accounts/:custom_view_id/custom_view',
-              '/dashboard/accounts',
+              '/accounts/:custom_view_id/custom_view',
+              '/accounts',
            ]}
          >
            <AccountsViewsTabs onViewChanged={handleViewChanged} />
@@ -310,8 +310,8 @@ function AccountsChart({
        </Alert>

        <Alert
-          cancelButtonText="Cancel"
-          confirmButtonText={`Delete (${selectedRowsCount})`}
+          cancelButtonText={<T id={'cancel'}/>}
+          confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
          icon="trash"
          intent={Intent.DANGER}
          isOpen={bulkDelete}
--- a/client/src/containers/Accounts/AccountsDataTable.js
+++ b/client/src/containers/Accounts/AccountsDataTable.js
@@ -72,12 +72,12 @@ function AccountsDataTable({
      <MenuDivider />
      <If condition={account.active}>
        <MenuItem
-          text='Inactivate Account'
+          text={<T id={'inactivate_account'}/>}
          onClick={() => onInactiveAccount(account)} />
      </If>
      <If condition={!account.active}>
        <MenuItem
-          text='Activate Account'
+          text={<T id={'activate_account'}/>}
          onClick={() => onActivateAccount(account)} />
      </If>
      <MenuItem
--- a/client/src/containers/Accounts/AccountsViewsTabs.js
+++ b/client/src/containers/Accounts/AccountsViewsTabs.js
@@ -19,7 +19,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import withAccounts from 'containers/Accounts/withAccounts';
 import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
 import withViewDetail from 'containers/Views/withViewDetails';
-
+import { FormattedMessage as T, useIntl } from 'react-intl';

 function AccountsViewsTabs({
  // #withViewDetail
@@ -67,7 +67,7 @@ function AccountsViewsTabs({
  // Handle click a new view tab.
  const handleClickNewView = () => {
    setTopbarEditView(null);
-    history.push('/dashboard/custom_views/accounts/new');
+    history.push('/custom_views/accounts/new');
  };

  // Handle view tab link click.
@@ -76,7 +76,7 @@ function AccountsViewsTabs({
  };

  const tabs = accountsViews.map((view) => {
-    const baseUrl = '/dashboard/accounts';
+    const baseUrl = '/accounts';

    const link = (
      <Link
@@ -98,7 +98,7 @@ function AccountsViewsTabs({
        >
          <Tab
            id={'all'}
-            title={<Link to={`/dashboard/accounts`}>All</Link>}
+            title={<Link to={`/accounts`}><T id={'all'}/></Link>}
            onClick={handleViewLinkClick}
          />
          { tabs }
--- a/client/src/containers/Authentication/InviteAccept.js
+++ b/client/src/containers/Authentication/InviteAccept.js
@@ -148,7 +148,7 @@ function Invite({ requestInviteAccept, requestInviteMetaByToken }) {
          </h3>
          <p>
            <T id={'enter_your_personal_information'} />
-            <b>{inviteValue.organization_name}</b> Organization.
+            <b>{inviteValue.organization_name}</b> <T id={'organization'}/>
          </p>
        </div>

--- a/client/src/containers/Authentication/Login.js
+++ b/client/src/containers/Authentication/Login.js
@@ -38,7 +38,7 @@ function Login({
  const loginValidationSchema =  Yup.object().shape({
    crediential: Yup.string()
      .required(formatMessage({ id: 'required' }))
-      .email(formatMessage({ id: 'invalid_email_or_phone_numner' })),
+      .email(formatMessage({ id: 'invalid_email_or_phone_number' })),
    password: Yup.string()
      .required(formatMessage({ id: 'required' }))
      .min(4),
@@ -63,7 +63,7 @@ function Login({
        crediential: values.crediential,
        password: values.password,
      }).then(() => {
-        history.go('/dashboard/homepage');
+        history.go('/homepage');
        setSubmitting(false);
      }).catch((errors) => {
        const toastBuilders = [];
--- a/client/src/containers/Authentication/SendResetPassword.js
+++ b/client/src/containers/Authentication/SendResetPassword.js
@@ -52,8 +52,7 @@ function SendResetPassword({ requestSendResetPassword }) {
      requestSendResetPassword(values.crediential)
        .then((response) => {
          AppToaster.show({
-            message: `Check your email for a link to reset your password.
-              If it doesn’t appear within a few minutes, check your spam folder.`,
+            message: formatMessage({id:'check_your_email_for_a_link_to_reset'}),
            intent: Intent.SUCCESS,
          });
          history.push('/auth/login');
@@ -62,7 +61,7 @@ function SendResetPassword({ requestSendResetPassword }) {
        .catch((errors) => {
          if (errors.find((e) => e.type === 'EMAIL.NOT.REGISTERED')) {
            AppToaster.show({
-              message: "We couldn't find your account with that email",
+              message: formatMessage({id:'we_couldn_t_find_your_account_with_that_email'}),
              intent: Intent.DANGER,
            });
          }
--- a/client/src/containers/Dialogs/AccountFormDialog.js
+++ b/client/src/containers/Dialogs/AccountFormDialog.js
@@ -375,7 +375,7 @@ function AccountFormDialog({
                  text={
                    selectedSubaccount
                      ? selectedSubaccount.name
-                      : 'Select Parent Account'
+                      : <T id={'select_parent_account'}/>
                  }
                />
              </Select>
--- a/client/src/containers/Dialogs/ExchangeRateDialog.js
+++ b/client/src/containers/Dialogs/ExchangeRateDialog.js
@@ -82,7 +82,7 @@ function ExchangeRateDialog({
          .then((response) => {
            closeDialog(name);
            AppToaster.show({
-              message: 'the_exchange_rate_has_been_edited',
+              message: formatMessage({id:'the_exchange_rate_has_been_successfully_edited'})
            });
            setSubmitting(false);
          })
@@ -94,7 +94,7 @@ function ExchangeRateDialog({
          .then((response) => {
            closeDialog(name);
            AppToaster.show({
-              message: 'the_exchangeRate_has_been_submit',
+              message: formatMessage({id:'the_exchange_rate_has_been_successfully_created'})
            });
            setSubmitting(false);
          })
--- a/client/src/containers/Dialogs/InviteUserDialog.js
+++ b/client/src/containers/Dialogs/InviteUserDialog.js
@@ -74,7 +74,7 @@ function InviteUserDialog({
          .then((response) => {
            closeDialog(name);
            AppToaster.show({
-              message: 'the_user_details_has_been_updated',
+              message: formatMessage({id:'the_user_details_has_been_updated'}),
            });
            setSubmitting(false);
          })
--- a/client/src/containers/Dialogs/ItemFromDialog.js
+++ b/client/src/containers/Dialogs/ItemFromDialog.js
@@ -42,7 +42,7 @@ function ItemFromDialog({
      submitItemCategory({ values })
        .then((response) => {
          AppToaster.show({
-            message: 'the_category_has_been_submit',
+            message: formatMessage({id:'the_category_has_been_successfully_created'}),
          });
        })
        .catch((error) => {
--- a/client/src/containers/ExchangeRates/ExchangeRate.js
+++ b/client/src/containers/ExchangeRates/ExchangeRate.js
@@ -66,7 +66,7 @@ function ExchangeRate({
    requestDeleteExchangeRate(deleteExchangeRate.id).then(() => {
      setDeleteExchangeRate(false);
      AppToaster.show({
-        message: 'the_exchange_rate_has_been_delete',
+        message: formatMessage({id:'the_exchange_rate_has_been_successfully_deleted'}),
      });
    });
  }, [deleteExchangeRate, requestDeleteExchangeRate]);
--- a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
+++ b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
@@ -19,7 +19,7 @@ import FilterDropdown from 'components/FilterDropdown';
 import withResourceDetail from 'containers/Resources/withResourceDetails';

 import { compose } from 'utils';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T ,useIntl } from 'react-intl';


 function ExchangeRateActionsBar({
@@ -34,6 +34,7 @@ function ExchangeRateActionsBar({
  onFilterChanged,
 }) {
  const [filterCount, setFilterCount] = useState(0);
+const {formatMessage} =useIntl()

  const onClickNewExchangeRate = () => {
    openDialog('exchangeRate-form', {});
@@ -80,7 +81,7 @@ function ExchangeRateActionsBar({
              filterCount <= 0 ? (
                <T id={'filter'} />
              ) : (
-                `${filterCount} filters applied`
+                `${filterCount} ${formatMessage({id:'filters_applied'})}`
              )
            }
            icon={<Icon icon='filter' />}
--- a/client/src/containers/Expenses/ExpensesList.js
+++ b/client/src/containers/Expenses/ExpensesList.js
@@ -36,7 +36,7 @@ function ExpensesList({
    deleteExpense(deleteExpenseState.id).then(() => {
      setDeleteExpense(false);
      AppToaster.show({
-        message: 'the_expense_has_been_deleted'
+        message: formatMessage({id:'the_expense_has_been_successfully_deleted'})
      });
    });
  };
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
@@ -1,8 +1,7 @@
-import React, {useEffect, useMemo, useCallback, useState} from 'react';
+import React, { useEffect, useMemo, useCallback, useState } from 'react';

-import {compose} from 'utils';
+import { compose } from 'utils';
 import { useQuery } from 'react-query';
-import { useIntl } from 'react-intl';
 import moment from 'moment';

 import BalanceSheetHeader from './BalanceSheetHeader';
@@ -17,6 +16,8 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import withBalanceSheetDetail from './withBalanceSheetDetail';

+import { FormattedMessage as T, useIntl } from 'react-intl';
+

 function BalanceSheet({
  // #withDashboard
@@ -24,14 +25,14 @@ function BalanceSheet({

  // #withBalanceSheetActions
  fetchBalanceSheet,
-  
+
  // #withBalanceSheetDetail
  balanceSheetLoading,

  // #withPreferences
  organizationSettings
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
  const [filter, setFilter] = useState({
    from_date: moment().startOf('year').format('YYYY-MM-DD'),
    to_date: moment().endOf('year').format('YYYY-MM-DD'),
@@ -40,7 +41,7 @@ function BalanceSheet({
    display_columns_by: '',
    none_zero: false,
  });
- 
+
  const fetchHook = useQuery(['balance-sheet', filter],
    (key, query) => { fetchBalanceSheet({ ...query }); });

@@ -50,7 +51,7 @@ function BalanceSheet({
  }, [fetchHook]);

  useEffect(() => {
-    changePageTitle('Balance Sheet');
+    changePageTitle(formatMessage({ id: 'balance_sheet' }));
  }, []);

  // Handle re-fetch balance sheet after filter change.
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
@@ -14,6 +14,7 @@ import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
 import FilterDropdown from 'components/FilterDropdown';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 export default function JournalActionsBar({
@@ -32,7 +33,7 @@ export default function JournalActionsBar({
        <Button
          className={classNames(Classes.MINIMAL, 'button--table-views')}
          icon={<Icon icon='cog' />}
-          text='Customize Report'
+          text={<T id={'customize_report'}/>}
        />
        <NavbarDivider />

@@ -43,19 +44,19 @@ export default function JournalActionsBar({

          <Button
            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text="Filter"
+            text={<T id={'filter'}/>}
            icon={ <Icon icon="filter" /> } />
        </Popover>

        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Print'
+          text={<T id={'print'}/>}
        />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Export'
+          text={<T id={'export'}/>}
        />
      </NavbarGroup>
    </DashboardActionsBar>
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
@@ -1,13 +1,12 @@
-import React, {useMemo, useCallback} from 'react';
+import React, { useMemo, useCallback } from 'react';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import {Row, Col} from 'react-grid-system';
-import { 
+import { Row, Col } from 'react-grid-system';
+import {
  Button,
  FormGroup,
  MenuItem,
 } from "@blueprintjs/core";
 import SelectList from 'components/SelectList';
-import {useIntl} from 'react-intl';
 import moment from 'moment';
 import Icon from 'components/Icon';
 import { useFormik } from 'formik';
@@ -15,12 +14,13 @@ import * as Yup from 'yup';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 export default function BalanceSheetHeader({
  onSubmitFilter,
  pageFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();

  const formik = useFormik({
    enableReinitialize: true,
@@ -49,18 +49,18 @@ export default function BalanceSheetHeader({
  // Handle submit filter submit button.
  const handleSubmitClick = useCallback(() => {
    formik.submitForm();
-  }, [formik]);  
+  }, [formik]);

  const filterAccountsOptions = useMemo(() => [
-    {key: '', name: 'Accounts with Zero Balance'},
-    {key: 'all-trans', name: 'All Transactions' },
+    { key: '', name: formatMessage({ id: 'accounts_with_zero_balance' }) },
+    { key: 'all-trans', name: formatMessage({ id: 'all_transactions' }) },
  ], []);

  const filterAccountRenderer = useCallback((item, { handleClick, modifiers, query }) => {
    return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
  }, []);

-  const infoIcon = useMemo(() => 
+  const infoIcon = useMemo(() =>
    (<Icon icon="info-circle" iconSize={12} />), []);

  const handleAccountingBasisChange = useCallback((value) => {
@@ -79,7 +79,7 @@ export default function BalanceSheetHeader({

        <Col sm={3}>
          <FormGroup
-            label={'Filter Accounts'}
+            label={<T id={'filter_accounts'} />}
            className="form-group--select-list bp3-fill"
            inline={false}>

@@ -94,8 +94,8 @@ export default function BalanceSheetHeader({

        <Col sm={3}>
          <RadiosAccountingBasis
-            selectedValue={formik.values.basis} 
-            onChange={handleAccountingBasisChange} />          
+            selectedValue={formik.values.basis}
+            onChange={handleAccountingBasisChange} />
        </Col>

        <Col sm={3}>
@@ -104,7 +104,7 @@ export default function BalanceSheetHeader({
            onClick={handleSubmitClick}
            disabled={formik.isSubmitting}
            className={'button--submit-filter mt2'}>
-            { 'Calculate Report' }
+            <T id={'calculate_report'} />
          </Button>
        </Col>
      </Row>
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
@@ -12,6 +12,7 @@ import {
 } from 'store/financialStatement/financialStatements.selectors';

 import { compose, defaultExpanderReducer } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 function BalanceSheetTable({
@@ -27,6 +28,8 @@ function BalanceSheetTable({
  onFetchData,
  loading,
 }) {
+
+  const {formatMessage} = useIntl();
  const columns = useMemo(() => [
    {
      // Build our expander column
@@ -68,18 +71,18 @@ function BalanceSheetTable({
      disableResizing: true,
    },
    {
-      Header: 'Account Name',
+      Header: formatMessage({id:'account_name'}),
      accessor: 'name',
      className: "account_name",
    },
    {
-      Header: 'Code', 
+      Header: formatMessage({id:'code'}),
      accessor: 'code',
      className: "code",
    },
    ...(balanceSheetQuery.display_columns_type === 'total') ? [
      {
-        Header: 'Total',
+        Header: formatMessage({id:'total'}),
        accessor: 'balance.formatted_amount',
        Cell: ({ cell }) => {
          const row = cell.row.original;
--- a/client/src/containers/FinancialStatements/FinancialStatementDateRange.js
+++ b/client/src/containers/FinancialStatements/FinancialStatementDateRange.js
@@ -2,7 +2,8 @@ import React, {useState, useCallback, useMemo} from 'react';
 import {Row, Col} from 'react-grid-system';
 import {momentFormatter} from 'utils';
 import {DateInput} from '@blueprintjs/datetime';
-import {useIntl} from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import {
  HTMLSelect,
  FormGroup, 
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
@@ -5,12 +5,13 @@ import useAsync from 'hooks/async';
 import DashboardConnect from 'connectors/Dashboard.connector';
 import GeneralLedgerConnect from 'connectors/GeneralLedgerSheet.connect';
 import GeneralLedgerHeader from './GeneralLedgerHeader';
-import {compose} from 'utils';
+import { compose } from 'utils';
 import DashboardInsider from 'components/Dashboard/DashboardInsider'
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
 import AccountsConnect from 'connectors/Accounts.connector';
 import SettingsConnect from 'connectors/Settings.connect';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 function GeneralLedger({
  changePageTitle,
@@ -21,6 +22,7 @@ function GeneralLedger({
  requestFetchAccounts,
  organizationSettings,
 }) {
+  const { formatMessage } = useIntl()
  const [filter, setFilter] = useState({
    from_date: moment().startOf('year').format('YYYY-MM-DD'),
    to_date: moment().endOf('year').format('YYYY-MM-DD'),
@@ -30,7 +32,7 @@ function GeneralLedger({

  // Change page title of the dashboard.
  useEffect(() => {
-    changePageTitle('General Ledger');
+    changePageTitle(formatMessage({id:'general_ledger'}));
  }, []);

  const fetchHook = useAsync(() => {
@@ -45,7 +47,7 @@ function GeneralLedger({
    ]);
  }, false);

-  const generalLedgerSheetIndex = useMemo(() => 
+  const generalLedgerSheetIndex = useMemo(() =>
    getGeneralLedgerSheetIndex(filter),
    [getGeneralLedgerSheetIndex, filter]);

@@ -55,7 +57,7 @@ function GeneralLedger({

  // Handle fetch data of trial balance table.
  const handleFetchData = useCallback(() => { fetchSheet.execute() }, [fetchSheet]);
-  
+
  // Handle financial statement filter change.
  const handleFilterSubmit = useCallback((filter) => {
    const parsedFilter = {
@@ -67,7 +69,7 @@ function GeneralLedger({
    fetchSheet.execute(parsedFilter);
  }, [setFilter, fetchSheet]);

-  const handleFilterChanged = () => {};
+  const handleFilterChanged = () => { };

  return (
    <DashboardInsider>
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
@@ -14,11 +14,14 @@ import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
 import FilterDropdown from 'components/FilterDropdown';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 export default function GeneralLedgerActionsBar({

 }) {

+  const {formatMessage} =useIntl();
+
  const filterDropdown = FilterDropdown({
    fields: [],
    onFilterChange: (filterConditions) => {
@@ -32,7 +35,7 @@ export default function GeneralLedgerActionsBar({
        <Button
          className={classNames(Classes.MINIMAL, 'button--table-views')}
          icon={<Icon icon='cog' />}
-          text='Customize Report'
+          text={<T id={'customize_report'}/>}
        />
        <NavbarDivider />

@@ -43,19 +46,19 @@ export default function GeneralLedgerActionsBar({

          <Button
            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text="Filter"
+            text={<T id={'filter'}/>}
            icon={ <Icon icon="filter" /> } />
        </Popover>

        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Print'
+          text={<T id={'print'}/>}
        />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Export'
+          text={<T id={'export'}/>}
        />
      </NavbarGroup>
    </DashboardActionsBar>
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
@@ -1,6 +1,7 @@
 import React, {useState, useMemo, useEffect, useCallback} from 'react';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import {useIntl} from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import {
  Button,
  FormGroup,
@@ -19,13 +20,12 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
 import * as Yup from 'yup';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';

-
 function GeneralLedgerHeader({
  onSubmitFilter,
  pageFilter,
  accounts,
 }) {
-  const intl = useIntl();
+  const {formatMessage} = useIntl();

  const formik = useFormik({
    enableReinitialize: true,
@@ -64,7 +64,7 @@ function GeneralLedgerHeader({
      <Row>
        <Col sm={3}>
          <FormGroup
-            label={'Specific Accounts'}
+            label={<T id={'specific_accounts'}/>}
            className={classNames('form-group--select-list', Classes.FILL)}
          >
            <AccountsMultiSelect
@@ -84,7 +84,7 @@ function GeneralLedgerHeader({
            onClick={handleSubmitClick}
            disabled={formik.isSubmitting}
            className={'button--submit-filter mt2'}>
-            { 'Calculate Report' }
+            <T id={'calculate_report'}/>
          </Button>
        </Col>
      </Row>
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useCallback, useMemo} from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
@@ -6,6 +6,7 @@ import moment from 'moment';
 import {
  defaultExpanderReducer,
 } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 const ROW_TYPE = {
@@ -21,9 +22,10 @@ export default function GeneralLedgerTable({
  loading,
  data,
 }) {
+  
  // Account name column accessor.
  const accountNameAccessor = useCallback((row) => {
-    switch(row.rowType) {
+    switch (row.rowType) {
      case ROW_TYPE.OPENING_BALANCE:
        return 'Opening Balance';
      case ROW_TYPE.CLOSING_BALANCE:
@@ -49,32 +51,32 @@ export default function GeneralLedgerTable({
    const transaction = cell.row.original

    if (transaction.rowType === ROW_TYPE.ACCOUNT) {
-      return (!cell.row.isExpanded) ? 
+      return (!cell.row.isExpanded) ?
        (<Money amount={transaction.closing.amount} currency={"USD"} />) : '';
    }
    return (<Money amount={transaction.amount} currency={"USD"} />);
  }, []);

  const referenceLink = useCallback((row) => {
-    return (<a href="">{ row.referenceId }</a>);
+    return (<a href="">{row.referenceId}</a>);
  });
-
+  const { formatMessage } = useIntl();
  const columns = useMemo(() => [
    {
      // Build our expander column
      id: 'expander', // Make sure it has an ID
-      className: 'expander',      
+      className: 'expander',
      Header: ({
        getToggleAllRowsExpandedProps,
        isAllRowsExpanded
      }) => (
-        <span {...getToggleAllRowsExpandedProps()} className="toggle">
-          {isAllRowsExpanded ?
-            (<span class="arrow-down" />) :
-            (<span class="arrow-right" />)
-          }
-        </span>
-      ),
+          <span {...getToggleAllRowsExpandedProps()} className="toggle">
+            {isAllRowsExpanded ?
+              (<span class="arrow-down" />) :
+              (<span class="arrow-right" />)
+            }
+          </span>
+        ),
      Cell: ({ row }) =>
        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
        // to build the toggle for expanding a row
@@ -100,37 +102,37 @@ export default function GeneralLedgerTable({
      disableResizing: true,
    },
    {
-      Header: 'Account Name',
+      Header: formatMessage({id:'account_name'}),
      accessor: accountNameAccessor,
      className: "name",
    },
    {
-      Header: 'Date',
+      Header: formatMessage({id:'date'}),
      accessor: dateAccessor,
      className: "date",
    },
    {
-      Header: 'Transaction Type',
+      Header: formatMessage({id:'transaction_type'}),
      accessor: 'referenceType',
      className: 'transaction_type',
    },
    {
-      Header: 'Trans. NUM',
+      Header: formatMessage({id:'trans_num'}),
      accessor: referenceLink,
      className: 'transaction_number'
    },
    {
-      Header: 'Description',
+      Header: formatMessage({id:'description'}),
      accessor: 'note',
      className: 'description',
    },
    {
-      Header: 'Amount',
+      Header: formatMessage({id:'amount'}),
      Cell: amountCell,
      className: 'amount'
    },
    {
-      Header: 'Balance',
+      Header: formatMessage({id:'balance'}),
      Cell: amountCell,
      className: 'balance',
    },
@@ -159,7 +161,7 @@ export default function GeneralLedgerTable({
        expanded={expandedRows}
        virtualizedRows={true}
        fixedItemSize={37}
-        fixedSizeHeight={1000}  />
+        fixedSizeHeight={1000} />
    </FinancialSheet>
-  ); 
+  );
 }
--- a/client/src/containers/FinancialStatements/Journal/Journal.js
+++ b/client/src/containers/FinancialStatements/Journal/Journal.js
@@ -14,6 +14,7 @@ import SettingsConnect from 'connectors/Settings.connect';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withJournal from './withJournal';
 import withJournalActions from './withJournalActions';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 function Journal({
@@ -34,9 +35,9 @@ function Journal({
    to_date: moment().endOf('year').format('YYYY-MM-DD'),
    basis: 'accural'
  });
-
+const {formatMessage} =useIntl();
  useEffect(() => {
-    changePageTitle('Journal Sheet');
+    changePageTitle(formatMessage({id:'journal_sheet'}));
  }, []);

  const fetchHook = useQuery(['journal', filter],
--- a/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
@@ -14,7 +14,7 @@ import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
 import FilterDropdown from 'components/FilterDropdown';
-
+import { FormattedMessage as T, useIntl } from 'react-intl';

 export default function JournalActionsBar({

@@ -32,7 +32,7 @@ export default function JournalActionsBar({
        <Button
          className={classNames(Classes.MINIMAL, 'button--table-views')}
          icon={<Icon icon='cog' />}
-          text='Customize Report'
+          text={<T id={'customize_report'}/>}
        />
        <NavbarDivider />

@@ -43,19 +43,19 @@ export default function JournalActionsBar({

          <Button
            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text="Filter"
+            text={<T id={'filter'}/>}
            icon={ <Icon icon="filter" /> } />
        </Popover>

        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Print'
+          text={<T id={'print'}/>}
        />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Export'
+          text={<T id={'export'}/>}
        />
      </NavbarGroup>
    </DashboardActionsBar>
--- a/client/src/containers/FinancialStatements/Journal/JournalHeader.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalHeader.js
@@ -1,12 +1,12 @@
-import React, {useCallback} from 'react';
-import {Row, Col} from 'react-grid-system';
+import React, { useCallback } from 'react';
+import { Row, Col } from 'react-grid-system';
 import {
  Button,
  Intent,
 } from '@blueprintjs/core';
 import moment from 'moment';
-import {useFormik} from 'formik';
-import {useIntl} from 'react-intl';
+import { useFormik } from 'formik';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -16,7 +16,7 @@ export default function JournalHeader({
  pageFilter,
  onSubmitFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
@@ -37,18 +37,18 @@ export default function JournalHeader({
  const handleSubmitClick = useCallback(() => {
    formik.submitForm();
  }, [formik]);
-  
+
  return (
    <FinancialStatementHeader>
      <FinancialStatementDateRange formik={formik} />
-      
+
      <Row>
        <Col sm={3}>
          <Button
            type="submit"
            onClick={handleSubmitClick}
            className={'button--submit-filter'}>
-            { 'Run Report' }
+            <T id={'run_report'} />
          </Button>
        </Col>
      </Row>
--- a/client/src/containers/FinancialStatements/Journal/JournalTable.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalTable.js
@@ -12,6 +12,7 @@ import {
 } from 'store/financialStatement/financialStatements.selectors';

 import withJournal from './withJournal';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 function JournalSheetTable({
@@ -30,46 +31,48 @@ function JournalSheetTable({
  const exceptRowTypes = (rowType, value, types) => {
    return (types.indexOf(rowType) !== -1) ? '' : value;    
  };
+const {formatMessage} =useIntl();
+
  const columns = useMemo(() => [
    {
-      Header: 'Date',
+      Header: formatMessage({id:'date'}),
      accessor: r => rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), ['first_entry']),
      className: 'date',
      width: 85,
    },
    {
-      Header: 'Transaction Type',
+      Header: formatMessage({id:'transaction_type'}),
      accessor: r => rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
      className: "transaction_type",
      width: 145,
    },
    {
-      Header: 'Num.',
+      Header: formatMessage({id:'num'}),
      accessor: r => rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
      className: 'reference_id',
      width: 70,
    },
    {
-      Header: 'Description',
+      Header: formatMessage({id:'description'}),
      accessor: 'note',
    },
    {
-      Header: 'Acc. Code',
+      Header: formatMessage({id:'acc_code'}),
      accessor: 'account.code',
      width: 120,
      className: 'account_code',
    },
    {
-      Header: 'Account',
+      Header: formatMessage({id:'account'}),
      accessor: 'account.name',
    },
    {
-      Header: 'Credit',
+      Header: formatMessage({id:'credit'}),
      accessor: r => exceptRowTypes(
        r.rowType, (<Money amount={r.credit} currency={'USD'} />), ['space_entry']),
    },
    {
-      Header: 'Debit',
+      Header: formatMessage({id:'debit'}),
      accessor: r => exceptRowTypes(
        r.rowType, (<Money amount={r.debit} currency={'USD'} />), ['space_entry']),
    },
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
@@ -9,6 +9,7 @@ import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
 import FilterDropdown from 'components/FilterDropdown';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 export default function ProfitLossActionsBar({

@@ -26,19 +27,19 @@ export default function ProfitLossActionsBar({
        <Button
          className={classNames(Classes.MINIMAL, 'button--table-views')}
          icon={<Icon icon='cog' />}
-          text='Customize Report'
+          text={<T id={'customize_report'}/>}
        />
        <NavbarDivider />

        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Print'
+          text={<T id={'print'}/>}
        />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Export'
+          text={<T id={'export'}/>}
        />
      </NavbarGroup>
    </DashboardActionsBar>
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
@@ -1,11 +1,11 @@
-import React, {useCallback} from 'react';
-import {Row, Col} from 'react-grid-system';
+import React, { useCallback } from 'react';
+import { Row, Col } from 'react-grid-system';
 import {
  Button,
 } from '@blueprintjs/core';
 import moment from 'moment';
-import {useFormik} from 'formik';
-import {useIntl} from 'react-intl';
+import { useFormik } from 'formik';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -17,7 +17,7 @@ export default function JournalHeader({
  pageFilter,
  onSubmitFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
@@ -60,7 +60,7 @@ export default function JournalHeader({

        <Col sm={3}>
          <RadiosAccountingBasis
-            selectedValue={formik.values.basis} 
+            selectedValue={formik.values.basis}
            onChange={handleAccountingBasisChange} />
        </Col>

@@ -69,7 +69,7 @@ export default function JournalHeader({
            type="submit"
            onClick={handleSubmitClick}
            className={'button--submit-filter mt2'}>
-            { 'Run Report' }
+            <T id={'run_report'} />
          </Button>
        </Col>
      </Row>
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
@@ -9,6 +9,7 @@ import {
  getFinancialSheetIndexByQuery,
 } from 'store/financialStatement/financialStatements.selectors';
 import withProfitLossDetail from './withProfitLoss';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 function ProfitLossSheetTable({
@@ -22,6 +23,9 @@ function ProfitLossSheetTable({
  onFetchData,
  companyName,
 }) {
+
+  const {formatMessage} =useIntl();
+
  const columns = useMemo(() => [
    {
      // Build our expander column
@@ -63,18 +67,18 @@ function ProfitLossSheetTable({
      disableResizing: true,
    },  
    {
-      Header: 'Account Name',
+      Header: formatMessage({id:'account_name'}),
      accessor: 'name',
      className: "name",
    },
    {
-      Header: 'Acc. Code',
+      Header: formatMessage({id:'acc_code'}),
      accessor: 'code',
      className: "account_code",
    },
    ...(profitLossQuery.display_columns_type === 'total') ? [
      {
-        Header: 'Total',
+        Header: formatMessage({id:'total'}),
        Cell: ({ cell }) => {
          const row = cell.row.original;
          if (row.total) {
--- a/client/src/containers/FinancialStatements/RadiosAccountingBasis.js
+++ b/client/src/containers/FinancialStatements/RadiosAccountingBasis.js
@@ -9,20 +9,20 @@ import {

 export default function RadiosAccountingBasis(props) {
  const { onChange, ...rest } = props;
-  const intl = useIntl();
+  const {formatMessage} = useIntl();

  return (
    <RadioGroup
      inline={true}
-      label={intl.formatMessage({'id': 'accounting_basis'})}
+      label={formatMessage({'id': 'accounting_basis'})}
      name="basis"
      onChange={handleStringChange((value) => {
        onChange && onChange(value);
      })}
      className={'radio-group---accounting-basis'}
      {...rest}>
-      <Radio label="Cash" value="cash" />
-      <Radio label="Accural" value="accural" />
+      <Radio label={formatMessage({id:'cash'})} value="cash" />
+      <Radio label={formatMessage({id:'accrual'})} value="accural" />
    </RadioGroup>
  );
 }
--- a/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js
+++ b/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js
@@ -6,6 +6,7 @@ import {
  FormGroup,
  MenuItem,
 } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 export default function SelectsListColumnsBy(props) {
  const { onItemSelect, formGroupProps, selectListProps } = props;
@@ -30,12 +31,12 @@ export default function SelectsListColumnsBy(props) {
  }, [setItemSelected, onItemSelect]);

  const buttonLabel = useMemo(() => 
-    itemSelected ? itemSelected.name : 'Select display columns by...',
+    itemSelected ? itemSelected.name : <T id={'select_display_columns_by'}/>,
    [itemSelected]);

  return (
    <FormGroup
-      label={'Display report columns'}
+      label={<T id={'display_report_columns'}/>}
      className="form-group-display-columns-by form-group--select-list bp3-fill"
      inline={false}
      {...formGroupProps}>
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
@@ -14,6 +14,7 @@ import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
 import FilterDropdown from 'components/FilterDropdown';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 export default function GeneralLedgerActionsBar({

@@ -31,19 +32,19 @@ export default function GeneralLedgerActionsBar({
        <Button
          className={classNames(Classes.MINIMAL, 'button--table-views')}
          icon={<Icon icon='cog' />}
-          text='Customize Report'
+          text={<T id={'customize_report'}/>}
        />
        <NavbarDivider />

        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Print'
+          text={<T id={'print'}/>}
        />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Export'
+          text={<T id={'export'}/>}
        />
      </NavbarGroup>
    </DashboardActionsBar>
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
@@ -14,6 +14,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withTrialBalance from './withTrialBalance';
 import SettingsConnect from 'connectors/Settings.connect';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 function TrialBalanceSheet({
@@ -44,9 +45,11 @@ function TrialBalanceSheet({
    fetchHook.refetch()
  }, [fetchHook]);

+  const {formatMessage} =useIntl();
+
  // Change page title of the dashboard.
  useEffect(() => {
-    changePageTitle('Trial Balance Sheet');
+    changePageTitle(formatMessage({id:'trial_balance_sheet'}));
  }, []);

  const handleFilterSubmit = useCallback((filter) => {
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
@@ -1,12 +1,12 @@
-import React, {useState, useCallback, useMemo} from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import * as Yup from 'yup';
-import {Row, Col} from 'react-grid-system';
+import { Row, Col } from 'react-grid-system';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import { 
+import {
  Button,
 } from "@blueprintjs/core";
 import moment from 'moment';
-import {useIntl} from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';

 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
@@ -16,7 +16,7 @@ export default function TrialBalanceSheetHeader({
  pageFilter,
  onSubmitFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
@@ -49,7 +49,7 @@ export default function TrialBalanceSheetHeader({
            onClick={handleSubmitClick}
            disabled={formik.isSubmitting}
            className={'button--submit-filter'}>
-            { 'Run Report' }
+            <T id={'run_report'} />
          </Button>
        </Col>
      </Row>
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
@@ -10,6 +10,7 @@ import {
 import withTrialBalance from './withTrialBalance';

 import { compose } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 function TrialBalanceSheetTable({
@@ -23,6 +24,9 @@ function TrialBalanceSheetTable({
  loading,
  companyName,
 }) {
+
+  const {formatMessage} =useIntl();
+
  const columns = useMemo(() => [
    {
      // Build our expander column
@@ -64,30 +68,30 @@ function TrialBalanceSheetTable({
      disableResizing: true,
    },
    {
-      Header: 'Account Name',
+      Header: formatMessage({id:'account_name'}),
      accessor: 'name',
      className: "name",
    },
    {
-      Header: 'Code', 
+      Header: formatMessage({id:'code'}), 
      accessor: 'code',
      className: "code",
      width: 120,
    },
    {
-      Header: 'Credit',
+      Header: formatMessage({id:'credit'}),
      accessor: r => (<Money amount={r.credit} currency="USD" />),
      className: 'credit',
      width: 120,
    },
    {
-      Header: 'Debit',
+      Header: formatMessage({id:'debit'}),
      accessor: r => (<Money amount={r.debit} currency="USD" />),
      className: 'debit',
      width: 120,
    },
    {
-      Header: 'Balance',
+      Header: formatMessage({id:'balance'}),
      accessor: r => (<Money amount={r.balance} currency="USD" />),
      className: 'balance',
      width: 120,
--- a/client/src/containers/Items/ItemForm.js
+++ b/client/src/containers/Items/ItemForm.js
@@ -57,10 +57,10 @@ const ItemForm = ({

  const ItemTypeDisplay = useMemo(
    () => [
-      { value: null, label: 'Select Item Type' },
-      { value: 'service', label: 'Service' },
-      { value: 'inventory', label: 'Inventory' },
-      { value: 'non-inventory', label: 'Non-Inventory' },
+      { value: null, label: formatMessage({id:'select_item_type'}) },
+      { value: 'service', label: formatMessage({id:'service'}) },
+      { value: 'inventory', label: formatMessage({id:'inventory'}) },
+      { value: 'non-inventory', label: formatMessage({id:'non_inventory'}) },
    ],
    []
  );
@@ -308,7 +308,7 @@ const ItemForm = ({
                    rightIcon='caret-down'
                    text={getSelectedAccountLabel(
                      'category_id',
-                      'Select category'
+                      formatMessage({id:'select_category'})
                    )}
                  />
                </Select>
@@ -399,7 +399,7 @@ const ItemForm = ({
                  rightIcon='caret-down'
                  text={getSelectedAccountLabel(
                    'sell_account_id',
-                    'Select account'
+                    formatMessage({id:'select_account'})
                  )}
                />
              </Select>
@@ -462,7 +462,8 @@ const ItemForm = ({
                  rightIcon='caret-down'
                  text={getSelectedAccountLabel(
                    'cost_account_id',
-                    'Select account'
+                    formatMessage({id:'select_account'})
+                    
                  )}
                />
              </Select>
@@ -508,7 +509,8 @@ const ItemForm = ({
                  rightIcon='caret-down'
                  text={getSelectedAccountLabel(
                    'inventory_account_id',
-                    'Select account'
+                    formatMessage({id:'select_account'})
+
                  )}
                />
              </Select>
--- a/client/src/containers/Items/ItemsActionsBar.js
+++ b/client/src/containers/Items/ItemsActionsBar.js
@@ -38,23 +38,26 @@ const ItemsActionsBar = ({
  const { path } = useRouteMatch();
  const history = useHistory();
  const [filterCount, setFilterCount] = useState(0);
-
-  const viewsMenuItems = itemsViews.map(view => 
-    (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />));
+  const { formatMessage } = useIntl();
+  const viewsMenuItems = itemsViews.map((view) => (
+    <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
+  ));

  const onClickNewItem = () => {
-    history.push('/dashboard/items/new');
+    history.push('/items/new');
  };
-  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);

  const filterDropdown = FilterDropdown({
    fields: resourceFields,
    onFilterChange: (filterConditions) => {
      setFilterCount(filterConditions.length);
      onFilterChanged && onFilterChanged(filterConditions);
-    }
+    },
  });
- 
+
  const onClickNewCategory = useCallback(() => {
    openDialog('item-form', {});
  }, [openDialog]);
@@ -71,7 +74,7 @@ const ItemsActionsBar = ({
          <Button
            className={classNames(Classes.MINIMAL, 'button--table-views')}
            icon={<Icon icon='table' />}
-            text={<T id={'table_views'}/>}
+            text={<T id={'table_views'} />}
            rightIcon={'caret-down'}
          />
        </Popover>
@@ -81,14 +84,14 @@ const ItemsActionsBar = ({
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='plus' />}
-          text={<T id={'new_item'}/>}
+          text={<T id={'new_item'} />}
          onClick={onClickNewItem}
        />

        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='plus' />}
-          text={<T id={'new_category'}/>}
+          text={<T id={'new_category'} />}
          onClick={onClickNewCategory}
        />

@@ -99,7 +102,13 @@ const ItemsActionsBar = ({
        >
          <Button
            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
+            text={
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+              )
+            }
            icon={<Icon icon='filter' />}
          />
        </Popover>
@@ -109,19 +118,19 @@ const ItemsActionsBar = ({
            className={Classes.MINIMAL}
            intent={Intent.DANGER}
            icon={<Icon icon='trash' />}
-            text={<T id={'delete'}/>}
+            text={<T id={'delete'} />}
          />
        </If>

        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-import' />}
-          text={<T id={'import'}/>}
+          text={<T id={'import'} />}
        />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text={<T id={'export'}/>}
+          text={<T id={'export'} />}
        />
      </NavbarGroup>
    </DashboardActionsBar>
@@ -135,5 +144,5 @@ export default compose(
  })),
  withResourceDetail(({ resourceFields }) => ({
    resourceFields,
-  })),
+  }))
 )(ItemsActionsBar);
--- a/client/src/containers/Items/ItemsList.js
+++ b/client/src/containers/Items/ItemsList.js
@@ -50,7 +50,7 @@ function ItemsList({
  const { formatMessage } = useIntl();

  useEffect(() => {
-    changePageTitle('Items List');
+    changePageTitle(formatMessage({id:'items_list'}));
  }, [changePageTitle]);

  const fetchHook = useQuery('items-resource', () => {
@@ -135,8 +135,8 @@ function ItemsList({
          <Route
            exact={true}
            path={[
-              '/dashboard/items/:custom_view_id/custom_view',
-              '/dashboard/items'
+              '/items/:custom_view_id/custom_view',
+              '/items'
            ]}>
            <ItemsViewsTabs
              onViewChanged={handleCustomViewChanged} /> 
--- a/client/src/containers/Items/ItemsViewsTabs.js
+++ b/client/src/containers/Items/ItemsViewsTabs.js
@@ -20,6 +20,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import withViewDetail from 'containers/Views/withViewDetails';
 import withItems from 'containers/Items/withItems';

+import { FormattedMessage as T, useIntl } from 'react-intl';

 function ItemsViewsTabs({
  // #withViewDetail
@@ -45,7 +46,7 @@ function ItemsViewsTabs({

  const handleClickNewView = () => {
    setTopbarEditView(null);
-    history.push('/dashboard/custom_views/items/new');
+    history.push('/custom_views/items/new');
  };

  const handleViewLinkClick = () => {
@@ -73,7 +74,7 @@ function ItemsViewsTabs({
  }, [customViewId]);

  const tabs = itemsViews.map(view => {
-    const baseUrl = '/dashboard/items';
+    const baseUrl = '/items';
    const link = (
      <Link to={`${baseUrl}/${view.id}/custom_view`} onClick={handleViewLinkClick}>
        {view.name}
@@ -93,7 +94,7 @@ function ItemsViewsTabs({
        >
          <Tab
            id='all'
-            title={<Link to={`/dashboard/items`}>All</Link>}
+            title={<Link to={`/items`}><T id={'all'}/></Link>}
            onClick={handleViewLinkClick} />

          {tabs}
--- a/client/src/containers/Preferences/Accounts/Accounts.js
+++ b/client/src/containers/Preferences/Accounts/Accounts.js
@@ -2,16 +2,17 @@ import React from 'react';
 import {Tabs, Tab} from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 export default function AccountsPreferences() {
  const history = useHistory();
  const onChangeTabs = (currentTabId) => {
    switch(currentTabId) {
      default:
-        history.push('/dashboard/preferences/accounts/general');
+        history.push('/preferences/accounts/general');
        break;
      case 'custom_fields':
-        history.push('/dashboard/preferences/accounts/custom_fields');
+        history.push('/preferences/accounts/custom_fields');
        break;
    }
  };
@@ -21,8 +22,8 @@ export default function AccountsPreferences() {
        animate={true}
        large={true}
        onChange={onChangeTabs}>
-        <Tab id="general" title="General" />
-        <Tab id="custom_fields" title="Custom Fields" />
+        <Tab id="general" title={<T id={'general'}/>} />
+        <Tab id="custom_fields" title={<T id={'custom_fields'}/>} />
      </Tabs>

      <PreferencesSubContent preferenceTab="accounts" />
--- a/client/src/containers/Preferences/Accounts/AccountsCustomFields.js
+++ b/client/src/containers/Preferences/Accounts/AccountsCustomFields.js
@@ -18,6 +18,7 @@ import {connect} from 'react-redux';
 import {
  fetchResourceFields,
 } from 'store/customFields/customFields.actions';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 function AccountsCustomFields({ fetchResourceFields, fields }) {
  const fetchHook = useAsync(async () => {
@@ -30,13 +31,13 @@ function AccountsCustomFields({ fetchResourceFields, fields }) {

  const actionMenuList = (column) => (
    <Menu>
-      <MenuItem text="View Details" />
+      <MenuItem text={<T id={'view_details'}/>} />
      <MenuDivider />
-      <MenuItem text="Edit Account" />
-      <MenuItem text="New Account" />
+      <MenuItem text={<T id={'edit_account'}/>} />
+      <MenuItem text={<T id={'new_account'}/>} />
      <MenuDivider />
-      <MenuItem text="Inactivate Account" />
-      <MenuItem text="Delete Account" />
+      <MenuItem text={<T id={'inactivate_account'}/>} />
+      <MenuItem text={<T id={'delete_account'}/>} />
    </Menu>
  );

--- a/client/src/containers/Preferences/Currencies/CurrenciesList.js
+++ b/client/src/containers/Preferences/Currencies/CurrenciesList.js
@@ -21,6 +21,7 @@ import AppToaster from 'components/AppToaster';
 import withDashboard from 'connectors/Dashboard.connector';
 import withCurrencies from 'containers/Currencies/withCurrencies';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 function CurrenciesList({
@@ -36,7 +37,7 @@ function CurrenciesList({
  onFetchData,
 }) {
  const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
-
+  const { formatMessage } = useIntl()
  const fetchCurrencies = useQuery(['currencies-table'],
    () => requestFetchCurrencies());

@@ -60,7 +61,7 @@ function CurrenciesList({
      (response) => {
        setDeleteCurrencyState(false);
        AppToaster.show({
-          message: 'the_Currency_has_been_deleted',
+          message: formatMessage({id:'the_currency_has_been_successfully_deleted'}),
        });
      }
    );
@@ -69,11 +70,11 @@ function CurrenciesList({
  const actionMenuList = useCallback((currency) => (
    <Menu>
      <MenuItem
-        text='Edit Currency'
+        text={<T id={'edit_currency'} />}
        onClick={() => handleEditCurrency(currency)} />

      <MenuItem
-        text='Delete Currency'
+        text={<T id={'delete_currency'} />}
        onClick={() => onDeleteCurrency(currency)}
      />
    </Menu>
@@ -81,12 +82,12 @@ function CurrenciesList({

  const columns = useMemo(() => [
    {
-      Header: 'Currency Name',
+      Header: formatMessage({id:'currency_name'}),
      accessor: 'currency_name',
      width: 100,
    },
    {
-      Header: 'Currency Code',
+      Header: formatMessage({id:'currency_code'}),
      accessor: 'currency_code',
      className: 'currency_code',
      width: 100,
@@ -125,8 +126,8 @@ function CurrenciesList({
      />

      <Alert
-        cancelButtonText='Cancel'
-        confirmButtonText='Move to Trash'
+        cancelButtonText={<T id={'cancel'}/>}
+        confirmButtonText={<T id={'move_to_trash'}/>}
        icon='trash'
        intent={Intent.DANGER}
        isOpen={deleteCurrencyState}
--- a/client/src/containers/Preferences/General/General.js
+++ b/client/src/containers/Preferences/General/General.js
@@ -12,7 +12,6 @@ import {
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { Select } from '@blueprintjs/select';
-import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';

 import { compose, optionsMapToArray } from 'utils';
@@ -22,6 +21,7 @@ import AppToaster from 'components/AppToaster';

 import withSettings from 'containers/Settings/withSettings';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 function GeneralPreferences({
@@ -180,7 +180,7 @@ function GeneralPreferences({
    <div className='preferences__inside-content--general'>
      <form onSubmit={handleSubmit}>
        <FormGroup
-          label={'Organization Name'}
+          label={<T id={'organization_name'}/>}
          inline={true}
          intent={(errors.name && touched.name) && Intent.DANGER}
          helperText={<ErrorMessage name='name' {...{errors, touched}} />}
@@ -193,7 +193,7 @@ function GeneralPreferences({
        </FormGroup>

        <FormGroup
-          label={'Organization Industry'}
+          label={<T id={'organization_industry'}/>}
          inline={true}
          intent={(errors.industry && touched.industry) && Intent.DANGER}
          helperText={<ErrorMessage name='industry' {...{errors, touched}} />}
@@ -206,7 +206,7 @@ function GeneralPreferences({
        </FormGroup>

        <FormGroup
-          label={'Business Location'}
+          label={<T id={'business_location'}/>}
          className={classNames(
            'form-group--business-location',
            'form-group--select-list',
@@ -235,7 +235,7 @@ function GeneralPreferences({
        </FormGroup>

        <FormGroup
-          label={'Base Currency'}
+          label={<T id={'base_currency'}/>}
          className={classNames(
            'form-group--base-currency',
            'form-group--select-list',
@@ -264,7 +264,7 @@ function GeneralPreferences({
        </FormGroup>

        <FormGroup
-          label={'Fiscal Year'}
+          label={<T id={'fiscal_year'}/>}
          className={classNames(
            'form-group--fiscal-year',
            'form-group--select-list',
@@ -293,7 +293,7 @@ function GeneralPreferences({
        </FormGroup>

        <FormGroup
-          label={'Language'}
+          label={<T id={'language'}/>}
          inline={true}
          className={classNames(
            'form-group--language',
@@ -320,7 +320,7 @@ function GeneralPreferences({
          </Select>
        </FormGroup>
        <FormGroup
-          label={'Time Zone'}
+          label={<T id={'time_zone'}/>}
          inline={true}
          className={classNames(
            'form-group--time-zone',
@@ -338,7 +338,7 @@ function GeneralPreferences({
          />
        </FormGroup>
        <FormGroup
-          label={'Date Format'}
+          label={<T id={'date_format'}/>}
          inline={true}
          className={classNames(
            'form-group--language',
@@ -371,9 +371,9 @@ function GeneralPreferences({
            intent={Intent.PRIMARY}
            type='submit'
          >
-            {'Save'}
+            <T id={'save'}/>
          </Button>
-          <Button onClick={'handleClose'}>Close</Button>
+          <Button onClick={'handleClose'}><T id={'close'}/></Button>
        </div>
      </form>
    </div>
--- a/client/src/containers/Preferences/Users/UsersList.js
+++ b/client/src/containers/Preferences/Users/UsersList.js
@@ -24,6 +24,7 @@ import withUsers from 'containers/Users/withUsers';
 import withUsersActions from 'containers/Users/withUsersActions';

 import { compose } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 function UsersListPreferences({
@@ -33,7 +34,7 @@ function UsersListPreferences({

  // #withUsers  
  usersList,
-  
+
  // #withUsersActions
  requestDeleteUser,
  requestInactiveUser,
@@ -44,14 +45,14 @@ function UsersListPreferences({
 }) {
  const [deleteUserState, setDeleteUserState] = useState(false);
  const [inactiveUserState, setInactiveUserState] = useState(false);
-
-  const fetchUsers = useQuery('users-table', 
+  const { formatMessage } = useIntl()
+  const fetchUsers = useQuery('users-table',
    () => requestFetchUsers());

  const onInactiveUser = (user) => {
    setInactiveUserState(user);
  };
-  
+
  // Handle cancel inactive user alert
  const handleCancelInactiveUser = useCallback(() => {
    setInactiveUserState(false);
@@ -61,7 +62,7 @@ function UsersListPreferences({
  const handleConfirmUserActive = useCallback(() => {
    requestInactiveUser(inactiveUserState.id).then(() => {
      setInactiveUserState(false);
-      AppToaster.show({ message: 'the_user_has_been_inactivated' });
+      AppToaster.show({ message: formatMessage({id:'the_user_has_been_successfully_inactivated'}) });
    });
  }, [inactiveUserState, requestInactiveUser, requestFetchUsers]);

@@ -98,7 +99,7 @@ function UsersListPreferences({
    requestDeleteUser(deleteUserState.id).then((response) => {
      setDeleteUserState(false);
      AppToaster.show({
-        message: 'the_user_has_been_deleted',
+        message: formatMessage({id:'the_user_has_been_successfully_deleted'}),
      });
    });
  };
@@ -106,11 +107,11 @@ function UsersListPreferences({
  const actionMenuList = useCallback(
    (user) => (
      <Menu>
-        <MenuItem text='Edit User' onClick={onEditUser(user)} />
+        <MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
        <MenuDivider />
-        <MenuItem text='Edit Invite ' onClick={onEditInviteUser(user)} />
-        <MenuItem text='Inactivate User' onClick={() => onInactiveUser(user)} />
-        <MenuItem text='Delete User' onClick={() => onDeleteUser(user)} />
+        <MenuItem text={<T id={'edit_invite'} />} onClick={onEditInviteUser(user)} />
+        <MenuItem text={<T id={'inactivate_user'} />} onClick={() => onInactiveUser(user)} />
+        <MenuItem text={<T id={'delete_user'} />} onClick={() => onDeleteUser(user)} />
      </Menu>
    ),
    []
@@ -119,25 +120,25 @@ function UsersListPreferences({
  const columns = useMemo(() => [
    {
      id: 'full_name',
-      Header: 'Full Name',
-      accessor: 'full_name',
+      Header:formatMessage({id:'full_name'}),
+        accessor: 'full_name',
      width: 170,
    },
    {
      id: 'email',
-      Header: 'Email',
+      Header: formatMessage({id:'email'}),
      accessor: 'email',
      width: 150,
    },
    {
      id: 'phone_number',
-      Header: 'Phone Number',
+      Header: formatMessage({id:'phone_number'}),
      accessor: 'phone_number',
      width: 150,
    },
    {
      id: 'active',
-      Header: 'Status',
+      Header: formatMessage({id:'status'}),
      accessor: (user) =>
        user.active ? <span>Active</span> : <span>Inactivate</span>,
      width: 50,
@@ -174,8 +175,8 @@ function UsersListPreferences({
      />

      <Alert
-        cancelButtonText='Cancel'
-        confirmButtonText='Move to Trash'
+        cancelButtonText={<T id={'cancel'}/>}
+        confirmButtonText={<T id={'move_to_trash'}/>}
        icon='trash'
        intent={Intent.DANGER}
        isOpen={deleteUserState}
@@ -189,8 +190,8 @@ function UsersListPreferences({
      </Alert>

      <Alert
-        cancelButtonText='Cancel'
-        confirmButtonText='Inactivate'
+        cancelButtonText={<T id={'cancel'}/>}
+        confirmButtonText={<T id={'inactivate'}/>}
        icon='trash'
        intent={Intent.WARNING}
        isOpen={inactiveUserState}