WIP feature/breadcrumb/fix_localize

client/src/components/Authentication.js

@@ -8,7 +8,7 @@ export default function AuthenticationWrapper({
   isAuthenticated = false,
   ...rest
 }) {
-  const to = { pathname: '/dashboard/homepage' };
+  const to = { pathname: '/homepage' };
 
   return (
     <Route path='/auth'>

client/src/components/Breadcrumbs.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import routes from 'routes/dashboard';
+import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
+
+const PureBreadcrumbs = ({ breadcrumbs }) => (
+  <div>
+    {breadcrumbs.map(({ breadcrumb, path, match }) => (
+      <span key={path}>
+        <NavLink to={match.url}>{breadcrumb}</NavLink>
+        <span>/</span>
+      </span>
+    ))}
+  </div>
+
+  // <div>
+  //   {breadcrumbs.map(({ breadcrumb, match }, index) => (
+  //     <div key={match.url}>
+  //       <Link to={match.url || ""}>{breadcrumb}</Link>
+  //       {index < breadcrumbs.length - 1 && ">"}
+  //     </div>
+  //   ))}
+  // </div>
+);
+
+export default withBreadcrumbs(routes)(PureBreadcrumbs);

client/src/components/Dashboard/Dashboard.js

@@ -11,13 +11,13 @@ export default function Dashboard() {
   return (
     <div className='dashboard'>
       <Switch>
-        <Route path='/dashboard/preferences'>
+        <Route path='/preferences'>
           <Sidebar />
           <PreferencesSidebar />
           <PreferencesContent />
         </Route>
 
-        <Route path='/dashboard'>
+        <Route path='/'>
           <Sidebar />
           <DashboardContent />
         </Route>

client/src/components/Dashboard/DashboardContentRoute.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Route, Switch  } from 'react-router-dom';
 import routes from 'routes/dashboard'
+import Breadcrumbs from 'components/Breadcrumbs';
 
 export default function DashboardContentRoute() {
 
   return (
-    <Route pathname="/dashboard">
+    <Route pathname="/">
+      <Breadcrumbs/>
       <Switch>
         { routes.map((route, index) => (
           <Route

client/src/components/Dashboard/DashboardTopbar.js

@@ -24,7 +24,7 @@ function DashboardTopbar({
   const history = useHistory();
 
   const handlerClickEditView = () => {
-    history.push(`/dashboard/custom_views/${editViewId}/edit`);
+    history.push(`/custom_views/${editViewId}/edit`);
   };
 
   const maybleRenderPageSubtitle = pageSubtitle && <h3>{pageSubtitle}</h3>;
@@ -48,7 +48,7 @@ function DashboardTopbar({
               role='img'
               focusable='false'
             >
-              <title>Menu</title>
+              <title><T id={'menu'}/></title>
               <path
                 stroke='currentColor'
                 stroke-linecap='round'

client/src/components/Dashboard/TopbarUser.js

@@ -9,6 +9,7 @@ import {
   Popover
 } from '@blueprintjs/core';
 import t from 'store/types';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function DashboardTopbarUser({ logout }) {
   const history = useHistory();
@@ -20,12 +21,12 @@ function DashboardTopbarUser({ logout }) {
 
   const userAvatarDropMenu = useMemo(() => (
     <Menu>
-      <MenuItem icon="graph" text="Graph" />
+      <MenuItem icon="graph" text={<T id={'menu'}/>} />
-      <MenuItem icon="map" text="Map" />
+      <MenuItem icon="map" text={<T id={'graph'}/>} />
-      <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
+      <MenuItem icon="th" text={<T id={'table'}/>} shouldDismissPopover={false} />
-      <MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
+      <MenuItem icon="zoom-to-fit" text={<T id={'nucleus'}/>} disabled={true} />
       <MenuDivider />
-      <MenuItem icon="cog" text="Logout" onClick={onClickLogout} />
+      <MenuItem icon="cog" text={<T id={'logout'}/>} onClick={onClickLogout} />
     </Menu>
   ), [onClickLogout]);
 

client/src/components/Expenses/ExpenseForm.js

@@ -52,7 +52,7 @@ export default function ExpenseForm({
       submitExpense(values)
         .then(response => {
           AppToaster.show({
-            message: 'the_expense_has_been_submit'
+            message: formatMessage({id:'the_expense_has_been_successfully_created'})
           });
         })
         .catch(error => {});
@@ -108,11 +108,11 @@ export default function ExpenseForm({
 
   const paymentAccountLabel = state.selectedPaymentAccount
     ? state.selectedPaymentAccount.name
-    : 'Select Payment Account';
+    : <T id={'select_payment_account'}/>;
 
   const expenseAccountLabel = state.selectedExpenseAccount
     ? state.selectedExpenseAccount.name
-    : 'Select Expense Account';
+    : <T id={'select_expense_account'}/>;
 
   const handleClose = () => {};
 

client/src/components/Expenses/ExpensesActionsBar.js

@@ -50,7 +50,7 @@ export default function ExpensesActionsBar({
         <AnchorButton
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
-          href='/dashboard/expenses/new'
+          href='/expenses/new'
           text={<T id={'new_expense'}/>}
           onClick={onClickNewAccount}
         />

client/src/components/Expenses/ExpensesViewsTabs.js

@@ -17,7 +17,7 @@ function AccountsViewsTabs({ views }) {
   const {path} = useRouteMatch();
 
   const handleClickNewView = () => {
-    history.push('/dashboard/custom_views/new');
+    history.push('/custom_views/new');
   };
 
   const tabs = views.map((view) => {

client/src/components/FilterDropdown.js

@@ -19,9 +19,11 @@ export default function FilterDropdown({
   fields,
   onFilterChange,
 }) {
+  const {formatMessage} =useIntl();
+
   const conditionalsItems = useMemo(() => [
-    { value: 'and', label: 'AND' },
+    { value: 'and', label:formatMessage({id:'and'})  },
-    { value: 'or', label: 'OR' },
+    { value: 'or', label: formatMessage({id:'or'}) },
   ], []);
 
   const resourceFields = useMemo(() => [
@@ -29,11 +31,11 @@ export default function FilterDropdown({
   ], [fields]);
 
   const compatatorsItems = useMemo(() => [
-    {value: '', label: 'Select a compatator'},
+    {value: '', label:formatMessage({id:'select_a_comparator'})},
-    {value: 'equals', label: 'Equals'},
+    {value: 'equals', label: formatMessage({id:'equals'})},
-    {value: 'not_equal', label: 'Not Equal'},
+    {value: 'not_equal', label: formatMessage({id:'not_equal'})},
-    {value: 'contain', label: 'Contain'},
+    {value: 'contain', label: formatMessage({id:'contain'})},
-    {value: 'not_contain', label: 'Not Contain'},
+    {value: 'not_contain', label: formatMessage({id:'not_contain'})},
   ], []);
 
   const defaultFilterCondition = useMemo(() => ({

client/src/components/FinancialSheet.js

@@ -2,6 +2,7 @@ import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 import classnames from 'classnames';
 import LoadingIndicator from 'components/LoadingIndicator';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default function FinancialSheet({
   companyName,
@@ -18,39 +19,41 @@ export default function FinancialSheet({
   const formattedFromDate = moment(fromDate).format('DD MMMM YYYY');
   const formattedToDate = moment(toDate).format('DD MMMM YYYY');
   const nameModifer = name ? `financial-sheet--${name}` : '';
-
+  const { formatMessage } = useIntl();
-  const methodsLabels = useMemo(() => ({
+  const methodsLabels = useMemo(
-    'cash': 'Cash',
+    () => ({
-    'accural': 'Accural',
+      cash: formatMessage({id:'cash'}),
-  }), []);
+      accrual: formatMessage({id:'accrual'}),
+    }),
+    []
+  );
   const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
-  const basisLabel = useMemo(() => getBasisLabel(basis), [getBasisLabel, basis]);
+  const basisLabel = useMemo(() => getBasisLabel(basis), [
+    getBasisLabel,
+    basis,
+  ]);
 
   return (
     <div className={classnames('financial-sheet', nameModifer, className)}>
       <LoadingIndicator loading={loading} spinnerSize={34} />
 
-      <div className={classnames('financial-sheet__inner', {
+      <div
-        'is-loading': loading,
+        className={classnames('financial-sheet__inner', {
-      })}>
+          'is-loading': loading,
-        <h1 class="financial-sheet__title">
+        })}
-          { companyName }
+      >
-        </h1>
+        <h1 class='financial-sheet__title'>{companyName}</h1>
-        <h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
+        <h6 class='financial-sheet__sheet-type'>{sheetType}</h6>
-        <div class="financial-sheet__date">
+        <div class='financial-sheet__date'>
-          From { formattedFromDate } | To { formattedToDate }
+      <T id={'from'}/> {formattedFromDate} | <T id={'to'}/> {formattedToDate}
         </div>
 
-        <div class="financial-sheet__table">
+        <div class='financial-sheet__table'>{children}</div>
-          { children }
+        <div class='financial-sheet__accounting-basis'>{accountingBasis}</div>
-        </div>
-        <div class="financial-sheet__accounting-basis">
-          { accountingBasis }
-        </div>
 
-        { (basisLabel) && (
+        {basisLabel && (
-          <div class="financial-sheet__basis">
+          <div class='financial-sheet__basis'>
-            Accounting Basis: { basisLabel }
+            <T id={'accounting_basis'}/> {basisLabel}
           </div>
         )}
       </div>

client/src/components/Preferences/PreferencesContentRoute.js

@@ -4,11 +4,11 @@ import preferencesRoutes from 'routes/preferences'
 
 
 export default function DashboardContentRoute() {
-  const defaultTab = '/dashboard/preferences/general';
+  const defaultTab = '/preferences/general';
 
   return (
-    <Route pathname="/dashboard/preferences">
+    <Route pathname="/preferences">
-      <Redirect from='/dashboard/preferences' to={defaultTab} />
+      <Redirect from='/preferences' to={defaultTab} />
 
       <Switch>
         { preferencesRoutes.map((route, index) => (

client/src/components/Preferences/PreferencesTopbar.js

@@ -11,16 +11,16 @@ export default function PreferencesTopbar() {
       <h2>Accounts</h2>
 
       <div class="preferences__topbar-actions">
-        <Route pathname="/dashboard/preferences">
+        <Route pathname="/preferences">
           <Switch>
             <Route
               exact
-              path={'/dashboard/preferences/users'}
+              path={'/preferences/users'}
               component={UsersActions} />
 
             <Route
               exact
-              path={'/dashboard/preferences/currencies'}
+              path={'/preferences/currencies'}
               component={CurrenciesActions} />
           </Switch>
         </Route>

client/src/components/PrivateRoute.js

@@ -17,7 +17,7 @@ function PrivateRoute({
     <BodyClassName className={''}>
       <Route
         {...rest}
-        path="/dashboard"
+        path="/"
         render={_props =>
           isAuthenticated ? (<Component {..._props} />) :
           (

client/src/config/preferencesMenu.js

@@ -1,26 +1,29 @@
+import React  from 'react'
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 export default [
   {
-    text: 'General',
+    text: <T id={'general'}/>,
     disabled: false,
-    href: '/dashboard/preferences/general',
+    href: '/preferences/general',
   },
   {
-    text: 'Users',
+    text: <T id={'users'}/>,
-    href: '/dashboard/preferences/users',
+    href: '/preferences/users',
   },
   {
-    text: 'Currencies',
+    text: <T id={'currencies'}/>,
    
-    href: '/dashboard/preferences/currencies',
+    href: '/preferences/currencies',
   },
   {
-    text: 'Accountant',
+    text: <T id={'accountant'}/>,
     disabled: false,
-    href: '/dashboard/preferences/accountant',
+    href: '/preferences/accountant',
   },
   {
-    text: 'Accounts',
+    text: <T id={'accounts'}/>,
     disabled: false,
-    href: '/dashboard/preferences/accounts',
+    href: '/preferences/accounts',
   },
 ];

client/src/config/sidebarMenu.js

@@ -1,3 +1,5 @@
+import React  from 'react'
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default [
   {
@@ -6,9 +8,9 @@ export default [
   {
     icon: 'homepage',
     iconSize: 20,
-    text: 'Homepage',
+    text: <T id={'homepage'}/>,
     disabled: false,
-    href: '/dashboard/homepage',
+   href: '/homepage',
   },
   {
     divider: true,
@@ -16,19 +18,19 @@ export default [
   {
     icon: 'homepage',
     iconSize: 20,
-    text: 'Items',
+    text: <T id={'items'}/>,
     children: [
       {
-        text: 'Items List',
+        text: <T id={'items_list'}/>,
-        href: '/dashboard/items',
+        href: '/items',
       },
       {
-        text: 'New Item',
+        text: <T id={'new_item'}/>,
-        href: '/dashboard/items/new',
+        href: '/items/new',
       },
       {
-        text: 'Category List',
+        text: <T id={'category_list'}/>,
-        href: '/dashboard/items/categories',
+        href: '/items/categories',
       },
     ],
   },
@@ -38,42 +40,42 @@ export default [
   {
     icon: 'balance-scale',
     iconSize: 20,
-    text: 'Financial',
+    text: <T id={'financial'}/>,
     children: [
       {
-        text: 'Accounts Chart',
+        text: <T id={'accounts_chart'}/>,
-        href: '/dashboard/accounts',
+        href: '/accounts',
       },
       {
-        text: 'Manual Journal',
+        text: <T id={'manual_journal'}/>,
-        href: '/dashboard/accounting/manual-journals',
+        href: '/manual-journals',
       },
       {
-        text: 'Make Journal',
+        text: <T id={'make_journal'}/>,
-        href: '/dashboard/accounting/make-journal-entry',
+        href: '/make-journal-entry',
       },
       {
-        text: 'Exchange Rate',
+        text: <T id={'exchange_rate'}/>,
-        href: '/dashboard/ExchangeRates',
+        href: '/ExchangeRates',
       },
     ],
   },
   {
     icon: 'university',
     iconSize: 20,
-    text: 'Banking',
+    text: <T id={'banking'}/>,
     children: [],
   },
   {
     icon: 'shopping-cart',
     iconSize: 20,
-    text: 'Sales',
+    text: <T id={'sales'}/>,
     children: [],
   },
   {
     icon: 'balance-scale',
     iconSize: 20,
-    text: 'Purchases',
+    text: <T id={'purchases'}/>,
     children: [
       {
         icon: 'cut',
@@ -86,42 +88,42 @@ export default [
   {
     icon: 'analytics',
     iconSize: 18,
-    text: 'Financial Reports',
+    text: <T id={'financial_reports'}/>,
     children: [
       {
-        text: 'Balance Sheet',
+        text: <T id={'balance_sheet'}/>,
-        href: '/dashboard/accounting/balance-sheet',
+        href: '/balance-sheet',
       },
       {
-        text: 'Trial Balance Sheet',
+        text: <T id={'trial_balance_sheet'}/>,
-        href: '/dashboard/accounting/trial-balance-sheet',
+        href: '/trial-balance-sheet',
       },
       {
-        text: 'Journal',
+        text: <T id={'journal'}/>,
-        href: '/dashboard/accounting/journal-sheet',
+        href: '/journal-sheet',
       },
       {
-        text: 'General Ledger',
+        text: <T id={'general_ledger'}/>,
-        href: '/dashboard/accounting/general-ledger',
+        href: '/general-ledger',
       },
       {
-        text: 'Profit Loss Sheet',
+        text: <T id={'profit_loss_sheet'}/>,
-        href: '/dashboard/accounting/profit-loss-sheet',
+        href: '/profit-loss-sheet',
       },
     ],
   },
   {
-    text: 'Expenses',
+    text: <T id={'expenses'}/>,
     icon: 'receipt',
     iconSize: 18,
     children: [
       {
-        text: 'Expenses List',
+        text: <T id={'expenses'}/>,
-        href: '/dashboard/expenses',
+        href: '/expenses',
       },
       {
-        text: 'New Expenses',
+        text: <T id={'new_expenses'}/>,
-        href: '/dashboard/expenses/new',
+        href: '/expenses/new',
       },
     ],
   },
@@ -129,11 +131,11 @@ export default [
     divider: true,
   },
   {
-    text: 'Preferences',
+    text: <T id={'preferences'}/>,
-    href: '/dashboard/preferences',
+    href: '/preferences',
   },
   {
-    text: 'Auditing System',
+    text: <T id={'auditing_system'}/>,
-    href: '/dashboard/auditing/list',
+    href: '/auditing/list',
   },
 ];

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 (

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({

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',
+              '/manual-journals/:custom_view_id/custom_view',
-              '/dashboard/accounting/manual-journals',
+              '/manual-journals',
             ]}> 
           </Route>
         </Switch>

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}

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) => {

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',
+              '/accounts/:custom_view_id/custom_view',
-              '/dashboard/accounts',
+              '/accounts',
             ]}
           >
             <AccountsViewsTabs onViewChanged={handleViewChanged} />
@@ -310,8 +310,8 @@ function AccountsChart({
         </Alert>
 
         <Alert
-          cancelButtonText="Cancel"
+          cancelButtonText={<T id={'cancel'}/>}
-          confirmButtonText={`Delete (${selectedRowsCount})`}
+          confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
           icon="trash"
           intent={Intent.DANGER}
           isOpen={bulkDelete}

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

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 }

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>
 

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 = [];

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.
+            message: formatMessage({id:'check_your_email_for_a_link_to_reset'}),
-              If it doesn’t appear within a few minutes, check your spam folder.`,
             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,
             });
           }

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>

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);
           })

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);
           })

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) => {

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]);

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' />}

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'})
       });
     });
   };

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
@@ -31,7 +32,7 @@ function BalanceSheet({
   // #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'),
@@ -50,7 +51,7 @@ function BalanceSheet({
   }, [fetchHook]);
 
   useEffect(() => {
-    changePageTitle('Balance Sheet');
+    changePageTitle(formatMessage({ id: 'balance_sheet' }));
   }, []);
 
   // Handle re-fetch balance sheet after filter change.

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>

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 { 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,
@@ -52,8 +52,8 @@ export default function BalanceSheetHeader({
   }, [formik]);
 
   const filterAccountsOptions = useMemo(() => [
-    {key: '', name: 'Accounts with Zero Balance'},
+    { key: '', name: formatMessage({ id: 'accounts_with_zero_balance' }) },
-    {key: 'all-trans', name: 'All Transactions' },
+    { key: 'all-trans', name: formatMessage({ id: 'all_transactions' }) },
   ], []);
 
   const filterAccountRenderer = useCallback((item, { handleClick, modifiers, query }) => {
@@ -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}>
 
@@ -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>

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;

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, 

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(() => {
@@ -67,7 +69,7 @@ function GeneralLedger({
     fetchSheet.execute(parsedFilter);
   }, [setFilter, fetchSheet]);
 
-  const handleFilterChanged = () => {};
+  const handleFilterChanged = () => { };
 
   return (
     <DashboardInsider>

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>

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>

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:
@@ -56,9 +58,9 @@ export default function GeneralLedgerTable({
   }, []);
 
   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
@@ -68,13 +70,13 @@ export default function GeneralLedgerTable({
         getToggleAllRowsExpandedProps,
         isAllRowsExpanded
       }) => (
-        <span {...getToggleAllRowsExpandedProps()} className="toggle">
+          <span {...getToggleAllRowsExpandedProps()} className="toggle">
-          {isAllRowsExpanded ?
+            {isAllRowsExpanded ?
-            (<span class="arrow-down" />) :
+              (<span class="arrow-down" />) :
-            (<span class="arrow-right" />)
+              (<span class="arrow-right" />)
-          }
+            }
-        </span>
+          </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>
   );
 }

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],

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>

client/src/containers/FinancialStatements/Journal/JournalHeader.js

@@ -1,12 +1,12 @@
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
-import {Row, Col} from 'react-grid-system';
+import { Row, Col } from 'react-grid-system';
 import {
   Button,
   Intent,
 } from '@blueprintjs/core';
 import moment from 'moment';
-import {useFormik} from 'formik';
+import { useFormik } from 'formik';
-import {useIntl} from 'react-intl';
+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: {
@@ -48,7 +48,7 @@ export default function JournalHeader({
             type="submit"
             onClick={handleSubmitClick}
             className={'button--submit-filter'}>
-            { 'Run Report' }
+            <T id={'run_report'} />
           </Button>
         </Col>
       </Row>

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']),
     },

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>

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js

@@ -1,11 +1,11 @@
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
-import {Row, Col} from 'react-grid-system';
+import { Row, Col } from 'react-grid-system';
 import {
   Button,
 } from '@blueprintjs/core';
 import moment from 'moment';
-import {useFormik} from 'formik';
+import { useFormik } from 'formik';
-import {useIntl} from 'react-intl';
+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: {
@@ -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>

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) {

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={formatMessage({id:'cash'})} value="cash" />
-      <Radio label="Accural" value="accural" />
+      <Radio label={formatMessage({id:'accrual'})} value="accural" />
     </RadioGroup>
   );
 }

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}>

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>

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) => {

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 {
   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>

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,

client/src/containers/Items/ItemForm.js

@@ -57,10 +57,10 @@ const ItemForm = ({
 
   const ItemTypeDisplay = useMemo(
     () => [
-      { value: null, label: 'Select Item Type' },
+      { value: null, label: formatMessage({id:'select_item_type'}) },
-      { value: 'service', label: 'Service' },
+      { value: 'service', label: formatMessage({id:'service'}) },
-      { value: 'inventory', label: 'Inventory' },
+      { value: 'inventory', label: formatMessage({id:'inventory'}) },
-      { value: 'non-inventory', label: 'Non-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>

client/src/containers/Items/ItemsActionsBar.js

@@ -38,21 +38,24 @@ const ItemsActionsBar = ({
   const { path } = useRouteMatch();
   const history = useHistory();
   const [filterCount, setFilterCount] = useState(0);
-
+  const { formatMessage } = useIntl();
-  const viewsMenuItems = itemsViews.map(view => 
+  const viewsMenuItems = itemsViews.map((view) => (
-    (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />));
+    <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(() => {
@@ -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);

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',
+              '/items/:custom_view_id/custom_view',
-              '/dashboard/items'
+              '/items'
             ]}>
             <ItemsViewsTabs
               onViewChanged={handleCustomViewChanged} /> 

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}

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="general" title={<T id={'general'}/>} />
-        <Tab id="custom_fields" title="Custom Fields" />
+        <Tab id="custom_fields" title={<T id={'custom_fields'}/>} />
       </Tabs>
 
       <PreferencesSubContent preferenceTab="accounts" />

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={<T id={'edit_account'}/>} />
-      <MenuItem text="New Account" />
+      <MenuItem text={<T id={'new_account'}/>} />
       <MenuDivider />
-      <MenuItem text="Inactivate Account" />
+      <MenuItem text={<T id={'inactivate_account'}/>} />
-      <MenuItem text="Delete Account" />
+      <MenuItem text={<T id={'delete_account'}/>} />
     </Menu>
   );
 

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'
+        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText='Move to Trash'
+        confirmButtonText={<T id={'move_to_trash'}/>}
         icon='trash'
         intent={Intent.DANGER}
         isOpen={deleteCurrencyState}

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>

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({
@@ -44,7 +45,7 @@ function UsersListPreferences({
 }) {
   const [deleteUserState, setDeleteUserState] = useState(false);
   const [inactiveUserState, setInactiveUserState] = useState(false);
-
+  const { formatMessage } = useIntl()
   const fetchUsers = useQuery('users-table',
     () => requestFetchUsers());
 
@@ -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={<T id={'edit_invite'} />} onClick={onEditInviteUser(user)} />
-        <MenuItem text='Inactivate User' onClick={() => onInactiveUser(user)} />
+        <MenuItem text={<T id={'inactivate_user'} />} onClick={() => onInactiveUser(user)} />
-        <MenuItem text='Delete User' onClick={() => onDeleteUser(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',
+      Header:formatMessage({id:'full_name'}),
-      accessor: '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'
+        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText='Move to Trash'
+        confirmButtonText={<T id={'move_to_trash'}/>}
         icon='trash'
         intent={Intent.DANGER}
         isOpen={deleteUserState}
@@ -189,8 +190,8 @@ function UsersListPreferences({
       </Alert>
 
       <Alert
-        cancelButtonText='Cancel'
+        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText='Inactivate'
+        confirmButtonText={<T id={'inactivate'}/>}
         icon='trash'
         intent={Intent.WARNING}
         isOpen={inactiveUserState}

client/src/lang/en/index.js

@@ -3,7 +3,7 @@ export default {
   email_or_phone_number: 'Email or phone number',
   password: 'Password',
   login: 'Login',
-  invalid_email_or_phone_numner: 'Invalid email or phone number.',
+  invalid_email_or_phone_number: 'Invalid email or phone number.',
   required: 'Required',
   reset_password: 'Reset Password',
   the_user_has_been_suspended_from_admin: 'The user has been suspended from the administrator.',
@@ -67,6 +67,7 @@ export default {
   edit_account: 'Edit Account',
   new_account: 'New Account',
   edit_currency: 'Edit Currency',
+  delete_currency: 'Delete Currency',
   new_currency: 'New Currency',
   currency_name: 'Currency Name',
   currency_code: 'Currency Code',
@@ -134,6 +135,7 @@ export default {
   inactivate: 'Inactivate',
   activate: 'Activate',
   inactivate_account: 'Inactivate Account',
+  activate_account:'Activate Account',
   delete_account: 'Delete Account',
   code: 'Code',
   type: 'Type',
@@ -164,32 +166,143 @@ export default {
   new_custom_view: 'New Custom View',
   view_name: 'View Name',
   new_conditional: 'New Conditional',
-  'item': 'Item',
+  item: 'Item',
-  'account': 'Account',
+  service_has_been_successful_created: '{service} {name} has been successfully created.',
-  'service_has_been_successful_created': '{service} {name} has been successfully created.',
+  service_has_been_successful_edited: '{service} {name} has been successfully edited.',
-  'service_has_been_successful_edited': '{service} {name} has been successfully edited.',
+  you_are_about_permanently_delete_this_journal: `You're about to permanently delete this journal and all its transactions on accounts and attachments, and all of its data. <br /><br />If you're not sure, you can archive this journal instead.`,
-  'you_are_about_permanently_delete_this_journal': `You're about to permanently delete this journal and all its transactions on accounts and attachments, and all of its data. <br /><br />If you're not sure, you can archive this journal instead.`,
+  once_delete_these_accounts_you_will_not_able_restore_them: 'Once you delete these accounts, you won\'t be able to retrieve them later. Are you sure you want to delete them?',
-  'once_delete_these_accounts_you_will_not_able_restore_them': 'Once you delete these accounts, you won\'t be able to retrieve them later. Are you sure you want to delete them?',
+  once_delete_these_service_you_will_not_able_restore_it: 'Once you delete these {service}, you won\'t be able to retrieve them later. Are you sure you want to delete this {service}?',
-  'once_delete_these_service_you_will_not_able_restore_it': 'Once you delete these {service}, you won\'t be able to retrieve them later. Are you sure you want to delete this {service}?',
+  you_could_not_delete_predefined_accounts: 'You could\'t delete predefined accounts.',
-  'you_could_not_delete_predefined_accounts': 'You could\'t delete predefined accounts.',
+  cannot_delete_account_has_associated_transactions: 'you could\'t not delete account that has associated transactions.',
-  'cannot_delete_account_has_associated_transactions': 'you could\'t not delete account that has associated transactions.',
+  the_account_has_been_successfully_inactivated: 'The account has been successfully inactivated.',
-  'the_account_has_been_successfully_inactivated': 'The account has been successfully inactivated.',
+  the_account_has_been_successfully_activated: 'The account has been successfully activated.',
-  'the_account_has_been_successfully_activated': 'The account has been successfully activated.',
+  the_account_has_been_successfully_deleted: 'The account has been successfully deleted.',
-  'the_account_has_been_successfully_deleted': 'The account has been successfully deleted.',
+  the_accounts_has_been_successfully_deleted: 'The accounts have been successfully deleted.',
-  'the_accounts_has_been_successfully_deleted': 'The accounts have been successfully deleted.',
+  are_sure_to_inactive_this_account: 'Are you sure you want to inactive this account? You will be able to activate it later',
-  'are_sure_to_inactive_this_account': 'Are you sure you want to inactive this account? You will be able to activate it later',
+  are_sure_to_activate_this_account: 'Are you sure you want to activate this account? You will be able to inactivate it later',
-  'are_sure_to_activate_this_account': 'Are you sure you want to activate this account? You will be able to inactivate it later',
+  once_delete_this_account_you_will_able_to_restore_it: `Once you delete this account, you won\'t be able to restore it later. Are you sure you want to delete this account?<br /><br />If you're not sure, you can inactivate this account instead.`,
-  'once_delete_this_account_you_will_able_to_restore_it': `Once you delete this account, you won\'t be able to restore it later. Are you sure you want to delete this account?<br /><br />If you're not sure, you can inactivate this account instead.`,
+  the_journal_has_been_successfully_created: 'The journal #{number} has been successfully created.',
-  'the_journal_has_been_successfully_created': 'The journal #{number} has been successfully created.',
+  the_journal_has_been_successfully_edited: 'The journal #{number} has been successfully edited.',
-  'the_journal_has_been_successfully_edited': 'The journal #{number} has been successfully edited.',
+  credit: 'Credit',
-  'credit': 'Credit',
+  debit: 'Debit',
-  'debit': 'Debit',
+  once_delete_this_item_you_will_able_to_restore_it: `Once you delete this item, you won\'t be able to restore the item later. Are you sure you want to delete ?<br /><br />If you're not sure, you can inactivate it instead.`,
-  'once_delete_this_item_you_will_able_to_restore_it': `Once you delete this item, you won\'t be able to restore the item later. Are you sure you want to delete ?<br /><br />If you're not sure, you can inactivate it instead.`,
+  the_item_has_been_successfully_deleted: 'The item has been successfully deleted.',
-  'the_item_has_been_successfully_deleted': 'The item has been successfully deleted.',
+  the_item_category_has_been_successfully_created: 'The item category has been successfully created.',
-  'the_item_category_has_been_successfully_created': 'The item category has been successfully created.',
+  the_item_category_has_been_successfully_edited: 'The item category has been successfully edited.',
-  'the_item_category_has_been_successfully_edited': 'The item category has been successfully edited.',
+  once_delete_these_views_you_will_not_able_restore_them: 'Once you delete the custom view, you won\'t be able to restore it later. Are you sure you want to delete this view?',
-  'once_delete_these_views_you_will_not_able_restore_them': 'Once you delete the custom view, you won\'t be able to restore it later. Are you sure you want to delete this view?',
+  the_custom_view_has_been_successfully_deleted: 'The custom view has been successfully deleted.',
-  'the_custom_view_has_been_successfully_deleted': 'The custom view has been successfully deleted.',
+  teammate_invited_to_organization_account: 'Your teammate has been invited to the organization account.',
-  'teammate_invited_to_organization_account': 'Your teammate has been invited to the organization account.',
+  select_account_type: 'Select account type',
-  'select_account_type': 'Select account type',
+  menu:'Menu',
+  graph:'Graph',
+  map:'Map',
+  table:'Table',
+  nucleus:'Nucleus',
+  logout:'Logout',
+  the_expense_has_been_successfully_created: 'The expense has been successfully created.',
+  select_payment_account:'Select Payment Account',
+  select_expense_account:'Select Expense Account',
+  and:'And',
+  or:'OR',
+ select_a_comparator:'Select a comparator',
+ equals:'Equals',
+ not_equal:'Not Equal',
+ contain:'Contain',
+ not_contain:'Not Contain',
+ cash:'Cash',
+ accrual:'Accrual',
+ from:'From',
+ to:'To',
+ accounting_basis:'Accounting Basis:',
+ general:'General',
+ users:'Users',
+ currencies:'Currencies',
+ accountant:'Accountant',
+ accounts:'Accounts',
+ homepage:'Homepage',
+items_list:'Items List',
+new_item:'New Item',
+items:'Items',
+category_list:'Category List',
+financial:'Financial',
+accounts_chart:'Accounts Chart',
+manual_journal:'Manual Journal',
+make_journal:'Make Journal',
+exchange_rate:'Exchange Rate',
+banking:'Banking',
+sales:'Sales',
+purchases:'Purchases',
+financial_reports:'Financial Reports',
+balance_sheet:'Balance Sheet',
+trial_balance_sheet:'Trial Balance Sheet',
+journal:'Journal',
+general_ledger:'General Ledger',
+profit_loss_sheet:'Profit Loss Sheet',
+expenses:'Expenses',
+expenses_list:'Expenses List',
+new_expenses:'New Expenses',
+preferences:'Preferences',
+auditing_system:'Auditing System',
+all:'All',
+organization:'Organization.',
+check_your_email_for_a_link_to_reset: 'Check your email for a link to reset your password.If it doesn’t appear within a few minutes, check your spam folder.',
+we_couldn_t_find_your_account_with_that_email:'We couldn\'t find your account with that email.',
+select_parent_account:'Select Parent Account',
+the_exchange_rate_has_been_successfully_edited:'The exchange rate has been successfully edited',
+the_exchange_rate_has_been_successfully_created:'The exchange rate has been successfully created',
+the_exchange_rate_has_been_successfully_deleted: 'The  exchange rate has been successfully deleted.',
+the_user_details_has_been_updated:'The user details has been updated',
+the_category_has_been_successfully_created: 'The category has been successfully created.',
+filters_applied:'filters applied',
+the_expense_has_been_successfully_deleted: 'The expense has been successfully deleted.',
+select_item_type:'Select Item Type',
+service:'Service',
+inventory:'Inventory',
+non_inventory:'Non-Inventory',
+select_category:'Select category',
+select_account:'Select Account',
+custom_fields:'Custom Fields',
+the_currency_has_been_successfully_deleted:'The currency has been successfully deleted',
+organization_industry:'Organization Industry',
+business_location:'Business Location',
+base_currency:'Base Currency',
+fiscal_year:'Fiscal Year',
+language:'Language',
+time_zone:'Time Zone',
+date_format:'Date Format',
+edit_user:'Edit User',
+edit_invite:'Edit Invite',
+inactivate_user:'Inactivate User',
+delete_user:'Delete User',
+full_name:'Full Name',
+the_user_has_been_successfully_inactivated: 'The user has been successfully inactivated.',
+the_user_has_been_successfully_deleted: 'The user has been successfully deleted.',
+customize_report:'Customize Report',
+print:'Print',
+export:'Export',
+accounts_with_zero_balance:'Accounts with Zero Balance',
+all_transactions:'All Transactions',
+filter_accounts:'Filter Accounts',
+calculate_report:'Calculate Report',
+total:'Total',
+specific_accounts:'Specific Accounts',
+trans_num:'Trans. NUM',
+journal_sheet:'Journal Sheet',
+run_report:'Run Report',
+num:'Num.',
+acc_code:'Acc. Code',
+display_report_columns:'Display report columns',
+select_display_columns_by:'Select display columns by...'
+
+
+
+
+
+
+
+
+
 };
+
+
+

client/src/routes/dashboard.js

@@ -1,136 +1,153 @@
 import LazyLoader from 'components/LazyLoader';
 
-const BASE_URL = '/dashboard';
+// const BASE_URL = '/dashboard';
 
 export default [
   // Homepage
   {
-    path: `${BASE_URL}/homepage`,
+    path: `/homepage`,
     component: LazyLoader({
       loader: () => import('containers/Homepage/Homepage'),
     }),
+    breadcrumb: 'Home',
   },
 
   // Accounts.
   {
-    path: `${BASE_URL}/accounts`,
+    path: `/accounts`,
     component: LazyLoader({
       loader: () => import('containers/Accounts/AccountsChart'),
     }),
+    breadcrumb: 'Accounts Chart',
   },
 
   // Custom views.
   {
-    path: `${BASE_URL}/custom_views/:resource_slug/new`,
+    path: `/custom_views/:resource_slug/new`,
     component: LazyLoader({
       loader: () => import('containers/Views/ViewFormPage'),
     }),
+    breadcrumb: 'New',
   },
   {
-    path: `${BASE_URL}/custom_views/:view_id/edit`,
+    path: `/custom_views/:view_id/edit`,
     component: LazyLoader({
       loader: () => import('containers/Views/ViewFormPage'),
     }),
+    breadcrumb: 'Edit',
   },
 
   // Expenses.
   {
-    path: `${BASE_URL}/expenses/new`,
+    path: `/expenses/new`,
     component: LazyLoader({
       loader: () => import('containers/Expenses/ExpenseForm'),
     }),
+    breadcrumb: 'New Expense',
   },
   {
-    path: `${BASE_URL}/expenses`,
+    path: `/expenses`,
     component: LazyLoader({
       loader: () => import('containers/Expenses/ExpensesList'),
     }),
+    breadcrumb: 'Expenses',
   },
 
   // Accounting
   {
-    path: `${BASE_URL}/accounting/make-journal-entry`,
+    path: `/make-journal-entry`,
     component: LazyLoader({
       loader: () => import('containers/Accounting/MakeJournalEntriesPage'),
     }),
+    breadcrumb: 'Make Journal Entry',
   },
   {
-    path: `${BASE_URL}/accounting/manual-journals/:id/edit`,
+    path: `/manual-journals/:id/edit`,
     component: LazyLoader({
       loader: () => import('containers/Accounting/MakeJournalEntriesPage'),
     }),
+    breadcrumb: 'Edit',
   },
   {
-    path: `${BASE_URL}/accounting/manual-journals`,
+    path: `/manual-journals`,
     component: LazyLoader({
       loader: () => import('containers/Accounting/ManualJournalsList'),
     }),
+    breadcrumb: 'Manual Journals',
   },
   {
-    path: `${BASE_URL}/items/categories`,
+    path: `/items/categories`,
     component: LazyLoader({
       loader: () => import('containers/Items/ItemCategoriesList'),
     }),
+    breadcrumb: 'Categories',
   },
   {
-    path: `${BASE_URL}/items/new`,
+    path: `/items/new`,
     component: LazyLoader({
       loader: () => import('containers/Items/ItemFormPage'),
     }),
+    breadcrumb: 'New Item',
   },
 
   // Items
   {
-    path: `${BASE_URL}/items`,
+    path: `/items`,
     component: LazyLoader({
       loader: () => import('containers/Items/ItemsList'),
     }),
+    breadcrumb: 'Items',
   },
 
   // Financial Reports.
   {
-    path: `${BASE_URL}/accounting/general-ledger`,
+    path: `/general-ledger`,
     component: LazyLoader({
       loader: () =>
         import('containers/FinancialStatements/GeneralLedger/GeneralLedger'),
     }),
+    breadcrumb: 'General Ledger',
   },
   {
-    path: `${BASE_URL}/accounting/balance-sheet`,
+    path: `/balance-sheet`,
     component: LazyLoader({
       loader: () =>
         import('containers/FinancialStatements/BalanceSheet/BalanceSheet'),
     }),
+    breadcrumb: 'Balance Sheet',
   },
   {
-    path: `${BASE_URL}/accounting/trial-balance-sheet`,
+    path: `/trial-balance-sheet`,
     component: LazyLoader({
       loader: () =>
         import(
           'containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet'
         ),
+      breadcrumb: 'Trial Balance Sheet',
     }),
   },
   {
-    path: `${BASE_URL}/accounting/profit-loss-sheet`,
+    path: `/profit-loss-sheet`,
     component: LazyLoader({
       loader: () =>
         import(
           'containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet'
         ),
+      breadcrumb: 'Profit Loss Sheet',
     }),
   },
   {
-    path: `${BASE_URL}/accounting/journal-sheet`,
+    path: `/journal-sheet`,
     component: LazyLoader({
       loader: () => import('containers/FinancialStatements/Journal/Journal'),
     }),
+    breadcrumb: 'Journal Sheet',
   },
   {
-    path: `${BASE_URL}/ExchangeRates`,
+    path: `/ExchangeRates`,
     component: LazyLoader({
-      loader: () =>
+      loader: () => import('containers/ExchangeRates/ExchangeRate'),
-        import('containers/ExchangeRates/ExchangeRate'),
     }),
+    breadcrumb: 'Exchange Rates',
   },
 ];

client/src/routes/preferences.js

@@ -4,7 +4,7 @@ import Accountant from 'containers/Preferences/Accountant/Accountant';
 import Accounts from 'containers/Preferences/Accounts/Accounts';
 import CurrenciesList from 'containers/Preferences/Currencies/CurrenciesList'
 
-const BASE_URL = '/dashboard/preferences';
+const BASE_URL = '/preferences';
 
 export default [
   {

client/src/store/resources/resources.reducer.js

@@ -11,15 +11,15 @@ const initialState = {
   metadata: {
     'accounts': {
       label: 'Accounts',
-      baseRoute: '/dashboard/accounts',
+      baseRoute: '/accounts',
     },
     'items': {
       label: 'Items',
-      baseRoute: '/dashboard/items',
+      baseRoute: '/items',
     },
     'manual_journals': {
       label: 'Journals',
-      baseRoute: '/dashboard/accounting/manual-journals',
+      baseRoute: '/manual-journals',
     }
   }
 };